bfg-common 1.3.225 → 1.3.226
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/Alert.vue +95 -95
- package/components/atoms/alert/Notification.vue +170 -170
- package/components/atoms/switch/Switch.vue +111 -111
- package/components/atoms/table/compact/Compact.vue +526 -526
- package/components/atoms/tooltip/Signpost.vue +225 -225
- package/components/common/pages/Tasks.vue +120 -120
- package/components/common/recursionTree/RecursionTree.vue +203 -203
- package/components/common/vm/actions/add/Add.vue +575 -575
- package/components/common/vm/actions/clone/Clone.vue +518 -518
- package/components/common/vm/actions/common/customizeHardware/CustomizeHardware.vue +269 -269
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/VirtualHardware.vue +693 -693
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/cpu/CpuModel.vue +220 -220
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/lib/config/dropdownItems.ts +59 -59
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/newNetwork/NewNetwork.vue +294 -294
- package/components/common/vm/actions/common/customizeHardware/virtualHardware/newPciDevice/NewPciDevice.vue +165 -165
- package/components/common/vm/actions/common/select/storage/lib/config/config.ts +166 -166
- package/components/common/vm/actions/editSettings/EditSettings.vue +313 -313
- package/components/common/weekSelect/WeekSelect.vue +112 -112
- package/components/common/weekSelect/lib/config/options.ts +10 -10
- package/composables/useAppVersion.ts +21 -21
- package/composables/useEnvLanguage.ts +20 -20
- package/lib/utils/sendTask.ts +72 -72
- package/minify.js +146 -146
- 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/store/main/lib/interfaces.ts +9 -9
- package/store/tasks/actions.ts +133 -133
- package/store/tasks/getters.ts +25 -25
- package/store/tasks/lib/models/interfaces.ts +18 -18
- package/store/tasks/mutations.ts +58 -58
- package/store/tasks/state.ts +16 -16
|
@@ -2337,5 +2337,6 @@
|
|
|
2337
2337
|
"noNetworks": "Ніякіх сетак",
|
|
2338
2338
|
"licenseName": "Назва ліцэнзіі",
|
|
2339
2339
|
"newLicense": "Новая ліцэнзія",
|
|
2340
|
-
"addAdditionalPhysicalAdapterToSwitch": "Дадайце дадатковы фізічны сеткавы адаптар да камутатара."
|
|
2340
|
+
"addAdditionalPhysicalAdapterToSwitch": "Дадайце дадатковы фізічны сеткавы адаптар да камутатара.",
|
|
2341
|
+
"currentVariable": "Ток {0}"
|
|
2341
2342
|
}
|
|
@@ -2341,5 +2341,6 @@
|
|
|
2341
2341
|
"noNetworks": "No networks",
|
|
2342
2342
|
"licenseName": "License name",
|
|
2343
2343
|
"newLicense": "New license",
|
|
2344
|
-
"addAdditionalPhysicalAdapterToSwitch": "Add an additional physical network adapter to the switch."
|
|
2344
|
+
"addAdditionalPhysicalAdapterToSwitch": "Add an additional physical network adapter to the switch.",
|
|
2345
|
+
"currentVariable": "Current {0}"
|
|
2345
2346
|
}
|
|
@@ -2341,5 +2341,6 @@
|
|
|
2341
2341
|
"noNetworks": "Ցանցեր առկա չեն",
|
|
2342
2342
|
"licenseName": "Լիցենզիայի անվանումը",
|
|
2343
2343
|
"newLicense": "Նոր լիցենզիա",
|
|
2344
|
-
"addAdditionalPhysicalAdapterToSwitch": "Անջատիչին ավելացրեք լրացուցիչ ֆիզիկական ցանցային ադապտեր:"
|
|
2344
|
+
"addAdditionalPhysicalAdapterToSwitch": "Անջատիչին ավելացրեք լրացուցիչ ֆիզիկական ցանցային ադապտեր:",
|
|
2345
|
+
"currentVariable": "Ընթացիկ {0}"
|
|
2345
2346
|
}
|
|
@@ -2340,5 +2340,6 @@
|
|
|
2340
2340
|
"noNetworks": "Желілер жоқ",
|
|
2341
2341
|
"licenseName": "Лицензия атауы",
|
|
2342
2342
|
"newLicense": "Жаңа лицензия",
|
|
2343
|
-
"addAdditionalPhysicalAdapterToSwitch": "Коммутаторға қосымша физикалық желі адаптерін қосыңыз."
|
|
2343
|
+
"addAdditionalPhysicalAdapterToSwitch": "Коммутаторға қосымша физикалық желі адаптерін қосыңыз.",
|
|
2344
|
+
"currentVariable": "Ағымдағы {0}"
|
|
2344
2345
|
}
|
|
@@ -2346,5 +2346,6 @@
|
|
|
2346
2346
|
"noNetworks": "Нет сетей",
|
|
2347
2347
|
"licenseName": "Название лицензии",
|
|
2348
2348
|
"newLicense": "Новая лицензия",
|
|
2349
|
-
"addAdditionalPhysicalAdapterToSwitch": "Добавьте к коммутатору дополнительный физический сетевой адаптер."
|
|
2349
|
+
"addAdditionalPhysicalAdapterToSwitch": "Добавьте к коммутатору дополнительный физический сетевой адаптер.",
|
|
2350
|
+
"currentVariable": "Ағымдағы {0}"
|
|
2350
2351
|
}
|
|
@@ -2340,5 +2340,6 @@
|
|
|
2340
2340
|
"noNetworks": "没有网络",
|
|
2341
2341
|
"licenseName": "许可证名称",
|
|
2342
2342
|
"newLicense": "新许可证",
|
|
2343
|
-
"addAdditionalPhysicalAdapterToSwitch": "向交换机添加额外的物理网络适配器。"
|
|
2343
|
+
"addAdditionalPhysicalAdapterToSwitch": "向交换机添加额外的物理网络适配器。",
|
|
2344
|
+
"currentVariable": "当前的 {0}"
|
|
2344
2345
|
}
|
|
@@ -1,95 +1,95 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div :class="['alert', status]">
|
|
3
|
-
<div class="alert-items">
|
|
4
|
-
<slot v-if="$slots.headline" name="headline" :icon="iconName" />
|
|
5
|
-
|
|
6
|
-
<slot name="body">
|
|
7
|
-
<div v-for="(item, key) in items" :key="key" class="alert-item">
|
|
8
|
-
<div v-if="!$slots.headline" class="alert-icon-wrapper">
|
|
9
|
-
<atoms-the-icon
|
|
10
|
-
:class="['alert-icon', iconName]"
|
|
11
|
-
:name="iconName"
|
|
12
|
-
/>
|
|
13
|
-
</div>
|
|
14
|
-
|
|
15
|
-
<slot :item="item" :index="key">
|
|
16
|
-
<span class="alert-text">{{ item }}</span>
|
|
17
|
-
</slot>
|
|
18
|
-
</div>
|
|
19
|
-
</slot>
|
|
20
|
-
</div>
|
|
21
|
-
<button
|
|
22
|
-
v-if="!hideCloseIcon"
|
|
23
|
-
:id="`${props.testId}-close-button`"
|
|
24
|
-
class="close"
|
|
25
|
-
@click="removeAlert"
|
|
26
|
-
>
|
|
27
|
-
<atoms-the-icon class="alert-icon" name="close" />
|
|
28
|
-
</button>
|
|
29
|
-
</div>
|
|
30
|
-
</template>
|
|
31
|
-
|
|
32
|
-
<script setup lang="ts">
|
|
33
|
-
import { UI_E_IconsByStatus } from '~/components/atoms/alert/lib/models/enums'
|
|
34
|
-
import type {
|
|
35
|
-
UI_T_AlertStatus,
|
|
36
|
-
UI_T_AlertIcon,
|
|
37
|
-
} from '~/components/atoms/alert/lib/models/types'
|
|
38
|
-
|
|
39
|
-
const props = withDefaults(
|
|
40
|
-
defineProps<{
|
|
41
|
-
status: UI_T_AlertStatus
|
|
42
|
-
items: string[] | any
|
|
43
|
-
testId?: string
|
|
44
|
-
hideCloseIcon?: boolean
|
|
45
|
-
}>(),
|
|
46
|
-
{ testId: 'ui-alert' }
|
|
47
|
-
)
|
|
48
|
-
const emits = defineEmits<{
|
|
49
|
-
(event: 'remove'): void
|
|
50
|
-
}>()
|
|
51
|
-
|
|
52
|
-
const removeAlert = (): void => {
|
|
53
|
-
emits('remove')
|
|
54
|
-
}
|
|
55
|
-
const iconName = computed<UI_T_AlertIcon>(
|
|
56
|
-
() => UI_E_IconsByStatus[props.status as UI_T_AlertStatus]
|
|
57
|
-
)
|
|
58
|
-
</script>
|
|
59
|
-
|
|
60
|
-
<style scoped lang="scss">
|
|
61
|
-
.alert {
|
|
62
|
-
&-info {
|
|
63
|
-
fill: #004d8a;
|
|
64
|
-
}
|
|
65
|
-
&-warning {
|
|
66
|
-
background-color: var(--alert-warning-bg-color);
|
|
67
|
-
border: 1px solid var(--alert-warning-border-color);
|
|
68
|
-
fill: var(--alert-warning-icon-color);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
&-icon {
|
|
72
|
-
width: 20px;
|
|
73
|
-
height: 20px;
|
|
74
|
-
}
|
|
75
|
-
&-text {
|
|
76
|
-
color: var(--global-font-color5);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
button.close:focus {
|
|
80
|
-
box-shadow: none;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
</style>
|
|
84
|
-
<style>
|
|
85
|
-
:root {
|
|
86
|
-
--alert-warning-icon-color: #d28f00;
|
|
87
|
-
--alert-warning-bg-color: #fef3b5;
|
|
88
|
-
--alert-warning-border-color: #d28f00;
|
|
89
|
-
}
|
|
90
|
-
:root.dark-theme {
|
|
91
|
-
--alert-warning-icon-color: currentColor;
|
|
92
|
-
--alert-warning-bg-color: #816709;
|
|
93
|
-
--alert-warning-border-color: transparent;
|
|
94
|
-
}
|
|
95
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div :class="['alert', status]">
|
|
3
|
+
<div class="alert-items">
|
|
4
|
+
<slot v-if="$slots.headline" name="headline" :icon="iconName" />
|
|
5
|
+
|
|
6
|
+
<slot name="body">
|
|
7
|
+
<div v-for="(item, key) in items" :key="key" class="alert-item">
|
|
8
|
+
<div v-if="!$slots.headline" class="alert-icon-wrapper">
|
|
9
|
+
<atoms-the-icon
|
|
10
|
+
:class="['alert-icon', iconName]"
|
|
11
|
+
:name="iconName"
|
|
12
|
+
/>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<slot :item="item" :index="key">
|
|
16
|
+
<span class="alert-text">{{ item }}</span>
|
|
17
|
+
</slot>
|
|
18
|
+
</div>
|
|
19
|
+
</slot>
|
|
20
|
+
</div>
|
|
21
|
+
<button
|
|
22
|
+
v-if="!hideCloseIcon"
|
|
23
|
+
:id="`${props.testId}-close-button`"
|
|
24
|
+
class="close"
|
|
25
|
+
@click="removeAlert"
|
|
26
|
+
>
|
|
27
|
+
<atoms-the-icon class="alert-icon" name="close" />
|
|
28
|
+
</button>
|
|
29
|
+
</div>
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
<script setup lang="ts">
|
|
33
|
+
import { UI_E_IconsByStatus } from '~/components/atoms/alert/lib/models/enums'
|
|
34
|
+
import type {
|
|
35
|
+
UI_T_AlertStatus,
|
|
36
|
+
UI_T_AlertIcon,
|
|
37
|
+
} from '~/components/atoms/alert/lib/models/types'
|
|
38
|
+
|
|
39
|
+
const props = withDefaults(
|
|
40
|
+
defineProps<{
|
|
41
|
+
status: UI_T_AlertStatus
|
|
42
|
+
items: string[] | any
|
|
43
|
+
testId?: string
|
|
44
|
+
hideCloseIcon?: boolean
|
|
45
|
+
}>(),
|
|
46
|
+
{ testId: 'ui-alert' }
|
|
47
|
+
)
|
|
48
|
+
const emits = defineEmits<{
|
|
49
|
+
(event: 'remove'): void
|
|
50
|
+
}>()
|
|
51
|
+
|
|
52
|
+
const removeAlert = (): void => {
|
|
53
|
+
emits('remove')
|
|
54
|
+
}
|
|
55
|
+
const iconName = computed<UI_T_AlertIcon>(
|
|
56
|
+
() => UI_E_IconsByStatus[props.status as UI_T_AlertStatus]
|
|
57
|
+
)
|
|
58
|
+
</script>
|
|
59
|
+
|
|
60
|
+
<style scoped lang="scss">
|
|
61
|
+
.alert {
|
|
62
|
+
&-info {
|
|
63
|
+
fill: #004d8a;
|
|
64
|
+
}
|
|
65
|
+
&-warning {
|
|
66
|
+
background-color: var(--alert-warning-bg-color);
|
|
67
|
+
border: 1px solid var(--alert-warning-border-color);
|
|
68
|
+
fill: var(--alert-warning-icon-color);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&-icon {
|
|
72
|
+
width: 20px;
|
|
73
|
+
height: 20px;
|
|
74
|
+
}
|
|
75
|
+
&-text {
|
|
76
|
+
color: var(--global-font-color5);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
button.close:focus {
|
|
80
|
+
box-shadow: none;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
</style>
|
|
84
|
+
<style>
|
|
85
|
+
:root {
|
|
86
|
+
--alert-warning-icon-color: #d28f00;
|
|
87
|
+
--alert-warning-bg-color: #fef3b5;
|
|
88
|
+
--alert-warning-border-color: #d28f00;
|
|
89
|
+
}
|
|
90
|
+
:root.dark-theme {
|
|
91
|
+
--alert-warning-icon-color: currentColor;
|
|
92
|
+
--alert-warning-bg-color: #816709;
|
|
93
|
+
--alert-warning-border-color: transparent;
|
|
94
|
+
}
|
|
95
|
+
</style>
|
|
@@ -1,170 +1,170 @@
|
|
|
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 type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
39
|
-
import type {
|
|
40
|
-
UI_T_NotificationStatus,
|
|
41
|
-
UI_T_NotificationIcon,
|
|
42
|
-
} from '~/components/atoms/alert/lib/models/types'
|
|
43
|
-
import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/lib/models/enums'
|
|
44
|
-
|
|
45
|
-
const props = withDefaults(
|
|
46
|
-
defineProps<{
|
|
47
|
-
status: UI_T_NotificationStatus
|
|
48
|
-
id: number
|
|
49
|
-
show: boolean
|
|
50
|
-
title: string
|
|
51
|
-
description: string
|
|
52
|
-
testId?: string
|
|
53
|
-
}>(),
|
|
54
|
-
{ testId: 'ui-notification' }
|
|
55
|
-
)
|
|
56
|
-
const emits = defineEmits<{
|
|
57
|
-
(event: 'hide', value: number): void
|
|
58
|
-
}>()
|
|
59
|
-
|
|
60
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
61
|
-
const hide = (): void => {
|
|
62
|
-
isActive.value = false
|
|
63
|
-
|
|
64
|
-
setTimeout(() => {
|
|
65
|
-
emits('hide', props.id)
|
|
66
|
-
}, 200)
|
|
67
|
-
}
|
|
68
|
-
const isActive = ref<boolean>(false)
|
|
69
|
-
|
|
70
|
-
const iconName = computed<UI_T_NotificationIcon>(
|
|
71
|
-
() => UI_E_IconsByStatusNotification[props.status as UI_T_NotificationStatus]
|
|
72
|
-
)
|
|
73
|
-
|
|
74
|
-
setTimeout(() => {
|
|
75
|
-
isActive.value = true
|
|
76
|
-
}, 1000)
|
|
77
|
-
</script>
|
|
78
|
-
|
|
79
|
-
<style scoped lang="scss">
|
|
80
|
-
@import '~/assets/scss/common/mixins.scss';
|
|
81
|
-
|
|
82
|
-
.notification {
|
|
83
|
-
.notification-container-wrap {
|
|
84
|
-
display: block;
|
|
85
|
-
margin-top: 10px;
|
|
86
|
-
width: 414px;
|
|
87
|
-
position: relative;
|
|
88
|
-
right: -600px;
|
|
89
|
-
opacity: 0;
|
|
90
|
-
|
|
91
|
-
&.active {
|
|
92
|
-
right: 0;
|
|
93
|
-
opacity: 1;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.notification-container {
|
|
97
|
-
@include flex($dir: column, $just: flex-end);
|
|
98
|
-
margin-right: 0;
|
|
99
|
-
|
|
100
|
-
.toast {
|
|
101
|
-
@include flex($dir: row);
|
|
102
|
-
background-color: #25333d;
|
|
103
|
-
border-radius: 3px;
|
|
104
|
-
box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
|
|
105
|
-
margin: 0;
|
|
106
|
-
padding: 12px;
|
|
107
|
-
transform: scale(1);
|
|
108
|
-
transform-origin: 100% 0;
|
|
109
|
-
width: 100%;
|
|
110
|
-
|
|
111
|
-
.toast-icon {
|
|
112
|
-
width: 36px;
|
|
113
|
-
height: 36px;
|
|
114
|
-
&.with {
|
|
115
|
-
width: 26px;
|
|
116
|
-
height: 26px;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.toast-content {
|
|
121
|
-
padding-left: 12px;
|
|
122
|
-
width: 100%;
|
|
123
|
-
|
|
124
|
-
h4 {
|
|
125
|
-
color: #e9ecef;
|
|
126
|
-
font-size: 14px;
|
|
127
|
-
font-weight: 500;
|
|
128
|
-
line-height: 24px;
|
|
129
|
-
margin-top: 0;
|
|
130
|
-
max-width: 240px;
|
|
131
|
-
overflow: hidden;
|
|
132
|
-
text-overflow: ellipsis;
|
|
133
|
-
white-space: nowrap;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
button {
|
|
137
|
-
background: transparent;
|
|
138
|
-
border: none;
|
|
139
|
-
border-radius: 100%;
|
|
140
|
-
cursor: pointer;
|
|
141
|
-
display: inline-block;
|
|
142
|
-
height: 30px;
|
|
143
|
-
position: absolute;
|
|
144
|
-
right: 8px;
|
|
145
|
-
top: 8px;
|
|
146
|
-
width: 30px;
|
|
147
|
-
|
|
148
|
-
svg {
|
|
149
|
-
width: 16px;
|
|
150
|
-
height: 16px;
|
|
151
|
-
fill: #adbbc4;
|
|
152
|
-
margin-left: 1px;
|
|
153
|
-
margin-top: -8px;
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.description {
|
|
158
|
-
max-height: 60vh;
|
|
159
|
-
overflow: auto;
|
|
160
|
-
|
|
161
|
-
p {
|
|
162
|
-
color: var(--global-font-color6);
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
</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 type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
39
|
+
import type {
|
|
40
|
+
UI_T_NotificationStatus,
|
|
41
|
+
UI_T_NotificationIcon,
|
|
42
|
+
} from '~/components/atoms/alert/lib/models/types'
|
|
43
|
+
import { UI_E_IconsByStatusNotification } from '~/components/atoms/alert/lib/models/enums'
|
|
44
|
+
|
|
45
|
+
const props = withDefaults(
|
|
46
|
+
defineProps<{
|
|
47
|
+
status: UI_T_NotificationStatus
|
|
48
|
+
id: number
|
|
49
|
+
show: boolean
|
|
50
|
+
title: string
|
|
51
|
+
description: string
|
|
52
|
+
testId?: string
|
|
53
|
+
}>(),
|
|
54
|
+
{ testId: 'ui-notification' }
|
|
55
|
+
)
|
|
56
|
+
const emits = defineEmits<{
|
|
57
|
+
(event: 'hide', value: number): void
|
|
58
|
+
}>()
|
|
59
|
+
|
|
60
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
61
|
+
const hide = (): void => {
|
|
62
|
+
isActive.value = false
|
|
63
|
+
|
|
64
|
+
setTimeout(() => {
|
|
65
|
+
emits('hide', props.id)
|
|
66
|
+
}, 200)
|
|
67
|
+
}
|
|
68
|
+
const isActive = ref<boolean>(false)
|
|
69
|
+
|
|
70
|
+
const iconName = computed<UI_T_NotificationIcon>(
|
|
71
|
+
() => UI_E_IconsByStatusNotification[props.status as UI_T_NotificationStatus]
|
|
72
|
+
)
|
|
73
|
+
|
|
74
|
+
setTimeout(() => {
|
|
75
|
+
isActive.value = true
|
|
76
|
+
}, 1000)
|
|
77
|
+
</script>
|
|
78
|
+
|
|
79
|
+
<style scoped lang="scss">
|
|
80
|
+
@import '~/assets/scss/common/mixins.scss';
|
|
81
|
+
|
|
82
|
+
.notification {
|
|
83
|
+
.notification-container-wrap {
|
|
84
|
+
display: block;
|
|
85
|
+
margin-top: 10px;
|
|
86
|
+
width: 414px;
|
|
87
|
+
position: relative;
|
|
88
|
+
right: -600px;
|
|
89
|
+
opacity: 0;
|
|
90
|
+
|
|
91
|
+
&.active {
|
|
92
|
+
right: 0;
|
|
93
|
+
opacity: 1;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.notification-container {
|
|
97
|
+
@include flex($dir: column, $just: flex-end);
|
|
98
|
+
margin-right: 0;
|
|
99
|
+
|
|
100
|
+
.toast {
|
|
101
|
+
@include flex($dir: row);
|
|
102
|
+
background-color: #25333d;
|
|
103
|
+
border-radius: 3px;
|
|
104
|
+
box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
|
|
105
|
+
margin: 0;
|
|
106
|
+
padding: 12px;
|
|
107
|
+
transform: scale(1);
|
|
108
|
+
transform-origin: 100% 0;
|
|
109
|
+
width: 100%;
|
|
110
|
+
|
|
111
|
+
.toast-icon {
|
|
112
|
+
width: 36px;
|
|
113
|
+
height: 36px;
|
|
114
|
+
&.with {
|
|
115
|
+
width: 26px;
|
|
116
|
+
height: 26px;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.toast-content {
|
|
121
|
+
padding-left: 12px;
|
|
122
|
+
width: 100%;
|
|
123
|
+
|
|
124
|
+
h4 {
|
|
125
|
+
color: #e9ecef;
|
|
126
|
+
font-size: 14px;
|
|
127
|
+
font-weight: 500;
|
|
128
|
+
line-height: 24px;
|
|
129
|
+
margin-top: 0;
|
|
130
|
+
max-width: 240px;
|
|
131
|
+
overflow: hidden;
|
|
132
|
+
text-overflow: ellipsis;
|
|
133
|
+
white-space: nowrap;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
button {
|
|
137
|
+
background: transparent;
|
|
138
|
+
border: none;
|
|
139
|
+
border-radius: 100%;
|
|
140
|
+
cursor: pointer;
|
|
141
|
+
display: inline-block;
|
|
142
|
+
height: 30px;
|
|
143
|
+
position: absolute;
|
|
144
|
+
right: 8px;
|
|
145
|
+
top: 8px;
|
|
146
|
+
width: 30px;
|
|
147
|
+
|
|
148
|
+
svg {
|
|
149
|
+
width: 16px;
|
|
150
|
+
height: 16px;
|
|
151
|
+
fill: #adbbc4;
|
|
152
|
+
margin-left: 1px;
|
|
153
|
+
margin-top: -8px;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.description {
|
|
158
|
+
max-height: 60vh;
|
|
159
|
+
overflow: auto;
|
|
160
|
+
|
|
161
|
+
p {
|
|
162
|
+
color: var(--global-font-color6);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
</style>
|