@dataloop-ai/components 0.18.0 → 0.18.2

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

@@ -13,7 +13,10 @@ export const getLabel = (option: any) => {
 const ICON_SIZES = {
     s: '12px',
     m: '14px',
-    l: '16px'
+    l: '16px',
+    small: '12px',
+    medium: '14px',
+    large: '16px'
 }
 
 export const getLabelOfSelectedOption = (

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

@@ -28,6 +28,7 @@
                     :color="color"
                     :readonly="readonly"
                     :disabled="disabled"
+                    :thumb-size="thumbSize"
                     :snap="snap"
                     :tabindex="tabindex"
                     :name="name"
@@ -56,7 +57,7 @@
                 <div class="right-container capitalize">
                     <dl-button
                         flat
-                        size="m"
+                        size="12px"
                         label="Reset"
                         :disabled="disabled || readonly"
                         data-test="non-editable-slider-button"
@@ -82,6 +83,7 @@
                     :step="step"
                     :color="color"
                     :readonly="readonly"
+                    :thumb-size="thumbSize"
                     :disabled="disabled"
                     :snap="snap"
                     :name="name"
@@ -96,7 +98,8 @@
 import { defineComponent } from 'vue-demi'
 import { DlSliderBase, DlSliderInput } from './components/'
 import { DlButton } from '../../basic'
-import { DlIcon, DlTooltip } from '../../essential'
+import { DlIcon } from '../../essential'
+import { DlTooltip } from '../../shared'
 import { getColor, between } from '../../../utils'
 import { v4 } from 'uuid'
 
@@ -134,6 +137,10 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        thumbSize: {
+            type: String,
+            default: '10px'
+        },
         min: {
             type: Number,
             default: 0
@@ -210,6 +217,7 @@ 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/components/DlSliderBase.vue

@@ -146,7 +146,7 @@ export default defineComponent({
                 color:
                     this.disabled !== true
                         ? getColor(this.color, 'dl-color-secondary')
-                        : 'var(--dl-color-separator)'
+                        : 'var(--dl-color-disabled-slider)'
             }
         },
         thumbStyle(): Record<string, any> {
@@ -350,12 +350,12 @@ export default defineComponent({
         },
         onPan(event: any): void {
             if (event.isFinal === true) {
-                if (this.dragging !== void 0) {
+                if (this.dragging) {
                     this.updatePosition(event.evt)
                     if (event.touch === true) {
                         this.updateValue(true)
                     }
-                    this.dragging = void 0
+                    this.dragging = null
                     this.$emit('pan', 'end')
                 }
                 this.active = false

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'
@@ -82,7 +73,7 @@ export default defineComponent({
 <style scoped>
 input[type='number'] {
     width: 31px;
-    height: 12px;
+    height: 20px;
     padding-top: 3px;
     padding-left: 5px;
     padding-bottom: 3px;

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

@@ -70,7 +70,8 @@
   & .slider-bar-container {
     display: flex;
     align-items: center;
-    width: 100%;
+    width: calc(100% - var(--thumb-size));
+    align-self: center;
   }
 
   & .text {
@@ -102,6 +103,9 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+      & > * {
+        margin: 0px 5px
+      }
     }
   }
 }

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

@@ -215,13 +215,13 @@ export default function ({
 
     function onPan(event: any) {
         if (event.isFinal === true) {
-            if (dragging.value !== void 0) {
+            if (dragging.value) {
                 updatePosition(event.evt)
                 // only if touch, because we also have mousedown/up:
                 if (event.touch === true) {
                     updateValue(true)
                 }
-                dragging.value = void 0
+                dragging.value = null
                 emit('pan', 'end')
             }
             active.value = false

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/compound/DlStepper/DlStepper.vue

@@ -16,7 +16,8 @@
             <dl-stepper-sidebar
                 :steps="steps"
                 :bg-color="bgColor"
-                :sidebar-navigation="sidebarNavigation"
+                :hide="hide"
+                :disabled="disabled"
                 @step-click="$emit('set-step', $event)"
             />
             <div class="dl-stepper-content dl-stepper-content--slot">
@@ -24,18 +25,35 @@
                     v-if="state"
                     :title="contentTitle"
                     :error="state.error"
+                    :hide="hide"
                     :completed="state.completed"
                 >
                     <template #header>
                         <slot
+                            v-if="!isEmpty"
                             name="content-header"
                             :state="state"
                         />
                     </template>
                     <slot
+                        v-if="!isEmpty"
                         :name="state.value"
                         :state="state"
                     />
+                    <dl-empty-state
+                        v-if="isEmpty"
+                        v-bind="emptyStateProps"
+                    >
+                        <template
+                            v-for="(_, slot) in $slots"
+                            #[slot]="props"
+                        >
+                            <slot
+                                :name="slot"
+                                v-bind="props"
+                            />
+                        </template>
+                    </dl-empty-state>
                 </dl-stepper-content>
                 <dl-stepper-footer
                     :finished="isDone"
@@ -44,6 +62,8 @@
                     :prev-button-label="prevButtonLabel"
                     :disabled-next-step="disabledNextStep"
                     :disabled-prev-step="disabledPrevStep"
+                    :prev-step-disabled-tooltip="prevStepDisabledTooltip"
+                    :next-step-disabled-tooltip="nextStepDisabledTooltip"
                     @next="$emit('next')"
                     @prev="$emit('prev')"
                     @done="$emit('done')"
@@ -60,6 +80,8 @@ import DlStepperHeader from './components/DlStepperHeader.vue'
 import DlStepperFooter from './components/DlStepperFooter.vue'
 import DlStepperSidebar from './components/DlStepperSidebar.vue'
 import DlStepperContent from './components/DlStepperContent.vue'
+import DlEmptyState from '../../basic/DlEmptyState/DlEmptyState.vue'
+import { DlEmptyStateProps } from '../../basic/DlEmptyState/types'
 import { StepState } from './models/interfaces'
 import { Step } from './models'
 import { getColor } from '../../../utils'
@@ -71,7 +93,8 @@ export default defineComponent({
         DlStepperFooter,
         DlStepperSidebar,
         DlStepperContent,
-        DlStepperContainer
+        DlStepperContainer,
+        DlEmptyState
     },
     model: {
         prop: 'modelValue',
@@ -92,7 +115,7 @@ export default defineComponent({
         },
         state: {
             type: Object as PropType<StepState>,
-            default: () => {}
+            default: null
         },
         modelValue: {
             type: Boolean,
@@ -132,7 +155,13 @@ export default defineComponent({
         disabledPrevStep: Boolean,
         isDone: Boolean,
         hideCloseButton: Boolean,
-        sidebarNavigation: { type: Boolean, default: true }
+        disabled: { type: Boolean, default: false },
+        isEmpty: Boolean,
+        emptyStateProps: {
+            type: Object as PropType<DlEmptyStateProps>,
+            required: false,
+            default: null
+        }
     },
     emits: ['update:modelValue', 'done', 'next', 'prev', 'set-step', 'close'],
     data() {
@@ -142,12 +171,25 @@ export default defineComponent({
         }
     },
     computed: {
+        hide(): boolean {
+            return this.isEmpty
+        },
         nextButtonLabel(): string {
             return this.nextStep?.title ?? null
         },
         prevButtonLabel(): string {
             return this.prevStep?.title ?? null
         },
+        nextStepDisabledTooltip(): string {
+            return this.disabledNextStep
+                ? this.nextStep?.disabledTooltip ?? ''
+                : ''
+        },
+        prevStepDisabledTooltip(): string {
+            return this.disabledPrevStep
+                ? this.prevStep?.disabledTooltip ?? ''
+                : ''
+        },
         cssVars(): Record<string, string | number> {
             return {
                 '--dl-stepper-width': this.width,

package/src/components/compound/DlStepper/components/DlStepperContent.vue

@@ -1,6 +1,9 @@
 <template>
     <div class="stepper-content">
-        <slot name="header">
+        <slot
+            v-if="!hide"
+            name="header"
+        >
             <div class="stepper-content--header">
                 <dl-typography
                     size="h3"
@@ -53,7 +56,8 @@ export default defineComponent({
             type: String,
             default: ''
         },
-        completed: Boolean
+        completed: Boolean,
+        hide: Boolean
     },
     emits: ['next', 'prev']
 })

package/src/components/compound/DlStepper/components/DlStepperFooter.vue

@@ -4,6 +4,7 @@
             <div class="dl-stepper-footer__left-actions">
                 <dl-button
                     :disabled="disabledPrevStep"
+                    :tooltip="prevStepDisabledTooltip"
                     outlined
                     :colors-object="prevButtonColorsObject"
                     :label="prevLabel"
@@ -11,6 +12,7 @@
                 />
                 <dl-button
                     :disabled="disabledNextStep"
+                    :tooltip="nextStepDisabledTooltip"
                     class="justify-end"
                     outlined
                     :label="nextLabel"
@@ -55,6 +57,16 @@ export default defineComponent({
             required: false,
             default: ''
         },
+        nextStepDisabledTooltip: {
+            type: String,
+            required: false,
+            default: ''
+        },
+        prevStepDisabledTooltip: {
+            type: String,
+            required: false,
+            default: ''
+        },
         disabledNextStep: Boolean,
         disabledPrevStep: Boolean
     },

package/src/components/compound/DlStepper/components/DlStepperSidebar.vue

@@ -1,15 +1,13 @@
 <template>
     <div class="sidebar">
-        <dl-list>
+        <dl-list v-if="!hide">
             <dl-list-item
                 v-for="(step, index) in steps"
                 :key="index"
                 :data-test-index="index"
-                :end-icon="getStepIcon(step)"
-                :end-icon-color="getStepIconColor(step)"
-                end-icon-size="16px"
-                :clickable="sidebarNavigation"
-                :disabled="!getStepSidebarNavigation(step)"
+                :end-icon="endIcon(step)"
+                :clickable="!disabled"
+                :disabled="!isStepDisabled(step)"
                 :class="sidebarItemClasses(step)"
                 @click="handleStepClick(step, index)"
             >
@@ -24,6 +22,9 @@
                                 {{ getStepSubtitle(step) }}
                             </span>
                         </div>
+                        <dl-tooltip v-if="isStepDisabled(step)">
+                            {{ getStepDisabledTooltip(step) }}
+                        </dl-tooltip>
                     </span>
                 </dl-item-section>
             </dl-list-item>
@@ -34,7 +35,7 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue-demi'
 import { DlListItem } from '../../../basic'
-import { DlItemSection } from '../../../shared'
+import { DlItemSection, DlTooltip } from '../../../shared'
 import { DlList } from '../../../essential'
 import { Step } from '../models'
 
@@ -43,7 +44,8 @@ export default defineComponent({
     components: {
         DlList,
         DlListItem,
-        DlItemSection
+        DlItemSection,
+        DlTooltip
     },
     props: {
         steps: {
@@ -55,10 +57,18 @@ export default defineComponent({
             required: false,
             default: 'dl-color-fill-third'
         },
-        sidebarNavigation: { type: Boolean, default: true }
+        disabled: { type: Boolean, default: false },
+        hide: { type: Boolean, default: false }
     },
     emits: ['step-click'],
     methods: {
+        endIcon(step: Step) {
+            return {
+                icon: this.getStepIcon(step),
+                color: this.getStepIconColor(step),
+                size: '16px'
+            }
+        },
         getStepTitle(step: Step): string {
             const optional = step.optional ? ' (Optional)' : ''
             return `${this.capitalize(step.title)}${optional}`
@@ -104,8 +114,11 @@ export default defineComponent({
                 ? 'dl-color-positive'
                 : 'dl-color-transparent'
         },
-        getStepSidebarNavigation(step: Step): boolean {
-            return step.sidebarNavigation ?? true
+        isStepDisabled(step: Step): boolean {
+            return step.disabled ?? false
+        },
+        getStepDisabledTooltip(step: Step): string {
+            return step.disabledTooltip ?? ''
         }
     }
 })

package/src/components/compound/DlStepper/models/Step.ts

@@ -11,7 +11,8 @@ export class Step {
             subtitle: '',
             completed: false,
             optional: false,
-            sidebarNavigation: true,
+            disabled: false,
+            disabledTooltip: '',
             error: '',
             warning: '',
             ...state
@@ -28,10 +29,18 @@ export class Step {
         return this._state.title
     }
 
+    public set title(value: string) {
+        set(this._state, 'title', value)
+    }
+
     public get subtitle(): string {
         return this._state.subtitle
     }
 
+    public set subtitle(value: string) {
+        set(this._state, 'subtitle', value)
+    }
+
     public get optional(): boolean {
         return this._state.optional
     }
@@ -46,7 +55,7 @@ export class Step {
 
     public set completed(value: boolean) {
         set(this._state, 'error', '')
-        set(this._state, 'warning', false)
+        set(this._state, 'warning', '')
         set(this._state, 'completed', value)
     }
 
@@ -56,7 +65,7 @@ export class Step {
 
     public set error(value: string) {
         set(this._state, 'error', value)
-        set(this._state, 'warning', false)
+        set(this._state, 'warning', '')
         set(this._state, 'completed', false)
     }
 
@@ -66,7 +75,7 @@ export class Step {
 
     public set warning(value: string) {
         set(this._state, 'warning', value)
-        set(this._state, 'error', false)
+        set(this._state, 'error', '')
         set(this._state, 'completed', true)
     }
 
@@ -82,12 +91,32 @@ export class Step {
         set(this._state, 'active', value)
     }
 
-    public get sidebarNavigation() {
-        return this._state.sidebarNavigation
+    public get disabled() {
+        return this._state.disabled
+    }
+
+    public set disabled(value: boolean) {
+        set(this._state, 'disabled', value)
+    }
+
+    public get disabledTooltip() {
+        return this._state.disabledTooltip
     }
 
-    public set sidebarNavigation(value: boolean) {
-        set(this._state, 'sidebarNavigation', value)
+    public set disabledTooltip(value: string) {
+        set(this._state, 'disabledTooltip', value)
+    }
+
+    public clearError() {
+        set(this._state, 'error', '')
+    }
+
+    public clearWarning() {
+        set(this._state, 'warning', '')
+    }
+
+    public clearCompleted() {
+        set(this._state, 'completed', false)
     }
 
     public reset() {