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/contact/components/AddCustomAttribute.vue

@@ -70,7 +70,7 @@ export default {
     />
     <form class="w-full" @submit.prevent="addCustomAttribute">
       <woot-input
-        v-model.trim="attributeName"
+        v-model="attributeName"
         :class="{ error: v$.attributeName.$error }"
         class="w-full"
         :error="attributeNameError"
@@ -79,7 +79,7 @@ export default {
         @input="v$.attributeName.$touch"
       />
       <woot-input
-        v-model.trim="attributeValue"
+        v-model="attributeValue"
         class="w-full"
         :label="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.LABEL')"
         :placeholder="$t('CUSTOM_ATTRIBUTES.FORM.VALUE.PLACEHOLDER')"

app/javascript/dashboard/modules/contact/components/ContactIntro.vue

@@ -57,7 +57,7 @@ export default {
       </h2>
       <h3 class="text-base contact--work">
         {{ contact.title }}
-        <i v-if="company.name" class="icon ion-minus-round" />
+        <i v-if="company.name" class="i-lucide-circle-minus" />
         <span class="company-name">{{ company.name }}</span>
       </h3>
       <p v-if="additionalAttributes.description" class="contact--bio">

app/javascript/dashboard/modules/contact/components/MergeContact.vue

@@ -1,6 +1,6 @@
 <script>
-import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
 
 import MergeContactSummary from 'dashboard/modules/contact/components/MergeContactSummary.vue';
 import ContactDropdownItem from './ContactDropdownItem.vue';
@@ -97,7 +97,7 @@ export default {
             open-direction="top"
             @search-change="searchChange"
           >
-            <template slot="singleLabel" slot-scope="props">
+            <template #singleLabel="props">
               <ContactDropdownItem
                 :thumbnail="props.option.thumbnail"
                 :identifier="props.option.id"
@@ -106,7 +106,7 @@ export default {
                 :phone-number="props.option.phone_number"
               />
             </template>
-            <template slot="option" slot-scope="props">
+            <template #option="props">
               <ContactDropdownItem
                 :thumbnail="props.option.thumbnail"
                 :identifier="props.option.id"
@@ -145,14 +145,14 @@ export default {
             />
           </label>
           <multiselect
-            :value="primaryContact"
+            :model-value="primaryContact"
             disabled
             :options="[]"
             :show-labels="false"
             label="name"
             track-by="id"
           >
-            <template slot="singleLabel" slot-scope="props">
+            <template #singleLabel="props">
               <ContactDropdownItem
                 :thumbnail="props.option.thumbnail"
                 :name="props.option.name"