integrate input item

src/components/UI/UIDetails/inputItem.vue

@@ -1,10 +1,8 @@
 <template>
-  <foreignObject x="10" y="10" width="100%" height="100%">
+  <foreignObject class="inputContainer" :x="x" y="450" width="55%" height="50%">
     <div xmlns="http://www.w3.org/1999/xhtml">
-      <div contenteditable
-        v-if="input.length > 0"
-      >
-        {{ input }}
+      <div class="inputBubble" contenteditable v-show="input.length > 0">
+        <p>{{ input }}</p>
       </div>
     </div>
   </foreignObject>
@@ -12,11 +10,30 @@
 
 <script lang="ts">
 import useKeyDownHandler from "@/composables/keyDownHandler/useKeyDownHandler";
-import { defineComponent, onUnmounted } from "vue";
+import AnimeFunc from "@/types/animejs/index";
+import {
+  defineComponent,
+  onUnmounted,
+  computed,
+  ref,
+  onMounted,
+  watch,
+  inject,
+} from "vue";
 export default defineComponent({
   name: "InputItem",
   setup() {
-    const {keyDownHandler, input} = useKeyDownHandler();
+    const emitter: any = inject("mitt");
+    emitter.on("newSelfMessage", (payload: any) => console.log("foo", payload));
+    const { keyDownHandler, input } = useKeyDownHandler();
+    const inputHeight = ref(42);
+    let inputBubble: HTMLElement;
+    const inputWidth = ref(0);
+
+    // imports animejs safely
+    let anime: AnimeFunc;
+    const animeInject: AnimeFunc | undefined = inject("animejs");
+    if (animeInject) anime = animeInject;
 
     // add window event listener
     window.addEventListener("keydown", keyDownHandler);
@@ -25,24 +42,63 @@ export default defineComponent({
       window.removeEventListener("keydown", keyDownHandler);
     });
 
+    watch(input, async (input, prevInput) => {
+      const inputDivs = await document.getElementsByClassName("inputBubble");
+      const height = inputDivs[0].getBoundingClientRect().height;
+      inputWidth.value = inputDivs[0].getBoundingClientRect().width;
+      const foreignObjectDiv = document.getElementsByClassName(
+        "inputContainer"
+      );
+      if (height !== inputHeight.value) {
+        inputHeight.value = height;
+      }
+      const foreignEl = foreignObjectDiv[0] as HTMLElement;
+      if (inputHeight.value === 0) {
+        anime({
+          targets: foreignEl,
+          translateY: -10,
+        });
+      } else if (inputHeight.value > 36) {
+        anime({
+          targets: foreignEl,
+          translateY: -inputHeight.value + 30,
+          easing: "easeOutQuad",
+          duration: 150,
+        });
+      }
+    });
+
+    const x = computed(() => {
+      return `calc(50% - ${inputWidth.value / 2})`;
+    });
+
     return {
-      input
+      input,
+      x,
     };
-  }
-})
+  },
+});
 </script>
 
 <style lang="scss" scoped>
 div[contenteditable] {
   width: auto;
-  max-width: 200px;
+  max-width: 180px;
+  height: auto;
+  min-height: 36px;
   display: table;
-  padding: 7px 15px 7px 15px;
+  justify-items: center;
   border: 0;
-  border-radius: 25px;
+  border-radius: 20px;
   color: #fff;
   background-color: #61b4f4;
   font-size: 14;
   text-align: left;
+  p {
+    max-width: 150px;
+    overflow-wrap: break-word;
+    padding: 10px 15px 10px 15px;
+    margin: 0;
+  }
 }
 </style>