@dataloop-ai/components 0.20.252 → 0.20.254
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/package.json +1 -1
- package/src/components/basic/DlButton/DlButton.vue +2 -1
- package/src/components/basic/DlKpi/DlKpi.vue +4 -10
- package/src/components/basic/DlListItem/DlListItem.vue +7 -17
- package/src/components/compound/DlCounters/DlCounters.vue +16 -20
- package/src/components/compound/DlInput/DlInput.vue +2 -1
- package/src/components/compound/DlInput/DlTextInput.vue +2 -1
- package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue +11 -3
- package/src/components/compound/DlTable/styles/dl-table-styles.scss +4 -2
- package/src/components/compound/DlTabs/DlTabs.vue +4 -1
- package/src/components/compound/DlTabs/components/DlTab.vue +11 -2
- package/src/components/essential/DlCheckbox/DlCheckbox.vue +1 -1
- package/src/components/essential/DlTypography/DlTypography.vue +75 -1
- package/src/components/shared/DlItemSection/DlItemSection.vue +5 -6
- package/src/layouts/DlPageLayout/components/DlPageLayoutHeader/DlPageLayoutHeader.vue +14 -16
package/package.json
CHANGED
|
@@ -565,8 +565,9 @@ export default defineComponent({
|
|
|
565
565
|
padding: var(--dl-button-padding);
|
|
566
566
|
margin: var(--dl-button-margin);
|
|
567
567
|
border-radius: var(--dl-button-border-radius);
|
|
568
|
-
font-family: var(--dl-typography-font-family
|
|
568
|
+
font-family: var(--dl-typography-body-body2-font-family);
|
|
569
569
|
font-size: var(--dl-button-font-size);
|
|
570
|
+
font-weight: var(--dl-typography-body-body2-font-weight);
|
|
570
571
|
cursor: var(--dl-button-cursor);
|
|
571
572
|
color: var(--dl-button-text-color);
|
|
572
573
|
background-color: var(--dl-button-bg);
|
|
@@ -86,7 +86,7 @@ export default defineComponent({
|
|
|
86
86
|
},
|
|
87
87
|
titleFontSize: {
|
|
88
88
|
type: String,
|
|
89
|
-
default: '
|
|
89
|
+
default: 'body1',
|
|
90
90
|
required: false
|
|
91
91
|
},
|
|
92
92
|
subtitle: {
|
|
@@ -96,7 +96,7 @@ export default defineComponent({
|
|
|
96
96
|
},
|
|
97
97
|
subtitleFontSize: {
|
|
98
98
|
type: String,
|
|
99
|
-
default: '
|
|
99
|
+
default: 'body3',
|
|
100
100
|
required: false
|
|
101
101
|
},
|
|
102
102
|
infoMessage: {
|
|
@@ -160,7 +160,7 @@ export default defineComponent({
|
|
|
160
160
|
props.small ? '20px' : props.counterFontSize
|
|
161
161
|
)
|
|
162
162
|
const titleFontSizeComputed = computed(() =>
|
|
163
|
-
props.small ? '
|
|
163
|
+
props.small ? 'body2' : props.titleFontSize
|
|
164
164
|
)
|
|
165
165
|
|
|
166
166
|
const typographyStyles = computed<Record<string, string>>(() => {
|
|
@@ -278,7 +278,7 @@ export default defineComponent({
|
|
|
278
278
|
align-items: center;
|
|
279
279
|
width: 100%;
|
|
280
280
|
justify-content: center;
|
|
281
|
-
padding-top: 6px;
|
|
281
|
+
padding-top: var(--dl-kpi-title-padding-top, 6px);
|
|
282
282
|
color: var(--dl-color-darker);
|
|
283
283
|
|
|
284
284
|
&__text {
|
|
@@ -287,9 +287,6 @@ export default defineComponent({
|
|
|
287
287
|
max-width: var(--dl-kpi-max-width, var(--dl-kpi-title-max-width));
|
|
288
288
|
max-height: 40px;
|
|
289
289
|
font-style: normal;
|
|
290
|
-
font-weight: 400;
|
|
291
|
-
font-size: 16px;
|
|
292
|
-
line-height: 19px;
|
|
293
290
|
text-transform: capitalize;
|
|
294
291
|
text-align: center;
|
|
295
292
|
overflow: hidden;
|
|
@@ -302,9 +299,6 @@ export default defineComponent({
|
|
|
302
299
|
);
|
|
303
300
|
max-height: 40px;
|
|
304
301
|
font-style: normal;
|
|
305
|
-
font-weight: 400;
|
|
306
|
-
font-size: 12px;
|
|
307
|
-
line-height: 19px;
|
|
308
302
|
text-transform: capitalize;
|
|
309
303
|
text-align: center;
|
|
310
304
|
overflow: hidden;
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<component
|
|
3
|
-
:is="type"
|
|
4
|
-
:id="uuid"
|
|
5
|
-
class="list-item-wrapper"
|
|
6
|
-
>
|
|
2
|
+
<component :is="type" :id="uuid" class="list-item-wrapper">
|
|
7
3
|
<div
|
|
8
4
|
v-wave="!disabled && withWave"
|
|
9
5
|
:class="[
|
|
@@ -17,11 +13,7 @@
|
|
|
17
13
|
@click="onClick"
|
|
18
14
|
>
|
|
19
15
|
<slot name="prefix">
|
|
20
|
-
<dl-item-section
|
|
21
|
-
v-if="startIcon"
|
|
22
|
-
side
|
|
23
|
-
style="display: flex"
|
|
24
|
-
>
|
|
16
|
+
<dl-item-section v-if="startIcon" side style="display: flex">
|
|
25
17
|
<dl-icon
|
|
26
18
|
:icon="startIconData.icon"
|
|
27
19
|
:color="getIconColor(startIconData.color)"
|
|
@@ -31,11 +23,7 @@
|
|
|
31
23
|
</slot>
|
|
32
24
|
<slot />
|
|
33
25
|
<slot name="suffix">
|
|
34
|
-
<dl-item-section
|
|
35
|
-
v-if="endIcon"
|
|
36
|
-
side
|
|
37
|
-
style="display: flex"
|
|
38
|
-
>
|
|
26
|
+
<dl-item-section v-if="endIcon" side style="display: flex">
|
|
39
27
|
<dl-icon
|
|
40
28
|
:icon="endIconData.icon"
|
|
41
29
|
:color="getIconColor(endIconData.color)"
|
|
@@ -215,8 +203,10 @@ export default defineComponent({
|
|
|
215
203
|
min-height: var(--dl-list-item-height);
|
|
216
204
|
height: 100%;
|
|
217
205
|
padding: var(--dl-list-item-padding);
|
|
218
|
-
font-
|
|
219
|
-
|
|
206
|
+
font-family: var(--dl-typography-body-body2-font-family);
|
|
207
|
+
font-size: var(--dl-typography-body-body2-font-size);
|
|
208
|
+
line-height: var(--dl-typography-body-body2-line-height);
|
|
209
|
+
font-weight: var(--dl-typography-body-body2-font-weight);
|
|
220
210
|
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
221
211
|
&:hover {
|
|
222
212
|
background-color: var(--dl-list-item-hover);
|
|
@@ -1,15 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
:id="uuid"
|
|
4
|
-
class="dl-counters-container"
|
|
5
|
-
:style="cssVars"
|
|
6
|
-
>
|
|
2
|
+
<div :id="uuid" class="dl-counters-container" :style="cssVars">
|
|
7
3
|
<ul>
|
|
8
|
-
<li
|
|
9
|
-
v-for="(item, index) in items"
|
|
10
|
-
:key="index"
|
|
11
|
-
class="item"
|
|
12
|
-
>
|
|
4
|
+
<li v-for="(item, index) in items" :key="index" class="item">
|
|
13
5
|
<div :class="computeClass('item-content')">
|
|
14
6
|
<dl-kpi
|
|
15
7
|
:counter="kpiValue(item)"
|
|
@@ -24,7 +16,7 @@
|
|
|
24
16
|
:dense="dense"
|
|
25
17
|
/>
|
|
26
18
|
</div>
|
|
27
|
-
<div class="divider" />
|
|
19
|
+
<div v-if="showDivider" class="divider" />
|
|
28
20
|
</li>
|
|
29
21
|
</ul>
|
|
30
22
|
</div>
|
|
@@ -64,13 +56,17 @@ export default defineComponent({
|
|
|
64
56
|
},
|
|
65
57
|
titleFontSize: {
|
|
66
58
|
type: String,
|
|
67
|
-
default: '
|
|
59
|
+
default: 'body1'
|
|
68
60
|
},
|
|
69
61
|
subtitleFontSize: {
|
|
70
62
|
type: String,
|
|
71
|
-
default: '
|
|
63
|
+
default: 'body3'
|
|
72
64
|
},
|
|
73
|
-
dense: Boolean
|
|
65
|
+
dense: Boolean,
|
|
66
|
+
showDivider: {
|
|
67
|
+
type: Boolean,
|
|
68
|
+
default: true
|
|
69
|
+
}
|
|
74
70
|
},
|
|
75
71
|
data() {
|
|
76
72
|
return {
|
|
@@ -118,11 +114,11 @@ export default defineComponent({
|
|
|
118
114
|
|
|
119
115
|
ul {
|
|
120
116
|
list-style-type: none;
|
|
121
|
-
overflow: hidden;
|
|
122
117
|
margin: 0;
|
|
123
118
|
padding: 0;
|
|
124
119
|
display: flex;
|
|
125
120
|
align-items: stretch;
|
|
121
|
+
gap: var(--dl-counter-gap, 0px);
|
|
126
122
|
|
|
127
123
|
.item {
|
|
128
124
|
display: flex;
|
|
@@ -133,12 +129,13 @@ ul {
|
|
|
133
129
|
display: flex;
|
|
134
130
|
flex-direction: column;
|
|
135
131
|
align-items: center;
|
|
136
|
-
padding
|
|
137
|
-
padding-right: var(--dl-counter-spacing);
|
|
132
|
+
padding: var(--dl-counter-cell-padding, 0 var(--dl-counter-spacing));
|
|
138
133
|
|
|
139
134
|
&--small {
|
|
140
|
-
padding
|
|
141
|
-
|
|
135
|
+
padding: var(
|
|
136
|
+
--dl-counter-cell-padding,
|
|
137
|
+
0 var(--dl-counter-spacing)
|
|
138
|
+
);
|
|
142
139
|
}
|
|
143
140
|
}
|
|
144
141
|
|
|
@@ -186,7 +183,6 @@ ul {
|
|
|
186
183
|
}
|
|
187
184
|
|
|
188
185
|
li {
|
|
189
|
-
float: left;
|
|
190
186
|
text-decoration: none;
|
|
191
187
|
position: relative;
|
|
192
188
|
|
|
@@ -41,6 +41,8 @@
|
|
|
41
41
|
<dl-button
|
|
42
42
|
icon="icon-dl-close"
|
|
43
43
|
size="m"
|
|
44
|
+
text-color="dell-gray-600"
|
|
45
|
+
hover-text-color="var(--dell-gray-800)"
|
|
44
46
|
flat
|
|
45
47
|
:disabled="disabled"
|
|
46
48
|
@mousedown="onClear"
|
|
@@ -73,7 +75,11 @@
|
|
|
73
75
|
ref="label"
|
|
74
76
|
class="dl-smart-search-input__search-label"
|
|
75
77
|
:text="computedStatus.message"
|
|
76
|
-
:color="
|
|
78
|
+
:color="
|
|
79
|
+
computedStatus.type === 'error'
|
|
80
|
+
? 'var(--dell-red-500)'
|
|
81
|
+
: 'gray'
|
|
82
|
+
"
|
|
77
83
|
:style="labelStyles"
|
|
78
84
|
/>
|
|
79
85
|
</div>
|
|
@@ -1037,7 +1043,10 @@ export default defineComponent({
|
|
|
1037
1043
|
|
|
1038
1044
|
const labelStyles = computed<Record<string, string | number>>(() => {
|
|
1039
1045
|
return {
|
|
1040
|
-
color:
|
|
1046
|
+
color:
|
|
1047
|
+
computedStatus.value.type === 'error'
|
|
1048
|
+
? 'var(--dell-red-500)'
|
|
1049
|
+
: 'gray'
|
|
1041
1050
|
}
|
|
1042
1051
|
})
|
|
1043
1052
|
|
|
@@ -1414,7 +1423,6 @@ export default defineComponent({
|
|
|
1414
1423
|
}
|
|
1415
1424
|
::v-deep .dl-button {
|
|
1416
1425
|
padding: 0px;
|
|
1417
|
-
color: var(--dl-color-darker);
|
|
1418
1426
|
}
|
|
1419
1427
|
}
|
|
1420
1428
|
|
|
@@ -374,8 +374,10 @@
|
|
|
374
374
|
tbody {
|
|
375
375
|
td {
|
|
376
376
|
position: relative;
|
|
377
|
-
font-
|
|
378
|
-
|
|
377
|
+
font-family: var(--dl-typography-body-body2-font-family);
|
|
378
|
+
font-size: var(--dl-typography-body-body2-font-size);
|
|
379
|
+
line-height: var(--dl-typography-body-body2-line-height);
|
|
380
|
+
font-weight: var(--dl-typography-body-body2-font-weight);
|
|
379
381
|
background-color: inherit;
|
|
380
382
|
color: var(--dell-gray-800);
|
|
381
383
|
|
|
@@ -68,7 +68,10 @@ export default defineComponent({
|
|
|
68
68
|
fluid: { type: Boolean, default: false },
|
|
69
69
|
disabled: { type: Boolean, default: false },
|
|
70
70
|
modelValue: { type: String, required: true },
|
|
71
|
-
fontSize: {
|
|
71
|
+
fontSize: {
|
|
72
|
+
type: String,
|
|
73
|
+
default: 'var(--dl-typography-body-body2-font-size)'
|
|
74
|
+
},
|
|
72
75
|
gap: { type: String, default: '40px' },
|
|
73
76
|
bordered: { type: Boolean, default: true }
|
|
74
77
|
},
|
|
@@ -50,7 +50,10 @@ export default defineComponent({
|
|
|
50
50
|
showTooltip: { type: Boolean, default: false },
|
|
51
51
|
tooltip: { type: String, default: null },
|
|
52
52
|
tabindex: { type: String, default: '0' },
|
|
53
|
-
fontSize: {
|
|
53
|
+
fontSize: {
|
|
54
|
+
type: String,
|
|
55
|
+
default: 'var(--dl-typography-body-body2-font-size)'
|
|
56
|
+
},
|
|
54
57
|
bordered: { type: Boolean, default: true },
|
|
55
58
|
icon: { type: String, default: '' }
|
|
56
59
|
},
|
|
@@ -133,7 +136,11 @@ export default defineComponent({
|
|
|
133
136
|
}
|
|
134
137
|
}
|
|
135
138
|
&--simple {
|
|
139
|
+
padding: 12.5px 16px;
|
|
140
|
+
font-family: var(--dl-typography-body-body2-font-family);
|
|
136
141
|
font-size: var(--dl-tab-font-size);
|
|
142
|
+
line-height: var(--dl-typography-body-body2-line-height);
|
|
143
|
+
font-weight: var(--dl-typography-body-body2-font-weight);
|
|
137
144
|
border-bottom: 1px solid var(--dl-color-separator);
|
|
138
145
|
&.active {
|
|
139
146
|
border-color: var(--dl-color-secondary);
|
|
@@ -141,8 +148,10 @@ export default defineComponent({
|
|
|
141
148
|
}
|
|
142
149
|
&--vertical {
|
|
143
150
|
padding: 5px 10px;
|
|
151
|
+
font-family: var(--dl-typography-body-body2-font-family);
|
|
144
152
|
font-size: var(--dl-tab-font-size);
|
|
145
|
-
line-height:
|
|
153
|
+
line-height: var(--dl-typography-body-body2-line-height);
|
|
154
|
+
font-weight: var(--dl-typography-body-body2-font-weight);
|
|
146
155
|
border-color: var(--dl-color-separator) !important;
|
|
147
156
|
&:not(:last-child) {
|
|
148
157
|
border-right: 1px solid var(--dl-color-separator);
|
|
@@ -11,7 +11,20 @@ import { DlTextTransformOptions } from '../../shared/types'
|
|
|
11
11
|
|
|
12
12
|
type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div'
|
|
13
13
|
|
|
14
|
-
const
|
|
14
|
+
const legacySizes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body', 'small']
|
|
15
|
+
const newTypographySizes = [
|
|
16
|
+
'header1',
|
|
17
|
+
'header4',
|
|
18
|
+
'header5',
|
|
19
|
+
'header6',
|
|
20
|
+
'header6-medium',
|
|
21
|
+
'body1',
|
|
22
|
+
'body1-medium',
|
|
23
|
+
'body2',
|
|
24
|
+
'body2-medium',
|
|
25
|
+
'body3'
|
|
26
|
+
]
|
|
27
|
+
const sizes = [...legacySizes, ...newTypographySizes]
|
|
15
28
|
|
|
16
29
|
export default defineComponent({
|
|
17
30
|
name: 'DlTypography',
|
|
@@ -128,6 +141,67 @@ export default defineComponent({
|
|
|
128
141
|
font-size: var(--dl-font-size-small);
|
|
129
142
|
}
|
|
130
143
|
|
|
144
|
+
&--header1 {
|
|
145
|
+
font-family: var(--dl-typography-header-h1-font-family);
|
|
146
|
+
font-size: var(--dl-typography-header-h1-font-size);
|
|
147
|
+
line-height: var(--dl-typography-header-h1-line-height) !important;
|
|
148
|
+
font-weight: var(--dl-typography-header-h1-font-weight);
|
|
149
|
+
}
|
|
150
|
+
&--header4 {
|
|
151
|
+
font-family: var(--dl-typography-header-h4-font-family);
|
|
152
|
+
font-size: var(--dl-typography-header-h4-font-size);
|
|
153
|
+
line-height: var(--dl-typography-header-h4-line-height) !important;
|
|
154
|
+
font-weight: var(--dl-typography-header-h4-font-weight);
|
|
155
|
+
}
|
|
156
|
+
&--header5 {
|
|
157
|
+
font-family: var(--dl-typography-header-h5-font-family);
|
|
158
|
+
font-size: var(--dl-typography-header-h5-font-size);
|
|
159
|
+
line-height: var(--dl-typography-header-h5-line-height) !important;
|
|
160
|
+
font-weight: var(--dl-typography-header-h5-font-weight);
|
|
161
|
+
}
|
|
162
|
+
&--header6 {
|
|
163
|
+
font-family: var(--dl-typography-header-h6-font-family);
|
|
164
|
+
font-size: var(--dl-typography-header-h6-font-size);
|
|
165
|
+
line-height: var(--dl-typography-header-h6-line-height) !important;
|
|
166
|
+
font-weight: var(--dl-typography-header-h6-font-weight);
|
|
167
|
+
}
|
|
168
|
+
&--header6-medium {
|
|
169
|
+
font-family: var(--dl-typography-header-h6-font-family);
|
|
170
|
+
font-size: var(--dl-typography-header-h6-font-size);
|
|
171
|
+
line-height: var(--dl-typography-header-h6-line-height) !important;
|
|
172
|
+
font-weight: var(--dl-typography-header-h6-medium-font-weight);
|
|
173
|
+
}
|
|
174
|
+
&--body1 {
|
|
175
|
+
font-family: var(--dl-typography-body-body1-font-family);
|
|
176
|
+
font-size: var(--dl-typography-body-body1-font-size);
|
|
177
|
+
line-height: var(--dl-typography-body-body1-line-height) !important;
|
|
178
|
+
font-weight: var(--dl-typography-body-body1-font-weight);
|
|
179
|
+
}
|
|
180
|
+
&--body1-medium {
|
|
181
|
+
font-family: var(--dl-typography-body-body1-font-family);
|
|
182
|
+
font-size: var(--dl-typography-body-body1-font-size);
|
|
183
|
+
line-height: var(--dl-typography-body-body1-line-height) !important;
|
|
184
|
+
font-weight: var(--dl-typography-body-body1-medium-font-weight);
|
|
185
|
+
}
|
|
186
|
+
&--body2 {
|
|
187
|
+
font-family: var(--dl-typography-body-body2-font-family);
|
|
188
|
+
font-size: var(--dl-typography-body-body2-font-size);
|
|
189
|
+
line-height: var(--dl-typography-body-body2-line-height) !important;
|
|
190
|
+
font-weight: var(--dl-typography-body-body2-font-weight);
|
|
191
|
+
}
|
|
192
|
+
&--body2-medium {
|
|
193
|
+
font-family: var(--dl-typography-body-body2-font-family);
|
|
194
|
+
font-size: var(--dl-typography-body-body2-font-size);
|
|
195
|
+
line-height: var(--dl-typography-body-body2-line-height) !important;
|
|
196
|
+
font-weight: var(--dl-typography-body-body2-medium-font-weight);
|
|
197
|
+
}
|
|
198
|
+
&--body3 {
|
|
199
|
+
font-family: var(--dl-typography-body-body3-font-family);
|
|
200
|
+
font-size: var(--dl-typography-body-body3-font-size);
|
|
201
|
+
line-height: var(--dl-typography-body-body3-line-height) !important;
|
|
202
|
+
font-weight: var(--dl-typography-body-body3-font-weight);
|
|
203
|
+
}
|
|
204
|
+
|
|
131
205
|
&:active {
|
|
132
206
|
color: var(--dl-typography-color-active, var(--dl-typography-color));
|
|
133
207
|
}
|
|
@@ -1,9 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
3
|
-
:id="uuid"
|
|
4
|
-
:style="cssVars"
|
|
5
|
-
:class="classes"
|
|
6
|
-
>
|
|
2
|
+
<div :id="uuid" :style="cssVars" :class="classes">
|
|
7
3
|
<slot />
|
|
8
4
|
</div>
|
|
9
5
|
</template>
|
|
@@ -55,7 +51,10 @@ export default defineComponent({
|
|
|
55
51
|
.dl-item__section {
|
|
56
52
|
padding-left: 0;
|
|
57
53
|
padding-right: 0;
|
|
58
|
-
font-
|
|
54
|
+
font-family: var(--dl-typography-body-body2-font-family);
|
|
55
|
+
font-size: var(--dl-typography-body-body2-font-size);
|
|
56
|
+
line-height: var(--dl-typography-body-body2-line-height);
|
|
57
|
+
font-weight: var(--dl-typography-body-body2-font-weight);
|
|
59
58
|
color: var(--dl-item-color);
|
|
60
59
|
min-width: 0;
|
|
61
60
|
justify-content: flex-start;
|
|
@@ -1,19 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="page-layout-header">
|
|
3
3
|
<div class="page-layout-header__title-container">
|
|
4
|
-
<dl-typography
|
|
5
|
-
color="dl-color-lighter"
|
|
6
|
-
variant="h6"
|
|
7
|
-
>
|
|
4
|
+
<dl-typography color="dl-color-lighter" variant="h6">
|
|
8
5
|
<slot name="subtitle">
|
|
9
6
|
{{ subTitle }}
|
|
10
7
|
</slot>
|
|
11
8
|
</dl-typography>
|
|
12
9
|
<div class="page-layout-header__title">
|
|
13
|
-
<dl-typography
|
|
14
|
-
color="dl-color-darker"
|
|
15
|
-
variant="h1"
|
|
16
|
-
>
|
|
10
|
+
<dl-typography color="dl-color-darker" variant="h1">
|
|
17
11
|
<slot name="title">
|
|
18
12
|
{{ title }}
|
|
19
13
|
</slot>
|
|
@@ -21,13 +15,11 @@
|
|
|
21
15
|
<slot name="actions" />
|
|
22
16
|
</div>
|
|
23
17
|
</div>
|
|
24
|
-
<div
|
|
25
|
-
v-if="counters.length > 0"
|
|
26
|
-
class="page-layout-header__counters"
|
|
27
|
-
>
|
|
18
|
+
<div v-if="counters.length > 0" class="page-layout-header__counters">
|
|
28
19
|
<dl-counters
|
|
29
|
-
counter-font-size="
|
|
30
|
-
title-font-size="
|
|
20
|
+
counter-font-size="header6"
|
|
21
|
+
title-font-size="body3"
|
|
22
|
+
:show-divider="showDivider"
|
|
31
23
|
:items="counters"
|
|
32
24
|
/>
|
|
33
25
|
</div>
|
|
@@ -57,6 +49,10 @@ export default defineComponent({
|
|
|
57
49
|
counters: {
|
|
58
50
|
type: Array as PropType<DlCounterItem[]>,
|
|
59
51
|
default: () => [] as DlCounterItem[]
|
|
52
|
+
},
|
|
53
|
+
showDivider: {
|
|
54
|
+
type: Boolean,
|
|
55
|
+
default: true
|
|
60
56
|
}
|
|
61
57
|
}
|
|
62
58
|
})
|
|
@@ -74,9 +70,11 @@ export default defineComponent({
|
|
|
74
70
|
&__title-container {
|
|
75
71
|
display: flex;
|
|
76
72
|
height: 100%;
|
|
77
|
-
padding-left: 25px;
|
|
73
|
+
padding-left: var(--dl-page-layout-header-title-padding-left, 25px);
|
|
74
|
+
padding-top: var(--dl-page-layout-header-title-padding-top, 0px);
|
|
75
|
+
justify-content: var(--dl-page-layout-header-title-justify, center);
|
|
78
76
|
flex-direction: column;
|
|
79
|
-
|
|
77
|
+
box-sizing: border-box;
|
|
80
78
|
flex-grow: 1;
|
|
81
79
|
}
|
|
82
80
|
|