@dataloop-ai/components 0.20.9 → 0.20.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.9",
+  "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/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>