@dataloop-ai/components 0.20.274 → 0.20.276

package/package.json

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

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

@@ -212,32 +212,40 @@
                                             :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
-                                            }"
+                                        <dl-ellipsis
+                                            class="dl-input__suggestion--text"
                                         >
-                                            <span v-if="word.value[0] === ' '"
-                                            >&nbsp;</span
-                                            >
-                                            {{ word.value }}
                                             <span
-                                                v-if="
-                                                    word.value[
-                                                        word.value.length - 1
-                                                    ] === ' '
+                                                v-for="(
+                                                    word, index
+                                                ) in getSuggestWords(
+                                                    item.suggestion,
+                                                    modelValue
+                                                )"
+                                                :key="
+                                                    JSON.stringify(word) + index
                                                 "
-                                            >&nbsp;</span
+                                                :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>
+                                        </dl-ellipsis>
                                     </slot>
                                 </dl-list-item>
                             </dl-list>
@@ -1664,6 +1672,7 @@ export default defineComponent({
         position: relative;
         line-height: 10px;
         width: 100%;
+        contain: inline-size;
 
         &--text-color {
             color: var(--dell-gray-800);
@@ -1797,6 +1806,14 @@ export default defineComponent({
             border-radius: 2px;
             color: var(--dl-color-text-darker-buttons);
         }
+        &--text {
+            flex: 1 1 auto;
+            min-width: 0;
+
+            ::v-deep .dl-ellipsis__left {
+                white-space: nowrap;
+            }
+        }
         &--image {
             margin-right: 5px;
             border-radius: 50%;

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

@@ -618,16 +618,15 @@ export default defineComponent({
                 return
             }
 
-            if (focused.value) {
-                return
-            }
-
-            input.value.scrollTo(0, input.value.scrollHeight)
-            input.value.scrollLeft = input.value.scrollWidth
+            if (!focused.value) {
+                input.value.scrollTo(0, input.value.scrollHeight)
+                input.value.scrollLeft = input.value.scrollWidth
 
-            input.value.focus()
+                input.value.focus()
 
-            focused.value = true
+                focused.value = true
+                emit('focus')
+            }
             if (suggestions.value.length) {
                 showSuggestions.value = true
 
@@ -637,7 +636,6 @@ export default defineComponent({
                     )
                 })
             }
-            emit('focus')
         }
 
         const processBlur = () => {

package/src/demos/DlInputDemo.vue

@@ -290,6 +290,11 @@ export default defineComponent({
             {
                 suggestion: '@team-design',
                 startIcon: 'icon-dl-users'
+            },
+            {
+                suggestion:
+                    'averyveryveryveryveryveryveryverylongtextwithoutanyspaces',
+                startIcon: 'icon-dl-users'
             }
         ])