bfg-common 1.5.364 → 1.5.366

package/assets/localization/local_be.json

@@ -2601,7 +2601,13 @@
     "migrationThresholdText4": "Рэкамендацыі па прыярытэце 1, прыярытэце 2, прыярытэце 3 і прыярытэце 4 выкананы.",
     "migrationThresholdText5": "Рэкамендацыі па прыярытэце 1, прыярытэту 2, прыярытэту 3, прыярытэту 4 і прыярытэту 5 выкананы.",
     "sphereAvailability": "Даступнасць Sphere",
-    "vmOverrides": "Пераазначэнні ВМ"
+    "vmOverrides": "Пераазначэнні ВМ",
+    "viewDrsSettings": "Прагляд налад DRS",
+    "clusterDrsScore": "Ацэнка кластара DRS",
+    "clusterDrsScoreDescription": "Ўяўляе сабой сярэднюю ацэнку DRS для ўсіх віртуальных машын у кластары.",
+    "vMDrsScore": "Ацэнка DRS віртуальнай машыны",
+    "vMDrsScoreDescription": "Паказвае на эфектыўнасць выканання гэтай віртуальнай машыны. Значэнні, блізкія да 0%, паказваюць на сур'ёзную канкурэнцыю рэсурсаў, а значэнні, блізкія да 100%, паказваюць на мінімальную канкурэнцыю ці яе адсутнасць. DRS імкнецца максімальна павысіць эфектыўнасць выканання для кожнай віртуальнай машыны ў кластары, захоўваючы пры гэтым справядлівае размеркаванне рэсурсаў паміж усімі віртуальнымі машынамі.",
+    "drsParameters": "Параметры DRS"
   },
   "datastoreWizard": {
     "accessMode": "Рэжым доступу",
@@ -2646,7 +2652,8 @@
     "remoteConsoleText2": "Калі ў вас ужо ўстаноўлена выдаленая кансоль {trademark}, яна запусціцца аўтаматычна, калі вы націснеце кнопку Запусціць выдаленую кансоль. Калі няма, вы можаце загрузіць яе па спасылцы ніжэй.",
     "fieldNotContainSpecialCharacters": "Поле не павінна ўтрымліваць спецыяльныя сімвалы",
     "noObjectsFound": "Ніякіх прадметаў знойдзена не было",
-    "cpuS": "CPU(s)"
+    "cpuS": "CPU(s)",
+    "vmAutomation": "Аўтаматызацыя віртуальнай машыны"
   },
   "contextMenu": {
     "actionsMenuPower": "Магутнасць",

package/assets/localization/local_en.json

@@ -2605,7 +2605,13 @@
     "migrationThresholdText4": "Priority 1, priority 2, priority 3 and priority 4 recommendations applied.",
     "migrationThresholdText5": "Priority 1, priority 2, priority 3, priority 4 and priority 5 recommendations applied.",
     "sphereAvailability": "Sphere Availability",
-    "vmOverrides": "VM Overrides"
+    "vmOverrides": "VM Overrides",
+    "viewDrsSettings": "View DRS Settings",
+    "clusterDrsScore": "Cluster DRS Score",
+    "clusterDrsScoreDescription": "Represents the average DRS score of all the virtual machines in the cluster.",
+    "vMDrsScore": "VM DRS Score",
+    "vMDrsScoreDescription": "Indicates the execution efficiency of this virtual machine. Values closer to 0% indicate severe resource contention, while values near 100% indicate minimal or no contention. DRS aims to maximize execution efficiency for each virtual machine in the cluster while maintaining fair resource allocation across all VMs.",
+    "drsParameters": "DRS Parameters"
   },
   "datastoreWizard": {
     "accessMode": "Access Mode",
@@ -2650,7 +2656,8 @@
     "remoteConsoleText2": "If you already have {trademark} Remote Console installed, it will start automatically when you click the Launch Remote Console button. If not, you can use the link below to download it.",
     "fieldNotContainSpecialCharacters": "The field must not contain special characters",
     "noObjectsFound": "No objects found",
-    "cpuS": "CPU(s)"
+    "cpuS": "CPU(s)",
+    "vmAutomation": "VM Automation"
   },
   "contextMenu": {
     "actionsMenuPower": "Power",

package/assets/localization/local_hy.json

@@ -2605,7 +2605,13 @@
     "migrationThresholdText4": "Գերակայություն 1-ի, առաջնահերթություն 2-ի, առաջնահերթություն 3-ի և առաջնահերթություն 4-ի վերաբերյալ առաջարկությունները կատարված են:",
     "migrationThresholdText5": "Գերակայություն 1-ի, առաջնահերթություն 2-ի, առաջնահերթություն 3-ի, առաջնահերթություն 4-ի և առաջնահերթություն 5-ի վերաբերյալ առաջարկությունները կատարված են:",
     "sphereAvailability": "Sphere-ի հասանելիություն",
-    "vmOverrides": "ՎՄ վերագրանցումներ"
+    "vmOverrides": "ՎՄ վերագրանցումներ",
+    "viewDrsSettings": "Դիտեք DRS կարգավորումները",
+    "clusterDrsScore": "DRS կլաստերի գնահատում",
+    "clusterDrsScoreDescription": "Ներկայացնում է DRS-ի միջին գնահատականը կլաստերի բոլոր վիրտուալ մեքենաների համար:",
+    "vMDrsScore": "Վիրտուալ մեքենայի DRS գնահատում",
+    "vMDrsScoreDescription": "Նշում է այս վիրտուալ մեքենայի կատարման արդյունավետությունը: 0% - ին մոտ արժեքները ցույց են տալիս ռեսուրսների լուրջ մրցակցություն, մինչդեռ 100% - ին մոտ արժեքները ցույց են տալիս նվազագույն մրցակցություն կամ դրա բացակայություն: DRS-ը նպատակ ունի առավելագույնի հասցնել կատարման արդյունավետությունը կլաստերի յուրաքանչյուր վիրտուալ մեքենայի համար ՝ միաժամանակ պահպանելով ռեսուրսների արդար բաշխումը բոլոր վիրտուալ մեքենաների միջև:",
+    "drsParameters": "DRS պարամետրեր"
   },
   "datastoreWizard": {
     "accessMode": "Մուտքի ռեժիմ",
@@ -2650,7 +2656,8 @@
     "remoteConsoleText2": "Եթե արդեն տեղադրված եք {trademark} հեռավոր վահանակը, այն ավտոմատ կերպով կսկսվի, երբ սեղմեք կոճակը գործարկել Remote Console. Եթե ոչ, կարող եք ներբեռնել այն ստորև նշված հղումից:",
     "fieldNotContainSpecialCharacters": "Դաշտը չպետք է պարունակի հատուկ նիշեր",
     "noObjectsFound": "Օբյեկտներ չեն հայտնաբերվել",
-    "cpuS": "CPU(s)"
+    "cpuS": "CPU(s)",
+    "vmAutomation": "Վիրտուալ մեքենայի ավտոմատացում"
   },
   "contextMenu": {
     "actionsMenuPower": "Հզորությունը",

package/assets/localization/local_kk.json

@@ -2604,7 +2604,13 @@
     "migrationThresholdText4": "1-басымдық, 2-басымдық, 3-басымдық және 4-басымдық бойынша ұсыныстар қолданылды.",
     "migrationThresholdText5": "1-басымдық, 2-басымдық, 3-басымдық, 4-басымдық және 5-басымдық бойынша ұсыныстар қолданылады.",
     "sphereAvailability": "Sphere қолжетімділігі",
-    "vmOverrides": "VM қайта анықтаулары"
+    "vmOverrides": "VM қайта анықтаулары",
+    "viewDrsSettings": "DRS Параметрлерін көру",
+    "clusterDrsScore": "Кластерлік DRS Ұпайы",
+    "clusterDrsScoreDescription": "Кластердегі барлық виртуалды машиналардың ОРТАША DRS балын білдіреді.",
+    "vMDrsScore": "Виртуалды машинаның DRS Ұпайы",
+    "vMDrsScoreDescription": "Осы виртуалды машинаның орындалу тиімділігін көрсетеді. 0% - ға жақын мәндер ресурстарға қатысты елеулі келіспеушіліктерді көрсетеді, ал 100% - ға жақын мәндер ең аз немесе мүлдем келіспеушіліктерді көрсетеді. DRS барлық Виртуалды Машиналарда ресурстардың әділ бөлінуін сақтай отырып, кластердегі әрбір виртуалды машинаның орындалу тиімділігін арттыруға бағытталған.",
+    "drsParameters": "DRS Параметрлері"
   },
   "datastoreWizard": {
     "accessMode": "Қол жеткізу режимі",
@@ -2649,7 +2655,8 @@
     "remoteConsoleText2": "Егер сізде {trademark} Қашықтан Басқару Пульті орнатылған болса, Қашықтан Басқару Пультін Іске қосу түймесін басқан кезде ол автоматты түрде іске қосылады. Олай болмаса, оны жүктеп алу үшін төмендегі сілтемені пайдалануға болады.",
     "fieldNotContainSpecialCharacters": "Өрісте арнайы таңбалар болмауы керек",
     "noObjectsFound": "Объектілер табылмады",
-    "cpuS": "CPU(s)"
+    "cpuS": "CPU(s)",
+    "vmAutomation": "Виртуалды Машинаны Автоматтандыру"
   },
   "contextMenu": {
     "actionsMenuPower": "Магутнасттар",

package/assets/localization/local_ru.json

@@ -2604,7 +2604,13 @@
     "migrationThresholdText4": "Рекомендации по приоритету 1, приоритету 2, приоритету 3 и приоритету 4 выполнены.",
     "migrationThresholdText5": "Рекомендации по приоритету 1, приоритету 2, приоритету 3, приоритету 4 и приоритету 5 выполнены.",
     "sphereAvailability": "Доступность Sphere",
-    "vmOverrides": "Переопределения ВМ"
+    "vmOverrides": "Переопределения ВМ",
+    "viewDrsSettings": "Просмотр настроек DRS",
+    "clusterDrsScore": "Оценка кластера DRS",
+    "clusterDrsScoreDescription": "Представляет собой среднюю оценку DRS для всех виртуальных машин в кластере.",
+    "vMDrsScore": "Оценка DRS виртуальной машины",
+    "vMDrsScoreDescription": "Указывает на эффективность выполнения этой виртуальной машины. Значения, близкие к 0%, указывают на серьезную конкуренцию ресурсов, в то время как значения, близкие к 100%, указывают на минимальную конкуренцию или ее отсутствие. DRS стремится максимально повысить эффективность выполнения для каждой виртуальной машины в кластере, сохраняя при этом справедливое распределение ресурсов между всеми виртуальными машинами.",
+    "drsParameters": "Параметры DRS"
   },
   "datastoreWizard": {
     "accessMode": "Режим доступа",
@@ -2649,7 +2655,8 @@
     "remoteConsoleText2": "Если у вас уже установлена {trademark} Удаленная Консоль, она запустится автоматически, когда вы нажмете кнопку Запустить удаленную консоль. Если нет, вы можете загрузить ее по ссылке ниже.",
     "fieldNotContainSpecialCharacters": "Поле не должно содержать специальных символов",
     "noObjectsFound": "Объектов не найдено",
-    "cpuS": "CPU(s)"
+    "cpuS": "CPU(s)",
+    "vmAutomation": "Автоматизация виртуальной машины"
   },
   "contextMenu": {
     "actionsMenuPower": "Питание",

package/assets/localization/local_zh.json

@@ -2602,7 +2602,13 @@
     "migrationThresholdText4": "优先事项1、优先事项2、优先事项3和优先事项4建议适用。",
     "migrationThresholdText5": "优先级1、优先级2、优先级3、优先级4和优先级5建议适用。",
     "sphereAvailability": "Sphere 可用性",
-    "vmOverrides": "虚拟机覆盖设置"
+    "vmOverrides": "虚拟机覆盖设置",
+    "viewDrsSettings": "查看DRS设置",
+    "clusterDrsScore": "集群DRS评分",
+    "clusterDrsScoreDescription": "表示群集中所有虚拟机的平均DRS分数。",
+    "vMDrsScore": "VM DRS评分",
+    "vMDrsScoreDescription": "指示此虚拟机的执行效率。 接近0%的值表示严重的资源争用，而接近100%的值表示最小或没有争用。 DRS旨在最大限度地提高群集中每个虚拟机的执行效率，同时在所有虚拟机之间保持公平的资源分配。",
+    "drsParameters": "DRS参数"
   },
   "datastoreWizard": {
     "accessMode": "访问方式",
@@ -2647,7 +2653,8 @@
     "remoteConsoleText2": "如果您已经安装了{trademark}远程控制台，它将在您单击启动远程控制台按钮时自动启动。 如果没有，您可以使用下面的链接下载它。",
     "fieldNotContainSpecialCharacters": "该字段不能包含特殊字符",
     "noObjectsFound": "没有找到物件",
-    "cpuS": "CPU(s)"
+    "cpuS": "CPU(s)",
+    "vmAutomation": "VM自动化"
   },
   "contextMenu": {
     "actionsMenuPower": "力量",

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>