fix: apply ESLint rule vue/component-name-in-template-casing

app/javascript/shared/components/ChatCard.vue

@@ -43,11 +43,7 @@ export default {
       <p class="body" :class="$dm('text-black-700', 'dark:text-slate-100')">
         {{ description }}
       </p>
-      <card-button
-        v-for="action in actions"
-        :key="action.id"
-        :action="action"
-      />
+      <CardButton v-for="action in actions" :key="action.id" :action="action" />
     </div>
   </div>
 </template>

app/javascript/shared/components/ChatOptions.vue

@@ -50,7 +50,7 @@ export default {
         class="options"
         :class="{ 'has-selected': !!selected }"
       >
-        <chat-option
+        <ChatOption
           v-for="option in options"
           :key="option.id"
           :action="option"

app/javascript/shared/components/CustomerSatisfaction.vue

@@ -142,8 +142,8 @@ export default {
           color: textColor,
         }"
       >
-        <spinner v-if="isUpdating && feedback" />
-        <fluent-icon v-else icon="chevron-right" />
+        <Spinner v-if="isUpdating && feedback" />
+        <FluentIcon v-else icon="chevron-right" />
       </button>
     </form>
   </div>

app/javascript/shared/components/FluentIcon/DashboardIcon.vue

@@ -35,7 +35,7 @@ export default {
 };
 </script>
 <template>
-  <base-icon
+  <BaseIcon
     :size="size"
     :icon="icon"
     :type="type"

app/javascript/shared/components/FluentIcon/Index.vue

@@ -35,7 +35,7 @@ export default {
 };
 </script>
 <template>
-  <base-icon
+  <BaseIcon
     :size="size"
     :icon="icon"
     :type="type"

app/javascript/shared/components/GreetingsEditor.vue

@@ -49,7 +49,7 @@ export default {
       v-if="richtext"
       class="py-0 px-4 rounded-md border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 mt-0 mx-0 mb-4"
     >
-      <woot-message-editor
+      <WootMessageEditor
         v-model="greetingsMessage"
         :is-format-mode="true"
         :enable-variables="true"
@@ -59,7 +59,7 @@ export default {
         @input="handleInput"
       />
     </div>
-    <resizable-text-area
+    <ResizableTextArea
       v-else
       v-model="greetingsMessage"
       :rows="4"

app/javascript/shared/components/IframeLoader.vue

@@ -41,7 +41,7 @@ export default {
       @load="handleIframeLoad"
       @error="handleIframeError"
     />
-    <article-skeleton-loader
+    <ArticleSkeletonLoader
       v-if="isLoading"
       class="absolute w-full h-full top-0 left-0"
     />

app/javascript/shared/components/emoji/EmojiInput.vue

@@ -141,7 +141,7 @@ export default {
         </div>
         <div v-if="hasEmptySearchResult" class="empty-message">
           <div class="emoji-icon">
-            <fluent-icon icon="emoji" size="48" />
+            <FluentIcon icon="emoji" size="48" />
           </div>
           <span class="empty-message--text">
             {{ $t('EMOJI.NOT_FOUND') }}
@@ -157,7 +157,7 @@ export default {
               :class="{ active: selectedKey === 'Search' }"
               @click="changeCategory('Search')"
             >
-              <fluent-icon
+              <FluentIcon
                 icon="search"
                 size="16"
                 class="text-slate-700 dark:text-slate-100"

app/javascript/shared/components/ui/MultiselectDropdown.vue

@@ -126,7 +126,7 @@ export default {
           @click="onCloseDropdown"
         />
       </div>
-      <multiselect-dropdown-items
+      <MultiselectDropdownItems
         v-if="showSearchDropdown"
         :options="options"
         :selected-items="[selectedItem]"

app/javascript/shared/components/ui/MultiselectDropdownItems.vue

@@ -82,11 +82,8 @@ export default {
     </div>
     <div class="flex justify-start items-start flex-auto overflow-auto">
       <div class="w-full max-h-[10rem]">
-        <woot-dropdown-menu>
-          <woot-dropdown-item
-            v-for="option in filteredOptions"
-            :key="option.id"
-          >
+        <WootDropdownMenu>
+          <WootDropdownItem v-for="option in filteredOptions" :key="option.id">
             <woot-button
               class="multiselect-dropdown--item"
               :variant="isActive(option) ? 'hollow' : 'clear'"
@@ -118,8 +115,8 @@ export default {
                 </div>
               </div>
             </woot-button>
-          </woot-dropdown-item>
-        </woot-dropdown-menu>
+          </WootDropdownItem>
+        </WootDropdownMenu>
         <h4
           v-if="noResult"
           class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"

app/javascript/shared/components/ui/dropdown/DropdownSubMenu.vue

@@ -19,7 +19,7 @@ export default {
 <template>
   <li class="sub-menu-container">
     <ul class="sub-menu-li-container">
-      <woot-dropdown-header v-if="title" :title="title" />
+      <WootDropdownHeader v-if="title" :title="title" />
       <slot />
     </ul>
   </li>

app/javascript/shared/components/ui/label/LabelDropdown.vue

@@ -115,11 +115,11 @@ export default {
       >
         {{ $t('CONTACT_PANEL.LABELS.LABEL_SELECT.TITLE') }}
       </h4>
-      <hotkey
+      <Hotkey
         custom-class="text-slate-800 dark:text-slate-100 bg-slate-50 dark:bg-slate-600 text-xxs border border-solid border-slate-75 dark:border-slate-600"
       >
         L
-      </hotkey>
+      </Hotkey>
     </div>
     <div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
       <input
@@ -136,7 +136,7 @@ export default {
     >
       <div class="w-full">
         <woot-dropdown-menu>
-          <label-dropdown-item
+          <LabelDropdownItem
             v-for="label in filteredActiveLabels"
             :key="label.title"
             :title="label.title"
@@ -173,7 +173,7 @@ export default {
             :show.sync="createModalVisible"
             :on-close="hideCreateModal"
           >
-            <add-label-modal
+            <AddLabelModal
               :prefill-title="parsedSearch"
               @close="hideCreateModal"
             />