@dataloop-ai/components 0.20.8 → 0.20.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.8",
+  "version": "0.20.11",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -23,7 +23,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.0.91",
+    "@dataloop-ai/icons": "^3.0.101",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",
     "@types/sortablejs": "^1.15.7",

package/src/components/blocks/DlLabelPicker/DlLabelPicker.vue

@@ -104,11 +104,15 @@ export default defineComponent({
         hideNoData: {
             type: Boolean,
             default: false
+        },
+        initialSelection: {
+            type: Object as PropType<DlLabelPickerItem>,
+            default: null
         }
     },
     emits: ['selected-label', 'click', 'focus', 'blur', 'clear'],
     setup(props, { emit, slots }) {
-        const { items } = toRefs(props)
+        const { items, initialSelection } = toRefs(props)
 
         const columns: DlTableColumn[] = [
             {
@@ -124,9 +128,8 @@ export default defineComponent({
 
         const inputValue = ref('')
         const currentSelectedLabel = ref<DlLabelPickerItem>(
-            items.value ? items.value[0] : null
+            (initialSelection?.value ?? items.value?.[0]) || null
         )
-
         const table = ref()
         const handleRowClick = (event: MouseEvent, item: DlLabelPickerItem) => {
             table.value.$el
@@ -203,9 +206,9 @@ export default defineComponent({
 
         onMounted(() => {
             nextTick(() => {
-                if (items.value?.[0]?.identifier) {
+                if (currentSelectedLabel.value.identifier) {
                     const target = table.value.$el.querySelector(
-                        `[data-label-picker-identifier="${items.value[0].identifier}"]`
+                        `[data-label-picker-identifier="${currentSelectedLabel.value.identifier}"]`
                     )
                     target?.closest('tr')?.classList.add('selected')
                 }

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

@@ -77,10 +77,16 @@
                 </dl-tooltip>
                 <div v-if="hasSelectedSlot" style="width: 100%">
                     <slot
-                        v-if="searchable ? !isExpanded : true"
+                        v-if="shouldShowSelectedSlotContent"
                         :opt="selectedOption"
                         name="selected"
                     />
+                    <span
+                        v-else-if="!isActiveSearchInput"
+                        class="root-container--placeholder"
+                    >
+                        {{ filterSelectLabel }}
+                    </span>
                 </div>
                 <template v-else>
                     <span
@@ -477,6 +483,14 @@ export default defineComponent({
         }
 
         const hasSlotByName = (name: string) => !!slots[name]
+        const hasSlotContent = (name: string) => {
+            const slot = slots[name]
+            if (slot) {
+                const newSlot = typeof slot === 'function' ? slot() : slot
+                return newSlot?.length > 0
+            }
+            return false
+        }
 
         return {
             uuid: `dl-select-${v4()}`,
@@ -489,7 +503,8 @@ export default defineComponent({
             handleModelValueUpdate,
             searchTerm, // todo: merge this sometime
             searchInputValue,
-            hasSlotByName
+            hasSlotByName,
+            hasSlotContent
         }
     },
     computed: {
@@ -650,6 +665,15 @@ export default defineComponent({
         hasSelectedSlot(): boolean {
             return !!this.hasSlotByName('selected')
         },
+        hasSelectedSlotContent(): boolean {
+            return this.hasSlotContent('selected')
+        },
+        isActiveSearchInput(): boolean {
+            return this.searchable && this.isExpanded
+        },
+        shouldShowSelectedSlotContent(): boolean {
+            return this.hasSelectedSlotContent && !this.isActiveSearchInput
+        },
         computedPlaceholder(): string {
             return this.placeholder || 'Select option'
         },

package/src/demos/DlLabelPickerDemo.vue

@@ -7,6 +7,7 @@
                 title: '',
                 icon: ''
             }"
+            :initial-selection="initialSelection"
             hide-bottom
             hide-no-data
             @selected-label="setSelectedEvent"
@@ -72,11 +73,12 @@ export default defineComponent({
     },
     setup() {
         const items = ref(rows)
+        const initialSelection = ref(rows[1])
         const lastSelected = ref<DlLabelPickerItem>(null)
         const setSelectedEvent = (item: DlLabelPickerItem) => {
             lastSelected.value = item
         }
-        return { items, lastSelected, setSelectedEvent }
+        return { items, lastSelected, setSelectedEvent, initialSelection }
     }
 })
 </script>