refactor message_renderer

src/components/UI/UIDetails/messageRenderer.vue

@@ -0,0 +1,59 @@
+<template>
+  <g id="cardsDiv">
+    <g
+      v-for="(item, index) in renderArr"
+      :key="index"
+      :id="index"
+      class="test"
+      transform="translate(0, 0)"
+    >
+      <transition
+        appear
+        v-on:before-appear="beforeEnter"
+        v-on:appear="enter"
+        v-on:after-enter="afterEnter"
+      >
+        <MessageItem :item="item" :key="index" />
+      </transition>
+    </g>
+  </g>
+</template>
+
+<script lang="ts">
+import useMessageRenderer from "@/composables/messageRenderer/useMessageRenderer";
+import { defineComponent, reactive, ref, inject } from "vue";
+import MessageItem from "./messageItem.vue";
+import Messages from "./messages";
+import { Message } from "@/types/message/index";
+export default defineComponent({
+  name: "MessageRenderer",
+  components: { MessageItem },
+  setup() {
+    const emitter: any = inject("mitt");
+    const renderArr: Message[] = reactive([]);
+    const messages = Messages;
+    const count = ref(0);
+
+    const { beforeEnter, enter, afterEnter } = useMessageRenderer();
+
+    emitter.on("renderMessage", (payload: any) => {
+      renderArr.push(payload);
+    });
+    function renderMessage() {
+      if (count.value < messages.length) {
+        renderArr.push(messages[count.value]);
+        count.value++;
+        return;
+      }
+    }
+
+    return {
+      renderMessage,
+      renderArr,
+      beforeEnter,
+      enter,
+      afterEnter,
+    };
+  },
+});
+</script>

src/components/UI/index.vue

@@ -7,52 +7,31 @@
     @click="renderMessage"
   >
     <AI />
-
-    <g id="cardsDiv">
-      <g
-        v-for="(item, index) in renderArr"
-        :key="index"
-        :id="index"
-        class="test"
-        transform="translate(0, 0)"
-      >
-        <transition
-          appear
-          v-on:before-appear="beforeEnter"
-          v-on:appear="enter"
-          v-on:after-enter="afterEnter"
-        >
-          <MessageItem :item="item" :key="index" />
-        </transition>
-      </g>
-    </g>
-
+    <MessageRenderer />
     <InputItem />
     <TitleBar />
   </svg>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive } from "vue";
+import { defineComponent, ref, reactive, inject } from "vue";
 import MessageItem from "./UIDetails/messageItem.vue";
 import AI from "../AI/index.vue";
 import InputItem from "./UIDetails/inputItem.vue";
 import TitleBar from "./UIDetails/titleBar.vue";
 import Messages from "./UIDetails/messages";
-import useUIindexAnims from "@/composables/anims/useUIindexAnims";
+import MessageRenderer from "./UIDetails/messageRenderer.vue";
 export default defineComponent({
   name: "UIindex",
-  components: { AI, MessageItem, InputItem, TitleBar },
+  components: { AI, MessageItem, InputItem, TitleBar, MessageRenderer },
   setup() {
-    const renderArr: Message[] = reactive([]);
     const messages = Messages;
     const count = ref(0);
-
-    const { beforeEnter, enter, afterEnter } = useUIindexAnims();
+    const emitter: any = inject("mitt");
 
     const renderMessage = () => {
       if (count.value < messages.length) {
-        renderArr.push(messages[count.value]);
+        emitter.emit("renderMessage", messages[count.value])
         count.value++;
         return;
       }
@@ -60,10 +39,6 @@ export default defineComponent({
 
     return {
       renderMessage,
-      renderArr,
-      beforeEnter,
-      enter,
-      afterEnter,
     };
   },
 });