From 16bc70b6dc2af5c5f20e8c87df1a0e681cf1d566 Mon Sep 17 00:00:00 2001
From: iamsivin <iamsivin@gmail.com>
Date: Fri, 26 Jul 2024 12:34:36 +0530
Subject: [PATCH] fix: apply ESLint rule vue/prefer-true-attribute-shorthand

---
 .eslintrc.js                                       |  1 +
 .../dashboard/components/ConversationItem.vue      |  2 +-
 .../layout/sidebarComponents/Primary.vue           |  2 +-
 .../dashboard/components/ui/DateRangePicker.vue    |  4 ++--
 .../dashboard/components/ui/DateTimePicker.vue     |  2 +-
 .../components/widgets/AutomationActionInput.vue   |  4 ++--
 .../widgets/AutomationActionTeamMessageInput.vue   |  2 +-
 .../dashboard/components/widgets/ColorPicker.vue   |  2 +-
 .../components/widgets/FilterInput/Index.vue       |  2 +-
 .../dashboard/components/widgets/LabelSelector.vue |  2 +-
 .../components/widgets/ThumbnailGroup.vue          |  2 +-
 .../conversation/ConversationAdvancedFilter.vue    |  2 +-
 .../components/widgets/conversation/ReplyBox.vue   |  8 ++++----
 .../widgets/conversation/bubble/Image.vue          |  2 +-
 .../modules/contact/components/ContactFields.vue   |  8 ++++----
 .../modules/contact/components/MergeContact.vue    |  2 +-
 .../routes/dashboard/commands/commandbar.vue       |  2 +-
 .../components/ContactsAdvancedFilters.vue         |  2 +-
 .../contacts/components/ContactsTable.vue          |  2 +-
 .../conversation/ContactConversations.vue          |  2 +-
 .../conversation/ConversationParticipant.vue       | 14 +++++++-------
 .../dashboard/conversation/contact/ContactForm.vue |  2 +-
 .../conversation/contact/ConversationForm.vue      | 10 +++++-----
 .../customAttributes/CustomAttributes.vue          |  2 +-
 .../dashboard/conversation/labels/LabelBox.vue     |  2 +-
 .../helpcenter/components/PortalListItemTable.vue  |  2 +-
 .../helpcenter/pages/articles/ArticleSettings.vue  |  4 ++--
 .../helpcenter/pages/categories/NameEmojiInput.vue |  2 +-
 .../dashboard/settings/attributes/AddAttribute.vue |  4 ++--
 .../settings/attributes/EditAttribute.vue          |  4 ++--
 .../dashboard/settings/campaigns/AddCampaign.vue   |  4 ++--
 .../dashboard/settings/campaigns/EditCampaign.vue  |  2 +-
 .../routes/dashboard/settings/canned/AddCanned.vue |  2 +-
 .../dashboard/settings/canned/EditCanned.vue       |  2 +-
 .../routes/dashboard/settings/inbox/AddAgents.vue  |  4 ++--
 .../dashboard/settings/inbox/channels/Facebook.vue |  4 ++--
 .../inbox/components/WeeklyAvailability.vue        | 10 +++++-----
 .../inbox/settingsPage/CollaboratorsPage.vue       |  4 ++--
 .../inbox/settingsPage/ConfigurationPage.vue       |  2 +-
 .../routes/dashboard/settings/macros/MacroNode.vue |  2 +-
 .../settings/profile/MessageSignature.vue          |  4 ++--
 .../dashboard/settings/reports/BotReports.vue      |  2 +-
 .../dashboard/settings/reports/CsatResponses.vue   |  6 +++---
 .../routes/dashboard/settings/reports/Index.vue    |  2 +-
 .../settings/reports/components/CsatTable.vue      |  4 ++--
 .../settings/reports/components/Filters/Agents.vue |  4 ++--
 .../reports/components/overview/AgentTable.vue     |  2 +-
 .../shared/components/GreetingsEditor.vue          |  8 ++++----
 .../shared/components/emoji/EmojiInput.vue         |  2 +-
 49 files changed, 86 insertions(+), 85 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 2239542f0..fe5cb8d79 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -150,6 +150,7 @@ module.exports = {
     'vue/no-unused-emit-declarations': 'error',
     'vue/no-unused-refs': 'error',
     'vue/no-use-v-else-with-v-for': 'error',
+    'vue/prefer-true-attribute-shorthand': 'error',
     'vue/no-useless-v-bind': [
       'error',
       {
diff --git a/app/javascript/dashboard/components/ConversationItem.vue b/app/javascript/dashboard/components/ConversationItem.vue
index 53ddfc164..55721ac21 100644
--- a/app/javascript/dashboard/components/ConversationItem.vue
+++ b/app/javascript/dashboard/components/ConversationItem.vue
@@ -58,7 +58,7 @@ export default {
     :conversation-type="conversationType"
     :selected="isConversationSelected(source.id)"
     :show-assignee="showAssignee"
-    :enable-context-menu="true"
+    enable-context-menu
     @selectConversation="selectConversation"
     @deSelectConversation="deSelectConversation"
     @assignAgent="assignAgent"
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
index 26161fbc3..12edff7c0 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -92,7 +92,7 @@ export default {
         v-if="!isACustomBrandedInstance"
         icon="book-open-globe"
         name="DOCS"
-        :open-in-new-page="true"
+        open-in-new-page
         :to="helpDocsURL"
       />
       <NotificationBell @openNotificationPanel="openNotificationPanel" />
diff --git a/app/javascript/dashboard/components/ui/DateRangePicker.vue b/app/javascript/dashboard/components/ui/DateRangePicker.vue
index bb87a8d92..7787ab83d 100644
--- a/app/javascript/dashboard/components/ui/DateRangePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateRangePicker.vue
@@ -27,8 +27,8 @@ export default {
 <template>
   <div class="date-picker">
     <DatePicker
-      :range="true"
-      :confirm="true"
+      range
+      confirm
       :clearable="false"
       :editable="false"
       :confirm-text="confirmText"
diff --git a/app/javascript/dashboard/components/ui/DateTimePicker.vue b/app/javascript/dashboard/components/ui/DateTimePicker.vue
index b37d7853d..439bc873e 100644
--- a/app/javascript/dashboard/components/ui/DateTimePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateTimePicker.vue
@@ -34,7 +34,7 @@ export default {
   <div class="date-picker">
     <DatePicker
       type="datetime"
-      :confirm="true"
+      confirm
       :clearable="false"
       :editable="false"
       :confirm-text="confirmText"
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
index cbd5c13b1..28810fd4e 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -138,7 +138,7 @@ export default {
               track-by="id"
               label="name"
               :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              :multiple="true"
+              multiple
               selected-label
               :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
               deselect-label=""
@@ -186,7 +186,7 @@ export default {
       v-if="inputType === 'textarea'"
       v-model="castMessageVmodel"
       rows="4"
-      :enable-variables="true"
+      enable-variables
       :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
       class="action-message"
     />
diff --git a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
index 10b592618..1188ad281 100644
--- a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
@@ -33,7 +33,7 @@ export default {
         track-by="id"
         label="name"
         :placeholder="$t('AUTOMATION.ACTION.TEAM_DROPDOWN_PLACEHOLDER')"
-        :multiple="true"
+        multiple
         selected-label
         :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
         deselect-label=""
diff --git a/app/javascript/dashboard/components/widgets/ColorPicker.vue b/app/javascript/dashboard/components/widgets/ColorPicker.vue
index c41532e41..732de3ced 100644
--- a/app/javascript/dashboard/components/widgets/ColorPicker.vue
+++ b/app/javascript/dashboard/components/widgets/ColorPicker.vue
@@ -42,7 +42,7 @@ export default {
     <Chrome
       v-if="isPickerOpen"
       v-on-clickaway="closeTogglePicker"
-      :disable-alpha="true"
+      disable-alpha
       :value="value"
       class="colorpicker--chrome"
       @input="updateColor"
diff --git a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
index f57364efe..606432096 100644
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -203,7 +203,7 @@ export default {
               track-by="id"
               label="name"
               placeholder="Select"
-              :multiple="true"
+              multiple
               selected-label
               :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
               deselect-label=""
diff --git a/app/javascript/dashboard/components/widgets/LabelSelector.vue b/app/javascript/dashboard/components/widgets/LabelSelector.vue
index 0a989a235..c2accc64a 100644
--- a/app/javascript/dashboard/components/widgets/LabelSelector.vue
+++ b/app/javascript/dashboard/components/widgets/LabelSelector.vue
@@ -84,7 +84,7 @@ export default {
       :key="label.id"
       :title="label.title"
       :description="label.description"
-      :show-close="true"
+      show-close
       :color="label.color"
       variant="smooth"
       @click="removeItem"
diff --git a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
index 0b90704dd..5f35f62fa 100644
--- a/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
+++ b/app/javascript/dashboard/components/widgets/ThumbnailGroup.vue
@@ -43,7 +43,7 @@ export default {
       :title="user.name"
       :src="user.thumbnail"
       :username="user.name"
-      :has-border="true"
+      has-border
       :size="size"
       :class="`overlapping-thumbnail gap-${gap}`"
     />
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
index 306b3a686..b0be89160 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -325,7 +325,7 @@ export default {
           :dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
-          :grouped-filters="true"
+          grouped-filters
           :error-message="validationErrors[`filter_${i}`]"
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
diff --git a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
index dca4e3e1b..40c47676a 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
@@ -1087,7 +1087,7 @@ export default {
       color-scheme="secondary"
       class="banner--self-assign"
       :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
-      :has-action-button="true"
+      has-action-button
       :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
       @click="onClickSelfAssign"
     />
@@ -1146,7 +1146,7 @@ export default {
         :placeholder="messagePlaceHolder"
         :min-height="4"
         :signature="signatureToApply"
-        :allow-signature="true"
+        allow-signature
         :send-with-signature="sendWithSignature"
         @typingOff="onTypingOff"
         @typingOn="onTypingOn"
@@ -1162,10 +1162,10 @@ export default {
         :placeholder="messagePlaceHolder"
         :update-selection-with="updateEditorSelectionWith"
         :min-height="4"
-        :enable-variables="true"
+        enable-variables
         :variables="messageVariables"
         :signature="signatureToApply"
-        :allow-signature="true"
+        allow-signature
         :channel-type="channelType"
         @typingOff="onTypingOff"
         @typingOn="onTypingOn"
diff --git a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue b/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
index ec8539724..d5368e4aa 100644
--- a/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue
@@ -26,7 +26,7 @@ export default {
 <template>
   <div class="image message-text__wrap">
     <img :src="url" @click="onClick" @error="$emit('error')" />
-    <woot-modal :full-width="true" :show.sync="show" :on-close="onClose">
+    <woot-modal full-width :show.sync="show" :on-close="onClose">
       <img :src="url" class="modal-image skip-context-menu" />
     </woot-modal>
   </div>
diff --git a/app/javascript/dashboard/modules/contact/components/ContactFields.vue b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
index f33abe3b4..fc0cfef0d 100644
--- a/app/javascript/dashboard/modules/contact/components/ContactFields.vue
+++ b/app/javascript/dashboard/modules/contact/components/ContactFields.vue
@@ -59,7 +59,7 @@ export default {
       icon="mail"
       emoji=""
       :value="contact.email"
-      :show-edit="true"
+      show-edit
       @update="onEmailUpdate"
     />
     <Attribute
@@ -67,7 +67,7 @@ export default {
       icon="call"
       emoji=""
       :value="contact.phone_number"
-      :show-edit="true"
+      show-edit
       @update="onPhoneUpdate"
     />
     <Attribute
@@ -76,7 +76,7 @@ export default {
       icon="map"
       emoji="🌍"
       :value="additionalAttributes.location"
-      :show-edit="true"
+      show-edit
       @update="onLocationUpdate"
     />
     <div
@@ -88,7 +88,7 @@ export default {
         :label="attribute"
         icon="chevron-right"
         :value="customAttributes[attribute]"
-        :show-edit="true"
+        show-edit
         @update="value => onCustomAttributeUpdate(attribute, value)"
       />
     </div>
diff --git a/app/javascript/dashboard/modules/contact/components/MergeContact.vue b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
index 32f6ff878..e9223be52 100644
--- a/app/javascript/dashboard/modules/contact/components/MergeContact.vue
+++ b/app/javascript/dashboard/modules/contact/components/MergeContact.vue
@@ -91,7 +91,7 @@ export default {
             :clear-on-select="false"
             :show-labels="false"
             :placeholder="$t('MERGE_CONTACTS.PARENT.PLACEHOLDER')"
-            :allow-empty="true"
+            allow-empty
             :loading="isSearching"
             :max-height="150"
             open-direction="top"
diff --git a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
index 072b961c2..dcc25e223 100644
--- a/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
+++ b/app/javascript/dashboard/routes/dashboard/commands/commandbar.vue
@@ -100,7 +100,7 @@ export default {
 <template>
   <ninja-keys
     ref="ninjakeys"
-    :no-auto-load-md-icons="true"
+    no-auto-load-md-icons
     hide-breadcrumbs
     :placeholder="placeholder"
     @selected="onSelected"
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
index 5f0a5cb65..41c986d03 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
@@ -286,7 +286,7 @@ export default {
           :key="i"
           v-model="appliedFilters[i]"
           :filter-groups="filterGroups"
-          :grouped-filters="true"
+          grouped-filters
           :input-type="
             getInputType(
               appliedFilters[i].attribute_key,
diff --git a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
index bfc425790..766bc7f29 100644
--- a/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/contacts/components/ContactsTable.vue
@@ -253,7 +253,7 @@ export default {
     class="flex-1 h-full -mt-1 overflow-hidden bg-white contacts-table-wrap dark:bg-slate-900"
   >
     <VeTable
-      :fixed-header="true"
+      fixed-header
       max-height="calc(100vh - 7.125rem)"
       scroll-width="187rem"
       :columns="columns"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
index 46d1d7ea5..1070566b0 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactConversations.vue
@@ -60,7 +60,7 @@ export default {
           :key="conversation.id"
           :chat="conversation"
           :hide-inbox-name="false"
-          :hide-thumbnail="true"
+          hide-thumbnail
           class="compact"
         />
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
index b53af3cc6..ec3c020b8 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationParticipant.vue
@@ -155,11 +155,11 @@ export default {
     <div class="flex justify-between">
       <div class="flex justify-between w-full mb-1">
         <div>
-          <p v-if="watchersList.length" class="total-watchers m-0 text-sm">
+          <p v-if="watchersList.length" class="m-0 text-sm total-watchers">
             <Spinner v-if="watchersUiFlas.isFetching" size="tiny" />
             {{ totalWatchersText }}
           </p>
-          <p v-else class="text-slate-400 dark:text-slate-700 m-0 text-sm">
+          <p v-else class="m-0 text-sm text-slate-400 dark:text-slate-700">
             {{ $t('CONVERSATION_PARTICIPANTS.NO_PARTICIPANTS_TEXT') }}
           </p>
         </div>
@@ -174,7 +174,7 @@ export default {
         />
       </div>
     </div>
-    <div class="flex justify-between items-center">
+    <div class="flex items-center justify-between">
       <ThumbnailGroup
         :more-thumbnails-text="moreThumbnailsText"
         :show-more-thumbnails-count="showMoreThumbs"
@@ -182,7 +182,7 @@ export default {
       />
       <p
         v-if="isUserWatching"
-        class="text-slate-300 dark:text-slate-300 m-0 text-sm"
+        class="m-0 text-sm text-slate-300 dark:text-slate-300"
       >
         {{ $t('CONVERSATION_PARTICIPANTS.YOU_ARE_WATCHING') }}
       </p>
@@ -205,9 +205,9 @@ export default {
       :class="{ 'dropdown-pane--open': showDropDown }"
       class="dropdown-pane"
     >
-      <div class="flex justify-between items-center mb-1">
+      <div class="flex items-center justify-between mb-1">
         <h4
-          class="text-sm m-0 overflow-hidden whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
+          class="m-0 overflow-hidden text-sm whitespace-nowrap text-ellipsis text-slate-800 dark:text-slate-100"
         >
           {{ $t('CONVERSATION_PARTICIPANTS.ADD_PARTICIPANTS') }}
         </h4>
@@ -222,7 +222,7 @@ export default {
       <MultiselectDropdownItems
         :options="agentsList"
         :selected-items="selectedWatchers"
-        :has-thumbnail="true"
+        has-thumbnail
         @click="onClickItem"
       />
     </div>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
index bf68334a6..5281ed890 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactForm.vue
@@ -373,7 +373,7 @@ export default {
           :custom-label="countryNameWithCode"
           :max-height="160"
           :options="countries"
-          :allow-empty="true"
+          allow-empty
           :option-height="104"
         />
       </div>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
index 70532b82d..f37fd4565 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue
@@ -351,7 +351,7 @@ export default {
               select-label=""
               deselect-label=""
               :max-height="160"
-              :close-on-select="true"
+              close-on-select
               :options="[...inboxes]"
             >
               <template slot="singleLabel" slot-scope="{ option }">
@@ -440,9 +440,9 @@ export default {
                 v-model="message"
                 class="message-editor"
                 :class="{ editor_warning: v$.message.$error }"
-                :enable-variables="true"
+                enable-variables
                 :signature="signatureToApply"
-                :allow-signature="true"
+                allow-signature
                 :placeholder="$t('NEW_CONVERSATION.FORM.MESSAGE.PLACEHOLDER')"
                 @toggle-canned-menu="toggleCannedMenu"
                 @blur="v$.message.$touch"
@@ -495,8 +495,8 @@ export default {
               input-id="newConversationAttachment"
               :size="4096 * 4096"
               :accept="allowedFileTypes"
-              :multiple="true"
-              :drop="true"
+              multiple
+              drop
               :drop-directory="false"
               :data="{
                 direct_upload_url: '/rails/active_storage/direct_uploads',
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
index a769b7ede..86ef0f91e 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/customAttributes/CustomAttributes.vue
@@ -157,7 +157,7 @@ export default {
       :label="attribute.attribute_display_name"
       :description="attribute.attribute_description"
       :value="attribute.value"
-      :show-actions="true"
+      show-actions
       :attribute-regex="attribute.regex_pattern"
       :regex-cue="attribute.regex_cue"
       :class="attributeClass"
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
index 3ab5d3b21..f38aae4ed 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue
@@ -86,7 +86,7 @@ export default {
           :key="label.id"
           :title="label.title"
           :description="label.description"
-          :show-close="true"
+          show-close
           :color="label.color"
           variant="smooth"
           class="max-w-[calc(100%-0.5rem)]"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
index bd3c6965f..845373b2b 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalListItemTable.vue
@@ -74,7 +74,7 @@ export default {
               )
             "
             color-scheme="warning"
-            :small="true"
+            small
             variant="smooth"
             class="default-status"
           />
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
index 8021b1b91..27cea581c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue
@@ -208,8 +208,8 @@ export default {
             label="name"
             :options="metaOptions"
             track-by="name"
-            :multiple="true"
-            :taggable="true"
+            multiple
+            taggable
             :close-on-select="false"
             @search-change="handleSearchChange"
             @close="onBlur"
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
index 73cc3c279..947ae2e8c 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/categories/NameEmojiInput.vue
@@ -107,7 +107,7 @@ export default {
       v-if="showEmojiPicker"
       v-on-clickaway="hideEmojiPicker"
       class="left-0 top-16"
-      :show-remove-button="true"
+      show-remove-button
       :on-click="onClickInsertEmoji"
     />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
index 2ecd1ec37..1ff257b7e 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/AddAttribute.vue
@@ -227,8 +227,8 @@ export default {
               track-by="name"
               :class="{ invalid: isMultiselectInvalid }"
               :options="options"
-              :multiple="true"
-              :taggable="true"
+              multiple
+              taggable
               @close="onTouch"
               @tag="addTagValue"
             />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
index 3e629f058..3487b4d5f 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/EditAttribute.vue
@@ -232,8 +232,8 @@ export default {
             track-by="name"
             :class="{ invalid: isMultiselectInvalid }"
             :options="options"
-            :multiple="true"
-            :taggable="true"
+            multiple
+            taggable
             @tag="addTagValue"
           />
           <label v-show="isMultiselectInvalid" class="error-message">
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
index 842070ff1..8c0dc7b5c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/AddCampaign.vue
@@ -268,10 +268,10 @@ export default {
             :options="audienceList"
             track-by="id"
             label="title"
-            :multiple="true"
+            multiple
             :close-on-select="false"
             :clear-on-select="false"
-            :hide-selected="true"
+            hide-selected
             :placeholder="$t('CAMPAIGN.ADD.FORM.AUDIENCE.PLACEHOLDER')"
             selected-label
             :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
index 841d77f21..7bd4f2a15 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/campaigns/EditCampaign.vue
@@ -194,7 +194,7 @@ export default {
           <WootMessageEditor
             v-model="message"
             class="message-editor"
-            :is-format-mode="true"
+            is-format-mode
             :class="{ editor_warning: v$.message.$error }"
             :placeholder="$t('CAMPAIGN.ADD.FORM.MESSAGE.PLACEHOLDER')"
             @input="v$.message.$touch"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
index 54c7f8b4b..95f60f5a2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/AddCanned.vue
@@ -109,7 +109,7 @@ export default {
               v-model="content"
               class="message-editor [&>div]:px-1"
               :class="{ editor_warning: v$.content.$error }"
-              :enable-variables="true"
+              enable-variables
               :enable-canned-responses="false"
               :placeholder="$t('CANNED_MGMT.ADD.FORM.CONTENT.PLACEHOLDER')"
               @blur="v$.content.$touch"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
index abecf4558..634745b38 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/canned/EditCanned.vue
@@ -114,7 +114,7 @@ export default {
               v-model="content"
               class="message-editor [&>div]:px-1"
               :class="{ editor_warning: v$.content.$error }"
-              :enable-variables="true"
+              enable-variables
               :enable-canned-responses="false"
               :placeholder="$t('CANNED_MGMT.EDIT.FORM.CONTENT.PLACEHOLDER')"
               @blur="v$.content.$touch"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
index 2fe4f6823..2985a34a9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
@@ -80,10 +80,10 @@ export default {
               :options="agentList"
               track-by="id"
               label="name"
-              :multiple="true"
+              multiple
               :close-on-select="false"
               :clear-on-select="false"
-              :hide-selected="true"
+              hide-selected
               selected-label
               :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
               :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
index 04d407cd7..1f5dc470d 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Facebook.vue
@@ -257,8 +257,8 @@ export default {
               {{ $t('INBOX_MGMT.ADD.FB.CHOOSE_PAGE') }}
               <multiselect
                 v-model.trim="selectedPage"
-                :close-on-select="true"
-                :allow-empty="true"
+                close-on-select
+                allow-empty
                 :options="getSelectablePages"
                 track-by="id"
                 label="name"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
index 38f1de8db..43cc5bedf 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/components/WeeklyAvailability.vue
@@ -134,7 +134,7 @@ export default {
           />
           {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_AVAILABILITY') }}
         </label>
-        <p class="text-slate-700 dark:text-slate-300 mb-4">
+        <p class="mb-4 text-slate-700 dark:text-slate-300">
           {{ $t('INBOX_MGMT.BUSINESS_HOURS.TOGGLE_HELP') }}
         </p>
         <div v-if="isBusinessHoursEnabled" class="mb-6">
@@ -144,12 +144,12 @@ export default {
             </label>
             <div
               v-if="isRichEditorEnabled"
-              class="py-0 px-4 border border-solid border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-900 rounded-md mx-0 mt-0 mb-4"
+              class="px-4 py-0 mx-0 mt-0 mb-4 bg-white border border-solid rounded-md border-slate-200 dark:border-slate-600 dark:bg-slate-900"
             >
               <WootMessageEditor
                 v-model="unavailableMessage"
-                :enable-variables="true"
-                :is-format-mode="true"
+                enable-variables
+                is-format-mode
                 class="message-editor"
                 :min-height="4"
               />
@@ -168,7 +168,7 @@ export default {
               selected-label=""
               track-by="value"
               label="label"
-              :close-on-select="true"
+              close-on-select
               :placeholder="$t('INBOX_MGMT.BUSINESS_HOURS.DAY.CHOOSE')"
               :allow-empty="false"
             />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
index 14360efed..fa5bf16c2 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CollaboratorsPage.vue
@@ -127,10 +127,10 @@ export default {
         :options="agentList"
         track-by="id"
         label="name"
-        :multiple="true"
+        multiple
         :close-on-select="false"
         :clear-on-select="false"
-        :hide-selected="true"
+        hide-selected
         placeholder="Pick some"
         selected-label
         :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
index af8238128..170902ec0 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/ConfigurationPage.vue
@@ -112,7 +112,7 @@ export default {
           :script="inbox.web_widget_script"
           lang="html"
           :codepen-title="`${inbox.name} - Chatwoot Widget Test`"
-          :enable-code-pen="true"
+          enable-code-pen
         />
       </SettingsSection>
 
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
index b41dce029..9eba79343 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
@@ -88,7 +88,7 @@ export default {
         :dropdown-values="dropdownValues()"
         :show-action-input="showActionInput"
         :show-remove-button="false"
-        :is-macro="true"
+        is-macro
         :error-message="errors[`action_${index}`] || ''"
         :initial-file-name="fileName"
         @resetAction="$emit('resetAction')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
index a6474cc75..2d149755c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/profile/MessageSignature.vue
@@ -32,11 +32,11 @@ const updateSignature = () => {
       id="message-signature-input"
       v-model="signature"
       class="message-editor h-[10rem] !px-3"
-      :is-format-mode="true"
+      is-format-mode
       :placeholder="$t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE.PLACEHOLDER')"
       :enabled-menu-options="customEditorMenuList"
       :enable-suggestions="false"
-      :show-image-resize-toolbar="true"
+      show-image-resize-toolbar
     />
     <FormButton
       type="submit"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
index 1359959aa..c788f279a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue
@@ -93,7 +93,7 @@ export default {
   <div class="flex-1 p-4 overflow-auto">
     <ReportFilterSelector
       :show-agents-filter="false"
-      :show-group-by-filter="true"
+      show-group-by-filter
       :show-business-hours-switch="false"
       @filterChange="onFilterChange"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
index d4ffc19d8..df2ab7d7a 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
@@ -110,9 +110,9 @@ export default {
 <template>
   <div class="flex-1 p-4 overflow-auto">
     <ReportFilterSelector
-      :show-agents-filter="true"
-      :show-inbox-filter="true"
-      :show-rating-filter="true"
+      show-agents-filter
+      show-inbox-filter
+      show-rating-filter
       :show-team-filter="isTeamsEnabled"
       :show-business-hours-switch="false"
       @filterChange="onFilterChange"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 9521f18ef..009320d7b 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -118,7 +118,7 @@ export default {
     </woot-button>
     <ReportFilterSelector
       :show-agents-filter="false"
-      :show-group-by-filter="true"
+      show-group-by-filter
       @filterChange="onFilterChange"
     />
     <ReportContainer :group-by="groupBy" />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index 6a27c5192..630b1df23 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -131,8 +131,8 @@ export default {
   <div class="csat--table-container">
     <VeTable
       max-height="calc(100vh - 21.875rem)"
-      :fixed-header="true"
-      :border-around="true"
+      fixed-header
+      border-around
       :columns="columns"
       :table-data="tableData"
     />
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
index 4a7f41cf4..f671ee14c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Filters/Agents.vue
@@ -32,10 +32,10 @@ export default {
       :options="options"
       track-by="id"
       label="name"
-      :multiple="true"
+      multiple
       :close-on-select="false"
       :clear-on-select="false"
-      :hide-selected="true"
+      hide-selected
       :placeholder="$t('CSAT_REPORTS.FILTERS.AGENTS.PLACEHOLDER')"
       selected-label
       :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
index 8028dc6d5..44e6f51f9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/overview/AgentTable.vue
@@ -112,7 +112,7 @@ export default {
   <div class="agent-table-container">
     <VeTable
       max-height="calc(100vh - 21.875rem)"
-      :fixed-header="true"
+      fixed-header
       :columns="columns"
       :table-data="tableData"
     />
diff --git a/app/javascript/shared/components/GreetingsEditor.vue b/app/javascript/shared/components/GreetingsEditor.vue
index 31b72e3ef..7388a2886 100644
--- a/app/javascript/shared/components/GreetingsEditor.vue
+++ b/app/javascript/shared/components/GreetingsEditor.vue
@@ -47,13 +47,13 @@ export default {
   <section class="w-3/4">
     <div
       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"
+      class="px-4 py-0 mx-0 mt-0 mb-4 bg-white border border-solid rounded-md border-slate-200 dark:border-slate-600 dark:bg-slate-900"
     >
       <WootMessageEditor
         v-model="greetingsMessage"
-        :is-format-mode="true"
-        :enable-variables="true"
-        class="input bg-white dark:bg-slate-900"
+        is-format-mode
+        enable-variables
+        class="bg-white input dark:bg-slate-900"
         :placeholder="placeholder"
         :min-height="4"
         @input="handleInput"
diff --git a/app/javascript/shared/components/emoji/EmojiInput.vue b/app/javascript/shared/components/emoji/EmojiInput.vue
index a68a41420..4928c05f0 100644
--- a/app/javascript/shared/components/emoji/EmojiInput.vue
+++ b/app/javascript/shared/components/emoji/EmojiInput.vue
@@ -94,7 +94,7 @@ export default {
           ref="searchbar"
           v-model="search"
           type="text"
-          class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0"
+          class="emoji-search--input focus:box-shadow-blue dark:focus:box-shadow-dark !mb-0 !h-8 !text-sm"
           :placeholder="$t('EMOJI.PLACEHOLDER')"
         />
         <woot-button