@dataloop-ai/components 0.18.145 → 0.19.0

package/src/demos/DlVirtualScrollDemo.vue

@@ -265,16 +265,13 @@ export default defineComponent({
             ]
         }
 
-        const log = console.log
-
         return {
             heavyList,
             basicList,
             horizontalList,
             customList,
             columns,
-            cardData,
-            log
+            cardData
         }
     }
 })

package/src/demos/index.ts

@@ -66,6 +66,7 @@ import DlJsonEditorDemo from './DlJsonEditorDemo.vue'
 import DlThumbnailGallery from './DlThumbnailGalleryDemo.vue'
 import DlLayoutDemo from './DlLayoutDemo.vue'
 import { DlCodeEditorDemo } from './DlCodeEditor'
+import DlLabelPickerDemo from './DlLabelPickerDemo.vue'
 
 export default {
     AvatarDemo,
@@ -132,5 +133,6 @@ export default {
     DlJsonEditorDemo,
     DlThumbnailGallery,
     DlCodeEditorDemo,
-    DlLayoutDemo
+    DlLayoutDemo,
+    DlLabelPickerDemo
 }

package/src/hooks/use-model-toggle.ts

@@ -1,30 +1,7 @@
-import {
-    watch,
-    nextTick,
-    onMounted,
-    getCurrentInstance,
-    Ref,
-    PropType,
-    isVue2
-} from 'vue-demi'
-
-const modelValueNaming = isVue2 ? 'model-value' : 'modelValue'
-
-const staticUseModelToggleProps: any = {
-    modelValue: {
-        type: Boolean as PropType<boolean>,
-        default: false
-    }
-}
+import { watch, nextTick, onMounted, getCurrentInstance, Ref } from 'vue-demi'
 
-staticUseModelToggleProps[`onUpdate:${modelValueNaming}`] = [Function, Array]
-
-export const useModelToggleProps = staticUseModelToggleProps as {
-    modelValue: {
-        type: PropType<boolean>
-        default: boolean
-    }
-    'onUpdate:model-value': (FunctionConstructor | ArrayConstructor)[]
+export const useModelToggleProps = {
+    modelValue: Boolean
 }
 
 export const useModelToggleEmits = [
@@ -32,15 +9,13 @@ export const useModelToggleEmits = [
     'show',
     'before-hide',
     'hide',
-    'update:mode-value'
+    'update:model-value'
 ]
 
 export interface AnchorEvent extends KeyboardEvent {
     dlAnchorHandled?: boolean
 }
 
-// handleShow/handleHide -> removeTick(), self (& emit show)
-
 export default function useModelToggle({
     showing,
     canShow, // optional
@@ -76,22 +51,16 @@ export default function useModelToggle({
             return
         }
 
-        const listener =
-            props[`onUpdate:${modelValueNaming}`] ||
-            (vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`]
-
-        if (listener) {
-            emit(`update:${modelValueNaming}`, true)
-            payload = evt
+        emit(`update:model-value`, true)
+        payload = evt
 
-            nextTick(() => {
-                if (payload === evt) {
-                    payload = null
-                }
-            })
-        }
+        nextTick(() => {
+            if (payload === evt) {
+                payload = null
+            }
+        })
 
-        if (!props.modelValue || !listener) {
+        if (!props.modelValue) {
             processShow(evt)
         }
     }
@@ -117,21 +86,15 @@ export default function useModelToggle({
             return
         }
 
-        const listener =
-            props[`onUpdate:${modelValueNaming}`] ||
-            (vm!.proxy! as any)?.$listeners?.[`update:${modelValueNaming}`]
-
-        if (listener) {
-            emit(`update:${modelValueNaming}`, false)
-            payload = evt
-            nextTick(() => {
-                if (payload === evt) {
-                    payload = null
-                }
-            })
-        }
+        emit(`update:model-value`, false)
+        payload = evt
+        nextTick(() => {
+            if (payload === evt) {
+                payload = null
+            }
+        })
 
-        if (!props.modelValue || !listener) {
+        if (!props.modelValue) {
             processHide(evt)
         }
     }
@@ -154,16 +117,17 @@ export default function useModelToggle({
 
     function processModelChange(val: boolean) {
         if (props.disabled === true && val === true) {
-            if (props[`onUpdate:${modelValueNaming}`]) {
-                emit(`update:${modelValueNaming}`, false)
-            }
-        } else if ((val === true) !== showing.value) {
+            emit(`update:model-value`, false)
+        } else if (val !== showing.value) {
             const fn = val === true ? processShow : processHide
             fn(payload as AnchorEvent)
         }
     }
 
-    watch(() => props.modelValue as boolean, processModelChange, { deep: true })
+    watch(
+        () => props.modelValue as boolean,
+        (val) => processModelChange(val)
+    )
 
     if (processOnMount) {
         onMounted(() => {

package/src/utils/browse-nested-nodes.ts

@@ -0,0 +1,26 @@
+export function browseNestedNodes(
+    element: HTMLElement | null,
+    ifCondition: (el: HTMLElement) => boolean,
+    thenOperation: (el: HTMLElement) => void,
+    elseCondition?: (el: HTMLElement) => boolean,
+    elseOperation?: (el: HTMLElement) => void
+) {
+    if (element && element.nodeType === Node.ELEMENT_NODE) {
+        for (let i = element.children.length - 1; i >= 0; i--) {
+            const child = element.children[i] as HTMLElement
+            browseNestedNodes(
+                child,
+                ifCondition,
+                thenOperation,
+                elseCondition,
+                elseOperation
+            )
+        }
+
+        if (ifCondition(element as HTMLElement)) {
+            thenOperation(element)
+        } else if (elseCondition?.(element as HTMLElement)) {
+            elseOperation?.(element)
+        }
+    }
+}