From fd6375fc6c3255612264fbe03e73df8dc207f168 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Fri, 26 Jul 2024 12:02:22 +0530
Subject: [PATCH] fix: apply ESLint rule vue/prefer-separate-static-class

---
 .eslintrc.js                                                   | 1 +
 app/javascript/dashboard/components/Modal.vue                  | 2 +-
 app/javascript/dashboard/components/ui/Tabs/TabsItem.vue       | 2 +-
 .../dashboard/components/widgets/conversation/Message.vue      | 3 ++-
 app/javascript/widget/components/dropdown/DropdownMenuItem.vue | 2 +-
 5 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 24a057405..2239542f0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -160,6 +160,7 @@ module.exports = {
     'vue/no-v-text': 'error',
     'vue/padding-line-between-blocks': ['error', 'always'],
     'vue/prefer-prop-type-boolean-first': 'error',
+    'vue/prefer-separate-static-class': 'error',
     'vue/max-attributes-per-line': [
       'error',
       {
diff --git a/app/javascript/dashboard/components/Modal.vue b/app/javascript/dashboard/components/Modal.vue
index 1dad472f7..ae126aa11 100644
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -84,8 +84,8 @@ export default {
       @mousedown="handleMouseDown"
     >
       <div
+        class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
         :class="{
-          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
           'rounded-xl w-[37.5rem]': !fullWidth,
           'items-center rounded-none flex h-full justify-center w-full':
             fullWidth,
diff --git a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
index 4fdcfab09..d6356aa9f 100644
--- a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
@@ -47,8 +47,8 @@ export default {
 
 <template>
   <li
+    class="tabs-title"
     :class="{
-      'tabs-title': true,
       'is-active': active,
     }"
   >
diff --git a/app/javascript/dashboard/components/widgets/conversation/Message.vue b/app/javascript/dashboard/components/widgets/conversation/Message.vue
index e0bcf547c..b4fdd5466 100644
--- a/app/javascript/dashboard/components/widgets/conversation/Message.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/Message.vue
@@ -443,7 +443,8 @@ export default {
   <li
     v-if="shouldRenderMessage"
     :id="`message${data.id}`"
-    :class="[alignBubble, 'group']"
+    class="group"
+    :class="[alignBubble]"
   >
     <div :class="wrapClass">
       <div
diff --git a/app/javascript/widget/components/dropdown/DropdownMenuItem.vue b/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
index f00023b4f..ae1853317 100644
--- a/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
+++ b/app/javascript/widget/components/dropdown/DropdownMenuItem.vue
@@ -42,7 +42,7 @@ export default {
 </script>
 
 <template>
-  <button :class="['menu-item', itemClass]" @click="action">
+  <button class="menu-item" :class="[itemClass]" @click="action">
     <FluentIcon
       v-if="icon"
       :icon="iconName"