bfg-common 1.4.816 → 1.4.818

package/assets/localization/local_be.json

@@ -1282,6 +1282,7 @@
     "schedulingAffinityHelpDescription2": "Выкарыстоўвайце '-' для дыяпазонаў і ',' для падзелу значэнняў. ",
     "schedulingAffinityHelpDescription3": "Ачысціце радок, каб выдаліць налады блізкасці.",
     "screenshotQualityMayVary": "Якасць скрыншота можа адрознівацца ў залежнасці ад зместу!",
+    "imageQualityMayVary": "Якасць выявы можа мяняцца ў залежнасці ад зместу!",
     "scsi": "SCSI",
     "search": "Пошук",
     "searchDomains": "Пошукавыя дамены",
@@ -2310,7 +2311,9 @@
     "emailAddressOptional": "Адрас электроннай пошты (неабавязкова)",
     "permissionDeleteMsg": "Вы ўпэўненыя, што хочаце выдаліць дазвол для \"{subject}\"?",
     "editPermission": "Дазвол на рэдагаванне",
-    "userGroupNameIsInvalid": "Няправільнае імя карыстальніка ці групы!"
+    "userGroupNameIsInvalid": "Няправільнае імя карыстальніка ці групы!",
+    "submit": "Падпарадкоўвацца",
+    "up": "Наверсе"
   },
   "auth": {
     "welcomeTo": "Сардэчна запрашаем у",
@@ -2937,5 +2940,31 @@
     "annotateScreenshot": "Анатаваць скрыншот",
     "annotateImage": "Анатаваць малюнак",
     "selectType": "Выберыце Тып"
+  },
+  "vsphereNa": {
+    "vCenterHA": "vCenter ha",
+    "setUpvSphereNa": "Наладзіць vsphere ha",
+    "setUpvSphereNaDesc": "Каб забяспечыць максімальную абарону, пастаўце вузлы на асобныя хасты і сходы дадзеных. ",
+    "spherePackageFile": "Файл пакета сферы",
+    "selectSpherePackageFile": "Выберыце файл пакета сферы",
+    "numberOfNodes": "Колькасць вузлоў:",
+    "selectHost": "Выберыце хост",
+    "setAsLeader": "Усталяваны ў якасці лідэра",
+    "standalone": "Паласны",
+    "clusterNodes": "Кластарныя вузлы",
+    "leaderRoleConfirmation": "Пацверджанне ролі лідэра",
+    "leaderRoleConfirmationDesc": "Вы ўпэўнены, што хочаце ўсталяваць вузел \"{node}\" у якасці лідэра? ",
+    "standaloneConfirmation": "Аўтаномнае пацверджанне",
+    "standaloneConfirmationDesc": "Усе дадзеныя сферы на вузле \"{node}\" будуць канчаткова выдалены. ",
+    "proceed": "Працягваць",
+    "removeConfirmation": "Зніміце пацверджанне",
+    "removeConfirmationDesc": "вы ўпэўненыя, што хочаце выдаліць вузел \"{node}\" з кластара? адзначце \"{node}\" у полі ніжэй для пацверджання",
+    "nodeIPAddress": "IP -адрас вузла",
+    "nodeIPAddressInvalidText": "Няправільнае пацверджанне. Калі ласка, увядзіце \" {node}\", каб працягнуць.",
+    "addNode": "Дадаць вузел",
+    "hostHelp": "Хост дапамогі",
+    "hostHelpTooltipContent": "Выберыце мэтавы вылічаны рэсурс для гэтай аперацыі. ",
+    "selectValidHostComputeResource": "Выберыце сапраўдны хост у якасці вылічальнага рэсурсу",
+    "syncData": "Дадзеныя сінхранізацыі"
   }
 }

package/assets/localization/local_en.json

@@ -1281,6 +1281,7 @@
     "schedulingAffinityHelpDescription2": "Use '-' for ranges and ',' to separate values. For example,  \"0, 2, 4-7\" would indicate processors 0, 2, 4, 5, 6 and 7.",
     "schedulingAffinityHelpDescription3": "Clear the string to remove affinity settings.",
     "screenshotQualityMayVary": "Screenshot quality may vary based on the content!",
+    "imageQualityMayVary": "Image quality may vary based on the content!",
     "scsi": "SCSI",
     "search": "Search",
     "searchDomains": "Search domains",
@@ -2314,7 +2315,9 @@
     "emailAddressOptional": "Email Address (Optional)",
     "permissionDeleteMsg": "Are you sure you want to remove the permission for \"{subject}\"?",
     "editPermission": "Edit Permission",
-    "userGroupNameIsInvalid": "User or group name is invalid!"
+    "userGroupNameIsInvalid": "User or group name is invalid!",
+    "submit": "Submit",
+    "up": "Up"
   },
   "auth": {
     "welcomeTo": "Welcome to",
@@ -2941,5 +2944,31 @@
     "annotateScreenshot": "Annotate Screenshot",
     "annotateImage": "Annotate Image",
     "selectType": "Select Type"
+  },
+  "vsphereNa": {
+    "vCenterHA": "vCenter HA",
+    "setUpvSphereNa": "Set Up vSphere HA",
+    "setUpvSphereNaDesc": "To ensure maximum protection, place the nodes on separate hosts and datastores. If they are placed within the same compute cluster with DRS and/or SDRS enabled in automatic mode, anti-affinity rules will be automatically applied to keep them separate. For optimal performance, maintain network latency between the nodes at 10 ms or less.",
+    "spherePackageFile": "Sphere Package File",
+    "selectSpherePackageFile": "Select Sphere package file",
+    "numberOfNodes": "Number of Nodes:",
+    "selectHost": "Select Host",
+    "setAsLeader": "Set as Leader",
+    "standalone": "Standalone",
+    "clusterNodes": "Cluster Nodes",
+    "leaderRoleConfirmation": "Leader Role Confirmation",
+    "leaderRoleConfirmationDesc": "Are you sure you want to set the node “{node}” as a leader? This action will assign leadership responsibilities to this node, which may impact current setup.",
+    "standaloneConfirmation": "Standalone Confirmation",
+    "standaloneConfirmationDesc": "All Sphere data on the node “{node}” will be permanently deleted. The node will restart and operate independently from the cluster. Are you sure you want to proceed?",
+    "proceed": "Proceed",
+    "removeConfirmation": "Remove Confirmation",
+    "removeConfirmationDesc": "Are you sure you want to remove the node “{node}” from cluster? To confirm, type “{node}” in the field below.",
+    "nodeIPAddress": "Node IP Address",
+    "nodeIPAddressInvalidText": "Incorrect confirmation. Please type “{node}” to proceed.",
+    "addNode": "Add Node",
+    "hostHelp": "Host Help",
+    "hostHelpTooltipContent": "Select the target compute resource for this operation. Each node must have a unique host.",
+    "selectValidHostComputeResource": "Select a valid host as the compute resource",
+    "syncData": "Sync Data"
   }
 }

package/assets/localization/local_hy.json

@@ -1281,6 +1281,7 @@
     "schedulingAffinityHelpDescription2": "Օգտագործեք ' - 'տիրույթների համար և', ' արժեքները բաժանելու համար: Օրինակ, \"0, 2, 4-7\" - ը կնշանակեր 0, 2, 4, 5, 6 և 7 պրոցեսորներ:",
     "schedulingAffinityHelpDescription3": "Մաքրել գիծը՝ կապակցման կարգավորումները հեռացնելու համար:",
     "screenshotQualityMayVary": "Սքրինշոթի որակը կարող է տարբերվել՝ կախված բովանդակությունից:",
+    "imageQualityMayVary": "Պատկերի որակը կարող է տարբեր լինել բովանդակության հիման վրա:",
     "scsi": "SCSI",
     "search": "Որոնում",
     "searchDomains": "Որոնման տիրույթներ",
@@ -2314,7 +2315,9 @@
     "emailAddressOptional": "Էլ.փոստի հասցե (ըստ ցանկության)",
     "permissionDeleteMsg": "Համոզվա՞ծ եք, որ ցանկանում եք հեռացնել թույլտվությունը \"{subject}\"-ի համար:",
     "editPermission": "Խմբագրել թույլտվությունը",
-    "userGroupNameIsInvalid": "Սխալ օգտվողի անուն կամ խումբ"
+    "userGroupNameIsInvalid": "Սխալ օգտվողի անուն կամ խումբ",
+    "submit": "Ներկայացնել",
+    "up": "Վեր"
   },
   "auth": {
     "welcomeTo": "Բարի գալուստ",
@@ -2941,5 +2944,31 @@
     "annotateScreenshot": "Նշել սքրինշոթը",
     "annotateImage": "Նշել պատկերը",
     "selectType": "Ընտրեք տեսակը"
+  },
+  "vsphereNa": {
+    "vCenterHA": "vCenter հա",
+    "setUpvSphereNa": "Ստեղծեք vsphere հա",
+    "setUpvSphereNaDesc": "Առավելագույն պաշտպանություն ապահովելու համար հանգույցները տեղադրեք առանձին տանտերերի եւ տվյալների շտեմարանների վրա: ",
+    "spherePackageFile": "Ոլորտի փաթեթի ֆայլ",
+    "selectSpherePackageFile": "Ընտրեք ոլորտի փաթեթի ֆայլը",
+    "numberOfNodes": "Հանգույցների քանակը.",
+    "selectHost": "Ընտրեք հյուրընկալողը",
+    "setAsLeader": "Սահմանել որպես առաջնորդ",
+    "standalone": "Ինքնաբերական",
+    "clusterNodes": "Կլաստերի հանգույցներ",
+    "leaderRoleConfirmation": "Առաջնորդի դերի հաստատում",
+    "leaderRoleConfirmationDesc": "Համոզված եք, որ ցանկանում եք «{node}» հանգույցը դնել որպես առաջնորդ: ",
+    "standaloneConfirmation": "Անկախ հաստատում",
+    "standaloneConfirmationDesc": "«{node}» հանգույցի բոլոր ոլորտային տվյալները մշտապես կջնջվեն: ",
+    "proceed": "Վարել",
+    "removeConfirmation": "Հեռացրեք հաստատումը",
+    "removeConfirmationDesc": "համոզված եք, որ ցանկանում եք հեռացնել , «{node}» հանգույցը կլաստերից: Հաստատելու համար ներքևի դաշտում մուտքագրեք «{node}»:",
+    "nodeIPAddress": "NODE IP հասցե",
+    "nodeIPAddressInvalidText": "Սխալ հաստատում: Շարունակելու համար մուտքագրեք \"{node}\":",
+    "addNode": "Ավելացնել հանգույց",
+    "hostHelp": "Հյուրընկալող օգնություն",
+    "hostHelpTooltipContent": "Ընտրեք թիրախային հաշվարկային ռեսուրսը այս գործողության համար: ",
+    "selectValidHostComputeResource": "Ընտրեք վավեր հյուրընկալող որպես հաշվարկային ռեսուրս",
+    "syncData": "Համաժամացման տվյալներ"
   }
 }

package/assets/localization/local_kk.json

@@ -1281,6 +1281,7 @@
     "schedulingAffinityHelpDescription2": "Ауқымдар үшін '-' және мәндерді бөлу үшін ',' пайдаланыңыз. ",
     "schedulingAffinityHelpDescription3": "Сәйкестік параметрлерін жою үшін жолды тазалаңыз.",
     "screenshotQualityMayVary": "Скриншоттың сапасы мазмұнға байланысты өзгеруі мүмкін!",
+    "imageQualityMayVary": "Мазмұнға байланысты кескін сапасы әр түрлі болуы мүмкін!",
     "scsi": "SCSI",
     "search": "Іздеу",
     "searchDomains": "Іздеу домендері",
@@ -2313,7 +2314,9 @@
     "emailAddressOptional": "Электрондық пошта мекенжайы (міндетті емес)",
     "permissionDeleteMsg": "\"{subject}\" рұқсатын алып тастағыңыз келетініне сенімдісіз бе?",
     "editPermission": "Рұқсатты Өңдеу",
-    "userGroupNameIsInvalid": "Пайдаланушы немесе топ атауы жарамсыз!"
+    "userGroupNameIsInvalid": "Пайдаланушы немесе топ атауы жарамсыз!",
+    "submit": "Бағыну",
+    "up": "Бойымен"
   },
   "auth": {
     "welcomeTo": "Қош келдіңіз",
@@ -2940,5 +2943,31 @@
     "annotateScreenshot": "Скриншотқа түсініктеме жазу",
     "annotateImage": "Суретке түсініктеме жазу",
     "selectType": "Түрді таңдаңыз"
+  },
+  "vsphereNa": {
+    "vCenterHA": "vCenter ha",
+    "setUpvSphereNa": "Vsphere ha",
+    "setUpvSphereNaDesc": "Максималды қорғауды қамтамасыз ету үшін түйіндерді бөлек хосттар мен деректер базаларына салыңыз. ",
+    "spherePackageFile": "Сфера пакетіне арналған файл",
+    "selectSpherePackageFile": "Сфера пакетін таңдаңыз",
+    "numberOfNodes": "Түйіндердің саны:",
+    "selectHost": "Хостты таңдаңыз",
+    "setAsLeader": "Көшбасшы ретінде орнатыңыз",
+    "standalone": "Оқшаулағы",
+    "clusterNodes": "Кластерлік түйіндер",
+    "leaderRoleConfirmation": "Көшбасшы рөлді растау",
+    "leaderRoleConfirmationDesc": "«{node}» түйінін көшбасшы ретінде орнатқыңыз келе ме? ",
+    "standaloneConfirmation": "Жеке растау",
+    "standaloneConfirmationDesc": "«{node}» түйініндегі барлық сфера деректері біржола жойылады. ",
+    "proceed": "Жалғастыру",
+    "removeConfirmation": "Растауды жойыңыз",
+    "removeConfirmationDesc": "«{node}» түйінін кластерден шығарғыңыз келе ме? ",
+    "nodeIPAddress": "IP мекенжайы",
+    "nodeIPAddressInvalidText": "Дұрыс емес растау. ",
+    "addNode": "Түйінді қосыңыз",
+    "hostHelp": "Хосттық көмек",
+    "hostHelpTooltipContent": "Осы жұмыс үшін мақсатты есептеу қорын таңдаңыз. ",
+    "selectValidHostComputeResource": "Жарамды хостты есептік ресурс ретінде таңдаңыз",
+    "syncData": "Деректерді синхрондау"
   }
 }

package/assets/localization/local_ru.json

@@ -1283,6 +1283,7 @@
     "schedulingAffinityHelpDescription2": "Используйте '-' для диапазонов и ',' для разделения значений. Например, \"0, 2, 4-7\" будет обозначать процессоры 0, 2, 4, 5, 6 и 7.",
     "schedulingAffinityHelpDescription3": "Очистите строку, чтобы удалить настройки сходства.",
     "screenshotQualityMayVary": "Качество скриншота может варьироваться в зависимости от контента!",
+    "imageQualityMayVary": "Качество изображения может варьироваться в зависимости от контента!",
     "scsi": "SCSI",
     "search": "Поиск",
     "searchDomains": "Поисковые домены",
@@ -2315,7 +2316,9 @@
     "emailAddressOptional": "Адрес электронной почты (необязательно)",
     "permissionDeleteMsg": "Вы уверены, что хотите удалить разрешение для \"{subject}\"?",
     "editPermission": "Редактирование разрешения",
-    "userGroupNameIsInvalid": "Неверное имя пользователя или группы!"
+    "userGroupNameIsInvalid": "Неверное имя пользователя или группы!",
+    "submit": "Представлять на рассмотрение",
+    "up": "Вверх"
   },
   "auth": {
     "welcomeTo": "Добро пожаловать в",
@@ -2942,5 +2945,31 @@
     "annotateScreenshot": "Аннотировать снимок экрана",
     "annotateImage": "Аннотировать изображение",
     "selectType": "Выберите тип"
+  },
+  "vsphereNa": {
+    "vCenterHA": "vCenter ха",
+    "setUpvSphereNa": "Установите vsphere ha",
+    "setUpvSphereNaDesc": "Чтобы обеспечить максимальную защиту, поместите узлы на отдельные хосты и данные данных. ",
+    "spherePackageFile": "Файл пакета сферы",
+    "selectSpherePackageFile": "Выберите файл пакета сферов",
+    "numberOfNodes": "Количество узлов:",
+    "selectHost": "Выберите хост",
+    "setAsLeader": "Установить как лидер",
+    "standalone": "Автономный",
+    "clusterNodes": "Кластерные узлы",
+    "leaderRoleConfirmation": "Подтверждение роли лидера",
+    "leaderRoleConfirmationDesc": "Вы уверены, что хотите установить узел «{node}» в качестве лидера? ",
+    "standaloneConfirmation": "Автономное подтверждение",
+    "standaloneConfirmationDesc": "Все данные сферы на узле «{node}» будут навсегда удалены. ",
+    "proceed": "Продолжить",
+    "removeConfirmation": "Удалить подтверждение",
+    "removeConfirmationDesc": "Вы уверены, что хотите удалить узел “{node}” из кластера? Для подтверждения введите “{node}” в поле ниже.",
+    "nodeIPAddress": "IP -адрес узла",
+    "nodeIPAddressInvalidText": "Неверное подтверждение. Пожалуйста, введите “{node}”, чтобы продолжить.",
+    "addNode": "Добавить узел",
+    "hostHelp": "Хозяева",
+    "hostHelpTooltipContent": "Выберите целевой вычислительный ресурс для этой операции. ",
+    "selectValidHostComputeResource": "Выберите действительный хост в качестве ресурса вычисления",
+    "syncData": "Синхронизированные данные"
   }
 }

package/assets/localization/local_zh.json

@@ -1281,6 +1281,7 @@
     "schedulingAffinityHelpDescription2": "使用“-”表示范围，使用“,”分隔值。",
     "schedulingAffinityHelpDescription3": "清除该行以删除关联设置。",
     "screenshotQualityMayVary": "屏幕截圖質量可能因內容而異！",
+    "imageQualityMayVary": "图像质量可能会因内容而异！",
     "scsi": "SCSI接口",
     "search": "搜索",
     "searchDomains": "搜索域名",
@@ -2312,7 +2313,9 @@
     "emailAddressOptional": "电子邮件地址（可选）",
     "permissionDeleteMsg": "您确定要删除\"{subject}\"的权限吗？",
     "editPermission": "编辑权限",
-    "userGroupNameIsInvalid": "用户或组名无效!"
+    "userGroupNameIsInvalid": "用户或组名无效!",
+    "submit": "提交",
+    "up": "向上"
   },
   "auth": {
     "welcomeTo": "欢迎来到",
@@ -2939,5 +2942,31 @@
     "annotateScreenshot": "注释屏幕截图",
     "annotateImage": "注释图像",
     "selectType": "选择类型"
+  },
+  "vsphereNa": {
+    "vCenterHA": "vcenter ha",
+    "setUpvSphereNa": "设置vsphere ha",
+    "setUpvSphereNaDesc": "为了确保最大程度的保护，请将节点放在单独的主机和数据存储上。",
+    "spherePackageFile": "Sphere软件包文件",
+    "selectSpherePackageFile": "选择球形包装文件",
+    "numberOfNodes": "节点数：",
+    "selectHost": "选择主机",
+    "setAsLeader": "设置为领导者",
+    "standalone": "独立",
+    "clusterNodes": "群集节点",
+    "leaderRoleConfirmation": "领导角色确认",
+    "leaderRoleConfirmationDesc": "您确定要将节点“ {node}”设置为领导者？",
+    "standaloneConfirmation": "独立确认",
+    "standaloneConfirmationDesc": "节点“ {node}”上的所有领域数据将被永久删除。",
+    "proceed": "继续",
+    "removeConfirmation": "删除确认",
+    "removeConfirmationDesc": "您确定要从群集中删除节点“ {node}”？",
+    "nodeIPAddress": "节点IP地址",
+    "nodeIPAddressInvalidText": "不正确的确认。 请输入\"{node}\"继续。",
+    "addNode": "添加节点",
+    "hostHelp": "主持人帮助",
+    "hostHelpTooltipContent": "为此操作选择目标计算资源。",
+    "selectValidHostComputeResource": "选择有效主机作为计算资源",
+    "syncData": "同步数据"
   }
 }

package/components/atoms/autocomplete/Autocomplete.vue

@@ -1,298 +1,300 @@
-<template>
-  <div class="autocomplete" @click.stop>
-    <div class="content-search">
-      <div v-show="props.loading" class="loader">
-        <atoms-loader-pre-loader
-          id="loader"
-          :test-id="`${props.testId}-pre-loader`"
-          class="content-area__loading"
-          :show="true"
-        />
-      </div>
-      <div class="search-icon">
-        <atoms-the-icon
-          fill="#666"
-          stroke-width="10"
-          class="alert-icon search-icon"
-          name="search"
-        />
-      </div>
-
-      <div class="clr-error">
-        <div class="form-group__input">
-          <input
-            :id="`${props.testId}-search-input`"
-            v-model.trim="search"
-            :data-id="`${props.testId}-search-input`"
-            type="text"
-            class="search-input"
-            :class="fieldErrorText && 'clr-input'"
-            autocomplete="off"
-            :placeholder="props.placeholder"
-            @blur="onInitValidation"
-            @input="onSearch"
-          />
-          <div v-show="fieldErrorText" class="form-validate">
-            <atoms-the-icon class="is-error tooltip-trigger" name="info" />
-          </div>
-        </div>
-        <div
-          v-show="fieldErrorText"
-          class="form-group__input-error clr-subtext"
-        >
-          {{ fieldErrorText }}
-        </div>
-      </div>
-    </div>
-    <div
-      v-show="isShow"
-      :class="['content-filtered', { active: items.length }]"
-    >
-      <ul class="dropdown-menu filtered-items">
-        <li
-          v-for="(item, key) in items"
-          :key="`${item}_${key}`"
-          :class="['item', { active: key === selectedTabIndex }]"
-          :data-id="item.testId"
-          @mouseenter="selectedTabIndex = key"
-          @click="onSelect(key)"
-        >
-          {{ item.firstText }}<b>{{ item.secondText }}</b
-          >{{ item.thirdText }}
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    placeholder: string
-    items: string[]
-    loading?: boolean
-    testId?: string
-    ms?: number
-    showValidation?: boolean
-  }>(),
-  {
-    testId: 'ui-autocomplete',
-    ms: 500,
-    loading: false,
-    showValidation: false,
-  }
-)
-const emits = defineEmits<{
-  (event: 'search', value: string): void
-  (event: 'select', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const search = ref<string>('')
-
-let timer: NodeJS.Timeout
-const onSearch = (): void => {
-  onInitValidation()
-  clearTimeout(timer)
-  timer = setTimeout(
-    (value) => {
-      emits('search', value)
-    },
-    props.ms,
-    search.value
-  )
-}
-const isInitFieldValidation = ref<boolean>(false)
-const onInitValidation = (): void => {
-  isInitFieldValidation.value = true
-}
-const fieldErrorText = computed<string>(() => {
-  if (!isInitFieldValidation.value) return ''
-
-  if (!search.value && props.showValidation)
-    return localization.value.common.fieldRequired
-})
-const items = computed<any[]>(() => {
-  return [...props.items].map((text) => {
-    const term = search.value.toLowerCase()
-    const texts = text.toLowerCase().split(term)
-    return {
-      firstText: texts[0],
-      secondText: term,
-      thirdText: texts[1],
-      testId: `${term}-filtered-item`,
-    }
-  })
-})
-
-const selectedTabIndex = ref<number>(0)
-const onSelect = (key: number): void => {
-  search.value = props.items[key]
-  emits('select', search.value)
-  isHide.value = true
-}
-
-const isHide = ref<boolean>(false)
-const isShow = computed<boolean>(
-  () => Boolean(items.value.length) && !isHide.value
-)
-
-const onKeyDown = (event: KeyboardEvent): void => {
-  switch (event.code) {
-    case 'ArrowUp':
-      prevTabItem()
-      break
-    case 'ArrowDown':
-      nextTabItem()
-      break
-    case 'Enter':
-      event.preventDefault()
-      onSelect(selectedTabIndex.value)
-      break
-    case 'Tab':
-      isHide.value = true
-      break
-  }
-}
-
-const nextTabItem = (): void => {
-  if (selectedTabIndex.value === items.value.length - 1)
-    selectedTabIndex.value = 0
-  else selectedTabIndex.value++
-}
-
-const prevTabItem = (): void => {
-  if (selectedTabIndex.value === 0)
-    selectedTabIndex.value = items.value.length - 1
-  else selectedTabIndex.value--
-}
-
-watch(
-  () => props.items,
-  (newValue) => {
-    if (newValue.length) {
-      isHide.value = false
-    }
-  }
-)
-window.addEventListener('keydown', onKeyDown, true)
-watch(isHide, (newValue) => {
-  if (!newValue) {
-    window.addEventListener('keydown', onKeyDown, true)
-  } else {
-    window.removeEventListener('keydown', onKeyDown, true)
-  }
-})
-watch(
-  () => props.showValidation,
-  (newValue: boolean) => {
-    isInitFieldValidation.value = newValue
-  },
-  { immediate: true }
-)
-</script>
-
-<style scoped lang="scss">
-.autocomplete {
-  max-width: 180px;
-  position: relative;
-
-  .content-search {
-    .loader {
-      position: absolute;
-      top: 3px;
-      left: -6px;
-      z-index: 1;
-      height: 16px;
-      width: 16px;
-
-      #loader {
-        height: 100%;
-        width: 100%;
-
-        :deep(.spinner-inverse) {
-          min-width: auto;
-          min-height: auto;
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-    .search-icon {
-      position: absolute;
-      width: 17px;
-      top: 2px;
-      bottom: 0;
-    }
-    .search-input {
-      background-color: white;
-      padding: 0 6px 0 20px;
-    }
-  }
-
-  .content-filtered {
-    position: absolute;
-    display: block;
-    overflow-y: visible;
-    height: auto;
-    visibility: visible;
-    will-change: transform;
-    top: 0;
-    left: 0;
-    transform: translate3d(0px, 25px, 0px);
-    width: 250px;
-    z-index: 1000;
-
-    &.active .filtered-items {
-      max-height: 164px;
-      visibility: visible;
-      position: absolute;
-      top: 100%;
-      left: 0;
-      min-width: 96px;
-      max-width: 288px;
-      border: 0.8px solid #ccc;
-      padding: 9.6px 0;
-      z-index: 1060;
-      overflow: auto;
-      width: 100%;
-      margin: 1px 0 0;
-
-      .item {
-        line-height: 20px;
-        padding: 5px 0 0 5px;
-        color: #333;
-        cursor: pointer;
-        outline: unset;
-
-        &.active,
-        &:focus,
-        &:hover {
-          background-color: #2b5480;
-          color: #fff;
-        }
-      }
-    }
-  }
-  .form-group {
-    &__input {
-      display: flex;
-      .form-validate {
-        svg {
-          width: 24px;
-          height: 24px;
-        }
-      }
-      input {
-        width: 100%;
-      }
-      &-error {
-        margin-top: 0;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="autocomplete" @click.stop>
+    <div class="content-search">
+      <div v-show="props.loading" class="loader">
+        <atoms-loader-pre-loader
+          id="loader"
+          :test-id="`${props.testId}-pre-loader`"
+          class="content-area__loading"
+          :show="true"
+        />
+      </div>
+      <div class="search-icon">
+        <atoms-the-icon
+          fill="#666"
+          stroke-width="10"
+          class="alert-icon search-icon"
+          name="search"
+        />
+      </div>
+
+      <div class="clr-error">
+        <div class="form-group__input">
+          <input
+            :id="`${props.testId}-search-input`"
+            v-model.trim="search"
+            :data-id="`${props.testId}-search-input`"
+            type="text"
+            class="search-input"
+            :class="fieldErrorText && 'clr-input'"
+            autocomplete="off"
+            :placeholder="props.placeholder"
+            @blur="onInitValidation"
+            @input="onSearch"
+          />
+          <div v-show="fieldErrorText" class="form-validate">
+            <atoms-the-icon class="is-error tooltip-trigger" name="info" />
+          </div>
+        </div>
+        <div
+          v-show="fieldErrorText"
+          class="form-group__input-error clr-subtext"
+        >
+          {{ fieldErrorText }}
+        </div>
+      </div>
+    </div>
+    <div
+      v-show="isShow"
+      :class="['content-filtered', { active: items.length }]"
+    >
+      <ul class="dropdown-menu filtered-items">
+        <li
+          v-for="(item, key) in items"
+          :key="`${item}_${key}`"
+          :class="['item', { active: key === selectedTabIndex }]"
+          :data-id="item.testId"
+          @mouseenter="selectedTabIndex = key"
+          @click="onSelect(key)"
+        >
+          {{ item.firstText }}<b>{{ item.secondText }}</b
+          >{{ item.thirdText }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    placeholder: string
+    items: string[]
+    loading?: boolean
+    testId?: string
+    ms?: number
+    showValidation?: boolean
+    errorText?: string
+  }>(),
+  {
+    testId: 'ui-autocomplete',
+    ms: 500,
+    loading: false,
+    showValidation: false,
+    errorText: '',
+  }
+)
+const emits = defineEmits<{
+  (event: 'search', value: string): void
+  (event: 'select', value: string): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const search = ref<string>('')
+
+let timer: NodeJS.Timeout
+const onSearch = (): void => {
+  onInitValidation()
+  clearTimeout(timer)
+  timer = setTimeout(
+    (value) => {
+      emits('search', value)
+    },
+    props.ms,
+    search.value
+  )
+}
+const isInitFieldValidation = ref<boolean>(false)
+const onInitValidation = (): void => {
+  isInitFieldValidation.value = true
+}
+const fieldErrorText = computed<string>(() => {
+  if (!isInitFieldValidation.value) return ''
+
+  if (!search.value) return localization.value.common.fieldRequired
+  else if (props.showValidation) return props.errorText
+})
+const items = computed<any[]>(() => {
+  return [...props.items].map((text) => {
+    const term = search.value.toLowerCase()
+    const texts = text.toLowerCase().split(term)
+    return {
+      firstText: texts[0],
+      secondText: term,
+      thirdText: texts[1],
+      testId: `${term}-filtered-item`,
+    }
+  })
+})
+
+const selectedTabIndex = ref<number>(0)
+const onSelect = (key: number): void => {
+  search.value = props.items[key]
+  emits('select', search.value)
+  isHide.value = true
+}
+
+const isHide = ref<boolean>(false)
+const isShow = computed<boolean>(
+  () => Boolean(items.value.length) && !isHide.value
+)
+
+const onKeyDown = (event: KeyboardEvent): void => {
+  switch (event.code) {
+    case 'ArrowUp':
+      prevTabItem()
+      break
+    case 'ArrowDown':
+      nextTabItem()
+      break
+    case 'Enter':
+      event.preventDefault()
+      onSelect(selectedTabIndex.value)
+      break
+    case 'Tab':
+      isHide.value = true
+      break
+  }
+}
+
+const nextTabItem = (): void => {
+  if (selectedTabIndex.value === items.value.length - 1)
+    selectedTabIndex.value = 0
+  else selectedTabIndex.value++
+}
+
+const prevTabItem = (): void => {
+  if (selectedTabIndex.value === 0)
+    selectedTabIndex.value = items.value.length - 1
+  else selectedTabIndex.value--
+}
+
+watch(
+  () => props.items,
+  (newValue) => {
+    if (newValue.length) {
+      isHide.value = false
+    }
+  }
+)
+window.addEventListener('keydown', onKeyDown, true)
+watch(isHide, (newValue) => {
+  if (!newValue) {
+    window.addEventListener('keydown', onKeyDown, true)
+  } else {
+    window.removeEventListener('keydown', onKeyDown, true)
+  }
+})
+watch(
+  () => props.showValidation,
+  (newValue: boolean) => {
+    isInitFieldValidation.value = newValue
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.autocomplete {
+  max-width: 180px;
+  position: relative;
+
+  .content-search {
+    .loader {
+      position: absolute;
+      top: 3px;
+      left: -6px;
+      z-index: 1;
+      height: 16px;
+      width: 16px;
+
+      #loader {
+        height: 100%;
+        width: 100%;
+
+        :deep(.spinner-inverse) {
+          min-width: auto;
+          min-height: auto;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .search-icon {
+      position: absolute;
+      width: 17px;
+      top: 2px;
+      bottom: 0;
+    }
+    .search-input {
+      background-color: white;
+      padding: 0 6px 0 20px;
+    }
+  }
+
+  .content-filtered {
+    position: absolute;
+    display: block;
+    overflow-y: visible;
+    height: auto;
+    visibility: visible;
+    will-change: transform;
+    top: 0;
+    left: 0;
+    transform: translate3d(0px, 25px, 0px);
+    width: 250px;
+    z-index: 1000;
+
+    &.active .filtered-items {
+      max-height: 164px;
+      visibility: visible;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      min-width: 96px;
+      max-width: 288px;
+      border: 0.8px solid #ccc;
+      padding: 9.6px 0;
+      z-index: 1060;
+      overflow: auto;
+      width: 100%;
+      margin: 1px 0 0;
+
+      .item {
+        line-height: 20px;
+        padding: 5px 0 0 5px;
+        color: #333;
+        cursor: pointer;
+        outline: unset;
+
+        &.active,
+        &:focus,
+        &:hover {
+          background-color: #2b5480;
+          color: #fff;
+        }
+      }
+    }
+  }
+  .form-group {
+    &__input {
+      display: flex;
+      .form-validate {
+        svg {
+          width: 24px;
+          height: 24px;
+        }
+      }
+      input {
+        width: 100%;
+      }
+      &-error {
+        margin-top: 0;
+      }
+    }
+  }
+}
+</style>

package/components/common/accordion/Recursion.vue

@@ -16,7 +16,10 @@
             v-if="props.accordion.iconClassName"
             :class="['icon', props.accordion.iconClassName]"
           ></div>
-          <div :class="['text text-ellipsis', headingClass]">
+          <div
+            :class="['text text-ellipsis', headingClass]"
+            :data-id="`${accordionLocal.testId}`"
+          >
             {{ props.accordion.name }}
           </div>
         </div>

package/lib/models/interfaces.ts

@@ -39,6 +39,7 @@ export interface UI_I_Localization {
   remoteConsole: UI_I_ArbitraryObject<string>
   vmWizard: UI_I_ArbitraryObject<string>
   feedback: UI_I_ArbitraryObject<string>
+  vsphereNa: UI_I_ArbitraryObject<string>
 }
 export interface UI_I_SendTaskParams {
   method: string

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.816",
+  "version": "1.4.818",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",