npm - @dataloop-ai/components - Versions diffs - 0.20.274 → 0.20.275 - Mend

@dataloop-ai/components 0.20.274 → 0.20.275

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/package.json +1 -1
package/src/components/compound/DlInput/DlInput.vue +39 -22
package/src/demos/DlInputDemo.vue +5 -0

package/package.json CHANGED Viewed

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

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

@@ -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/demos/DlInputDemo.vue CHANGED Viewed

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