bfg-common 1.5.737 → 1.5.738

package/assets/localization/local_be.json

@@ -2262,6 +2262,7 @@
     "restoreDiskOnly": "Аднавіць толькі дыск",
     "restoreDiskOnly2": "Аднавіць толькі дыск",
     "selectDisks": "Абярыце Дыскі",
+    "selectDisksForCopy": "Выберыце дыскі для капіявання",
     "clickFinishRestore": "Націсніце \"Гатова\", каб аднавіць",
     "backup": "Рэзервовае капіраванне",
     "backupBuckets": "Рэзервовыя кантэйнеры",
@@ -3618,7 +3619,7 @@
     "heartbeatDatastore": "Сховішчы heartbeat",
     "failuresAndResponsesDesc": "Вы можаце наладзіць, як Sphere HA будзе рэагаваць на збоі ў гэтым кластары. Падтрымліваюцца наступныя тыпы збояў: хост, ізаляцыя хоста, абарона кампанентаў ВМ (сховішчы з PDL і APD), ВМ і прыкладанне.",
     "admissionControlDesc": "Кантроль допуску — гэта палітыка Sphere HA для забеспячэння рэзерваў у кластары на выпадак збою. Павелічэнне колькасці магчымых збояў павышае патрабаванні да даступнасці і рэзерваў.",
-    "heartbeatDatastoreDesc": "Sphere HA выкарыстоўвае сховішчы для маніторынгу хостаў і ВМ пры няспраўнасці HA-сеткі. vCenter Server выбірае 2 сховішчы для кожнага хоста згодна з указанымі палітыкамі і перавагамі.",
+    "heartbeatDatastoreDesc": "Sphere выкарыстоўвае сховішчы дадзеных для маніторынгу хастоў і віртуальных машын у выпадку збою сеткі высокай даступнасці. Sphere выбірае 2 сховішчы дадзеных для кожнага хаста, выкарыстоўваючы палітыку і налады сховішча дадзеных, указаныя ніжэй.",
     "advancedOptionsDesc": "Вы можаце наладзіць пашыраныя параметры, што ўплываюць на паводзіны кластара vSphere HA.",
     "sphereHaMonitoringTooltipContent": "Хосты ESX/ESXi у гэтым кластары абменьваюцца сеткавымі heartbeat-сігналамі. Адключыце гэтую функцыю падчас сеткавых прац, якія могуць выклікаць ізаляцыю.",
     "enableHostMonitoring": "Уключыць маніторынг хостаў",

package/assets/localization/local_en.json

@@ -2265,6 +2265,7 @@
     "restoreDiskOnly": "Restore Disk only",
     "restoreDiskOnly2": "Restore Disk Only",
     "selectDisks": "Select Disks",
+    "selectDisksForCopy": "Select Disks for Copy",
     "clickFinishRestore": "Click Finish to Restore",
     "backup": "Backup",
     "backupBuckets": "Backup Buckets",
@@ -3622,7 +3623,7 @@
     "heartbeatDatastore": "Heartbeat Datastores",
     "failuresAndResponsesDesc": "You can configure how Sphere HA responds to the failure conditions on\n      this cluster. The following failure conditions are supported: host, host\n      isolation, VM component protection (datastore with PDL and APD), VM and\n      application.",
     "admissionControlDesc": "Admission control is a policy used by Sphere HA to ensure failover capacity within a cluster. Raising the number of potential host failures will increase the availability constraints and capacity reserved.",
-    "heartbeatDatastoreDesc": "Sphere HA uses datastores to monitor hosts and virtual machines when the HA network has failed. vCenter Server selects 2 datastores for each host using the policy and datastore preferences specified below.",
+    "heartbeatDatastoreDesc": "Sphere uses datastores to monitor hosts and virtual machines when the HA network has failed. Sphere selects 2 datastores for each host using the policy and datastore preferences specified below.",
     "advancedOptionsDesc": "You can set advanced options that affect the behavior of your vSphere HA cluster.",
     "sphereHaMonitoringTooltipContent": "ESX/ESXi hosts in this cluster exchange network heartbeats. Disable this feature when performing network maintenance that may cause isolation responses.",
     "enableHostMonitoring": "Enable Host Monitoring",

package/assets/localization/local_hy.json

@@ -2265,6 +2265,7 @@
     "restoreDiskOnly": "Վերականգնել միայն սկավառակը",
     "restoreDiskOnly2": "Վերականգնել միայն սկավառակը",
     "selectDisks": "Ընտրեք Սկավառակներ",
+    "selectDisksForCopy": "Ընտրեք պատճենման համար սկավառակները",
     "clickFinishRestore": "Սեղմեք Ավարտել՝ վերականգնելու համար",
     "backup": "Կրկնօրինակում",
     "backupBuckets": "Պահուստային դույլեր",
@@ -3622,7 +3623,7 @@
     "heartbeatDatastore": "Heartbeat տվյալների պահոցներ",
     "failuresAndResponsesDesc": "Դուք կարող եք կարգավորել՝ ինչպես Sphere HA-ն պետք է արձագանքի այս կլաստերում առաջացած խափանումներին։ Աջակցվող խափանումներ են՝ հոսթի խնդիր, հոսթի մեկուսացում, վիրտուալ մեքենայի բաղադրիչների պաշտպանություն (տվյալների պահոց PDL և APD), վիրտուալ մեքենայի և հավելվածի խնդիրներ։",
     "admissionControlDesc": "Ընդունման վերահսկումը քաղաքականություն է, որը օգտագործում է Sphere HA՝ կլաստերում վթարային փոխանցման ռեսուրսները ապահովելու համար։ Հոսթերի հնարավոր խափանումների թիվը բարձրացնելը մեծացնում է պահանջվող ռեսուրսներն ու սահմանափակումները։",
-    "heartbeatDatastoreDesc": "Sphere HA-ն օգտագործում է տվյալների պահոցներ՝ մոնիթորինգի համար, երբ HA ցանցը ձախողվում է։ vCenter Server-ը յուրաքանչյուր հոսթի համար ընտրում է 2 պահոց՝ ըստ ներքևում նշված քաղաքականությունների։",
+    "heartbeatDatastoreDesc": "Sphere HA-ն օգտագործում է տվյալների պահոցներ՝ հոսթերին և վիրտուալ մեքենաներին մոնիթորինգի ենթարկելու համար, երբ HA ցանցը ձախողվում է: Sphere-ը յուրաքանչյուր հոսթի համար ընտրում է 2 տվյալների պահոց՝ օգտագործելով ստորև նշված քաղաքականությունը և տվյալների պահոցի նախընտրությունները:",
     "advancedOptionsDesc": "Դուք կարող եք սահմանել առաջադեմ կարգավորումներ, որոնք ազդում են vSphere HA կլաստերի աշխատանքի վրա։",
     "sphereHaMonitoringTooltipContent": "Այս կլաստերի ESX/ESXi հոսթերը փոխանակվում են heartbeat-երով ցանցում։ Անջատեք այս ֆունկցիան, եթե իրականացնում եք ցանցային սպասարկում, որը կարող է առաջացնել մեկուսացում։",
     "enableHostMonitoring": "Միացնել հոսթի մոնիթորինգը",

package/assets/localization/local_kk.json

@@ -2264,6 +2264,7 @@
     "restoreDiskOnly": "Тек дискіні қалпына келтіру",
     "restoreDiskOnly2": "Тек дискіні қалпына келтіру",
     "selectDisks": "Дисктерді таңдаңыз",
+    "selectDisksForCopy": "Көшіру үшін дисктерді таңдаңыз",
     "clickFinishRestore": "Қалпына келтіру үшін Аяқтау түймесін басыңыз",
     "backup": "Сақтық көшірме",
     "backupBuckets": "Сақтық көшірме шелектері",
@@ -3621,7 +3622,7 @@
     "heartbeatDatastore": "Heartbeat деректер қоймалары",
     "failuresAndResponsesDesc": "Осы кластердегі ақауларға Sphere HA қалай әрекет ететінін баптай аласыз. Қолдау көрсетілетін ақау түрлері: хост, хост оқшаулануы, VM компоненттерін қорғау (PDL және APD бар деректер қоймасы), VM және қолданба.",
     "admissionControlDesc": "Admission control — бұл кластер ішінде істен шығуға қарсы қуаттылықты қамтамасыз ету үшін Sphere HA қолданатын саясат. Хост істен шығу ықтималдылығын арттыру — қосымша қуат пен шектеулерді талап етеді.",
-    "heartbeatDatastoreDesc": "Sphere HA HA желісі істен шыққан кезде хосттар мен VM-лерді бақылау үшін деректер қоймаларын пайдаланады. vCenter Server әр хост үшін төменде көрсетілген саясаттар мен параметрлерге сай 2 деректер қоймасын таңдайды.",
+    "heartbeatDatastoreDesc": "Sphere HA желісі сәтсіз болған кезде хосттар мен виртуалды машиналарды бақылау үшін деректер қоймаларын пайдаланады. Sphere төменде көрсетілген саясат пен деректер қоймасының теңшелімдерін пайдаланып әрбір хост үшін 2 деректер қоймасын таңдайды.",
     "advancedOptionsDesc": "vSphere HA кластерінің жұмысын реттейтін кеңейтілген параметрлерді орната аласыз.",
     "sphereHaMonitoringTooltipContent": "Осы кластердегі ESX/ESXi хосттары бір-бірімен желілік heartbeat сигналдарын алмасады. Оқшаулау реакциясын болдырмас үшін бұл мүмкіндікті техникалық қызмет көрсету кезінде өшіріңіз.",
     "enableHostMonitoring": "Хост мониторингін қосу",

package/assets/localization/local_ru.json

@@ -2264,6 +2264,7 @@
     "restoreDiskOnly": "Восстановить только диск",
     "restoreDiskOnly2": "Восстановить только диск",
     "selectDisks": "Выберите диски",
+    "selectDisksForCopy": "Выберите диски для копирования",
     "clickFinishRestore": "Нажмите «Готово», чтобы восстановить",
     "backup": "Резервноя копия",
     "backupBuckets": "Резервные ведра",
@@ -3621,7 +3622,7 @@
     "heartbeatDatastore": "Хранилища heartbeat",
     "failuresAndResponsesDesc": "Вы можете настроить, как Sphere HA будет реагировать на сбои в этом кластере. Поддерживаются следующие типы сбоев: сбой хоста, изоляция хоста, защита компонентов ВМ (хранилища с PDL и APD), сбой ВМ и приложения.",
     "admissionControlDesc": "Контроль допуска — это политика, используемая Sphere HA для обеспечения ресурсов на случай отказа в пределах кластера. Увеличение количества допустимых отказов хостов повышает требования к доступности и резервируемой емкости.",
-    "heartbeatDatastoreDesc": "Sphere HA использует хранилища для мониторинга хостов и виртуальных машин в случае сбоя HA-сети. vCenter Server выбирает 2 хранилища для каждого хоста на основе указанных ниже политик и предпочтений.",
+    "heartbeatDatastoreDesc": "Sphere HA использует хранилища для мониторинга хостов и виртуальных машин в случае сбоя HA-сети. Sphere выбирает 2 хранилища данных для каждого хоста используя политику и параметры хранилищ данных, указанные ниже.",
     "advancedOptionsDesc": "Вы можете задать расширенные параметры, влияющие на поведение кластера vSphere HA.",
     "sphereHaMonitoringTooltipContent": "Хосты ESX/ESXi в этом кластере обмениваются сетевыми heartbeat-сигналами. Отключите эту функцию при обслуживании сети, которое может вызвать изоляцию.",
     "enableHostMonitoring": "Включить мониторинг хостов",

package/assets/localization/local_zh.json

@@ -2262,6 +2262,7 @@
     "restoreDiskOnly": "仅恢复磁盘",
     "restoreDiskOnly2": "仅恢复磁盘",
     "selectDisks": "选择磁盘",
+    "selectDisksForCopy": "选择要复制的磁盘",
     "clickFinishRestore": "单击“完成”进行恢复",
     "backup": "备份",
     "backupBuckets": "备份存储桶",
@@ -3619,7 +3620,7 @@
     "heartbeatDatastore": "Heartbeat 数据存储",
     "failuresAndResponsesDesc": "您可以配置 Sphere HA 如何响应此集群中的故障情况。支持的故障类型包括：主机、主机隔离、VM 组件保护（具有 PDL 和 APD 的数据存储）、虚拟机和应用程序。",
     "admissionControlDesc": "准入控制是 Sphere HA 用于确保集群内故障转移能力的策略。提高可能的主机故障数量将增加可用性限制和预留容量。",
-    "heartbeatDatastoreDesc": "当 HA 网络发生故障时，Sphere HA 使用数据存储来监控主机和虚拟机。vCenter Server 会根据下方指定的策略和偏好，为每个主机选择 2 个数据存储。",
+    "heartbeatDatastoreDesc": "当高可用性网络发生故障时，Sphere 使用数据存储来监控主机和虚拟机。Sphere 会根据下面指定的策略和数据存储首选项，为每个主机选择 2 个数据存储。",
     "advancedOptionsDesc": "您可以设置高级选项来影响 vSphere HA 集群的行为。",
     "sphereHaMonitoringTooltipContent": "此集群中的 ESX/ESXi 主机之间会交换网络 heartbeat。执行可能导致隔离响应的网络维护时，请禁用此功能。",
     "enableHostMonitoring": "启用主机监控",

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>