@dataloop-ai/components 0.17.4 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.17.4",
+  "version": "0.18.0",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlCharts/components/DlBrush.vue

@@ -229,7 +229,6 @@ export default defineComponent({
         const rangeStyles = computed(() => ({
             '--dl-track-width': 0.25 * parseInt(props.thumbSize) + 'px',
             '--text-color': getColor(props.textColor, 'dl-color-darker'),
-            '--thumb-size': props.thumbSize,
             '--width': props.width,
             '--color': getColor(props.color, 'dl-color-secondary'),
             width: props.width

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -115,7 +115,7 @@
                 disableDropdown === true
         "
         :disabled="disabled === true || disableMainButton === true"
-        :style="[mainButtonStyle, cssVars]"
+        :style="mainButtonStyle"
         :no-wrap="props.noWrap"
         :tooltip="tooltip"
         :max-width="maxWidth"
@@ -316,14 +316,6 @@ export default defineComponent({
             }
         })
 
-        const cssVars = computed(() => {
-            return {
-                '--justify-content': props.fluid
-                    ? 'space-between'
-                    : 'space-around'
-            }
-        })
-
         watch(
             () => props.modelValue,
             (val) => {
@@ -424,8 +416,7 @@ export default defineComponent({
             menuModel,
             props,
             setHighlightedIndex,
-            handleSelectedItem,
-            cssVars
+            handleSelectedItem
         }
     }
 })
@@ -476,7 +467,7 @@ export default defineComponent({
         &__title {
             display: flex;
             align-items: center;
-            justify-content: var(--justify-content);
+            justify-content: space-around;
             text-align: center;
             padding: 0;
             flex: 10000 1 0%;

package/src/components/compound/DlRange/DlRange.vue

@@ -281,7 +281,6 @@ export default defineComponent({
         const rangeStyles = computed(() => ({
             '--text-color': getColor(props.textColor, 'dl-color-darker'),
             '--width': props.width,
-            '--thumb-size': props.thumbSize,
             '--color': getColor(props.color, 'dl-color-secondary')
         }))
 

package/src/components/compound/DlSlider/DlSlider.vue

@@ -28,7 +28,6 @@
                     :color="color"
                     :readonly="readonly"
                     :disabled="disabled"
-                    :thumb-size="thumbSize"
                     :snap="snap"
                     :tabindex="tabindex"
                     :name="name"
@@ -83,7 +82,6 @@
                     :step="step"
                     :color="color"
                     :readonly="readonly"
-                    :thumb-size="thumbSize"
                     :disabled="disabled"
                     :snap="snap"
                     :name="name"
@@ -136,10 +134,6 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
-        thumbSize: {
-            type: String,
-            default: '10px'
-        },
         min: {
             type: Number,
             default: 0
@@ -216,7 +210,6 @@ export default defineComponent({
             return {
                 '--text-color': getColor(this.textColor, 'dl-color-darker'),
                 '--width': this.width,
-                '--thumb-size': parseInt(this.thumbSize) / 2 + 'px',
                 '--color': getColor(this.color, 'dl-color-secondary')
             }
         }

package/src/components/compound/DlSlider/sliderStyles.scss

@@ -70,8 +70,7 @@
   & .slider-bar-container {
     display: flex;
     align-items: center;
-    width: calc(100% - var(--thumb-size));
-    align-self: center;
+    width: 100%;
   }
 
   & .text {