feat: Eslint rules (#9839)

# Pull Request Template

## Description

This PR adds new eslint rules to the code base.

**Error rules**

|    Rule name     | Type | Files updated |
| ----------------- | --- | - |
| `vue/block-order`  | error  |  ✅  |
| `vue/component-name-in-template-casing`  | error  |  ✅  |
| `vue/component-options-name-casing`  | error  |  ✅  |
| `vue/custom-event-name-casing`  | error  |  ✅  |
| `vue/define-emits-declaration`  | error  |  ✅  |
| `vue/no-unused-properties`  | error  |  ✅  |
| `vue/define-macros-order`  | error  |  ✅  |
| `vue/define-props-declaration`  | error  |  ✅  |
| `vue/match-component-import-name`  | error  |  ✅  |
| `vue/next-tick-style`  | error  |  ✅  |
| `vue/no-bare-strings-in-template`  | error  |  ✅  |
| `vue/no-empty-component-block`  | error  |  ✅  |
| `vue/no-multiple-objects-in-class`  | error  |  ✅  |
| `vue/no-required-prop-with-default`  | error  |  ✅  |
| `vue/no-static-inline-styles`  | error  |  ✅  |
| `vue/no-template-target-blank`  | error  |  ✅  |
| `vue/no-this-in-before-route-enter`  | error  |  ✅  |
| `vue/no-undef-components`  | error  |  ✅  |
| `vue/no-unused-emit-declarations`  | error  |  ✅  |
| `vue/no-unused-refs`  | error  |  ✅  |
| `vue/no-use-v-else-with-v-for`  | error  |  ✅  |
| `vue/no-useless-v-bind`  | error  |  ✅  |
| `vue/no-v-text`  | error  |  ✅  |
| `vue/padding-line-between-blocks`  | error  |  ✅  |
| ~`vue/prefer-prop-type-boolean-first`~ | ~error~ | ❌ (removed this
rule, cause a bug in displaying custom attributes) |
| `vue/prefer-separate-static-class`  | error  |  ✅  |
| `vue/prefer-true-attribute-shorthand`  | error  |  ✅  |
| `vue/require-explicit-slots`  | error  |  ✅  |
| `vue/require-macro-variable-name`  | error  |  ✅  |


**Warn rules**

|    Rule name     | Type | Files updated |
| ---- | ------------- | ------------- |
| `vue/no-root-v-if`  | warn  |  ❎  |


Fixes https://linear.app/chatwoot/issue/CW-3492/vue-eslint-rules

## Type of change

- [x] New feature (non-breaking change which adds functionality)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

---------

Co-authored-by: Fayaz Ahmed <fayazara@gmail.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
Co-authored-by: Pranav <pranav@chatwoot.com>

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

@@ -1,31 +1,3 @@
-<template>
-  <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs leading-3 font-medium"
-      :class="labelClass"
-    >
-      {{ label }}
-    </div>
-    <input
-      :type="type"
-      class="border rounded w-full py-2 px-3 leading-tight outline-none"
-      :class="inputHasError"
-      :placeholder="placeholder"
-      :value="value"
-      @change="onChange"
-    />
-    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
-      {{ error }}
-    </div>
-    <div
-      v-if="!error && helpText"
-      class="text-red-400 mt-2 text-xs leading-3 font-medium"
-    >
-      {{ helpText }}
-    </div>
-  </label>
-</template>
 <script>
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
@@ -84,3 +56,32 @@ export default {
   },
 };
 </script>
+
+<template>
+  <label class="block">
+    <div
+      v-if="label"
+      class="mb-2 text-xs leading-3 font-medium"
+      :class="labelClass"
+    >
+      {{ label }}
+    </div>
+    <input
+      :type="type"
+      class="border rounded w-full py-2 px-3 leading-tight outline-none"
+      :class="inputHasError"
+      :placeholder="placeholder"
+      :value="value"
+      @change="onChange"
+    />
+    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
+      {{ error }}
+    </div>
+    <div
+      v-if="!error && helpText"
+      class="text-red-400 mt-2 text-xs leading-3 font-medium"
+    >
+      {{ helpText }}
+    </div>
+  </label>
+</template>

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

@@ -1,90 +1,3 @@
-<template>
-  <div class="phone-input--wrap relative mt-2">
-    <div
-      class="phone-input rounded w-full flex items-center justify-start outline-none border border-solid"
-      :class="inputHasError"
-    >
-      <div
-        class="country-emoji--wrap h-full cursor-pointer flex items-center justify-between px-2 py-2"
-        :class="dropdownClass"
-        @click="toggleCountryDropdown"
-      >
-        <h5 v-if="activeCountry.emoji" class="text-xl mb-0">
-          {{ activeCountry.emoji }}
-        </h5>
-        <fluent-icon v-else icon="globe" class="fluent-icon" size="20" />
-        <fluent-icon icon="chevron-down" class="fluent-icon" size="12" />
-      </div>
-      <span
-        v-if="activeDialCode"
-        class="py-2 pr-0 pl-2 text-base"
-        :class="$dm('text-slate-700', 'dark:text-slate-50')"
-      >
-        {{ activeDialCode }}
-      </span>
-      <input
-        :value="phoneNumber"
-        type="phoneInput"
-        class="border-0 w-full py-2 pl-2 pr-3 leading-tight outline-none h-full rounded-r"
-        name="phoneNumber"
-        :placeholder="placeholder"
-        :class="inputLightAndDarkModeColor"
-        @input="onChange"
-        @blur="context.blurHandler"
-      />
-    </div>
-    <div
-      v-if="showDropdown"
-      ref="dropdown"
-      v-on-clickaway="closeDropdown"
-      :class="dropdownBackgroundClass"
-      class="country-dropdown h-48 overflow-y-auto z-10 absolute top-12 px-0 pt-0 pl-1 pr-1 pb-1 rounded shadow-lg"
-      @keydown.up="moveSelectionUp"
-      @keydown.down="moveSelectionDown"
-      @keydown.enter="onSelect"
-    >
-      <div class="sticky top-0" :class="dropdownBackgroundClass">
-        <input
-          ref="searchbar"
-          v-model="searchCountry"
-          type="text"
-          placeholder="Search country"
-          class="dropdown-search h-8 text-sm mb-1 mt-1 w-full rounded py-2 px-3 outline-none border border-solid"
-          :class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
-        />
-      </div>
-      <div
-        v-for="(country, index) in items"
-        ref="dropdownItem"
-        :key="index"
-        class="country-dropdown--item h-8 flex items-center cursor-pointer rounded py-2 px-2"
-        :class="[
-          dropdownItemClass,
-          country.id === activeCountryCode ? activeDropdownItemClass : '',
-          index === selectedIndex ? focusedDropdownItemClass : '',
-        ]"
-        @click="onSelectCountry(country)"
-      >
-        <span v-if="country.emoji" class="mr-2 text-xl">{{
-          country.emoji
-        }}</span>
-        <span class="truncate text-sm leading-5">
-          {{ country.name }}
-        </span>
-        <span class="ml-2 text-xs">{{ country.dial_code }}</span>
-      </div>
-      <div v-if="items.length === 0">
-        <span
-          class="text-sm mt-4 justify-center text-center flex"
-          :class="$dm('text-slate-700', 'dark:text-slate-50')"
-        >
-          {{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
-        </span>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script>
 import countries from 'shared/constants/countries.js';
 import FluentIcon from 'shared/components/FluentIcon/Index.vue';
@@ -307,6 +220,93 @@ export default {
   },
 };
 </script>
+
+<template>
+  <div class="relative mt-2 phone-input--wrap">
+    <div
+      class="flex items-center justify-start w-full border border-solid rounded outline-none phone-input"
+      :class="inputHasError"
+    >
+      <div
+        class="flex items-center justify-between h-full px-2 py-2 cursor-pointer country-emoji--wrap"
+        :class="dropdownClass"
+        @click="toggleCountryDropdown"
+      >
+        <h5 v-if="activeCountry.emoji" class="mb-0 text-xl">
+          {{ activeCountry.emoji }}
+        </h5>
+        <FluentIcon v-else icon="globe" class="fluent-icon" size="20" />
+        <FluentIcon icon="chevron-down" class="fluent-icon" size="12" />
+      </div>
+      <span
+        v-if="activeDialCode"
+        class="py-2 pl-2 pr-0 text-base"
+        :class="$dm('text-slate-700', 'dark:text-slate-50')"
+      >
+        {{ activeDialCode }}
+      </span>
+      <input
+        :value="phoneNumber"
+        type="phoneInput"
+        class="w-full h-full py-2 pl-2 pr-3 leading-tight border-0 rounded-r outline-none"
+        name="phoneNumber"
+        :placeholder="placeholder"
+        :class="inputLightAndDarkModeColor"
+        @input="onChange"
+        @blur="context.blurHandler"
+      />
+    </div>
+    <div
+      v-if="showDropdown"
+      ref="dropdown"
+      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"
+      @keydown.up="moveSelectionUp"
+      @keydown.down="moveSelectionDown"
+      @keydown.enter="onSelect"
+    >
+      <div class="sticky top-0" :class="dropdownBackgroundClass">
+        <input
+          ref="searchbar"
+          v-model="searchCountry"
+          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"
+          :class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
+        />
+      </div>
+      <div
+        v-for="(country, index) in items"
+        :key="index"
+        class="flex items-center h-8 px-2 py-2 rounded cursor-pointer country-dropdown--item"
+        :class="[
+          dropdownItemClass,
+          country.id === activeCountryCode ? activeDropdownItemClass : '',
+          index === selectedIndex ? focusedDropdownItemClass : '',
+        ]"
+        @click="onSelectCountry(country)"
+      >
+        <span v-if="country.emoji" class="mr-2 text-xl">{{
+          country.emoji
+        }}</span>
+        <span class="text-sm leading-5 truncate">
+          {{ country.name }}
+        </span>
+        <span class="ml-2 text-xs">{{ country.dial_code }}</span>
+      </div>
+      <div v-if="items.length === 0">
+        <span
+          class="flex justify-center mt-4 text-sm text-center"
+          :class="$dm('text-slate-700', 'dark:text-slate-50')"
+        >
+          {{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 @import '~widget/assets/scss/variables.scss';
 .phone-input--wrap {

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

@@ -1,24 +1,3 @@
-<template>
-  <label class="block">
-    <div
-      v-if="label"
-      class="mb-2 text-xs leading-3 font-medium"
-      :class="labelClass"
-    >
-      {{ label }}
-    </div>
-    <textarea
-      class="resize-none border rounded w-full py-2 px-3 text-slate-700 leading-tight outline-none"
-      :class="isTextAreaHasError"
-      :placeholder="placeholder"
-      :value="value"
-      @change="onChange"
-    />
-    <div v-if="error" class="text-red-400 mt-2 text-xs leading-3 font-medium">
-      {{ error }}
-    </div>
-  </label>
-</template>
 <script>
 import darkModeMixin from 'widget/mixins/darkModeMixin';
 export default {
@@ -28,10 +7,6 @@ export default {
       type: String,
       default: '',
     },
-    type: {
-      type: String,
-      default: 'text',
-    },
     placeholder: {
       type: String,
       default: '',
@@ -73,6 +48,29 @@ export default {
   },
 };
 </script>
+
+<template>
+  <label class="block">
+    <div
+      v-if="label"
+      class="mb-2 text-xs font-medium leading-3"
+      :class="labelClass"
+    >
+      {{ label }}
+    </div>
+    <textarea
+      class="w-full px-3 py-2 leading-tight border rounded outline-none resize-none text-slate-700"
+      :class="isTextAreaHasError"
+      :placeholder="placeholder"
+      :value="value"
+      @change="onChange"
+    />
+    <div v-if="error" class="mt-2 text-xs font-medium leading-3 text-red-400">
+      {{ error }}
+    </div>
+  </label>
+</template>
+
 <style lang="scss" scoped>
 textarea {
   min-height: 8rem;