style: apply fixes for eslint issues [cw-3590] (#10210)

These fixes are all auto generated and can be merged directly Fixes the following issues 1. Event used on components should be hypenated 2. Attribute orders in components 3. Use `unmounted` instead of `destroyed` 4. Add explicit `emits` declarations for components, autofixed [using this script](https://gist.github.com/scmmishra/6f549109b96400006bb69bbde392eddf) We ignore the top level v-if for now, we will fix it later
2025-10-29 10:12:34 +00:00 · 2024-10-03 15:02:12 +05:30
parent b8d0252511
commit c51a458c25
257 changed files with 1013 additions and 310 deletions
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -769,11 +769,11 @@ watch(conversationFilters, (newVal, oldVal) => {
      :has-applied-filters="hasAppliedFilters"
      :has-active-folders="hasActiveFolders"
      :active-status="activeStatus"
-      @addFolders="onClickOpenAddFoldersModal"
-      @deleteFolders="onClickOpenDeleteFoldersModal"
-      @filtersModal="onToggleAdvanceFiltersModal"
-      @resetFilters="resetAndFetchData"
-      @basicFilterChange="onBasicFilterChange"
+      @add-folders="onClickOpenAddFoldersModal"
+      @delete-folders="onClickOpenDeleteFoldersModal"
+      @filters-modal="onToggleAdvanceFiltersModal"
+      @reset-filters="resetAndFetchData"
+      @basic-filter-change="onBasicFilterChange"
    />

    <AddCustomViews
@@ -796,7 +796,7 @@ watch(conversationFilters, (newVal, oldVal) => {
      v-if="!hasAppliedFiltersOrActiveFolders"
      :items="assigneeTabItems"
      :active-tab="activeAssigneeTab"
-      @chatTabChange="updateAssigneeTab"
+      @chat-tab-change="updateAssigneeTab"
    />

    <p
@@ -813,11 +813,11 @@ watch(conversationFilters, (newVal, oldVal) => {
      :show-open-action="allSelectedConversationsStatus('open')"
      :show-resolved-action="allSelectedConversationsStatus('resolved')"
      :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
-      @selectAllConversations="toggleSelectAll"
-      @assignAgent="onAssignAgent"
-      @updateConversations="onUpdateConversations"
-      @assignLabels="onAssignLabels"
-      @assignTeam="onAssignTeamsForBulk"
+      @select-all-conversations="toggleSelectAll"
+      @assign-agent="onAssignAgent"
+      @update-conversations="onUpdateConversations"
+      @assign-labels="onAssignLabels"
+      @assign-team="onAssignTeamsForBulk"
    />
    <div
      ref="conversationListRef"
@@ -854,8 +854,8 @@ watch(conversationFilters, (newVal, oldVal) => {
              :folders-id="foldersId"
              :conversation-type="conversationType"
              :show-assignee="showAssigneeInConversationCard"
-              @selectConversation="selectConversation"
-              @deSelectConversation="deSelectConversation"
+              @select-conversation="selectConversation"
+              @de-select-conversation="deSelectConversation"
            />
          </DynamicScrollerItem>
        </template>
@@ -889,8 +889,8 @@ watch(conversationFilters, (newVal, oldVal) => {
        :active-folder-name="activeFolderName"
        :on-close="closeAdvanceFiltersModal"
        :is-folder-view="hasActiveFolders"
-        @applyFilter="onApplyFilter"
-        @updateFolder="onUpdateSavedFilter"
+        @apply-filter="onApplyFilter"
+        @update-folder="onUpdateSavedFilter"
      />
    </woot-modal>
  </div>
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -108,7 +108,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
      />
      <ConversationBasicFilter
        v-if="!hasAppliedFiltersOrActiveFolders"
-        @changeFilter="onBasicFilterChange"
+        @change-filter="onBasicFilterChange"
      />
    </div>
  </div>
--- a/app/javascript/dashboard/components/ConversationItem.vue
+++ b/app/javascript/dashboard/components/ConversationItem.vue
@@ -56,14 +56,14 @@ export default {
    :selected="isConversationSelected(source.id)"
    :show-assignee="showAssignee"
    enable-context-menu
-    @selectConversation="selectConversation"
-    @deSelectConversation="deSelectConversation"
-    @assignAgent="assignAgent"
-    @assignTeam="assignTeam"
-    @assignLabel="assignLabels"
-    @updateConversationStatus="updateConversationStatus"
-    @contextMenuToggle="toggleContextMenu"
-    @markAsUnread="markAsUnread"
-    @assignPriority="assignPriority"
+    @select-conversation="selectConversation"
+    @de-select-conversation="deSelectConversation"
+    @assign-agent="assignAgent"
+    @assign-team="assignTeam"
+    @assign-label="assignLabels"
+    @update-conversation-status="updateConversationStatus"
+    @context-menu-toggle="toggleContextMenu"
+    @mark-as-unread="markAsUnread"
+    @assign-priority="assignPriority"
  />
 </template>
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -31,6 +31,7 @@ export default {
    attributeKey: { type: String, required: true },
    contactId: { type: Number, default: null },
  },
+  emits: ['update', 'delete', 'copy'],
  setup() {
    return { v$: useVuelidate() };
  },
@@ -138,7 +139,7 @@ export default {
    this.editedValue = this.formattedValue;
    emitter.on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
-  destroyed() {
+  unmounted() {
    emitter.off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
  methods: {
--- a/app/javascript/dashboard/components/CustomBrandPolicyWrapper.vue
+++ b/app/javascript/dashboard/components/CustomBrandPolicyWrapper.vue
@@ -18,6 +18,7 @@ const shouldShowContent = computed(
 );
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div v-if="shouldShowContent">
    <slot />
--- a/app/javascript/dashboard/components/CustomSnoozeModal.vue
+++ b/app/javascript/dashboard/components/CustomSnoozeModal.vue
@@ -5,6 +5,7 @@ export default {
  components: {
    DatePicker,
  },
+  emits: ['close', 'chooseTime'],

  data() {
    return {
--- a/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
+++ b/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
@@ -79,6 +79,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <Banner
    v-if="shouldShowBanner"
@@ -86,6 +87,6 @@ export default {
    :banner-message="bannerMessage"
    :action-button-label="actionButtonMessage"
    has-action-button
-    @primaryAction="routeToBilling"
+    @primary-action="routeToBilling"
  />
 </template>
--- a/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
+++ b/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
@@ -28,6 +28,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <Banner
    v-if="shouldShowBanner"
@@ -36,6 +37,6 @@ export default {
    :action-button-label="actionButtonMessage"
    action-button-icon="mail"
    has-action-button
-    @primaryAction="resendVerificationEmail"
+    @primary-action="resendVerificationEmail"
  />
 </template>
--- a/app/javascript/dashboard/components/app/UpdateBanner.vue
+++ b/app/javascript/dashboard/components/app/UpdateBanner.vue
@@ -67,6 +67,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <Banner
    v-if="shouldShowBanner"
--- a/app/javascript/dashboard/components/app/UpgradeBanner.vue
+++ b/app/javascript/dashboard/components/app/UpgradeBanner.vue
@@ -81,6 +81,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <Banner
    v-if="shouldShowBanner"
@@ -88,6 +89,6 @@ export default {
    :banner-message="bannerMessage"
    :action-button-label="actionButtonMessage"
    has-action-button
-    @primaryAction="routeToBilling"
+    @primary-action="routeToBilling"
  />
 </template>
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -22,11 +22,14 @@ export default {
      type: Boolean,
      default: true,
    },
-    hasBanner: {
-      type: Boolean,
-      default: false,
-    },
  },
+  emits: [
+    'toggleAccountModal',
+    'showAddLabelPopup',
+    'openNotificationPanel',
+    'closeKeyShortcutModal',
+    'openKeyShortcutModal',
+  ],
  setup(props, { emit }) {
    const route = useRoute();
    const router = useRouter();
@@ -217,9 +220,9 @@ export default {
      :account-id="accountId"
      :menu-items="primaryMenuItems"
      :active-menu-item="activePrimaryMenu.key"
-      @toggleAccounts="toggleAccountModal"
-      @openKeyShortcutModal="toggleKeyShortcutModal"
-      @openNotificationPanel="openNotificationPanel"
+      @toggle-accounts="toggleAccountModal"
+      @open-key-shortcut-modal="toggleKeyShortcutModal"
+      @open-notification-panel="openNotificationPanel"
    />
    <SecondarySidebar
      v-if="hasSecondarySidebar"
@@ -231,8 +234,8 @@ export default {
      :menu-config="activeSecondaryMenu"
      :current-user="currentUser"
      :is-on-chatwoot-cloud="isOnChatwootCloud"
-      @addLabel="showAddLabelPopup"
-      @toggleAccounts="toggleAccountModal"
+      @add-label="showAddLabelPopup"
+      @toggle-accounts="toggleAccountModal"
    />
  </aside>
 </template>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountContext.vue
@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';

 export default {
+  emits: ['toggleAccounts'],
  data() {
    return { showSwitchButton: false };
  },
@@ -25,6 +26,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div
    v-if="showShowCurrentAccountContext"
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue
@@ -7,7 +7,7 @@ export default {
      default: true,
    },
  },
-
+  emits: ['closeAccountModal', 'showCreateAccountModal'],
  computed: {
    ...mapGetters({
      accountId: 'getCurrentAccountId',
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
@@ -15,6 +15,7 @@ export default {
      default: true,
    },
  },
+  emits: ['closeAccountCreateModal'],
  setup() {
    return { v$: useVuelidate() };
  },
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue
@@ -6,6 +6,7 @@ export default {
  components: {
    Thumbnail,
  },
+  emits: ['toggleMenu'],
  computed: {
    ...mapGetters({
      currentUser: 'getCurrentUser',
--- a/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/NotificationBell.vue
@@ -2,6 +2,8 @@
 import { mapGetters } from 'vuex';

 export default {
+  emits: ['openNotificationPanel'],
+
  computed: {
    ...mapGetters({
      notificationMetadata: 'notifications/getMeta',
--- a/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue
@@ -17,6 +17,12 @@ export default {
      default: false,
    },
  },
+  emits: [
+    'close',
+    'openKeyShortcutModal',
+    'toggleAccounts',
+    'showSupportChatWindow',
+  ],
  computed: {
    ...mapGetters({
      currentUser: 'getCurrentUser',
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -43,6 +43,7 @@ export default {
      default: '',
    },
  },
+  emits: ['toggleAccounts', 'openNotificationPanel', 'openKeyShortcutModal'],
  data() {
    return {
      helpDocsURL: wootConstants.DOCS_URL,
@@ -96,13 +97,13 @@ export default {
        open-in-new-page
        :to="helpDocsURL"
      />
-      <NotificationBell @openNotificationPanel="openNotificationPanel" />
-      <AgentDetails @toggleMenu="toggleOptions" />
+      <NotificationBell @open-notification-panel="openNotificationPanel" />
+      <AgentDetails @toggle-menu="toggleOptions" />
      <OptionsMenu
        :show="showOptionsMenu"
-        @toggleAccounts="toggleAccountModal"
-        @showSupportChatWindow="toggleSupportChatWindow"
-        @openKeyShortcutModal="$emit('openKeyShortcutModal')"
+        @toggle-accounts="toggleAccountModal"
+        @show-support-chat-window="toggleSupportChatWindow"
+        @open-key-shortcut-modal="$emit('openKeyShortcutModal')"
        @close="toggleOptions"
      />
    </div>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -49,6 +49,7 @@ export default {
      default: false,
    },
  },
+  emits: ['addLabel', 'toggleAccounts'],
  computed: {
    ...mapGetters({
      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
@@ -242,7 +243,7 @@ export default {
  <div
    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
  >
-    <AccountContext @toggleAccounts="toggleAccountModal" />
+    <AccountContext @toggle-accounts="toggleAccountModal" />
    <transition-group
      name="menu-list"
      tag="ul"
@@ -257,7 +258,7 @@ export default {
        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
        :key="menuItem.key"
        :menu-item="menuItem"
-        @addLabel="showAddLabelPopup"
+        @add-label="showAddLabelPopup"
      />
    </transition-group>
  </div>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -106,10 +106,11 @@ export default {
          <span
            v-if="showChildCount"
            class="bg-slate-50 dark:bg-slate-700 rounded-full min-w-[18px] justify-center items-center flex text-xxs mx-1 py-0 px-1"
-            :class="isCountZero
+            :class="
+              isCountZero
                ? `text-slate-300 dark:text-slate-500`
                : `text-slate-700 dark:text-slate-50`
-              "
+            "
          >
            {{ childItemCount }}
          </span>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -22,6 +22,7 @@ export default {
      default: () => ({}),
    },
  },
+  emits: ['addLabel', 'open'],
  setup() {
    const { isAdmin } = useAdmin();
    const { isEnterprise } = useConfig();
--- a/app/javascript/dashboard/components/ui/AnnouncementPopup.vue
+++ b/app/javascript/dashboard/components/ui/AnnouncementPopup.vue
@@ -18,6 +18,7 @@ export default {
      default: '',
    },
  },
+  emits: ['open', 'close'],
  methods: {
    onClickOpenPath() {
      this.$emit('open');
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -38,6 +38,7 @@ export default {
      default: false,
    },
  },
+  emits: ['primaryAction', 'close'],
  computed: {
    bannerClasses() {
      const classList = [this.colorScheme];
--- a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
@@ -222,7 +222,7 @@ const emitDateRange = () => {
    >
      <CalendarDateRange
        :selected-range="selectedRange"
-        @setRange="setDateRange"
+        @set-range="setDateRange"
      />
      <div
        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
@@ -264,15 +264,15 @@ const emitDateRange = () => {
                  :calendar-type="calendar"
                  :start-current-date="startCurrentDate"
                  :end-current-date="endCurrentDate"
-                  @selectYear="openCalendar($event, calendar, YEAR)"
+                  @select-year="openCalendar($event, calendar, YEAR)"
                />
                <CalendarMonth
                  v-else-if="calendarViews[calendar] === MONTH"
                  :calendar-type="calendar"
                  :start-current-date="startCurrentDate"
                  :end-current-date="endCurrentDate"
-                  @selectMonth="openCalendar($event, calendar)"
-                  @setView="setViewMode"
+                  @select-month="openCalendar($event, calendar)"
+                  @set-view="setViewMode"
                  @prev="moveCalendar(calendar, 'prev', YEAR)"
                  @next="moveCalendar(calendar, 'next', YEAR)"
                />
@@ -286,9 +286,9 @@ const emitDateRange = () => {
                  :selected-end-date="selectedEndDate"
                  :selecting-end-date="selectingEndDate"
                  :hovered-end-date="hoveredEndDate"
-                  @updateHoveredEndDate="hoveredEndDate = $event"
-                  @selectDate="selectDate"
-                  @setView="setViewMode"
+                  @update-hovered-end-date="hoveredEndDate = $event"
+                  @select-date="selectDate"
+                  @set-view="setViewMode"
                  @prev="moveCalendar(calendar, 'prev')"
                  @next="moveCalendar(calendar, 'next')"
                />
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue
@@ -1,5 +1,5 @@
 <script setup>
-const emit = defineEmits(['clear', 'clear']);
+const emit = defineEmits(['clear', 'change']);

 const onClickClear = () => {
  emit('clear');
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue
@@ -62,7 +62,7 @@ const selectMonth = index => {
          MONTH
        )
      "
-      @setView="setViewMode"
+      @set-view="setViewMode"
      @prev="onClickPrev"
      @next="onClickNext"
    />
--- a/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue
@@ -139,7 +139,7 @@ const dayClasses = day => ({
      "
      @prev="onClickPrev"
      @next="onClickNext"
-      @setView="setViewMode"
+      @set-view="setViewMode"
    />
    <CalendarWeekLabel />
    <div
--- a/app/javascript/dashboard/components/ui/DateRangePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateRangePicker.vue
@@ -16,6 +16,7 @@ export default {
      default: () => [],
    },
  },
+  emits: ['change'],
  methods: {
    handleChange(value) {
      this.$emit('change', value);
--- a/app/javascript/dashboard/components/ui/DateTimePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateTimePicker.vue
@@ -17,6 +17,7 @@ export default {
      default: [],
    },
  },
+  emits: ['change'],

  methods: {
    handleChange(value) {
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
@@ -38,7 +38,7 @@ const props = defineProps({
  },
 });

-const emit = defineEmits(['onSearch', 'select']);
+const emit = defineEmits(['onSearch', 'select', 'removeFilter']);

 const searchTerm = ref('');

--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -44,6 +44,7 @@ export default {
      default: '',
    },
  },
+  emits: ['remove'],
  computed: {
    textColor() {
      if (this.variant === 'smooth') return '';
--- a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
@@ -17,6 +17,7 @@ export default {
    AICTAModal,
    AIAssistanceCTAButton,
  },
+  emits: ['replaceText'],
  setup(props, { emit }) {
    const { uiSettings, updateUISettings } = useUISettings();

@@ -142,7 +143,7 @@ export default {
      >
        <AIAssistanceModal
          :ai-option="aiOption"
-          @applyText="insertText"
+          @apply-text="insertText"
          @close="hideAIAssistanceModal"
        />
      </woot-modal>
--- a/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
@@ -1,5 +1,7 @@
 <script>
 export default {
+  emits: ['open'],
+
  methods: {
    onClick() {
      this.$emit('open');
--- a/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceModal.vue
@@ -13,6 +13,7 @@ export default {
      required: true,
    },
  },
+  emits: ['close', 'applyText'],
  setup() {
    const { formatMessage } = useMessageFormatter();
    const { draftMessage, processEvent, recordAnalytics } = useAI();
--- a/app/javascript/dashboard/components/widgets/AICTAModal.vue
+++ b/app/javascript/dashboard/components/widgets/AICTAModal.vue
@@ -7,6 +7,8 @@ import { useAI } from 'dashboard/composables/useAI';
 import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';

 export default {
+  emits: ['close'],
+
  setup() {
    const { updateUISettings } = useUISettings();
    const { recordAnalytics } = useAI();
--- a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
@@ -11,6 +11,7 @@ export default {
      default: '',
    },
  },
+  emits: ['update:modelValue'],
  data() {
    return {
      uploadState: 'idle',
--- a/app/javascript/dashboard/components/widgets/ChannelItem.vue
+++ b/app/javascript/dashboard/components/widgets/ChannelItem.vue
@@ -12,6 +12,7 @@ export default {
      required: true,
    },
  },
+  emits: ['channelItemClick'],
  computed: {
    hasFbConfigured() {
      return window.chatwootConfig?.fbAppId;
--- a/app/javascript/dashboard/components/widgets/ColorPicker.vue
+++ b/app/javascript/dashboard/components/widgets/ColorPicker.vue
@@ -11,6 +11,7 @@ export default {
      default: '',
    },
  },
+  emits: ['update:modelValue'],
  data() {
    return {
      isPickerOpen: false,
@@ -45,7 +46,7 @@ export default {
      disable-alpha
      :model-value="modelValue"
      class="colorpicker--chrome"
-      @update:modelValue="updateColor"
+      @update:model-value="updateColor"
    />
  </div>
 </template>
--- a/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
+++ b/app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue
@@ -80,6 +80,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div v-if="hasOpenedAtleastOnce" class="dashboard-app--container">
    <div
--- a/app/javascript/dashboard/components/widgets/FeatureToggle.vue
+++ b/app/javascript/dashboard/components/widgets/FeatureToggle.vue
@@ -19,6 +19,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div v-if="isFeatureEnabled">
    <slot />
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -47,6 +47,7 @@ export default {
      default: '',
    },
  },
+  emits: ['update:modelValue', 'removeFilter', 'resetFilter'],
  computed: {
    attributeKey: {
      get() {
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@@ -5,7 +5,7 @@ export default {
  props: {
    inbox: {
      type: Object,
-      default: () => { },
+      default: () => {},
    },
  },
  computed: {
--- a/app/javascript/dashboard/components/widgets/TableFooter.vue
+++ b/app/javascript/dashboard/components/widgets/TableFooter.vue
@@ -16,6 +16,8 @@ const props = defineProps({
    default: 0,
  },
 });
+
+const emit = defineEmits(['pageChange']);
 const totalPages = computed(() => Math.ceil(props.totalCount / props.pageSize));
 const firstIndex = computed(() => props.pageSize * (props.currentPage - 1) + 1);
 const lastIndex = computed(() =>
@@ -26,6 +28,7 @@ const isFooterVisible = computed(
 );
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <footer
    v-if="isFooterVisible"
@@ -42,7 +45,7 @@ const isFooterVisible = computed(
      :total-pages="totalPages"
      :total-count="totalCount"
      :page-size="pageSize"
-      @pageChange="$emit('pageChange', $event)"
+      @page-change="emit('pageChange', $event)"
    />
  </footer>
 </template>
--- a/app/javascript/dashboard/components/widgets/VideoCallButton.vue
+++ b/app/javascript/dashboard/components/widgets/VideoCallButton.vue
@@ -41,6 +41,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <woot-button
    v-if="isVideoIntegrationEnabled"
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
@@ -26,7 +26,7 @@ export default {
    },
    onSend: {
      type: Function,
-      default: () => { },
+      default: () => {},
    },
    sendButtonText: {
      type: String,
@@ -53,19 +53,19 @@ export default {
    },
    onFileUpload: {
      type: Function,
-      default: () => { },
+      default: () => {},
    },
    toggleEmojiPicker: {
      type: Function,
-      default: () => { },
+      default: () => {},
    },
    toggleAudioRecorder: {
      type: Function,
-      default: () => { },
+      default: () => {},
    },
    toggleAudioRecorderPlayPause: {
      type: Function,
-      default: () => { },
+      default: () => {},
    },
    isRecordingAudio: {
      type: Boolean,
@@ -112,6 +112,12 @@ export default {
      required: true,
    },
  },
+  emits: [
+    'replaceText',
+    'toggleInsertArticle',
+    'toggleEditor',
+    'selectWhatsappTemplate',
+  ],
  setup() {
    const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
      useUISettings();
@@ -166,9 +172,9 @@ export default {
        return false;
      }
      // Disable audio recorder for safari browser as recording is not supported
-      const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
-        navigator.userAgent
-      );
+      // const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
+      //   navigator.userAgent
+      // );

      return (
        this.isFeatureEnabledonAccount(
@@ -340,7 +346,7 @@ export default {
        :conversation-id="conversationId"
        :is-private-note="isOnPrivateNote"
        :message="message"
-        @replaceText="replaceText"
+        @replace-text="replaceText"
      />
      <transition name="modal-fade">
        <div
--- a/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
@@ -22,6 +22,7 @@ export default {
      default: false,
    },
  },
+  emits: ['setReplyMode', 'togglePopout'],
  setup(props, { emit }) {
    const setReplyMode = mode => {
      emit('setReplyMode', mode);
--- a/app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/keyboardEmojiSelector.vue
@@ -48,7 +48,7 @@ onMounted(() => {
    v-if="items.length"
    type="emoji"
    :items="items"
-    @mentionSelect="handleMentionClick"
+    @mention-select="handleMentionClick"
  >
    <template #default="{ item, selected }">
      <span
--- a/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue
@@ -10,6 +10,7 @@ export default {
      default: '',
    },
  },
+  emits: ['replace'],
  computed: {
    ...mapGetters({
      cannedMessages: 'getCannedResponses',
@@ -46,6 +47,6 @@ export default {
  <MentionBox
    v-if="items.length"
    :items="items"
-    @mentionSelect="handleMentionClick"
+    @mention-select="handleMentionClick"
  />
 </template>
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -37,6 +37,7 @@ export default {
      default: false,
    },
  },
+  emits: ['applyFilter', 'updateFolder'],
  setup() {
    const { setFilterAttributes } = useFilter({
      filteri18nKey: 'FILTER',
@@ -363,8 +364,8 @@ export default {
              ? $t(`CONTACTS_FILTER.ERRORS.VALUE_REQUIRED`)
              : ''
          "
-          @resetFilter="resetFilter(i, appliedFilters[i])"
-          @removeFilter="removeFilter(i)"
+          @reset-filter="resetFilter(i, appliedFilters[i])"
+          @remove-filter="removeFilter(i)"
        />
        <div class="mt-4">
          <woot-button
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
@@ -27,6 +27,7 @@ export default {
  components: {
    FilterItem,
  },
+  emits: ['changeFilter'],
  setup() {
    const { updateUISettings } = useUISettings();

@@ -107,7 +108,7 @@ export default {
          :selected-value="chatStatus"
          :items="chatStatusItems"
          path-prefix="CHAT_LIST.CHAT_STATUS_FILTER_ITEMS"
-          @onChangeFilter="onChangeFilter"
+          @on-change-filter="onChangeFilter"
        />
      </div>
      <div class="flex items-center justify-between last:mt-4">
@@ -119,7 +120,7 @@ export default {
          :selected-value="sortFilter"
          :items="chatSortItems"
          path-prefix="CHAT_LIST.SORT_ORDER_ITEMS"
-          @onChangeFilter="onChangeFilter"
+          @on-change-filter="onChangeFilter"
        />
      </div>
    </div>
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -34,6 +34,7 @@ export default {
      default: true,
    },
  },
+  emits: ['contactPanelToggle'],
  data() {
    return { activeIndex: 0 };
  },
@@ -103,7 +104,7 @@ export default {
      :is-inbox-view="isInboxView"
      :is-contact-panel-open="isContactPanelOpen"
      :show-back-button="isOnExpandedLayout && !isInboxView"
-      @contactPanelToggle="onToggleContactPanel"
+      @contact-panel-toggle="onToggleContactPanel"
    />
    <woot-tabs
      v-if="dashboardApps.length && currentChat.id"
@@ -128,7 +129,7 @@ export default {
        :inbox-id="inboxId"
        :is-inbox-view="isInboxView"
        :is-contact-panel-open="isContactPanelOpen"
-        @contactPanelToggle="onToggleContactPanel"
+        @contact-panel-toggle="onToggleContactPanel"
      />
      <EmptyState
        v-if="!currentChat.id && !isInboxView"
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue
@@ -69,6 +69,15 @@ export default {
      default: false,
    },
  },
+  emits: [
+    'contextMenuToggle',
+    'assignAgent',
+    'assignLabel',
+    'assignTeam',
+    'markAsUnread',
+    'assignPriority',
+    'updateConversationStatus',
+  ],
  data() {
    return {
      hovered: false,
@@ -336,12 +345,12 @@ export default {
        :priority="chat.priority"
        :chat-id="chat.id"
        :has-unread-messages="hasUnread"
-        @updateConversation="onUpdateConversation"
-        @assignAgent="onAssignAgent"
-        @assignLabel="onAssignLabel"
-        @assignTeam="onAssignTeam"
-        @markAsUnread="markAsUnread"
-        @assignPriority="assignPriority"
+        @update-conversation="onUpdateConversation"
+        @assign-agent="onAssignAgent"
+        @assign-label="onAssignLabel"
+        @assign-team="onAssignTeam"
+        @mark-as-unread="markAsUnread"
+        @assign-priority="assignPriority"
      />
    </ContextMenu>
  </div>
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
@@ -41,6 +41,7 @@ export default {
      default: false,
    },
  },
+  emits: ['contactPanelToggle'],
  setup(props, { emit }) {
    const keyboardEvents = {
      'Alt+KeyO': {
--- a/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
@@ -18,6 +18,7 @@ export default {
      required: true,
    },
  },
+  emits: ['onChangeFilter'],
  data() {
    return {
      activeValue: this.selectedValue,
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -439,6 +439,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <li
    v-if="shouldRenderMessage"
@@ -579,7 +580,7 @@ export default {
        :message="data"
        @open="openContextMenu"
        @close="closeContextMenu"
-        @replyTo="handleReplyTo"
+        @reply-to="handleReplyTo"
      />
    </div>
  </li>
--- a/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MessagesView.vue
@@ -52,6 +52,7 @@ export default {
      default: false,
    },
  },
+  emits: ['contactPanelToggle'],
  setup() {
    const isPopOutReplyBox = ref(false);
    const { isEnterprise } = useConfig();
--- a/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/MoreActions.vue
@@ -28,7 +28,7 @@ export default {
    emitter.on(CMD_UNMUTE_CONVERSATION, this.unmute);
    emitter.on(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
  },
-  destroyed() {
+  unmounted() {
    emitter.off(CMD_MUTE_CONVERSATION, this.mute);
    emitter.off(CMD_UNMUTE_CONVERSATION, this.unmute);
    emitter.off(CMD_SEND_TRANSCRIPT, this.toggleEmailActionsModal);
--- a/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/PriorityMark.vue
@@ -29,6 +29,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <span
    v-if="priority"
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -465,12 +465,10 @@ export default {
      this.onNewConversationModalActive
    );
  },
-  destroyed() {
+  unmounted() {
    document.removeEventListener('paste', this.onPaste);
    document.removeEventListener('keydown', this.handleKeyEvents);
    emitter.off(BUS_EVENTS.TOGGLE_REPLY_TO_MESSAGE, this.fetchAndSetReplyTo);
-  },
-  unmounted() {
    emitter.off(
      BUS_EVENTS.NEW_CONVERSATION_MODAL,
      this.onNewConversationModalActive
@@ -1128,9 +1126,9 @@ export default {
        v-if="showAudioRecorderEditor"
        ref="audioRecorderInput"
        :audio-record-format="audioRecordFormat"
-        @recorderProgressChanged="onRecordProgressChanged"
-        @stateRecorderChanged="onStateRecorderChanged"
-        @finishRecord="onFinishRecorder"
+        @recorder-progress-changed="onRecordProgressChanged"
+        @state-recorder-changed="onStateRecorderChanged"
+        @finish-record="onFinishRecorder"
      />
      <ResizableTextArea
        v-else-if="!showRichContentEditor"
@@ -1142,8 +1140,8 @@ export default {
        :signature="signatureToApply"
        allow-signature
        :send-with-signature="sendWithSignature"
-        @typingOff="onTypingOff"
-        @typingOn="onTypingOn"
+        @typing-off="onTypingOff"
+        @typing-on="onTypingOn"
        @focus="onFocus"
        @blur="onBlur"
      />
@@ -1161,21 +1159,21 @@ export default {
        :signature="signatureToApply"
        allow-signature
        :channel-type="channelType"
-        @typingOff="onTypingOff"
-        @typingOn="onTypingOn"
+        @typing-off="onTypingOff"
+        @typing-on="onTypingOn"
        @focus="onFocus"
        @blur="onBlur"
-        @toggleUserMention="toggleUserMention"
-        @toggleCannedMenu="toggleCannedMenu"
-        @toggleVariablesMenu="toggleVariablesMenu"
-        @clearSelection="clearEditorSelection"
+        @toggle-user-mention="toggleUserMention"
+        @toggle-canned-menu="toggleCannedMenu"
+        @toggle-variables-menu="toggleVariablesMenu"
+        @clear-selection="clearEditorSelection"
      />
    </div>
    <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
      <AttachmentPreview
        class="flex-col mt-4"
        :attachments="attachedFiles"
-        @removeAttachment="removeAttachment"
+        @remove-attachment="removeAttachment"
      />
    </div>
    <MessageSignatureMissingAlert
@@ -1205,16 +1203,16 @@ export default {
      :message="message"
      :portal-slug="connectedPortalSlug"
      :new-conversation-modal-active="newConversationModalActive"
-      @selectWhatsappTemplate="openWhatsappTemplateModal"
-      @toggleEditor="toggleRichContentEditor"
-      @replaceText="replaceText"
-      @toggleInsertArticle="toggleInsertArticle"
+      @select-whatsapp-template="openWhatsappTemplateModal"
+      @toggle-editor="toggleRichContentEditor"
+      @replace-text="replaceText"
+      @toggle-insert-article="toggleInsertArticle"
    />
    <WhatsappTemplates
      :inbox-id="inbox.id"
      :show="showWhatsAppTemplatesModal"
      @close="hideWhatsappTemplatesModal"
-      @onSend="onSendWhatsAppReply"
+      @on-send="onSendWhatsAppReply"
      @cancel="hideWhatsappTemplatesModal"
    />

--- a/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue
@@ -9,6 +9,7 @@ export default {
      required: true,
    },
  },
+  emits: ['dismiss'],
 };
 </script>

--- a/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/VariableList.vue
@@ -11,6 +11,7 @@ export default {
      default: '',
    },
  },
+  emits: ['selectVariable'],
  computed: {
    ...mapGetters({
      customAttributes: 'attributes/getAttributes',
@@ -62,7 +63,7 @@ export default {
    v-if="items.length"
    type="variable"
    :items="items"
-    @mentionSelect="handleVariableClick"
+    @mention-select="handleVariableClick"
  />
 </template>

--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue
@@ -19,6 +19,7 @@ export default {
      default: () => ({}),
    },
  },
+  emits: ['sendMessage', 'resetTemplate'],
  setup(props, { emit }) {
    const processVariable = str => {
      return str.replace(/{{|}}/g, '');
--- a/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue
@@ -9,6 +9,7 @@ export default {
      default: undefined,
    },
  },
+  emits: ['onSelect'],
  data() {
    return {
      query: '',
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
@@ -7,6 +7,7 @@ export default {
      required: true,
    },
  },
+  emits: ['error'],
  data() {
    return {
      show: false,
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue
@@ -21,6 +21,7 @@ export default {
      required: true,
    },
  },
+  emits: ['error'],
  data() {
    return {
      show: false,
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue
@@ -15,6 +15,7 @@ export default {
      default: '',
    },
  },
+  emits: ['error'],
  data() {
    return {
      hasImgStoryError: false,
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Integration.vue
@@ -31,6 +31,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <DyteVideoCall
    v-if="showDyteIntegration"
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/MailHead.vue
@@ -45,6 +45,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div
    v-if="showHead"
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/TranslateModal.vue
@@ -10,6 +10,7 @@ export default {
      default: '',
    },
  },
+  emits: ['close'],
  computed: {
    translationsAvailable() {
      return !!Object.keys(this.translations).length;
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue
@@ -6,6 +6,7 @@ export default {
      required: true,
    },
  },
+  emits: ['error'],
  data() {
    return {
      show: false,
--- a/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/components/SLACardLabel.vue
@@ -103,6 +103,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div
    v-if="hasSlaThreshold"
--- a/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue
@@ -37,6 +37,14 @@ export default {
      default: null,
    },
  },
+  emits: [
+    'updateConversation',
+    'assignPriority',
+    'markAsUnread',
+    'assignAgent',
+    'assignTeam',
+    'assignLabel',
+  ],
  data() {
    return {
      STATUS_TYPE: wootConstants.STATUS_TYPE,
--- a/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversation/LabelSuggestion.vue
@@ -150,6 +150,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <li
    v-if="shouldShowSuggestions"
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue
@@ -18,6 +18,7 @@ export default {
      default: 0,
    },
  },
+  emits: ['select', 'close'],
  data() {
    return {
      query: '',
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue
@@ -48,6 +48,14 @@ export default {
      default: false,
    },
  },
+  emits: [
+    'selectAllConversations',
+    'assignAgent',
+    'updateConversations',
+    'assignLabels',
+    'assignTeam',
+    'resolveConversations',
+  ],
  data() {
    return {
      showAgentsList: false,
@@ -72,7 +80,7 @@ export default {
      this.onCmdResolveConversation
    );
  },
-  destroyed() {
+  unmounted() {
    emitter.off(
      CMD_BULK_ACTION_SNOOZE_CONVERSATION,
      this.onCmdSnoozeConversation
@@ -231,7 +239,7 @@ export default {
        <TeamActions
          v-if="showTeamsList"
          class="team-actions-box"
-          @assignTeam="assignTeam"
+          @assign-team="assignTeam"
          @close="showTeamsList = false"
        />
      </transition>
@@ -245,7 +253,7 @@ export default {
    >
      <CustomSnoozeModal
        @close="hideCustomSnoozeModal"
-        @chooseTime="customSnoozeTime"
+        @choose-time="customSnoozeTime"
      />
    </woot-modal>
  </div>
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue
@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';

 export default {
+  emits: ['update', 'close', 'assign'],
  data() {
    return {
      query: '',
--- a/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue
@@ -1,6 +1,8 @@
 <script>
 import { mapGetters } from 'vuex';
 export default {
+  emits: ['assignTeam', 'close'],
+
  data() {
    return {
      query: '',
--- a/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue
@@ -63,7 +63,7 @@ const unlinkIssue = () => {
        :identifier="issue.identifier"
        :link-id="linkId"
        :issue-url="issue.url"
-        @unlinkIssue="unlinkIssue"
+        @unlink-issue="unlinkIssue"
      />

      <span class="mt-2 text-sm font-medium text-ash-900">
--- a/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue
@@ -120,7 +120,7 @@ const linkIssue = async () => {
          :loading-placeholder="$t('INTEGRATION_SETTINGS.LINEAR.LINK.LOADING')"
          enable-search
          class="left-0 flex flex-col w-full overflow-y-auto h-fit !max-h-[160px] md:left-auto md:right-0 top-10"
-          @onSearch="onSearch"
+          @on-search="onSearch"
          @select="onSelectIssue"
        />
      </template>
--- a/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/linear/index.vue
@@ -119,7 +119,7 @@ onMounted(() => {
      :issue="linkedIssue.issue"
      :link-id="linkedIssue.id"
      class="absolute right-0 top-[40px] invisible group-hover:visible"
-      @unlinkIssue="unlinkIssue"
+      @unlink-issue="unlinkIssue"
    />
    <woot-modal
      v-model:show="shouldShowPopup"
--- a/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
+++ b/app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue
@@ -18,6 +18,7 @@ export default {
      default: false,
    },
  },
+  emits: ['onAvatarSelect', 'onAvatarDelete'],
  watch: {},
  methods: {
    handleImageUpload(event) {
--- a/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
+++ b/app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue
@@ -16,6 +16,8 @@ defineProps({
  },
 });

+defineEmits(['close']);
+
 const { t } = useI18n();

 const shortcutKeys = SHORTCUT_KEYS;
--- a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
+++ b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
@@ -16,6 +16,7 @@ export default {
      required: true,
    },
  },
+  emits: ['close'],
  setup() {
    const show = defineModel('show', { type: Boolean, default: false });

--- a/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactAttribute.vue
@@ -12,6 +12,7 @@ export default {
    value: { type: [String, Number], default: '' },
    showEdit: { type: Boolean, default: false },
  },
+  emits: ['update'],
  data() {
    return {
      isEditing: false,
--- a/app/javascript/dashboard/modules/contact/components/ContactFields.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
@@ -9,6 +9,7 @@ export default {
      default: () => ({}),
    },
  },
+  emits: ['update', 'createAttribute'],

  computed: {
    additionalAttributes() {
--- a/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactIntro.vue
@@ -13,6 +13,7 @@ export default {
      default: () => ({}),
    },
  },
+  emits: ['edit', 'message'],

  computed: {
    additionalAttributes() {
--- a/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactPanel.vue
@@ -77,7 +77,7 @@ export default {
    <ContactFields
      :contact="contact"
      @update="updateField"
-      @createAttribute="toggleCustomAttributeModal"
+      @create-attribute="toggleCustomAttributeModal"
    />
    <EditContact
      v-if="showEditModal"
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -25,6 +25,7 @@ export default {
      default: () => [],
    },
  },
+  emits: ['search', 'submit', 'cancel'],
  setup() {
    return { v$: useVuelidate() };
  },
@@ -115,9 +116,11 @@ export default {
                :phone-number="props.option.phone_number"
              />
            </template>
-            <span slot="noResult">
-              {{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}
-            </span>
+            <template #noResult>
+              <span>
+                {{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}
+              </span>
+            </template>
          </multiselect>
          <span v-if="v$.parentContact.$error" class="message">
            {{ $t('MERGE_CONTACTS.FORM.CHILD_CONTACT.ERROR') }}
--- a/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContactSummary.vue
@@ -13,6 +13,7 @@ export default {
 };
 </script>

+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div
    v-if="parentContactName"
--- a/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
+++ b/app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue
@@ -39,6 +39,7 @@ export default {
      default: () => ({}),
    },
  },
+  emits: ['open', 'close', 'replyTo'],
  setup() {
    const { getPlainText } = useMessageFormatter();
    return {
--- a/app/javascript/dashboard/modules/notes/components/ContactNote.vue
+++ b/app/javascript/dashboard/modules/notes/components/ContactNote.vue
@@ -25,6 +25,7 @@ export default {
      default: 0,
    },
  },
+  emits: ['delete'],
  setup() {
    const { formatMessage } = useMessageFormatter();
    return {
--- a/app/javascript/dashboard/modules/notes/components/NoteList.vue
+++ b/app/javascript/dashboard/modules/notes/components/NoteList.vue
@@ -20,6 +20,7 @@ export default {
      default: false,
    },
  },
+  emits: ['add', 'edit', 'delete'],

  methods: {
    onAddNote(value) {
--- a/app/javascript/dashboard/modules/search/components/ReadMore.vue
+++ b/app/javascript/dashboard/modules/search/components/ReadMore.vue
@@ -6,6 +6,7 @@ export default {
      default: false,
    },
  },
+  emits: ['expand'],
 };
 </script>

--- a/app/javascript/dashboard/modules/search/components/SearchHeader.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchHeader.vue
@@ -1,5 +1,7 @@
 <script>
 export default {
+  emits: ['search'],
+
  data() {
    return {
      searchQuery: '',
--- a/app/javascript/dashboard/modules/search/components/SearchTabs.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchTabs.vue
@@ -10,6 +10,7 @@ export default {
      default: 0,
    },
  },
+  emits: ['tabChange'],
  data() {
    return {
      activeTab: 0,
--- a/app/javascript/dashboard/modules/search/components/SearchView.vue
+++ b/app/javascript/dashboard/modules/search/components/SearchView.vue
@@ -220,7 +220,7 @@ export default {
          v-if="query"
          :tabs="tabs"
          :selected-tab="activeTabIndex"
-          @tabChange="tab => (selectedTab = tab)"
+          @tab-change="tab => (selectedTab = tab)"
        />
      </header>
      <div class="search-results">
--- a/app/javascript/dashboard/routes/dashboard/Dashboard.vue
+++ b/app/javascript/dashboard/routes/dashboard/Dashboard.vue
@@ -159,23 +159,23 @@ export default {
      :route="currentRoute"
      :has-banner="hasBanner"
      :show-secondary-sidebar="isSidebarOpen"
-      @openNotificationPanel="openNotificationPanel"
-      @toggleAccountModal="toggleAccountModal"
-      @openKeyShortcutModal="toggleKeyShortcutModal"
-      @closeKeyShortcutModal="closeKeyShortcutModal"
-      @showAddLabelPopup="showAddLabelPopup"
+      @open-notification-panel="openNotificationPanel"
+      @toggle-account-modal="toggleAccountModal"
+      @open-key-shortcut-modal="toggleKeyShortcutModal"
+      @close-key-shortcut-modal="closeKeyShortcutModal"
+      @show-add-label-popup="showAddLabelPopup"
    />
    <main class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
      <router-view />
      <CommandBar />
      <AccountSelector
        :show-account-modal="showAccountModal"
-        @closeAccountModal="toggleAccountModal"
-        @showCreateAccountModal="openCreateAccountModal"
+        @close-account-modal="toggleAccountModal"
+        @show-create-account-modal="openCreateAccountModal"
      />
      <AddAccountModal
        :show="showCreateAccountModal"
-        @closeAccountCreateModal="closeCreateAccountModal"
+        @close-account-create-modal="closeCreateAccountModal"
      />
      <WootKeyShortcutModal
        v-model:show="showShortcutModal"
--- a/app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/CmdBarConversationSnooze.vue
@@ -66,7 +66,7 @@ useEmitter(CMD_SNOOZE_CONVERSATION, onCmdSnoozeConversation);
  >
    <CustomSnoozeModal
      @close="hideCustomSnoozeModal"
-      @chooseTime="chooseSnoozeTime"
+      @choose-time="chooseSnoozeTime"
    />
  </woot-modal>
 </template>
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue
@@ -6,6 +6,7 @@ export default {
      default: () => [],
    },
  },
+  emits: ['add'],
  data() {
    return {
      content: '',
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactInfoPanel.vue
@@ -86,8 +86,8 @@ export default {
      :show-avatar="showAvatar"
      :contact="contact"
      close-icon-name="dismiss"
-      @panelClose="onClose"
-      @togglePanel="onClose"
+      @panel-close="onClose"
+      @toggle-panel="onClose"
    />
    <div class="list-group">
      <Draggable
--- a/Show More
+++ b/Show More