production refactor

src/render/components/input.js

@@ -0,0 +1,39 @@
+import useText from "./control/text.js";
+import draggify from "./control/draggify.js";
+
+const Input = 
+{
+    setup()
+    {
+        const recording = Vue.ref(false);
+
+        const { elementX, elementY } =  draggify("input", 15);
+
+        const { leftSide, show } = useText("input-text", elementX);
+
+        window.mainApi.on("record", (status) => recording.value = status);
+
+        return { elementX, elementY, recording, leftSide, show };
+    },
+
+    template: `
+        <div id="input" :class="{ audio: recording }"
+            :style="{ top: elementY + 'px', left: elementX + 'px' }"
+        >
+
+            <div id="input-icon"></div>
+
+            <input 
+                id="input-text" type="text"
+                :class="[
+                    { leftSide: leftSide }, 
+                    { show: show }, 
+                    { recording: recording }
+                ]"
+            />
+
+        </div> `
+}
+
+export default Input;
+