fix: apply ESLint rule vue/no-bare-strings-in-template

app/javascript/widget/components/ArticleSearch.vue

@@ -27,7 +27,7 @@ export default {
 <template>
   <div class="relative flex items-center">
     <div
-      class="absolute inset-y-0 left-0 flex items-center py-2 px-2 text-slate-500"
+      class="absolute inset-y-0 left-0 flex items-center px-2 py-2 text-slate-500"
     >
       <fluent-icon icon="search" size="14" />
     </div>
@@ -37,14 +37,14 @@ export default {
       :placeholder="placeholder"
       type="text"
       name="search"
-      class="block w-full h-8 rounded-md focus-visible:outline-none pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
+      class="block w-full h-8 px-2 pl-6 pr-1 text-sm border rounded-md focus-visible:outline-none text-slate-800 border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
       @input="handleInput"
     />
     <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
       <kbd
-        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
+        class="inline-flex items-center px-1 font-sans border rounded border-slate-200 text-xxs text-slate-400"
       >
-        ⌘K
+        {{ '⌘K' }}
       </kbd>
     </div>
   </div>

app/javascript/widget/components/ChatInputWrap.vue

@@ -154,7 +154,7 @@ export default {
       <button
         v-if="hasEmojiPickerEnabled"
         class="flex items-center justify-center icon-button"
-        aria-label="Emoji picker"
+        :aria-label="$t('EMOJI.ARIA_LABEL')"
         @click="toggleEmojiPicker"
       >
         <FluentIcon icon="emoji" :class="emojiIconColor" />

app/javascript/widget/components/FooterReplyTo.vue

@@ -28,7 +28,7 @@ export default {
     class="mb-2.5 rounded-[7px] dark:bg-slate-900 dark:text-slate-100 bg-slate-100 px-2 py-1.5 text-sm text-slate-700 flex items-center gap-2"
   >
     <div class="items-center flex-grow truncate">
-      <strong>Replying to:</strong>
+      <strong>{{ $t('FOOTER_REPLY_TO.REPLY_TO') }}</strong>
       {{ inReplyTo.content || replyToAttachment }}
     </div>
     <button

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

@@ -222,17 +222,17 @@ export default {
 </script>
 
 <template>
-  <div class="phone-input--wrap relative mt-2">
+  <div class="relative mt-2 phone-input--wrap">
     <div
-      class="phone-input rounded w-full flex items-center justify-start outline-none border border-solid"
+      class="flex items-center justify-start w-full border border-solid rounded outline-none phone-input"
       :class="inputHasError"
     >
       <div
-        class="country-emoji--wrap h-full cursor-pointer flex items-center justify-between px-2 py-2"
+        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="text-xl mb-0">
+        <h5 v-if="activeCountry.emoji" class="mb-0 text-xl">
           {{ activeCountry.emoji }}
         </h5>
         <FluentIcon v-else icon="globe" class="fluent-icon" size="20" />
@@ -240,7 +240,7 @@ export default {
       </div>
       <span
         v-if="activeDialCode"
-        class="py-2 pr-0 pl-2 text-base"
+        class="py-2 pl-2 pr-0 text-base"
         :class="$dm('text-slate-700', 'dark:text-slate-50')"
       >
         {{ activeDialCode }}
@@ -248,7 +248,7 @@ export default {
       <input
         :value="phoneNumber"
         type="phoneInput"
-        class="border-0 w-full py-2 pl-2 pr-3 leading-tight outline-none h-full rounded-r"
+        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"
@@ -261,7 +261,7 @@ export default {
       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"
+      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"
@@ -271,8 +271,8 @@ export default {
           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"
+          :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>
@@ -280,7 +280,7 @@ export default {
         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="flex items-center h-8 px-2 py-2 rounded cursor-pointer country-dropdown--item"
         :class="[
           dropdownItemClass,
           country.id === activeCountryCode ? activeDropdownItemClass : '',
@@ -291,14 +291,14 @@ export default {
         <span v-if="country.emoji" class="mr-2 text-xl">{{
           country.emoji
         }}</span>
-        <span class="truncate text-sm leading-5">
+        <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="text-sm mt-4 justify-center text-center flex"
+          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') }}

app/javascript/widget/components/SearchArticle.vue

@@ -27,7 +27,7 @@ export default {
 <template>
   <div class="relative flex items-center">
     <div
-      class="absolute inset-y-0 left-0 flex items-center px-2 h-8 text-slate-500"
+      class="absolute inset-y-0 left-0 flex items-center h-8 px-2 text-slate-500"
     >
       <fluent-icon icon="search" size="14" />
     </div>
@@ -37,14 +37,14 @@ export default {
       :placeholder="placeholder"
       type="text"
       name="search"
-      class="block w-full h-8 rounded-md focus-visible:outline-none m-0 pl-6 pr-1 px-2 text-sm text-slate-800 border border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
+      class="block w-full h-8 px-2 pl-6 pr-1 m-0 text-sm border rounded-md focus-visible:outline-none text-slate-800 border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
       @input="handleInput"
     />
     <div class="absolute inset-y-0 right-0 flex h-8 p-1">
       <kbd
-        class="inline-flex items-center rounded border border-slate-200 px-1 font-sans text-xxs text-slate-400"
+        class="inline-flex items-center px-1 font-sans border rounded border-slate-200 text-xxs text-slate-400"
       >
-        ⌘K
+        {{ '⌘K' }}
       </kbd>
     </div>
   </div>