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

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"
+      @add-folders="onClickOpenAddFoldersModal"
-      @deleteFolders="onClickOpenDeleteFoldersModal"
+      @delete-folders="onClickOpenDeleteFoldersModal"
-      @filtersModal="onToggleAdvanceFiltersModal"
+      @filters-modal="onToggleAdvanceFiltersModal"
-      @resetFilters="resetAndFetchData"
+      @reset-filters="resetAndFetchData"
-      @basicFilterChange="onBasicFilterChange"
+      @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"
+      @select-all-conversations="toggleSelectAll"
-      @assignAgent="onAssignAgent"
+      @assign-agent="onAssignAgent"
-      @updateConversations="onUpdateConversations"
+      @update-conversations="onUpdateConversations"
-      @assignLabels="onAssignLabels"
+      @assign-labels="onAssignLabels"
-      @assignTeam="onAssignTeamsForBulk"
+      @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"
+              @select-conversation="selectConversation"
-              @deSelectConversation="deSelectConversation"
+              @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"
+        @apply-filter="onApplyFilter"
-        @updateFolder="onUpdateSavedFilter"
+        @update-folder="onUpdateSavedFilter"
       />
     </woot-modal>
   </div>

app/javascript/dashboard/components/ChatListHeader.vue

@@ -108,7 +108,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
       />
       <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"
-        @changeFilter="onBasicFilterChange"
+        @change-filter="onBasicFilterChange"
       />
     </div>
   </div>

app/javascript/dashboard/components/ConversationItem.vue

@@ -56,14 +56,14 @@ export default {
     :selected="isConversationSelected(source.id)"
     :show-assignee="showAssignee"
     enable-context-menu
-    @selectConversation="selectConversation"
+    @select-conversation="selectConversation"
-    @deSelectConversation="deSelectConversation"
+    @de-select-conversation="deSelectConversation"
-    @assignAgent="assignAgent"
+    @assign-agent="assignAgent"
-    @assignTeam="assignTeam"
+    @assign-team="assignTeam"
-    @assignLabel="assignLabels"
+    @assign-label="assignLabels"
-    @updateConversationStatus="updateConversationStatus"
+    @update-conversation-status="updateConversationStatus"
-    @contextMenuToggle="toggleContextMenu"
+    @context-menu-toggle="toggleContextMenu"
-    @markAsUnread="markAsUnread"
+    @mark-as-unread="markAsUnread"
-    @assignPriority="assignPriority"
+    @assign-priority="assignPriority"
   />
 </template>

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: {

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 />

app/javascript/dashboard/components/CustomSnoozeModal.vue

@@ -5,6 +5,7 @@ export default {
   components: {
     DatePicker,
   },
+  emits: ['close', 'chooseTime'],
 
   data() {
     return {

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>

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>

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"

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>

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"
+      @toggle-accounts="toggleAccountModal"
-      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @openNotificationPanel="openNotificationPanel"
+      @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"
+      @add-label="showAddLabelPopup"
-      @toggleAccounts="toggleAccountModal"
+      @toggle-accounts="toggleAccountModal"
     />
   </aside>
 </template>

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"

app/javascript/dashboard/components/layout/sidebarComponents/AccountSelector.vue

@@ -7,7 +7,7 @@ export default {
       default: true,
     },
   },
-
+  emits: ['closeAccountModal', 'showCreateAccountModal'],
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',

app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue

@@ -15,6 +15,7 @@ export default {
       default: true,
     },
   },
+  emits: ['closeAccountCreateModal'],
   setup() {
     return { v$: useVuelidate() };
   },

app/javascript/dashboard/components/layout/sidebarComponents/AgentDetails.vue

@@ -6,6 +6,7 @@ export default {
   components: {
     Thumbnail,
   },
+  emits: ['toggleMenu'],
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',

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',

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',

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" />
+      <NotificationBell @open-notification-panel="openNotificationPanel" />
-      <AgentDetails @toggleMenu="toggleOptions" />
+      <AgentDetails @toggle-menu="toggleOptions" />
       <OptionsMenu
         :show="showOptionsMenu"
-        @toggleAccounts="toggleAccountModal"
+        @toggle-accounts="toggleAccountModal"
-        @showSupportChatWindow="toggleSupportChatWindow"
+        @show-support-chat-window="toggleSupportChatWindow"
-        @openKeyShortcutModal="$emit('openKeyShortcutModal')"
+        @open-key-shortcut-modal="$emit('openKeyShortcutModal')"
         @close="toggleOptions"
       />
     </div>

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>

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>

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();

app/javascript/dashboard/components/ui/AnnouncementPopup.vue

@@ -18,6 +18,7 @@ export default {
       default: '',
     },
   },
+  emits: ['open', 'close'],
   methods: {
     onClickOpenPath() {
       this.$emit('open');

app/javascript/dashboard/components/ui/Banner.vue

@@ -38,6 +38,7 @@ export default {
       default: false,
     },
   },
+  emits: ['primaryAction', 'close'],
   computed: {
     bannerClasses() {
       const classList = [this.colorScheme];

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)"
+                  @select-month="openCalendar($event, calendar)"
-                  @setView="setViewMode"
+                  @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"
+                  @update-hovered-end-date="hoveredEndDate = $event"
-                  @selectDate="selectDate"
+                  @select-date="selectDate"
-                  @setView="setViewMode"
+                  @set-view="setViewMode"
                   @prev="moveCalendar(calendar, 'prev')"
                   @next="moveCalendar(calendar, 'next')"
                 />

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');

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"
     />

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

app/javascript/dashboard/components/ui/DateRangePicker.vue

@@ -16,6 +16,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ['change'],
   methods: {
     handleChange(value) {
       this.$emit('change', value);

app/javascript/dashboard/components/ui/DateTimePicker.vue

@@ -17,6 +17,7 @@ export default {
       default: [],
     },
   },
+  emits: ['change'],
 
   methods: {
     handleChange(value) {

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('');
 

app/javascript/dashboard/components/ui/Label.vue

@@ -44,6 +44,7 @@ export default {
       default: '',
     },
   },
+  emits: ['remove'],
   computed: {
     textColor() {
       if (this.variant === 'smooth') return '';

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>

app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue

@@ -1,5 +1,7 @@
 <script>
 export default {
+  emits: ['open'],
+
   methods: {
     onClick() {
       this.$emit('open');

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();

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();

app/javascript/dashboard/components/widgets/AutomationFileInput.vue

@@ -11,6 +11,7 @@ export default {
       default: '',
     },
   },
+  emits: ['update:modelValue'],
   data() {
     return {
       uploadState: 'idle',

app/javascript/dashboard/components/widgets/ChannelItem.vue

@@ -12,6 +12,7 @@ export default {
       required: true,
     },
   },
+  emits: ['channelItemClick'],
   computed: {
     hasFbConfigured() {
       return window.chatwootConfig?.fbAppId;

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>

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

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 />

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -47,6 +47,7 @@ export default {
       default: '',
     },
   },
+  emits: ['update:modelValue', 'removeFilter', 'resetFilter'],
   computed: {
     attributeKey: {
       get() {

app/javascript/dashboard/components/widgets/InboxName.vue

@@ -5,7 +5,7 @@ export default {
   props: {
     inbox: {
       type: Object,
-      default: () => { },
+      default: () => {},
     },
   },
   computed: {

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>

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"

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(
+      // const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
-        navigator.userAgent
+      //   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

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);

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

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>

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])"
+          @reset-filter="resetFilter(i, appliedFilters[i])"
-          @removeFilter="removeFilter(i)"
+          @remove-filter="removeFilter(i)"
         />
         <div class="mt-4">
           <woot-button

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>

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"

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"
+        @update-conversation="onUpdateConversation"
-        @assignAgent="onAssignAgent"
+        @assign-agent="onAssignAgent"
-        @assignLabel="onAssignLabel"
+        @assign-label="onAssignLabel"
-        @assignTeam="onAssignTeam"
+        @assign-team="onAssignTeam"
-        @markAsUnread="markAsUnread"
+        @mark-as-unread="markAsUnread"
-        @assignPriority="assignPriority"
+        @assign-priority="assignPriority"
       />
     </ContextMenu>
   </div>

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': {

app/javascript/dashboard/components/widgets/conversation/FilterItem.vue

@@ -18,6 +18,7 @@ export default {
       required: true,
     },
   },
+  emits: ['onChangeFilter'],
   data() {
     return {
       activeValue: this.selectedValue,

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>

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();

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);

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"

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"
+        @recorder-progress-changed="onRecordProgressChanged"
-        @stateRecorderChanged="onStateRecorderChanged"
+        @state-recorder-changed="onStateRecorderChanged"
-        @finishRecord="onFinishRecorder"
+        @finish-record="onFinishRecorder"
       />
       <ResizableTextArea
         v-else-if="!showRichContentEditor"
@@ -1142,8 +1140,8 @@ export default {
         :signature="signatureToApply"
         allow-signature
         :send-with-signature="sendWithSignature"
-        @typingOff="onTypingOff"
+        @typing-off="onTypingOff"
-        @typingOn="onTypingOn"
+        @typing-on="onTypingOn"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -1161,21 +1159,21 @@ export default {
         :signature="signatureToApply"
         allow-signature
         :channel-type="channelType"
-        @typingOff="onTypingOff"
+        @typing-off="onTypingOff"
-        @typingOn="onTypingOn"
+        @typing-on="onTypingOn"
         @focus="onFocus"
         @blur="onBlur"
-        @toggleUserMention="toggleUserMention"
+        @toggle-user-mention="toggleUserMention"
-        @toggleCannedMenu="toggleCannedMenu"
+        @toggle-canned-menu="toggleCannedMenu"
-        @toggleVariablesMenu="toggleVariablesMenu"
+        @toggle-variables-menu="toggleVariablesMenu"
-        @clearSelection="clearEditorSelection"
+        @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"
+      @select-whatsapp-template="openWhatsappTemplateModal"
-      @toggleEditor="toggleRichContentEditor"
+      @toggle-editor="toggleRichContentEditor"
-      @replaceText="replaceText"
+      @replace-text="replaceText"
-      @toggleInsertArticle="toggleInsertArticle"
+      @toggle-insert-article="toggleInsertArticle"
     />
     <WhatsappTemplates
       :inbox-id="inbox.id"
       :show="showWhatsAppTemplatesModal"
       @close="hideWhatsappTemplatesModal"
-      @onSend="onSendWhatsAppReply"
+      @on-send="onSendWhatsAppReply"
       @cancel="hideWhatsappTemplatesModal"
     />
 

app/javascript/dashboard/components/widgets/conversation/ReplyToMessage.vue

@@ -9,6 +9,7 @@ export default {
       required: true,
     },
   },
+  emits: ['dismiss'],
 };
 </script>
 

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>
 

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, '');

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue

@@ -9,6 +9,7 @@ export default {
       default: undefined,
     },
   },
+  emits: ['onSelect'],
   data() {
     return {
       query: '',

app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue

@@ -7,6 +7,7 @@ export default {
       required: true,
     },
   },
+  emits: ['error'],
   data() {
     return {
       show: false,

app/javascript/dashboard/components/widgets/conversation/bubble/ImageAudioVideo.vue

@@ -21,6 +21,7 @@ export default {
       required: true,
     },
   },
+  emits: ['error'],
   data() {
     return {
       show: false,

app/javascript/dashboard/components/widgets/conversation/bubble/InstagramStory.vue

@@ -15,6 +15,7 @@ export default {
       default: '',
     },
   },
+  emits: ['error'],
   data() {
     return {
       hasImgStoryError: false,

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"

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"

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;

app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue

@@ -6,6 +6,7 @@ export default {
       required: true,
     },
   },
+  emits: ['error'],
   data() {
     return {
       show: false,

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"

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,

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"

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -18,6 +18,7 @@ export default {
       default: 0,
     },
   },
+  emits: ['select', 'close'],
   data() {
     return {
       query: '',

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>

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: '',

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: '',

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">

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>

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"

app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue

@@ -18,6 +18,7 @@ export default {
       default: false,
     },
   },
+  emits: ['onAvatarSelect', 'onAvatarDelete'],
   watch: {},
   methods: {
     handleImageUpload(event) {

app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue

@@ -16,6 +16,8 @@ defineProps({
   },
 });
 
+defineEmits(['close']);
+
 const { t } = useI18n();
 
 const shortcutKeys = SHORTCUT_KEYS;

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 });
 

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,

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

@@ -9,6 +9,7 @@ export default {
       default: () => ({}),
     },
   },
+  emits: ['update', 'createAttribute'],
 
   computed: {
     additionalAttributes() {

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

@@ -13,6 +13,7 @@ export default {
       default: () => ({}),
     },
   },
+  emits: ['edit', 'message'],
 
   computed: {
     additionalAttributes() {

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"

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">
+            <template #noResult>
-              {{ $t('AGENT_MGMT.SEARCH.NO_RESULTS') }}
+              <span>
-            </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') }}

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"

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -39,6 +39,7 @@ export default {
       default: () => ({}),
     },
   },
+  emits: ['open', 'close', 'replyTo'],
   setup() {
     const { getPlainText } = useMessageFormatter();
     return {

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -25,6 +25,7 @@ export default {
       default: 0,
     },
   },
+  emits: ['delete'],
   setup() {
     const { formatMessage } = useMessageFormatter();
     return {

app/javascript/dashboard/modules/notes/components/NoteList.vue

@@ -20,6 +20,7 @@ export default {
       default: false,
     },
   },
+  emits: ['add', 'edit', 'delete'],
 
   methods: {
     onAddNote(value) {

app/javascript/dashboard/modules/search/components/ReadMore.vue

@@ -6,6 +6,7 @@ export default {
       default: false,
     },
   },
+  emits: ['expand'],
 };
 </script>
 

app/javascript/dashboard/modules/search/components/SearchHeader.vue

@@ -1,5 +1,7 @@
 <script>
 export default {
+  emits: ['search'],
+
   data() {
     return {
       searchQuery: '',

app/javascript/dashboard/modules/search/components/SearchTabs.vue

@@ -10,6 +10,7 @@ export default {
       default: 0,
     },
   },
+  emits: ['tabChange'],
   data() {
     return {
       activeTab: 0,

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">

app/javascript/dashboard/routes/dashboard/Dashboard.vue

@@ -159,23 +159,23 @@ export default {
       :route="currentRoute"
       :has-banner="hasBanner"
       :show-secondary-sidebar="isSidebarOpen"
-      @openNotificationPanel="openNotificationPanel"
+      @open-notification-panel="openNotificationPanel"
-      @toggleAccountModal="toggleAccountModal"
+      @toggle-account-modal="toggleAccountModal"
-      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @closeKeyShortcutModal="closeKeyShortcutModal"
+      @close-key-shortcut-modal="closeKeyShortcutModal"
-      @showAddLabelPopup="showAddLabelPopup"
+      @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"
+        @close-account-modal="toggleAccountModal"
-        @showCreateAccountModal="openCreateAccountModal"
+        @show-create-account-modal="openCreateAccountModal"
       />
       <AddAccountModal
         :show="showCreateAccountModal"
-        @closeAccountCreateModal="closeCreateAccountModal"
+        @close-account-create-modal="closeCreateAccountModal"
       />
       <WootKeyShortcutModal
         v-model:show="showShortcutModal"

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>

app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.vue

@@ -6,6 +6,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ['add'],
   data() {
     return {
       content: '',

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"
+      @panel-close="onClose"
-      @togglePanel="onClose"
+      @toggle-panel="onClose"
     />
     <div class="list-group">
       <Draggable