@dataloop-ai/components 0.17.116 → 0.17.118

package/package.json

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

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

@@ -167,7 +167,11 @@ export default defineComponent({
         maxWidth: { type: String, default: 'auto' },
         height: { type: String, default: 'auto' },
         width: { type: String, default: 'auto' },
-        draggable: Boolean
+        draggable: Boolean,
+        zIndex: {
+            type: [Number, String],
+            default: 'var(--dl-z-index-popup)'
+        }
     },
     emits: [
         'close-button-click',
@@ -254,7 +258,8 @@ export default defineComponent({
                 '--popup-max-width': props.maxWidth,
                 '--popup-max-height': props.maxHeight,
                 '--popup-width': props.width,
-                '--popup-height': props.height
+                '--popup-height': props.height,
+                '--popup-z-index': props.zIndex ?? 'var(--dl-z-index-popup)'
             }
         })
 
@@ -462,7 +467,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .dl-popup {
-    z-index: var(--dl-z-index-popup);
+    z-index: var(--popup-z-index);
     position: fixed !important;
     padding: var(--dl-popup-padding, 10px 0 16px 0);
     border: 1px solid var(--dl-color-separator);

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

@@ -90,6 +90,10 @@ export default defineComponent({
         draggable: {
             type: Boolean,
             default: false
+        },
+        zIndex: {
+            type: [Number, String],
+            default: 'var(--dl-z-index-dialog)'
         }
     },
     emits: ['update:modelValue', 'hide', 'show'],
@@ -131,7 +135,9 @@ export default defineComponent({
                     typeof this.width === 'string'
                         ? parseInt(this.width)
                         : this.width / 2
-                }px`
+                }px`,
+                '--dialog-z-index':
+                    `${this.zIndex}` ?? 'var(--dl-z-index-dialog)'
             }
         },
         iconStyles(): Record<string, string> {
@@ -223,7 +229,7 @@ export default defineComponent({
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: var(--dl-z-index-dialog);
+    z-index: var(--dialog-z-index);
     overflow-x: hidden;
     overflow-y: hidden;
     text-align: start;
@@ -240,7 +246,7 @@ export default defineComponent({
     left: 0;
     background-color: var(--dl-backdrop-color);
     z-index: var(
-        --dl-z-index-dialog
+        --dialog-z-index
     ); // todo: check if this should be overlay instead.
 }
 
@@ -253,7 +259,7 @@ export default defineComponent({
     border-radius: 2px;
     display: flex;
     flex-direction: column;
-    z-index: var(--dl-z-index-dialog);
+    z-index: var(--dialog-z-index);
 
     &--fullscreen {
         margin: 0;

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

@@ -198,6 +198,7 @@
                             {{ computedAllItemsLabel }}
                         </template>
                     </dl-select-option>
+
                     <!-- Virtual scroll -->
                     <dl-virtual-scroll
                         v-if="optionsCount > MAX_ITEMS_PER_LIST"
@@ -249,48 +250,47 @@
                             </template>
                         </dl-select-option>
                     </dl-virtual-scroll>
-
                     <!-- Else normal list -->
-                    <dl-select-option
-                        v-for="(option, optionIndex) in options"
-                        v-else
-                        :key="getKeyForOption(option)"
-                        clickable
-                        :multiselect="multiselect"
-                        :class="{
-                            selected:
-                                option === selectedOption && highlightSelected
-                        }"
-                        :style="
-                            optionIndex === highlightedIndex
-                                ? 'background-color: var(--dl-color-fill)'
-                                : ''
-                        "
-                        :with-wave="withWave"
-                        :model-value="modelValue"
-                        :value="getOptionValue(option)"
-                        :highlight-selected="highlightSelected"
-                        :count="getOptionCount(option)"
-                        :children="getOptionChildren(option)"
-                        :capitalized="capitalizedOptions"
-                        @update:model-value="handleModelValueUpdate"
-                        @click="selectOption(option)"
-                        @selected="handleSelected"
-                        @deselected="handleDeselected"
-                        @depth-change="handleDepthChange"
-                    >
-                        <slot
-                            v-if="hasOptionSlot"
-                            :opt="option"
-                            name="option"
-                        />
-                        <template v-else>
-                            <span
-                                class="inner-option"
-                                v-html="getOptionHtml(option)"
-                            />
-                        </template>
-                    </dl-select-option>
+                    <div v-else>
+                        <dl-select-option
+                            v-for="(option, optionIndex) in options"
+                            :key="getKeyForOption(option)"
+                            clickable
+                            :multiselect="multiselect"
+                            :class="{
+                                selected:
+                                    option === selectedOption &&
+                                    highlightSelected
+                            }"
+                            :style="
+                                optionIndex === highlightedIndex
+                                    ? 'background-color: var(--dl-color-fill)'
+                                    : ''
+                            "
+                            :with-wave="withWave"
+                            :model-value="modelValue"
+                            :value="getOptionValue(option)"
+                            :highlight-selected="highlightSelected"
+                            :count="getOptionCount(option)"
+                            :children="getOptionChildren(option)"
+                            :capitalized="capitalizedOptions"
+                            @update:model-value="handleModelValueUpdate"
+                            @click="selectOption(option)"
+                            @selected="handleSelected"
+                            @deselected="handleDeselected"
+                            @depth-change="handleDepthChange"
+                        >
+                            <slot
+                                :opt="option"
+                                name="option"
+                            >
+                                <span
+                                    class="inner-option"
+                                    v-html="getOptionHtml(option)"
+                                />
+                            </slot>
+                        </dl-select-option>
+                    </div>
                     <dl-list-item v-if="hasAfterOptions && !noOptions">
                         <dl-item-section>
                             <slot name="after-options" />
@@ -793,7 +793,8 @@ export default defineComponent({
                     : this.options[this.selectedIndex]
 
             if (this.search) {
-                (this.$refs.searchInput as HTMLInputElement).value =
+                const searchInput = this.$refs.searchInput as HTMLInputElement
+                searchInput.value =
                     typeof selectedOption === 'string'
                         ? selectedOption
                         : (selectedOption as Record<string, any>)?.label
@@ -817,7 +818,8 @@ export default defineComponent({
                     (e.target as HTMLInputElement).value.trim() === ''
 
                 this.$nextTick(() => {
-                    (this.$refs.menu as any)?.updatePosition()
+                    const menu = this.$refs.menu as any
+                    menu?.updatePosition()
                 })
             }
             const searchValue = (e.target as HTMLInputElement).value
@@ -825,14 +827,18 @@ export default defineComponent({
             this.$emit('search-input', searchValue)
         },
         getOptionHtml(option: DlSelectOptionType) {
-            return `<span>${(this.capitalizedOptions
-                ? typeof this.getOptionLabel(option) === 'string' &&
-                  this.getOptionLabel(option).toLowerCase()
-                : this.getOptionLabel(option)
-            ).replace(
+            let label = `${this.getOptionLabel(option)}`
+            if (this.capitalizedOptions) {
+                label = label.toLowerCase()
+            }
+
+            const highlightedHtml = label.replace(
                 this.searchInputValue,
                 `<span style="background: var(--dl-color-warning)">${this.searchInputValue}</span>`
-            )}</span>`
+            )
+            const html = `<span>${highlightedHtml}</span>`
+
+            return html
         },
         handleSearchBlur(e: Event): void {
             if (this.search) {

package/src/components/essential/DlMenu/DlMenu.vue

@@ -145,6 +145,10 @@ export default defineComponent({
         arrowNavItems: {
             type: [String, Array, Object],
             default: () => [] as any[]
+        },
+        zIndex: {
+            type: [Number, String],
+            default: 'var(--dl-z-index-menu)'
         }
     },
 
@@ -432,7 +436,13 @@ export default defineComponent({
             portalEl: isVue2 ? '[data-test-id="portal"]' : portalEl,
             portalIsActive,
             classes: 'dl-menu dl-position-engine scroll' + classes.value,
-            styles: [attrs.style, transitionStyle.value] as any,
+            styles: [
+                attrs.style,
+                transitionStyle.value,
+                {
+                    '--menu-z-index': props.zIndex ?? 'var(--dl-z-index-menu)'
+                }
+            ] as any,
             selectedItem,
             highlightedIndex
         }
@@ -457,7 +467,7 @@ export default defineComponent({
     }
     outline: 0;
     max-height: 65vh;
-    z-index: var(--dl-z-index-menu);
+    z-index: var(--menu-z-index);
 
     &--square {
         border-radius: 0;

package/src/demos/DlSelectDemo.vue

@@ -216,7 +216,7 @@
         </dl-select>
         With tooltip
         <dl-select
-            v-model="selectedOption"
+            v-model="select2"
             title="With tooltip"
             :tooltip="'Test Me'"
             :options="[
@@ -251,7 +251,7 @@
         </dl-select>
         Small size
         <dl-select
-            v-model="selectedOption"
+            v-model="select3"
             :size="'s'"
             :options="[
                 {
@@ -285,7 +285,7 @@
         </dl-select>
         Small size with tooltip
         <dl-select
-            v-model="selectedOption"
+            v-model="select4"
             :size="'s'"
             title="test"
             tooltip="test me"
@@ -322,7 +322,7 @@
 
         Select with max-height
         <dl-select
-            v-model="selectedOption"
+            v-model="select5"
             :size="'s'"
             title="test"
             dropdown-max-height="50px"
@@ -484,6 +484,10 @@ export default defineComponent({
                 bgColor: 'dl-color-error',
                 textColor: 'dl-color-white'
             },
+            select2: null,
+            select3: null,
+            select4: null,
+            select5: null,
             statusOption: {
                 label: 'Status 1',
                 value: 1,