@dataloop-ai/components 0.20.172 → 0.20.174

package/package.json

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

package/src/components/basic/DlAlert/DlAlert.vue

@@ -33,7 +33,7 @@
                 data-test="close-button-icon"
                 icon="icon-dl-close"
                 color="dl-color-darker"
-                size="12px"
+                size="16px"
                 @click="handleClose"
             />
         </div>

package/src/components/basic/DlButton/utils.ts

@@ -2,6 +2,7 @@ import { getColor } from '../../../utils'
 import { getLighterGradient } from '../../../utils/getLighterGradient'
 
 export enum ButtonSizes {
+    xs = 'xs',
     s = 's',
     m = 'm',
     l = 'l',
@@ -23,6 +24,7 @@ const iconPaddings: { [key: string]: string } = {
 }
 
 const iconSizes: { [key: string]: string } = {
+    xs: '7px',
     s: '12px',
     m: '16px',
     l: '18px',

package/src/components/basic/DlChip/DlChip.vue

@@ -37,7 +37,7 @@
         >
             <dl-icon
                 class="dl-chip-remove-icon"
-                size="7px"
+                size="12px"
                 icon="icon-dl-close"
             /></span>
     </div>

package/src/components/basic/DlPopup/components/PopupHeader.vue

@@ -1,16 +1,7 @@
 <template>
-    <div
-        class="popup-header"
-        :style="cssVars"
-    >
-        <slot
-            v-if="hasHeaderSlot"
-            name="header"
-        />
-        <div
-            v-else
-            class="header-content"
-        >
+    <div class="popup-header" :style="cssVars">
+        <slot v-if="hasHeaderSlot" name="header" />
+        <div v-else class="header-content">
             <span class="title">
                 <dl-ellipsis :text="title" />
                 <span class="info-icon">
@@ -30,15 +21,12 @@
                 class="close-button"
                 @click="handleClick"
             >
-                <slot
-                    v-if="hasCloseButtonSlot"
-                    name="close-button"
-                />
+                <slot v-if="hasCloseButtonSlot" name="close-button" />
                 <dl-icon
                     v-else
                     color="dl-color-darker"
                     icon="icon-dl-close"
-                    size="12px"
+                    size="16px"
                 />
             </span>
             <span class="subtitle">

package/src/components/compound/DlDialogBox/components/DlDialogBoxHeader.vue

@@ -30,6 +30,7 @@
             "
             class="close-button"
             icon="icon-dl-close"
+            size="xl"
             flat
             text-color="dl-color-darker"
             @click="$emit('onClose')"

package/src/components/compound/DlInput/DlInput.vue

@@ -1070,8 +1070,8 @@ export default defineComponent({
             return !!this.$slots.action && !this.isSmall
         },
         clearIconSize(): string {
-            if (this.isSmall) return '7px'
-            return 's'
+            if (this.isSmall) return 'xs'
+            return 'm'
         },
         passShowIcon(): string {
             return this.showPass ? 'icon-dl-hide' : 'icon-dl-show'
@@ -1643,4 +1643,3 @@ export default defineComponent({
     }
 }
 </style>
-

package/src/components/compound/DlInput/DlTextInput.vue

@@ -103,7 +103,7 @@
                                 <dl-button
                                     ref="input-clear-button"
                                     icon="icon-dl-close"
-                                    size="s"
+                                    size="m"
                                     text-color="dl-color-darker"
                                     flat
                                     fluid

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -44,7 +44,7 @@
                     >
                         <dl-button
                             icon="icon-dl-close"
-                            size="12px"
+                            size="m"
                             flat
                             :disabled="disabled"
                             @mousedown="onClear"

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>
@@ -131,7 +129,7 @@
                         v-if="clearable && hasSelection"
                         class=".dl-select__clear-button"
                         icon="icon-dl-close"
-                        :size="withoutBorders ? '10px' : '12px'"
+                        :size="withoutBorders ? '10px' : '16px'"
                         style="margin-right: 3px; cursor: pointer"
                         @click.prevent.stop="clearSelection"
                     />
@@ -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/DlStepper/components/DlStepperHeader.vue

@@ -1,10 +1,7 @@
 <template>
     <div class="dl-stepper-header">
         <slot>
-            <dl-typography
-                size="h2"
-                variant="h2"
-            >
+            <dl-typography size="h2" variant="h2">
                 {{ headerTitle }}
             </dl-typography>
         </slot>
@@ -13,6 +10,7 @@
             text-color="dl-color-darker"
             flat
             icon="icon-dl-close"
+            size="xl"
             @click="$emit('close')"
         />
     </div>

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)
     })
 

package/src/components/essential/DlTextArea/DlTextArea.vue

@@ -10,15 +10,9 @@
                 v-show="!!title.length || !!tooltip.length"
                 class="dl-textarea__title-container"
             >
-                <label
-                    v-show="!!title.length"
-                    class="dl-textarea__title"
-                >
+                <label v-show="!!title.length" class="dl-textarea__title">
                     {{ title }}
-                    <span
-                        v-show="required"
-                        :class="asteriskClasses"
-                    > *</span>
+                    <span v-show="required" :class="asteriskClasses"> *</span>
                     {{ !required && optional ? ' (Optional)' : null }}
                 </label>
                 <span v-show="!!tooltip.length">
@@ -42,14 +36,11 @@
                     :value="topMessage"
                 />
             </div>
-            <span
-                v-show="showClearButton"
-                class="dl-textarea__clear-button"
-            >
+            <span v-show="showClearButton" class="dl-textarea__clear-button">
                 <dl-button
                     ref="input-clear-button"
                     icon="icon-dl-close"
-                    size="s"
+                    size="m"
                     text-color="dl-color-darker"
                     flat
                     fluid

package/src/demos/DlDatasetBrowserLayoutDemo/DlDatasetBrowserLayoutDemo.vue

@@ -3,13 +3,11 @@
         <dl-button @click="isOpenedDatasetBrowserModal = true">
             Dataset Browser
         </dl-button>
-        <div
-            v-if="isOpenedDatasetBrowserModal"
-            class="fullscreen-template"
-        >
+        <div v-if="isOpenedDatasetBrowserModal" class="fullscreen-template">
             <div class="fullscreen-template__close">
                 <dl-button
                     icon="icon-dl-close"
+                    size="xl"
                     flat
                     @click="isOpenedDatasetBrowserModal = false"
                 />

package/src/demos/DlPageLayoutDemo/DlPageLayoutDemo.vue

@@ -3,13 +3,11 @@
         <dl-button @click="isOpenPageLayoutModal = true">
             Page Layout
         </dl-button>
-        <div
-            v-if="isOpenPageLayoutModal"
-            class="fullscreen-template"
-        >
+        <div v-if="isOpenPageLayoutModal" class="fullscreen-template">
             <div class="fullscreen-template__close">
                 <dl-button
                     icon="icon-dl-close"
+                    size="xl"
                     flat
                     @click="isOpenPageLayoutModal = false"
                 />
@@ -45,9 +43,7 @@
                                 label="Switch to Basic Browser"
                             />
                         </template>
-                        <template #subtitle>
-                            testestse
-                        </template>
+                        <template #subtitle> testestse </template>
                     </dl-page-layout-header>
                 </template>
                 <div>This is a body</div>

package/src/demos/DlStepperDemo/steps/InstructionStep.vue

@@ -16,10 +16,7 @@
                 label="Error"
                 @click="$emit('error-click')"
             />
-            <dl-button
-                label="Reset"
-                @click="$emit('reset-click')"
-            />
+            <dl-button label="Reset" @click="$emit('reset-click')" />
         </div>
         <div class="inputs-container">
             <dl-select
@@ -40,12 +37,16 @@
                 to create a new recipe.
             </dl-typography>
             <span>
-                <dl-typography color="dl-color-medium">2. Instruction Document</dl-typography>
+                <dl-typography color="dl-color-medium"
+                >2. Instruction Document</dl-typography
+                >
                 <div style="height: 10px" />
                 <dl-typography>Lorem Ipsum Dolot Sit Amat.Pdf</dl-typography>
             </span>
             <span>
-                <dl-typography color="dl-color-medium">Instruction Range</dl-typography>
+                <dl-typography color="dl-color-medium"
+                >Instruction Range</dl-typography
+                >
                 <div style="height: 4px" />
                 <dl-option-group
                     v-model="range"
@@ -57,7 +58,9 @@
                 />
             </span>
             <span>
-                <dl-typography color="dl-color-medium">Tools Settings (Optional)</dl-typography>
+                <dl-typography color="dl-color-medium"
+                >Tools Settings (Optional)</dl-typography
+                >
                 <div style="height: 10px" />
                 <dl-checkbox
                     v-model="pixel"
@@ -66,31 +69,26 @@
                 />
             </span>
             <span>
-                <dl-typography color="dl-color-medium">Labeling Task Actions</dl-typography>
+                <dl-typography color="dl-color-medium"
+                >Labeling Task Actions</dl-typography
+                >
                 <div style="height: 10px" />
                 <dl-checkbox
                     v-model="auto"
                     padding="5px 0px"
                     label="Auto apply status on classification tool"
                 />
-                <div
-                    class="labeling-option"
-                    style="margin-top: 4px"
-                >
+                <div class="labeling-option" style="margin-top: 4px">
                     <dl-radio
                         v-model="labeling"
                         label="Complete"
                         padding="5px 0px"
                         value="complete"
                     />
-                    <dl-typography
-                        size="10px"
-                        color="dl-color-lighter"
-                    >(Default)</dl-typography>
-                    <dl-icon
-                        icon="icon-dl-close"
-                        size="8px"
-                    />
+                    <dl-typography size="10px" color="dl-color-lighter"
+                    >(Default)</dl-typography
+                    >
+                    <dl-icon icon="icon-dl-close" size="12px" />
                 </div>
                 <div class="labeling-option">
                     <dl-radio
@@ -99,10 +97,7 @@
                         padding="5px 0px"
                         value="disable"
                     />
-                    <dl-icon
-                        icon="icon-dl-close"
-                        size="8px"
-                    />
+                    <dl-icon icon="icon-dl-close" size="12px" />
                 </div>
             </span>
             <dl-button

package/src/demos/DlStudioLayoutDemo/DlStudioLayoutDemo.vue

@@ -8,6 +8,7 @@
                 <dl-button
                     flat
                     icon="icon-dl-close"
+                    size="xl"
                     @click="isOpenedStudioModal = false"
                 />
             </div>