@dataloop-ai/components 0.17.121 → 0.17.123

package/package.json

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

package/src/components/basic/DlButton/utils.ts

@@ -1,7 +1,7 @@
 import { getColor } from '../../../utils'
 import { getLighterGradient } from '../../../utils/getLighterGradient'
 
-export type ButtonSizes = 's' | 'm' | 'l' | 'xl' | string
+export type ButtonSizes = 's' | 'm' | 'l' | ('xl' & string)
 
 const paddings = {
     s: '7px 16px',

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -453,14 +453,15 @@ export default defineComponent({
         },
         suggestions(val) {
             if (this.isDatePickerVisible) return
+            nextTick(() => {
+                if (!val.length) {
+                    this.suggestionModal = false
+                }
 
-            if (!val.length) {
-                this.suggestionModal = false
-            }
-
-            if (!this.suggestionModal && val.length > 0 && this.focused) {
-                this.suggestionModal = true
-            }
+                if (!this.suggestionModal && val.length > 0 && this.focused) {
+                    this.suggestionModal = true
+                }
+            })
         },
         expanded(value) {
             this.$nextTick(() => {

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

@@ -1,19 +1,20 @@
 <template>
     <input
         ref="sliderInput"
-        :value="sliderValue"
+        :value="modelRef"
         type="number"
         :min="min"
         :max="max"
         :readonly="readonly"
         :disabled="disabled"
-        @input="sliderValue = $event"
+        @input="handleChange"
         @change="handleChange"
     >
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { debounce } from 'lodash'
+import { defineComponent, toRef } from 'vue-demi'
 import { getInputValue } from '../utils'
 
 export default defineComponent({
@@ -45,34 +46,24 @@ export default defineComponent({
         }
     },
     emits: ['update:model-value', 'change'],
-    computed: {
-        sliderValue: {
-            get(): number | undefined {
-                return this.modelValue
-            },
-            set(evt: any): void {
-                const val = evt.target.value
+    setup(props, { emit }) {
+        const modelRef = toRef(props, 'modelValue')
 
-                if (val === '') return
-
-                const { value } = getInputValue(val, this.min, this.max)
-
-                ;(this.$refs.sliderInput as HTMLInputElement).value = value
-
-                this.$emit('update:model-value', Number(value))
-            }
-        }
-    },
-    methods: {
-        handleChange(evt: any) {
+        const handleChange = (evt: any) => {
             const val = evt.target.value
             if (val === '') return
 
-            const { value } = getInputValue(val, this.min, this.max)
+            const { value } = getInputValue(val, props.min, props.max)
+
+            emit('change', Number(value))
+            emit('update:model-value', Number(value))
+        }
 
-            ;(this.$refs.sliderInput as HTMLInputElement).value = value
+        const debouncedHandleChange = debounce(handleChange, 300)
 
-            this.$emit('change', Number(value))
+        return {
+            modelRef,
+            handleChange: debouncedHandleChange
         }
     },
     template: 'dl-slider-input'

package/src/components/compound/DlSlider/utils.ts

@@ -1,6 +1,6 @@
 export const getInputValue = (value: string, min: number, max: number) => {
-    if (parseInt(value) > max || parseInt(value) < min) {
-        return { value: (parseInt(value) > max ? max : min).toString() }
+    if (parseFloat(value) > max || parseFloat(value) < min) {
+        return { value: (parseFloat(value) > max ? max : min).toString() }
     }
 
     return { value }

package/src/components/essential/DlIcon/DlIcon.vue

@@ -22,7 +22,7 @@
     <div
         v-else
         :id="uuid"
-        style="display: inline"
+        :style="[inlineStyles, computedStyles]"
         @click="$emit('click', $event)"
         @mousedown="$emit('mousedown', $event)"
         @mouseup="$emit('mouseup', $event)"
@@ -156,7 +156,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .dl-icon {
-    display: inline-block;
+    display: inline-flex;
     color: var(--dl-icon-color);
     font-size: var(--dl-icon-font-size);
 }

package/src/components/shared/DlItemSection/DlItemSection.vue

@@ -53,6 +53,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .dl-item__section {
+    display: flex;
     padding-left: 0;
     padding-right: 0;
     font-size: var(--dl-font-size-body);