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

These fixes are all auto generated and can be merged directly

Fixes the following issues

1. Event used on components should be hypenated
2. Attribute orders in components
3. Use `unmounted` instead of `destroyed`
4. Add explicit `emits` declarations for components, autofixed [using
this
script](https://gist.github.com/scmmishra/6f549109b96400006bb69bbde392eddf)


We ignore the top level v-if for now, we will fix it later

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

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 
 export default {
+  emits: ['toggleAccounts'],
   data() {
     return { showSwitchButton: false };
   },
@@ -25,6 +26,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div
     v-if="showShowCurrentAccountContext"

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

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

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

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

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

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

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

@@ -2,6 +2,8 @@
 import { mapGetters } from 'vuex';
 
 export default {
+  emits: ['openNotificationPanel'],
+
   computed: {
     ...mapGetters({
       notificationMetadata: 'notifications/getMeta',

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

@@ -17,6 +17,12 @@ export default {
       default: false,
     },
   },
+  emits: [
+    'close',
+    'openKeyShortcutModal',
+    'toggleAccounts',
+    'showSupportChatWindow',
+  ],
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',

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

@@ -43,6 +43,7 @@ export default {
       default: '',
     },
   },
+  emits: ['toggleAccounts', 'openNotificationPanel', 'openKeyShortcutModal'],
   data() {
     return {
       helpDocsURL: wootConstants.DOCS_URL,
@@ -96,13 +97,13 @@ export default {
         open-in-new-page
         :to="helpDocsURL"
       />
-      <NotificationBell @openNotificationPanel="openNotificationPanel" />
-      <AgentDetails @toggleMenu="toggleOptions" />
+      <NotificationBell @open-notification-panel="openNotificationPanel" />
+      <AgentDetails @toggle-menu="toggleOptions" />
       <OptionsMenu
         :show="showOptionsMenu"
-        @toggleAccounts="toggleAccountModal"
-        @showSupportChatWindow="toggleSupportChatWindow"
-        @openKeyShortcutModal="$emit('openKeyShortcutModal')"
+        @toggle-accounts="toggleAccountModal"
+        @show-support-chat-window="toggleSupportChatWindow"
+        @open-key-shortcut-modal="$emit('openKeyShortcutModal')"
         @close="toggleOptions"
       />
     </div>

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

@@ -49,6 +49,7 @@ export default {
       default: false,
     },
   },
+  emits: ['addLabel', 'toggleAccounts'],
   computed: {
     ...mapGetters({
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
@@ -242,7 +243,7 @@ export default {
   <div
     class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
   >
-    <AccountContext @toggleAccounts="toggleAccountModal" />
+    <AccountContext @toggle-accounts="toggleAccountModal" />
     <transition-group
       name="menu-list"
       tag="ul"
@@ -257,7 +258,7 @@ export default {
         v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
         :key="menuItem.key"
         :menu-item="menuItem"
-        @addLabel="showAddLabelPopup"
+        @add-label="showAddLabelPopup"
       />
     </transition-group>
   </div>

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

@@ -106,10 +106,11 @@ export default {
           <span
             v-if="showChildCount"
             class="bg-slate-50 dark:bg-slate-700 rounded-full min-w-[18px] justify-center items-center flex text-xxs mx-1 py-0 px-1"
-            :class="isCountZero
+            :class="
+              isCountZero
                 ? `text-slate-300 dark:text-slate-500`
                 : `text-slate-700 dark:text-slate-50`
-              "
+            "
           >
             {{ childItemCount }}
           </span>

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

@@ -22,6 +22,7 @@ export default {
       default: () => ({}),
     },
   },
+  emits: ['addLabel', 'open'],
   setup() {
     const { isAdmin } = useAdmin();
     const { isEnterprise } = useConfig();