add event handler to input event

src/components/UI/UIDetails/inputItem.vue

@@ -1,68 +1,70 @@
 <template>
-    <svg
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      width="500"
+  <div class="inputContainer">
+    <input
+      v-model="input"
+      type="text"
     >
-  <g
-  >
-    <rect
-      x="30"
-      y="10"
-      width="500"
-      height="100"
-      rx="20"
-      fill="#61b4f4"
-    />
-    <text
-      font-size="14"
-      font-family="SF Pro"
-    >
-      <tspan
-           dy="16"
-           x="0"
-      >
-        {{ input }}
-      </tspan>
-    </text>
-  </g>
-    </svg>
+  </div>
 </template>
 
 <script>
- import { defineComponent, ref, onUnmounted } from "vue";
- export default defineComponent({
-     name: "InputItem",
-     setup() {
-        const input = ref("");
+import { defineComponent, ref, onUnmounted, inject } from "vue";
+export default defineComponent({
+  name: "InputItem",
+  setup() {
+    const input = ref("");
+    const emitter = inject('mitt')
 
-         function handleInput(e) {
-           const inputCode = e.keyCode;
-           const cmd = String.fromCharCode(inputCode).toLowerCase();
+    // submits newSelfMessage event
+    function handleEnterKey() {
+        // does nothing if input value is empty
+        if (input.value === "") {
+            return;
+        }
 
-             switch(inputCode) {
-                case 13:
-                  console.log('enter was pressed');
-                  break;
-                case 8:
-                  console.log('delete was pressed');
-                  input.value = input.value.slice(0, -1);
-                  break;
-                 default:
-                  input.value += cmd;
-             }
-         }
+        const message = {
+            content: input.value,
+            signature: 'EnriqueH',
+            outgoing: true,
+            modifier: "sf",
+            imgURL: '/test/path',
+            id: null
+        };
+        // fire event with message payload
+        emitter.emit('newSelfMessage', message);
+    }
 
-         window.addEventListener("keydown", handleInput);
+    function handleInput(e) {
+      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;
+        }
+    }
 
-         onUnmounted(() => {
-            window.removeEventListener("keydown", handleInput);
-         })
+    window.addEventListener("keydown", handleInput);
 
-         return {
-             input
-         }
-     }
- })
+    onUnmounted(() => {
+      window.removeEventListener("keydown", handleInput);
+    });
+
+    return {
+      input
+    };
+  }
+})
 </script>
+
+<style lang="scss" scoped>
+ .inputContainer {
+
+    
+ }
+</style>