bfg-common 1.5.648 → 1.5.650

package/assets/localization/local_be.json

@@ -2535,7 +2535,31 @@
     "objects": "Аб’екты",
     "selectedObjects": "Абраныя аб’екты",
     "deleteDatastoreConfirmDesc": "Вы ўпэўнены, што хочаце выдаліць сховішча даных «{0}»? Гэтая аперацыя назаўсёды выдаліць усе файлы, звязаныя з віртуальнымі машынамі ў гэтым сховішчы.",
-    "copy": "Капіраваць"
+    "copy": "Капіраваць",
+    "deleteDatastoreConfirmDesc": "Вы ўпэўнены, што хочаце выдаліць сховішча даных «{0}»? Гэтая аперацыя назаўсёды выдаліць усе файлы, звязаныя з віртуальнымі машынамі ў гэтым сховішчы.",
+    "datastoreDirectories": "Каталогі сховішчы дадзеных",
+    "networkDirectories": "Сеткавыя каталогі",
+    "zones": "Зоны",
+    "zoneDirectories": "Каталогі зон",
+    "datacenters": "Цэнтры апрацоўкі дадзеных",
+    "hostAndClusterDirectories": "Каталогі вузлоў і кластараў",
+    "vmAndTemplateDirectories": "Каталогі віртуальных машын і шаблонаў",
+    "vmApplications": "Прыкладанні для віртуальных машын",
+    "resourcePools": "Пулы рэсурсаў",
+    "buckets": "Коўш",
+    "backupStorages": "Сховішчы рэзервовых копій",
+    "backupStorage": "Сховішча рэзервовых копій",
+    "backupStorageDirectories": "Каталогі для захоўвання рэзервовых копій",
+    "scope": "Маштаб",
+    "bucket": "Вядро",
+    "namespace": "Прастора імёнаў",
+    "vmApplication": "Дадатак віртуальнай машыны",
+    "zoneDirectory": "Каталог зон",
+    "datastoreDirectory": "Каталог сховішчы дадзеных",
+    "networkDirectory": "Сеткавы каталог",
+    "hostAndClusterDirectory": "Каталог вузлоў і кластараў",
+    "vmAndTemplateDirectory": "Віртуальная машына і каталог шаблонаў",
+    "backupStorageDirectory": "Каталог для захоўвання рэзервовых копій"
   },
   "auth": {
     "welcomeTo": "Сардэчна запрашаем у",

package/assets/localization/local_en.json

@@ -2539,7 +2539,31 @@
     "objects": "Objects",
     "selectedObjects": "Selected Objects",
     "deleteDatastoreConfirmDesc": "Are you sure you want to delete the datastore “{0}”? This operation will permanently delete all files associated with the virtual machines on the datastore.",
-    "copy": "Copy"
+    "copy": "Copy",
+    "deleteDatastoreConfirmDesc": "Are you sure you want to delete the datastore “{0}”? This operation will permanently delete all files associated with the virtual machines on the datastore.",
+    "datastoreDirectories": "Datastore Directories",
+    "networkDirectories": "Network Directories",
+    "zones": "Zones",
+    "zoneDirectories": "Zone Directories",
+    "datacenters": "Datacenters",
+    "hostAndClusterDirectories": "Host and Cluster Directories",
+    "vmAndTemplateDirectories": "VM and Template Directories",
+    "vmApplications": "VM Applications",
+    "resourcePools": "Resource Pools",
+    "buckets": "Buckets",
+    "backupStorages": "Backup Storages",
+    "backupStorage": "Backup Storage",
+    "backupStorageDirectories": "Backup Storage Directories",
+    "scope": "Scope",
+    "bucket": "Bucket",
+    "namespace": "Namespace",
+    "vmApplication": "VM Application",
+    "zoneDirectory": "Zone Directory",
+    "datastoreDirectory": "Datastore Directory",
+    "networkDirectory": "Network Directory",
+    "hostAndClusterDirectory": "Host and Cluster Directory",
+    "vmAndTemplateDirectory": "VM and Template Directory",
+    "backupStorageDirectory": "Backup Storage Directory"
   },
   "auth": {
     "welcomeTo": "Welcome to",

package/assets/localization/local_hy.json

@@ -2539,7 +2539,31 @@
     "objects": "Օբյեկտներ",
     "selectedObjects": "Ընտրած օբյեկտներ",
     "deleteDatastoreConfirmDesc": "Վստա՞հ եք, որ ցանկանում եք ջնջել «{0}» տվյալների պահեստը։ Այս գործողությունը մշտապես կհեռացնի տվյալների պահեստում գտնվող վիրտուալ մեքենաներին առնչվող բոլոր fáյլերը։",
-    "copy": "Պատճենել"
+    "copy": "Պատճենել",
+    "deleteDatastoreConfirmDesc": "Վստա՞հ եք, որ ցանկանում եք ջնջել «{0}» տվյալների պահեստը։ Այս գործողությունը մշտապես կհեռացնի տվյալների պահեստում գտնվող վիրտուալ մեքենաներին առնչվող բոլոր fայլերը։",
+    "datastoreDirectories": "Տվյալների պահեստի թղթապանակներ",
+    "networkDirectories": "Ցանցերի թղթապանակներ",
+    "zones": "Զոնաներ",
+    "zoneDirectories": "Զոնայի թղթապանակներ",
+    "datacenters": "Տվյալների կենտրոններ",
+    "hostAndClusterDirectories": "Հանգույցների և կլաստերների թղթապանակներ",
+    "vmAndTemplateDirectories": "Վիրտուալ մեքենաների և ձևանմուշների թղթապանակներ",
+    "vmApplications": "Վիրտուալ մեքենայի ծրագրեր",
+    "resourcePools": "Ռեսուրսների փուլեր",
+    "buckets": "Բաքեթներ",
+    "backupStorages": "Կրկնօրինակների պահոցներ",
+    "backupStorage": "Կրկնօրինակների պահոց",
+    "backupStorageDirectories": "Կրկնօրինակների պահպանման թղթապանակներ",
+    "scope": "Գոտի",
+    "bucket": "Բաքեթ",
+    "namespace": "Անվանատարածք",
+    "vmApplication": "Վիրտուալ մեքենայի ծրագիր",
+    "zoneDirectory": "Զոնաների կատալոգ",
+    "datastoreDirectory": "Տվյալների պահեստի թղթապանակ",
+    "networkDirectory": "Ցանցերի թղթապանակ",
+    "hostAndClusterDirectory": "Հանգույցների և կլաստերների թղթապանակ",
+    "vmAndTemplateDirectory": "Վիրտուալ մեքենաների և ձևանմուշների թղթապանակ",
+    "backupStorageDirectory": "Կրկնօրինակների պահպանման գրացուցակ"
   },
   "auth": {
     "welcomeTo": "Բարի գալուստ",

package/assets/localization/local_kk.json

@@ -2538,7 +2538,31 @@
     "objects": "Нысандар",
     "selectedObjects": "Таңдалған нысандар",
     "deleteDatastoreConfirmDesc": "«{0}» деректер қоймасын жоюға сенімдісіз бе? Бұл операция деректер қоймасындағы виртуалды машиналарға қатысты барлық файлдарды біржола жояды.",
-    "copy": "Көшіріп алу"
+    "copy": "Көшіріп алу",
+    "deleteDatastoreConfirmDesc": "«{0}» деректер қоймасын жоюға сенімдісіз бе? Бұл операция деректер қоймасындағы виртуалды машиналарға қатысты барлық файлдарды біржола жояды.",
+    "datastoreDirectories": "Деректер Қоймасының Каталогтары",
+    "networkDirectories": "Желілік Каталогтар",
+    "zones": "Аймақтар",
+    "zoneDirectories": "Аймақ Каталогтары",
+    "datacenters": "Деректер орталықтары",
+    "hostAndClusterDirectories": "Хост Және Кластер Каталогтары",
+    "vmAndTemplateDirectories": "ВИРТУАЛДЫ МАШИНАЛАР Және Шаблондар Каталогтары",
+    "vmApplications": "Виртуалды Машинаның Қосымшалары",
+    "resourcePools": "Ресурстық Бассейндер",
+    "buckets": "Шелек",
+    "backupStorages": "Резервтік Қоймалар",
+    "backupStorage": "Резервтік Сақтау",
+    "backupStorageDirectories": "Сақтық Көшірме Сақтау Каталогтары",
+    "scope": "Көлемі",
+    "bucket": "Шелек",
+    "namespace": "Аттар кеңістігі",
+    "vmApplication": "Виртуалды Машинаны Қолдану",
+    "zoneDirectory": "Аймақ Каталогы",
+    "datastoreDirectory": "Деректер Қоймасының Каталогы",
+    "networkDirectory": "Желілік Каталог",
+    "hostAndClusterDirectory": "Хост Және Кластер Каталогы",
+    "vmAndTemplateDirectory": "Виртуалды Машина Және Үлгілер Каталогы",
+    "backupStorageDirectory": "Сақтық Көшірме Сақтау Каталогы"
   },
   "auth": {
     "welcomeTo": "Қош келдіңіз",

package/assets/localization/local_ru.json

@@ -2538,7 +2538,31 @@
     "objects": "Объекты",
     "selectedObjects": "Выбранные объекты",
     "deleteDatastoreConfirmDesc": "Вы уверены, что хотите удалить хранилище данных «{0}»? Эта операция навсегда удалит все файлы, связанные с виртуальными машинами в этом хранилище.",
-    "copy": "Копировать"
+    "copy": "Копировать",
+    "deleteDatastoreConfirmDesc": "Вы уверены, что хотите удалить хранилище данных «{0}»? Эта операция навсегда удалит все файлы, связанные с виртуальными машинами в этом хранилище.",
+    "datastoreDirectories": "Папки датасторов",
+    "networkDirectories": "Папки сетей",
+    "zones": "Зоны",
+    "zoneDirectories": "Папки зон",
+    "datacenters": "Датацентры",
+    "hostAndClusterDirectories": "Папки хостов и кластеров",
+    "vmAndTemplateDirectories": "Папки ВМ и шаблонов",
+    "vmApplications": "Приложения виртуальных машин",
+    "resourcePools": "Пулы ресурсов",
+    "buckets": "Бакеты",
+    "backupStorages": "Хранилища бэкапов",
+    "backupStorage": "Хранилище бэкапов",
+    "backupStorageDirectories": "Папки хранилищ бэкапов",
+    "scope": "Область",
+    "bucket": "Бакет",
+    "namespace": "Неймспейс",
+    "vmApplication": "Приложение виртуальной машины",
+    "zoneDirectory": "Папка зон",
+    "datastoreDirectory": "Папка хранилищ данных",
+    "networkDirectory": "Папка сетей",
+    "hostAndClusterDirectory": "Папка хостов и кластеров",
+    "vmAndTemplateDirectory": "Папка виртуальных машин и шаблонов",
+    "backupStorageDirectory": "Папка хранилищ бэкапов"
   },
   "auth": {
     "welcomeTo": "Добро пожаловать в",

package/assets/localization/local_zh.json

@@ -2536,7 +2536,31 @@
     "objects": "对象",
     "selectedObjects": "已选择的对象",
     "deleteDatastoreConfirmDesc": "您确定要删除数据存储“{0}”吗？此操作将永久删除该数据存储上与虚拟机相关的所有文件。",
-    "copy": "复制"
+    "copy": "复制",
+    "deleteDatastoreConfirmDesc": "您确定要删除数据存储“{0}”吗？此操作将永久删除该数据存储上与虚拟机相关的所有文件。",
+    "datastoreDirectories": "数据存储目录",
+    "networkDirectories": "网络目录",
+    "zones": "区域",
+    "zoneDirectories": "区域目录",
+    "datacenters": "数据中心",
+    "hostAndClusterDirectories": "主机和群集目录",
+    "vmAndTemplateDirectories": "VM和模板目录",
+    "vmApplications": "VM应用程序",
+    "resourcePools": "资源池",
+    "buckets": "水桶",
+    "backupStorages": "备份存储",
+    "backupStorage": "备份存储",
+    "backupStorageDirectories": "备份存储目录",
+    "scope": "范围",
+    "bucket": "水桶",
+    "namespace": "命名空间",
+    "vmApplication": "VM应用程序",
+    "zoneDirectory": "区域目录",
+    "datastoreDirectory": "数据存储目录",
+    "networkDirectory": "网络目录",
+    "hostAndClusterDirectory": "主机和群集目录",
+    "vmAndTemplateDirectory": "VM和模板目录",
+    "backupStorageDirectory": "备份存储目录"
   },
   "auth": {
     "welcomeTo": "欢迎来到",

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>