@dataloop-ai/components 0.20.67 → 0.20.69

package/package.json

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

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

@@ -158,7 +158,7 @@
                         <slot name="before-options" />
                     </dl-item-section>
                 </dl-list-item>
-                <dl-list-item v-if="noOptions">
+                <dl-list-item v-if="noOptions" :style="computedNoOptionsStyle">
                     <dl-item-section color="dl-color-medium">
                         <slot name="no-options"> No options </slot>
                     </dl-item-section>
@@ -225,6 +225,7 @@
                             :children="getOptionChildren(item)"
                             :capitalized="capitalizedOptions"
                             :readonly="isReadonlyOption(item)"
+                            :indentation="indentation"
                             :is-expanded="item.expanded"
                             @update:model-value="handleModelValueUpdate"
                             @click="selectOption(item)"
@@ -274,6 +275,7 @@
                             :children="getOptionChildren(option)"
                             :capitalized="capitalizedOptions"
                             :readonly="isReadonlyOption(option)"
+                            :indentation="indentation"
                             :is-expanded="isExpandedOption(option)"
                             @update:model-value="handleModelValueUpdate"
                             @click="selectOption(option)"
@@ -281,6 +283,9 @@
                             @deselected="handleDeselected"
                             @depth-change="handleDepthChange"
                         >
+                            <template #option="scope">
+                                <slot name="option" v-bind="scope" />
+                            </template>
                             <slot :opt="option" name="option">
                                 <span
                                     v-if="fitContent"
@@ -393,6 +398,7 @@ export default defineComponent({
         type: { type: String, default: 'text' },
         multiselect: { type: Boolean, default: false },
         dropdownIcon: { type: String, default: 'icon-dl-down-chevron' },
+        indentation: { type: Number, default: 30 },
         topMessage: { type: String, default: '' },
         redAsterisk: { type: Boolean, default: false },
         infoMessage: { type: String, default: '' },
@@ -464,6 +470,7 @@ export default defineComponent({
         const searchTerm = ref('')
         const searchInputValue = ref('')
         const MAX_ITEMS_PER_LIST = 100 // HARDCODED - max items per list before virtual scroll
+        const initialMenuWidth = ref(0)
 
         const setHighlightedIndex = (value: any) => {
             highlightedIndex.value = value
@@ -496,7 +503,8 @@ export default defineComponent({
             searchTerm, // todo: merge this sometime
             searchInputValue,
             hasSlotByName,
-            hasSlotContent
+            hasSlotContent,
+            initialMenuWidth
         }
     },
     computed: {
@@ -582,6 +590,9 @@ export default defineComponent({
             }
             return style
         },
+        computedNoOptionsStyle(): string {
+            return `min-width: ${this.initialMenuWidth}px`
+        },
         optionsCount(): number {
             return this.options?.length ?? 0
         },
@@ -805,6 +816,13 @@ export default defineComponent({
                     const inputRef = this.$refs.searchInput as HTMLInputElement
                     this.$nextTick(() => {
                         inputRef?.focus({})
+                        setTimeout(() => {
+                            const menuRef = this.$refs.menu as {
+                                innerRef?: HTMLElement
+                            }
+                            this.initialMenuWidth =
+                                menuRef?.innerRef?.clientWidth ?? 0
+                        }, 100)
                     })
                 }
             }

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

@@ -3,7 +3,7 @@
         <div
             v-if="readonly"
             :class="[{ 'readonly-option': true }, { capitalized }]"
-            :style="`padding-left: ${10 + depth * 30}px;`"
+            :style="`padding-left: ${10 + depth * indentation}px;`"
         >
             <slot>
                 {{ label ? (capitalized ? label.toLowerCase() : label) : null }}
@@ -22,7 +22,7 @@
                 <span
                     v-if="multiselect"
                     class="multiselect-option"
-                    :style="`padding-left: ${depth * 30}px;`"
+                    :style="`padding-left: ${depth * indentation}px;`"
                 >
                     <span v-if="hasChildren">
                         <dl-icon
@@ -73,7 +73,7 @@
                     :ref="`option-${getValue(child)}`"
                     :multiselect="multiselect"
                     :select-children="selectChildren"
-                    :count="count"
+                    :count="getOptionCount(child)"
                     clickable
                     :model-value="modelValue"
                     :value="getValue(child)"
@@ -84,6 +84,7 @@
                     :with-wave="withWave"
                     :capitalized="capitalized"
                     :readonly="isReadonlyOption(child)"
+                    :indentation="indentation"
                     :is-expanded="isExpanded"
                     :filter-term="filterTerm"
                     :fit-content="fitContent"
@@ -92,17 +93,22 @@
                     @deselected="handleSingleDeselect"
                     @depth-change="$emit('depth-change')"
                 >
-                    <span
-                        v-if="fitContent"
-                        class="inner-option"
-                        v-html="getOptionHtml(child)"
-                    />
-                    <dl-ellipsis v-else>
+                    <template #option="scope">
+                        <slot name="option" v-bind="scope" />
+                    </template>
+                    <slot :opt="child" name="option">
                         <span
+                            v-if="fitContent"
                             class="inner-option"
                             v-html="getOptionHtml(child)"
                         />
-                    </dl-ellipsis>
+                        <dl-ellipsis v-else>
+                            <span
+                                class="inner-option"
+                                v-html="getOptionHtml(child)"
+                            />
+                        </dl-ellipsis>
+                    </slot>
                 </dl-select-option>
             </div>
         </div>
@@ -160,6 +166,7 @@ export default defineComponent({
         label: { type: String, default: null },
         capitalized: { type: Boolean, default: false },
         readonly: { type: Boolean, default: false },
+        indentation: { type: Number, default: 30 },
         isExpanded: {
             type: Boolean,
             default: false
@@ -217,9 +224,6 @@ export default defineComponent({
         hasChildren(): boolean {
             return this.children && this.children?.length > 0
         },
-        indent(): { padding: string } {
-            return { padding: `0 ${this.depth * 30}px 0 0` }
-        },
         displayLabel(): string {
             return String(this.label ? this.label : this.value)
         }
@@ -341,6 +345,9 @@ export default defineComponent({
         toggleChildren() {
             this.showChildren = !this.showChildren
         },
+        getOptionCount(option: any) {
+            return option?.count ?? null
+        },
         getChildren(option: any) {
             return typeof option === 'object' ? option.children : null
         },

package/src/components/essential/DlIcon/DlIcon.vue

@@ -155,13 +155,15 @@ export default defineComponent({
 
         const loadSvg = () => {
             return new Promise<void>((resolve, reject) => {
+                const loadedIcon = icon.value
+
                 const svgElement = new Image()
                 svgElement.setAttribute('height', size.value)
                 svgElement.setAttribute('width', size.value)
 
                 svgElement.onload = () => {
                     // In order to handle events and loading that occur mid unmounting.
-                    if (isDestroyed.value) {
+                    if (isDestroyed.value || loadedIcon !== icon.value) {
                         return
                     }
                     const container = svgIcon.value as HTMLDivElement