@dataloop-ai/components 0.19.160 → 0.19.161

package/package.json

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

package/src/components/compound/DlDropdownButton/DlDropdownButton.vue

@@ -26,7 +26,7 @@
             :aria-haspopup="true"
             :aria-disabled="
                 disabled === true ||
-                    (split === false && disableMainButton === true) ||
+                    (!split && disableMainButton === true) ||
                     disableDropdown === true
             "
             :overflow="overflow"
@@ -46,7 +46,7 @@
             :aria-haspopup="true"
             :aria-disabled="
                 disabled === true ||
-                    (split === false && disableMainButton === true) ||
+                    (!split && disableMainButton === true) ||
                     disableDropdown === true
             "
             :no-wrap="noWrap"
@@ -155,8 +155,8 @@
             @show="onShow"
             @before-hide="onBeforeHide"
             @hide="onHide"
-            @highlightedIndex="setHighlightedIndex"
-            @handleSelectedItem="handleSelectedItem"
+            @highlighted-item="setHighlightedIndex"
+            @selected-item="handleSelectedItem"
         >
             <slot />
         </dl-menu>
@@ -182,6 +182,7 @@ import {
 import { v4 } from 'uuid'
 import { DlTextTransformOptions } from '../../shared/types'
 import { getColor } from '../../../utils'
+import { arrowNavigationEvents } from '../../../hooks/use-arrow-navigation'
 
 export default defineComponent({
     name: 'DlDropdownButton',
@@ -197,9 +198,9 @@ export default defineComponent({
     },
     props: {
         modelValue: Boolean,
-        split: Boolean,
+        split: { type: Boolean, default: false },
         dropdownIcon: { type: String, default: 'icon-dl-down-chevron' },
-        contentClass: { type: [Array, String, Object], default: '' },
+        contentClass: { type: String, default: '' },
         contentStyle: { type: [Array, String, Object], default: '' },
         mainButtonStyle: { type: [Array, String, Object], default: '' },
         cover: Boolean,
@@ -244,7 +245,7 @@ export default defineComponent({
         overflow: { type: Boolean, default: false, required: false },
         tooltip: { type: String, default: null, required: false },
         arrowNavItems: {
-            type: [String, Array, Object],
+            type: Array as PropType<any[]>,
             default: () => [] as any[]
         }
     },
@@ -256,8 +257,7 @@ export default defineComponent({
         'show',
         'before-hide',
         'hide',
-        'highlightedIndex',
-        'handleSelectedItem'
+        ...arrowNavigationEvents
     ],
 
     setup(props, { emit }) {
@@ -322,7 +322,7 @@ export default defineComponent({
             () => props.modelValue,
             (val) => {
                 if (menuRef.value) {
-                    (menuRef!.value as Record<string, Function>)[
+                    ;(menuRef!.value as Record<string, Function>)[
                         val ? 'show' : 'hide'
                     ]()
                 }
@@ -363,26 +363,26 @@ export default defineComponent({
 
         function toggle(evt: Event) {
             if (menuRef.value) {
-                (menuRef.value as Record<string, Function>).toggle(evt)
+                ;(menuRef.value as Record<string, Function>).toggle(evt)
             }
         }
 
         function show(evt?: Event) {
             if (menuRef.value) {
-                (menuRef.value as Record<string, Function>).show(evt)
+                ;(menuRef.value as Record<string, Function>).show(evt)
             }
         }
 
         function hide(evt?: any) {
             if (menuRef.value) {
-                (menuRef.value as Record<string, Function>).hide(evt)
+                ;(menuRef.value as Record<string, Function>).hide(evt)
             }
         }
         const setHighlightedIndex = (value: any) => {
             emit('highlightedIndex', value)
         }
         const handleSelectedItem = (value: any) => {
-            emit('handleSelectedItem', value)
+            emit('selected-item', value)
         }
 
         onMounted(() => {

package/src/components/compound/DlInput/DlInput.vue

@@ -145,8 +145,8 @@
                             :fit-content="fitContent"
                             :arrow-nav-items="stringSuggestions"
                             @click="onMenuShow"
-                            @highlightedIndex="setHighlightedIndex"
-                            @handleSelectedItem="handleSelectedItem"
+                            @highlighted-item="setHighlightedIndex"
+                            @selected-item="handleSelectedItem"
                         >
                             <dl-list
                                 bordered

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

@@ -65,6 +65,7 @@
             :expanded="expanded"
             @set-input-value="setInputFromSuggestion"
             @escapekey="onEscapeKey"
+            @enterkey="onEnterKey({ fromSuggestion: true })"
         />
         <dl-menu
             v-if="showDatePicker && focused"
@@ -145,6 +146,7 @@ import {
     removeLeadingExpression
 } from '../../../../../hooks/use-suggestions'
 import { parseSmartQuery, stringifySmartQuery } from '../../../../../utils'
+import { stateManager } from '../../../../../StateManager'
 
 export default defineComponent({
     components: {
@@ -216,6 +218,10 @@ export default defineComponent({
         strict: {
             type: Boolean,
             default: false
+        },
+        inputDebounce: {
+            type: Number,
+            default: 300
         }
     },
     emits: [
@@ -246,7 +252,8 @@ export default defineComponent({
             omitSuggestions,
             height,
             width,
-            forbiddenKeys
+            forbiddenKeys,
+            inputDebounce
         } = toRefs(props)
         //#endregion
 
@@ -415,7 +422,13 @@ export default defineComponent({
             setSelectionOffset(input.value, caretPosition, caretPosition)
         }
 
-        const debouncedSetInputValue = debounce(setInputValue, 300)
+        const debouncedSetInputValue = computed<any>(() => {
+            if (stateManager?.disableDebounce) {
+                return setInputValue
+            }
+
+            return debounce(setInputValue, inputDebounce.value)
+        })
 
         let lastSearchQuery: string
 
@@ -448,7 +461,13 @@ export default defineComponent({
             setInputValue(inputValue, { noEmit: true })
         }
 
-        const debouncedSetInputFromModel = debounce(setInputFromModel, 300)
+        const debouncedSetInputFromModel = computed<any>(() => {
+            if (stateManager?.disableDebounce) {
+                return setInputFromModel
+            }
+
+            return debounce(setInputFromModel, inputDebounce.value)
+        })
 
         const setMenuOffset = (value: number[]) => {
             menuOffset.value = value
@@ -571,7 +590,7 @@ export default defineComponent({
             if (text.endsWith('.')) {
                 setInputValue(text)
             } else {
-                debouncedSetInputValue(text)
+                debouncedSetInputValue.value(text)
             }
         }
 
@@ -608,7 +627,9 @@ export default defineComponent({
                     aliased !== searchQuery.value.trim() ||
                     !input.value?.innerHTML.length
                 ) {
-                    debouncedSetInputFromModel(aliased)
+                    nextTick(() => {
+                        debouncedSetInputFromModel.value(aliased)
+                    })
                 }
             }
         }
@@ -654,8 +675,13 @@ export default defineComponent({
             }
         }
 
-        const onEnterKey = () => {
-            if (showSuggestions.value || showDatePicker.value) {
+        const onEnterKey = (options: { fromSuggestion?: boolean } = {}) => {
+            const { fromSuggestion } = options
+
+            if (
+                (!fromSuggestion && showSuggestions.value) ||
+                showDatePicker.value
+            ) {
                 return
             }
 
@@ -952,7 +978,8 @@ export default defineComponent({
             computedStatus,
             setInputFromSuggestion,
             inputPlaceholder,
-            onEscapeKey
+            onEscapeKey,
+            onEnterKey
         }
     }
 })

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

@@ -1,8 +1,5 @@
 <template>
-    <div
-        v-if="suggestions.length > 0"
-        class="dl-suggestions-dropdown"
-    >
+    <div v-if="suggestions.length > 0" class="dl-suggestions-dropdown">
         <dl-menu
             :target="defaultTarget"
             :offset="offset"
@@ -16,8 +13,8 @@
             @update:model-value="emitModelValue($event)"
             @show="onShow"
             @hide="onHide"
-            @highlightedIndex="setHighlightedIndex"
-            @handleSelectedItem="handleSelectedItem"
+            @highlighted-item="setHighlightedIndex"
+            @selected-item="handleSelectedItem"
             @escapekey="onEscapeKey"
         >
             <dl-list>
@@ -82,7 +79,7 @@ export default defineComponent({
             default: 1
         }
     },
-    emits: ['set-input-value', 'update:model-value', 'escapekey'],
+    emits: ['set-input-value', 'update:model-value', 'escapekey', 'enterkey'],
     setup(props, { emit }) {
         const isMenuOpen = ref(false)
         const highlightedIndex = ref(-1)
@@ -97,6 +94,11 @@ export default defineComponent({
             highlightedIndex.value = value
         }
         const handleSelectedItem = (value: any) => {
+            if (!value) {
+                // enter occurred on non selected values
+                emit('enterkey')
+                return
+            }
             handleOption(value)
         }
         const emitModelValue = (event: any) => {

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

@@ -16,15 +16,9 @@
                 'dl-select__title-container--s': isSmall
             }"
         >
-            <label
-                v-show="!!title.length"
-                class="dl-select__title"
-            >
+            <label v-show="!!title.length" class="dl-select__title">
                 {{ title
-                }}<span
-                    v-show="required"
-                    :class="asteriskClasses"
-                > *</span>
+                }}<span v-show="required" :class="asteriskClasses"> *</span>
                 {{ !required && optional ? ' (Optional)' : null }}
             </label>
             <span v-show="!!tooltip.length">
@@ -49,15 +43,8 @@
                 :value="topMessage"
             />
         </div>
-        <div
-            class="select-wrapper"
-            tabindex="0"
-            :style="placeholderStyles"
-        >
-            <div
-                ref="select"
-                :class="selectClasses"
-            >
+        <div class="select-wrapper" tabindex="0" :style="placeholderStyles">
+            <div ref="select" :class="selectClasses">
                 <div
                     v-show="hasPrepend || searchable"
                     :class="[
@@ -84,14 +71,11 @@
                     @input="handleSearchInput"
                     @focus="handleSearchFocus"
                     @blur="handleSearchBlur"
-                >
+                />
                 <dl-tooltip v-if="disabled && disabledTooltip">
                     {{ disabledTooltip }}
                 </dl-tooltip>
-                <div
-                    v-if="hasSelectedSlot"
-                    style="width: 100%"
-                >
+                <div v-if="hasSelectedSlot" style="width: 100%">
                     <slot
                         v-if="searchable ? !isExpanded : true"
                         :opt="selectedOption"
@@ -168,18 +152,13 @@
                 :trigger-percentage="triggerPercentage"
                 @show="onMenuOpen"
                 @hide="closeMenu"
-                @highlightedIndex="setHighlightedIndex"
-                @handleSelectedItem="handleSelectedItem"
+                @highlighted-item="setHighlightedIndex"
+                @selected-item="handleSelectedItem"
             >
-                <dl-list
-                    class="select-list"
-                    :padding="false"
-                >
+                <dl-list class="select-list" :padding="false">
                     <dl-list-item v-if="noOptions">
                         <dl-item-section color="dl-color-medium">
-                            <slot name="no-options">
-                                No options
-                            </slot>
+                            <slot name="no-options"> No options </slot>
                         </dl-item-section>
                     </dl-list-item>
                     <dl-list-item v-if="hasBeforeOptions && !noOptions">
@@ -246,10 +225,7 @@
                             @selected="handleSelected"
                             @deselected="handleDeselected"
                         >
-                            <slot
-                                name="option"
-                                :opt="item"
-                            >
+                            <slot name="option" :opt="item">
                                 <span
                                     v-if="fitContent"
                                     class="inner-option"
@@ -292,17 +268,14 @@
                             :children="getOptionChildren(option)"
                             :capitalized="capitalizedOptions"
                             :readonly="isReadonlyOption(option)"
-                            :is-expanded="option.expanded"
+                            :is-expanded="isExpandedOption(option)"
                             @update:model-value="handleModelValueUpdate"
                             @click="selectOption(option)"
                             @selected="handleSelected"
                             @deselected="handleDeselected"
                             @depth-change="handleDepthChange"
                         >
-                            <slot
-                                :opt="option"
-                                name="option"
-                            >
+                            <slot :opt="option" name="option">
                                 <span
                                     v-if="fitContent"
                                     class="inner-option"
@@ -808,6 +781,15 @@ export default defineComponent({
         this.setSelectedIndex()
     },
     methods: {
+        isExpandedOption(option: DlSelectOptionType): boolean {
+            if (typeof option === 'string') {
+                return false
+            }
+            if (typeof option === 'number') {
+                return false
+            }
+            return !!option?.expanded
+        },
         handleDepthChange() {
             // todo: remove this hack
             setTimeout(() => {

package/src/components/essential/DlMenu/DlMenu.vue

@@ -1,12 +1,6 @@
 <template>
-    <dl-teleport
-        v-if="portalIsActive"
-        :to="portalEl"
-    >
-        <transition
-            name="fade"
-            appear
-        >
+    <dl-teleport v-if="portalIsActive" :to="portalEl">
+        <transition name="fade" appear>
             <div
                 v-if="showing"
                 :id="uuid"
@@ -83,7 +77,10 @@ import {
 } from './utils'
 import { isMobileOrTablet } from '../../../utils'
 import { v4 } from 'uuid'
-import { useArrowNavigation } from '../../../hooks/use-arrow-navigation'
+import {
+    arrowNavigationEvents,
+    useArrowNavigation
+} from '../../../hooks/use-arrow-navigation'
 
 export default defineComponent({
     name: 'DlMenu',
@@ -154,7 +151,7 @@ export default defineComponent({
             default: ''
         },
         arrowNavItems: {
-            type: [String, Array, Object],
+            type: Array as PropType<any[]>,
             default: () => [] as any[]
         },
         zIndex: {
@@ -176,10 +173,9 @@ export default defineComponent({
 
     emits: [
         ...useModelToggleEmits,
+        ...arrowNavigationEvents,
         'click',
-        'escapekey',
-        'highlightedIndex',
-        'handleSelectedItem'
+        'escapekey'
     ],
 
     setup(props, { attrs }) {
@@ -195,7 +191,7 @@ export default defineComponent({
 
         const innerRef: Ref<HTMLElement | null> = ref(null)
         const showing = ref(false)
-        const { toggleKey } = toRefs(props)
+        const { toggleKey, arrowNavItems } = toRefs(props)
 
         const { registerTick, removeTick } = useTick()
         const { registerTimeout, removeTimeout } = useTimeout()
@@ -371,7 +367,7 @@ export default defineComponent({
 
         function configureScrollTarget() {
             if (anchorEl.value !== null || props.scrollTarget) {
-                (localScrollTarget as Ref<any>).value = getScrollTarget(
+                ;(localScrollTarget as Ref<any>).value = getScrollTarget(
                     anchorEl.value as HTMLElement,
                     props.scrollTarget
                 )
@@ -466,16 +462,16 @@ export default defineComponent({
         Object.assign(proxy, { focus, updatePosition })
 
         const isMenuOpen = ref(false)
-        const navItems = computed(() => props.arrowNavItems)
         const { selectedItem, highlightedIndex } = useArrowNavigation(
-            navItems,
-            isMenuOpen
+            arrowNavItems,
+            isMenuOpen,
+            emit
         )
         watch(selectedItem, (value: any) => {
-            emit('handleSelectedItem', value)
+            emit('selected-item', value)
         })
         watch(highlightedIndex, (value: any) => {
-            emit('highlightedIndex', value)
+            emit('highlighted-item', value, arrowNavItems.value[value] ?? null)
         })
 
         return {

package/src/demos/DlDropdownButtonDemo.vue

@@ -32,7 +32,7 @@
                 outlined
                 split
                 :label="outlinedLabel"
-                @handleSelectedItem="handleOutlinedSelect"
+                @selected-item="handleOutlinedSelect"
             >
                 <dl-list>
                     <dl-list-item
@@ -68,11 +68,7 @@
                 </dl-list>
             </dl-dropdown-button>
 
-            <dl-dropdown-button
-                split
-                :label="containedLabel"
-                auto-close
-            >
+            <dl-dropdown-button split :label="containedLabel" auto-close>
                 <dl-list>
                     <dl-list-item
                         v-for="val in ['Photos', 'Videos', 'Articles']"
@@ -94,10 +90,7 @@
                 @click="onClick"
             >
                 <dl-list>
-                    <dl-list-item
-                        clickable
-                        @click="() => onClose('Photos')"
-                    >
+                    <dl-list-item clickable @click="() => onClose('Photos')">
                         <dl-item-section> Photos </dl-item-section>
                     </dl-list-item>
 
@@ -111,10 +104,7 @@
                         </dl-item-section>
                     </dl-list-item>
 
-                    <dl-list-item
-                        clickable
-                        @click="() => onClose('Articles')"
-                    >
+                    <dl-list-item clickable @click="() => onClose('Articles')">
                         <dl-item-section> Articles </dl-item-section>
                     </dl-list-item>
                 </dl-list>
@@ -123,15 +113,8 @@
 
         <div style="display: flex; gap: 20px; flex-direction: column">
             <h2>One Button</h2>
-            <div
-                class="grid grid-cols-3"
-                style="column-gap: 10px"
-            >
-                <dl-dropdown-button
-                    auto-close
-                    outlined
-                    :label="outlinedLabel"
-                >
+            <div class="grid grid-cols-3" style="column-gap: 10px">
+                <dl-dropdown-button auto-close outlined :label="outlinedLabel">
                     <dl-list>
                         <dl-list-item clickable>
                             <dl-item-section> Photos </dl-item-section>
@@ -211,10 +194,7 @@
                 </dl-dropdown-button>
             </div>
 
-            <div
-                class="grid grid-cols-3"
-                style="column-gap: 10px"
-            >
+            <div class="grid grid-cols-3" style="column-gap: 10px">
                 <dl-dropdown-button
                     auto-close
                     :model-value="showing"
@@ -315,8 +295,8 @@
                     tooltip="Tooltip message"
                     :arrow-nav-items="listItems"
                     @show="onOpen"
-                    @highlightedIndex="setHighlightedIndex"
-                    @handleSelectedItem="handleSelectedItem"
+                    @highlighted-item="setHighlightedIndex"
+                    @selected-item="handleSelectedItem"
                 >
                     <dl-list>
                         <dl-list-item
@@ -342,7 +322,7 @@
                 outlined
                 text-color="red"
                 :label="outlinedLabel"
-                @handleSelectedItem="handleOutlinedSelect"
+                @selected-item="handleOutlinedSelect"
             >
                 <dl-list>
                     <dl-list-item

package/src/hooks/use-arrow-navigation.ts

@@ -2,7 +2,15 @@ import { ref, isRef, onMounted, onBeforeUnmount, computed } from 'vue-demi'
 
 type ItemType = Record<string, any> | string
 
-export function useArrowNavigation(items: any, isOpen: any) {
+export const arrowNavigationEvents = ['selected-item', 'highlighted-index']
+
+// todo: add tests for util
+
+export function useArrowNavigation(
+    items: any,
+    isOpen: any,
+    emit?: (event: string, ...args: any[]) => void
+) {
     const selectItem = ref<ItemType | null>(null)
     const highlightIndex = ref<number>(-1)
 
@@ -66,6 +74,8 @@ export function useArrowNavigation(items: any, isOpen: any) {
         if (isEligibleToHandleEnter.value) {
             selectedItem.value = itemsData.value[highlightedIndex.value]
             resetHighlightedIndex()
+        } else if (emit) {
+            emit('selected-item', null)
         }
     }