add keydownHandler

src/components/UI/UIDetails/inputItem.vue

@@ -1,19 +1,50 @@
 <template>
   <div class="inputContainer">
-    <input
-      v-model="input"
-      type="text"
-    >
+      <!-- <input
+           class="inputItem"
+           v-model="input"
+           :size="input.length"
+           v-if="input.length > 0"
+           type="text"
+           autofocus
+           > -->
+
+      <foreignObject x="10" y="10" width="100%" height="100%">
+        <div xmlns="http://www.w3.org/1999/xhtml">
+          <input
+            class="inputItem"
+            v-model="input"
+            :size="input.length"
+            v-if="input.length > 0"
+            type="text"
+          >
+        </div>
+      </foreignObject>
+      <svg width="100%" xmlns="http://www.w3.org/2000/svg">
+        <foreignObject x="10" y="10" width="100%" height="100%">
+          <div xmlns="http://www.w3.org/1999/xhtml">
+            <input
+              class="inputItem"
+              v-model="input"
+              :size="input.length"
+              v-if="input.length > 0"
+              type="text"
+            >
+          </div>
+        </foreignObject>
+      </svg>
   </div>
 </template>
 
 <script>
+import useKeyDownHandler from "@/composables/useKeyDownHandler";
 import { defineComponent, ref, onUnmounted, inject } from "vue";
 export default defineComponent({
   name: "InputItem",
   setup() {
+    const emitter = inject('mitt');
     const input = ref("");
-    const emitter = inject('mitt')
+    const {keyDownHandler} = useKeyDownHandler();
 
     // submits newSelfMessage event
     function handleEnterKey() {
@@ -21,7 +52,6 @@ export default defineComponent({
         if (input.value === "") {
             return;
         }
-
         const message = {
             content: input.value,
             signature: 'EnriqueH',
@@ -34,25 +64,32 @@ export default defineComponent({
         emitter.emit('newSelfMessage', message);
     }
 
+    // handles window keydown event
     function handleInput(e) {
+      // gets char keyCode and char value
       const inputCode = e.keyCode;
       const cmd = String.fromCharCode(inputCode).toLowerCase();
-        switch(inputCode) {
-          case 13:
-            handleEnterKey();
-            break;
-          case 8:
-            input.value = input.value.slice(0, -1);
-            break;
-          default:
-            input.value += cmd;
-        }
+
+      // handles input cases
+      switch(inputCode) {
+        // handles Enter press: 13
+        case 13:
+          handleEnterKey();
+          break;
+        // handles Delete press: 8
+        case 8:
+          input.value = input.value.slice(0, -1);
+          break;
+        default:
+          input.value += cmd;
+      }
     }
 
-    window.addEventListener("keydown", handleInput);
-
+    // add window event listener
+    window.addEventListener("keydown", keyDownHandler);
+    // remove Event Listener on component unMount
     onUnmounted(() => {
-      window.removeEventListener("keydown", handleInput);
+      window.removeEventListener("keydown", keyDownHandler);
     });
 
     return {
@@ -63,8 +100,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
- .inputContainer {
-
-    
+ .inputItem {
+     /* width: 100%; */
+   color: #fff;
+   padding-top: 5px;
+   padding-bottom: 5px;
+   border: 0;
+   text-align: center;
+   background-color: #61b4f4;
+   border-radius: 25px;
  }
 </style>