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

package/package.json

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

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

@@ -160,14 +160,15 @@
                         </div>
                         <dl-menu
                             v-if="showSuggestItems"
-                            v-model="isMenuOpen"
-                            auto-close
+                            :model-value="isMenuOpen"
+                            persistent
                             no-focus
+                            no-refocus
                             :offset="[0, 3]"
                             fit-container
                             :fit-content="fitContent"
                             :arrow-nav-items="stringSuggestions"
-                            @click="onMenuShow"
+                            @update:model-value="onSuggestionMenuModelUpdate"
                             @highlighted-item="setHighlightedIndex"
                             @selected-item="handleSelectedItem"
                         >
@@ -176,7 +177,10 @@
                                 :style="{ maxWidth: suggestMenuWidth }"
                             >
                                 <slot name="suggestion-header">
-                                    <dl-list-item v-if="suggestionHeader">
+                                    <dl-list-item
+                                        v-if="suggestionHeader"
+                                        class="dl-input__suggestion--header"
+                                    >
                                         {{ suggestionHeader }}
                                     </dl-list-item>
                                 </slot>
@@ -193,6 +197,7 @@
                                     :highlighted="
                                         suggestIndex === highlightedIndex
                                     "
+                                    @mousedown.prevent
                                     @click="onClick($event, item)"
                                 >
                                     <slot
@@ -742,7 +747,10 @@ export default defineComponent({
         const setHighlightedIndex = (value: any) => {
             highlightedIndex.value = value
         }
-        const handleSelectedItem = (value: any) => {
+        const handleSelectedItem = (value: unknown) => {
+            if (typeof value !== 'string') {
+                return
+            }
             onAutoSuggestClick(null, value)
         }
 
@@ -834,7 +842,11 @@ export default defineComponent({
         }
 
         const onAutoSuggestClick = (e: Event, item: string): void => {
-            const newValue = clearSuggestion(modelValue.value.toString(), item)
+            if (typeof item !== 'string' || !item.trim().length) {
+                return
+            }
+            const currentValue = String(modelValue.value ?? '')
+            const newValue = clearSuggestion(currentValue, item)
             if (!maxLength.value || newValue.length < maxLength.value) {
                 const toEmit = newValue.replace(new RegExp('&nbsp;', 'g'), ' ')
                 emit('input', toEmit, e)
@@ -843,6 +855,7 @@ export default defineComponent({
                 setCaretAtTheEnd(input.value)
                 isInternalChange.value = true
             }
+            isMenuOpen.value = false
         }
 
         const emitAddFile = (file: DlInputFile) => {
@@ -1321,6 +1334,16 @@ export default defineComponent({
             const inputRef = this.$refs.input as HTMLInputElement
             inputRef.focus()
         },
+        openSuggestionMenuOnFocus(): void {
+            if (!this.openSuggestionsOnFocus || !this.suggestItems?.length) {
+                return
+            }
+            this.$nextTick(() => {
+                if (this.focused) {
+                    this.isMenuOpen = true
+                }
+            })
+        },
         onFocus(e: InputEvent): void {
             this.handleValueTrim()
             const el = e.target as HTMLElement
@@ -1328,9 +1351,7 @@ export default defineComponent({
                 el.scroll(el.scrollWidth, 0)
             }
             this.focused = true
-            if (this.openSuggestionsOnFocus && this.suggestItems?.length) {
-                this.isMenuOpen = true
-            }
+            this.openSuggestionMenuOnFocus()
             this.$emit('focus', e)
         },
         blur(): void {
@@ -1356,9 +1377,7 @@ export default defineComponent({
         },
         onNativeFocus(e: FocusEvent): void {
             this.focused = true
-            if (this.openSuggestionsOnFocus && this.suggestItems?.length) {
-                this.isMenuOpen = true
-            }
+            this.openSuggestionMenuOnFocus()
             this.$emit('focus', e)
         },
         onNativeBlur(e: FocusEvent): void {
@@ -1390,8 +1409,12 @@ export default defineComponent({
         onPassShowClick(): void {
             this.showPass = !this.showPass
         },
-        onMenuShow(): void {
-            this.focus()
+        onSuggestionMenuModelUpdate(value: boolean): void {
+            if (!value && this.focused && this.openSuggestionsOnFocus) {
+                this.openSuggestionMenuOnFocus()
+                return
+            }
+            this.isMenuOpen = value
         },
         getSuggestWords(
             item: string,
@@ -1741,6 +1764,13 @@ export default defineComponent({
     }
 
     &__suggestion {
+        &--header {
+            font-family: var(--dl-typography-body-body3-font-family);
+            font-size: var(--dl-typography-body-body3-font-size);
+            line-height: var(--dl-typography-body-body3-line-height);
+            font-weight: var(--dl-typography-body-body3-font-weight);
+            color: var(--dell-gray-600);
+        }
         &--highlighted {
             background-color: var(--dl-color-warning);
             border-radius: 2px;

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

@@ -16,7 +16,8 @@ export function addEventListenersToElement(
 }
 
 export function clearSuggestion(text: string, suggestion: string) {
-    return text.split(' ').slice(0, -1).join(' ') + ' ' + suggestion
+    const prefix = text.split(' ').slice(0, -1).join(' ')
+    return prefix ? `${prefix} ${suggestion}` : suggestion
 }
 
 export function setInnerHTMLWithCursor(

package/src/demos/DlInputDemo.vue

@@ -124,6 +124,15 @@
                 />
             </template>
         </dl-input>
+        <dl-input
+            v-model="headerSuggestionsValue"
+            style="width: 320px"
+            title="Suggestions with header and icons"
+            placeholder="Type to see suggestions"
+            suggestion-header="Suggested users"
+            :auto-suggest-items="headerSuggestionsItems"
+            open-suggestions-on-focus
+        />
         <div class="numberClip" style="max-width: 64px">
             <dl-input
                 v-model="numberClip"
@@ -249,7 +258,10 @@
 import { v4 } from 'uuid'
 import { computed, defineComponent, ref } from 'vue-demi'
 import { DlInput, DlButton, DlIcon, DlSwitch } from '../components'
-import { DlInputFile } from '../components/compound/DlInput/types'
+import {
+    DlInputFile,
+    DlInputSuggestion
+} from '../components/compound/DlInput/types'
 export default defineComponent({
     name: 'DlInputDemo',
     components: {
@@ -265,6 +277,21 @@ export default defineComponent({
         const sizeSFieldValue = ref<string>('')
         const errorFieldValue = ref<string>('')
         const saveInputValue = ref<string>('Test vaaalueeee')
+        const headerSuggestionsValue = ref<string>('')
+        const headerSuggestionsItems = ref<DlInputSuggestion[]>([
+            {
+                suggestion: '@john-doe',
+                startIcon: 'icon-dl-user'
+            },
+            {
+                suggestion: '@jane-smith',
+                startIcon: 'icon-dl-user'
+            },
+            {
+                suggestion: '@team-design',
+                startIcon: 'icon-dl-users'
+            }
+        ])
 
         const files = ref<DlInputFile[]>([])
         const addFile = (e: Event) => {
@@ -313,6 +340,8 @@ export default defineComponent({
             warningFieldValue,
             errorFieldValue,
             saveInputValue,
+            headerSuggestionsValue,
+            headerSuggestionsItems,
             sizeSFieldValue,
             files,
             updateFiles,