@dataloop-ai/components 0.20.259 → 0.20.261-new-input.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.259",
+  "version": "0.20.261-new-input.0",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

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

@@ -175,10 +175,16 @@
                                 bordered
                                 :style="{ maxWidth: suggestMenuWidth }"
                             >
+                                <slot name="suggestion-header">
+                                    <dl-list-item v-if="suggestionHeader">
+                                        {{ suggestionHeader }}
+                                    </dl-list-item>
+                                </slot>
                                 <dl-list-item
                                     v-for="(item, suggestIndex) in suggestItems"
                                     :key="item.suggestion"
                                     clickable
+                                    :start-icon="getSuggestionStartIcon(item)"
                                     style="
                                         font-size: var(
                                             --dl-typography-body-body3-font-size
@@ -189,35 +195,44 @@
                                     "
                                     @click="onClick($event, item)"
                                 >
-                                    <img
-                                        v-if="item.image"
-                                        :src="item.image"
-                                        class="dl-input__suggestion--image"
-                                    />
-                                    <span
-                                        v-for="(word, index) in getSuggestWords(
-                                            item.suggestion,
-                                            modelValue
-                                        )"
-                                        :key="JSON.stringify(word) + index"
-                                        :class="{
-                                            'dl-input__suggestion--highlighted':
-                                                word.highlighted
-                                        }"
+                                    <slot
+                                        name="suggestion-item"
+                                        :item="item"
+                                        :keyword="modelValue"
+                                        :suggest-index="suggestIndex"
                                     >
-                                        <span v-if="word.value[0] === ' '"
-                                        >&nbsp;</span
-                                        >
-                                        {{ word.value }}
+                                        <img
+                                            v-if="item.image"
+                                            :src="item.image"
+                                            class="dl-input__suggestion--image"
+                                        />
                                         <span
-                                            v-if="
-                                                word.value[
-                                                    word.value.length - 1
-                                                ] === ' '
-                                            "
-                                        >&nbsp;</span
+                                            v-for="(
+                                                word, index
+                                            ) in getSuggestWords(
+                                                item.suggestion,
+                                                modelValue
+                                            )"
+                                            :key="JSON.stringify(word) + index"
+                                            :class="{
+                                                'dl-input__suggestion--highlighted':
+                                                    word.highlighted
+                                            }"
                                         >
-                                    </span>
+                                            <span v-if="word.value[0] === ' '"
+                                            >&nbsp;</span
+                                            >
+                                            {{ word.value }}
+                                            <span
+                                                v-if="
+                                                    word.value[
+                                                        word.value.length - 1
+                                                    ] === ' '
+                                                "
+                                            >&nbsp;</span
+                                            >
+                                        </span>
+                                    </slot>
                                 </dl-list-item>
                             </dl-list>
                         </dl-menu>
@@ -609,6 +624,20 @@ export default defineComponent({
             type: String,
             default: 'auto'
         },
+        /**
+         * Text shown at the top of the suggestions list
+         */
+        suggestionHeader: {
+            type: String,
+            default: ''
+        },
+        /**
+         * Open suggestion menu when input is focused
+         */
+        openSuggestionsOnFocus: {
+            type: Boolean,
+            default: false
+        },
         /**
          * Tooltip showed when hovering over the clear button
          */
@@ -697,12 +726,17 @@ export default defineComponent({
         const isInternalChange = ref(false)
 
         const suggestItems = computed<DlInputSuggestion[]>(() => {
-            if (!modelValue.value) return []
+            const inputValue =
+                modelValue.value === null || modelValue.value === undefined
+                    ? ''
+                    : modelValue.value.toString()
             return getSuggestItems(
                 autoSuggestItems.value,
-                modelValue.value?.toString()
+                inputValue
             ) as DlInputSuggestion[]
         })
+        const getSuggestionStartIcon = (item: DlInputSuggestion) =>
+            (item as any).startIcon
         const input = ref(null)
 
         const setHighlightedIndex = (value: any) => {
@@ -977,6 +1011,7 @@ export default defineComponent({
             emitAddFile,
             emitRemoveFile,
             updateSyntax,
+            getSuggestionStartIcon,
             stringSuggestions,
             showPlaceholder,
             spanText,
@@ -1124,7 +1159,14 @@ export default defineComponent({
             return !this.$slots.append && this.type === 'password'
         },
         showSuggestItems(): boolean {
-            return !!this.suggestItems?.length && !!this.modelValue
+            const hasValue =
+                this.modelValue !== null &&
+                this.modelValue !== undefined &&
+                `${this.modelValue}`.length > 0
+            return (
+                !!this.suggestItems?.length &&
+                (hasValue || (this.openSuggestionsOnFocus && this.focused))
+            )
         },
         debouncedBlur(): any {
             if (stateManager.disableDebounce) {
@@ -1286,6 +1328,9 @@ export default defineComponent({
                 el.scroll(el.scrollWidth, 0)
             }
             this.focused = true
+            if (this.openSuggestionsOnFocus && this.suggestItems?.length) {
+                this.isMenuOpen = true
+            }
             this.$emit('focus', e)
         },
         blur(): void {
@@ -1299,6 +1344,7 @@ export default defineComponent({
                 : el.innerText
             el.scroll(0, 0)
             this.focused = false
+            this.isMenuOpen = false
             this.$emit('blur', e)
             this.handleValueTrim()
         },
@@ -1310,10 +1356,14 @@ export default defineComponent({
         },
         onNativeFocus(e: FocusEvent): void {
             this.focused = true
+            if (this.openSuggestionsOnFocus && this.suggestItems?.length) {
+                this.isMenuOpen = true
+            }
             this.$emit('focus', e)
         },
         onNativeBlur(e: FocusEvent): void {
             this.focused = false
+            this.isMenuOpen = false
             this.$emit('blur', e)
         },
         onNativeEnterPress(e: KeyboardEvent): void {

package/src/components/compound/DlInput/types.ts

@@ -1,6 +1,13 @@
 export interface DlInputSuggestion {
     suggestion: string
     image?: string
+    startIcon?:
+        | {
+              icon: string
+              color?: string
+              size?: string
+          }
+        | string
     click?: boolean
 }
 

package/src/components/compound/DlJsonEditor/DlJsonEditor.vue

@@ -53,6 +53,11 @@ export default defineComponent({
             required: false,
             type: String as PropType<Mode>,
             default: Mode.text
+        },
+        autoFocus: {
+            required: false,
+            type: Boolean,
+            default: true
         }
     },
     emits: [
@@ -64,11 +69,20 @@ export default defineComponent({
         'blur'
     ],
     setup(props, { emit }) {
-        const { modelValue, indentation, readonly, mode } = toRefs(props)
+        const { modelValue, indentation, readonly, mode, autoFocus } =
+            toRefs(props)
 
         const jsonEditorRef = ref(null)
         const jsonEditor = ref<JSONEditor>(null as any)
         const innerUpdate = ref(false)
+        const suppressNextFocus = ref(false)
+
+        const blurActiveEditorElement = () => {
+            const target = jsonEditorRef.value as HTMLElement | null
+            if (target?.contains(document.activeElement)) {
+                ;(document.activeElement as HTMLElement)?.blur()
+            }
+        }
 
         watch(modelValue, (val) => {
             if (innerUpdate.value) {
@@ -76,9 +90,18 @@ export default defineComponent({
                 return
             }
 
+            if (!autoFocus.value) {
+                suppressNextFocus.value = true
+            }
             jsonEditor.value?.set({
                 text: val
             })
+            if (!autoFocus.value) {
+                nextTick(() => {
+                    blurActiveEditorElement()
+                    suppressNextFocus.value = false
+                })
+            }
         })
 
         watch(mode, (val) => {
@@ -136,6 +159,10 @@ export default defineComponent({
                 navigationBar: false,
                 statusBar: false,
                 onFocus: () => {
+                    if (suppressNextFocus.value) {
+                        blurActiveEditorElement()
+                        return
+                    }
                     emit('focus')
                 },
                 onBlur: () => {
@@ -156,10 +183,15 @@ export default defineComponent({
             jsonEditor.value?.set({
                 text: modelValue.value
             })
-
             nextTick(() => {
                 jsonEditor.value?.refresh()
             })
+
+            if (!autoFocus.value) {
+                nextTick(() => {
+                    blurActiveEditorElement()
+                })
+            }
         }
 
         watch(readonly, (val) => {