bfg-common 1.2.67 → 1.2.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/assets/localization/local_be.json +2 -1
  2. package/assets/localization/local_en.json +2 -1
  3. package/assets/localization/local_hy.json +2 -1
  4. package/assets/localization/local_kk.json +2 -1
  5. package/assets/localization/local_ru.json +2 -1
  6. package/assets/localization/local_zh.json +2 -1
  7. package/components/atoms/alert/Notification.vue +167 -167
  8. package/components/atoms/autocomplete/Autocomplete.vue +236 -236
  9. package/components/atoms/datepicker/Datepicker.vue +612 -612
  10. package/components/atoms/list/SelectList.vue +62 -62
  11. package/components/atoms/nav/NavBar.vue +116 -116
  12. package/components/atoms/nav/VerticalNavBar.vue +89 -89
  13. package/components/atoms/notificationBar/NotificationBar.vue +175 -175
  14. package/components/atoms/perPage/PerPage.vue +52 -52
  15. package/components/atoms/popup/SimplePopup.vue +90 -90
  16. package/components/atoms/step/VerticalStep.vue +104 -104
  17. package/components/atoms/switch/Switch.vue +107 -107
  18. package/components/atoms/table/dataGrid/DataGridColumnSwitch.vue +206 -206
  19. package/components/atoms/table/dataGrid/DataGridPage.vue +189 -189
  20. package/components/atoms/tabs/Tabs.vue +189 -189
  21. package/components/atoms/tooltip/Signpost.vue +224 -224
  22. package/components/common/BadBrowser.vue +114 -114
  23. package/components/common/adapterManager/AddAdapterWarningModal.vue +82 -82
  24. package/components/common/adapterManager/NoActiveAdaptersModal.vue +62 -62
  25. package/components/common/adapterManager/NoConnectedActiveAdaptersModal.vue +62 -62
  26. package/components/common/browse/Browse.vue +182 -182
  27. package/components/common/browse/blocks/Title.vue +66 -66
  28. package/components/common/diagramMain/Diagram.vue +186 -186
  29. package/components/common/diagramMain/DiagramMain.vue +986 -986
  30. package/components/common/diagramMain/adapter/AdapterItem.vue +227 -227
  31. package/components/common/diagramMain/adapter/AdapterItems.vue +57 -57
  32. package/components/common/diagramMain/modals/editSettings/tabs/port/IpvFourSettings.vue +339 -339
  33. package/components/common/diagramMain/modals/editSettings/tabs/port/PortProperties.vue +202 -202
  34. package/components/common/diagramMain/modals/remove/RemoveModal.vue +226 -226
  35. package/components/common/diagramMain/network/Contents.vue +238 -238
  36. package/components/common/feedback/Buttons.vue +232 -227
  37. package/components/common/feedback/Feedback.vue +261 -261
  38. package/components/common/feedback/Message.vue +506 -506
  39. package/components/common/feedback/VisitPortal.vue +53 -53
  40. package/components/common/help/navbar/left/Left.vue +159 -159
  41. package/components/common/help/navbar/left/utils/constructAccordion.ts +27 -27
  42. package/components/common/modals/Rename.vue +165 -165
  43. package/components/common/monitor/advanced/tools/chartOptionsModal/ChartOptionsModal.vue +2 -1
  44. package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/Table.vue +136 -130
  45. package/components/common/perPage/PerPage.vue +51 -51
  46. package/components/common/recursionTree/RecursionTree.vue +201 -201
  47. package/components/common/vm/actions/clone/Clone.vue +545 -545
  48. package/components/common/vm/actions/clone/select/options/Options.vue +65 -65
  49. package/components/common/vm/actions/clone/utils.ts +43 -43
  50. package/components/common/vm/actions/common/config/capabilities.ts +338 -338
  51. package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardware.vue +678 -678
  52. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/CoresPerSocket.vue +109 -109
  53. package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/Cpu.vue +383 -383
  54. package/components/common/vm/actions/common/customizeHardware/virtualHardware/limit/Limit.vue +234 -234
  55. package/components/common/vm/actions/common/customizeHardware/virtualHardware/limit/config/options.ts +28 -28
  56. package/components/common/vm/actions/common/customizeHardware/virtualHardware/memory/Memory.vue +316 -316
  57. package/components/common/vm/actions/common/customizeHardware/virtualHardware/memory/config/memoryOptions.ts +35 -35
  58. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/NewHardDisk.vue +445 -445
  59. package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/NewNetwork.vue +288 -288
  60. package/components/common/vm/actions/common/customizeHardware/virtualHardware/reservation/Reservation.vue +235 -235
  61. package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/VideoCard.vue +177 -177
  62. package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/Order.vue +197 -197
  63. package/components/common/vm/actions/common/customizeHardware/vmoptions/generalOptions/GeneralOptions.vue +181 -181
  64. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/CopyPaste.vue +51 -51
  65. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/RemoteConsoleOptions.vue +253 -253
  66. package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/keymap/Keymap.vue +55 -55
  67. package/components/common/vm/actions/common/select/storage/Storage.vue +194 -194
  68. package/components/common/vm/actions/common/select/storage/config/config.ts +154 -154
  69. package/components/common/wizards/datastore/add/nfs/Nfs.vue +94 -94
  70. package/components/common/wizards/datastore/add/nfs/configuration/Configuration.vue +377 -377
  71. package/components/common/wizards/datastore/add/nfs/configuration/serversList/ServersList.vue +123 -123
  72. package/components/common/wizards/datastore/add/nfs/kerberosAuthentication/KerberosAuthentication.vue +54 -54
  73. package/components/common/wizards/datastore/add/sharedStorm/deviceSelection/hostTable/HostTable.vue +131 -131
  74. package/components/common/wizards/datastore/add/sharedStorm/partitionConfiguration/PartitionConfiguration.vue +230 -230
  75. package/composables/useLocal.ts +38 -38
  76. package/minify.js +146 -146
  77. package/models/store/interfaces.ts +37 -37
  78. package/models/store/storage/interfaces.ts +32 -32
  79. package/models/store/types.ts +32 -32
  80. package/modules/fixContentBuild/utils/methods.ts +114 -114
  81. package/package.json +1 -1
  82. package/public/spice-console/application/codec.js +257 -257
  83. package/public/spice-console/lib/rasterEngine.js +907 -907
  84. package/public/spice-console/network/spicechannel.js +369 -369
  85. package/utils/contentBuild.ts +34 -34
@@ -92,7 +92,7 @@
92
92
  "amount": "Ёмістасць",
93
93
  "amountMayBeTooLarge": "Сума можа быць занадта вялікай",
94
94
  "anyDomainController": "Любы кантролер дамена ў дамене",
95
- "anyFeedbackYouProvideMay": "Любая зваротная сувязь, прадстаўленая вамі, будзе каштоўным укладам у паляпшэнне нашых прадуктаў і паслуг, а таксама ў вырашэнне любых праблем, якія ўзнікаюць. Важна звярнуць увагу на тое, што абарона канфідэнцыйнасці вашай інфармацыі мае для нас высокі прыярытэт. Таму, просім вас выдаліць ці схаваць любую канфідэнцыйную, адчувальную ці асабістую інфармацыю перад прадастаўленнем скрыншотаў распрацоўніку. Таксама, калі ласка, улічыце, што ваш адрас электроннай пошты будзе выкарыстоўвацца выключна для мэт сувязі з вамі.",
95
+ "anyFeedbackYouProvideMay": "Любы водгук, які вы дасце, можа быць выкарыстаны Кампаніяй для паляпшэння Кампаніі прадуктаў і паслуг, каб выправіць праблемы і пракансультаваць кліентаў, як лепш за ўсё разгарнуць і выкарыстоўваць прадукты і паслугі кампаніі, як выкладзена далей ст",
96
96
  "app": "дадатак",
97
97
  "applicationGroup": "Група прыкладанняў",
98
98
  "april": "Красавік",
@@ -1830,6 +1830,7 @@
1830
1830
  "writeBack": "Адказаць",
1831
1831
  "writeThrough": "Напісаць праз",
1832
1832
  "yes": "так",
1833
+ "youAreResponsibleForObfuscatingOrRemoving": "Вы несяце адказнасць за ўтойванне або выдаленне любой канфідэнцыйнай, адчувальнай або асабістай інфармацыі з любых скрыншотаў, якія вы можаце даць Кампаніі, і не павінны ўключаць такую ​​інфармацыю ў свой водгук. Ваш адрас электроннай пошты будзе выкарыстоўвацца для сувязі з вамі ў сувязі з вашым водгукам.",
1833
1834
  "youCanFindMore": "Вы можаце знайсці дадатковую інфармацыю на старонцы прашыўкі",
1834
1835
  "yourSessionExpireAfter": "Ваш сеанс вось-вось скончыцца пасля",
1835
1836
  "zlibCompression": "Сцісканне Zlib",
@@ -92,7 +92,7 @@
92
92
  "amount": "Capacity",
93
93
  "amountMayBeTooLarge": "The amount may be too large",
94
94
  "anyDomainController": "Any domain controller in the domain",
95
- "anyFeedbackYouProvideMay": "Any feedback you provide will be a valuable contribution to improving our products and services and solving any problems that arise. It is important to note that protecting the privacy of your information is a high priority for us. Therefore, we request that you remove or hide any confidential, sensitive or personal information before providing screenshots to the developer. Please also note that your email address will be used solely for the purpose of communicating with you.",
95
+ "anyFeedbackYouProvideMay": "Any feedback you provide may be used by Company to improve Company products and services, to fix problems, and to advise customers on how best to deploy and use Company products and services as further set forth in",
96
96
  "app": "App",
97
97
  "applicationGroup": "Application Group",
98
98
  "april": "April",
@@ -1830,6 +1830,7 @@
1830
1830
  "writeBack": "Write Back",
1831
1831
  "writeThrough": "Write Through",
1832
1832
  "yes": "Yes",
1833
+ "youAreResponsibleForObfuscatingOrRemoving": "You are responsible for obfuscating or removing any confidential, sensitive or personal information from any screenshots you may provide to Company and should not include any such information in your feedback. Your email address will be used to contact you in relation to your feedback.",
1833
1834
  "youCanFindMore": "You can find more related information at the Firmware page",
1834
1835
  "yourSessionExpireAfter": "Your session is about to expire after",
1835
1836
  "zlibCompression": "Zlib Compression",
@@ -92,7 +92,7 @@
92
92
  "amount": "Տարողություն",
93
93
  "amountMayBeTooLarge": "Գումարը կարող է չափազանց մեծ լինել",
94
94
  "anyDomainController": "Դոմենի ցանկացած տիրույթի վերահսկիչ",
95
- "anyFeedbackYouProvideMay": "Ձեր տրամադրած ցանկացած արձագանք արժեքավոր ներդրում կլինի մեր արտադրանքի և ծառայությունների բարելավման և ծագած խնդիրների լուծման գործում: Կարևոր է նշել, որ ձեր տեղեկատվության գաղտնիության պաշտպանությունը մեզ համար առաջնահերթություն է: Հետևաբար, մենք խնդրում ենք հեռացնել կամ թաքցնել ցանկացած գաղտնի, զգայուն կամ անձնական տեղեկատվություն՝ նախքան մշակողին սքրինշոթներ տրամադրելը: Խնդրում ենք նաև նկատի ունենալ, որ ձեր էլ.փոստի հասցեն կօգտագործվի բացառապես ձեզ հետ շփվելու նպատակով:",
95
+ "anyFeedbackYouProvideMay": "Ձեր տրամադրած ցանկացած արձագանք կարող է օգտագործվել Ընկերության կողմից՝ բարելավելու Ընկերության ապրանքներն ու ծառայությունները, խնդիրները շտկելու և հաճախորդներին խորհուրդ տալու, թե ինչպես լավագույնս տեղակայել և օգտագործել Ընկերության արտադրանքներն ու ծառայությունները, ինչպես հետագայում նշված է.",
96
96
  "app": "Հավելված",
97
97
  "applicationGroup": "Դիմումների խումբ",
98
98
  "april": "Ապրիլ",
@@ -1830,6 +1830,7 @@
1830
1830
  "writeBack": "Պատասխանել",
1831
1831
  "writeThrough": "Գրեք միջոցով",
1832
1832
  "yes": "Այո՛",
1833
+ "youAreResponsibleForObfuscatingOrRemoving": "Դուք պատասխանատվություն եք կրում ցանկացած գաղտնի, զգայուն կամ անձնական տեղեկությունները սքրինշոթներից, որոնք դուք կարող եք տրամադրել Ընկերությանը շփոթեցնելու կամ հեռացնելու համար, և չպետք է ներառեք որևէ այդպիսի տեղեկություն ձեր կարծիքում: Ձեր էլփոստի հասցեն կօգտագործվի ձեզ հետ կապ հաստատելու համար՝ կապված ձեր կարծիքի հետ:",
1833
1834
  "youCanFindMore": "Դուք կարող եք գտնել ավելի շատ առնչվող տեղեկատվություն որոնվածի էջում",
1834
1835
  "yourSessionExpireAfter": "Ձեր նիստը շուտով կավարտվի դրանից հետո",
1835
1836
  "zlibCompression": "zlib սեղմում",
@@ -92,7 +92,7 @@
92
92
  "amount": "Сыйымдылығы",
93
93
  "amountMayBeTooLarge": "Сома тым үлкен болуы мүмкін",
94
94
  "anyDomainController": "Домендегі кез келген домен контроллері",
95
- "anyFeedbackYouProvideMay": "Сіз берген кез келген кері байланыс өнімдеріміз бен қызметтерімізді жақсартуға және туындаған кез келген мәселелерді шешуге құнды үлес болады. Сіздің ақпаратыңыздың құпиялылығын қорғау біз үшін жоғары басымдылық екенін атап өткен жөн. Сондықтан әзірлеушіге скриншоттарды бермес бұрын кез келген құпия, құпия немесе жеке ақпаратты жоюды немесе жасыруды сұраймыз. Сондай-ақ, сіздің электрондық пошта мекенжайыңыз тек сізбен байланысу мақсатында пайдаланылатынын ескеріңіз.",
95
+ "anyFeedbackYouProvideMay": "Сіз берген кез келген пікірді Компания Компанияның өнімдері мен қызметтерін жақсарту, мәселелерді шешу және тұтынушыларға Компанияның өнімдері мен қызметтерін бұдан әрі осы бөлімде көрсетілгендей ең жақсы орналастыру және пайдалану туралы кеңес беру үшін пайдалануы мүмкін.",
96
96
  "app": "Қолданба",
97
97
  "applicationGroup": "Қолданбалар тобы",
98
98
  "april": "Сәуір",
@@ -1830,6 +1830,7 @@
1830
1830
  "writeBack": "Жауап",
1831
1831
  "writeThrough": "арқылы жазыңыз",
1832
1832
  "yes": "Иә",
1833
+ "youAreResponsibleForObfuscatingOrRemoving": "Сіз кез келген құпия, құпия немесе жеке ақпаратты Компанияға бере алатын кез келген скриншоттардан бұрмалауға немесе жоюға жауаптысыз және пікіріңізге мұндай ақпаратты қоспауыңыз керек. Сіздің электрондық пошта мекенжайыңыз пікіріңізге байланысты сізбен байланысу үшін пайдаланылады.",
1833
1834
  "youCanFindMore": "Толығырақ қатысты ақпаратты микробағдарлама бетінен таба аласыз",
1834
1835
  "yourSessionExpireAfter": "Сіздің сессияңыз кейін аяқталуға жақын",
1835
1836
  "zlibCompression": "zlib қысу",
@@ -92,7 +92,7 @@
92
92
  "amount": "Объем",
93
93
  "amountMayBeTooLarge": "Сумма может быть слишком большой",
94
94
  "anyDomainController": "Любой контроллер домена в домене",
95
- "anyFeedbackYouProvideMay": "Любая обратная связь, предоставленная вами, будет ценным вкладом в улучшение наших продуктов и услуг, а также в решение любых возникающих проблем. Важно обратить внимание на то, что защита конфиденциальности вашей информации имеет для нас высокий приоритет. Поэтому, просим вас удалить или скрыть любую конфиденциальную, чувствительную или личную информацию перед предоставлением скриншотов разработчику. Также, пожалуйста, учтите, что ваш адрес электронной почты будет использоваться исключительно для целей связи с вами.",
95
+ "anyFeedbackYouProvideMay": "Любая предоставленная вами обратная связь может быть использована Компанией для улучшения продуктов и услуг Компании, устранения проблем и консультирования клиентов о том, как лучше всего развертывать и использовать продукты и услуги Компании, как указано далее в",
96
96
  "app": "Приложение",
97
97
  "applicationGroup": "Группа приложений",
98
98
  "april": "Апрель",
@@ -1830,6 +1830,7 @@
1830
1830
  "writeBack": "Ответить",
1831
1831
  "writeThrough": "Написать через",
1832
1832
  "yes": "Да",
1833
+ "youAreResponsibleForObfuscatingOrRemoving": "Вы несете ответственность за сокрытие или удаление любой конфиденциальной, конфиденциальной или личной информации со скриншотов, которые вы можете предоставить Компании, и не должны включать такую ​​информацию в свой отзыв. Ваш адрес электронной почты будет использоваться для связи с вами по поводу вашего отзыва.",
1833
1834
  "youCanFindMore": "Дополнительную информацию можно найти на странице производителя",
1834
1835
  "yourSessionExpireAfter": "Ваш сеанс вот-вот истечет после",
1835
1836
  "zlibCompression": "Zlib-сжатие",
@@ -92,7 +92,7 @@
92
92
  "amount": "容量",
93
93
  "amountMayBeTooLarge": "金额可能太大",
94
94
  "anyDomainController": "域中的任何域控制器",
95
- "anyFeedbackYouProvideMay": "您提供的任何反馈都将有助于改进我们的产品和服务以及解决出现的任何问题。值得注意的是,保护您的信息隐私是我们的首要任务。因此,我们要求您在向开发者提供屏幕截图之前删除或隐藏任何机密、敏感或个人信息。另请注意,您的电子邮件地址将仅用于与您沟通的目的。",
95
+ "anyFeedbackYouProvideMay": "公司可能會使用您提供的任何反饋來改進公司產品和服務,解決問題,並就如何最好地部署和使用公司產品和服務向客戶提出建議,具體請參見",
96
96
  "app": "应用程序",
97
97
  "applicationGroup": "应用组",
98
98
  "april": "四月",
@@ -1830,6 +1830,7 @@
1830
1830
  "writeBack": "回答",
1831
1831
  "writeThrough": "通过写",
1832
1832
  "yes": "是的",
1833
+ "youAreResponsibleForObfuscatingOrRemoving": "您有責任混淆或刪除您可能提供給公司的任何屏幕截圖中的任何機密、敏感或個人信息,並且不應在您的反饋中包含任何此類信息。您的電子郵件地址將用於就您的反饋與您聯繫。",
1833
1834
  "youCanFindMore": "您可以在固件頁面找到更多相關信息",
1834
1835
  "yourSessionExpireAfter": "您的会话将在以下时间后到期",
1835
1836
  "zlibCompression": "zlib压缩",
@@ -1,167 +1,167 @@
1
- <template>
2
- <div class="notification">
3
- <div
4
- class="notification-container-wrap animation"
5
- :class="{ active: isActive }"
6
- >
7
- <div class="notification-container">
8
- <div v-show="props.show" class="toast">
9
- <atoms-the-icon
10
- class="toast-icon"
11
- :class="iconName !== 'info' && 'with'"
12
- :name="iconName"
13
- />
14
- <div class="toast-content">
15
- <div class="flex-align-center flex-space-between">
16
- <h4>{{ props.title }}</h4>
17
- <button
18
- :id="`${props.testId}-close-button`"
19
- :title="localization.closeNotification"
20
- @click="hide"
21
- >
22
- <atoms-the-icon name="close" />
23
- </button>
24
- </div>
25
- <div class="description">
26
- <slot>
27
- <p class="pre-line">{{ props.description }}</p>
28
- </slot>
29
- </div>
30
- </div>
31
- </div>
32
- </div>
33
- </div>
34
- </div>
35
- </template>
36
-
37
- <script setup lang="ts">
38
- import { UI_I_Localization } from '~/models/interfaces'
39
- import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/models/enums'
40
- import { UI_T_Status } from '~/components/atoms/alert/models/types'
41
-
42
- const props = withDefaults(
43
- defineProps<{
44
- testId?: string
45
- status: UI_T_Status
46
- id: number
47
- show: boolean
48
- title: string
49
- description: string
50
- }>(),
51
- { testId: 'ui-notification' }
52
- )
53
- const emits = defineEmits<{
54
- (event: 'hide', value: number): void
55
- }>()
56
-
57
- const localization = computed<UI_I_Localization>(() => useLocal())
58
- const hide = () => {
59
- isActive.value = false
60
-
61
- setTimeout(() => {
62
- emits('hide', props.id)
63
- }, 200)
64
- }
65
- const isActive = ref<boolean>(false)
66
-
67
- const iconName = computed<string>(
68
- () => UI_E_IconsByStatusNotification[props.status]
69
- )
70
-
71
- setTimeout(() => {
72
- isActive.value = true
73
- }, 1000)
74
- </script>
75
-
76
- <style scoped lang="scss">
77
- @import '~/assets/scss/common/mixins.scss';
78
-
79
- .notification {
80
- .notification-container-wrap {
81
- display: block;
82
- margin-top: 10px;
83
- width: 414px;
84
- position: relative;
85
- right: -600px;
86
- opacity: 0;
87
-
88
- &.active {
89
- right: 0;
90
- opacity: 1;
91
- }
92
-
93
- .notification-container {
94
- @include flex($dir: column, $just: flex-end);
95
- margin-right: 0;
96
-
97
- .toast {
98
- @include flex($dir: row);
99
- background-color: #25333d;
100
- border-radius: 3px;
101
- box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
102
- margin: 0;
103
- padding: 12px;
104
- transform: scale(1);
105
- transform-origin: 100% 0;
106
- width: 100%;
107
-
108
- .toast-icon {
109
- width: 36px;
110
- height: 36px;
111
- &.with {
112
- width: 26px;
113
- height: 26px;
114
- }
115
- }
116
-
117
- .toast-content {
118
- padding-left: 12px;
119
- width: 100%;
120
-
121
- h4 {
122
- color: #e9ecef;
123
- font-size: 14px;
124
- font-weight: 500;
125
- line-height: 24px;
126
- margin-top: 0;
127
- max-width: 240px;
128
- overflow: hidden;
129
- text-overflow: ellipsis;
130
- white-space: nowrap;
131
- }
132
-
133
- button {
134
- background: transparent;
135
- border: none;
136
- border-radius: 100%;
137
- cursor: pointer;
138
- display: inline-block;
139
- height: 30px;
140
- position: absolute;
141
- right: 8px;
142
- top: 8px;
143
- width: 30px;
144
-
145
- svg {
146
- width: 16px;
147
- height: 16px;
148
- fill: #adbbc4;
149
- margin-left: 1px;
150
- margin-top: -8px;
151
- }
152
- }
153
-
154
- .description {
155
- max-height: 60vh;
156
- overflow: auto;
157
-
158
- p {
159
- color: var(--global-font-color6);
160
- }
161
- }
162
- }
163
- }
164
- }
165
- }
166
- }
167
- </style>
1
+ <template>
2
+ <div class="notification">
3
+ <div
4
+ class="notification-container-wrap animation"
5
+ :class="{ active: isActive }"
6
+ >
7
+ <div class="notification-container">
8
+ <div v-show="props.show" class="toast">
9
+ <atoms-the-icon
10
+ class="toast-icon"
11
+ :class="iconName !== 'info' && 'with'"
12
+ :name="iconName"
13
+ />
14
+ <div class="toast-content">
15
+ <div class="flex-align-center flex-space-between">
16
+ <h4>{{ props.title }}</h4>
17
+ <button
18
+ :id="`${props.testId}-close-button`"
19
+ :title="localization.closeNotification"
20
+ @click="hide"
21
+ >
22
+ <atoms-the-icon name="close" />
23
+ </button>
24
+ </div>
25
+ <div class="description">
26
+ <slot>
27
+ <p class="pre-line">{{ props.description }}</p>
28
+ </slot>
29
+ </div>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </template>
36
+
37
+ <script setup lang="ts">
38
+ import { UI_I_Localization } from '~/models/interfaces'
39
+ import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/models/enums'
40
+ import { UI_T_Status } from '~/components/atoms/alert/models/types'
41
+
42
+ const props = withDefaults(
43
+ defineProps<{
44
+ testId?: string
45
+ status: UI_T_Status
46
+ id: number
47
+ show: boolean
48
+ title: string
49
+ description: string
50
+ }>(),
51
+ { testId: 'ui-notification' }
52
+ )
53
+ const emits = defineEmits<{
54
+ (event: 'hide', value: number): void
55
+ }>()
56
+
57
+ const localization = computed<UI_I_Localization>(() => useLocal())
58
+ const hide = () => {
59
+ isActive.value = false
60
+
61
+ setTimeout(() => {
62
+ emits('hide', props.id)
63
+ }, 200)
64
+ }
65
+ const isActive = ref<boolean>(false)
66
+
67
+ const iconName = computed<string>(
68
+ () => UI_E_IconsByStatusNotification[props.status]
69
+ )
70
+
71
+ setTimeout(() => {
72
+ isActive.value = true
73
+ }, 1000)
74
+ </script>
75
+
76
+ <style scoped lang="scss">
77
+ @import '~/assets/scss/common/mixins.scss';
78
+
79
+ .notification {
80
+ .notification-container-wrap {
81
+ display: block;
82
+ margin-top: 10px;
83
+ width: 414px;
84
+ position: relative;
85
+ right: -600px;
86
+ opacity: 0;
87
+
88
+ &.active {
89
+ right: 0;
90
+ opacity: 1;
91
+ }
92
+
93
+ .notification-container {
94
+ @include flex($dir: column, $just: flex-end);
95
+ margin-right: 0;
96
+
97
+ .toast {
98
+ @include flex($dir: row);
99
+ background-color: #25333d;
100
+ border-radius: 3px;
101
+ box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
102
+ margin: 0;
103
+ padding: 12px;
104
+ transform: scale(1);
105
+ transform-origin: 100% 0;
106
+ width: 100%;
107
+
108
+ .toast-icon {
109
+ width: 36px;
110
+ height: 36px;
111
+ &.with {
112
+ width: 26px;
113
+ height: 26px;
114
+ }
115
+ }
116
+
117
+ .toast-content {
118
+ padding-left: 12px;
119
+ width: 100%;
120
+
121
+ h4 {
122
+ color: #e9ecef;
123
+ font-size: 14px;
124
+ font-weight: 500;
125
+ line-height: 24px;
126
+ margin-top: 0;
127
+ max-width: 240px;
128
+ overflow: hidden;
129
+ text-overflow: ellipsis;
130
+ white-space: nowrap;
131
+ }
132
+
133
+ button {
134
+ background: transparent;
135
+ border: none;
136
+ border-radius: 100%;
137
+ cursor: pointer;
138
+ display: inline-block;
139
+ height: 30px;
140
+ position: absolute;
141
+ right: 8px;
142
+ top: 8px;
143
+ width: 30px;
144
+
145
+ svg {
146
+ width: 16px;
147
+ height: 16px;
148
+ fill: #adbbc4;
149
+ margin-left: 1px;
150
+ margin-top: -8px;
151
+ }
152
+ }
153
+
154
+ .description {
155
+ max-height: 60vh;
156
+ overflow: auto;
157
+
158
+ p {
159
+ color: var(--global-font-color6);
160
+ }
161
+ }
162
+ }
163
+ }
164
+ }
165
+ }
166
+ }
167
+ </style>