@dataloop-ai/components 0.20.15 → 0.20.16

package/package.json

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

package/src/assets/globals.scss

@@ -3,6 +3,7 @@
 body {
     & > * {
         font-weight: 400;
+        font-style: normal;
         font-family: 'Roboto', sans-serif;
     }
 }

package/src/assets/theme.css

@@ -1,9 +1,22 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
 @import 'constants.css';
 
+.roboto-regular {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
+
+.roboto-medium {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 500;
+    font-style: normal;
+}
+
 body {
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
+    font-style: normal;
     background-color: var(--dl-color-bg);
 }
 
@@ -53,7 +66,7 @@ body {
     --dl-color-fill-third: #fbfbfb;
     --dl-color-link: #20abfa;
     --dl-color-cell-background: #fffae2;
-    --dl-color-disabled-slider: #B3B3B3;
+    --dl-color-disabled-slider: #b3b3b3;
     --q-color-positive: #38d079;
     --q-color-warning: #e1b75b;
 
@@ -136,4 +149,4 @@ body {
     --dl-json-editor-value-color-boolean: #56b6c2;
     --dl-json-editor-value-color-number: #d19a66;
     --dl-json-editor-value-color-string: #98c379;
-}
+}

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

@@ -57,11 +57,18 @@ export default defineComponent({
             const val = evt.target.value
             if (val === '') return
 
-            const { value } = getInputValue(val, props.min, props.max)
+            const { value, isUpdated } = getInputValue(
+                val,
+                props.min,
+                props.max
+            )
 
-            emit('change', Number(value))
-            emit('update:model-value', Number(value))
-            if (sliderInput.value) sliderInput.value.value = value
+            emit('change', value)
+            emit('update:model-value', value)
+
+            if (isUpdated) {
+                if (sliderInput.value) sliderInput.value.value = value
+            }
         }
 
         const debouncedHandleChange = computed(() => {

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

@@ -1,7 +1,7 @@
 export const getInputValue = (value: string, min: number, max: number) => {
-    if (parseFloat(value) > max || parseFloat(value) < min) {
-        return { value: (parseFloat(value) > max ? max : min).toString() }
-    }
+    const numericValue = parseFloat(value)
+    const clampedValue = Math.max(min, Math.min(numericValue, max))
+    const isUpdated = numericValue !== clampedValue
 
-    return { value }
+    return { value: clampedValue.toString(), isUpdated }
 }