@dataloop-ai/components 0.17.2 → 0.17.4
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/compound/DlCharts/components/DlBrush.vue +1 -0
- package/src/components/compound/DlDropdownButton/DlDropdownButton.vue +12 -3
- package/src/components/compound/DlRange/DlRange.vue +1 -0
- package/src/components/compound/DlSlider/DlSlider.vue +7 -0
- package/src/components/compound/DlSlider/sliderStyles.scss +2 -1
package/package.json
CHANGED
|
@@ -229,6 +229,7 @@ export default defineComponent({
|
|
|
229
229
|
const rangeStyles = computed(() => ({
|
|
230
230
|
'--dl-track-width': 0.25 * parseInt(props.thumbSize) + 'px',
|
|
231
231
|
'--text-color': getColor(props.textColor, 'dl-color-darker'),
|
|
232
|
+
'--thumb-size': props.thumbSize,
|
|
232
233
|
'--width': props.width,
|
|
233
234
|
'--color': getColor(props.color, 'dl-color-secondary'),
|
|
234
235
|
width: props.width
|
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
disableDropdown === true
|
|
116
116
|
"
|
|
117
117
|
:disabled="disabled === true || disableMainButton === true"
|
|
118
|
-
:style="mainButtonStyle"
|
|
118
|
+
:style="[mainButtonStyle, cssVars]"
|
|
119
119
|
:no-wrap="props.noWrap"
|
|
120
120
|
:tooltip="tooltip"
|
|
121
121
|
:max-width="maxWidth"
|
|
@@ -316,6 +316,14 @@ export default defineComponent({
|
|
|
316
316
|
}
|
|
317
317
|
})
|
|
318
318
|
|
|
319
|
+
const cssVars = computed(() => {
|
|
320
|
+
return {
|
|
321
|
+
'--justify-content': props.fluid
|
|
322
|
+
? 'space-between'
|
|
323
|
+
: 'space-around'
|
|
324
|
+
}
|
|
325
|
+
})
|
|
326
|
+
|
|
319
327
|
watch(
|
|
320
328
|
() => props.modelValue,
|
|
321
329
|
(val) => {
|
|
@@ -416,7 +424,8 @@ export default defineComponent({
|
|
|
416
424
|
menuModel,
|
|
417
425
|
props,
|
|
418
426
|
setHighlightedIndex,
|
|
419
|
-
handleSelectedItem
|
|
427
|
+
handleSelectedItem,
|
|
428
|
+
cssVars
|
|
420
429
|
}
|
|
421
430
|
}
|
|
422
431
|
})
|
|
@@ -467,7 +476,7 @@ export default defineComponent({
|
|
|
467
476
|
&__title {
|
|
468
477
|
display: flex;
|
|
469
478
|
align-items: center;
|
|
470
|
-
justify-content:
|
|
479
|
+
justify-content: var(--justify-content);
|
|
471
480
|
text-align: center;
|
|
472
481
|
padding: 0;
|
|
473
482
|
flex: 10000 1 0%;
|
|
@@ -281,6 +281,7 @@ export default defineComponent({
|
|
|
281
281
|
const rangeStyles = computed(() => ({
|
|
282
282
|
'--text-color': getColor(props.textColor, 'dl-color-darker'),
|
|
283
283
|
'--width': props.width,
|
|
284
|
+
'--thumb-size': props.thumbSize,
|
|
284
285
|
'--color': getColor(props.color, 'dl-color-secondary')
|
|
285
286
|
}))
|
|
286
287
|
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
:color="color"
|
|
29
29
|
:readonly="readonly"
|
|
30
30
|
:disabled="disabled"
|
|
31
|
+
:thumb-size="thumbSize"
|
|
31
32
|
:snap="snap"
|
|
32
33
|
:tabindex="tabindex"
|
|
33
34
|
:name="name"
|
|
@@ -82,6 +83,7 @@
|
|
|
82
83
|
:step="step"
|
|
83
84
|
:color="color"
|
|
84
85
|
:readonly="readonly"
|
|
86
|
+
:thumb-size="thumbSize"
|
|
85
87
|
:disabled="disabled"
|
|
86
88
|
:snap="snap"
|
|
87
89
|
:name="name"
|
|
@@ -134,6 +136,10 @@ export default defineComponent({
|
|
|
134
136
|
type: Boolean,
|
|
135
137
|
default: false
|
|
136
138
|
},
|
|
139
|
+
thumbSize: {
|
|
140
|
+
type: String,
|
|
141
|
+
default: '10px'
|
|
142
|
+
},
|
|
137
143
|
min: {
|
|
138
144
|
type: Number,
|
|
139
145
|
default: 0
|
|
@@ -210,6 +216,7 @@ export default defineComponent({
|
|
|
210
216
|
return {
|
|
211
217
|
'--text-color': getColor(this.textColor, 'dl-color-darker'),
|
|
212
218
|
'--width': this.width,
|
|
219
|
+
'--thumb-size': parseInt(this.thumbSize) / 2 + 'px',
|
|
213
220
|
'--color': getColor(this.color, 'dl-color-secondary')
|
|
214
221
|
}
|
|
215
222
|
}
|