@dataloop-ai/components 0.19.281 → 0.19.282

package/package.json

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

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

@@ -75,14 +75,14 @@
                 <dl-tooltip v-if="disabled && disabledTooltip">
                     {{ disabledTooltip }}
                 </dl-tooltip>
-                <div v-if="hasSelectedSlot" style="width: 100%">
+                <div v-if="hasSelectedSlot && hasSelection" style="width: 100%">
                     <slot
                         v-if="searchable ? !isExpanded : true"
                         :opt="selectedOption"
                         name="selected"
                     />
                 </div>
-                <template v-if="!hasSelectedSlot">
+                <template v-else>
                     <span
                         v-show="
                             (multiselect && !searchable) ||
@@ -456,7 +456,7 @@ export default defineComponent({
         'selected',
         'deselected'
     ],
-    setup(props, { emit }) {
+    setup(props, { emit, slots }) {
         const isExpanded = ref(false)
         const selectedIndex = ref(-1)
         const highlightedIndex = ref(-1)
@@ -474,6 +474,8 @@ export default defineComponent({
             emit('change', val)
         }
 
+        const hasSlotByName = (name: string) => !!slots[name]
+
         return {
             uuid: `dl-select-${v4()}`,
             MAX_ITEMS_PER_LIST,
@@ -484,7 +486,8 @@ export default defineComponent({
             setHighlightedIndex,
             handleModelValueUpdate,
             searchTerm, // todo: merge this sometime
-            searchInputValue
+            searchInputValue,
+            hasSlotByName
         }
     },
     computed: {
@@ -637,13 +640,13 @@ export default defineComponent({
             return getIconSize(this.size)
         },
         hasOptionSlot(): boolean {
-            return !!this.$slots.option
+            return !!this.hasSlotByName('option')
         },
         hasAllItemsSlot(): boolean {
-            return !!this.$slots['all-items']
+            return !!this.hasSlotByName('all-items')
         },
         hasSelectedSlot(): boolean {
-            return !!this.$slots.selected
+            return !!this.hasSlotByName('selected')
         },
         computedPlaceholder(): string {
             return this.placeholder || 'Select option'