bfg-common 1.5.71 → 1.5.72
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.
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="error-info">
|
|
3
|
+
<ui-icon
|
|
4
|
+
:id="`task-error-info-icon-${props.id}`"
|
|
5
|
+
name="info"
|
|
6
|
+
width="16px"
|
|
7
|
+
height="16px"
|
|
8
|
+
:class="['info-icon pointer', { show: isShowInfo }]"
|
|
9
|
+
@click.stop="emits('toggle-error', props.id)"
|
|
10
|
+
/>
|
|
11
|
+
<ui-popup-window
|
|
12
|
+
v-model="isShowInfo"
|
|
13
|
+
top
|
|
14
|
+
left
|
|
15
|
+
:elem-id="`task-error-info-icon-${props.id}`"
|
|
16
|
+
>
|
|
17
|
+
<div class="common-widget-info">
|
|
18
|
+
<div class="headline justify-between flex-align-center">
|
|
19
|
+
<div class="flex-align-center">
|
|
20
|
+
<ui-icon name="info-2" width="16px" height="16px" />
|
|
21
|
+
<span class="title"> {{ localization.common.information }}</span>
|
|
22
|
+
</div>
|
|
23
|
+
<ui-icon
|
|
24
|
+
name="close"
|
|
25
|
+
class="pointer hide-icon"
|
|
26
|
+
width="16px"
|
|
27
|
+
height="16px"
|
|
28
|
+
@click.stop="emits('toggle-error', '')"
|
|
29
|
+
/>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<div class="common-widget-info-description">
|
|
33
|
+
{{ props.error }}
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</ui-popup-window>
|
|
37
|
+
</div>
|
|
38
|
+
</template>
|
|
39
|
+
|
|
40
|
+
<script lang="ts" setup>
|
|
41
|
+
import type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
42
|
+
|
|
43
|
+
const props = withDefaults(
|
|
44
|
+
defineProps<{
|
|
45
|
+
id: string
|
|
46
|
+
info: string
|
|
47
|
+
openedError: string
|
|
48
|
+
}>(),
|
|
49
|
+
{}
|
|
50
|
+
)
|
|
51
|
+
|
|
52
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
53
|
+
|
|
54
|
+
const emits = defineEmits<{
|
|
55
|
+
(event: 'toggle-error', value: string): void
|
|
56
|
+
}>()
|
|
57
|
+
|
|
58
|
+
const isShowInfo = computed<boolean>({
|
|
59
|
+
get() {
|
|
60
|
+
return props.openedError === props.id
|
|
61
|
+
},
|
|
62
|
+
set() {
|
|
63
|
+
emits('toggle-error', '')
|
|
64
|
+
},
|
|
65
|
+
})
|
|
66
|
+
</script>
|
|
67
|
+
|
|
68
|
+
<style lang="scss" scoped>
|
|
69
|
+
.error-info {
|
|
70
|
+
display: flex;
|
|
71
|
+
justify-content: space-between;
|
|
72
|
+
margin-left: 8px;
|
|
73
|
+
|
|
74
|
+
.info-icon {
|
|
75
|
+
color: var(--form-icon-color);
|
|
76
|
+
|
|
77
|
+
&:hover {
|
|
78
|
+
color: var(--close-icon);
|
|
79
|
+
}
|
|
80
|
+
&.show {
|
|
81
|
+
color: var(--btn-primary-fill-bg-color);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.common-widget-info {
|
|
86
|
+
width: 232px;
|
|
87
|
+
padding: 16px;
|
|
88
|
+
|
|
89
|
+
.title {
|
|
90
|
+
font-size: 14px;
|
|
91
|
+
font-weight: 500;
|
|
92
|
+
line-height: 16px;
|
|
93
|
+
color: var(--zabbix-text-color);
|
|
94
|
+
margin-left: 8px;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.hide-icon {
|
|
98
|
+
color: var(--alert-icon);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.common-widget-info-description {
|
|
102
|
+
font-size: 13px;
|
|
103
|
+
line-height: 15.73px;
|
|
104
|
+
color: var(--zabbix-text-color);
|
|
105
|
+
margin-top: 12px;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
</style>
|
|
@@ -17,43 +17,12 @@
|
|
|
17
17
|
</template>
|
|
18
18
|
|
|
19
19
|
<template #tooltip>
|
|
20
|
-
<
|
|
21
|
-
:id="
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
class="headline__icon pointer"
|
|
26
|
-
:class="isShowInfo && 'active'"
|
|
27
|
-
@click="isShowInfo = !isShowInfo"
|
|
20
|
+
<common-wizards-datastore-add-steps-common-tooltip-info
|
|
21
|
+
:id="option.testId"
|
|
22
|
+
:info="option.tooltipContent"
|
|
23
|
+
:opened-error="openedError"
|
|
24
|
+
@toggle-error="onToggleError"
|
|
28
25
|
/>
|
|
29
|
-
|
|
30
|
-
<ui-popup-window
|
|
31
|
-
v-model="isShowInfo"
|
|
32
|
-
width="232px"
|
|
33
|
-
:elem-id="`${option.testId}-info-icon-trigger`"
|
|
34
|
-
>
|
|
35
|
-
<div class="common-widget-info">
|
|
36
|
-
<div class="flex justify-between">
|
|
37
|
-
<div class="flex">
|
|
38
|
-
<ui-icon name="info-2" width="16px" height="16px" />
|
|
39
|
-
<span class="title">
|
|
40
|
-
{{ localization.common.information }}
|
|
41
|
-
</span>
|
|
42
|
-
</div>
|
|
43
|
-
<ui-icon
|
|
44
|
-
name="close"
|
|
45
|
-
class="pointer hide-icon"
|
|
46
|
-
width="16px"
|
|
47
|
-
height="16px"
|
|
48
|
-
@click="isShowInfo = false"
|
|
49
|
-
/>
|
|
50
|
-
</div>
|
|
51
|
-
|
|
52
|
-
<div class="common-widget-info-description">
|
|
53
|
-
{{ option.tooltipContent }}
|
|
54
|
-
</div>
|
|
55
|
-
</div>
|
|
56
|
-
</ui-popup-window>
|
|
57
26
|
</template>
|
|
58
27
|
</ui-radio>
|
|
59
28
|
</div>
|
|
@@ -71,7 +40,15 @@ const props = defineProps<{
|
|
|
71
40
|
|
|
72
41
|
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
73
42
|
|
|
74
|
-
const
|
|
43
|
+
const openedError = ref<string>('')
|
|
44
|
+
|
|
45
|
+
const onToggleError = (value: string): void => {
|
|
46
|
+
if (!value || value === openedError.value) {
|
|
47
|
+
openedError.value = ''
|
|
48
|
+
} else {
|
|
49
|
+
openedError.value = value
|
|
50
|
+
}
|
|
51
|
+
}
|
|
75
52
|
</script>
|
|
76
53
|
|
|
77
54
|
<style>
|
|
@@ -123,50 +100,6 @@ const isShowInfo = ref<boolean>(false)
|
|
|
123
100
|
}
|
|
124
101
|
}
|
|
125
102
|
}
|
|
126
|
-
|
|
127
|
-
.headline {
|
|
128
|
-
@include flex($align: center);
|
|
129
|
-
margin: 32px 0 16px;
|
|
130
|
-
|
|
131
|
-
&__icon {
|
|
132
|
-
color: var(--feedback-tooltip-trigger-color);
|
|
133
|
-
&:hover {
|
|
134
|
-
color: var(--feedback-tooltip-hover-trigger-color);
|
|
135
|
-
}
|
|
136
|
-
&.active {
|
|
137
|
-
color: var(--feedback-tooltip-acctive-trigger-color);
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
&__label {
|
|
141
|
-
line-height: 19.36px;
|
|
142
|
-
font-size: 16px;
|
|
143
|
-
font-weight: 500;
|
|
144
|
-
color: var(--feedback-text-color);
|
|
145
|
-
margin-right: 8px;
|
|
146
|
-
}
|
|
147
|
-
.common-widget-info {
|
|
148
|
-
padding: 16px;
|
|
149
|
-
.title {
|
|
150
|
-
font-size: 14px;
|
|
151
|
-
font-weight: 500;
|
|
152
|
-
line-height: 16.94px;
|
|
153
|
-
color: var(--feedback-text-color);
|
|
154
|
-
margin-left: 8px;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.common-widget-info-description {
|
|
158
|
-
font-size: 13px;
|
|
159
|
-
line-height: 15.73px;
|
|
160
|
-
color: var(--feedback-text-color);
|
|
161
|
-
margin-top: 12px;
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
svg {
|
|
165
|
-
color: var(--feedback-tooltip-close-color);
|
|
166
|
-
min-width: 16px;
|
|
167
|
-
}
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
103
|
}
|
|
171
104
|
|
|
172
105
|
@container (max-width:600px) {
|