@dataloop-ai/components 0.17.92 → 0.17.94

package/package.json

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

package/src/components/basic/DlEllipsis/DlEllipsis.vue

@@ -4,11 +4,9 @@
             ref="dlEllipsisRef"
             class="dl-ellipsis__left"
         >
-            <slot
-                v-if="hasDefaultSlot"
-                name="default"
-            />
-            <span v-else>{{ leftText }}</span>
+            <slot>
+                <span>{{ leftText }}</span>
+            </slot>
         </span>
         <span
             v-if="rightText"
@@ -23,17 +21,15 @@
             :anchor="tooltipPosition"
             :offset="tooltipOffset"
         >
-            <slot
-                v-if="hasDefaultSlot"
-                name="default"
-            />
-            <span v-else>{{ fullText }}</span>
+            <slot>
+                <span>{{ fullText }}</span>
+            </slot>
         </dl-tooltip>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue-demi'
+import { defineComponent, ref, computed, toRef } from 'vue-demi'
 import DlTooltip from '../../essential/DlTooltip/DlTooltip.vue'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 
@@ -84,31 +80,31 @@ export default defineComponent({
     // TODO: fix type issue here
     setup(props: any, { slots }: any) {
         const dlEllipsisRef = ref(null)
+        const textRef = toRef(props, 'text')
         const { hasEllipsis } = useSizeObserver(dlEllipsisRef)
-
         const hasDefaultSlot = computed(() => !!slots.default)
         const splitIndex = computed(() => {
-            if (!props.text.length) return null
+            if (!textRef.value.length) return null
             return props.split
-                ? Math.round(props.text.length * props.splitPosition)
-                : props.text.length
+                ? Math.round(textRef.value.length * props.splitPosition)
+                : textRef.value.length
         })
         const leftText = computed(() => {
             if (splitIndex.value !== null) {
-                return props.text.slice(0, splitIndex.value)
+                return textRef.value.slice(0, splitIndex.value)
             }
             return ''
         })
         const rightText = computed(() => {
             if (splitIndex.value !== null) {
-                return props.text.slice(splitIndex.value)
+                return textRef.value.slice(splitIndex.value)
             }
             return ''
         })
         const shouldShowTooltip = computed(
             () => hasEllipsis.value && props.tooltip
         )
-        const fullText = computed(() => props.text)
+        const fullText = computed(() => textRef.value)
 
         return {
             hasDefaultSlot,

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

@@ -394,10 +394,18 @@ export default defineComponent({
         modelValue(value: string) {
             const target = this.$refs['input'] as HTMLInputElement
             value = value?.replaceAll(' ', ' ') ?? ''
-            if (!this.isTyping) target.innerHTML = value
+            /*
+             * I commented out this line because it was blocking arrow navigation
+             * */
+            // if (!this.isTyping) target.innerHTML = value
+            target.innerHTML = value
             updateEditor(this.styleModel)
             this.setMenuOffset(isEligibleToChange(target, this.expanded))
-            if (!this.isTyping) setCaret(target)
+            /*
+             * I commented out this line because it was blocking arrow navigation
+             * */
+            // if (!this.isTyping) setCaret(target)
+            setCaret(target)
             if (!this.expanded) {
                 this.isOverflow =
                     isEllipsisActive(this.$refs['input'] as Element) ||

package/src/demos/DlDropdownButtonDemo.vue

@@ -286,7 +286,6 @@
                     :label="arrowNavigationLabel"
                     main-button-style="width: 150px;"
                     :overflow="true"
-                    disabled
                     :no-wrap="true"
                     tooltip="Tooltip message"
                     :arrow-nav-items="listItems"

package/src/demos/DlMenuDemo.vue

@@ -524,6 +524,8 @@ import {
 import { defineComponent, onMounted, ref, watch } from 'vue-demi'
 import { useArrowNavigation } from '../hooks/use-arrow-navigation'
 
+type ItemType = Record<string, any> | string
+
 export default defineComponent({
     name: 'DlMenuDemo',
     components: {
@@ -537,7 +539,7 @@ export default defineComponent({
     setup() {
         const showing = ref(false)
         const isMenuOpen = ref(false)
-        const arrowNavigationLabel = ref('Arrow Navigation Label')
+        const arrowNavigationLabel = ref<ItemType>('Arrow Navigation Label')
 
         const listItems = ref([
             'New tab',
@@ -560,7 +562,7 @@ export default defineComponent({
             isMenuOpen
         )
 
-        watch(selectedItem, (value: string) => {
+        watch(selectedItem, (value: ItemType | string) => {
             arrowNavigationLabel.value = value
         })
 

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

@@ -1,41 +1,84 @@
-import { ref, onMounted, onBeforeUnmount } from 'vue-demi'
+import { ref, isRef, onMounted, onBeforeUnmount, computed } from 'vue-demi'
+
+type ItemType = Record<string, any> | string
 
 export function useArrowNavigation(items: any, isOpen: any) {
-    const selectedItem = ref(null)
-    const highlightedIndex = ref(-1)
+    const selectItem = ref<ItemType | null>(null)
+    const highlightIndex = ref<number>(-1)
+
+    const itemsData = computed(() => (isRef(items) ? items.value : items))
+    const isMenuOpen = computed(() => (isRef(isOpen) ? isOpen.value : isOpen))
 
-    const handleArrowUp = () => {
-        if (highlightedIndex.value > 0) {
-            highlightedIndex.value--
+    const selectedItem = computed({
+        get: () => selectItem.value,
+        set: (value: ItemType) => {
+            selectItem.value = value
         }
-    }
-    const handleArrowDown = () => {
-        if (highlightedIndex.value < items.value.length - 1) {
-            highlightedIndex.value++
+    })
+    const highlightedIndex = computed({
+        get: () => highlightIndex.value,
+        set: (value: number) => {
+            highlightIndex.value = value
         }
+    })
+
+    const itemsLength = computed<number>(() => itemsData.value.length)
+
+    const decrementHighlightedIndex = (): void => {
+        highlightedIndex.value -= 1
     }
-    const handleEnter = () => {
-        if (
+    const incrementHighlightedIndex = (): void => {
+        highlightedIndex.value += 1
+    }
+    const resetHighlightedIndex = (): void => {
+        highlightedIndex.value = -1
+    }
+
+    const isEligibleToHandleEnter = computed<boolean>(() => {
+        return (
             highlightedIndex.value >= 0 &&
-            highlightedIndex.value < items.value.length
-        ) {
-            selectedItem.value = items.value[highlightedIndex.value]
-            resetNavigation()
+            highlightedIndex.value < itemsLength.value
+        )
+    })
+    const isEligibleToIncrementHighlightedIndex = computed<boolean>(() => {
+        return highlightedIndex.value < itemsLength.value - 1
+    })
+    const isEligibleToDecrementHighlightedIndex = computed<boolean>(() => {
+        return highlightedIndex.value > 0
+    })
+    const isNotEligibleToHandleArrows = computed<boolean>(() => {
+        return !itemsLength.value || !isMenuOpen.value
+    })
+
+    const handleArrowUp = (event: KeyboardEvent) => {
+        event.preventDefault()
+        if (isEligibleToDecrementHighlightedIndex.value) {
+            decrementHighlightedIndex()
         }
     }
-    const resetNavigation = () => {
-        highlightedIndex.value = -1
+    const handleArrowDown = (event: KeyboardEvent) => {
+        event.preventDefault()
+        if (isEligibleToIncrementHighlightedIndex.value) {
+            incrementHighlightedIndex()
+        }
     }
+    const handleEnter = () => {
+        if (isEligibleToHandleEnter.value) {
+            selectedItem.value = itemsData.value[highlightedIndex.value]
+            resetHighlightedIndex()
+        }
+    }
+
     const navigateList = (event: KeyboardEvent) => {
-        if (!items.value?.length || !isOpen.value) {
+        if (isNotEligibleToHandleArrows.value) {
             return
         }
         switch (event.key) {
             case 'ArrowUp':
-                handleArrowUp()
+                handleArrowUp(event)
                 break
             case 'ArrowDown':
-                handleArrowDown()
+                handleArrowDown(event)
                 break
             case 'Enter':
                 handleEnter()