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/shared/components/ui/label/LabelDropdown.stories.js

@@ -1,58 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import LabelDropdown from './LabelDropdown';
-
-export default {
-  title: 'Components/Label/Dropdown',
-  component: LabelDropdown,
-  argTypes: {
-    conversationId: {
-      control: {
-        type: 'text',
-      },
-    },
-    accountLabels: {
-      defaultValue: [
-        {
-          color: '#555',
-          description: '',
-          id: 1,
-          title: 'sales',
-        },
-        {
-          color: '#c242f5',
-          description: '',
-          id: 1,
-          title: 'business',
-        },
-        {
-          color: '#4287f5',
-          description: '',
-          id: 1,
-          title: 'testing',
-        },
-      ],
-      control: {
-        type: 'object',
-      },
-    },
-    selectedLabels: {
-      defaultValue: 'sales, testing',
-      control: {
-        type: 'object',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { LabelDropdown },
-  template:
-    '<label-dropdown v-bind="$props" @add="onAdd" @remove="onRemove"></label-dropdown>',
-});
-
-export const Dropdown = Template.bind({});
-Dropdown.args = {
-  onAdd: action('added'),
-  onRemove: action('removed'),
-};

app/javascript/shared/components/ui/label/LabelDropdown.vue

@@ -142,7 +142,7 @@ export default {
             :title="label.title"
             :color="label.color"
             :selected="selectedLabels.includes(label.title)"
-            @click="onAddRemove(label)"
+            @select-label="onAddRemove(label)"
           />
         </woot-dropdown-menu>
         <div

app/javascript/shared/components/ui/label/LabelDropdownItem.stories.js

@@ -1,39 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import LabelDropdownItem from './LabelDropdownItem';
-
-export default {
-  title: 'Components/Label/Item',
-  component: LabelDropdownItem,
-  argTypes: {
-    title: {
-      defaultValue: 'sales',
-      control: {
-        type: 'text',
-      },
-    },
-    color: {
-      defaultValue: '#555',
-      control: {
-        type: 'text',
-      },
-    },
-    selected: {
-      defaultValue: true,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { LabelDropdownItem },
-  template:
-    '<label-dropdown-item v-bind="$props" @click="onClick"></label-dropdown-item>',
-});
-
-export const Item = Template.bind({});
-Item.args = {
-  onClick: action('Selected'),
-};

app/javascript/shared/components/ui/label/LabelDropdownItem.vue

@@ -17,7 +17,7 @@ export default {
 
   methods: {
     onClick() {
-      this.$emit('click', this.title);
+      this.$emit('selectLabel', this.title);
     },
   },
 };
@@ -37,7 +37,7 @@ export default {
             <span class="label-text" :title="title">{{ title }}</span>
           </div>
           <div>
-            <i v-if="selected" class="icon ion-checkmark-round" />
+            <i v-if="selected" class="i-lucide-circle-check" />
           </div>
         </div>
       </woot-button>