feat: Vite + vue 3 💚 (#10047)

Fixes https://github.com/chatwoot/chatwoot/issues/8436
Fixes https://github.com/chatwoot/chatwoot/issues/9767
Fixes https://github.com/chatwoot/chatwoot/issues/10156
Fixes https://github.com/chatwoot/chatwoot/issues/6031
Fixes https://github.com/chatwoot/chatwoot/issues/5696
Fixes https://github.com/chatwoot/chatwoot/issues/9250
Fixes https://github.com/chatwoot/chatwoot/issues/9762

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue

@@ -1,82 +1,67 @@
-<script>
-import { computed } from 'vue';
+<script setup>
+import { ref, computed, watch, onMounted, nextTick, useSlots } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
 
-export default {
-  props: {
-    conversationLabels: {
-      type: Array,
-      required: true,
-    },
+const props = defineProps({
+  conversationLabels: {
+    type: Array,
+    required: true,
   },
-  setup(props) {
-    const accountLabels = useMapGetter('labels/getLabels');
+});
 
-    const activeLabels = computed(() => {
-      return accountLabels.value.filter(({ title }) =>
-        props.conversationLabels.includes(title)
-      );
-    });
+const slots = useSlots();
+const accountLabels = useMapGetter('labels/getLabels');
 
-    return {
-      activeLabels,
-    };
-  },
-  data() {
-    return {
-      showAllLabels: false,
-      showExpandLabelButton: false,
-      labelPosition: -1,
-    };
-  },
-  watch: {
-    activeLabels() {
-      this.$nextTick(() => this.computeVisibleLabelPosition());
-    },
-  },
-  mounted() {
-    // the problem here is that there is a certain amount of delay between the conversation
-    // card being mounted and the resize event eventually being triggered
-    // This means we need to run the function immediately after the component is mounted
-    // Happens especially when used in a virtual list.
-    // We can make the first trigger, a standard part of the directive, in case
-    // we face this issue again
-    this.computeVisibleLabelPosition();
-  },
-  methods: {
-    onShowLabels(e) {
-      e.stopPropagation();
-      this.showAllLabels = !this.showAllLabels;
-      this.$nextTick(() => this.computeVisibleLabelPosition());
-    },
-    computeVisibleLabelPosition() {
-      const beforeSlot = this.$slots.before ? 100 : 0;
-      const labelContainer = this.$refs.labelContainer;
-      if (!labelContainer) return;
+const activeLabels = computed(() => {
+  return accountLabels.value.filter(({ title }) =>
+    props.conversationLabels.includes(title)
+  );
+});
 
-      const labels = Array.from(labelContainer.querySelectorAll('.label'));
-      let labelOffset = 0;
-      this.showExpandLabelButton = false;
-      labels.forEach((label, index) => {
-        labelOffset += label.offsetWidth + 8;
-        if (labelOffset < labelContainer.clientWidth - 16 - beforeSlot) {
-          this.labelPosition = index;
-        } else {
-          this.showExpandLabelButton = labels.length > 1;
-        }
-      });
-    },
-  },
+const showAllLabels = ref(false);
+const showExpandLabelButton = ref(false);
+const labelPosition = ref(-1);
+const labelContainer = ref(null);
+
+const computeVisibleLabelPosition = () => {
+  const beforeSlot = slots.before ? 100 : 0;
+  if (!labelContainer.value) {
+    return;
+  }
+
+  const labels = Array.from(labelContainer.value.querySelectorAll('.label'));
+  let labelOffset = 0;
+  showExpandLabelButton.value = false;
+  labels.forEach((label, index) => {
+    labelOffset += label.offsetWidth + 8;
+
+    if (labelOffset < labelContainer.value.clientWidth - beforeSlot) {
+      labelPosition.value = index;
+    } else {
+      showExpandLabelButton.value = labels.length > 1;
+    }
+  });
+};
+
+watch(activeLabels, () => {
+  nextTick(() => computeVisibleLabelPosition());
+});
+
+onMounted(() => {
+  computeVisibleLabelPosition();
+});
+
+const onShowLabels = e => {
+  e.stopPropagation();
+  showAllLabels.value = !showAllLabels.value;
+  nextTick(() => computeVisibleLabelPosition());
 };
 </script>
 
 <template>
-  <div
-    v-if="activeLabels.length || $slots.before"
-    ref="labelContainer"
-    v-resize="computeVisibleLabelPosition"
-  >
+  <div ref="labelContainer" v-resize="computeVisibleLabelPosition">
     <div
+      v-if="activeLabels.length || $slots.before"
       class="flex items-end flex-shrink min-w-0 gap-y-1"
       :class="{ 'h-auto overflow-visible flex-row flex-wrap': showAllLabels }"
     >
@@ -90,7 +75,9 @@ export default {
         variant="smooth"
         class="!mb-0 max-w-[calc(100%-0.5rem)]"
         small
-        :class="{ hidden: !showAllLabels && index > labelPosition }"
+        :class="{
+          'invisible absolute': !showAllLabels && index > labelPosition,
+        }"
       />
       <woot-button
         v-if="showExpandLabelButton"
@@ -123,8 +110,4 @@ export default {
     @apply border border-solid border-slate-100 dark:border-slate-700;
   }
 }
-
-.hidden {
-  @apply invisible absolute;
-}
 </style>