fix: apply ESLint rule vue/custom-event-name-casing

app/javascript/dashboard/components/ChatList.vue

@@ -612,7 +612,7 @@ export default {
       }
     },
     emitConversationLoaded() {
-      this.$emit('conversation-load');
+      this.$emit('conversationLoad');
       this.$nextTick(() => {
         // Addressing a known issue in the virtual list library where dynamically added items
         // might not render correctly. This workaround involves a slight manual adjustment
@@ -879,11 +879,11 @@ export default {
       :has-applied-filters="hasAppliedFilters"
       :has-active-folders="hasActiveFolders"
       :active-status="activeStatus"
-      @add-folders="onClickOpenAddFoldersModal"
-      @delete-folders="onClickOpenDeleteFoldersModal"
-      @filters-modal="onToggleAdvanceFiltersModal"
-      @reset-filters="resetAndFetchData"
-      @basic-filter-change="onBasicFilterChange"
+      @addFolders="onClickOpenAddFoldersModal"
+      @deleteFolders="onClickOpenDeleteFoldersModal"
+      @filtersModal="onToggleAdvanceFiltersModal"
+      @resetFilters="resetAndFetchData"
+      @basicFilterChange="onBasicFilterChange"
     />
 
     <AddCustomViews
@@ -924,11 +924,11 @@ export default {
       :show-open-action="allSelectedConversationsStatus('open')"
       :show-resolved-action="allSelectedConversationsStatus('resolved')"
       :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
-      @select-all-conversations="selectAllConversations"
-      @assign-agent="onAssignAgent"
-      @update-conversations="onUpdateConversations"
-      @assign-labels="onAssignLabels"
-      @assign-team="onAssignTeamsForBulk"
+      @selectAllConversations="selectAllConversations"
+      @assignAgent="onAssignAgent"
+      @updateConversations="onUpdateConversations"
+      @assignLabels="onAssignLabels"
+      @assignTeam="onAssignTeamsForBulk"
     />
     <div
       ref="conversationList"

app/javascript/dashboard/components/ChatListHeader.vue

@@ -22,15 +22,15 @@ const props = defineProps({
 });
 
 const emits = defineEmits([
-  'add-folders',
-  'delete-folders',
-  'reset-filters',
-  'basic-filter-change',
-  'filters-modal',
+  'addFolders',
+  'deleteFolders',
+  'resetFilters',
+  'basicFilterChange',
+  'filtersModal',
 ]);
 
 const onBasicFilterChange = (value, type) => {
-  emits('basic-filter-change', value, type);
+  emits('basicFilterChange', value, type);
 };
 
 const hasAppliedFiltersOrActiveFolders = computed(() => {
@@ -68,7 +68,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="secondary"
           icon="save"
-          @click="emits('add-folders')"
+          @click="emits('addFolders')"
         />
         <woot-button
           v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
@@ -76,7 +76,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="alert"
           icon="dismiss-circle"
-          @click="emits('reset-filters')"
+          @click="emits('resetFilters')"
         />
       </div>
       <div v-if="hasActiveFolders">
@@ -86,7 +86,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="secondary"
           icon="edit"
-          @click="emits('filters-modal')"
+          @click="emits('filtersModal')"
         />
         <woot-button
           v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
@@ -94,7 +94,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
           variant="smooth"
           color-scheme="alert"
           icon="delete"
-          @click="emits('delete-folders')"
+          @click="emits('deleteFolders')"
         />
       </div>
       <woot-button
@@ -104,7 +104,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
         color-scheme="secondary"
         icon="filter"
         size="tiny"
-        @click="emits('filters-modal')"
+        @click="emits('filtersModal')"
       />
       <ConversationBasicFilter
         v-if="!hasAppliedFiltersOrActiveFolders"

app/javascript/dashboard/components/ConversationItem.vue

@@ -59,14 +59,14 @@ export default {
     :selected="isConversationSelected(source.id)"
     :show-assignee="showAssignee"
     :enable-context-menu="true"
-    @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"
+    @selectConversation="selectConversation"
+    @deSelectConversation="deSelectConversation"
+    @assignAgent="assignAgent"
+    @assignTeam="assignTeam"
+    @assignLabel="assignLabels"
+    @updateConversationStatus="updateConversationStatus"
+    @contextMenuToggle="toggleContextMenu"
+    @markAsUnread="markAsUnread"
+    @assignPriority="assignPriority"
   />
 </template>

app/javascript/dashboard/components/CustomSnoozeModal.vue

@@ -22,7 +22,7 @@ export default {
       this.$emit('close');
     },
     chooseTime() {
-      this.$emit('choose-time', this.snoozeTime);
+      this.$emit('chooseTime', this.snoozeTime);
     },
     disabledDate(date) {
       // Disable all the previous dates
@@ -53,7 +53,7 @@ export default {
         :disabled-time="disabledTime"
         :popup-style="{ width: '100%' }"
       />
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
         <woot-button variant="clear" @click.prevent="onClose">
           {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
         </woot-button>

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -133,10 +133,10 @@ export default {
       }
     },
     toggleKeyShortcutModal() {
-      this.$emit('open-key-shortcut-modal');
+      this.$emit('openKeyShortcutModal');
     },
     closeKeyShortcutModal() {
-      this.$emit('close-key-shortcut-modal');
+      this.$emit('closeKeyShortcutModal');
     },
     getKeyboardEvents() {
       return {
@@ -168,13 +168,13 @@ export default {
       window.$chatwoot.toggle();
     },
     toggleAccountModal() {
-      this.$emit('toggle-account-modal');
+      this.$emit('toggleAccountModal');
     },
     showAddLabelPopup() {
-      this.$emit('show-add-label-popup');
+      this.$emit('showAddLabelPopup');
     },
     openNotificationPanel() {
-      this.$emit('open-notification-panel');
+      this.$emit('openNotificationPanel');
     },
   },
 };
@@ -189,9 +189,9 @@ export default {
       :account-id="accountId"
       :menu-items="primaryMenuItems"
       :active-menu-item="activePrimaryMenu.key"
-      @toggle-accounts="toggleAccountModal"
-      @key-shortcut-modal="toggleKeyShortcutModal"
-      @open-notification-panel="openNotificationPanel"
+      @toggleAccounts="toggleAccountModal"
+      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @openNotificationPanel="openNotificationPanel"
     />
     <SecondarySidebar
       v-if="showSecondarySidebar"
@@ -204,8 +204,8 @@ export default {
       :menu-config="activeSecondaryMenu"
       :current-user="currentUser"
       :is-on-chatwoot-cloud="isOnChatwootCloud"
-      @add-label="showAddLabelPopup"
-      @toggle-accounts="toggleAccountModal"
+      @addLabel="showAddLabelPopup"
+      @toggleAccounts="toggleAccountModal"
     />
   </aside>
 </template>

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

@@ -27,27 +27,27 @@ export default {
 <template>
   <div
     v-if="showShowCurrentAccountContext"
-    class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
+    class="relative px-2 py-2 mt-2 text-xs border rounded-md cursor-pointer text-slate-700 dark:text-slate-200 border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800"
     @mouseover="setShowSwitch"
     @mouseleave="resetShowSwitch"
   >
     {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
     <p
-      class="text-ellipsis overflow-hidden whitespace-nowrap font-medium mb-0 text-slate-800 dark:text-slate-100"
+      class="mb-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap text-slate-800 dark:text-slate-100"
     >
       {{ account.name }}
     </p>
     <transition name="fade">
       <div
         v-if="showSwitchButton"
-        class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full rounded-md justify-end absolute top-0 right-0 w-full"
+        class="absolute top-0 right-0 flex items-center justify-end w-full h-full rounded-md ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark"
       >
-        <div class="my-0 mx-2">
+        <div class="mx-2 my-0">
           <woot-button
             variant="clear"
             size="tiny"
             icon="arrow-swap"
-            @click="$emit('toggle-accounts')"
+            @click="$emit('toggleAccounts')"
           >
             {{ $t('SIDEBAR.SWITCH') }}
           </woot-button>

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

@@ -27,7 +27,7 @@ export default {
 <template>
   <woot-modal
     :show="showAccountModal"
-    :on-close="() => $emit('close-account-modal')"
+    :on-close="() => $emit('closeAccountModal')"
   >
     <woot-modal-header
       :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
@@ -41,18 +41,18 @@ export default {
         class="pt-0 pb-0"
       >
         <button
-          class="flex justify-between items-center expanded clear link cursor-pointer px-4 py-3 w-full rounded-lg hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
+          class="flex items-center justify-between w-full px-4 py-3 rounded-lg cursor-pointer expanded clear link hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
           @click="onChangeAccount(account.id)"
         >
           <span class="w-full">
             <label :for="account.name" class="text-left rtl:text-right">
               <div
-                class="text-slate-700 text-lg dark:text-slate-100 font-medium hover:underline-offset-4 leading-5"
+                class="text-lg font-medium leading-5 text-slate-700 dark:text-slate-100 hover:underline-offset-4"
               >
                 {{ account.name }}
               </div>
               <div
-                class="text-slate-500 text-xs dark:text-slate-500 font-medium hover:underline-offset-4"
+                class="text-xs font-medium text-slate-500 dark:text-slate-500 hover:underline-offset-4"
               >
                 {{ account.role }}
               </div>
@@ -71,11 +71,11 @@ export default {
 
     <div
       v-if="globalConfig.createNewAccountFromDashboard"
-      class="flex justify-end items-center px-8 pb-8 pt-4 gap-2"
+      class="flex items-center justify-end gap-2 px-8 pt-4 pb-8"
     >
       <button
-        class="button success large expanded nice w-full"
-        @click="$emit('show-create-account-modal')"
+        class="w-full button success large expanded nice"
+        @click="$emit('showCreateAccountModal')"
       >
         {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
       </button>

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

@@ -40,7 +40,7 @@ export default {
         const account_id = await this.$store.dispatch('accounts/create', {
           account_name: this.accountName,
         });
-        this.$emit('close-account-create-modal');
+        this.$emit('closeAccountCreateModal');
         useAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
         window.location = `/app/accounts/${account_id}/dashboard`;
       } catch (error) {
@@ -56,17 +56,14 @@ export default {
 </script>
 
 <template>
-  <woot-modal
-    :show="show"
-    :on-close="() => $emit('close-account-create-modal')"
-  >
-    <div class="h-auto overflow-auto flex flex-col">
+  <woot-modal :show="show" :on-close="() => $emit('closeAccountCreateModal')">
+    <div class="flex flex-col h-auto overflow-auto">
       <woot-modal-header
         :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
         :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
       />
-      <div v-if="!hasAccounts" class="text-sm mt-6 mx-8 mb-0">
-        <div class="items-center rounded-md flex alert">
+      <div v-if="!hasAccounts" class="mx-8 mt-6 mb-0 text-sm">
+        <div class="flex items-center rounded-md alert">
           <div class="ml-1 mr-3">
             <fluent-icon icon="warning" />
           </div>

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

@@ -17,7 +17,7 @@ export default {
   },
   methods: {
     handleClick() {
-      this.$emit('toggle-menu');
+      this.$emit('toggleMenu');
     },
   },
 };
@@ -26,7 +26,7 @@ export default {
   <woot-button
     v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
     variant="link"
-    class="items-center flex rounded-full"
+    class="flex items-center rounded-full"
     @click="handleClick"
   >
     <Thumbnail

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

@@ -23,7 +23,7 @@ export default {
   methods: {
     openNotificationPanel() {
       if (this.$route.name !== 'notifications_index') {
-        this.$emit('open-notification-panel');
+        this.$emit('openNotificationPanel');
       }
     },
   },
@@ -32,7 +32,7 @@ export default {
 <template>
   <div class="mb-4">
     <button
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 p-0 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="relative flex items-center justify-center w-10 h-10 p-0 my-2 rounded-lg text-slate-600 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isNotificationPanelActive,

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

@@ -38,7 +38,7 @@ export default {
       navigate(e);
     },
     handleKeyboardHelpClick() {
-      this.$emit('key-shortcut-modal');
+      this.$emit('openKeyShortcutModal');
       this.$emit('close');
     },
     logout() {
@@ -60,7 +60,7 @@ export default {
     <div
       v-if="show"
       v-on-clickaway="onClickAway"
-      class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-30 rounded-md shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
+      class="absolute z-30 w-64 px-2 py-2 bg-white border rounded-md shadow-xl left-3 rtl:left-auto rtl:right-3 bottom-16 dark:bg-slate-800 border-slate-25 dark:border-slate-700"
       :class="{ 'block visible': show }"
     >
       <AvailabilityStatus />
@@ -71,7 +71,7 @@ export default {
             color-scheme="secondary"
             size="small"
             icon="arrow-swap"
-            @click="$emit('toggle-accounts')"
+            @click="$emit('toggleAccounts')"
           >
             {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
           </woot-button>
@@ -82,7 +82,7 @@ export default {
             color-scheme="secondary"
             size="small"
             icon="chat-help"
-            @click="$emit('show-support-chat-window')"
+            @click="$emit('showSupportChatWindow')"
           >
             {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
           </woot-button>
@@ -106,7 +106,7 @@ export default {
           >
             <a
               :href="href"
-              class="button small clear secondary bg-white dark:bg-slate-800 h-8"
+              class="h-8 bg-white button small clear secondary dark:bg-slate-800"
               :class="{ 'is-active': isActive }"
               @click="e => handleProfileSettingClick(e, navigate)"
             >
@@ -131,7 +131,7 @@ export default {
         <WootDropdownItem v-if="currentUser.type === 'SuperAdmin'">
           <a
             href="/super_admin"
-            class="button small clear secondary bg-white dark:bg-slate-800 h-8"
+            class="h-8 bg-white button small clear secondary dark:bg-slate-800"
             target="_blank"
             rel="noopener nofollow noreferrer"
             @click="$emit('close')"

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

@@ -54,21 +54,21 @@ export default {
       this.showOptionsMenu = !this.showOptionsMenu;
     },
     toggleAccountModal() {
-      this.$emit('toggle-accounts');
+      this.$emit('toggleAccounts');
     },
     toggleSupportChatWindow() {
       window.$chatwoot.toggle();
     },
     openNotificationPanel() {
       this.$track(ACCOUNT_EVENTS.OPENED_NOTIFICATIONS);
-      this.$emit('open-notification-panel');
+      this.$emit('openNotificationPanel');
     },
   },
 };
 </script>
 <template>
   <div
-    class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
+    class="flex flex-col justify-between w-16 h-full bg-white border-r dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0"
   >
     <div class="flex flex-col items-center">
       <Logo
@@ -94,13 +94,13 @@ export default {
         :open-in-new-page="true"
         :to="helpDocsURL"
       />
-      <NotificationBell @open-notification-panel="openNotificationPanel" />
-      <AgentDetails @toggle-menu="toggleOptions" />
+      <NotificationBell @openNotificationPanel="openNotificationPanel" />
+      <AgentDetails @toggleMenu="toggleOptions" />
       <OptionsMenu
         :show="showOptionsMenu"
-        @toggle-accounts="toggleAccountModal"
-        @show-support-chat-window="toggleSupportChatWindow"
-        @key-shortcut-modal="$emit('key-shortcut-modal')"
+        @toggleAccounts="toggleAccountModal"
+        @showSupportChatWindow="toggleSupportChatWindow"
+        @openKeyShortcutModal="$emit('openKeyShortcutModal')"
         @close="toggleOptions"
       />
     </div>

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

@@ -223,10 +223,10 @@ export default {
   },
   methods: {
     showAddLabelPopup() {
-      this.$emit('add-label');
+      this.$emit('addLabel');
     },
     toggleAccountModal() {
-      this.$emit('toggle-accounts');
+      this.$emit('toggleAccounts');
     },
     showNewLink(featureFlag) {
       return this.isFeatureEnabledonAccount(this.accountId, featureFlag);
@@ -237,13 +237,13 @@ export default {
 <template>
   <div
     v-if="hasSecondaryMenu"
-    class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
+    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 @toggle-accounts="toggleAccountModal" />
+    <AccountContext @toggleAccounts="toggleAccountModal" />
     <transition-group
       name="menu-list"
       tag="ul"
-      class="pt-2 list-none ml-0 mb-0"
+      class="pt-2 mb-0 ml-0 list-none"
     >
       <SecondaryNavItem
         v-for="menuItem in accessibleMenuItems"
@@ -254,7 +254,7 @@ export default {
         v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
         :key="menuItem.key"
         :menu-item="menuItem"
-        @add-label="showAddLabelPopup"
+        @addLabel="showAddLabelPopup"
       />
     </transition-group>
   </div>

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

@@ -169,7 +169,7 @@ export default {
       } else if (this.menuItem.showModalForNewItem) {
         if (this.menuItem.modalName === 'AddLabel') {
           e.preventDefault();
-          this.$emit('add-label');
+          this.$emit('addLabel');
         }
       }
     },

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

@@ -223,7 +223,7 @@ const emitDateRange = () => {
     >
       <CalendarDateRange
         :selected-range="selectedRange"
-        @set-range="setDateRange"
+        @setRange="setDateRange"
       />
       <div
         class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
@@ -265,15 +265,15 @@ const emitDateRange = () => {
                   :calendar-type="calendar"
                   :start-current-date="startCurrentDate"
                   :end-current-date="endCurrentDate"
-                  @select-year="openCalendar($event, calendar, YEAR)"
+                  @selectYear="openCalendar($event, calendar, YEAR)"
                 />
                 <CalendarMonth
                   v-else-if="calendarViews[calendar] === MONTH"
                   :calendar-type="calendar"
                   :start-current-date="startCurrentDate"
                   :end-current-date="endCurrentDate"
-                  @select-month="openCalendar($event, calendar)"
-                  @set-view="setViewMode"
+                  @selectMonth="openCalendar($event, calendar)"
+                  @setView="setViewMode"
                   @prev="moveCalendar(calendar, 'prev', YEAR)"
                   @next="moveCalendar(calendar, 'next', YEAR)"
                 />
@@ -287,9 +287,9 @@ const emitDateRange = () => {
                   :selected-end-date="selectedEndDate"
                   :selecting-end-date="selectingEndDate"
                   :hovered-end-date="hoveredEndDate"
-                  @update-hovered-end-date="hoveredEndDate = $event"
-                  @select-date="selectDate"
-                  @set-view="setViewMode"
+                  @updateHoveredEndDate="hoveredEndDate = $event"
+                  @selectDate="selectDate"
+                  @setView="setViewMode"
                   @prev="moveCalendar(calendar, 'prev')"
                   @next="moveCalendar(calendar, 'next')"
                 />

app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue

@@ -19,7 +19,7 @@ defineProps({
     default: '',
   },
 });
-const emit = defineEmits(['prev', 'next', 'set-view']);
+const emit = defineEmits(['prev', 'next', 'setView']);
 
 const { YEAR } = CALENDAR_PERIODS;
 
@@ -32,7 +32,7 @@ const onClickNext = type => {
 };
 
 const onClickSetView = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };
 </script>
 

app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue

@@ -8,10 +8,10 @@ defineProps({
   },
 });
 
-const emit = defineEmits(['set-range']);
+const emit = defineEmits(['setRange']);
 
 const setDateRange = range => {
-  emit('set-range', range);
+  emit('setRange', range);
 };
 </script>
 

app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue

@@ -33,10 +33,10 @@ const activeMonthIndex = computed(() => {
   return getMonth(date);
 });
 
-const emit = defineEmits(['select-month', 'prev', 'next', 'set-view']);
+const emit = defineEmits(['selectMonth', 'prev', 'next', 'setView']);
 
 const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };
 
 const onClickPrev = () => {
@@ -48,7 +48,7 @@ const onClickNext = () => {
 };
 
 const selectMonth = index => {
-  emit('select-month', index);
+  emit('selectMonth', index);
 };
 </script>
 
@@ -63,7 +63,7 @@ const selectMonth = index => {
           MONTH
         )
       "
-      @set-view="setViewMode"
+      @setView="setViewMode"
       @prev="onClickPrev"
       @next="onClickNext"
     />

app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue

@@ -31,22 +31,22 @@ const props = defineProps({
 });
 
 const emit = defineEmits([
-  'update-hovered-end-date',
-  'select-date',
+  'updateHoveredEndDate',
+  'selectDate',
   'prev',
   'next',
-  'set-view',
+  'setView',
 ]);
 
 const { START_CALENDAR } = CALENDAR_TYPES;
 const { MONTH } = CALENDAR_PERIODS;
 
 const emitHoveredEndDate = day => {
-  emit('update-hovered-end-date', day);
+  emit('updateHoveredEndDate', day);
 };
 
 const emitSelectDate = day => {
-  emit('select-date', day);
+  emit('selectDate', day);
 };
 const onClickPrev = () => {
   emit('prev');
@@ -57,7 +57,7 @@ const onClickNext = () => {
 };
 
 const setViewMode = (type, mode) => {
-  emit('set-view', type, mode);
+  emit('setView', type, mode);
 };
 
 const weeks = calendarType => {
@@ -139,7 +139,7 @@ const dayClasses = day => ({
       "
       @prev="onClickPrev"
       @next="onClickNext"
-      @set-view="setViewMode"
+      @setView="setViewMode"
     />
     <CalendarWeekLabel />
     <div

app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue

@@ -52,10 +52,10 @@ const onClickNext = () => {
   startYear.value = addYears(new Date(startYear.value, 0, 1), 10).getFullYear();
 };
 
-const emit = defineEmits(['select-year']);
+const emit = defineEmits(['selectYear']);
 
 const selectYear = year => {
-  emit('select-year', year);
+  emit('selectYear', year);
 };
 </script>
 

app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue

@@ -38,13 +38,13 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['on-search']);
+const emits = defineEmits(['onSearch']);
 
 const searchTerm = ref('');
 
 const onSearch = debounce(value => {
   searchTerm.value = value;
-  emits('on-search', value);
+  emits('onSearch', value);
 }, 300);
 
 const filteredListItems = computed(() => {

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

@@ -66,7 +66,7 @@ export default {
         '$mod+KeyZ': {
           action: () => {
             if (this.initialMessage) {
-              this.$emit('replace-text', this.initialMessage);
+              this.$emit('replaceText', this.initialMessage);
               this.initialMessage = '';
             }
           },
@@ -101,7 +101,7 @@ export default {
       this.showAIAssistanceModal = true;
     },
     insertText(message) {
-      this.$emit('replace-text', message);
+      this.$emit('replaceText', message);
     },
   },
 };
@@ -128,7 +128,7 @@ export default {
       >
         <AIAssistanceModal
           :ai-option="aiOption"
-          @apply-text="insertText"
+          @applyText="insertText"
           @close="hideAIAssistanceModal"
         />
       </woot-modal>

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

@@ -53,7 +53,7 @@ export default {
     },
     applyText() {
       this.recordAnalytics(this.aiOption);
-      this.$emit('apply-text', this.generatedContent);
+      this.$emit('applyText', this.generatedContent);
       this.onClose();
     },
   },
@@ -64,15 +64,15 @@ export default {
   <div class="flex flex-col">
     <woot-modal-header :header-title="headerTitle" />
     <form
-      class="modal-content flex flex-col w-full"
+      class="flex flex-col w-full modal-content"
       @submit.prevent="applyText"
     >
       <div v-if="draftMessage" class="w-full">
-        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
+        <h4 class="mt-1 text-base text-slate-700 dark:text-slate-100">
           {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.DRAFT_TITLE') }}
         </h4>
         <p v-dompurify-html="formatMessage(draftMessage, false)" />
-        <h4 class="text-base mt-1 text-slate-700 dark:text-slate-100">
+        <h4 class="mt-1 text-base text-slate-700 dark:text-slate-100">
           {{
             $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.GENERATED_TITLE')
           }}
@@ -83,7 +83,7 @@ export default {
         <p v-else v-dompurify-html="formatMessage(generatedContent, false)" />
       </div>
 
-      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
         <woot-button variant="clear" @click.prevent="onClose">
           {{
             $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.BUTTONS.CANCEL')

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

@@ -9,7 +9,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['remove-attachment']);
+const emits = defineEmits(['removeAttachment']);
 
 const nonRecordedAudioAttachments = computed(() => {
   return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
@@ -21,7 +21,7 @@ const recordedAudioAttachments = computed(() =>
 
 const onRemoveAttachment = itemIndex => {
   emits(
-    'remove-attachment',
+    'removeAttachment',
     nonRecordedAudioAttachments.value
       .filter((_, index) => index !== itemIndex)
       .concat(recordedAudioAttachments.value)

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

@@ -51,7 +51,7 @@ export default {
     },
     onItemClick() {
       if (this.isActive) {
-        this.$emit('channel-item-click', this.channel.key);
+        this.$emit('channelItemClick', this.channel.key);
       }
     },
   },

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

@@ -29,7 +29,7 @@ const isFooterVisible = computed(
 <template>
   <footer
     v-if="isFooterVisible"
-    class="h-12 flex items-center justify-between px-6"
+    class="flex items-center justify-between h-12 px-6"
   >
     <TableFooterResults
       :first-index="firstIndex"
@@ -42,7 +42,7 @@ const isFooterVisible = computed(
       :total-pages="totalPages"
       :total-count="totalCount"
       :page-size="pageSize"
-      @page-change="$emit('page-change', $event)"
+      @pageChange="$emit('pageChange', $event)"
     />
   </footer>
 </template>

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

@@ -24,7 +24,7 @@ const hasFirstPage = computed(() => props.currentPage === 1);
 const hasNextPage = computed(() => props.currentPage === props.totalPages);
 const hasPrevPage = computed(() => props.currentPage === 1);
 
-const emit = defineEmits(['page-change']);
+const emit = defineEmits(['pageChange']);
 
 function buttonClass(hasPage) {
   if (hasPage) {
@@ -34,7 +34,7 @@ function buttonClass(hasPage) {
 }
 
 function onPageChange(newPage) {
-  emit('page-change', newPage);
+  emit('pageChange', newPage);
 }
 
 const onNextPage = () => {
@@ -60,7 +60,7 @@ const onLastPage = () => {
 </script>
 
 <template>
-  <div class="flex items-center bg-slate-50 dark:bg-slate-800 h-8 rounded-lg">
+  <div class="flex items-center h-8 rounded-lg bg-slate-50 dark:bg-slate-800">
     <woot-button
       size="small"
       variant="smooth"
@@ -77,7 +77,7 @@ const onLastPage = () => {
         :class="hasFirstPage && 'opacity-40'"
       />
     </woot-button>
-    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <div class="w-px h-4 rounded-sm bg-slate-75 dark:bg-slate-700/50" />
     <woot-button
       size="small"
       variant="smooth"
@@ -96,7 +96,7 @@ const onLastPage = () => {
     </woot-button>
 
     <div
-      class="flex px-3 items-center gap-3 tabular-nums bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
+      class="flex items-center gap-3 px-3 tabular-nums bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
     >
       <span class="text-sm text-slate-800 dark:text-slate-75">
         {{ currentPage }}
@@ -122,7 +122,7 @@ const onLastPage = () => {
         :class="hasNextPage && 'opacity-40'"
       />
     </woot-button>
-    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <div class="w-px h-4 rounded-sm bg-slate-75 dark:bg-slate-700/50" />
     <woot-button
       size="small"
       variant="smooth"

app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue

@@ -217,7 +217,7 @@ export default {
       this.player.wavesurfer().pause();
     },
     fireRecorderBlob(blob) {
-      this.$emit('finish-record', {
+      this.$emit('finishRecord', {
         name: blob.name,
         type: blob.type,
         size: blob.size,
@@ -225,10 +225,10 @@ export default {
       });
     },
     fireStateRecorderChanged(state) {
-      this.$emit('state-recorder-changed', state);
+      this.$emit('stateRecorderChanged', state);
     },
     fireProgressRecord(duration) {
-      this.$emit('state-recorder-progress-changed', duration);
+      this.$emit('stateRecorderProgressChanged', duration);
     },
   },
 };

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -109,10 +109,10 @@ export default {
     return {
       typingIndicator: createTypingIndicator(
         () => {
-          this.$emit('typing-on');
+          this.$emit('typingOn');
         },
         () => {
-          this.$emit('typing-off');
+          this.$emit('typingOff');
         },
         TYPING_INDICATOR_IDLE_TIME
       ),
@@ -252,13 +252,13 @@ export default {
   },
   watch: {
     showUserMentions(updatedValue) {
-      this.$emit('toggle-user-mention', this.isPrivate && updatedValue);
+      this.$emit('toggleUserMention', this.isPrivate && updatedValue);
     },
     showCannedMenu(updatedValue) {
-      this.$emit('toggle-canned-menu', !this.isPrivate && updatedValue);
+      this.$emit('toggleCannedMenu', !this.isPrivate && updatedValue);
     },
     showVariables(updatedValue) {
-      this.$emit('toggle-variables-menu', !this.isPrivate && updatedValue);
+      this.$emit('toggleVariablesMenu', !this.isPrivate && updatedValue);
     },
     value(newVal = '') {
       if (newVal !== this.contentFromEditor) {
@@ -287,7 +287,7 @@ export default {
           this.state = this.editorView.state.apply(tr);
           this.editorView.updateState(this.state);
           this.emitOnChange();
-          this.$emit('clear-selection');
+          this.$emit('clearSelection');
         }
       }
       return null;

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -227,10 +227,10 @@ export default {
       this.setSignatureFlagForInbox(this.channelType, !this.sendWithSignature);
     },
     replaceText(text) {
-      this.$emit('replace-text', text);
+      this.$emit('replaceText', text);
     },
     toggleInsertArticle() {
-      this.$emit('toggle-insert-article');
+      this.$emit('toggleInsertArticle');
     },
   },
 };
@@ -293,7 +293,7 @@ export default {
         color-scheme="secondary"
         variant="smooth"
         size="small"
-        @click="$emit('toggle-editor')"
+        @click="$emit('toggleEditor')"
       />
       <woot-button
         v-if="showAudioPlayStopButton"
@@ -334,7 +334,7 @@ export default {
         :conversation-id="conversationId"
         :is-private-note="isOnPrivateNote"
         :message="message"
-        @replace-text="replaceText"
+        @replaceText="replaceText"
       />
       <transition name="modal-fade">
         <div

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

@@ -45,7 +45,7 @@ export default {
   <MentionBox
     v-if="items.length"
     :items="items"
-    @mention-select="handleMentionClick"
+    @mentionSelect="handleMentionClick"
   >
     <template slot-scope="{ item }">
       <strong>{{ item.label }}</strong> - {{ item.description }}

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

@@ -81,7 +81,7 @@ export default {
       this.$store.dispatch('conversationLabels/get', this.currentChat.id);
     },
     onToggleContactPanel() {
-      this.$emit('contact-panel-toggle');
+      this.$emit('contactPanelToggle');
     },
     onDashboardAppTabChange(index) {
       this.activeIndex = index;
@@ -100,12 +100,12 @@ export default {
       :is-inbox-view="isInboxView"
       :is-contact-panel-open="isContactPanelOpen"
       :show-back-button="isOnExpandedLayout && !isInboxView"
-      @contact-panel-toggle="onToggleContactPanel"
+      @contactPanelToggle="onToggleContactPanel"
     />
     <woot-tabs
       v-if="dashboardApps.length && currentChat.id"
       :index="activeIndex"
-      class="dashboard-app--tabs bg-white dark:bg-slate-900 -mt-px"
+      class="-mt-px bg-white dashboard-app--tabs dark:bg-slate-900"
       @change="onDashboardAppTabChange"
     >
       <woot-tabs-item
@@ -117,14 +117,14 @@ export default {
     </woot-tabs>
     <div
       v-show="!activeIndex"
-      class="flex bg-slate-25 dark:bg-slate-800 m-0 h-full min-h-0"
+      class="flex h-full min-h-0 m-0 bg-slate-25 dark:bg-slate-800"
     >
       <MessagesView
         v-if="currentChat.id"
         :inbox-id="inboxId"
         :is-inbox-view="isInboxView"
         :is-contact-panel-open="isContactPanelOpen"
-        @contact-panel-toggle="onToggleContactPanel"
+        @contactPanelToggle="onToggleContactPanel"
       />
       <EmptyState
         v-if="!currentChat.id && !isInboxView"

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

@@ -179,19 +179,19 @@ export default {
       this.hovered = false;
     },
     onSelectConversation(checked) {
-      const action = checked ? 'select-conversation' : 'de-select-conversation';
+      const action = checked ? 'selectConversation' : 'deSelectConversation';
       this.$emit(action, this.chat.id, this.inbox.id);
     },
     openContextMenu(e) {
       if (!this.enableContextMenu) return;
       e.preventDefault();
-      this.$emit('context-menu-toggle', true);
+      this.$emit('contextMenuToggle', true);
       this.contextMenu.x = e.pageX || e.clientX;
       this.contextMenu.y = e.pageY || e.clientY;
       this.showContextMenu = true;
     },
     closeContextMenu() {
-      this.$emit('context-menu-toggle', false);
+      this.$emit('contextMenuToggle', false);
       this.showContextMenu = false;
       this.contextMenu.x = null;
       this.contextMenu.y = null;
@@ -199,30 +199,30 @@ export default {
     onUpdateConversation(status, snoozedUntil) {
       this.closeContextMenu();
       this.$emit(
-        'update-conversation-status',
+        'updateConversationStatus',
         this.chat.id,
         status,
         snoozedUntil
       );
     },
     async onAssignAgent(agent) {
-      this.$emit('assign-agent', agent, [this.chat.id]);
+      this.$emit('assignAgent', agent, [this.chat.id]);
       this.closeContextMenu();
     },
     async onAssignLabel(label) {
-      this.$emit('assign-label', [label.title], [this.chat.id]);
+      this.$emit('assignLabel', [label.title], [this.chat.id]);
       this.closeContextMenu();
     },
     async onAssignTeam(team) {
-      this.$emit('assign-team', team, this.chat.id);
+      this.$emit('assignTeam', team, this.chat.id);
       this.closeContextMenu();
     },
     async markAsUnread() {
-      this.$emit('mark-as-unread', this.chat.id);
+      this.$emit('markAsUnread', this.chat.id);
       this.closeContextMenu();
     },
     async assignPriority(priority) {
-      this.$emit('assign-priority', priority, this.chat.id);
+      this.$emit('assignPriority', priority, this.chat.id);
       this.closeContextMenu();
     },
   },
@@ -335,12 +335,12 @@ export default {
         :priority="chat.priority"
         :chat-id="chat.id"
         :has-unread-messages="hasUnread"
-        @update-conversation="onUpdateConversation"
-        @assign-agent="onAssignAgent"
-        @assign-label="onAssignLabel"
-        @assign-team="onAssignTeam"
-        @mark-as-unread="markAsUnread"
-        @assign-priority="assignPriority"
+        @updateConversation="onUpdateConversation"
+        @assignAgent="onAssignAgent"
+        @assignLabel="onAssignLabel"
+        @assignTeam="onAssignTeam"
+        @markAsUnread="markAsUnread"
+        @assignPriority="assignPriority"
       />
     </woot-context-menu>
   </div>

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

@@ -123,7 +123,7 @@ export default {
     getKeyboardEvents() {
       return {
         'Alt+KeyO': {
-          action: () => this.$emit('contact-panel-toggle'),
+          action: () => this.$emit('contactPanelToggle'),
         },
       };
     },
@@ -160,7 +160,7 @@ export default {
               variant="link"
               color-scheme="secondary"
               class="[&>span]:overflow-hidden [&>span]:whitespace-nowrap [&>span]:text-ellipsis min-w-0"
-              @click.prevent="$emit('contact-panel-toggle')"
+              @click.prevent="$emit('contactPanelToggle')"
             >
               <span
                 class="text-base font-medium leading-tight text-slate-900 dark:text-slate-100"
@@ -191,7 +191,7 @@ export default {
               class="p-0"
               size="small"
               variant="link"
-              @click="$emit('contact-panel-toggle')"
+              @click="$emit('contactPanelToggle')"
             >
               {{ contactPanelToggleText }}
             </woot-button>

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

@@ -366,7 +366,7 @@ export default {
       );
     },
     onToggleContactPanel() {
-      this.$emit('contact-panel-toggle');
+      this.$emit('contactPanelToggle');
     },
     setScrollParams() {
       this.heightBeforeLoad = this.conversationPanel.scrollHeight;
@@ -450,7 +450,7 @@ export default {
         variant="smooth"
         size="tiny"
         color-scheme="secondary"
-        class="rounded-bl-calc rtl:rotate-180 rounded-tl-calc fixed z-10 bg-white dark:bg-slate-700 border-slate-50 dark:border-slate-600 border-solid border border-r-0 box-border"
+        class="box-border fixed z-10 bg-white border border-r-0 border-solid rounded-bl-calc rtl:rotate-180 rounded-tl-calc dark:bg-slate-700 border-slate-50 dark:border-slate-600"
         :class="
           isInboxView ? 'top-52 md:top-40' : 'top-[9.5rem] md:top-[6.25rem]'
         "
@@ -516,14 +516,14 @@ export default {
     >
       <div
         v-if="isAnyoneTyping"
-        class="items-center flex h-0 absolute w-full -top-7"
+        class="absolute flex items-center w-full h-0 -top-7"
       >
         <div
           class="flex py-2 pr-4 pl-5 shadow-md rounded-full bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto"
         >
           {{ typingUserNames }}
           <img
-            class="ltr:ml-2 rtl:mr-2 w-6"
+            class="w-6 ltr:ml-2 rtl:mr-2"
             src="~dashboard/assets/images/typing.gif"
             alt="Someone is typing"
           />

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

@@ -1134,9 +1134,9 @@ export default {
         v-if="showAudioRecorderEditor"
         ref="audioRecorderInput"
         :audio-record-format="audioRecordFormat"
-        @state-recorder-progress-changed="onStateProgressRecorderChanged"
-        @state-recorder-changed="onStateRecorderChanged"
-        @finish-record="onFinishRecorder"
+        @stateRecorderProgressChanged="onStateProgressRecorderChanged"
+        @stateRecorderChanged="onStateRecorderChanged"
+        @finishRecord="onFinishRecorder"
       />
       <ResizableTextArea
         v-else-if="!showRichContentEditor"
@@ -1148,8 +1148,8 @@ export default {
         :signature="signatureToApply"
         :allow-signature="true"
         :send-with-signature="sendWithSignature"
-        @typing-off="onTypingOff"
-        @typing-on="onTypingOn"
+        @typingOff="onTypingOff"
+        @typingOn="onTypingOn"
         @focus="onFocus"
         @blur="onBlur"
       />
@@ -1167,21 +1167,21 @@ export default {
         :signature="signatureToApply"
         :allow-signature="true"
         :channel-type="channelType"
-        @typing-off="onTypingOff"
-        @typing-on="onTypingOn"
+        @typingOff="onTypingOff"
+        @typingOn="onTypingOn"
         @focus="onFocus"
         @blur="onBlur"
-        @toggle-user-mention="toggleUserMention"
-        @toggle-canned-menu="toggleCannedMenu"
-        @toggle-variables-menu="toggleVariablesMenu"
-        @clear-selection="clearEditorSelection"
+        @toggleUserMention="toggleUserMention"
+        @toggleCannedMenu="toggleCannedMenu"
+        @toggleVariablesMenu="toggleVariablesMenu"
+        @clearSelection="clearEditorSelection"
       />
     </div>
     <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
       <AttachmentPreview
         class="flex-col mt-4"
         :attachments="attachedFiles"
-        @remove-attachment="removeAttachment"
+        @removeAttachment="removeAttachment"
       />
     </div>
     <MessageSignatureMissingAlert
@@ -1212,15 +1212,15 @@ export default {
       :portal-slug="connectedPortalSlug"
       :new-conversation-modal-active="newConversationModalActive"
       @selectWhatsappTemplate="openWhatsappTemplateModal"
-      @toggle-editor="toggleRichContentEditor"
-      @replace-text="replaceText"
-      @toggle-insert-article="toggleInsertArticle"
+      @toggleEditor="toggleRichContentEditor"
+      @replaceText="replaceText"
+      @toggleInsertArticle="toggleInsertArticle"
     />
     <WhatsappTemplates
       :inbox-id="inbox.id"
       :show="showWhatsAppTemplatesModal"
       @close="hideWhatsappTemplatesModal"
-      @on-send="onSendWhatsAppReply"
+      @onSend="onSendWhatsAppReply"
       @cancel="hideWhatsappTemplatesModal"
     />
 

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

@@ -61,7 +61,7 @@ export default {
     v-if="items.length"
     type="variable"
     :items="items"
-    @mention-select="handleVariableClick"
+    @mentionSelect="handleVariableClick"
   >
     <template slot-scope="{ item }">
       <span class="text-capitalize variable--list-label">

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

@@ -38,7 +38,7 @@ export default {
       this.selectedWaTemplate = null;
     },
     onSendMessage(message) {
-      this.$emit('on-send', message);
+      this.$emit('onSend', message);
     },
     onClose() {
       this.$emit('cancel');

app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue

@@ -146,7 +146,7 @@ export default {
   },
   methods: {
     toggleStatus(status, snoozedUntil) {
-      this.$emit('update-conversation', status, snoozedUntil);
+      this.$emit('updateConversation', status, snoozedUntil);
     },
     async snoozeConversation() {
       await this.$store.dispatch('setContextMenuChatId', this.chatId);
@@ -154,7 +154,7 @@ export default {
       ninja.open({ parent: 'snooze_conversation' });
     },
     assignPriority(priority) {
-      this.$emit('assign-priority', priority);
+      this.$emit('assignPriority', priority);
     },
     show(key) {
       // If the conversation status is same as the action, then don't display the option
@@ -179,12 +179,12 @@ export default {
 </script>
 
 <template>
-  <div class="bg-white dark:bg-slate-700 shadow-xl rounded-md p-1">
+  <div class="p-1 bg-white rounded-md shadow-xl dark:bg-slate-700">
     <MenuItem
       v-if="!hasUnreadMessages"
       :option="unreadOption"
       variant="icon"
-      @click="$emit('mark-as-unread')"
+      @click="$emit('markAsUnread')"
     />
     <template v-for="option in statusMenuConfig">
       <MenuItem
@@ -219,7 +219,7 @@ export default {
         :key="label.id"
         :option="generateMenuLabelConfig(label, 'label')"
         variant="label"
-        @click="$emit('assign-label', label)"
+        @click="$emit('assignLabel', label)"
       />
     </MenuItemWithSubmenu>
     <MenuItemWithSubmenu
@@ -233,7 +233,7 @@ export default {
           :key="agent.id"
           :option="generateMenuLabelConfig(agent, 'agent')"
           variant="agent"
-          @click="$emit('assign-agent', agent)"
+          @click="$emit('assignAgent', agent)"
         />
       </template>
     </MenuItemWithSubmenu>
@@ -245,7 +245,7 @@ export default {
         v-for="team in teams"
         :key="team.id"
         :option="generateMenuLabelConfig(team, 'team')"
-        @click="$emit('assign-team', team)"
+        @click="$emit('assignTeam', team)"
       />
     </MenuItemWithSubmenu>
   </div>

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

@@ -109,22 +109,22 @@ export default {
       this.showCustomTimeSnoozeModal = false;
     },
     selectAll(e) {
-      this.$emit('select-all-conversations', e.target.checked);
+      this.$emit('selectAllConversations', e.target.checked);
     },
     submit(agent) {
-      this.$emit('assign-agent', agent);
+      this.$emit('assignAgent', agent);
     },
     updateConversations(status, snoozedUntil) {
-      this.$emit('update-conversations', status, snoozedUntil);
+      this.$emit('updateConversations', status, snoozedUntil);
     },
     assignLabels(labels) {
-      this.$emit('assign-labels', labels);
+      this.$emit('assignLabels', labels);
     },
     assignTeam(team) {
-      this.$emit('assign-team', team);
+      this.$emit('assignTeam', team);
     },
     resolveConversations() {
-      this.$emit('resolve-conversations');
+      this.$emit('resolveConversations');
     },
     toggleUpdateActions() {
       this.showUpdateActions = !this.showUpdateActions;
@@ -145,7 +145,7 @@ export default {
 <template>
   <div class="bulk-action__container">
     <div class="flex items-center justify-between">
-      <label class="bulk-action__panel flex items-center justify-between">
+      <label class="flex items-center justify-between bulk-action__panel">
         <input
           ref="selectAllCheck"
           type="checkbox"
@@ -162,7 +162,7 @@ export default {
           }}
         </span>
       </label>
-      <div class="bulk-action__actions flex gap-1 items-center">
+      <div class="flex items-center gap-1 bulk-action__actions">
         <woot-button
           v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
           size="tiny"
@@ -231,7 +231,7 @@ export default {
         <TeamActions
           v-if="showTeamsList"
           class="team-actions-box"
-          @assign-team="assignTeam"
+          @assignTeam="assignTeam"
           @close="showTeamsList = false"
         />
       </transition>
@@ -245,7 +245,7 @@ export default {
     >
       <CustomSnoozeModal
         @close="hideCustomSnoozeModal"
-        @choose-time="customSnoozeTime"
+        @chooseTime="customSnoozeTime"
       />
     </woot-modal>
   </div>

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

@@ -20,7 +20,7 @@ export default {
   },
   methods: {
     assignTeam(key) {
-      this.$emit('assign-team', key);
+      this.$emit('assignTeam', key);
     },
     onClose() {
       this.$emit('close');
@@ -36,7 +36,7 @@ export default {
         <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
       </svg>
     </div>
-    <div class="header flex items-center justify-between">
+    <div class="flex items-center justify-between header">
       <span>{{ $t('BULK_ACTION.TEAMS.TEAM_SELECT_LABEL') }}</span>
       <woot-button
         size="tiny"
@@ -51,7 +51,7 @@ export default {
         <ul>
           <li class="search-container">
             <div
-              class="agent-list-search h-8 flex justify-between items-center gap-2"
+              class="flex items-center justify-between h-8 gap-2 agent-list-search"
             >
               <fluent-icon icon="search" class="search-icon" size="16" />
               <input

app/javascript/dashboard/components/widgets/conversation/linear/Issue.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['unlink-issue']);
+const emit = defineEmits(['unlinkIssue']);
 
 const formattedDate = computed(() => {
   const { createdAt } = props.issue;
@@ -50,7 +50,7 @@ const priorityLabel = computed(() => {
 });
 
 const unlinkIssue = () => {
-  emit('unlink-issue', props.linkId);
+  emit('unlinkIssue', props.linkId);
 };
 </script>
 
@@ -63,7 +63,7 @@ const unlinkIssue = () => {
         :identifier="issue.identifier"
         :link-id="linkId"
         :issue-url="issue.url"
-        @unlink-issue="unlinkIssue"
+        @unlinkIssue="unlinkIssue"
       />
 
       <span class="mt-2 text-sm font-medium text-ash-900">

app/javascript/dashboard/components/widgets/conversation/linear/IssueHeader.vue

@@ -13,10 +13,10 @@ const props = defineProps({
 
 const isUnlinking = inject('isUnlinking');
 
-const emit = defineEmits(['unlink-issue']);
+const emit = defineEmits(['unlinkIssue']);
 
 const unlinkIssue = () => {
-  emit('unlink-issue');
+  emit('unlinkIssue');
 };
 
 const openIssue = () => {

app/javascript/dashboard/components/widgets/conversation/linear/LinkIssue.vue

@@ -118,7 +118,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"
-          @on-search="onSearch"
+          @onSearch="onSearch"
           @click="onSelectIssue"
         />
       </template>

app/javascript/dashboard/components/widgets/conversation/linear/index.vue

@@ -123,7 +123,7 @@ onMounted(() => {
       :issue="linkedIssue.issue"
       :link-id="linkedIssue.id"
       class="absolute right-0 top-[40px] invisible group-hover:visible"
-      @unlink-issue="unlinkIssue"
+      @unlinkIssue="unlinkIssue"
     />
     <woot-modal
       :show.sync="shouldShowPopup"

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -51,7 +51,7 @@ export default {
       this.onSelect();
     },
     onSelect() {
-      this.$emit('mention-select', this.items[this.selectedIndex]);
+      this.$emit('mentionSelect', this.items[this.selectedIndex]);
     },
     variableKey(item = {}) {
       return this.type === 'variable' ? `{{${item.label}}}` : `/${item.label}`;
@@ -81,7 +81,7 @@ export default {
           @click="onListItemSelection(index)"
         >
           <p
-            class="text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 font-medium mb-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap min-w-0 max-w-full"
+            class="max-w-full min-w-0 mb-0 overflow-hidden text-sm font-medium text-slate-900 dark:text-slate-100 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
             :class="{
               'text-woot-500 dark:text-woot-500': index === selectedIndex,
             }"
@@ -89,7 +89,7 @@ export default {
             {{ item.description }}
           </p>
           <p
-            class="text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 mb-0 text-xs overflow-hidden text-ellipsis whitespace-nowrap min-w-0 max-w-full"
+            class="max-w-full min-w-0 mb-0 overflow-hidden text-xs text-slate-500 dark:text-slate-300 group-hover:text-woot-500 dark:group-hover:text-woot-500 text-ellipsis whitespace-nowrap"
             :class="{
               'text-woot-500 dark:text-woot-500': index === selectedIndex,
             }"

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

@@ -56,10 +56,10 @@ export default {
   methods: {
     closeModal() {
       this.value = '';
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
     onConfirm() {
-      this.$emit('on-confirm');
+      this.$emit('onConfirm');
     },
   },
 };

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

@@ -40,7 +40,7 @@ export default {
       this.$emit('update', { location: value });
     },
     handleCustomCreate() {
-      this.$emit('create-attribute');
+      this.$emit('createAttribute');
     },
     onCustomAttributeUpdate(key, value) {
       this.$emit('update', { custom_attributes: { [key]: value } });

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

@@ -76,7 +76,7 @@ export default {
     <ContactFields
       :contact="contact"
       @update="updateField"
-      @create-attribute="toggleCustomAttributeModal"
+      @createAttribute="toggleCustomAttributeModal"
     />
     <EditContact
       v-if="showEditModal"

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

@@ -25,7 +25,7 @@ export default {
   methods: {
     onTabChange(index) {
       this.activeTab = index;
-      this.$emit('tab-change', this.tabs[index].key);
+      this.$emit('tabChange', this.tabs[index].key);
     },
   },
 };

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

@@ -160,7 +160,7 @@ export default {
           v-if="query"
           :tabs="tabs"
           :selected-tab="activeTabIndex"
-          @tab-change="tab => (selectedTab = tab)"
+          @tabChange="tab => (selectedTab = tab)"
         />
       </header>
       <div class="search-results">
@@ -195,7 +195,7 @@ export default {
             {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
           </p>
         </div>
-        <div v-else class="empty text-center">
+        <div v-else class="text-center empty">
           <p class="text-center margin-bottom-0">
             <fluent-icon icon="search" size="24px" class="icon" />
           </p>

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

@@ -148,23 +148,23 @@ export default {
     <Sidebar
       :route="currentRoute"
       :show-secondary-sidebar="isSidebarOpen"
-      @open-notification-panel="openNotificationPanel"
-      @toggle-account-modal="toggleAccountModal"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @close-key-shortcut-modal="closeKeyShortcutModal"
-      @show-add-label-popup="showAddLabelPopup"
+      @openNotificationPanel="openNotificationPanel"
+      @toggleAccountModal="toggleAccountModal"
+      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @closeKeyShortcutModal="closeKeyShortcutModal"
+      @showAddLabelPopup="showAddLabelPopup"
     />
     <section class="flex flex-1 h-full min-h-0 px-0 overflow-hidden">
       <router-view />
       <CommandBar />
       <AccountSelector
         :show-account-modal="showAccountModal"
-        @close-account-modal="toggleAccountModal"
-        @show-create-account-modal="openCreateAccountModal"
+        @closeAccountModal="toggleAccountModal"
+        @showCreateAccountModal="openCreateAccountModal"
       />
       <AddAccountModal
         :show="showCreateAccountModal"
-        @close-account-create-modal="closeCreateAccountModal"
+        @closeAccountCreateModal="closeCreateAccountModal"
       />
       <WootKeyShortcutModal
         :show.sync="showShortcutModal"

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

@@ -86,8 +86,8 @@ export default {
       :show-avatar="showAvatar"
       :contact="contact"
       close-icon-name="dismiss"
-      @panel-close="onClose"
-      @toggle-panel="onClose"
+      @panelClose="onClose"
+      @togglePanel="onClose"
     />
     <Draggable
       :list="contactSidebarItems"

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

@@ -51,7 +51,7 @@ export default {
       sortConfig: {},
       sortOption: {
         sortAlways: true,
-        sortChange: params => this.$emit('on-sort-change', params),
+        sortChange: params => this.$emit('onSortChange', params),
       },
     };
   },

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

@@ -396,15 +396,15 @@ export default {
         :header-title="pageTitle"
         :segments-id="segmentsId"
         this-selected-contact-id=""
-        @on-input-search="onInputSearch"
-        @on-toggle-create="onToggleCreate"
-        @on-toggle-filter="onToggleFilters"
-        @on-search-submit="onSearchSubmit"
-        @on-toggle-import="onToggleImport"
-        @on-export-submit="onExportSubmit"
-        @on-toggle-save-filter="onToggleSaveFilters"
-        @on-toggle-delete-filter="onToggleDeleteFilters"
-        @on-toggle-edit-filter="onToggleFilters"
+        @onInputSearch="onInputSearch"
+        @onToggleCreate="onToggleCreate"
+        @onToggleFilter="onToggleFilters"
+        @onSearchSubmit="onSearchSubmit"
+        @onToggleImport="onToggleImport"
+        @onExportSubmit="onExportSubmit"
+        @onToggleSaveFilter="onToggleSaveFilters"
+        @onToggleDeleteFilter="onToggleDeleteFilters"
+        @onToggleEditFilter="onToggleFilters"
       />
       <ContactsTable
         :contacts="records"
@@ -412,14 +412,14 @@ export default {
         :is-loading="uiFlags.isFetching"
         :on-click-contact="openContactInfoPanel"
         :active-contact-id="selectedContactId"
-        @on-sort-change="onSortChange"
+        @onSortChange="onSortChange"
       />
       <TableFooter
         class="border-t border-slate-75 dark:border-slate-700/50"
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
         :page-size="15"
-        @page-change="onPageChange"
+        @pageChange="onPageChange"
       />
     </div>
 

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

@@ -52,36 +52,36 @@ export default {
   },
   methods: {
     onToggleSegmentsModal() {
-      this.$emit('on-toggle-save-filter');
+      this.$emit('onToggleSaveFilter');
     },
     onToggleEditSegmentsModal() {
-      this.$emit('on-toggle-edit-filter');
+      this.$emit('onToggleEditFilter');
     },
     onToggleDeleteSegmentsModal() {
-      this.$emit('on-toggle-delete-filter');
+      this.$emit('onToggleDeleteFilter');
     },
     toggleCreate() {
-      this.$emit('on-toggle-create');
+      this.$emit('onToggleCreate');
     },
     toggleFilter() {
-      this.$emit('on-toggle-filter');
+      this.$emit('onToggleFilter');
     },
     toggleImport() {
-      this.$emit('on-toggle-import');
+      this.$emit('onToggleImport');
     },
     async submitExport() {
       const ok =
         await this.$refs.confirmExportContactsDialog.showConfirmation();
 
       if (ok) {
-        this.$emit('on-export-submit');
+        this.$emit('onExportSubmit');
       }
     },
     submitSearch() {
-      this.$emit('on-search-submit');
+      this.$emit('onSearchSubmit');
     },
     inputSearch(event) {
-      this.$emit('on-input-search', event);
+      this.$emit('onInputSearch', event);
     },
   },
 };

app/javascript/dashboard/routes/dashboard/conversation/ConversationView.vue

@@ -229,11 +229,11 @@ export default {
       :conversation-type="conversationType"
       :folders-id="foldersId"
       :is-on-expanded-layout="isOnExpandedLayout"
-      @conversation-load="onConversationLoad"
+      @conversationLoad="onConversationLoad"
     >
       <PopOverSearch
         :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle-conversation-layout="toggleConversationLayout"
+        @toggleConversationLayout="toggleConversationLayout"
       />
     </ChatList>
     <ConversationBox
@@ -241,7 +241,7 @@ export default {
       :inbox-id="inboxId"
       :is-contact-panel-open="isContactPanelOpen"
       :is-on-expanded-layout="isOnExpandedLayout"
-      @contact-panel-toggle="onToggleContactPanel"
+      @contactPanelToggle="onToggleContactPanel"
     />
     <woot-modal
       :show.sync="showCustomSnoozeModal"
@@ -249,7 +249,7 @@ export default {
     >
       <CustomSnoozeModal
         @close="hideCustomSnoozeModal"
-        @choose-time="chooseSnoozeTime"
+        @chooseTime="chooseSnoozeTime"
       />
     </woot-modal>
   </section>

app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue

@@ -105,7 +105,7 @@ export default {
       this.showEditModal = !this.showEditModal;
     },
     onPanelToggle() {
-      this.$emit('toggle-panel');
+      this.$emit('togglePanel');
     },
     toggleConversationModal() {
       this.showConversationModal = !this.showConversationModal;
@@ -137,7 +137,7 @@ export default {
     async deleteContact({ id }) {
       try {
         await this.$store.dispatch('contacts/delete', id);
-        this.$emit('panel-close');
+        this.$emit('panelClose');
         useAlert(this.$t('DELETE_CONTACT.API.SUCCESS_MESSAGE'));
 
         if (isAConversationRoute(this.$route.name)) {

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -474,7 +474,7 @@ export default {
             v-else-if="hasWhatsappTemplates"
             :inbox-id="selectedInbox.inbox.id"
             @on-select-template="toggleWaTemplate"
-            @on-send="onSendWhatsAppReply"
+            @onSend="onSendWhatsAppReply"
           />
           <label v-else :class="{ error: v$.message.$error }">
             {{ $t('NEW_CONVERSATION.FORM.MESSAGE.LABEL') }}
@@ -527,7 +527,7 @@ export default {
               <AttachmentPreview
                 class="[&>.preview-item]:dark:bg-slate-700 flex-row flex-wrap gap-x-3 gap-y-1"
                 :attachments="attachedFiles"
-                :remove-attachment="removeAttachment"
+                @removeAttachment="removeAttachment"
               />
             </div>
           </div>

app/javascript/dashboard/routes/dashboard/conversation/contact/WhatsappTemplates.vue

@@ -31,7 +31,7 @@ export default {
       this.selectedWaTemplate = null;
     },
     onSendMessage(message) {
-      this.$emit('on-send', message);
+      this.$emit('onSend', message);
     },
     onClose() {
       this.$emit('cancel');
@@ -41,7 +41,7 @@ export default {
 </script>
 
 <template>
-  <div class="mx-0 flex flex-wrap">
+  <div class="flex flex-wrap mx-0">
     <TemplatesPicker
       v-if="!selectedWaTemplate"
       :inbox-id="inboxId"

app/javascript/dashboard/routes/dashboard/conversation/search/PopOverSearch.vue

@@ -60,7 +60,7 @@ export default {
       </router-link>
       <SwitchLayout
         :is-on-expanded-layout="isOnExpandedLayout"
-        @toggle="$emit('toggle-conversation-layout')"
+        @toggle="$emit('toggleConversationLayout')"
       />
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue

@@ -32,7 +32,7 @@ export default {
     this.articleContent = this.article.content;
     this.saveArticle = debounce(
       values => {
-        this.$emit('save-article', values);
+        this.$emit('saveArticle', values);
       },
       300,
       false

app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleTable.vue

@@ -83,7 +83,7 @@ export default {
       this.$emit('reorder', reorderedGroup);
     },
     onPageChange(page) {
-      this.$emit('page-change', page);
+      this.$emit('pageChange', page);
     },
   },
 };
@@ -92,38 +92,38 @@ export default {
 <template>
   <div class="flex-1">
     <div
-      class="hidden lg:grid py-0 px-6 h-12 content-center grid-cols-12 z-10 gap-4 border-b border-slate-50 dark:border-slate-700 sticky top-16 bg-white dark:bg-slate-900"
+      class="sticky z-10 content-center hidden h-12 grid-cols-12 gap-4 px-6 py-0 bg-white border-b lg:grid border-slate-50 dark:border-slate-700 top-16 dark:bg-slate-900"
       :class="{ draggable: onCategoryPage }"
     >
       <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-6"
+        class="col-span-6 px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
       >
         {{ $t('HELP_CENTER.TABLE.HEADERS.TITLE') }}
       </div>
       <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
+        class="col-span-2 px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
       >
         {{ $t('HELP_CENTER.TABLE.HEADERS.CATEGORY') }}
       </div>
       <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right hidden lg:block"
+        class="hidden px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right lg:block"
       >
         {{ $t('HELP_CENTER.TABLE.HEADERS.READ_COUNT') }}
       </div>
       <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-left rtl:text-right"
+        class="px-0 py-2 text-sm font-semibold text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
       >
         {{ $t('HELP_CENTER.TABLE.HEADERS.STATUS') }}
       </div>
       <div
-        class="font-semibold capitalize text-sm py-2 px-0 text-slate-700 dark:text-slate-100 text-right rtl:text-left hidden md:block col-span-2"
+        class="hidden col-span-2 px-0 py-2 text-sm font-semibold text-right capitalize text-slate-700 dark:text-slate-100 rtl:text-left md:block"
       >
         {{ $t('HELP_CENTER.TABLE.HEADERS.LAST_EDITED') }}
       </div>
     </div>
     <Draggable
       tag="div"
-      class="border-t-0 px-4 pb-4"
+      class="px-4 pb-4 border-t-0"
       :disabled="!dragEnabled"
       :list="localArticles"
       ghost-class="article-ghost-class"
@@ -150,8 +150,8 @@ export default {
       :current-page="currentPage"
       :total-count="totalCount"
       :page-size="pageSize"
-      class="dark:bg-slate-900 bottom-0 border-t border-slate-75 dark:border-slate-700/50"
-      @page-change="onPageChange"
+      class="bottom-0 border-t dark:bg-slate-900 border-slate-75 dark:border-slate-700/50"
+      @pageChange="onPageChange"
     />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue

@@ -72,7 +72,7 @@ export default {
       this.showLocaleDropdown = false;
     },
     onClickNewArticlePage() {
-      this.$emit('new-article-page');
+      this.$emit('newArticlePage');
     },
     onClickSelectItem(value) {
       const { name, code } = value;
@@ -80,7 +80,7 @@ export default {
       if (!name || name === this.selectedLocale) {
         return;
       }
-      this.$emit('change-locale', code);
+      this.$emit('changeLocale', code);
     },
   },
 };
@@ -88,12 +88,12 @@ export default {
 
 <template>
   <div
-    class="flex p-6 items-center justify-between w-full h-16 sticky top-0 z-50 bg-white dark:bg-slate-900"
+    class="sticky top-0 z-50 flex items-center justify-between w-full h-16 p-6 bg-white dark:bg-slate-900"
   >
     <div class="flex items-center">
       <woot-sidemenu-icon />
-      <div class="flex items-center my-0 mx-2">
-        <h3 class="text-xl text-slate-800 dark:text-slate-100 font-medium mb-0">
+      <div class="flex items-center mx-2 my-0">
+        <h3 class="mb-0 text-xl font-medium text-slate-800 dark:text-slate-100">
           {{ headerTitle }}
         </h3>
         <span class="text-sm text-slate-600 dark:text-slate-300 mx-2 mt-0.5">{{
@@ -122,7 +122,7 @@ export default {
       >
         {{ $t('HELP_CENTER.HEADER.SORT') }}
         <span
-          class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
+          class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
         >
           {{ selectedValue }}
           <FluentIcon class="dropdown-arrow" icon="chevron-down" size="14" />
@@ -183,9 +183,9 @@ export default {
           variant="hollow"
           @click="openLocaleDropdown"
         >
-          <div class="flex justify-between w-full min-w-0 items-center">
+          <div class="flex items-center justify-between w-full min-w-0">
             <span
-              class="inline-flex ml-1 rtl:ml-0 rtl:mr-1 items-center text-slate-800 dark:text-slate-100"
+              class="inline-flex items-center ml-1 rtl:ml-0 rtl:mr-1 text-slate-800 dark:text-slate-100"
             >
               {{ selectedLocale }}
               <FluentIcon

app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/EditArticleHeader.vue

@@ -78,7 +78,7 @@ export default {
           articleId: this.articleSlug,
           status: status,
         });
-        this.$emit('update-meta');
+        this.$emit('updateMeta');
         this.statusUpdateSuccessMessage(status);
         this.closeActionsDropdown();
         if (status === this.ARTICLE_STATUS_TYPES.ARCHIVE) {
@@ -140,7 +140,7 @@ export default {
     <div class="flex items-center gap-1">
       <span
         v-if="isUpdating || isSaved"
-        class="draft-status mr-1 ml-4 rtl:ml-2 rtl:mr-4 text-slate-400 dark:text-slate-300 items-center text-xs"
+        class="items-center ml-4 mr-1 text-xs draft-status rtl:ml-2 rtl:mr-4 text-slate-400 dark:text-slate-300"
       >
         {{ statusText }}
       </span>
@@ -188,7 +188,7 @@ export default {
         color-scheme="secondary"
         @click="closeSidebar"
       />
-      <div class="article--buttons relative">
+      <div class="relative article--buttons">
         <div class="button-group">
           <woot-button
             class-names="publish-button"

app/javascript/dashboard/routes/dashboard/helpcenter/components/HelpCenterLayout.vue

@@ -287,10 +287,10 @@ export default {
   <div class="flex flex-grow-0 w-full h-full min-h-0 app-wrapper">
     <Sidebar
       :route="currentRoute"
-      @toggle-account-modal="toggleAccountModal"
-      @open-notification-panel="openNotificationPanel"
-      @open-key-shortcut-modal="toggleKeyShortcutModal"
-      @close-key-shortcut-modal="closeKeyShortcutModal"
+      @toggleAccountModal="toggleAccountModal"
+      @openNotificationPanel="openNotificationPanel"
+      @openKeyShortcutModal="toggleKeyShortcutModal"
+      @closeKeyShortcutModal="closeKeyShortcutModal"
     />
     <HelpCenterSidebar
       v-if="showHelpCenterSidebar"
@@ -300,18 +300,18 @@ export default {
       :sub-title="localeName(selectedLocaleInPortal)"
       :accessible-menu-items="accessibleMenuItems"
       :additional-secondary-menu-items="additionalSecondaryMenuItems"
-      @open-popover="openPortalPopover"
-      @open-modal="onClickOpenAddCategoryModal"
+      @openPopover="openPortalPopover"
+      @openModal="onClickOpenAddCategoryModal"
     />
     <section
       v-if="isHelpCenterEnabled"
       class="flex flex-1 h-full min-h-0 px-0 overflow-hidden bg-white dark:bg-slate-900"
     >
-      <router-view @reload-locale="fetchPortalAndItsCategories" />
+      <router-view @reloadLocale="fetchPortalAndItsCategories" />
       <CommandBar />
       <AccountSelector
         :show-account-modal="showAccountModal"
-        @close-account-modal="toggleAccountModal"
+        @closeAccountModal="toggleAccountModal"
       />
       <WootKeyShortcutModal
         v-if="showShortcutModal"
@@ -327,8 +327,8 @@ export default {
         :portals="portals"
         :active-portal-slug="selectedPortalSlug"
         :active-locale="selectedLocaleInPortal"
-        @fetch-portal="fetchPortalAndItsCategories"
-        @close-popover="closePortalPopover"
+        @fetchPortal="fetchPortalAndItsCategories"
+        @closePopover="closePortalPopover"
       />
       <AddCategory
         v-if="showAddCategoryModal"

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItem.vue

@@ -64,10 +64,10 @@ export default {
   },
   methods: {
     addLocale() {
-      this.$emit('add-locale', this.portal.id);
+      this.$emit('addLocale', this.portal.id);
     },
     openSite() {
-      this.$emit('open-site', this.portal.slug);
+      this.$emit('openSite', this.portal.slug);
     },
     openSettings() {
       this.fetchPortalAndItsCategories();
@@ -357,7 +357,7 @@ export default {
           <LocaleItemTable
             :locales="locales"
             :selected-locale-code="portal.meta.default_locale"
-            @change-default-locale="changeDefaultLocale"
+            @changeDefaultLocale="changeDefaultLocale"
             @delete="deletePortalLocale"
           />
         </div>

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue

@@ -15,7 +15,7 @@ export default {
 
   methods: {
     changeDefaultLocale(localeCode) {
-      this.$emit('change-default-locale', { localeCode });
+      this.$emit('changeDefaultLocale', { localeCode });
     },
     deleteLocale(localeCode) {
       this.$emit('delete', { localeCode });

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue

@@ -21,7 +21,7 @@ export default {
 
   methods: {
     closePortalPopover() {
-      this.$emit('close-popover');
+      this.$emit('closePopover');
     },
     openPortalPage() {
       this.closePortalPopover();
@@ -30,7 +30,7 @@ export default {
       });
     },
     fetchPortalAndItsCategories() {
-      this.$emit('fetch-portal');
+      this.$emit('fetchPortal');
     },
   },
 };
@@ -65,7 +65,7 @@ export default {
           />
         </div>
       </div>
-      <p class="text-xs text-slate-600 dark:text-slate-300 mt-2">
+      <p class="mt-2 text-xs text-slate-600 dark:text-slate-300">
         {{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
       </p>
     </header>
@@ -77,8 +77,8 @@ export default {
         :active-portal-slug="activePortalSlug"
         :active-locale="activeLocale"
         :active="portal.slug === activePortalSlug"
-        @open-portal-page="closePortalPopover"
-        @fetch-portal="fetchPortalAndItsCategories"
+        @openPortalPage="closePortalPopover"
+        @fetchPortal="fetchPortalAndItsCategories"
       />
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSettingsBasicForm.vue

@@ -97,7 +97,7 @@ const showDeleteButton = computed(() => {
   return hasValidAvatarUrl(state.logoUrl);
 });
 
-const emit = defineEmits(['submit', 'delete-logo']);
+const emit = defineEmits(['submit', 'deleteLogo']);
 
 onMounted(() => {
   const portal = props.portal || {};
@@ -135,7 +135,7 @@ function onSubmitClick() {
 async function deleteAvatar() {
   state.logoUrl = '';
   state.avatarBlobId = '';
-  emit('delete-logo');
+  emit('deleteLogo');
 }
 
 async function uploadLogoToStorage(file) {

app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue

@@ -54,8 +54,8 @@ export default {
           locale: code,
         },
       });
-      this.$emit('fetch-portal');
-      this.$emit('open-portal-page');
+      this.$emit('fetchPortal');
+      this.$emit('openPortalPage');
     },
     isLocaleActive(code, slug) {
       const isPortalActive = this.portal.slug === slug;

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/Sidebar.vue

@@ -53,10 +53,10 @@ export default {
       this.$emit('input', value);
     },
     openPortalPopover() {
-      this.$emit('open-popover');
+      this.$emit('openPopover');
     },
     onClickOpenAddCatogoryModal() {
-      this.$emit('open-modal');
+      this.$emit('openModal');
     },
   },
 };
@@ -64,7 +64,7 @@ export default {
 
 <template>
   <div
-    class="h-full overflow-auto w-60 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50 text-sm"
+    class="flex flex-col h-full overflow-auto text-sm bg-white border-r w-60 dark:bg-slate-900 dark:border-slate-700 rtl:border-r-0 rtl:border-l border-slate-50"
   >
     <SidebarHeader
       :thumbnail-src="thumbnailSrc"
@@ -72,12 +72,12 @@ export default {
       :sub-title="subTitle"
       :portal-link="portalLink"
       class="px-4"
-      @open-popover="openPortalPopover"
+      @openPopover="openPortalPopover"
     />
     <transition-group
       name="menu-list"
       tag="ul"
-      class="py-2 px-4 list-none ml-0 mb-0"
+      class="px-4 py-2 mb-0 ml-0 list-none"
     >
       <SecondaryNavItem
         v-for="menuItem in accessibleMenuItems"

app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue

@@ -27,7 +27,7 @@ export default {
       window.open(this.portalLink, '_blank');
     },
     openPortalPopover() {
-      this.$emit('open-popover');
+      this.$emit('openPopover');
     },
   },
 };
@@ -35,7 +35,7 @@ export default {
 
 <template>
   <div
-    class="flex h-16 items-center justify-between py-4 px-0 mb-1/4 border-b border-slate-50 dark:border-slate-700"
+    class="flex items-center justify-between h-16 px-0 py-4 border-b mb-1/4 border-slate-50 dark:border-slate-700"
   >
     <div class="flex items-center">
       <Thumbnail
@@ -44,13 +44,13 @@ export default {
         :username="headerTitle"
         variant="square"
       />
-      <div class="flex items-start flex-col ml-2 rtl:ml-0 rtl:mr-2">
+      <div class="flex flex-col items-start ml-2 rtl:ml-0 rtl:mr-2">
         <h4
-          class="text-sm w-28 h-4 mb-0 leading-4 overflow-hidden whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
+          class="h-4 mb-0 overflow-hidden text-sm leading-4 w-28 whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
         >
           {{ headerTitle }}
         </h4>
-        <span class="h-4 leading-4 text-slate-600 dark:text-slate-200 text-xs">
+        <span class="h-4 text-xs leading-4 text-slate-600 dark:text-slate-200">
           {{ subTitle }}
         </span>
       </div>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue

@@ -56,7 +56,7 @@ export default {
   mounted() {
     this.saveArticle = debounce(
       () => {
-        this.$emit('save-article', {
+        this.$emit('saveArticle', {
           meta: {
             title: this.metaTitle,
             description: this.metaDescription,
@@ -95,25 +95,25 @@ export default {
       }
     },
     onClickSelectCategory({ id }) {
-      this.$emit('save-article', { category_id: id });
+      this.$emit('saveArticle', { category_id: id });
     },
     onClickAssignAuthor({ id }) {
-      this.$emit('save-article', { author_id: id });
+      this.$emit('saveArticle', { author_id: id });
       this.updateMeta();
     },
     onChangeMetaInput() {
       this.saveArticle();
     },
     onClickArchiveArticle() {
-      this.$emit('archive-article');
+      this.$emit('archiveArticle');
       this.updateMeta();
     },
     onClickDeleteArticle() {
-      this.$emit('delete-article');
+      this.$emit('deleteArticle');
       this.updateMeta();
     },
     updateMeta() {
-      this.$emit('update-meta');
+      this.$emit('updateMeta');
     },
   },
 };

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/EditArticle.vue

@@ -183,7 +183,7 @@ export default {
         @open="openArticleSettings"
         @close="closeArticleSettings"
         @show="showArticleInPortal"
-        @update-meta="updateMeta"
+        @updateMeta="updateMeta"
       />
       <div v-if="isFetching" class="h-full p-4 text-base text-center">
         <Spinner size="" />
@@ -193,16 +193,16 @@ export default {
         v-else
         :is-settings-sidebar-open="showArticleSettings"
         :article="article"
-        @save-article="saveArticle"
+        @saveArticle="saveArticle"
       />
     </div>
     <ArticleSettings
       v-if="showArticleSettings"
       :article="article"
-      @save-article="saveArticle"
-      @delete-article="openDeletePopup"
-      @archive-article="archiveArticle"
-      @update-meta="updateMeta"
+      @saveArticle="saveArticle"
+      @deleteArticle="openDeletePopup"
+      @archiveArticle="archiveArticle"
+      @updateMeta="updateMeta"
     />
     <woot-delete-modal
       :show.sync="showDeleteConfirmationPopup"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue

@@ -149,7 +149,7 @@ export default {
           locale,
         },
       });
-      this.$emit('reload-locale');
+      this.$emit('reloadLocale');
     },
   },
 };
@@ -157,7 +157,7 @@ export default {
 
 <template>
   <div
-    class="py-0 px-0 w-full max-w-full overflow-auto bg-white dark:bg-slate-900 flex flex-col"
+    class="flex flex-col w-full max-w-full px-0 py-0 overflow-auto bg-white dark:bg-slate-900"
   >
     <ArticleHeader
       :header-title="headerTitle"
@@ -166,12 +166,12 @@ export default {
       :all-locales="allowedLocales"
       selected-value="Published"
       class="border-b border-slate-50 dark:border-slate-700"
-      @new-article-page="newArticlePage"
-      @change-locale="onChangeLocale"
+      @newArticlePage="newArticlePage"
+      @changeLocale="onChangeLocale"
     />
     <div
       v-if="isFetching"
-      class="items-center flex text-base justify-center py-6 px-4 text-slate-600 dark:text-slate-200"
+      class="flex items-center justify-center px-4 py-6 text-base text-slate-600 dark:text-slate-200"
     >
       <Spinner />
       <span class="text-slate-600 dark:text-slate-200">
@@ -187,7 +187,7 @@ export default {
         :articles="articles"
         :current-page="Number(meta.currentPage)"
         :total-count="Number(meta.count)"
-        @page-change="onPageChange"
+        @pageChange="onPageChange"
         @reorder="onReorder"
       />
     </div>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/NewArticle.vue

@@ -108,12 +108,12 @@ export default {
         @close="closeArticleSettings"
         @save-article="createNewArticle"
       />
-      <ArticleEditor :article="newArticle" @save-article="createNewArticle" />
+      <ArticleEditor :article="newArticle" @saveArticle="createNewArticle" />
     </div>
     <ArticleSettings
       v-if="showArticleSettings"
       :article="article"
-      @save-article="saveArticle"
+      @saveArticle="saveArticle"
     />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/AddCategory.vue

@@ -140,8 +140,8 @@ export default {
           :help-text="$t('HELP_CENTER.CATEGORY.ADD.NAME.HELP_TEXT')"
           :has-error="v$.name.$error"
           :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
-          @name-change="onNameChange"
-          @icon-change="onClickInsertEmoji"
+          @nameChange="onNameChange"
+          @iconChange="onClickInsertEmoji"
         />
         <woot-input
           v-model.trim="slug"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/EditCategory.vue

@@ -151,8 +151,8 @@ export default {
           :error-message="$t('HELP_CENTER.CATEGORY.ADD.NAME.ERROR')"
           :existing-name="category.name"
           :saved-icon="category.icon"
-          @name-change="changeName"
-          @icon-change="onClickInsertEmoji"
+          @nameChange="changeName"
+          @iconChange="onClickInsertEmoji"
         />
         <woot-input
           v-model.trim="slug"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue

@@ -61,11 +61,11 @@ export default {
     },
     onClickInsertEmoji(emoji = '') {
       this.icon = emoji;
-      this.$emit('icon-change', emoji);
+      this.$emit('iconChange', emoji);
       this.showEmojiPicker = false;
     },
     onNameChange() {
-      this.$emit('name-change', this.name);
+      this.$emit('nameChange', this.name);
     },
     hideEmojiPicker() {
       if (this.showEmojiPicker) {
@@ -77,7 +77,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex items-center relative">
+  <div class="relative flex items-center">
     <woot-button
       variant="hollow"
       class="absolute [&>span]:flex [&>span]:items-center [&>span]:justify-center z-10 top-[28px] h-[2.5rem] w-[2.45rem] !text-slate-400 dark:!text-slate-600 dark:!bg-slate-900 !p-0"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalBasic.vue

@@ -79,6 +79,6 @@ async function deleteLogo() {
       $t('HELP_CENTER.PORTAL.EDIT.EDIT_BASIC_INFO.BUTTON_TEXT')
     "
     @submit="updatePortalSettings"
-    @delete-logo="deleteLogo"
+    @deleteLogo="deleteLogo"
   />
 </template>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/EditPortalLocales.vue

@@ -126,7 +126,7 @@ function addLocale() {
       v-if="currentPortal"
       :locales="locales"
       :selected-locale-code="currentPortal.meta.default_locale"
-      @change-default-locale="changeDefaultLocale"
+      @changeDefaultLocale="changeDefaultLocale"
       @delete="deletePortalLocale"
     />
     <woot-modal

app/javascript/dashboard/routes/dashboard/helpcenter/pages/portals/ListAllPortals.vue

@@ -77,8 +77,8 @@ export default {
         :key="portal.id"
         :portal="portal"
         :status="portalStatus"
-        @add-locale="addLocale"
-        @open-site="openPortal"
+        @addLocale="addLocale"
+        @openSite="openPortal"
       />
       <div
         v-if="isFetching"

app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue

@@ -187,11 +187,11 @@ export default {
           :key="notificationItem.id"
           :active="currentNotificationId === notificationItem.id"
           :notification-item="notificationItem"
-          @mark-notification-as-read="markNotificationAsRead"
-          @mark-notification-as-unread="markNotificationAsUnRead"
-          @delete-notification="deleteNotification"
-          @context-menu-open="isInboxContextMenuOpen = true"
-          @context-menu-close="isInboxContextMenuOpen = false"
+          @markNotificationAsRead="markNotificationAsRead"
+          @markNotificationAsUnRead="markNotificationAsUnRead"
+          @deleteNotification="deleteNotification"
+          @contextMenuOpen="isInboxContextMenuOpen = true"
+          @contextMenuClose="isInboxContextMenuOpen = false"
         />
         <div v-if="uiFlags.isFetching" class="text-center">
           <span class="mt-4 mb-4 spinner" />

app/javascript/dashboard/routes/dashboard/inbox/InboxView.vue

@@ -202,7 +202,7 @@ export default {
         :inbox-id="inboxId"
         :is-contact-panel-open="isContactPanelOpen"
         :is-on-expanded-layout="false"
-        @contact-panel-toggle="onToggleContactPanel"
+        @contactPanelToggle="onToggleContactPanel"
       />
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/inbox/components/InboxCard.vue

@@ -126,7 +126,7 @@ export default {
     closeContextMenu() {
       this.isContextMenuOpen = false;
       this.contextMenuPosition = { x: null, y: null };
-      this.$emit('context-menu-close');
+      this.$emit('contextMenuClose');
     },
     openContextMenu(e) {
       this.closeContextMenu();
@@ -136,18 +136,18 @@ export default {
         y: e.pageY || e.clientY,
       };
       this.isContextMenuOpen = true;
-      this.$emit('context-menu-open');
+      this.$emit('contextMenuOpen');
     },
     handleAction(key) {
       switch (key) {
         case 'mark_as_read':
-          this.$emit('mark-notification-as-read', this.notificationItem);
+          this.$emit('markNotificationAsRead', this.notificationItem);
           break;
         case 'mark_as_unread':
-          this.$emit('mark-notification-as-unread', this.notificationItem);
+          this.$emit('markNotificationAsUnRead', this.notificationItem);
           break;
         case 'delete':
-          this.$emit('delete-notification', this.notificationItem);
+          this.$emit('deleteNotification', this.notificationItem);
           break;
         default:
       }

app/javascript/dashboard/routes/dashboard/inbox/components/InboxItemHeader.vue

@@ -151,7 +151,7 @@ export default {
     >
       <CustomSnoozeModal
         @close="hideCustomSnoozeModal"
-        @choose-time="scheduleCustomSnooze"
+        @chooseTime="scheduleCustomSnooze"
       />
     </woot-modal>
   </div>

app/javascript/dashboard/routes/dashboard/inbox/components/InboxListHeader.vue

@@ -126,7 +126,7 @@ export default {
         v-if="showInboxOptionMenu"
         v-on-clickaway="openInboxOptionsMenu"
         class="absolute top-9 ltr:right-0 ltr:md:right-[unset] rtl:left-0 rtl:md:left-[unset]"
-        @option-click="onInboxOptionMenuClick"
+        @optionClick="onInboxOptionMenuClick"
       />
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/inbox/components/InboxOptionMenu.vue

@@ -24,7 +24,7 @@ export default {
   },
   methods: {
     onClick(key) {
-      this.$emit('option-click', key);
+      this.$emit('optionClick', key);
     },
   },
 };
@@ -32,7 +32,7 @@ export default {
 
 <template>
   <div
-    class="flex flex-col gap-1 bg-white z-50 dark:bg-slate-900 w-40 py-1 border shadow-md border-slate-100 dark:border-slate-700/50 rounded-xl divide-y divide-slate-100 dark:divide-slate-700/50"
+    class="z-50 flex flex-col w-40 gap-1 py-1 bg-white border divide-y shadow-md dark:bg-slate-900 border-slate-100 dark:border-slate-700/50 rounded-xl divide-slate-100 dark:divide-slate-700/50"
   >
     <div class="flex flex-col">
       <MenuItem

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelItem.vue

@@ -30,7 +30,7 @@ export default {
   methods: {
     dynamicTime,
     onClickOpenNotification() {
-      this.$emit('open-notification', this.notificationItem);
+      this.$emit('openNotification', this.notificationItem);
     },
   },
 };

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationPanelList.vue

@@ -57,7 +57,7 @@ export default {
       v-show="!isLoading"
       :key="notificationItem.id"
       :notification-item="notificationItem"
-      @open-notification="onClickNotification"
+      @openNotification="onClickNotification"
     />
     <EmptyState
       v-if="showEmptyResult"
@@ -75,7 +75,7 @@ export default {
     </woot-button>
     <div
       v-if="isLoading"
-      class="items-center justify-center my-12 mx-2 text-sm font-medium flex"
+      class="flex items-center justify-center mx-2 my-12 text-sm font-medium"
     >
       <Spinner />
       <span>{{

app/javascript/dashboard/routes/dashboard/notifications/components/NotificationsView.vue

@@ -57,7 +57,7 @@ export default {
 </script>
 
 <template>
-  <div class="overflow-y-auto h-full">
+  <div class="h-full overflow-y-auto">
     <div class="flex flex-col h-full">
       <NotificationTable
         :notifications="records"
@@ -71,7 +71,7 @@ export default {
         :current-page="Number(meta.currentPage)"
         :total-count="meta.count"
         :page-size="15"
-        @page-change="onPageChange"
+        @pageChange="onPageChange"
       />
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/settings/attributes/CustomAttribute.vue

@@ -194,7 +194,7 @@ export default {
       <EditAttribute
         :selected-attribute="selectedAttribute"
         :is-updating="uiFlags.isUpdating"
-        @on-close="hideEditPopup"
+        @onClose="hideEditPopup"
       />
     </woot-modal>
     <woot-confirm-delete-modal
@@ -206,8 +206,8 @@ export default {
       :reject-text="deleteRejectText"
       :confirm-value="selectedAttribute.attribute_display_name"
       :confirm-place-holder-text="confirmPlaceHolderText"
-      @on-confirm="confirmDeletion"
-      @on-close="closeDelete"
+      @onConfirm="confirmDeletion"
+      @onClose="closeDelete"
     />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue

@@ -109,7 +109,7 @@ export default {
   },
   methods: {
     onClose() {
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
     addTagValue(tagValue) {
       const tag = {

app/javascript/dashboard/routes/dashboard/settings/auditlogs/Index.vue

@@ -130,7 +130,7 @@ export default {
       :total-count="meta.totalEntries"
       :page-size="meta.perPage"
       class="!bg-slate-25 dark:!bg-slate-900 border-t border-slate-75 dark:border-slate-700/50"
-      @page-change="onPageChange"
+      @pageChange="onPageChange"
     />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue

@@ -115,7 +115,7 @@ export default {
   },
   methods: {
     onClose() {
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
     onChange(value) {
       this.scheduledAt = value;

app/javascript/dashboard/routes/dashboard/settings/campaigns/Campaign.vue

@@ -81,7 +81,7 @@ export default {
     <woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
       <EditCampaign
         :selected-campaign="selectedCampaign"
-        @on-close="hideEditPopup"
+        @onClose="hideEditPopup"
       />
     </woot-modal>
     <woot-delete-modal

app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue

@@ -101,7 +101,7 @@ export default {
   },
   methods: {
     onClose() {
-      this.$emit('on-close');
+      this.$emit('onClose');
     },
 
     async loadInboxMembers() {

app/javascript/dashboard/routes/dashboard/settings/campaigns/Index.vue

@@ -35,7 +35,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex-1 overflow-auto p-4">
+  <div class="flex-1 p-4 overflow-auto">
     <woot-button
       color-scheme="success"
       class-names="button--fixed-top"
@@ -46,7 +46,7 @@ export default {
     </woot-button>
     <Campaign />
     <woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
-      <AddCampaign @on-close="hideAddPopup" />
+      <AddCampaign @onClose="hideAddPopup" />
     </woot-modal>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue

@@ -75,14 +75,14 @@ export default {
       "
     />
     <div
-      class="mt-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 mx-0 max-w-3xl"
+      class="grid max-w-3xl grid-cols-2 mx-0 mt-6 sm:grid-cols-3 lg:grid-cols-4"
     >
       <ChannelItem
         v-for="channel in channelList"
         :key="channel.key"
         :channel="channel"
         :enabled-features="enabledFeatures"
-        @channel-item-click="initChannelAuth"
+        @channelItemClick="initChannelAuth"
       />
     </div>
   </div>