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.
- package/assets/localization/local_be.json +2 -1
- package/assets/localization/local_en.json +2 -1
- package/assets/localization/local_hy.json +2 -1
- package/assets/localization/local_kk.json +2 -1
- package/assets/localization/local_ru.json +2 -1
- package/assets/localization/local_zh.json +2 -1
- package/components/atoms/alert/Notification.vue +167 -167
- package/components/atoms/autocomplete/Autocomplete.vue +236 -236
- package/components/atoms/datepicker/Datepicker.vue +612 -612
- package/components/atoms/list/SelectList.vue +62 -62
- package/components/atoms/nav/NavBar.vue +116 -116
- package/components/atoms/nav/VerticalNavBar.vue +89 -89
- package/components/atoms/notificationBar/NotificationBar.vue +175 -175
- package/components/atoms/perPage/PerPage.vue +52 -52
- package/components/atoms/popup/SimplePopup.vue +90 -90
- package/components/atoms/step/VerticalStep.vue +104 -104
- package/components/atoms/switch/Switch.vue +107 -107
- package/components/atoms/table/dataGrid/DataGridColumnSwitch.vue +206 -206
- package/components/atoms/table/dataGrid/DataGridPage.vue +189 -189
- package/components/atoms/tabs/Tabs.vue +189 -189
- package/components/atoms/tooltip/Signpost.vue +224 -224
- package/components/common/BadBrowser.vue +114 -114
- package/components/common/adapterManager/AddAdapterWarningModal.vue +82 -82
- package/components/common/adapterManager/NoActiveAdaptersModal.vue +62 -62
- package/components/common/adapterManager/NoConnectedActiveAdaptersModal.vue +62 -62
- package/components/common/browse/Browse.vue +182 -182
- package/components/common/browse/blocks/Title.vue +66 -66
- package/components/common/diagramMain/Diagram.vue +186 -186
- package/components/common/diagramMain/DiagramMain.vue +986 -986
- package/components/common/diagramMain/adapter/AdapterItem.vue +227 -227
- package/components/common/diagramMain/adapter/AdapterItems.vue +57 -57
- package/components/common/diagramMain/modals/editSettings/tabs/port/IpvFourSettings.vue +339 -339
- package/components/common/diagramMain/modals/editSettings/tabs/port/PortProperties.vue +202 -202
- package/components/common/diagramMain/modals/remove/RemoveModal.vue +226 -226
- package/components/common/diagramMain/network/Contents.vue +238 -238
- package/components/common/feedback/Buttons.vue +232 -227
- package/components/common/feedback/Feedback.vue +261 -261
- package/components/common/feedback/Message.vue +506 -506
- package/components/common/feedback/VisitPortal.vue +53 -53
- package/components/common/help/navbar/left/Left.vue +159 -159
- package/components/common/help/navbar/left/utils/constructAccordion.ts +27 -27
- package/components/common/modals/Rename.vue +165 -165
- package/components/common/monitor/advanced/tools/chartOptionsModal/ChartOptionsModal.vue +2 -1
- package/components/common/monitor/advanced/tools/chartOptionsModal/counters/table/Table.vue +136 -130
- package/components/common/perPage/PerPage.vue +51 -51
- package/components/common/recursionTree/RecursionTree.vue +201 -201
- package/components/common/vm/actions/clone/Clone.vue +545 -545
- package/components/common/vm/actions/clone/select/options/Options.vue +65 -65
- package/components/common/vm/actions/clone/utils.ts +43 -43
- package/components/common/vm/actions/common/config/capabilities.ts +338 -338
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardware.vue +678 -678
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/CoresPerSocket.vue +109 -109
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/Cpu.vue +383 -383
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/limit/Limit.vue +234 -234
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/limit/config/options.ts +28 -28
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/memory/Memory.vue +316 -316
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/memory/config/memoryOptions.ts +35 -35
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/newHardDisk/NewHardDisk.vue +445 -445
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/NewNetwork.vue +288 -288
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/reservation/Reservation.vue +235 -235
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/videoCard/VideoCard.vue +177 -177
- package/components/common/vm/actions/common/customizeHardware/vmoptions/bootOptions/order/Order.vue +197 -197
- package/components/common/vm/actions/common/customizeHardware/vmoptions/generalOptions/GeneralOptions.vue +181 -181
- package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/CopyPaste.vue +51 -51
- package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/RemoteConsoleOptions.vue +253 -253
- package/components/common/vm/actions/common/customizeHardware/vmoptions/remoteConsoleOptions/keymap/Keymap.vue +55 -55
- package/components/common/vm/actions/common/select/storage/Storage.vue +194 -194
- package/components/common/vm/actions/common/select/storage/config/config.ts +154 -154
- package/components/common/wizards/datastore/add/nfs/Nfs.vue +94 -94
- package/components/common/wizards/datastore/add/nfs/configuration/Configuration.vue +377 -377
- package/components/common/wizards/datastore/add/nfs/configuration/serversList/ServersList.vue +123 -123
- package/components/common/wizards/datastore/add/nfs/kerberosAuthentication/KerberosAuthentication.vue +54 -54
- package/components/common/wizards/datastore/add/sharedStorm/deviceSelection/hostTable/HostTable.vue +131 -131
- package/components/common/wizards/datastore/add/sharedStorm/partitionConfiguration/PartitionConfiguration.vue +230 -230
- package/composables/useLocal.ts +38 -38
- package/minify.js +146 -146
- package/models/store/interfaces.ts +37 -37
- package/models/store/storage/interfaces.ts +32 -32
- package/models/store/types.ts +32 -32
- package/modules/fixContentBuild/utils/methods.ts +114 -114
- package/package.json +1 -1
- package/public/spice-console/application/codec.js +257 -257
- package/public/spice-console/lib/rasterEngine.js +907 -907
- package/public/spice-console/network/spicechannel.js +369 -369
- 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
|
|
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>
|