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

app/javascript/widget/components/ArticleCategoryCard.vue

@@ -28,14 +28,14 @@ export default {
 
 <template>
   <div>
-    <h3 class="text-sm font-medium text-slate-800 dark:text-slate-50 mb-0">
+    <h3 class="mb-0 text-sm font-medium text-slate-800 dark:text-slate-50">
       {{ title }}
     </h3>
     <ArticleList :articles="articles" @click="onArticleClick" />
     <button
-      class="inline-flex text-sm font-medium rounded-md px-2 py-1 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
+      class="inline-flex items-center justify-between px-2 py-1 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800 see-articles"
       :style="{ color: widgetColor }"
-      @click="$emit('view-all')"
+      @click="$emit('viewAll')"
     >
       <span class="pr-2 text-sm">{{ $t('PORTAL.VIEW_ALL_ARTICLES') }}</span>
       <FluentIcon icon="arrow-right" size="14" />

app/javascript/widget/components/ArticleHero.vue

@@ -24,7 +24,7 @@ export default {
   <CategoryCard
     :title="$t('PORTAL.POPULAR_ARTICLES')"
     :articles="articles.slice(0, 6)"
-    @view-all="$emit('view-all')"
+    @viewAll="$emit('viewAll')"
     @view="onArticleClick"
   />
 </template>

app/javascript/widget/components/ChatInputWrap.vue

@@ -140,8 +140,8 @@ export default {
       :placeholder="$t('CHAT_PLACEHOLDER')"
       class="form-input user-message-input is-focused"
       :class="inputColor"
-      @typing-off="onTypingOff"
-      @typing-on="onTypingOn"
+      @typingOff="onTypingOff"
+      @typingOn="onTypingOn"
       @focus="onFocus"
       @blur="onBlur"
     />

app/javascript/widget/components/TeamAvailability.vue

@@ -50,7 +50,7 @@ export default {
   },
   methods: {
     startConversation() {
-      this.$emit('start-conversation');
+      this.$emit('startConversation');
       if (!this.hasConversation) {
         IFrameHelper.sendMessage({
           event: 'onEvent',
@@ -64,9 +64,9 @@ export default {
 </script>
 
 <template>
-  <div class="p-4 shadow-sm rounded-md bg-white dark:bg-slate-700">
+  <div class="p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
     <div class="flex items-center justify-between">
-      <div class="  ">
+      <div class="">
         <div class="text-sm font-medium text-slate-700 dark:text-slate-50">
           {{
             isOnline
@@ -74,14 +74,14 @@ export default {
               : $t('TEAM_AVAILABILITY.OFFLINE')
           }}
         </div>
-        <div class="text-sm mt-1 text-slate-500 dark:text-slate-100">
+        <div class="mt-1 text-sm text-slate-500 dark:text-slate-100">
           {{ replyWaitMessage }}
         </div>
       </div>
       <AvailableAgents v-if="isOnline" :agents="availableAgents" />
     </div>
     <button
-      class="inline-flex text-sm font-medium rounded-md py-1 mt-2 px-2 -ml-2 leading-6 text-slate-800 dark:text-slate-50 justify-between items-center hover:bg-slate-25 dark:hover:bg-slate-800"
+      class="inline-flex items-center justify-between px-2 py-1 mt-2 -ml-2 text-sm font-medium leading-6 rounded-md text-slate-800 dark:text-slate-50 hover:bg-slate-25 dark:hover:bg-slate-800"
       :style="{ color: widgetColor }"
       @click="startConversation"
     >

app/javascript/widget/views/Home.vue

@@ -102,19 +102,19 @@ export default {
 
 <template>
   <div
-    class="z-50 rounded-md w-full flex flex-1 flex-col"
+    class="z-50 flex flex-col flex-1 w-full rounded-md"
     :class="{ 'pb-2': showArticles, 'justify-end': !showArticles }"
   >
-    <div class="px-4 pt-4 w-full">
+    <div class="w-full px-4 pt-4">
       <TeamAvailability
         :available-agents="availableAgents"
         :has-conversation="!!conversationSize"
         :unread-count="unreadMessageCount"
-        @start-conversation="startConversation"
+        @startConversation="startConversation"
       />
     </div>
-    <div v-if="showArticles" class="px-4 py-2 w-full">
-      <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
+    <div v-if="showArticles" class="w-full px-4 py-2">
+      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
         <ArticleHero
           v-if="
             !articleUiFlags.isFetching &&
@@ -123,12 +123,12 @@ export default {
           "
           :articles="popularArticles"
           @view="openArticleInArticleViewer"
-          @view-all="viewAllArticles"
+          @viewAll="viewAllArticles"
         />
       </div>
     </div>
-    <div v-if="articleUiFlags.isFetching" class="px-4 py-2 w-full">
-      <div class="p-4 rounded-md bg-white dark:bg-slate-700 shadow-sm w-full">
+    <div v-if="articleUiFlags.isFetching" class="w-full px-4 py-2">
+      <div class="w-full p-4 bg-white rounded-md shadow-sm dark:bg-slate-700">
         <ArticleCardSkeletonLoader />
       </div>
     </div>