@dataloop-ai/components 0.19.197 → 0.19.198

package/package.json

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

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

@@ -1,14 +1,6 @@
 <template>
-    <div
-        :id="uuid"
-        class="slider-content"
-        :style="sliderStyles"
-    >
-        <div
-            v-if="slim"
-            class="slider slim"
-            data-test="slim-slider"
-        >
+    <div :id="uuid" class="slider-content" :style="sliderStyles">
+        <div v-if="slim" class="slider slim" data-test="slim-slider">
             <span class="text capitalize">{{ text }}</span>
             <dl-slider-input
                 v-model="value"
@@ -18,6 +10,8 @@
                 :disabled="disabled"
                 :style="{ marginRight: '10px' }"
                 data-test="slim-slider-input"
+                @focus="handleFocus"
+                @blur="handleBlur"
             />
             <div class="slider-bar-container">
                 <dl-slider-base
@@ -35,11 +29,7 @@
                 />
             </div>
         </div>
-        <div
-            v-else
-            class="slider non-slim"
-            data-test="non-slim-slider"
-        >
+        <div v-else class="slider non-slim" data-test="non-slim-slider">
             <div class="header">
                 <div class="row text capitalize">
                     {{ text }}
@@ -72,6 +62,8 @@
                         :disabled="disabled"
                         data-test="non-slim-slider-input"
                         @change="onChange"
+                        @focus="handleFocus"
+                        @blur="handleBlur"
                     />
                 </div>
             </div>
@@ -184,7 +176,7 @@ export default defineComponent({
             required: false
         }
     },
-    emits: ['update:model-value', 'change'],
+    emits: ['update:model-value', 'change', 'input-focus', 'input-blur'],
     setup(props, { emit }) {
         const { modelValue, min, max, textColor, width, thumbSize, color } =
             toRefs(props)
@@ -256,6 +248,14 @@ export default defineComponent({
             onChange,
             handleResetButtonClick
         }
+    },
+    methods: {
+        handleFocus(e: Event) {
+            this.$emit('input-focus', e)
+        },
+        handleBlur(e: Event) {
+            this.$emit('input-blur', e)
+        }
     }
 })
 </script>

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

@@ -9,7 +9,9 @@
         :disabled="disabled"
         @input="handleChange"
         @change="handleChange"
-    >
+        @focus="handleFocus"
+        @blur="handleBlur"
+    />
 </template>
 
 <script lang="ts">
@@ -46,7 +48,7 @@ export default defineComponent({
             default: false
         }
     },
-    emits: ['update:model-value', 'change'],
+    emits: ['update:model-value', 'change', 'focus', 'blur'],
     setup(props, { emit }) {
         const modelRef = toRef(props, 'modelValue')
         const sliderInput = ref<HTMLInputElement>(null)
@@ -75,6 +77,14 @@ export default defineComponent({
             handleChange: debouncedHandleChange
         }
     },
+    methods: {
+        handleFocus(e: Event) {
+            this.$emit('focus', e)
+        },
+        handleBlur(e: Event) {
+            this.$emit('blur', e)
+        }
+    },
     template: 'dl-slider-input'
 })
 </script>

package/src/demos/DlSliderDemo.vue

@@ -11,11 +11,11 @@
             :readonly="readonly"
             :disabled="disabled"
             @change="handleChange"
+            @input-focus="handleFocus"
+            @input-blur="handleBlur"
         />
         <div>
-            <button @click="slim = !slim">
-                slim: {{ slim }}
-            </button>
+            <button @click="slim = !slim">slim: {{ slim }}</button>
             <button @click="readonly = !readonly">
                 Readonly: {{ readonly }}
             </button>
@@ -24,7 +24,7 @@
             </button>
         </div>
         <div>
-            Events: <br>
+            Events: <br />
             {{ events }}
         </div>
     </div>
@@ -58,6 +58,12 @@ export default defineComponent({
         handleChange(value: number) {
             console.log(`@@@ handling change ${value}`)
             this.events[1] = `@@@ handling change ${value}`
+        },
+        handleFocus(event: Event) {
+            this.events[1] = `@@@ Input Focus `
+        },
+        handleBlur(event: Event) {
+            this.events[1] = `@@@ Input Blur `
         }
     },
     template: 'dl-slider-demo'