@dataloop-ai/components 0.20.16 → 0.20.18

package/package.json

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

package/src/components/basic/DlAlert/DlAlert.vue

@@ -125,6 +125,7 @@ export default defineComponent({
     emits: ['update:model-value'],
     setup(props, { emit }) {
         const { padding, modelValue, type } = toRefs(props)
+        const show = ref(modelValue.value)
         const icon = computed(() => typeToIconMap[type.value as DlAlertType])
         const iconColor = computed(
             () => typeToIconColorMap[type.value as DlAlertType]
@@ -143,7 +144,7 @@ export default defineComponent({
         })
 
         watch(modelValue, (val) => {
-            modelValue.value = val
+            show.value = val
         })
 
         watch(type, (val) => {
@@ -198,14 +199,14 @@ export default defineComponent({
         }
 
         function handleClose() {
-            modelValue.value = false
+            show.value = false
             emit('update:model-value', false)
         }
 
         return {
             uuid: `dl-alert-${v4()}`,
             rootRef,
-            show: modelValue,
+            show,
             icon,
             iconColor,
             rootStyle,

package/src/components/compound/DlSelect/DlSelect.vue

@@ -177,7 +177,7 @@
                     :style="
                         optionsCount > MAX_ITEMS_PER_LIST
                             ? ''
-                            : `width: 100%; max-height: calc(${calculatedDropdownMaxHeight} - 20px); overflow-y: scroll;`
+                            : `width: 100%; max-height: calc(${calculatedDropdownMaxHeight} - 20px); overflow-y: auto;`
                     "
                 >
                     <dl-select-option
@@ -1245,9 +1245,7 @@ export default defineComponent({
         justify-content: center !important;
         align-items: center;
         color: var(--dl-color-medium);
-        transition-property:
-            transform,
-            -webkit-transform;
+        transition-property: transform, -webkit-transform;
         transition-duration: 0.28s, 0.28s;
         transition-timing-function: ease, ease;
         transition-delay: 0s, 0s;

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

@@ -13,26 +13,15 @@
             data-test="track-container"
             v-on="trackContainerEvents"
         >
-            <div
-                class="track"
-                :style="trackStyle"
-                data-test="track"
-            >
-                <div
-                    class="selection"
-                    :style="selectionBarStyle"
-                />
-                <div
-                    class="thumb"
-                    :style="thumbStyle"
-                    data-test="thumb"
-                >
+            <div class="track" :style="trackStyle" data-test="track">
+                <div class="selection" :style="selectionBarStyle" />
+                <div class="thumb" :style="thumbStyle" data-test="thumb">
                     <input
                         v-if="name !== null && disabled !== true"
                         type="hidden"
                         :name="name"
                         :value="model"
-                    >
+                    />
                 </div>
             </div>
         </div>
@@ -48,7 +37,8 @@ import {
     stopAndPrevent,
     position,
     keyCodes,
-    between
+    between,
+    isMobileOrTablet
 } from '../../../../utils'
 import touchPanDirective from '../../../../directives/TouchPan'
 
@@ -131,7 +121,7 @@ export default defineComponent({
     },
     computed: {
         isMobile(): boolean {
-            return 'ontouchstart' in window
+            return isMobileOrTablet()
         },
         modelRatio(): number {
             return this.convertModelToRatio(this.model)
@@ -324,6 +314,7 @@ export default defineComponent({
             return between(val, this.minRation, this.maxRatio)
         },
         onActivate(evt: MouseEvent) {
+            console.log('hiihihihihihih')
             this.updatePosition(evt, this.getDragging(evt))
             this.updateValue()
 

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

@@ -67,7 +67,9 @@ export default defineComponent({
             emit('update:model-value', value)
 
             if (isUpdated) {
-                if (sliderInput.value) sliderInput.value.value = value
+                if (sliderInput.value) {
+                    sliderInput.value.value = String(value)
+                }
             }
         }
 

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

@@ -3,5 +3,5 @@ export const getInputValue = (value: string, min: number, max: number) => {
     const clampedValue = Math.max(min, Math.min(numericValue, max))
     const isUpdated = numericValue !== clampedValue
 
-    return { value: clampedValue.toString(), isUpdated }
+    return { value: clampedValue, isUpdated }
 }

package/src/utils/selection.ts

@@ -1,3 +1,5 @@
+import { isMobileOrTablet } from '.'
+
 export function clearSelection() {
     if (window.getSelection) {
         const selection = window.getSelection()
@@ -7,7 +9,7 @@ export function clearSelection() {
             selection.empty()
         } else if (selection.removeAllRanges) {
             selection.removeAllRanges()
-            if ('ontouchstart' in window) {
+            if (isMobileOrTablet()) {
                 selection.addRange(document.createRange())
             }
         }