bfg-common 1.5.874 → 1.5.875
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 +1 -0
- package/assets/localization/local_en.json +1 -0
- package/assets/localization/local_hy.json +1 -0
- package/assets/localization/local_kk.json +1 -0
- package/assets/localization/local_ru.json +1 -0
- package/assets/localization/local_zh.json +1 -0
- package/components/atoms/noDataProvided/NoDataProvided.vue +66 -0
- package/components/common/context/recursion/RecursionOld.vue +2 -2
- package/components/common/diagramMain/modals/viewSettings/viewSettings/ViewSettingsNew.vue +312 -312
- package/package.json +2 -2
|
@@ -1059,6 +1059,7 @@
|
|
|
1059
1059
|
"noCertificatesAdded": "Сертыфікаты не дададзены.",
|
|
1060
1060
|
"noConfigurableDeviceIsSelected": "Наладжвальнае прылада не абрана.",
|
|
1061
1061
|
"noDataProvided": "Ніякіх дадзеных не прадастаўлена",
|
|
1062
|
+
"noDataProvidedMessage": "У цяперашні час няма дадзеных для адлюстравання.",
|
|
1062
1063
|
"noDhcpEnabledVmKernelNetAdapters": "Сеткавых адаптараў VMkernel з падтрымкай DHCP не існуе.",
|
|
1063
1064
|
"noFreeNetworkAdaptersAddSwitch": "Бясплатных сеткавых адаптараў для дадання да камутатара няма.",
|
|
1064
1065
|
"noAdaptersTitle": "Няма бясплатных сеткавых адаптараў для дадання",
|
|
@@ -1058,6 +1058,7 @@
|
|
|
1058
1058
|
"noCertificatesAdded": "No certificates added.",
|
|
1059
1059
|
"noConfigurableDeviceIsSelected": "No configurable device is selected.",
|
|
1060
1060
|
"noDataProvided": "No Data Provided",
|
|
1061
|
+
"noDataProvidedMessage": "There is currently no data to display.",
|
|
1061
1062
|
"noDhcpEnabledVmKernelNetAdapters": "There are no DHCP-enabled VMkernel network adapters.",
|
|
1062
1063
|
"noFreeNetworkAdaptersAddSwitch": "There are no free network adapters to add to the switch.",
|
|
1063
1064
|
"noAdaptersTitle": "No Free Network Adapters to Add",
|
|
@@ -1058,6 +1058,7 @@
|
|
|
1058
1058
|
"noCertificatesAdded": "Վկայականներ չեն ավելացվել:",
|
|
1059
1059
|
"noConfigurableDeviceIsSelected": "Ընտրովի սարքը ընտրված չէ:",
|
|
1060
1060
|
"noDataProvided": "Տվյալներ չեն տրամադրվել",
|
|
1061
|
+
"noDataProvidedMessage": "Ներկայումս ցուցադրման համար տվյալներ չկան:",
|
|
1061
1062
|
"noDhcpEnabledVmKernelNetAdapters": "DHCP-ով միացված VMkernel ցանցային ադապտերներ գոյություն չունեն:",
|
|
1062
1063
|
"noFreeNetworkAdaptersAddSwitch": "Անջատիչին ավելացնելու համար անվճար ցանցային ադապտերներ չկան:",
|
|
1063
1064
|
"noAdaptersTitle": "Հասանելի ցանցային ադապտերներ չկան",
|
|
@@ -1058,6 +1058,7 @@
|
|
|
1058
1058
|
"noCertificatesAdded": "Ешқандай сертификаттар қосылмаған.",
|
|
1059
1059
|
"noConfigurableDeviceIsSelected": "Теңшелетін құрылғы таңдалмаған.",
|
|
1060
1060
|
"noDataProvided": "Деректер жоқ",
|
|
1061
|
+
"noDataProvidedMessage": "Қазіргі уақытта көрсетілетін деректер жоқ.",
|
|
1061
1062
|
"noDhcpEnabledVmKernelNetAdapters": "DHCP қолдайтын vmkernel желілік адаптерлері жоқ.",
|
|
1062
1063
|
"noFreeNetworkAdaptersAddSwitch": "Коммутаторға қосу үшін тегін Желілік адаптерлер жоқ.",
|
|
1063
1064
|
"noAdaptersTitle": "Қосылатын Тегін Желілік Адаптерлер жоқ",
|
|
@@ -1058,6 +1058,7 @@
|
|
|
1058
1058
|
"noCertificatesAdded": "Сертификаты не добавлены.",
|
|
1059
1059
|
"noConfigurableDeviceIsSelected": "Настраиваемое устройство не выбрано.",
|
|
1060
1060
|
"noDataProvided": "Никаких данных не предоставлено",
|
|
1061
|
+
"noDataProvidedMessage": "В настоящее время нет данных для отображения.",
|
|
1061
1062
|
"noDhcpEnabledVmKernelNetAdapters": "Сетевых адаптеров VMkernel с поддержкой DHCP не существует.",
|
|
1062
1063
|
"noFreeNetworkAdaptersAddSwitch": "Нет свободных сетевых адаптеров, которые можно добавить к коммутатору.",
|
|
1063
1064
|
"noAdaptersTitle": "Нет доступных сетевых адаптеров для добавления",
|
|
@@ -1057,6 +1057,7 @@
|
|
|
1057
1057
|
"noCertificatesAdded": "未添加证书。",
|
|
1058
1058
|
"noConfigurableDeviceIsSelected": "未选择可配置设备。",
|
|
1059
1059
|
"noDataProvided": "没有提供资料",
|
|
1060
|
+
"noDataProvidedMessage": "目前没有要显示的数据。",
|
|
1060
1061
|
"noDhcpEnabledVmKernelNetAdapters": "没有启用DHCP的VMkernel网络适配器。",
|
|
1061
1062
|
"noFreeNetworkAdaptersAddSwitch": "没有免费的网络适配器可以添加到交换机上。",
|
|
1062
1063
|
"noAdaptersTitle": "无需添加免费网络适配器",
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="ui-no-data-provided">
|
|
3
|
+
<div class="ui-no-data-provided-center">
|
|
4
|
+
<div class="ui-no-data-provided-icon">
|
|
5
|
+
<ui-icon name="no-data-provided" width="92" height="92" />
|
|
6
|
+
</div>
|
|
7
|
+
<span class="ui-no-data-provided-title">
|
|
8
|
+
{{ localization.common.noDataProvided }}
|
|
9
|
+
</span>
|
|
10
|
+
<span class="ui-no-data-provided-subtitle">
|
|
11
|
+
{{ localization.common.noDataProvidedMessage }}
|
|
12
|
+
</span>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script setup lang="ts">
|
|
18
|
+
import type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
19
|
+
|
|
20
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<style scoped lang="scss">
|
|
24
|
+
.ui-no-data-provided {
|
|
25
|
+
width: 100%;
|
|
26
|
+
height: 100%;
|
|
27
|
+
position: relative;
|
|
28
|
+
|
|
29
|
+
.ui-no-data-provided-center {
|
|
30
|
+
position: absolute;
|
|
31
|
+
|
|
32
|
+
top: 50%;
|
|
33
|
+
left: 50%;
|
|
34
|
+
transform: translate(-50%, -50%);
|
|
35
|
+
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
align-items: center;
|
|
39
|
+
|
|
40
|
+
.ui-no-data-provided-icon {
|
|
41
|
+
width: 92px;
|
|
42
|
+
height: 92px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.ui-no-data-provided-title {
|
|
46
|
+
font-weight: 500;
|
|
47
|
+
font-size: 16px;
|
|
48
|
+
line-height: 19px;
|
|
49
|
+
letter-spacing: 0;
|
|
50
|
+
text-align: center;
|
|
51
|
+
margin: 16px 0 6px;
|
|
52
|
+
color: var(--title-form-first-color);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.ui-no-data-provided-subtitle {
|
|
56
|
+
font-weight: 400;
|
|
57
|
+
font-size: 13px;
|
|
58
|
+
line-height: 16px;
|
|
59
|
+
letter-spacing: 0;
|
|
60
|
+
text-align: center;
|
|
61
|
+
vertical-align: middle;
|
|
62
|
+
color: var(--form-icon-color);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
</style>
|
|
@@ -120,7 +120,7 @@ const emits = defineEmits<{
|
|
|
120
120
|
color: #565656;
|
|
121
121
|
border-bottom: 1px solid transparent;
|
|
122
122
|
cursor: pointer;
|
|
123
|
-
padding: 5px 0 3px;
|
|
123
|
+
//padding: 5px 0 3px;
|
|
124
124
|
|
|
125
125
|
&.has-border-top {
|
|
126
126
|
border-top: 1px solid var(--context-menu-inset-border-color);
|
|
@@ -161,7 +161,7 @@ const emits = defineEmits<{
|
|
|
161
161
|
display: flex;
|
|
162
162
|
align-items: center;
|
|
163
163
|
user-select: none;
|
|
164
|
-
padding:
|
|
164
|
+
padding: 8px 20px 7px 10px;
|
|
165
165
|
|
|
166
166
|
.menu-item-text {
|
|
167
167
|
flex: 1 1 0;
|
|
@@ -1,312 +1,312 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="table-wrapper">
|
|
3
|
-
<ui-line v-if="props.viewSettingsField.separator" margin="24px 0 16px" />
|
|
4
|
-
<table
|
|
5
|
-
:class="['settings-table', { 'ready-complete': props.isReadyComplete }]"
|
|
6
|
-
>
|
|
7
|
-
<tbody>
|
|
8
|
-
<tr>
|
|
9
|
-
<td colspan="2">
|
|
10
|
-
<span>
|
|
11
|
-
{{ props.viewSettingsField.title }}
|
|
12
|
-
</span>
|
|
13
|
-
</td>
|
|
14
|
-
</tr>
|
|
15
|
-
<template v-if="props.viewSettingsField.rows.length > 0">
|
|
16
|
-
<tr
|
|
17
|
-
v-for="(row, rowKey) in props.viewSettingsField.rows"
|
|
18
|
-
:key="row.name"
|
|
19
|
-
class="table-block"
|
|
20
|
-
>
|
|
21
|
-
<td
|
|
22
|
-
class="row-name-container"
|
|
23
|
-
:style="
|
|
24
|
-
props.isReadyComplete && {
|
|
25
|
-
width: props.namesWidth?.[0] + 'px',
|
|
26
|
-
minWidth: props.namesWidth?.[0] + 'px',
|
|
27
|
-
}
|
|
28
|
-
"
|
|
29
|
-
>
|
|
30
|
-
<span>
|
|
31
|
-
{{ row.name
|
|
32
|
-
}}<template v-if="props.isLabelsWithDots">:</template>
|
|
33
|
-
</span>
|
|
34
|
-
</td>
|
|
35
|
-
<td class="row-value-container">
|
|
36
|
-
<span
|
|
37
|
-
:class="[
|
|
38
|
-
'settings-table__values',
|
|
39
|
-
row.status && {
|
|
40
|
-
'is-status-yes': row.color,
|
|
41
|
-
'is-status-no': !row.color,
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
'is-array':
|
|
45
|
-
Array.isArray(row.value) && row.value.length > 0,
|
|
46
|
-
},
|
|
47
|
-
]"
|
|
48
|
-
>
|
|
49
|
-
<span
|
|
50
|
-
v-if="row.icon"
|
|
51
|
-
:class="['settings-table__value-icon', row.icon]"
|
|
52
|
-
></span>
|
|
53
|
-
<template v-if="Array.isArray(row.value)">
|
|
54
|
-
<template v-if="row.value.length > 0">
|
|
55
|
-
<span
|
|
56
|
-
v-for="(value, key) in row.value"
|
|
57
|
-
:key="value"
|
|
58
|
-
:data-id="`view-settings-${rowKey}-${key}`"
|
|
59
|
-
class="settings-table__value array-items"
|
|
60
|
-
>
|
|
61
|
-
{{ value }}
|
|
62
|
-
</span>
|
|
63
|
-
</template>
|
|
64
|
-
<template v-else>
|
|
65
|
-
<span
|
|
66
|
-
:data-id="`view-settings-${rowKey}`"
|
|
67
|
-
class="settings-table__value"
|
|
68
|
-
>--</span
|
|
69
|
-
>
|
|
70
|
-
</template>
|
|
71
|
-
</template>
|
|
72
|
-
<span
|
|
73
|
-
v-else
|
|
74
|
-
:data-id="`view-settings-${rowKey}`"
|
|
75
|
-
class="settings-table__value"
|
|
76
|
-
>
|
|
77
|
-
{{ row.value || '--' }}
|
|
78
|
-
</span>
|
|
79
|
-
</span>
|
|
80
|
-
</td>
|
|
81
|
-
</tr>
|
|
82
|
-
</template>
|
|
83
|
-
<tr v-else-if="props.viewSettingsField.rows.length === 0">
|
|
84
|
-
<td colspan="2">
|
|
85
|
-
<div class="not-available">
|
|
86
|
-
<span><ui-icon width="16" height="16" name="info" /></span>
|
|
87
|
-
<span>
|
|
88
|
-
{{ props.viewSettingsField.title }}
|
|
89
|
-
{{ localization.common.isNotAvailableOnThis }}
|
|
90
|
-
{{ props.viewName }}
|
|
91
|
-
</span>
|
|
92
|
-
</div>
|
|
93
|
-
</td>
|
|
94
|
-
</tr>
|
|
95
|
-
</tbody>
|
|
96
|
-
</table>
|
|
97
|
-
</div>
|
|
98
|
-
</template>
|
|
99
|
-
|
|
100
|
-
<script setup lang="ts">
|
|
101
|
-
import type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
102
|
-
import type { UI_I_ViewSettingsFields } from '~/components/common/diagramMain/lib/models/interfaces'
|
|
103
|
-
|
|
104
|
-
// Props from up
|
|
105
|
-
const props = withDefaults(
|
|
106
|
-
defineProps<{
|
|
107
|
-
viewSettingsField: UI_I_ViewSettingsFields
|
|
108
|
-
viewName?: string
|
|
109
|
-
isLabelsWithDots?: boolean
|
|
110
|
-
isReadyComplete?: boolean
|
|
111
|
-
namesWidth: number[]
|
|
112
|
-
}>(),
|
|
113
|
-
{
|
|
114
|
-
viewName: '',
|
|
115
|
-
isLabelsWithDots: false,
|
|
116
|
-
isReadyComplete: false,
|
|
117
|
-
}
|
|
118
|
-
)
|
|
119
|
-
|
|
120
|
-
// UI_I_Localization
|
|
121
|
-
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
122
|
-
</script>
|
|
123
|
-
|
|
124
|
-
<style scoped lang="scss">
|
|
125
|
-
.table-wrapper {
|
|
126
|
-
flex: 1 1 auto;
|
|
127
|
-
width: 100%;
|
|
128
|
-
height: auto;
|
|
129
|
-
box-sizing: border-box;
|
|
130
|
-
overflow: hidden;
|
|
131
|
-
|
|
132
|
-
.settings-table {
|
|
133
|
-
&:not(.ready-complete) {
|
|
134
|
-
.table-block {
|
|
135
|
-
display: grid;
|
|
136
|
-
grid-template-columns: 50% 50%;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
width: 100%;
|
|
140
|
-
box-sizing: border-box;
|
|
141
|
-
background-color: transparent;
|
|
142
|
-
|
|
143
|
-
tr:first-of-type {
|
|
144
|
-
span {
|
|
145
|
-
color: var(--title-form-first-color);
|
|
146
|
-
font-weight: 500;
|
|
147
|
-
font-size: 14px;
|
|
148
|
-
line-height: 18px;
|
|
149
|
-
margin: 16px 0;
|
|
150
|
-
}
|
|
151
|
-
td {
|
|
152
|
-
padding-bottom: 16px;
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
tr:not(:first-of-type) {
|
|
157
|
-
vertical-align: top;
|
|
158
|
-
|
|
159
|
-
td {
|
|
160
|
-
&.row-name-container {
|
|
161
|
-
border-right: 16px solid transparent;
|
|
162
|
-
//width: 256px;
|
|
163
|
-
//min-width: 256px;
|
|
164
|
-
color: var(--diagram-info-second-text);
|
|
165
|
-
font-size: 13px;
|
|
166
|
-
font-weight: 400;
|
|
167
|
-
line-height: 16px;
|
|
168
|
-
padding-bottom: 12px;
|
|
169
|
-
}
|
|
170
|
-
&.row-value-container {
|
|
171
|
-
padding-bottom: 12px;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
//width: 240px;
|
|
175
|
-
white-space: normal;
|
|
176
|
-
padding: 0;
|
|
177
|
-
line-height: 18px;
|
|
178
|
-
|
|
179
|
-
.settings-table {
|
|
180
|
-
&__values {
|
|
181
|
-
display: inline-block;
|
|
182
|
-
table-layout: auto;
|
|
183
|
-
word-break: break-word;
|
|
184
|
-
//width: 240px;
|
|
185
|
-
|
|
186
|
-
font-size: 13px;
|
|
187
|
-
font-weight: 400;
|
|
188
|
-
line-height: 16px;
|
|
189
|
-
color: var(--diagram-info-text);
|
|
190
|
-
|
|
191
|
-
&.is-status-yes {
|
|
192
|
-
color: var(--text-green);
|
|
193
|
-
}
|
|
194
|
-
&.is-status-no {
|
|
195
|
-
color: var(--text-red);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
.array-items {
|
|
199
|
-
padding-bottom: 8px;
|
|
200
|
-
|
|
201
|
-
&:last-of-type {
|
|
202
|
-
padding-bottom: 0;
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
&__value {
|
|
207
|
-
white-space: pre-wrap;
|
|
208
|
-
width: 100%;
|
|
209
|
-
display: inline-block;
|
|
210
|
-
}
|
|
211
|
-
&__value-icon {
|
|
212
|
-
width: 20px;
|
|
213
|
-
height: 20px;
|
|
214
|
-
min-width: 20px;
|
|
215
|
-
min-height: 20px;
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
&:last-of-type {
|
|
221
|
-
td {
|
|
222
|
-
padding-bottom: 0;
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
tr td.row-name-container,
|
|
227
|
-
tr td.row-value-container {
|
|
228
|
-
//max-width: 240px;
|
|
229
|
-
word-break: break-word;
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
.not-available {
|
|
233
|
-
color: var(--diagram-info-second-text);
|
|
234
|
-
font-size: 13px;
|
|
235
|
-
font-weight: 400;
|
|
236
|
-
line-height: 15.73px;
|
|
237
|
-
display: flex;
|
|
238
|
-
|
|
239
|
-
span:first-of-type {
|
|
240
|
-
margin-right: 8px;
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
&.ready-complete {
|
|
245
|
-
.table-block {
|
|
246
|
-
display: flex;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
.row-name-container {
|
|
250
|
-
border-right: 24px solid transparent !important;
|
|
251
|
-
white-space: nowrap;
|
|
252
|
-
|
|
253
|
-
span {
|
|
254
|
-
font-weight: 400;
|
|
255
|
-
font-size: 13px;
|
|
256
|
-
line-height: 20px;
|
|
257
|
-
letter-spacing: 0;
|
|
258
|
-
vertical-align: middle;
|
|
259
|
-
width: 100%;
|
|
260
|
-
display: block;
|
|
261
|
-
}
|
|
262
|
-
}
|
|
263
|
-
.row-value-container {
|
|
264
|
-
& > .settings-table__values {
|
|
265
|
-
display: flex;
|
|
266
|
-
//align-items: center;
|
|
267
|
-
column-gap: 8px;
|
|
268
|
-
}
|
|
269
|
-
& > .settings-table__values.is-array {
|
|
270
|
-
display: flex;
|
|
271
|
-
align-items: center;
|
|
272
|
-
flex-wrap: wrap;
|
|
273
|
-
gap: 8px;
|
|
274
|
-
//width: 100%;
|
|
275
|
-
|
|
276
|
-
.settings-table__value {
|
|
277
|
-
width: auto;
|
|
278
|
-
padding: 2.5px 12px;
|
|
279
|
-
height: 20px;
|
|
280
|
-
background: var(--horizontal-line);
|
|
281
|
-
border-radius: 16px;
|
|
282
|
-
line-height: unset;
|
|
283
|
-
font-weight: 400;
|
|
284
|
-
font-size: 12px;
|
|
285
|
-
line-height: 15px;
|
|
286
|
-
letter-spacing: 0;
|
|
287
|
-
text-align: center;
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
.settings-table__value {
|
|
292
|
-
font-weight: 400;
|
|
293
|
-
font-size: 13px;
|
|
294
|
-
line-height: 20px;
|
|
295
|
-
letter-spacing: 0;
|
|
296
|
-
vertical-align: middle;
|
|
297
|
-
//max-width: max-content;
|
|
298
|
-
}
|
|
299
|
-
.settings-table__value-icon {
|
|
300
|
-
//width: 20px;
|
|
301
|
-
//height: 20px;
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
table,
|
|
307
|
-
th,
|
|
308
|
-
td {
|
|
309
|
-
border: 0;
|
|
310
|
-
border-collapse: collapse;
|
|
311
|
-
}
|
|
312
|
-
</style>
|
|
1
|
+
<template>
|
|
2
|
+
<div class="table-wrapper">
|
|
3
|
+
<ui-line v-if="props.viewSettingsField.separator" margin="24px 0 16px" />
|
|
4
|
+
<table
|
|
5
|
+
:class="['settings-table', { 'ready-complete': props.isReadyComplete }]"
|
|
6
|
+
>
|
|
7
|
+
<tbody>
|
|
8
|
+
<tr>
|
|
9
|
+
<td colspan="2">
|
|
10
|
+
<span>
|
|
11
|
+
{{ props.viewSettingsField.title }}
|
|
12
|
+
</span>
|
|
13
|
+
</td>
|
|
14
|
+
</tr>
|
|
15
|
+
<template v-if="props.viewSettingsField.rows.length > 0">
|
|
16
|
+
<tr
|
|
17
|
+
v-for="(row, rowKey) in props.viewSettingsField.rows"
|
|
18
|
+
:key="row.name"
|
|
19
|
+
class="table-block"
|
|
20
|
+
>
|
|
21
|
+
<td
|
|
22
|
+
class="row-name-container"
|
|
23
|
+
:style="
|
|
24
|
+
props.isReadyComplete && {
|
|
25
|
+
width: props.namesWidth?.[0] + 'px',
|
|
26
|
+
minWidth: props.namesWidth?.[0] + 'px',
|
|
27
|
+
}
|
|
28
|
+
"
|
|
29
|
+
>
|
|
30
|
+
<span>
|
|
31
|
+
{{ row.name
|
|
32
|
+
}}<template v-if="props.isLabelsWithDots">:</template>
|
|
33
|
+
</span>
|
|
34
|
+
</td>
|
|
35
|
+
<td class="row-value-container">
|
|
36
|
+
<span
|
|
37
|
+
:class="[
|
|
38
|
+
'settings-table__values',
|
|
39
|
+
row.status && {
|
|
40
|
+
'is-status-yes': row.color,
|
|
41
|
+
'is-status-no': !row.color,
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
'is-array':
|
|
45
|
+
Array.isArray(row.value) && row.value.length > 0,
|
|
46
|
+
},
|
|
47
|
+
]"
|
|
48
|
+
>
|
|
49
|
+
<span
|
|
50
|
+
v-if="row.icon"
|
|
51
|
+
:class="['settings-table__value-icon', row.icon]"
|
|
52
|
+
></span>
|
|
53
|
+
<template v-if="Array.isArray(row.value)">
|
|
54
|
+
<template v-if="row.value.length > 0">
|
|
55
|
+
<span
|
|
56
|
+
v-for="(value, key) in row.value"
|
|
57
|
+
:key="value"
|
|
58
|
+
:data-id="`view-settings-${rowKey}-${key}`"
|
|
59
|
+
class="settings-table__value array-items"
|
|
60
|
+
>
|
|
61
|
+
{{ value }}
|
|
62
|
+
</span>
|
|
63
|
+
</template>
|
|
64
|
+
<template v-else>
|
|
65
|
+
<span
|
|
66
|
+
:data-id="`view-settings-${rowKey}`"
|
|
67
|
+
class="settings-table__value"
|
|
68
|
+
>--</span
|
|
69
|
+
>
|
|
70
|
+
</template>
|
|
71
|
+
</template>
|
|
72
|
+
<span
|
|
73
|
+
v-else
|
|
74
|
+
:data-id="`view-settings-${rowKey}`"
|
|
75
|
+
class="settings-table__value"
|
|
76
|
+
>
|
|
77
|
+
{{ row.value || '--' }}
|
|
78
|
+
</span>
|
|
79
|
+
</span>
|
|
80
|
+
</td>
|
|
81
|
+
</tr>
|
|
82
|
+
</template>
|
|
83
|
+
<tr v-else-if="props.viewSettingsField.rows.length === 0">
|
|
84
|
+
<td colspan="2">
|
|
85
|
+
<div class="not-available">
|
|
86
|
+
<span><ui-icon width="16" height="16" name="info" /></span>
|
|
87
|
+
<span>
|
|
88
|
+
{{ props.viewSettingsField.title }}
|
|
89
|
+
{{ localization.common.isNotAvailableOnThis }}
|
|
90
|
+
{{ props.viewName }}
|
|
91
|
+
</span>
|
|
92
|
+
</div>
|
|
93
|
+
</td>
|
|
94
|
+
</tr>
|
|
95
|
+
</tbody>
|
|
96
|
+
</table>
|
|
97
|
+
</div>
|
|
98
|
+
</template>
|
|
99
|
+
|
|
100
|
+
<script setup lang="ts">
|
|
101
|
+
import type { UI_I_Localization } from '~/lib/models/interfaces'
|
|
102
|
+
import type { UI_I_ViewSettingsFields } from '~/components/common/diagramMain/lib/models/interfaces'
|
|
103
|
+
|
|
104
|
+
// Props from up
|
|
105
|
+
const props = withDefaults(
|
|
106
|
+
defineProps<{
|
|
107
|
+
viewSettingsField: UI_I_ViewSettingsFields
|
|
108
|
+
viewName?: string
|
|
109
|
+
isLabelsWithDots?: boolean
|
|
110
|
+
isReadyComplete?: boolean
|
|
111
|
+
namesWidth: number[]
|
|
112
|
+
}>(),
|
|
113
|
+
{
|
|
114
|
+
viewName: '',
|
|
115
|
+
isLabelsWithDots: false,
|
|
116
|
+
isReadyComplete: false,
|
|
117
|
+
}
|
|
118
|
+
)
|
|
119
|
+
|
|
120
|
+
// UI_I_Localization
|
|
121
|
+
const localization = computed<UI_I_Localization>(() => useLocal())
|
|
122
|
+
</script>
|
|
123
|
+
|
|
124
|
+
<style scoped lang="scss">
|
|
125
|
+
.table-wrapper {
|
|
126
|
+
flex: 1 1 auto;
|
|
127
|
+
width: 100%;
|
|
128
|
+
height: auto;
|
|
129
|
+
box-sizing: border-box;
|
|
130
|
+
overflow: hidden;
|
|
131
|
+
|
|
132
|
+
.settings-table {
|
|
133
|
+
&:not(.ready-complete) {
|
|
134
|
+
.table-block {
|
|
135
|
+
display: grid;
|
|
136
|
+
grid-template-columns: 50% 50%;
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
width: 100%;
|
|
140
|
+
box-sizing: border-box;
|
|
141
|
+
background-color: transparent;
|
|
142
|
+
|
|
143
|
+
tr:first-of-type {
|
|
144
|
+
span {
|
|
145
|
+
color: var(--title-form-first-color);
|
|
146
|
+
font-weight: 500;
|
|
147
|
+
font-size: 14px;
|
|
148
|
+
line-height: 18px;
|
|
149
|
+
margin: 16px 0;
|
|
150
|
+
}
|
|
151
|
+
td {
|
|
152
|
+
padding-bottom: 16px;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
tr:not(:first-of-type) {
|
|
157
|
+
vertical-align: top;
|
|
158
|
+
|
|
159
|
+
td {
|
|
160
|
+
&.row-name-container {
|
|
161
|
+
border-right: 16px solid transparent;
|
|
162
|
+
//width: 256px;
|
|
163
|
+
//min-width: 256px;
|
|
164
|
+
color: var(--diagram-info-second-text);
|
|
165
|
+
font-size: 13px;
|
|
166
|
+
font-weight: 400;
|
|
167
|
+
line-height: 16px;
|
|
168
|
+
padding-bottom: 12px;
|
|
169
|
+
}
|
|
170
|
+
&.row-value-container {
|
|
171
|
+
padding-bottom: 12px;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
//width: 240px;
|
|
175
|
+
white-space: normal;
|
|
176
|
+
padding: 0;
|
|
177
|
+
line-height: 18px;
|
|
178
|
+
|
|
179
|
+
.settings-table {
|
|
180
|
+
&__values {
|
|
181
|
+
display: inline-block;
|
|
182
|
+
table-layout: auto;
|
|
183
|
+
word-break: break-word;
|
|
184
|
+
//width: 240px;
|
|
185
|
+
|
|
186
|
+
font-size: 13px;
|
|
187
|
+
font-weight: 400;
|
|
188
|
+
line-height: 16px;
|
|
189
|
+
color: var(--diagram-info-text);
|
|
190
|
+
|
|
191
|
+
&.is-status-yes {
|
|
192
|
+
color: var(--text-green);
|
|
193
|
+
}
|
|
194
|
+
&.is-status-no {
|
|
195
|
+
color: var(--text-red);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.array-items {
|
|
199
|
+
padding-bottom: 8px;
|
|
200
|
+
|
|
201
|
+
&:last-of-type {
|
|
202
|
+
padding-bottom: 0;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
&__value {
|
|
207
|
+
white-space: pre-wrap;
|
|
208
|
+
width: 100%;
|
|
209
|
+
display: inline-block;
|
|
210
|
+
}
|
|
211
|
+
&__value-icon {
|
|
212
|
+
width: 20px;
|
|
213
|
+
height: 20px;
|
|
214
|
+
min-width: 20px;
|
|
215
|
+
min-height: 20px;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
&:last-of-type {
|
|
221
|
+
td {
|
|
222
|
+
padding-bottom: 0;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
tr td.row-name-container,
|
|
227
|
+
tr td.row-value-container {
|
|
228
|
+
//max-width: 240px;
|
|
229
|
+
word-break: break-word;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.not-available {
|
|
233
|
+
color: var(--diagram-info-second-text);
|
|
234
|
+
font-size: 13px;
|
|
235
|
+
font-weight: 400;
|
|
236
|
+
line-height: 15.73px;
|
|
237
|
+
display: flex;
|
|
238
|
+
|
|
239
|
+
span:first-of-type {
|
|
240
|
+
margin-right: 8px;
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
&.ready-complete {
|
|
245
|
+
.table-block {
|
|
246
|
+
display: flex;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.row-name-container {
|
|
250
|
+
border-right: 24px solid transparent !important;
|
|
251
|
+
white-space: nowrap;
|
|
252
|
+
|
|
253
|
+
span {
|
|
254
|
+
font-weight: 400;
|
|
255
|
+
font-size: 13px;
|
|
256
|
+
line-height: 20px;
|
|
257
|
+
letter-spacing: 0;
|
|
258
|
+
vertical-align: middle;
|
|
259
|
+
width: 100%;
|
|
260
|
+
display: block;
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
.row-value-container {
|
|
264
|
+
& > .settings-table__values {
|
|
265
|
+
display: flex;
|
|
266
|
+
//align-items: center;
|
|
267
|
+
column-gap: 8px;
|
|
268
|
+
}
|
|
269
|
+
& > .settings-table__values.is-array {
|
|
270
|
+
display: flex;
|
|
271
|
+
align-items: center;
|
|
272
|
+
flex-wrap: wrap;
|
|
273
|
+
gap: 8px;
|
|
274
|
+
//width: 100%;
|
|
275
|
+
|
|
276
|
+
.settings-table__value {
|
|
277
|
+
width: auto;
|
|
278
|
+
padding: 2.5px 12px;
|
|
279
|
+
height: 20px;
|
|
280
|
+
background: var(--horizontal-line);
|
|
281
|
+
border-radius: 16px;
|
|
282
|
+
line-height: unset;
|
|
283
|
+
font-weight: 400;
|
|
284
|
+
font-size: 12px;
|
|
285
|
+
line-height: 15px;
|
|
286
|
+
letter-spacing: 0;
|
|
287
|
+
text-align: center;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
.settings-table__value {
|
|
292
|
+
font-weight: 400;
|
|
293
|
+
font-size: 13px;
|
|
294
|
+
line-height: 20px;
|
|
295
|
+
letter-spacing: 0;
|
|
296
|
+
vertical-align: middle;
|
|
297
|
+
//max-width: max-content;
|
|
298
|
+
}
|
|
299
|
+
.settings-table__value-icon {
|
|
300
|
+
//width: 20px;
|
|
301
|
+
//height: 20px;
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
table,
|
|
307
|
+
th,
|
|
308
|
+
td {
|
|
309
|
+
border: 0;
|
|
310
|
+
border-collapse: collapse;
|
|
311
|
+
}
|
|
312
|
+
</style>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bfg-common",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.5.
|
|
4
|
+
"version": "1.5.875",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "nuxt build",
|
|
7
7
|
"dev": "nuxt dev --port=3002",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"@vueuse/core": "10.1.2",
|
|
19
19
|
"@vueuse/nuxt": "10.1.2",
|
|
20
20
|
"bfg-nuxt-3-graph": "1.0.27",
|
|
21
|
-
"bfg-uikit": "1.1.
|
|
21
|
+
"bfg-uikit": "1.1.8",
|
|
22
22
|
"eslint-config-prettier": "^8.5.0",
|
|
23
23
|
"eslint-plugin-myrules": "file:./eslint",
|
|
24
24
|
"nuxt": "3.11.2",
|