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/v3/components/Button/SubmitButton.vue

@@ -39,10 +39,11 @@ export default {
       `;
     },
   },
-  methods: {
-    onClick() {
-      this.$emit('click');
-    },
+  created() {
+    // eslint-disable-next-line
+    console.warn(
+      '[DEPRECATED] This component has been deprecated and will be removed soon. Please use v3/components/Form/Button.vue instead'
+    );
   },
 };
 </script>
@@ -54,7 +55,6 @@ export default {
     :disabled="disabled"
     :class="computedClass"
     class="flex items-center w-full justify-center rounded-md bg-woot-500 py-3 px-3 text-base font-medium text-white shadow-sm hover:bg-woot-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-woot-500 cursor-pointer"
-    @click="onClick"
   >
     <span>{{ buttonText }}</span>
     <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />

app/javascript/v3/components/Form/Button.vue

@@ -27,8 +27,6 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['click']);
-
 const attrs = useAttrs();
 
 const baseClasses = {
@@ -73,13 +71,6 @@ const sizeClass = computed(() => {
 });
 
 const buttonClasses = computed(() => [colorClass.value, sizeClass.value]);
-
-const onClick = () => {
-  if (props.disabled) {
-    return;
-  }
-  emit('click');
-};
 </script>
 
 <template>
@@ -87,7 +78,6 @@ const onClick = () => {
     class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
     :class="buttonClasses"
     v-bind="$attrs"
-    @click="onClick"
   >
     <fluent-icon
       v-if="icon && !trailingIcon"

app/javascript/v3/components/Form/Input.vue

@@ -1,66 +1,40 @@
-<script>
+<script setup>
+import { defineProps, defineModel } from 'vue';
 import WithLabel from './WithLabel.vue';
-export default {
-  components: {
-    WithLabel,
+
+defineProps({
+  label: {
+    type: String,
+    required: true,
   },
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String,
-      default: 'text',
-    },
-    tabindex: {
-      type: Number,
-      default: undefined,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    value: {
-      type: [String, Number],
-      default: '',
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    hasError: {
-      type: Boolean,
-      default: false,
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-    dataTestid: {
-      type: String,
-      default: '',
-    },
-    spacing: {
-      type: String,
-      default: 'base',
-      validator: value => ['base', 'compact'].includes(value),
-    },
+  icon: {
+    type: String,
+    default: '',
   },
-  methods: {
-    onInput(e) {
-      this.$emit('input', e.target.value);
-    },
+  name: {
+    type: String,
+    required: true,
   },
-};
+  hasError: Boolean,
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+  spacing: {
+    type: String,
+    default: 'base',
+    validator: value => ['base', 'compact'].includes(value),
+  },
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const model = defineModel({
+  type: [String, Number],
+  required: true,
+});
 </script>
 
 <template>
@@ -75,27 +49,17 @@ export default {
       <slot />
     </template>
     <input
-      :id="name"
-      :name="name"
-      :type="type"
-      autocomplete="off"
-      :tabindex="tabindex"
-      :required="required"
-      :placeholder="placeholder"
-      :data-testid="dataTestid"
-      :value="value"
+      v-bind="$attrs"
+      v-model="model"
+      class="block w-full border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline focus:outline-1 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
       :class="{
-        'focus:outline-red-600 outline-red-600 dark:focus:outline-red-600 dark:outline-red-600':
-          hasError,
+        'focus:outline-red-600 outline-red-600': hasError,
         'outline-slate-200 dark:outline-slate-600 dark:focus:outline-woot-500 focus:outline-woot-500':
           !hasError,
         'px-3 py-3': spacing === 'base',
         'px-3 py-2 mb-0': spacing === 'compact',
         'pl-9': icon,
       }"
-      class="block w-full border-none rounded-md shadow-sm appearance-none outline outline-1 focus:outline-2 text-slate-900 dark:text-slate-100 placeholder:text-slate-400 sm:text-sm sm:leading-6 dark:bg-slate-800"
-      @input="onInput"
-      @blur="$emit('blur')"
     />
   </WithLabel>
 </template>

app/javascript/v3/components/GoogleOauth/Button.vue

@@ -47,7 +47,7 @@ export default {
       :href="getGoogleAuthUrl()"
       class="inline-flex justify-center w-full px-4 py-3 bg-white rounded-md shadow-sm ring-1 ring-inset ring-slate-200 dark:ring-slate-600 hover:bg-slate-50 focus:outline-offset-0 dark:bg-slate-700 dark:hover:bg-slate-700"
     >
-      <img src="/assets/images/auth/google.svg" alt="Google Logo" class="h-6" />
+      <span class="i-logos-google-icon h-6" />
       <span class="ml-2 text-base font-medium text-slate-600 dark:text-white">
         {{ $t('LOGIN.OAUTH.GOOGLE_LOGIN') }}
       </span>

app/javascript/v3/components/SnackBar/Container.vue

@@ -1,6 +1,7 @@
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import SnackbarItem from './Item.vue';
+import { emitter } from 'shared/helpers/mitt';
 
 export default {
   components: { SnackbarItem },
@@ -18,10 +19,10 @@ export default {
   },
 
   mounted() {
-    this.$emitter.on(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
+    emitter.on(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
   },
-  beforeDestroy() {
-    this.$emitter.off(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
+  unmounted() {
+    emitter.off(BUS_EVENTS.SHOW_TOAST, this.onNewToastMessage);
   },
   methods: {
     onNewToastMessage({ message, action }) {