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/portal/components/PublicSearchInput.vue

@@ -1,38 +1,33 @@
-<script>
+<script setup>
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
+import { ref } from 'vue';
 
-export default {
-  components: {
-    FluentIcon,
+defineProps({
+  searchTerm: {
+    type: [String, Number],
+    default: '',
   },
-  props: {
-    value: {
-      type: [String, Number],
-      default: '',
-    },
-    searchPlaceholder: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      isFocused: false,
-    };
-  },
-  methods: {
-    onChange(e) {
-      this.$emit('input', e.target.value);
-    },
-    onFocus(e) {
-      this.isFocused = true;
-      this.$emit('focus', e.target.value);
-    },
-    onBlur(e) {
-      this.isFocused = false;
-      this.$emit('blur', e.target.value);
-    },
+  searchPlaceholder: {
+    type: String,
+    default: '',
   },
+});
+
+const emit = defineEmits(['update:searchTerm', 'focus', 'blur']);
+const isFocused = ref(false);
+
+const onChange = e => {
+  emit('update:searchTerm', e.target.value);
+};
+
+const onFocus = e => {
+  isFocused.value = true;
+  emit('focus', e.target.value);
+};
+
+const onBlur = e => {
+  isFocused.value = false;
+  emit('blur', e.target.value);
 };
 </script>
 
@@ -46,7 +41,7 @@ export default {
   >
     <FluentIcon icon="search" />
     <input
-      :value="value"
+      :value="searchTerm"
       type="text"
       class="w-full focus:outline-none text-base h-full bg-white dark:bg-slate-900 px-2 py-2 text-slate-700 dark:text-slate-100 placeholder-slate-500"
       :placeholder="searchPlaceholder"