bfg-common 1.5.331 → 1.5.333

package/assets/localization/local_be.json

@@ -3227,12 +3227,17 @@
     "enableUserDesc": "Ці вы хочаце ўключыць карыстальніка \"{0}\"?",
     "noUsersSelectedYet": "Яшчэ не абрана ніводнага карыстальніка.",
     "thisGroupHasNoDescriptionYet": "У гэтай групы пакуль няма апісання.",
-    "members": "Удзельнікі"
+    "members": "Удзельнікі",
+    "noNewUsersSelected": "Новыя карыстальнікі не выбраны."
   },
   "vmt": {
     "newTemplate": "New Template",
     "confirmConvert": "Пацвердзіць пераўтварэнне",
-    "convertToTemplateConfirm": "Пераўтварыць віртуальную машыну «{0}» у шаблон?"
+    "convertToTemplateConfirm": "Пераўтварыць віртуальную машыну «{0}» у шаблон?",
+    "wizardSubTitle1": "Укажыце ўнікальную назву для шаблона.",
+    "wizardSubTitle2": "Абярыце сховішча для канфігурацыйных і дыскавых файлаў.",
+    "wizardSubTitle3": "Абярыце гасцявую АС, якая будзе ўсталявана ў шаблон, і тып машыны, які будзе выкарыстоўвацца для яго стварэння.",
+    "wizardSubTitleLast": "Праверце падрабязнасці перад стварэннем шаблона."
   },
   "passwordRule": {
     "lengthCharacter": "Ад 8 да 20 сімвалаў",

package/assets/localization/local_en.json

@@ -371,8 +371,8 @@
     "deleteDomainFromIdentitySources": "Do you want to remove the domain {0} from the list of identity sources?",
     "deleteFilesFromDatastore": "Delete files from datastore",
     "deleteFromDisk": "Delete from Disk",
-    "deleteGroupDesc": "Are you sure you want to delete {0}? This action is permanent and cannot be recovered.",
-    "deleteGroupMemberDesc": "Are you sure you want to remove user {user} from {group}? This action is permanent and cannot be recovered.",
+    "deleteGroupDesc": "Are you sure you want to delete the group {0}? This action is permanent and cannot be recovered.",
+    "deleteGroupMemberDesc": "Are you sure you want to remove user {user} from the  {group} group? This action is permanent and cannot be recovered.",
     "deleteHostText": "Deleting a Host {0} also removes all the host's virtual machines from the inventory.",
     "deletePermission": "Delete Permission",
     "deletePermissionDesc": "Do you want to delete the selected permission?",
@@ -1038,7 +1038,7 @@
     "nicType": "NIC {0} type",
     "no": "No",
     "noAssociatedPortGroups": "No associated port groups",
-    "noCertificatesAdded": "No Certificates Added.",
+    "noCertificatesAdded": "No certificates added.",
     "noConfigurableDeviceIsSelected": "No configurable device is selected.",
     "noDataProvided": "No Data Provided",
     "noDhcpEnabledVmKernelNetAdapters": "There are no DHCP-enabled VMkernel network adapters.",
@@ -3231,12 +3231,17 @@
     "enableUserDesc": "Are you sure you want to enable the user “{0}”?",
     "noUsersSelectedYet": "No users selected yet.",
     "thisGroupHasNoDescriptionYet": "This group has no description yet.",
-    "members": "Members"
+    "members": "Members",
+    "noNewUsersSelected": "No new users selected."
   },
   "vmt": {
     "newTemplate": "New Template",
     "confirmConvert": "Confirm Convert",
-    "convertToTemplateConfirm": "Convert the virtual machine \"{0}\" to a template?"
+    "convertToTemplateConfirm": "Convert the virtual machine \"{0}\" to a template?",
+    "wizardSubTitle1": "Specify a unique name for the template.",
+    "wizardSubTitle2": "Select the storage for the configuration and disk files.",
+    "wizardSubTitle3": "Choose the guest OS that will be installed on the template and the machine type that will be used to create the template.",
+    "wizardSubTitleLast": "Review the details before the template is created."
   },
   "passwordRule": {
     "lengthCharacter": "8 - 20 characters",

package/assets/localization/local_hy.json

@@ -3231,12 +3231,17 @@
     "enableUserDesc": "Դուք Suo- ն եք ցանկանում, որ օգտագործողը «{0}»:",
     "noUsersSelectedYet": "Օգտագործող դեռ չի ընտրվել։",
     "thisGroupHasNoDescriptionYet": "Այս խմբի համար դեռ նկարագրություն չկա։",
-    "members": "Անդամներ"
+    "members": "Անդամներ",
+    "noNewUsersSelected": "Նոր օգտատերեր չեն ընտրվել։"
   },
   "vmt": {
     "newTemplate": "New Template",
     "confirmConvert": "Հաստատել փոխարկումը",
-    "convertToTemplateConfirm": "Վերափոխե՞լ «{0}» վիրտուալ մեքենան ձևանմուշի:"
+    "convertToTemplateConfirm": "Վերափոխե՞լ «{0}» վիրտուալ մեքենան ձևանմուշի:",
+    "wizardSubTitle1": "Նշեք ձևանմուշի համար եզակի անուն։",
+    "wizardSubTitle2": "Ընտրեք պահեստը կազմաձևման և սկավառակի ֆայլերի համար։",
+    "wizardSubTitle3": "Ընտրեք հյուր ՕՀ-ը, որը կտեղադրվի ձևանմուշում, և մեքենայի տեսակը, որը կօգտագործվի ձևանմուշը ստեղծելու համար։",
+    "wizardSubTitleLast": "Ստուգեք մանրամասները նախքան ձևանմուշը ստեղծելը։"
   },
   "passwordRule": {
     "lengthCharacter": "8 - 20 նիշ",

package/assets/localization/local_kk.json

@@ -3230,12 +3230,17 @@
     "enableUserDesc": "Сіз суосыз ба, сіз «{0}» пайдаланушысын қосқыңыз келе ме?",
     "noUsersSelectedYet": "Әзірге ешбір пайдаланушы таңдалған жоқ.",
     "thisGroupHasNoDescriptionYet": "Бұл топта әлі сипаттама жоқ.",
-    "members": "Қатысушылар"
+    "members": "Қатысушылар",
+    "noNewUsersSelected": "Жаңа пайдаланушылар таңдалмаған."
   },
   "vmt": {
     "newTemplate": "New Template",
     "confirmConvert": "Аударуды растау",
-    "convertToTemplateConfirm": "«{0}» виртуалды машинасын үлгіге айналдыруды қалайсыз ба?"
+    "convertToTemplateConfirm": "«{0}» виртуалды машинасын үлгіге айналдыруды қалайсыз ба?",
+    "wizardSubTitle1": "Үлгіге бірегей атау көрсетіңіз.",
+    "wizardSubTitle2": "Конфигурация және диск файлдары үшін сақтау орнын таңдаңыз.",
+    "wizardSubTitle3": "Үлгіге орнатылады деп жоспарланған қонақ ОЖ мен оны жасау үшін қолданылатын машина түрін таңдаңыз.",
+    "wizardSubTitleLast": "Үлгі жасалмас бұрын егжей-тегжейлерін қарап шығыңыз."
   },
   "passwordRule": {
     "lengthCharacter": "8 - 20 таңба",

package/assets/localization/local_ru.json

@@ -371,8 +371,8 @@
     "deleteDomainFromIdentitySources": "Вы хотите удалить домен {0} из списка источников идентификации?",
     "deleteFilesFromDatastore": "Удалить файлы из хранилища данных",
     "deleteFromDisk": "Удалить с диска",
-    "deleteGroupDesc": "Вы уверены, что хотите удалить {0}? Это действие является постоянным и не может быть восстановлено.",
-    "deleteGroupMemberDesc": "Вы уверены, что хотите удалить пользователя {user} из {group}? Это действие является постоянным и не может быть восстановлено.",
+    "deleteGroupDesc": "Вы уверены, что хотите удалить группу {0}? Это действие необратимо и не подлежит восстановлению.",
+    "deleteGroupMemberDesc": "Вы уверены, что хотите удалить пользователя {user} из группы {group}? Это действие необратимо и не подлежит восстановлению.",
     "deleteHostText": "При удалении хоста {0} из инвентаря также удаляются все виртуальные машины хоста.",
     "deletePermission": "Удалить разрешение",
     "deletePermissionDesc": "Вы хотите удалить выбранное разрешение?",
@@ -3043,7 +3043,7 @@
     "metricsDescription": "Включите метрики, которые вы хотите отправить в Zabbix.",
     "autostartSettingsDescription": "Включите эту функцию, чтобы автоматически отправлять метрики в Zabbix.",
     "bindingSettingsDescription": "Включите эту функцию, чтобы автоматически привязывать выбранные шаблоны метрик к хосту в Zabbix.",
-    "deleteConfirmation": "Удалить подтверждение",
+    "deleteConfirmation": "Подтверждение удаления",
     "deleteDescription": "Вы уверены, что хотите удалить хост «{0}» с сервера Zabbix «{1}»?",
     "nOfNActive": "{0} из {1} активен",
     "nOfN": "{0} из {1}",
@@ -3230,12 +3230,17 @@
     "enableUserDesc": "Вы уверены, что хотите включить пользователя “{0}”?",
     "noUsersSelectedYet": "Пользователи еще не выбраны.",
     "thisGroupHasNoDescriptionYet": "У этой группы пока нет описания.",
-    "members": "Участники"
+    "members": "Участники",
+    "noNewUsersSelected": "Новые пользователи не выбраны."
   },
   "vmt": {
     "newTemplate": "New Template",
     "confirmConvert": "Подтвердите преобразование",
-    "convertToTemplateConfirm": "Преобразовать виртуальную машину «{0}» в шаблон?"
+    "convertToTemplateConfirm": "Преобразовать виртуальную машину «{0}» в шаблон?",
+    "wizardSubTitle1": "Укажите уникальное имя для шаблона.",
+    "wizardSubTitle2": "Выберите хранилище для конфигурационных и дисковых файлов.",
+    "wizardSubTitle3": "Выберите гостевую операционную систему, которая будет установлена в шаблон, и тип машины, который будет использоваться для его создания.",
+    "wizardSubTitleLast": "Проверьте данные перед созданием шаблона."
   },
   "passwordRule": {
     "lengthCharacter": "От 8 до 20 символов",

package/assets/localization/local_zh.json

@@ -3228,12 +3228,17 @@
     "enableUserDesc": "您是否要启用用户“ {0}”？",
     "noUsersSelectedYet": "尚未选择任何用户。",
     "thisGroupHasNoDescriptionYet": "该组尚无描述。",
-    "members": "成员"
+    "members": "成员",
+    "noNewUsersSelected": "未选择新用户。"
   },
   "vmt": {
     "newTemplate": "New Template",
     "confirmConvert": "确认转换",
-    "convertToTemplateConfirm": "是否将虚拟机“{0}”转换为模板？"
+    "convertToTemplateConfirm": "是否将虚拟机“{0}”转换为模板？",
+    "wizardSubTitle1": "为模板指定一个唯一名称。",
+    "wizardSubTitle2": "请选择用于配置和磁盘文件的存储位置。",
+    "wizardSubTitle3": "选择将安装在模板上的客户操作系统，以及用于创建模板的计算机类型。",
+    "wizardSubTitleLast": "在创建模板之前请检查详细信息。"
   },
   "passwordRule": {
     "lengthCharacter": "8 到 20 个字符",

package/components/atoms/TheIcon3.vue

@@ -1,50 +1,50 @@
-<template>
-  <template v-if="props.name === 'zabbix'">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="80"
-      height="22"
-      viewBox="0 0 80 22"
-      fill="none"
-    >
-      <g clip-path="url(#clip0_2691_29714)">
-        <path d="M0 0.522461H80V21.477H0V0.522461Z" fill="#D40000" />
-        <path
-          d="M3.42089 3.71582H14.9889V5.2187L5.6782 16.625H15.2164V18.2836H3.19336V16.7807L12.504 5.37438H3.42089V3.71582ZM23.0402 5.65779L20.3378 12.9087H25.7526L23.0402 5.65779ZM21.9145 3.71582H24.1738L29.7862 18.2836H27.7145L26.3753 14.5473H19.735L18.3938 18.2836H16.2922L21.9145 3.71582ZM33.9176 11.326V16.663H37.113C38.1848 16.663 38.9791 16.4434 39.496 16.0043C40.013 15.5652 40.2704 14.8926 40.2704 13.9905C40.2704 13.0804 40.013 12.4078 39.496 11.9747C38.9791 11.5436 38.1848 11.326 37.113 11.326H33.9176ZM33.9176 5.33446V9.72535H36.8675C37.8415 9.72535 38.566 9.54373 39.043 9.18447C39.52 8.82322 39.7575 8.27237 39.7575 7.5319C39.7575 6.79743 39.518 6.24657 39.043 5.88332C38.566 5.52008 37.8415 5.33646 36.8675 5.33646H33.9176V5.33446ZM31.9257 3.71582H37.0152C38.534 3.71582 39.7056 4.02717 40.5259 4.65188C41.3482 5.27658 41.7573 6.16474 41.7573 7.31635C41.7573 8.2065 41.5478 8.91703 41.1266 9.44393C40.7055 9.97084 40.0868 10.3002 39.2725 10.4299C40.2525 10.6375 41.0129 11.0706 41.5558 11.7312C42.0986 12.3918 42.3701 13.2161 42.3701 14.2041C42.3701 15.5054 41.923 16.5093 41.0289 17.2198C40.1347 17.9283 38.8614 18.2836 37.2128 18.2836H31.9257V3.71582ZM47.5573 11.326V16.663H50.7547C51.8265 16.663 52.6208 16.4434 53.1357 16.0043C53.6527 15.5652 53.9101 14.8926 53.9101 13.9905C53.9101 13.0804 53.6527 12.4078 53.1357 11.9747C52.6188 11.5436 51.8245 11.326 50.7547 11.326H47.5573ZM47.5573 5.33446V9.72535H50.5072C51.4812 9.72535 52.2057 9.54373 52.6827 9.18447C53.1597 8.82322 53.3972 8.27237 53.3972 7.5319C53.3972 6.79743 53.1597 6.24657 52.6827 5.88332C52.2057 5.52008 51.4812 5.33646 50.5072 5.33646H47.5573V5.33446ZM45.5654 3.71582H50.6549C52.1737 3.71582 53.3453 4.02717 54.1656 4.65188C54.9879 5.27658 55.399 6.16474 55.399 7.31635C55.399 8.2065 55.1895 8.91703 54.7683 9.44393C54.3472 9.97084 53.7285 10.3002 52.9142 10.4299C53.8942 10.6375 54.6546 11.0706 55.1975 11.7312C55.7403 12.3918 56.0118 13.2161 56.0118 14.2041C56.0118 15.5054 55.5647 16.5093 54.6706 17.2198C53.7764 17.9283 52.503 18.2836 50.8545 18.2836H45.5654V3.71582ZM64.9732 3.71582H67.1646L70.6274 8.94697L74.1242 3.71582H76.2418L71.6833 10.5397L76.8086 18.2836H74.6172L70.5835 12.1882L66.51 18.2836H64.3924L69.5297 10.5955L64.9732 3.71582ZM59.2031 3.71582H61.195V18.2836H59.2031V3.71582Z"
-          fill="white"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_2691_29714">
-          <rect
-            width="80"
-            height="20.96"
-            fill="white"
-            transform="translate(0 0.519531)"
-          />
-        </clipPath>
-      </defs>
-    </svg>
-  </template>
-  <template v-else><span></span></template>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    name: string
-    type?: string
-    color?: string
-    width?: string
-    height?: string
-  }>(),
-  {
-    type: '',
-    color: 'currentColor',
-    width: '24',
-    height: '24',
-  }
-)
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <template v-if="props.name === 'zabbix'">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="80"
+      height="22"
+      viewBox="0 0 80 22"
+      fill="none"
+    >
+      <g clip-path="url(#clip0_2691_29714)">
+        <path d="M0 0.522461H80V21.477H0V0.522461Z" fill="#D40000" />
+        <path
+          d="M3.42089 3.71582H14.9889V5.2187L5.6782 16.625H15.2164V18.2836H3.19336V16.7807L12.504 5.37438H3.42089V3.71582ZM23.0402 5.65779L20.3378 12.9087H25.7526L23.0402 5.65779ZM21.9145 3.71582H24.1738L29.7862 18.2836H27.7145L26.3753 14.5473H19.735L18.3938 18.2836H16.2922L21.9145 3.71582ZM33.9176 11.326V16.663H37.113C38.1848 16.663 38.9791 16.4434 39.496 16.0043C40.013 15.5652 40.2704 14.8926 40.2704 13.9905C40.2704 13.0804 40.013 12.4078 39.496 11.9747C38.9791 11.5436 38.1848 11.326 37.113 11.326H33.9176ZM33.9176 5.33446V9.72535H36.8675C37.8415 9.72535 38.566 9.54373 39.043 9.18447C39.52 8.82322 39.7575 8.27237 39.7575 7.5319C39.7575 6.79743 39.518 6.24657 39.043 5.88332C38.566 5.52008 37.8415 5.33646 36.8675 5.33646H33.9176V5.33446ZM31.9257 3.71582H37.0152C38.534 3.71582 39.7056 4.02717 40.5259 4.65188C41.3482 5.27658 41.7573 6.16474 41.7573 7.31635C41.7573 8.2065 41.5478 8.91703 41.1266 9.44393C40.7055 9.97084 40.0868 10.3002 39.2725 10.4299C40.2525 10.6375 41.0129 11.0706 41.5558 11.7312C42.0986 12.3918 42.3701 13.2161 42.3701 14.2041C42.3701 15.5054 41.923 16.5093 41.0289 17.2198C40.1347 17.9283 38.8614 18.2836 37.2128 18.2836H31.9257V3.71582ZM47.5573 11.326V16.663H50.7547C51.8265 16.663 52.6208 16.4434 53.1357 16.0043C53.6527 15.5652 53.9101 14.8926 53.9101 13.9905C53.9101 13.0804 53.6527 12.4078 53.1357 11.9747C52.6188 11.5436 51.8245 11.326 50.7547 11.326H47.5573ZM47.5573 5.33446V9.72535H50.5072C51.4812 9.72535 52.2057 9.54373 52.6827 9.18447C53.1597 8.82322 53.3972 8.27237 53.3972 7.5319C53.3972 6.79743 53.1597 6.24657 52.6827 5.88332C52.2057 5.52008 51.4812 5.33646 50.5072 5.33646H47.5573V5.33446ZM45.5654 3.71582H50.6549C52.1737 3.71582 53.3453 4.02717 54.1656 4.65188C54.9879 5.27658 55.399 6.16474 55.399 7.31635C55.399 8.2065 55.1895 8.91703 54.7683 9.44393C54.3472 9.97084 53.7285 10.3002 52.9142 10.4299C53.8942 10.6375 54.6546 11.0706 55.1975 11.7312C55.7403 12.3918 56.0118 13.2161 56.0118 14.2041C56.0118 15.5054 55.5647 16.5093 54.6706 17.2198C53.7764 17.9283 52.503 18.2836 50.8545 18.2836H45.5654V3.71582ZM64.9732 3.71582H67.1646L70.6274 8.94697L74.1242 3.71582H76.2418L71.6833 10.5397L76.8086 18.2836H74.6172L70.5835 12.1882L66.51 18.2836H64.3924L69.5297 10.5955L64.9732 3.71582ZM59.2031 3.71582H61.195V18.2836H59.2031V3.71582Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2691_29714">
+          <rect
+            width="80"
+            height="20.96"
+            fill="white"
+            transform="translate(0 0.519531)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  </template>
+  <template v-else><span></span></template>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    name: string
+    type?: string
+    color?: string
+    width?: string
+    height?: string
+  }>(),
+  {
+    type: '',
+    color: 'currentColor',
+    width: '24',
+    height: '24',
+  }
+)
+</script>
+
+<style scoped lang="scss"></style>

package/components/atoms/collapse/CollapseNav.vue

@@ -1,170 +1,170 @@
-<template>
-  <div class="tabs-overflow bottom-right">
-    <button
-      :id="collapsedBtnId"
-      :class="[
-        'btn btn-link nav-link dropdown-toggle',
-        { active: collapsedBtnActive },
-      ]"
-      :data-id="`${props.testId}-toggle-button`"
-      @mouseenter="hover = true"
-      @mouseleave="hover = false"
-      @mousedown="showMenu"
-    >
-      <atoms-the-icon
-        :class="['collapse-icon', { active: open }]"
-        name="ellipsis-horizontal"
-        width="16px"
-        height="16px"
-      />
-    </button>
-
-    <Teleport to="body">
-      <ul
-        v-show="open"
-        :class="['navbar-dropdown-menu', props.popupClass]"
-        :style="dropdownMenuStyles"
-      >
-        <li
-          v-for="(item, key) in props.items"
-          :key="key"
-          v-permission="item.permission"
-          :title="item.title"
-          class="navbar-dropdown-menu-item"
-          @mousedown.stop
-        >
-          <div
-            v-if="item.separate"
-            class="navbar-dropdown-menu-separator"
-          ></div>
-          <atoms-collapse-nav-item
-            v-else
-            :is-link="props.isLink"
-            :item="item"
-            :value="value"
-            btn-class="btn"
-            @change="change"
-            @select-file="onSelectFile($event, key)"
-          />
-        </li>
-      </ul>
-    </Teleport>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
-
-const props = withDefaults(
-  defineProps<{
-    items: UI_I_CollapseNavItem[]
-    isLink?: boolean
-    value?: number | string
-    popupClass?: string
-    closeAfterClick?: boolean
-    testId?: string
-  }>(),
-  {
-    isLink: undefined,
-    value: undefined,
-    popupClass: undefined,
-    closeAfterClick: undefined,
-    testId: '',
-  }
-)
-const emits = defineEmits<{
-  (event: 'change', value: number): void
-  (event: 'select-file', value1: Event, value2: string, value3: number): void
-}>()
-
-const change = (value: number): void => {
-  emits('change', value)
-  props.closeAfterClick && (open.value = false)
-}
-const onSelectFile = (event: Event, type: string, key: number): void => {
-  emits('select-file', event, type, key)
-}
-
-const collapsedBtnId = ref<string>('')
-
-const route = useRoute()
-const collapsedBtnActive = computed<boolean>(() => {
-  if (props.isLink)
-    return props.items.some((item) => route.path.includes(item.path || ''))
-
-  return props.items.some((item) => item.value === props.value)
-})
-
-const open = ref<boolean>(false)
-const hover = ref<boolean>(false)
-const dropdownMenuStyles = ref<any>({})
-const showMenu = (): void => {
-  if (open.value) {
-    hideMenu(true)
-    return
-  }
-
-  open.value = true
-
-  const btn = document.querySelector(`#${collapsedBtnId.value}`)
-  const { top, height, right } = btn!.getBoundingClientRect()
-  dropdownMenuStyles.value = {
-    top: `${top + height}px`,
-    left: `${right}px`,
-  }
-}
-const hideMenu = (force?: boolean): void => {
-  if (hover.value && !force) return
-
-  open.value = false
-}
-
-const windowClick = (): void => {
-  hideMenu()
-}
-const windowResize = (): void => {
-  hideMenu(true)
-}
-onMounted(() => {
-  collapsedBtnId.value = `collapsed-btn${useUniqueId()}`
-  window.addEventListener('mousedown', windowClick)
-  window.addEventListener('resize', windowResize)
-})
-onUnmounted(() => {
-  window.removeEventListener('mousedown', windowClick)
-  window.removeEventListener('resize', windowResize)
-})
-</script>
-
-<style scoped lang="scss">
-.tabs-overflow {
-  position: absolute;
-  top: 0;
-  right: 24px;
-
-  .dropdown-toggle {
-    .collapse-icon {
-      fill: var(--main-color-mode);
-
-      &.active {
-        fill: #0077b8;
-      }
-    }
-  }
-}
-
-.navbar-dropdown-menu {
-  position: fixed;
-  z-index: var(--z-dropdown);
-  transform: translateX(-100%);
-  border: 1px solid var(--global-border-color);
-  border-radius: 3px;
-  margin-top: 2px;
-  background-color: var(--global-bg-color);
-  padding: 12px 0;
-}
-.navbar-dropdown-menu-separator {
-  margin: 6px 0;
-  border-bottom: 0.8px solid #e8e8e8;
-}
-</style>
+<template>
+  <div class="tabs-overflow bottom-right">
+    <button
+      :id="collapsedBtnId"
+      :class="[
+        'btn btn-link nav-link dropdown-toggle',
+        { active: collapsedBtnActive },
+      ]"
+      :data-id="`${props.testId}-toggle-button`"
+      @mouseenter="hover = true"
+      @mouseleave="hover = false"
+      @mousedown="showMenu"
+    >
+      <atoms-the-icon
+        :class="['collapse-icon', { active: open }]"
+        name="ellipsis-horizontal"
+        width="16px"
+        height="16px"
+      />
+    </button>
+
+    <Teleport to="body">
+      <ul
+        v-show="open"
+        :class="['navbar-dropdown-menu', props.popupClass]"
+        :style="dropdownMenuStyles"
+      >
+        <li
+          v-for="(item, key) in props.items"
+          :key="key"
+          v-permission="item.permission"
+          :title="item.title"
+          class="navbar-dropdown-menu-item"
+          @mousedown.stop
+        >
+          <div
+            v-if="item.separate"
+            class="navbar-dropdown-menu-separator"
+          ></div>
+          <atoms-collapse-nav-item
+            v-else
+            :is-link="props.isLink"
+            :item="item"
+            :value="value"
+            btn-class="btn"
+            @change="change"
+            @select-file="onSelectFile($event, key)"
+          />
+        </li>
+      </ul>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_CollapseNavItem } from '~/components/atoms/collapse/lib/models/interfaces'
+
+const props = withDefaults(
+  defineProps<{
+    items: UI_I_CollapseNavItem[]
+    isLink?: boolean
+    value?: number | string
+    popupClass?: string
+    closeAfterClick?: boolean
+    testId?: string
+  }>(),
+  {
+    isLink: undefined,
+    value: undefined,
+    popupClass: undefined,
+    closeAfterClick: undefined,
+    testId: '',
+  }
+)
+const emits = defineEmits<{
+  (event: 'change', value: number): void
+  (event: 'select-file', value1: Event, value2: string, value3: number): void
+}>()
+
+const change = (value: number): void => {
+  emits('change', value)
+  props.closeAfterClick && (open.value = false)
+}
+const onSelectFile = (event: Event, type: string, key: number): void => {
+  emits('select-file', event, type, key)
+}
+
+const collapsedBtnId = ref<string>('')
+
+const route = useRoute()
+const collapsedBtnActive = computed<boolean>(() => {
+  if (props.isLink)
+    return props.items.some((item) => route.path.includes(item.path || ''))
+
+  return props.items.some((item) => item.value === props.value)
+})
+
+const open = ref<boolean>(false)
+const hover = ref<boolean>(false)
+const dropdownMenuStyles = ref<any>({})
+const showMenu = (): void => {
+  if (open.value) {
+    hideMenu(true)
+    return
+  }
+
+  open.value = true
+
+  const btn = document.querySelector(`#${collapsedBtnId.value}`)
+  const { top, height, right } = btn!.getBoundingClientRect()
+  dropdownMenuStyles.value = {
+    top: `${top + height}px`,
+    left: `${right}px`,
+  }
+}
+const hideMenu = (force?: boolean): void => {
+  if (hover.value && !force) return
+
+  open.value = false
+}
+
+const windowClick = (): void => {
+  hideMenu()
+}
+const windowResize = (): void => {
+  hideMenu(true)
+}
+onMounted(() => {
+  collapsedBtnId.value = `collapsed-btn${useUniqueId()}`
+  window.addEventListener('mousedown', windowClick)
+  window.addEventListener('resize', windowResize)
+})
+onUnmounted(() => {
+  window.removeEventListener('mousedown', windowClick)
+  window.removeEventListener('resize', windowResize)
+})
+</script>
+
+<style scoped lang="scss">
+.tabs-overflow {
+  position: absolute;
+  top: 0;
+  right: 24px;
+
+  .dropdown-toggle {
+    .collapse-icon {
+      fill: var(--main-color-mode);
+
+      &.active {
+        fill: #0077b8;
+      }
+    }
+  }
+}
+
+.navbar-dropdown-menu {
+  position: fixed;
+  z-index: var(--z-dropdown);
+  transform: translateX(-100%);
+  border: 1px solid var(--global-border-color);
+  border-radius: 3px;
+  margin-top: 2px;
+  background-color: var(--global-bg-color);
+  padding: 12px 0;
+}
+.navbar-dropdown-menu-separator {
+  margin: 6px 0;
+  border-bottom: 0.8px solid #e8e8e8;
+}
+</style>