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>
2025-11-02 03:57:52 +00:00 · 2024-10-02 13:06:30 +05:30
parent e0bf2bd9d4
commit 42f6621afb
661 changed files with 15939 additions and 31194 deletions
--- a/app/javascript/v3/App.vue
+++ b/app/javascript/v3/App.vue
@@ -38,7 +38,7 @@ export default {
 </script>

 <template>
-  <div class="h-full w-full antialiased" :class="theme">
+  <div class="h-full min-h-screen w-full antialiased" :class="theme">
    <router-view />
    <SnackbarContainer />
  </div>
@@ -49,7 +49,6 @@ export default {
@tailwind components;
@tailwind utilities;

-@import 'shared/assets/fonts/plus-jakarta';
@import 'shared/assets/stylesheets/colors';
@import 'shared/assets/stylesheets/spacing';
@import 'shared/assets/stylesheets/font-size';
@@ -57,17 +56,8 @@ export default {

 html,
 body {
-  font-family:
-    'PlusJakarta',
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen-Sans,
-    Ubuntu,
-    Cantarell,
-    'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  @apply h-full w-full;

  input,
@@ -80,7 +70,15 @@ body {
  @apply text-woot-500 font-medium hover:text-woot-600;
 }

-.tooltip {
-  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-300 dark:text-slate-900;
+.v-popper--theme-tooltip .v-popper__inner {
+  background: black !important;
+  font-size: 0.75rem;
+  padding: 4px 8px !important;
+  border-radius: 6px;
+  font-weight: 400;
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-container {
+  display: none;
 }
 </style>
--- a/app/javascript/v3/components/Button/SubmitButton.vue
+++ b/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" />
--- a/app/javascript/v3/components/Form/Button.vue
+++ b/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"
--- a/app/javascript/v3/components/Form/Input.vue
+++ b/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>
--- a/app/javascript/v3/components/GoogleOauth/Button.vue
+++ b/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>
--- a/app/javascript/v3/components/SnackBar/Container.vue
+++ b/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 }) {
--- a/app/javascript/v3/store/index.js
+++ b/app/javascript/v3/store/index.js
@@ -1,9 +1,7 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
+import { createStore } from 'vuex';
 import globalConfig from 'shared/store/globalConfig';

-Vue.use(Vuex);
-export default new Vuex.Store({
+export default createStore({
  modules: {
    globalConfig,
  },
--- a/app/javascript/v3/views/auth/password/Edit.vue
+++ b/app/javascript/v3/views/auth/password/Edit.vue
@@ -87,7 +87,7 @@ export default {

 <template>
  <div
-    class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+    class="flex flex-col justify-center w-full min-h-screen py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
  >
    <form
      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
@@ -101,7 +101,7 @@ export default {

      <div class="space-y-5">
        <FormInput
-          v-model.trim="credentials.password"
+          v-model="credentials.password"
          class="mt-3"
          name="password"
          type="password"
@@ -111,7 +111,7 @@ export default {
          @blur="v$.credentials.password.$touch"
        />
        <FormInput
-          v-model.trim="credentials.confirmPassword"
+          v-model="credentials.confirmPassword"
          class="mt-3"
          name="confirm_password"
          type="password"
--- a/app/javascript/v3/views/auth/reset/password/Index.vue
+++ b/app/javascript/v3/views/auth/reset/password/Index.vue
@@ -27,14 +27,16 @@ export default {
  computed: {
    ...mapGetters({ globalConfig: 'globalConfig/get' }),
  },
-  validations: {
-    credentials: {
-      email: {
-        required,
-        email,
-        minLength: minLength(4),
+  validations() {
+    return {
+      credentials: {
+        email: {
+          required,
+          email,
+          minLength: minLength(4),
+        },
      },
-    },
+    };
  },
  methods: {
    showAlertMessage(message) {
@@ -66,7 +68,7 @@ export default {

 <template>
  <div
-    class="flex flex-col justify-center w-full min-h-full py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
+    class="flex flex-col justify-center w-full min-h-screen py-12 bg-woot-25 sm:px-6 lg:px-8 dark:bg-slate-900"
  >
    <form
      class="bg-white shadow sm:mx-auto sm:w-full sm:max-w-lg dark:bg-slate-800 p-11 sm:shadow-lg sm:rounded-lg"
@@ -89,7 +91,7 @@ export default {
      </p>
      <div class="space-y-5">
        <FormInput
-          v-model.trim="credentials.email"
+          v-model="credentials.email"
          name="email_address"
          :has-error="v$.credentials.email.$error"
          :error-message="$t('RESET_PASSWORD.EMAIL.ERROR')"
--- a/app/javascript/v3/views/auth/signup/Index.vue
+++ b/app/javascript/v3/views/auth/signup/Index.vue
@@ -34,7 +34,7 @@ export default {

 <template>
  <div class="w-full h-full dark:bg-slate-900">
-    <div v-show="!isLoading" class="flex h-full">
+    <div v-show="!isLoading" class="flex h-full min-h-screen items-center">
      <div
        class="flex-1 min-h-[640px] inline-flex items-center h-full justify-center overflow-auto py-6"
      >
--- a/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
+++ b/app/javascript/v3/views/auth/signup/components/Signup/Form.vue
@@ -5,13 +5,13 @@ import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 import { DEFAULT_REDIRECT_URL } from 'dashboard/constants/globals';
-import VueHcaptcha from '@hcaptcha/vue-hcaptcha';
+import VueHcaptcha from '@hcaptcha/vue3-hcaptcha';
 import FormInput from '../../../../../components/Form/Input.vue';
 import SubmitButton from '../../../../../components/Button/SubmitButton.vue';
 import { isValidPassword } from 'shared/helpers/Validators';
 import GoogleOAuthButton from '../../../../../components/GoogleOauth/Button.vue';
 import { register } from '../../../../../api/auth';
-var CompanyEmailValidator = require('company-email-validator');
+import * as CompanyEmailValidator from 'company-email-validator';

 export default {
  components: {
@@ -38,29 +38,31 @@ export default {
      error: '',
    };
  },
-  validations: {
-    credentials: {
-      accountName: {
-        required,
-        minLength: minLength(2),
-      },
-      fullName: {
-        required,
-        minLength: minLength(2),
-      },
-      email: {
-        required,
-        email,
-        businessEmailValidator(value) {
-          return CompanyEmailValidator.isCompanyEmail(value);
+  validations() {
+    return {
+      credentials: {
+        accountName: {
+          required,
+          minLength: minLength(2),
+        },
+        fullName: {
+          required,
+          minLength: minLength(2),
+        },
+        email: {
+          required,
+          email,
+          businessEmailValidator(value) {
+            return CompanyEmailValidator.isCompanyEmail(value);
+          },
+        },
+        password: {
+          required,
+          isValidPassword,
+          minLength: minLength(6),
        },
      },
-      password: {
-        required,
-        isValidPassword,
-        minLength: minLength(6),
-      },
-    },
+    };
  },
  computed: {
    ...mapGetters({ globalConfig: 'globalConfig/get' }),
@@ -134,9 +136,9 @@ export default {
 <template>
  <div class="flex-1 px-1 overflow-auto">
    <form class="space-y-3" @submit.prevent="submit">
-      <div class="flex">
+      <div class="grid grid-cols-2 gap-2">
        <FormInput
-          v-model.trim="credentials.fullName"
+          v-model="credentials.fullName"
          name="full_name"
          class="flex-1"
          :class="{ error: v$.credentials.fullName.$error }"
@@ -147,9 +149,9 @@ export default {
          @blur="v$.credentials.fullName.$touch"
        />
        <FormInput
-          v-model.trim="credentials.accountName"
+          v-model="credentials.accountName"
          name="account_name"
-          class="flex-1 ml-2"
+          class="flex-1"
          :class="{ error: v$.credentials.accountName.$error }"
          :label="$t('REGISTER.COMPANY_NAME.LABEL')"
          :placeholder="$t('REGISTER.COMPANY_NAME.PLACEHOLDER')"
@@ -159,7 +161,7 @@ export default {
        />
      </div>
      <FormInput
-        v-model.trim="credentials.email"
+        v-model="credentials.email"
        type="email"
        name="email_address"
        :class="{ error: v$.credentials.email.$error }"
@@ -170,7 +172,7 @@ export default {
        @blur="v$.credentials.email.$touch"
      />
      <FormInput
-        v-model.trim="credentials.password"
+        v-model="credentials.password"
        type="password"
        name="password"
        :class="{ error: v$.credentials.password.$error }"
--- a/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
+++ b/app/javascript/v3/views/auth/signup/components/Testimonials/Index.vue
@@ -26,22 +26,24 @@ export default {

 <template>
  <div
-    v-if="testimonials.length"
-    class="relative flex-1 hidden overflow-hidden bg-woot-400 dark:bg-woot-800 xl:flex"
+    v-show="testimonials.length"
+    class="relative flex-1 min-h-screen hidden overflow-hidden bg-woot-400 dark:bg-woot-800 xl:flex"
  >
    <img
-      src="/assets/images/auth/top-left.svg"
+      src="assets/images/auth/top-left.svg"
      class="absolute top-0 left-0 w-40 h-40"
    />
    <img
-      src="/assets/images/auth/bottom-right.svg"
+      src="assets/images/auth/bottom-right.svg"
      class="absolute bottom-0 right-0 w-40 h-40"
    />
    <img
-      src="/assets/images/auth/auth--bg.svg"
+      src="assets/images/auth/auth--bg.svg"
      class="h-[96%] left-[6%] top-[8%] w-[96%] absolute"
    />
-    <div class="z-50 flex flex-col items-center justify-center w-full h-full">
+    <div
+      class="z-50 flex flex-col items-center justify-center w-full h-full min-h-screen"
+    >
      <div class="flex items-start justify-center p-6">
        <TestimonialCard
          v-for="(testimonial, index) in testimonials"
--- a/app/javascript/v3/views/index.js
+++ b/app/javascript/v3/views/index.js
@@ -1,10 +1,10 @@
-import VueRouter from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';

 import routes from './routes';
 import AnalyticsHelper from 'dashboard/helper/AnalyticsHelper';
 import { validateRouteAccess } from '../helpers/RouteHelper';

-export const router = new VueRouter({ mode: 'history', routes });
+export const router = createRouter({ history: createWebHistory(), routes });

 const sensitiveRouteNames = ['auth_password_edit'];

--- a/app/javascript/v3/views/login/Index.vue
+++ b/app/javascript/v3/views/login/Index.vue
@@ -1,15 +1,21 @@
 <script>
-import { useVuelidate } from '@vuelidate/core';
-import { required, email } from '@vuelidate/validators';
-import { useAlert } from 'dashboard/composables';
-import globalConfigMixin from 'shared/mixins/globalConfigMixin';
-import SubmitButton from '../../components/Button/SubmitButton.vue';
+// utils and composables
+import { login } from '../../api/auth';
 import { mapGetters } from 'vuex';
 import { parseBoolean } from '@chatwoot/utils';
-import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
+import { useAlert } from 'dashboard/composables';
+import { required, email } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
+
+// mixins
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
+// components
 import FormInput from '../../components/Form/Input.vue';
-import { login } from '../../api/auth';
+import GoogleOAuthButton from '../../components/GoogleOauth/Button.vue';
 import Spinner from 'shared/components/Spinner.vue';
+import SubmitButton from '../../components/Button/SubmitButton.vue';
+
 const ERROR_MESSAGES = {
  'no-account-found': 'LOGIN.OAUTH.NO_ACCOUNT_FOUND',
  'business-account-only': 'LOGIN.OAUTH.BUSINESS_ACCOUNTS_ONLY',
@@ -49,16 +55,18 @@ export default {
      error: '',
    };
  },
-  validations: {
-    credentials: {
-      password: {
-        required,
+  validations() {
+    return {
+      credentials: {
+        password: {
+          required,
+        },
+        email: {
+          required,
+          email,
+        },
      },
-      email: {
-        required,
-        email,
-      },
-    },
+    };
  },
  computed: {
    ...mapGetters({ globalConfig: 'globalConfig/get' }),
@@ -189,7 +197,7 @@ export default {
        <GoogleOAuthButton v-if="showGoogleOAuth" />
        <form class="space-y-5" @submit.prevent="submitFormLogin">
          <FormInput
-            v-model.trim="credentials.email"
+            v-model="credentials.email"
            name="email_address"
            type="text"
            data-testid="email_input"
@@ -201,7 +209,7 @@ export default {
            @input="v$.credentials.email.$touch"
          />
          <FormInput
-            v-model.trim="credentials.password"
+            v-model="credentials.password"
            type="password"
            name="password"
            data-testid="password_input"