@dataloop-ai/components 0.19.108 → 0.19.109

package/package.json

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

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

@@ -235,6 +235,7 @@
                             :children="getOptionChildren(item)"
                             :capitalized="capitalizedOptions"
                             :readonly="isReadonlyOption(item)"
+                            :is-expanded="item.expanded"
                             @update:model-value="handleModelValueUpdate"
                             @click="selectOption(item)"
                             @selected="handleSelected"
@@ -283,6 +284,7 @@
                             :children="getOptionChildren(option)"
                             :capitalized="capitalizedOptions"
                             :readonly="isReadonlyOption(option)"
+                            :is-expanded="option.expanded"
                             @update:model-value="handleModelValueUpdate"
                             @click="selectOption(option)"
                             @selected="handleSelected"

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

@@ -98,6 +98,7 @@
                     :with-wave="withWave"
                     :capitalized="capitalized"
                     :readonly="isReadonlyOption(child)"
+                    :is-expanded="isExpanded"
                     @update:model-value="handleCheckboxUpdate"
                     @selected="handleSingleSelect"
                     @deselected="handleSingleDeselect"
@@ -148,7 +149,11 @@ export default defineComponent({
         depth: { type: Number, default: 0 },
         label: { type: String, default: null },
         capitalized: { type: Boolean, default: false },
-        readonly: { type: Boolean, default: false }
+        readonly: { type: Boolean, default: false },
+        isExpanded: {
+            type: Boolean,
+            default: false
+        }
     },
     emits: [
         'update:model-value',
@@ -159,7 +164,7 @@ export default defineComponent({
     ],
     data() {
         return {
-            showChildren: !!this.readonly,
+            showChildren: this.isExpanded,
             componentId: v4(),
             uuid: `dl-select-option-${v4()}`
         }

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

@@ -1,5 +1,7 @@
 export interface DlSelectOption {
     label: string
     value: any
+    expanded?: boolean
     children?: DlSelectOption[]
+    readonly?: boolean
 }

package/src/demos/DlSelectDemo.vue

@@ -555,6 +555,21 @@
                 </div>
             </template>
         </dl-select>
+
+        Select with multiselect auto expanded
+        <dl-select
+            v-model="selectedWithChildrenAndReadonly"
+            :options="treeOptionsExpanded"
+            multiselect
+            style="margin-bottom: 150px"
+        >
+            <template #option="scope">
+                <div style="padding: 5px 0px">
+                    <div>{{ scope.opt.label }}</div>
+                    <div>{{ scope.opt.subLabel }}</div>
+                </div>
+            </template>
+        </dl-select>
     </div>
 </template>
 
@@ -719,6 +734,42 @@ const treeOptionsWithReadonly = [
     }
 ]
 
+const treeOptionsExpanded: DlSelectOptionType[] = [
+    {
+        label: 'Readonly option with children & readonly child',
+        value: 'r6',
+        expanded: true,
+        children: [
+            { label: 'child 1', value: 'c6' },
+            { label: 'child 2', value: 'c7' },
+            {
+                label: 'child 3',
+                value: 'c8',
+                expanded: true,
+                children: [
+                    { label: 'child 4', value: 'c9' },
+                    {
+                        label: 'child 5',
+                        value: 'c10441',
+                        expanded: true,
+                        children: [
+                            {
+                                label: 'child 6',
+                                value: 'c8312',
+                                expanded: true,
+                                children: [
+                                    { label: 'child 7', value: 'c923' },
+                                    { label: 'child 8', value: 'c101' }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+]
+
 export default defineComponent({
     components: { DlSelect, DlIcon, DlChip, DlBadge },
     data() {
@@ -742,6 +793,7 @@ export default defineComponent({
             searchOptions: defaultOptions,
             treeOptions,
             treeOptionsWithReadonly,
+            treeOptionsExpanded,
             selectedBySearch: undefined,
             selectedByFilteringSearch: [],
             selectedWithEmitValue: 'c1',