@dataloop-ai/components 0.20.25 → 0.20.27

package/package.json

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

package/src/components/compound/DlSelect/DlSelect.vue

@@ -95,7 +95,7 @@
                         class="root-container--placeholder"
                     >
                         <template v-if="allFiltersModel">
-                            {{ computedAllItemsLabel }}
+                            <dl-ellipsis :text="computedAllItemsLabel" />
                         </template>
                         <template v-else>
                             <dl-ellipsis :text="filterSelectLabel" />
@@ -108,7 +108,7 @@
                         "
                         class="selected-label"
                     >
-                        {{ getLabel(selectedOption) }}
+                        <dl-ellipsis :text="getLabel(selectedOption)" />
                     </span>
                 </template>
                 <div
@@ -631,10 +631,10 @@ export default defineComponent({
             }
             return this.modelValueLength > 0
                 ? `${this.modelValueLength} ${this.selectedResourceLabel}`
-                : this.computedPlaceholder
+                : String(this.computedPlaceholder)
         },
         computedAllItemsLabel(): string {
-            return this.allItemsOptionLabel || 'All Items'
+            return String(this.allItemsOptionLabel ?? 'All Items')
         },
         isModelValuePrimitiveType(): boolean {
             return this.isPrimitiveValue(this.modelValue)
@@ -670,7 +670,7 @@ export default defineComponent({
             return this.searchable && this.isExpanded
         },
         computedPlaceholder(): string {
-            return this.placeholder || 'Select option'
+            return String(this.placeholder ?? 'Select option')
         },
         placeholderStyles(): Record<string, string> {
             if (this.disabled) {
@@ -1088,6 +1088,8 @@ export default defineComponent({
 
     .selected-label {
         color: var(--dl-select-placeholder-color, var(--placeholder-color));
+        width: fit-content;
+        max-width: 100%;
     }
 
     .dl-select__title {
@@ -1096,6 +1098,7 @@ export default defineComponent({
         text-align: left;
         margin-right: 5px;
         white-space: nowrap;
+        width: 100%;
     }
 
     .required-asterisk {

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

@@ -3,10 +3,10 @@ import { DlSelectOptionType } from './types'
 
 export const getLabel = (option: any) => {
     if (typeof option === 'object' && 'label' in option) {
-        return option.label
+        return String(option.label)
     }
 
-    return option
+    return String(option)
 }
 
 const ICON_SIZES = {
@@ -45,12 +45,12 @@ export const getLabelOfSelectedOption = (
             typeof selected === 'string' &&
             option === selected
         ) {
-            return option
+            return String(option)
         } else if (
             typeof option === 'object' &&
             isValueSelected(option, selected)
         ) {
-            return option.label
+            return String(option.label)
         }
     }
     return '1 Option Selected'

package/src/demos/DlSelectDemo.vue

@@ -697,6 +697,19 @@
                 <div>{{ scope.opt.label }}</div>
             </template>
         </dl-select>
+
+        Select numbers as labels
+        <dl-select
+            v-model="selectedNumbers"
+            :options="optionsAsNumbers"
+            multiselect
+            searchable
+            style="margin-bottom: 150px; width: 200px"
+        >
+            <template #selected="scope">
+                <div>{{ scope.opt.label }}</div>
+            </template>
+        </dl-select>
     </div>
 </template>
 
@@ -712,6 +725,12 @@ const defaultOptions = [
     { label: 'Contributor 3', value: 'c3' }
 ]
 
+const optionsAsNumbers = [
+    { label: 1, value: 1 },
+    { label: 2, value: 2 },
+    { label: 3, value: 3 }
+]
+
 const defaultOptions1 = [
     {
         label: 'Contributor 1 Contributor 1 Contributor 1 Contributor 1 Contributor 1 Contributor 1',
@@ -980,7 +999,9 @@ export default defineComponent({
             tasksFilter: [],
             showAllOption: true,
             disabledSelected: 'disabled option',
-            preSelectedValue: null
+            preSelectedValue: null,
+            optionsAsNumbers,
+            selectedNumbers: []
         }
     },
     computed: {