@dataloop-ai/components 0.20.19 → 0.20.21

package/package.json

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

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

@@ -77,16 +77,14 @@
                 </dl-tooltip>
                 <div v-if="hasSelectedSlot" style="width: 100%">
                     <slot
-                        v-if="shouldShowSelectedSlotContent"
+                        v-if="!isActiveSearchInput"
                         :opt="selectedOption"
                         name="selected"
-                    />
-                    <span
-                        v-else-if="!isActiveSearchInput"
-                        class="root-container--placeholder"
                     >
-                        {{ filterSelectLabel }}
-                    </span>
+                        <span class="root-container--placeholder">
+                            {{ filterSelectLabel }}
+                        </span>
+                    </slot>
                 </div>
                 <template v-else>
                     <span
@@ -671,9 +669,6 @@ export default defineComponent({
         isActiveSearchInput(): boolean {
             return this.searchable && this.isExpanded
         },
-        shouldShowSelectedSlotContent(): boolean {
-            return this.hasSelectedSlotContent && !this.isActiveSearchInput
-        },
         computedPlaceholder(): string {
             return this.placeholder || 'Select option'
         },
@@ -690,9 +685,34 @@ export default defineComponent({
             }
         },
         selectedOption(): DlSelectOptionType {
-            return this.selectedIndex === -1
-                ? this.computedPlaceholder
-                : this.options[this.selectedIndex]
+            if (this.multiselect) {
+                if (this.modelValueLength === 1) {
+                    return this.options.find((option: any) => {
+                        return isEqual(
+                            option.value,
+                            Array.isArray(this.modelValue)
+                                ? this.modelValue[0]
+                                : this.modelValue
+                        )
+                    })
+                } else {
+                    return {
+                        label: this.filterSelectLabel,
+                        value: this.modelValue,
+                        readonly: true
+                    }
+                }
+            }
+
+            if (this.selectedIndex === -1) {
+                return {
+                    label: this.computedPlaceholder,
+                    value: null,
+                    readonly: true
+                }
+            }
+
+            return this.options[this.selectedIndex]
         },
         hasBeforeOptions(): boolean {
             return !!this.$slots['before-options']

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

@@ -403,9 +403,7 @@ export default defineComponent({
     display: flex !important;
     justify-content: center !important;
     color: var(--dl-color-medium);
-    transition-property:
-        transform,
-        -webkit-transform;
+    transition-property: transform, -webkit-transform;
     transition-duration: 0.28s, 0.28s;
     transition-timing-function: ease, ease;
     transition-delay: 0s, 0s;
@@ -422,7 +420,7 @@ export default defineComponent({
 }
 
 .readonly-option {
-    height: 28px;
+    min-height: 28px;
     display: flex;
     align-items: center;
     font-size: 12px;

package/src/demos/DlSelectDemo.vue

@@ -625,6 +625,66 @@
                 <dl-button label="Button" />
             </template>
         </dl-select>
+
+        Select with auto select selected
+        <dl-select
+            v-model="preSelectedValue"
+            width="84px"
+            without-borders
+            with-chips
+            align-right
+            searchable
+            :options="[
+                { label: 'High', value: 'high', bgColor: 'dl-color-negative' },
+                {
+                    label: 'Medium',
+                    value: 'medium',
+                    bgColor: 'dl-color-warning',
+                    textColor: 'dl-color-darker',
+                    icon: 'icon-dl-search'
+                },
+                {
+                    label: 'Low',
+                    value: 'low',
+                    bgColor: 'dl-color-positive',
+                    textColor: 'dl-color-darker'
+                }
+            ]"
+            required
+        >
+            <template #selected="scope">
+                <dl-chip
+                    :text-color="scope.opt.textColor"
+                    :color="scope.opt.bgColor"
+                >
+                    {{ scope.opt.label }}
+                </dl-chip>
+            </template>
+            <template #option="scope">
+                <div class="flex">
+                    <dl-chip
+                        :text-color="scope.opt.textColor"
+                        :color="scope.opt.bgColor"
+                    >
+                        {{ scope.opt.label }}
+                    </dl-chip>
+                </div>
+            </template>
+        </dl-select>
+
+        Select with multiselect auto expanded and fixed width and virtual scroll
+        with selected slot
+        <dl-select
+            v-model="selectedWithChildrenAndReadonly"
+            :options="alotOfOptionsExpanded"
+            multiselect
+            searchable
+            style="margin-bottom: 150px; width: 200px"
+        >
+            <template #selected="scope">
+                <div>{{ scope.opt.label }}</div>
+            </template>
+        </dl-select>
     </div>
 </template>
 
@@ -891,7 +951,8 @@ export default defineComponent({
             selectedWithChildrenCapitalized: [],
             tasksFilter: [],
             showAllOption: true,
-            disabledSelected: 'disabled option'
+            disabledSelected: 'disabled option',
+            preSelectedValue: null
         }
     },
     computed: {
@@ -907,7 +968,7 @@ export default defineComponent({
                     key: i,
                     subLabel: 'not so high',
                     label: 'High ' + i,
-                    value: 'high',
+                    value: 'high' + i,
                     bgColor: 'dl-color-negative'
                 })
             }
@@ -922,7 +983,7 @@ export default defineComponent({
                     key: i,
                     subLabel: 'not so high',
                     label: 'High ' + i,
-                    value: 'high',
+                    value: 'high' + i,
                     bgColor: 'dl-color-negative'
                 })
             }