@dataloop-ai/components 0.18.134 → 0.18.136

package/package.json

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

package/src/components/compound/DlOptionGroup/DlOptionGroup.vue

@@ -128,7 +128,8 @@ export default defineComponent({
                         : 'flex-end',
                 '--option-group-width':
                     this.leftLabel && !this.inline ? '100%' : 'auto',
-                '--option-group-max-width': this.maxWidth
+                '--option-group-max-width': this.maxWidth,
+                '--option-group-gap': this.isInMenu ? '0px' : '10px'
             }
         }
     },
@@ -175,7 +176,7 @@ export default defineComponent({
 }
 .option-group-wrapper.column {
     flex-direction: column;
-    gap: 10px;
+    gap: var(--option-group-gap);
 }
 
 .option {

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

@@ -232,6 +232,7 @@
                             :count="getOptionCount(item)"
                             :children="getOptionChildren(item)"
                             :capitalized="capitalizedOptions"
+                            :readonly="isReadonlyOption(item)"
                             @update:model-value="handleModelValueUpdate"
                             @click="selectOption(item)"
                             @selected="handleSelected"
@@ -272,6 +273,7 @@
                             :count="getOptionCount(option)"
                             :children="getOptionChildren(option)"
                             :capitalized="capitalizedOptions"
+                            :readonly="isReadonlyOption(option)"
                             @update:model-value="handleModelValueUpdate"
                             @click="selectOption(option)"
                             @selected="handleSelected"
@@ -751,6 +753,9 @@ export default defineComponent({
                 ? option?.children
                 : null
         },
+        isReadonlyOption(option: any) {
+            return !!option?.readonly
+        },
         getOptionCount(option: any) {
             return option?.count ?? null
         },
@@ -791,7 +796,7 @@ export default defineComponent({
             this.closeMenu()
         },
         selectOption(selectedOption: DlSelectOptionType) {
-            if (this.multiselect) {
+            if (this.multiselect || this.isReadonlyOption(selectedOption)) {
                 return
             }
 

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

@@ -4,7 +4,17 @@
         :class="identifierClass"
         style="width: 100%"
     >
+        <div
+            v-if="readonly"
+            :class="[{ 'readonly-option': true }, { capitalized }]"
+            :style="`padding-left: ${10 + depth * 30}px;`"
+        >
+            <slot>
+                {{ label ? (capitalized ? label.toLowerCase() : label) : null }}
+            </slot>
+        </div>
         <dl-list-item
+            v-else
             class="option"
             :class="{ highlighted: highlightSelected && isSelected }"
             :with-wave="withWave"
@@ -87,6 +97,7 @@
                     :highlight-selected="highlightSelected"
                     :with-wave="withWave"
                     :capitalized="capitalized"
+                    :readonly="isReadonlyOption(child)"
                     @update:model-value="handleCheckboxUpdate"
                     @selected="handleSingleSelect"
                     @deselected="handleSingleDeselect"
@@ -136,7 +147,8 @@ export default defineComponent({
         },
         depth: { type: Number, default: 0 },
         label: { type: String, default: null },
-        capitalized: { type: Boolean, default: false }
+        capitalized: { type: Boolean, default: false },
+        readonly: { type: Boolean, default: false }
     },
     emits: [
         'update:model-value',
@@ -147,7 +159,7 @@ export default defineComponent({
     ],
     data() {
         return {
-            showChildren: false,
+            showChildren: !!this.readonly,
             componentId: v4(),
             uuid: `dl-select-option-${v4()}`
         }
@@ -216,6 +228,9 @@ export default defineComponent({
         },
         getValue(option: any) {
             return typeof option === 'object' ? option.value : null
+        },
+        isReadonlyOption(option: any) {
+            return !!option?.readonly
         }
     }
 })
@@ -269,4 +284,13 @@ export default defineComponent({
 .capitalized .checkbox-label {
     text-transform: capitalize !important;
 }
+
+.readonly-option {
+    height: 28px;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--dl-color-lighter);
+}
 </style>

package/src/demos/DlOptionGroupDemo.vue

@@ -29,17 +29,15 @@
         />
 
         <h1>in menu : The chosen options are {{ switchValue }}</h1>
-        <dl-button
-            label="Menu"
-            @click="$refs.menu.show()"
-        >
+        <dl-button label="Menu">
             <dl-menu
                 ref="menu"
-                fit-container
+                fit-content
             >
                 <dl-option-group
                     v-model="switchValue"
-                    type="checkbox"
+                    left-label
+                    type="switch"
                     :options="options"
                 />
             </dl-menu>

package/src/demos/DlSelectDemo.vue

@@ -177,6 +177,15 @@
             searchable
             capitalized-options
         />
+        Tree options with readonly options
+        <dl-select
+            v-model="selectedWithChildrenAndReadonly"
+            :options="treeOptionsWithReadonly"
+            size="m"
+            multiselect
+            searchable
+            capitalized-options
+        />
         With Fit
         <dl-select
             v-model="selectedWithFit"
@@ -604,6 +613,67 @@ const treeOptions = [
     }
 ]
 
+const treeOptionsWithReadonly = [
+    {
+        label: 'Without children',
+        value: 'r0',
+        readonly: true
+    },
+    {
+        label: 'child 1',
+        value: 'r1'
+    },
+    {
+        label: 'child 2',
+        value: 'r2'
+    },
+    {
+        label: 'child 3',
+        value: 'r3'
+    },
+    {
+        label: 'With children',
+        value: 'r4',
+        readonly: true,
+        children: [
+            { label: 'child 1', value: 'c1' },
+            { label: 'child 2', value: 'c2' },
+            { label: 'child 3', value: 'c3' },
+            { label: 'child 4', value: 'c4' },
+            { label: 'child 5', value: 'c5' }
+        ]
+    },
+    {
+        label: 'With children & readonly child',
+        value: 'r5',
+        children: [
+            { label: 'child 1', value: 'c1' },
+            { label: 'child 2', value: 'c2' },
+            { label: 'child 3', value: 'c3', readonly: true },
+            { label: 'child 4', value: 'c4' },
+            { label: 'child 5', value: 'c5' }
+        ]
+    },
+    {
+        label: 'Readonly option with children & readonly child',
+        value: 'r6',
+        readonly: true,
+        children: [
+            { label: 'child 1', value: 'c6' },
+            { label: 'child 2', value: 'c7' },
+            {
+                label: 'child 3',
+                value: 'c8',
+                readonly: true,
+                children: [
+                    { label: 'child 4', value: 'c9' },
+                    { label: 'child 5', value: 'c10' }
+                ]
+            }
+        ]
+    }
+]
+
 export default defineComponent({
     components: { DlSelect, DlIcon, DlChip, DlBadge },
     data() {
@@ -626,11 +696,13 @@ export default defineComponent({
             },
             searchOptions: defaultOptions,
             treeOptions,
+            treeOptionsWithReadonly,
             selectedBySearch: undefined,
             selectedByFilteringSearch: [],
             selectedWithEmitValue: 'c1',
             selectedWithChildren: [],
             selectedWithChildrenSearch: [],
+            selectedWithChildrenAndReadonly: [],
             selectedWithChildrenCapitalized: [],
             tasksFilter: [],
             showAllOption: true,