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/modules/search/components/SearchHeader.vue

@@ -10,7 +10,7 @@ export default {
     this.$refs.searchInput.focus();
     document.addEventListener('keydown', this.handler);
   },
-  beforeDestroy() {
+  unmounted() {
     document.removeEventListener('keydown', this.handler);
   },
   methods: {

app/javascript/dashboard/modules/search/components/SearchTabs.vue

@@ -35,8 +35,9 @@ export default {
   <div class="tab-container">
     <woot-tabs :index="activeTab" :border="false" @change="onTabChange">
       <woot-tabs-item
-        v-for="item in tabs"
+        v-for="(item, index) in tabs"
         :key="item.key"
+        :index="index"
         :name="item.name"
         :count="item.count"
       />

app/javascript/dashboard/modules/search/components/SearchView.vue

@@ -4,6 +4,7 @@ import SearchTabs from './SearchTabs.vue';
 import SearchResultConversationsList from './SearchResultConversationsList.vue';
 import SearchResultMessagesList from './SearchResultMessagesList.vue';
 import SearchResultContactsList from './SearchResultContactsList.vue';
+import { useTrack } from 'dashboard/composables';
 import Policy from 'dashboard/components/policy.vue';
 import {
   ROLES,
@@ -17,6 +18,7 @@ import {
 
 import { mapGetters } from 'vuex';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
+
 export default {
   components: {
     SearchHeader,
@@ -169,7 +171,7 @@ export default {
       return this.selectedTab === 'all';
     },
   },
-  beforeDestroy() {
+  unmounted() {
     this.query = '';
     this.$store.dispatch('conversationSearch/clearSearchResults');
   },
@@ -184,7 +186,7 @@ export default {
         this.$store.dispatch('conversationSearch/clearSearchResults');
         return;
       }
-      this.$track(CONVERSATION_EVENTS.SEARCH_CONVERSATION);
+      useTrack(CONVERSATION_EVENTS.SEARCH_CONVERSATION);
       this.$store.dispatch('conversationSearch/fullSearch', { q });
     },
     onBack() {

app/javascript/dashboard/modules/search/search.routes.js

@@ -1,4 +1,3 @@
-/* eslint-disable storybook/default-exports */
 import { frontendURL } from '../../helper/URLHelper';
 import {
   ROLES,

app/javascript/dashboard/modules/search/stories/MessageContent.stories.js

@@ -1,28 +0,0 @@
-import MessageContent from '../components/MessageContent.vue';
-
-export default {
-  title: 'Components/Search/MessageContent',
-  component: MessageContent,
-  argTypes: {
-    content: {
-      defaultValue: '123',
-      control: {
-        type: 'text',
-      },
-    },
-    author: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MessageContent },
-  template: '<message-content v-bind="$props"></message-content>',
-});
-
-export const MessageResultItem = Template.bind({});

app/javascript/dashboard/modules/search/stories/SearchResultContactItem.stories.js

@@ -1,53 +0,0 @@
-import SearchResultContactItem from '../components/SearchResultContactItem.vue';
-
-export default {
-  title: 'Components/Search/SearchResultContactItem',
-  component: SearchResultContactItem,
-  argTypes: {
-    id: {
-      defaultValue: '123',
-      control: {
-        type: 'text',
-      },
-    },
-    name: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    email: {
-      defaultValue: 'johndoe@faster.com',
-      control: {
-        type: 'text',
-      },
-    },
-    phone: {
-      defaultValue: '+1 123 456 7890',
-      control: {
-        type: 'text',
-      },
-    },
-    accountId: {
-      defaultValue: '7890',
-      control: {
-        type: 'text',
-      },
-    },
-    thumbnail: {
-      defaultValue: 'https://randomuser.me/api/portraits/men/62.jpg',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { SearchResultContactItem },
-  template:
-    '<search-result-contact-item v-bind="$props"></search-result-contact-item>',
-});
-
-export const ResultContactItem = Template.bind({});

app/javascript/dashboard/modules/search/stories/SearchResultConversationItem.stories.js

@@ -1,50 +0,0 @@
-import SearchResultConversationItem from '../components/SearchResultConversationItem.vue';
-
-export default {
-  title: 'Components/Search/SearchResultConversationItem',
-  component: SearchResultConversationItem,
-  argTypes: {
-    id: {
-      defaultValue: '123',
-      control: {
-        type: 'text',
-      },
-    },
-    name: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    inbox: {
-      defaultValue: {
-        name: 'Livechat',
-        channel_type: 'Channel::WebWidget',
-      },
-      control: {
-        type: 'object',
-      },
-    },
-    accountId: {
-      defaultValue: '7890',
-      control: {
-        type: 'text',
-      },
-    },
-    createdAt: {
-      defaultValue: '1677672962',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { SearchResultConversationItem },
-  template:
-    '<search-result-conversation-item v-bind="$props"></search-result-conversation-item>',
-});
-
-export const ResultConversationItem = Template.bind({});