@dataloop-ai/components 0.18.67 → 0.18.69

package/package.json

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

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue

@@ -210,7 +210,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, getCurrentInstance, PropType, ref } from 'vue-demi'
+import {
+    computed,
+    defineComponent,
+    getCurrentInstance,
+    PropType,
+    ref
+} from 'vue-demi'
 import DlBrush from '../../components/DlBrush.vue'
 import { DlTooltip } from '../../../../shared'
 import {
@@ -231,6 +237,7 @@ import {
     flattenConfusionMatrix
 } from './utils'
 import { debounce, isObject } from 'lodash'
+import { stateManager } from '../../../../../StateManager'
 export default defineComponent({
     components: {
         DlBrush,
@@ -321,10 +328,12 @@ export default defineComponent({
             return [0, offsetHeight]
         }
 
-        const debouncedCalculateXAxisElOffset = debounce(
-            calculateXAxisElOffset,
-            100
-        )
+        const debouncedCalculateXAxisElOffset = computed(() => {
+            if (stateManager.disableDebounce) {
+                return calculateXAxisElOffset
+            }
+            return debounce(calculateXAxisElOffset, 100)
+        })
 
         return {
             resizeObserver,

package/src/components/compound/DlCodeEditor/components/CodeEditor.vue

@@ -129,6 +129,7 @@ import { DlToast } from '../../DlToast'
 import '../styles/themes.css'
 import '../styles/themes-base16.css'
 import { debounce } from 'lodash'
+import { stateManager } from '../../../../StateManager'
 
 export default defineComponent({
     name: 'CodeEditor',
@@ -389,7 +390,12 @@ export default defineComponent({
             lineNum.value = localLineNum
         }
 
-        const debouncedGetLinesCount = debounce(getLinesCount, 100)
+        const debouncedGetLinesCount = computed(() => {
+            if (stateManager.disableDebounce) {
+                return getLinesCount
+            }
+            return debounce(getLinesCount, 100)
+        })
 
         onMounted(() => {
             emit('lang', props.languages[0][0])
@@ -404,7 +410,7 @@ export default defineComponent({
                 if (scrolling.value) {
                     scrolling.value = false
                 } else {
-                    debouncedGetLinesCount()
+                    debouncedGetLinesCount.value()
                 }
             }
             hljs.highlightElement(code.value)
@@ -437,7 +443,7 @@ export default defineComponent({
                     if (scrolling.value) {
                         scrolling.value = false
                     } else {
-                        debouncedGetLinesCount()
+                        debouncedGetLinesCount.value()
                     }
                 }
             })
@@ -448,7 +454,7 @@ export default defineComponent({
                 if (scrolling.value) {
                     scrolling.value = false
                 } else {
-                    debouncedGetLinesCount()
+                    debouncedGetLinesCount.value()
                 }
             }
         })

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

@@ -128,7 +128,7 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, PropType, nextTick } from 'vue-demi'
+import { defineComponent, ref, PropType, nextTick, computed } from 'vue-demi'
 import { DlButton } from '../../../../basic'
 import { DlDatePicker } from '../../../DlDateTime'
 import { DlMenu, DlIcon } from '../../../../essential'
@@ -147,6 +147,7 @@ import {
     isEligibleToChange
 } from '../utils'
 import { v4 } from 'uuid'
+import { stateManager } from '../../../../../StateManager'
 
 export default defineComponent({
     components: {
@@ -310,10 +311,12 @@ export default defineComponent({
             emit('update:model-value', stringValue)
         }
 
-        const debouncedSetModal = debounce(
-            () => (suggestionModal.value = true),
-            200
-        )
+        const debouncedSetModal = computed(() => {
+            if (stateManager.disableDebounce) {
+                return () => (suggestionModal.value = true)
+            }
+            return debounce(() => (suggestionModal.value = true), 100)
+        })
 
         return {
             uuid: v4(),

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

@@ -104,6 +104,7 @@ import { DlIcon, DlCheckbox } from '../../../essential'
 import { DlItemSection } from '../../../shared'
 import { v4 } from 'uuid'
 import { debounce } from 'lodash'
+import { stateManager } from '../../../../StateManager'
 
 const ValueTypes = [Array, Boolean, String, Number, Object, Function]
 
@@ -168,6 +169,9 @@ export default defineComponent({
             return this.totalItems ? 'indeterminate' : undefined
         },
         handleChildren(): any {
+            if (stateManager.disableDebounce) {
+                return this.toggleChildren.bind(this)
+            }
             return debounce(this.toggleChildren.bind(this), 50)
         },
         hasChildren(): boolean {

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

@@ -232,12 +232,12 @@ export default defineComponent({
     },
     methods: {
         handleChange(value: number) {
+            if (this.sliderValue === value) return
+
             this.$emit('change', value)
+            this.sliderValue = value
         },
         handleResetButtonClick() {
-            if (this.value === this.initialValue) return
-
-            this.sliderValue = this.initialValue
             this.handleChange(this.initialValue)
         }
     }

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

@@ -14,7 +14,8 @@
 
 <script lang="ts">
 import { debounce } from 'lodash'
-import { defineComponent, toRef } from 'vue-demi'
+import { computed, defineComponent, ref, toRef } from 'vue-demi'
+import { stateManager } from '../../../../StateManager'
 import { getInputValue } from '../utils'
 
 export default defineComponent({
@@ -48,6 +49,7 @@ export default defineComponent({
     emits: ['update:model-value', 'change'],
     setup(props, { emit }) {
         const modelRef = toRef(props, 'modelValue')
+        const sliderInput = ref<HTMLInputElement>(null)
 
         const handleChange = (evt: any) => {
             const val = evt.target.value
@@ -57,11 +59,18 @@ export default defineComponent({
 
             emit('change', Number(value))
             emit('update:model-value', Number(value))
+            if (sliderInput.value) sliderInput.value.value = value
         }
 
-        const debouncedHandleChange = debounce(handleChange, 300)
+        const debouncedHandleChange = computed(() => {
+            if (stateManager.disableDebounce) {
+                return handleChange
+            }
+            return debounce(handleChange, 100)
+        })
 
         return {
+            sliderInput,
             modelRef,
             handleChange: debouncedHandleChange
         }

package/src/components/essential/DlSwitch/DlSwitch.vue

@@ -178,6 +178,7 @@ export default defineComponent({
     },
     watch: {
         isTrue() {
+            // todo: what the hell ?
             debounce(() => {
                 nextTick(() => {
                     (this.$refs.input as HTMLInputElement).checked =

package/src/demos/DlSliderDemo.vue

@@ -45,12 +45,12 @@ export default defineComponent({
     },
     watch: {
         value(newValue, oldValue) {
-            console.log(`@@@ value changed from ${oldValue} to ${newValue}`)
+            console.log(`@@@ model value update ${oldValue} to ${newValue}`)
         }
     },
     methods: {
         handleChange(value: number) {
-            console.log(`@@@ value changed to ${value}`)
+            console.log(`@@@ handling change ${value}`)
         }
     },
     template: 'dl-slider-demo'