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/widget/components/ArticleCategoryCard.vue

@@ -15,6 +15,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ['view', 'viewAll'],
   computed: {
     ...mapGetters({ widgetColor: 'appConfig/getWidgetColor' }),
   },

app/javascript/widget/components/ArticleHero.vue

@@ -8,6 +8,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ['view', 'viewAll'],
   methods: {
     onArticleClick(link) {
       this.$emit('view', link);
@@ -20,7 +21,7 @@ export default {
   <CategoryCard
     :title="$t('PORTAL.POPULAR_ARTICLES')"
     :articles="articles.slice(0, 6)"
-    @viewAll="$emit('viewAll')"
+    @view-all="$emit('viewAll')"
     @view="onArticleClick"
   />
 </template>

app/javascript/widget/components/ArticleList.vue

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

app/javascript/widget/components/ArticleListItem.vue

@@ -13,6 +13,7 @@ export default {
       default: '',
     },
   },
+  emits: ['selectArticle'],
   data() {
     return {};
   },

app/javascript/widget/components/ArticleSearch.vue

@@ -7,6 +7,7 @@ export default {
       default: '',
     },
   },
+  emits: ['search'],
   data() {
     return {
       searchQuery: '',

app/javascript/widget/components/Banner.vue

@@ -23,6 +23,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div v-if="showBannerMessage" :class="`banner ${bannerType}`">
     <span>

app/javascript/widget/components/ChatAttachment.vue

@@ -35,7 +35,7 @@ export default {
   mounted() {
     document.addEventListener('paste', this.handleClipboardPaste);
   },
-  destroyed() {
+  unmounted() {
     document.removeEventListener('paste', this.handleClipboardPaste);
   },
   methods: {

app/javascript/widget/components/ChatInputWrap.vue

@@ -76,7 +76,7 @@ export default {
       }
     },
   },
-  destroyed() {
+  unmounted() {
     document.removeEventListener('keypress', this.handleEnterKeyPress);
   },
   mounted() {
@@ -149,8 +149,8 @@ export default {
       :placeholder="$t('CHAT_PLACEHOLDER')"
       class="form-input user-message-input is-focused"
       :class="inputColor"
-      @typingOff="onTypingOff"
-      @typingOn="onTypingOn"
+      @typing-off="onTypingOff"
+      @typing-on="onTypingOn"
       @focus="onFocus"
       @blur="onBlur"
     />

app/javascript/widget/components/ContinueChatButton.vue

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

app/javascript/widget/components/DragWrapper.vue

@@ -12,6 +12,7 @@ export default {
       default: false,
     },
   },
+  emits: ['dragged'],
   data() {
     return {
       startX: null,

app/javascript/widget/components/FooterReplyTo.vue

@@ -10,6 +10,7 @@ export default {
       default: () => {},
     },
   },
+  emits: ['dismiss'],
   computed: {
     replyToAttachment() {
       if (!this.inReplyTo?.attachments?.length) {

app/javascript/widget/components/Form/PhoneInput.vue

@@ -26,8 +26,8 @@ const activeCountryCode = ref(getActiveCountryCode());
 const activeDialCode = ref(getActiveDialCode());
 const phoneNumber = ref('');
 
-const dropdownRef = useTemplateRef('dropdown');
-const searchbarRef = useTemplateRef('searchbar');
+const dropdownRef = useTemplateRef('dropdownRef');
+const searchbarRef = useTemplateRef('searchbarRef');
 
 const placeholder = computed(() => context?.attrs?.placeholder || '');
 const hasErrorInPhoneInput = computed(() => context.hasErrorInPhoneInput);
@@ -261,7 +261,7 @@ function onSelect() {
     </div>
     <div
       v-if="showDropdown"
-      ref="dropdown"
+      ref="dropdownRef"
       v-on-clickaway="closeDropdown"
       :class="dropdownBackgroundClass"
       class="absolute z-10 h-48 px-0 pt-0 pb-1 pl-1 pr-1 overflow-y-auto rounded shadow-lg country-dropdown top-12"
@@ -271,8 +271,8 @@ function onSelect() {
     >
       <div class="sticky top-0" :class="dropdownBackgroundClass">
         <input
+          ref="searchbarRef"
           v-model="searchCountry"
-          ref="searchbar"
           type="text"
           :placeholder="$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_SEARCH')"
           class="w-full h-8 px-3 py-2 mt-1 mb-1 text-sm border border-solid rounded outline-none dropdown-search"

app/javascript/widget/components/HeaderActions.vue

@@ -81,6 +81,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div v-if="showHeaderActions" class="actions flex items-center">
     <button

app/javascript/widget/components/ImageBubble.vue

@@ -5,6 +5,7 @@ export default {
     thumb: { type: String, default: '' },
     readableTime: { type: String, default: '' },
   },
+  emits: ['error'],
   methods: {
     onImgError() {
       this.$emit('error');

app/javascript/widget/components/PreChat/Form.vue

@@ -25,6 +25,7 @@ export default {
       default: () => {},
     },
   },
+  emits: ['submit'],
   setup() {
     const phoneInput = createInput(PhoneInput, {
       props: ['hasErrorInPhoneInput'],

app/javascript/widget/components/SearchArticle.vue

@@ -7,6 +7,7 @@ export default {
       default: '',
     },
   },
+  emits: ['search'],
   data() {
     return {
       searchQuery: '',

app/javascript/widget/components/TeamAvailability.vue

@@ -26,6 +26,7 @@ export default {
       default: false,
     },
   },
+  emits: ['startConversation'],
 
   computed: {
     ...mapGetters({

app/javascript/widget/components/UnreadMessageList.vue

@@ -20,6 +20,7 @@ export default {
       required: true,
     },
   },
+  emits: ['close'],
   computed: {
     ...mapGetters({
       unreadMessageCount: 'conversation/getUnreadMessageCount',

app/javascript/widget/components/template/Article.vue

@@ -21,6 +21,7 @@ export default {
 };
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <div
     v-if="!!items.length"
@@ -35,10 +36,9 @@ export default {
             class="mr-1"
             :class="getThemeClass('text-black-900', 'dark:text-slate-50')"
           />
-          <span
-            :class="getThemeClass('text-slate-900', 'dark:text-slate-50')"
-            >{{ item.title }}</span
-          >
+          <span :class="getThemeClass('text-slate-900', 'dark:text-slate-50')">
+            {{ item.title }}
+          </span>
         </span>
         <span
           class="description"