bfg-common 1.5.759 → 1.5.760

package/assets/localization/local_be.json

@@ -3380,7 +3380,7 @@
   },
   "zabbix": {
     "zabbixVersions": "Zabbix версіі",
-    "zabbixVersionsDesc": "Калі ласка, абярыце версію сервера Zabbix, на якой вы хочаце ўвайсці: 5.x або 6.x.",
+    "zabbixVersionsDesc": "Калі ласка, абярыце версію сервера Zabbix, на якой вы хочаце ўвайсці: 5.x, 6.x. або 7.x.",
     "logoutConfirmation": "Пацвярджэнне выхаду",
     "logoutDescription": "Вы ўпэўнены, што хочаце выйсці з Zabbix Server?",
     "vmDisk": "Дыск ВМ",
@@ -3843,7 +3843,9 @@
     "otpCodeErrorLength": "Код павінен складацца з 6 лічбаў",
     "enterOtpVerifyCode": "Увядзіце 6-значны код пацверджання",
     "backToLogin": "Вярнуцца да ўваходу",
-    "qrcodeDescription": "Скануйце гэты QR-код з дапамогай праграмы-аўтэнтыфікатара альбо ўвядзіце адзін з гэтых кодаў уручную. Пасля гэтага пацвердзіце дзеянне, увёўшы аднаразовы код ніжэй."
+    "qrcodeDescription": "Скануйце гэты QR-код з дапамогай праграмы-аўтэнтыфікатара альбо ўвядзіце адзін з гэтых кодаў уручную. Пасля гэтага пацвердзіце дзеянне, увёўшы аднаразовы код ніжэй.",
+    "showNotification": "Паказваць апавяшчэнне",
+    "showNotificationDescription": "Паказваць апавяшчэнне, калі нешта ідзе не так"
   },
   "ssoConfiguration": {
     "twoFactorPolicy": "Палітыка двухфактарнай аўтэнтыфікацыі",
@@ -3863,7 +3865,8 @@
     "autoUnlockIntervalSec": "Інтэрвал аўтаматычнай разблакіроўкі (сек)",
     "maxDurationSec": "Максімальная працягласць (сек)",
     "idleTimeoutSec": "Час бездзейнасці (сек)",
-    "maxConcurrentSessions": "Макс. колькасць адначасовых сесій"
+    "maxConcurrentSessions": "Макс. колькасць адначасовых сесій",
+    "errorMaxLimitField": "Поле не павінна змяшчаць больш за {0} сімвалаў"
   },
   "cacheConfiguration": {
     "cacheConfiguration": "Канфігурацыі кэшавання",

package/assets/localization/local_en.json

@@ -3384,7 +3384,7 @@
   },
   "zabbix": {
     "zabbixVersions": "Zabbix Versions",
-    "zabbixVersionsDesc": "Please choose the Zabbix server version you would like to log in to: 5.x or 6.x.",
+    "zabbixVersionsDesc": "Please choose the Zabbix server version you would like to log in to: 5.x, 6.x. or 7.x.",
     "logoutConfirmation": "Logout Confirmation",
     "logoutDescription": "Are you sure you want to log out from Zabbix Server?",
     "vmDisk": "VM Disk",
@@ -3847,7 +3847,9 @@
     "otpCodeErrorLength": "Code must be 6 digits",
     "enterOtpVerifyCode": "Enter the 6-digit verification code.",
     "backToLogin": "Back to Login",
-    "qrcodeDescription": "Scan this QR code with your authenticator app, or enter one of these codes manually. After that, confirm the action by entering the one-time code below."
+    "qrcodeDescription": "Scan this QR code with your authenticator app, or enter one of these codes manually. After that, confirm the action by entering the one-time code below.",
+    "showNotification": "Show a notification",
+    "showNotificationDescription": "Show a notification when something goes wrong"
   },
   "ssoConfiguration": {
     "twoFactorPolicy": "Two-factor policy",
@@ -3867,7 +3869,8 @@
     "autoUnlockIntervalSec": "Auto unlock interval sec",
     "maxDurationSec": "Max duration sec",
     "idleTimeoutSec": "Idle timeout sec",
-    "maxConcurrentSessions": "Max concurrent sessions"
+    "maxConcurrentSessions": "Max concurrent sessions",
+    "errorMaxLimitField": "The field must not contain more than {0} characters"
   },
   "cacheConfiguration": {
     "cacheConfiguration": "Cache Configuration",

package/assets/localization/local_hy.json

@@ -3384,7 +3384,7 @@
   },
   "zabbix": {
     "zabbixVersions": "Zabbix տարբերակները",
-    "zabbixVersionsDesc": "Խնդրում ենք ընտրել Zabbix սերվերի տարբերակը, որում ցանկանում եք մուտք գործել՝ 5.x կամ 6.x:",
+    "zabbixVersionsDesc": "Խնդրում ենք ընտրել Zabbix սերվերի տարբերակը, որում ցանկանում եք մուտք գործել՝ 5.x, 6.x. կամ 7.x:",
     "logoutConfirmation": "Դուրս գալու հաստատում",
     "logoutDescription": "Վստա՞հ եք, որ ցանկանում եք դուրս գալ Zabbix սերվերից:",
     "vmDisk": "VM սկավառակ",
@@ -3847,7 +3847,9 @@
     "otpCodeErrorLength": "Կոդը պետք է բաղկացած լինի 6 թվից",
     "enterOtpVerifyCode": "Մուտքագրեք 6-նիշ հաստատման կոդը",
     "backToLogin": "Վերադառնալ մուտքի էջ",
-    "qrcodeDescription": "Սկանավորեք այս QR կոդը ձեր նույնականացման հավելվածով կամ մուտքագրեք այս կոդերից մեկը ձեռքով: Դրանից հետո հաստատեք գործողությունը՝ ներքևում մուտքագրելով միանգամյա կոդը:"
+    "qrcodeDescription": "Սկանավորեք այս QR կոդը ձեր նույնականացման հավելվածով կամ մուտքագրեք այս կոդերից մեկը ձեռքով: Դրանից հետո հաստատեք գործողությունը՝ ներքևում մուտքագրելով միանգամյա կոդը:",
+    "showNotification": "Ցուցադրել ծանուցում",
+    "showNotificationDescription": "Ցուցադրել ծանուցում, երբ ինչ-որ բան սխալ է ընթանում"
   },
   "ssoConfiguration": {
     "twoFactorPolicy": "Երկու գործոնի քաղաքականություն",
@@ -3867,7 +3869,8 @@
     "autoUnlockIntervalSec": "Ավտոմատ ապակողպման ինտերվալ (վայրկյան)",
     "maxDurationSec": "Առավելագույն տևողություն (վայրկյան)",
     "idleTimeoutSec": "Անգործության ժամանակավոր պատուհան (վայրկյան)",
-    "maxConcurrentSessions": "Առավելագույն համաժամանակյա սեսիաներ"
+    "maxConcurrentSessions": "Առավելագույն համաժամանակյա սեսիաներ",
+    "errorMaxLimitField": "Դաշտը չպետք է պարունակի ավելի քան {0} նիշ"
   },
   "cacheConfiguration": {
     "cacheConfiguration": "Քեշավորման կոնֆիգուրացիաներ",

package/assets/localization/local_kk.json

@@ -3383,7 +3383,7 @@
   },
   "zabbix": {
     "zabbixVersions": "Zabbix нұсқалары",
-    "zabbixVersionsDesc": "Жүйеге кіргіңіз келетін Zabbix сервер нұсқасын таңдаңыз: 5.x немесе 6.x.",
+    "zabbixVersionsDesc": "Жүйеге кіргіңіз келетін Zabbix сервер нұсқасын таңдаңыз: 5.x, 6.x. немесе 7.x.",
     "logoutConfirmation": "Шығуды растау",
     "logoutDescription": "Zabbix серверінен шынымен шыққыңыз келе ме?",
     "vmDisk": "VM дискі",
@@ -3846,7 +3846,9 @@
     "otpCodeErrorLength": "Код 6 саннан тұруы керек",
     "enterOtpVerifyCode": "6 таңбалы растау кодын енгізіңіз",
     "backToLogin": "Кіру бетіне оралу",
-    "qrcodeDescription": "Бұл QR-кодты аутентификатор қолданбасымен сканерлеңіз немесе осы кодтардың бірін қолмен енгізіңіз. Содан кейін әрекетті төмендегі бір реттік кодты енгізу арқылы растаңыз."
+    "qrcodeDescription": "Бұл QR-кодты аутентификатор қолданбасымен сканерлеңіз немесе осы кодтардың бірін қолмен енгізіңіз. Содан кейін әрекетті төмендегі бір реттік кодты енгізу арқылы растаңыз.",
+    "showNotification": "Хабарландыруды көрсету",
+    "showNotificationDescription": "Бірдеңе дұрыс емес болған кезде хабарландыруды көрсету"
   },
   "ssoConfiguration": {
     "twoFactorPolicy": "Екі факторлы саясат",
@@ -3866,7 +3868,8 @@
     "autoUnlockIntervalSec": "Автоматты ашу аралығы (сек)",
     "maxDurationSec": "Максималды ұзақтық (сек)",
     "idleTimeoutSec": "Босқа тұрған уақыт (сек)",
-    "maxConcurrentSessions": "Максималды бір уақытта қосылған сессиялар"
+    "maxConcurrentSessions": "Максималды бір уақытта қосылған сессиялар",
+    "errorMaxLimitField": "Өріс {0} таңбадан артық болмауы керек"
   },
   "cacheConfiguration": {
     "cacheConfiguration": "Кэшталу конфигурациялары",

package/assets/localization/local_ru.json

@@ -3383,7 +3383,7 @@
   },
   "zabbix": {
     "zabbixVersions": "Версия Zabbix",
-    "zabbixVersionsDesc": "Пожалуйста, выберите версию сервера Zabbix, на которую вы хотите войти: 5.x или 6.x.",
+    "zabbixVersionsDesc": "Пожалуйста, выберите версию сервера Zabbix, на которую вы хотите войти: 5.x, 6.x. или 7.x.",
     "logoutConfirmation": "Подтверждение выхода из системы",
     "logoutDescription": "Вы уверены, что хотите выйти из Zabbix Server?",
     "vmDisk": "Диск ВМ",
@@ -3846,7 +3846,9 @@
     "otpCodeErrorLength": "Код должен состоять из 6 цифр",
     "enterOtpVerifyCode": "Введите 6-значный код подтверждения",
     "backToLogin": "Вернуться ко входу",
-    "qrcodeDescription": "Отсканируйте этот QR-код с помощью приложения-аутентификатора или введите один из этих кодов вручную. После этого подтвердите действие, введя одноразовый код ниже."
+    "qrcodeDescription": "Отсканируйте этот QR-код с помощью приложения-аутентификатора или введите один из этих кодов вручную. После этого подтвердите действие, введя одноразовый код ниже.",
+    "showNotification": "Показывать уведомление",
+    "showNotificationDescription": "Показывать уведомление, когда что-то идёт не так"
   },
   "ssoConfiguration": {
     "twoFactorPolicy": "Политика двухфакторной аутентификации",
@@ -3866,7 +3868,8 @@
     "autoUnlockIntervalSec": "Интервал авторазблокировки (сек)",
     "maxDurationSec": "Максимальная продолжительность (сек)",
     "idleTimeoutSec": "Время простоя (сек)",
-    "maxConcurrentSessions": "Макс. количество одновременных сессий"
+    "maxConcurrentSessions": "Макс. количество одновременных сессий",
+    "errorMaxLimitField": "Поле не должен содержать более {0} символов"
   },
   "cacheConfiguration": {
     "cacheConfiguration": "Конфигурации кэширования",

package/assets/localization/local_zh.json

@@ -3381,7 +3381,7 @@
   },
   "zabbix": {
     "zabbixVersions": "Zabbix 版本",
-    "zabbixVersionsDesc": "请选择您要登录的Zabbix服务器版本：5.x或6.x。",
+    "zabbixVersionsDesc": "请选择您要登录的Zabbix服务器版本：5.x，6.x.或7.x。",
     "logoutConfirmation": "退出确认",
     "logoutDescription": "您确定要从 Zabbix Server 注销吗？",
     "vmDisk": "虚拟机磁盘",
@@ -3844,7 +3844,9 @@
     "otpCodeErrorLength": "代码必须是 6 位数字",
     "enterOtpVerifyCode": "请输入 6 位数的验证码",
     "backToLogin": "返回登录",
-    "qrcodeDescription": "使用您的身份验证器应用程序扫描此QR码，或手动输入其中一个代码。然后，通过输入下面的一次性代码来确认操作。"
+    "qrcodeDescription": "使用您的身份验证器应用程序扫描此QR码，或手动输入其中一个代码。然后，通过输入下面的一次性代码来确认操作。",
+    "showNotification": "显示通知",
+    "showNotificationDescription": "当出现问题时显示通知"
   },
   "ssoConfiguration": {
     "twoFactorPolicy": "双因素策略",
@@ -3864,7 +3866,8 @@
     "autoUnlockIntervalSec": "自动解锁间隔（秒）",
     "maxDurationSec": "最长持续时间（秒）",
     "idleTimeoutSec": "空闲超时（秒）",
-    "maxConcurrentSessions": "最大并发会话数"
+    "maxConcurrentSessions": "最大并发会话数",
+    "errorMaxLimitField": "该字段不能超过 {0} 个字符"
   },
   "cacheConfiguration": {
     "cacheConfiguration": "缓存配置",

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>