@dataloop-ai/components 0.20.172 → 0.20.173

package/package.json

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

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

@@ -101,9 +101,7 @@
                         v-if="multiselect && (!searchable || !isExpanded)"
                         class="root-container--placeholder"
                     >
-                        <template
-                            v-if="allFiltersModel || isAllOptionsSelected"
-                        >
+                        <template v-if="allFiltersModel">
                             <dl-ellipsis :text="computedAllItemsLabel" />
                         </template>
                         <template v-else>
@@ -198,6 +196,7 @@
                         :highlight-selected="highlightSelected"
                         :filter-term="searchTerm"
                         :fit-content="fitContent"
+                        :uniform-width="uniformWidth"
                         total-items
                         @update:model-value="selectAll"
                         @depth-change="handleDepthChange"
@@ -243,6 +242,7 @@
                             :indentation="indentation"
                             :is-expanded="item.expanded"
                             :tooltip="getOptionTooltip(item)"
+                            :uniform-width="uniformWidth"
                             @update:model-value="handleModelValueUpdate"
                             @click="selectOption(item)"
                             @selected="handleSelected"
@@ -294,6 +294,7 @@
                             :indentation="indentation"
                             :is-expanded="isExpandedOption(option)"
                             :tooltip="getOptionTooltip(option)"
+                            :uniform-width="uniformWidth"
                             @update:model-value="handleModelValueUpdate"
                             @click="selectOption(option)"
                             @selected="handleSelected"
@@ -428,7 +429,6 @@ export default defineComponent({
         alignRight: { type: Boolean, default: false },
         allItemsOption: { type: Boolean, default: false },
         allItemsOptionLabel: { type: String, default: null },
-        isAllOptionsSelected: { type: Boolean, default: false },
         placeholder: { type: String, default: null },
         removableSelection: { type: Boolean, default: false },
         width: { type: String, default: '100%' },
@@ -680,6 +680,35 @@ export default defineComponent({
         optionsCount(): number {
             return this.options?.length ?? 0
         },
+        maxDepth(): number {
+            const hasChildren = (option: DlSelectOptionType) =>
+                typeof option === 'object' && option?.children?.length > 0
+
+            const getMaxDepth = (
+                options: DlSelectOptionType[],
+                depth: number = 0
+            ): number => {
+                let max = depth
+                for (const option of options) {
+                    if (hasChildren(option)) {
+                        const childDepth = getMaxDepth(
+                            (option as any).children,
+                            depth + 1
+                        )
+                        if (childDepth > max) {
+                            max = childDepth
+                        }
+                    }
+                }
+                return max
+            }
+            return getMaxDepth(this.options)
+        },
+        uniformWidth(): string {
+            return this.maxDepth === 0
+                ? '100%'
+                : `calc(100% + ${(this.maxDepth - 1) * this.indentation}px)`
+        },
         identifierClass(): string {
             return `dl-select-${this.title}-${
                 this.placeholder ?? ''

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

@@ -3,7 +3,9 @@
         <div
             v-if="readonly"
             :class="[{ 'readonly-option': true }, { capitalized }]"
-            :style="`padding-left: ${10 + depth * indentation}px;`"
+            :style="`padding-left: ${
+                10 + depth * indentation
+            }px; width: ${computedWidth};`"
         >
             <dl-tooltip v-if="tooltip">
                 {{ tooltip }}
@@ -18,10 +20,10 @@
             :class="{ highlighted: highlightSelected && isSelected }"
             :with-wave="withWave"
             clickable
-            style="width: 100%"
+            :style="`width: ${computedWidth}`"
             @click="handleClick"
         >
-            <dl-item-section :color="color" style="width: 100%">
+            <dl-item-section :color="color">
                 <span
                     v-if="multiselect"
                     class="multiselect-option"
@@ -98,6 +100,7 @@
                     :filter-term="filterTerm"
                     :fit-content="fitContent"
                     :tooltip="tooltip"
+                    :uniform-width="uniformWidth"
                     @update:model-value="handleCheckboxUpdate"
                     @selected="handleSingleSelect($event, true)"
                     @deselected="handleSingleDeselect"
@@ -194,7 +197,8 @@ export default defineComponent({
             type: Boolean,
             default: true
         },
-        tooltip: { type: String, default: null }
+        tooltip: { type: String, default: null },
+        uniformWidth: { type: String, default: null }
     },
     emits: [
         'update:model-value',
@@ -238,6 +242,12 @@ export default defineComponent({
         },
         displayLabel(): string {
             return String(this.label ? this.label : this.value)
+        },
+        computedWidth(): string {
+            if (this.uniformWidth) {
+                return this.uniformWidth
+            }
+            return 'max-content; min-width: 100%'
         }
     },
     methods: {

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

@@ -38,22 +38,25 @@ const isValueSelected = (
 export const getLabelOfSelectedOption = (
     selected: string[] | string,
     options: DlSelectOptionType[] | string[]
-): string | undefined => {
-    for (const option of options) {
-        if (
-            typeof option === 'string' &&
-            typeof selected === 'string' &&
-            option === selected
-        ) {
-            return String(option)
-        } else if (
-            typeof option === 'object' &&
-            isValueSelected(option, selected)
-        ) {
-            return String(option.label)
+): string => {
+    const selectedValue = Array.isArray(selected) ? selected[0] : selected
+
+    const findLabel = (opts: DlSelectOptionType[]): string | undefined => {
+        for (const opt of opts) {
+            const optValue = typeof opt === 'object' ? opt.value : opt
+            if (optValue === selectedValue) {
+                return typeof opt === 'object' ? String(opt.label) : String(opt)
+            }
+
+            if (typeof opt === 'object' && opt?.children?.length) {
+                const found = findLabel(opt.children as DlSelectOptionType[])
+                if (found) return found
+            }
         }
+        return undefined
     }
-    return '1 Option Selected'
+
+    return findLabel(options as DlSelectOptionType[]) ?? '1 Option Selected'
 }
 
 export const getIconSize = (size: TInputSizes) => ICON_SIZES[size] ?? '14px'

package/src/components/compound/DlTable/hooks/tableColumnSelection.ts

@@ -129,7 +129,7 @@ export function useTableColumnSelection(
             ? props.tableColspan
             : computedCols.value.length +
                   (hasSelectionMode.value === true ? 1 : 0) +
-                  (hasDraggableRows.value === true ? 1 : 0) +
+                  1 +
                   (props.isTreeTable ? 1 : 0)
     })