@dataloop-ai/components 0.18.0 → 0.18.2

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

@@ -3,7 +3,11 @@
         :id="uuid"
         :style="cssVars"
         class="root-container"
-        :class="{ 'root-container--s': isSmall, [identifierClass]: true }"
+        :class="{
+            'root-container--s': isSmall,
+            [identifierClass]: true,
+            'fit-content': fitContent
+        }"
     >
         <div
             v-show="!!title.length || !!tooltip.length"
@@ -26,6 +30,7 @@
             <span v-show="!!tooltip.length">
                 <dl-icon
                     icon="icon-dl-info"
+                    :inline="false"
                     class="tooltip-icon"
                     size="12px"
                 />
@@ -54,25 +59,23 @@
                 :class="selectClasses"
             >
                 <div
-                    v-show="hasPrepend || search"
+                    v-show="hasPrepend || searchable"
                     :class="[
                         ...adornmentClasses,
                         'adornment-container--pos-left'
                     ]"
                 >
-                    <dl-icon
-                        v-if="search"
-                        icon="icon-dl-search"
-                        :size="iconSize"
-                        color="dl-color-lighter"
-                    />
-                    <slot
-                        v-else
-                        name="prepend"
-                    />
+                    <slot name="prepend">
+                        <dl-icon
+                            v-if="searchable"
+                            icon="icon-dl-search"
+                            :size="iconSize"
+                            color="dl-color-lighter"
+                        />
+                    </slot>
                 </div>
                 <input
-                    v-if="search"
+                    v-if="searchable"
                     ref="searchInput"
                     class="select-search-input"
                     :style="!isExpanded ? 'display: none;' : 'width: 100%;'"
@@ -82,9 +85,15 @@
                     @focus="handleSearchFocus"
                     @blur="handleSearchBlur"
                 >
-                <div v-if="hasSelectedSlot">
+                <dl-tooltip v-if="disabled && disabledTooltip">
+                    {{ disabledTooltip }}
+                </dl-tooltip>
+                <div
+                    v-if="hasSelectedSlot"
+                    style="width: 100%"
+                >
                     <slot
-                        v-if="search ? !isExpanded : true"
+                        v-if="searchable ? !isExpanded : true"
                         :opt="selectedOption"
                         name="selected"
                     />
@@ -92,8 +101,8 @@
                 <template v-if="!hasSelectedSlot">
                     <span
                         v-show="
-                            (multiselect && !search) ||
-                                (multiselect && search && !isExpanded)
+                            (multiselect && !searchable) ||
+                                (multiselect && searchable && !isExpanded)
                         "
                         class="root-container--placeholder"
                     >
@@ -106,8 +115,8 @@
                     </span>
                     <span
                         v-show="
-                            (!multiselect && !search) ||
-                                (!multiselect && search && !isExpanded)
+                            (!multiselect && !searchable) ||
+                                (!multiselect && searchable && !isExpanded)
                         "
                         class="selected-label"
                     >
@@ -118,7 +127,7 @@
                     :class="[
                         ...adornmentClasses,
                         `adornment-container--pos-right${
-                            disableDropdownIconPadding
+                            withoutDropdownIconPadding
                                 ? ' adornment-container--pos-right-without_padding'
                                 : ''
                         }`
@@ -126,6 +135,7 @@
                 >
                     <dl-icon
                         :icon="dropdownIcon"
+                        :color="chevronIconColor"
                         class="expand-icon"
                         :inline="false"
                         :size="withoutBorders ? '12px' : '16px'"
@@ -144,6 +154,7 @@
                 style="border-radius: 0"
                 :disabled="disabled || readonly"
                 :arrow-nav-items="options"
+                :max-height="dropdownMaxHeight"
                 @show="onMenuOpen"
                 @hide="closeMenu"
                 @highlightedIndex="setHighlightedIndex"
@@ -151,7 +162,6 @@
             >
                 <dl-list
                     class="select-list"
-                    :style="dropdownCSSVars"
                     :padding="false"
                 >
                     <dl-list-item v-if="noOptions">
@@ -178,56 +188,101 @@
                         @update:model-value="selectAll"
                         @depth-change="handleDepthChange"
                     >
-                        <slot
-                            v-if="hasAllItemsSlot"
-                            name="all-items"
-                        />
-                        <template v-else>
+                        <slot name="all-items">
                             {{ computedAllItemsLabel }}
-                        </template>
+                        </slot>
                     </dl-select-option>
-                    <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"
+
+                    <!-- Virtual scroll -->
+                    <dl-virtual-scroll
+                        v-if="optionsCount > MAX_ITEMS_PER_LIST"
+                        v-slot="{ item, index }"
+                        :items="filteredOptions"
+                        :virtual-scroll-item-size="28"
+                        :virtual-scroll-sticky-size-start="28"
+                        :virtual-scroll-sticky-size-end="20"
+                        separator
                     >
-                        <slot
-                            v-if="hasOptionSlot"
-                            :opt="option"
-                            name="option"
-                        />
-                        <template v-else>
-                            {{
-                                capitalizedOptions
-                                    ? typeof getOptionLabel(option) ===
-                                        'string' &&
-                                        getOptionLabel(option).toLowerCase()
-                                    : getOptionLabel(option)
-                            }}
-                        </template>
-                    </dl-select-option>
+                        <dl-select-option
+                            :key="getKeyForOption(item)"
+                            clickable
+                            :multiselect="multiselect"
+                            :class="{
+                                selected:
+                                    item === selectedOption && highlightSelected
+                            }"
+                            :style="
+                                index === highlightedIndex
+                                    ? 'background-color: var(--dl-color-fill)'
+                                    : ''
+                            "
+                            :with-wave="withWave"
+                            :model-value="modelValue"
+                            :value="getOptionValue(item)"
+                            :highlight-selected="highlightSelected"
+                            :count="getOptionCount(item)"
+                            :children="getOptionChildren(item)"
+                            :capitalized="capitalizedOptions"
+                            @update:model-value="handleModelValueUpdate"
+                            @click="selectOption(item)"
+                            @selected="handleSelected"
+                            @deselected="handleDeselected"
+                        >
+                            <slot
+                                name="option"
+                                :opt="item"
+                            >
+                                {{
+                                    capitalizedOptions
+                                        ? typeof getOptionLabel(item) ===
+                                            'string' &&
+                                            getOptionLabel(item).toLowerCase()
+                                        : getOptionLabel(item)
+                                }}
+                            </slot>
+                        </dl-select-option>
+                    </dl-virtual-scroll>
+                    <!-- Else normal list -->
+                    <div v-else>
+                        <dl-select-option
+                            v-for="(option, optionIndex) in filteredOptions"
+                            :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" />
@@ -258,9 +313,14 @@
 <script lang="ts">
 import { InputSizes, TInputSizes } from '../../../utils/input-sizes'
 import { DlListItem } from '../../basic'
-import { DlTooltip, DlList, DlIcon, DlMenu } from '../../essential'
-import { DlInfoErrorMessage, DlItemSection } from '../../shared'
-import { defineComponent, isVue2, PropType, ref } from 'vue-demi'
+import { DlTooltip } from '../../shared'
+import { DlList, DlIcon, DlMenu } from '../../essential'
+import {
+    DlInfoErrorMessage,
+    DlItemSection,
+    DlVirtualScroll
+} from '../../shared'
+import { defineComponent, PropType, ref } from 'vue-demi'
 import {
     getLabel,
     getIconSize,
@@ -282,7 +342,8 @@ export default defineComponent({
         DlListItem,
         DlMenu,
         DlTooltip,
-        DlSelectOption
+        DlSelectOption,
+        DlVirtualScroll
     },
     model: {
         prop: 'modelValue',
@@ -303,7 +364,8 @@ export default defineComponent({
         width: { type: String, default: '100%' },
         withoutBorders: { type: Boolean, default: false },
         title: { type: String, default: '' },
-        search: { type: Boolean, default: false },
+        searchable: { type: Boolean, default: false },
+        customFilter: { type: Boolean, default: false },
         required: { type: Boolean, default: false },
         optional: { type: Boolean, default: false },
         fitContent: Boolean,
@@ -329,7 +391,8 @@ export default defineComponent({
         withoutDropdownIconPadding: { type: Boolean, default: false },
         clearButtonTooltip: { type: Boolean, default: false },
         dropdownMaxHeight: { type: String, default: '30vh' },
-        preserveSearch: { type: Boolean, default: false }
+        preserveSearch: { type: Boolean, default: false },
+        disabledTooltip: { type: String, default: 'Disabled' }
     },
     emits: [
         'search-focus',
@@ -349,6 +412,10 @@ export default defineComponent({
         const isExpanded = ref(false)
         const selectedIndex = ref(-1)
         const highlightedIndex = ref(-1)
+        const isEmpty = ref(true)
+        const searchTerm = ref('')
+        const searchInputValue = ref('')
+        const MAX_ITEMS_PER_LIST = 100 // HARDCODED - max items per list before virtual scroll
 
         const setHighlightedIndex = (value: any) => {
             highlightedIndex.value = value
@@ -356,6 +423,7 @@ export default defineComponent({
         const handleModelValueUpdate = (val: any) => {
             emit('update:model-value', val)
             emit('change', val)
+            emit('selected', val)
         }
         const handleSelectedItem = (value: any) => {
             selectedIndex.value = props.options.findIndex(
@@ -367,21 +435,38 @@ export default defineComponent({
         }
 
         return {
+            uuid: `dl-select-${v4()}`,
+            MAX_ITEMS_PER_LIST,
+            isEmpty,
             isExpanded,
             highlightedIndex,
             selectedIndex,
             setHighlightedIndex,
             handleSelectedItem,
-            handleModelValueUpdate
-        }
-    },
-    data() {
-        return {
-            uuid: `dl-select-${v4()}`,
-            isEmpty: true
+            handleModelValueUpdate,
+            searchTerm, // todo: merge this sometime
+            searchInputValue
         }
     },
     computed: {
+        filteredOptions(): DlSelectOptionType[] {
+            if (this.customFilter || this.searchTerm === '') {
+                return this.options
+            }
+
+            return this.options.filter((option) => {
+                const label = getLabel(option)
+                return (
+                    label &&
+                    label
+                        .toLowerCase()
+                        .includes(this.searchTerm.toLowerCase().trim())
+                )
+            })
+        },
+        optionsCount(): number {
+            return this.options?.length ?? 0
+        },
         identifierClass(): string {
             return `dl-select-${this.title}-${
                 this.placeholder ?? ''
@@ -446,24 +531,12 @@ export default defineComponent({
             return getIconSize(this.size)
         },
         hasOptionSlot(): boolean {
-            if (isVue2) {
-                // @ts-ignore
-                return !!this.$scopedSlots.option
-            }
             return !!this.$slots.option
         },
         hasAllItemsSlot(): boolean {
-            if (isVue2) {
-                // @ts-ignore
-                return !!this.$scopedSlots['all-items']
-            }
             return !!this.$slots['all-items']
         },
         hasSelectedSlot(): boolean {
-            if (isVue2) {
-                // @ts-ignore
-                return !!this.$scopedSlots.selected
-            }
             return !!this.$slots.selected
         },
         computedPlaceholder(): string {
@@ -487,22 +560,18 @@ export default defineComponent({
                 : this.options[this.selectedIndex]
         },
         hasBeforeOptions(): boolean {
-            if (isVue2) {
-                // @ts-ignore
-                return !!this.$scopedSlots['before-options']
-            }
             return !!this.$slots['before-options']
         },
         hasAfterOptions(): boolean {
-            if (isVue2) {
-                // @ts-ignore
-                return !!this.$scopedSlots['after-options']
-            }
             return !!this.$slots['after-options']
         },
         noOptions(): boolean {
             if (Array.isArray(this.options)) {
-                return this.options.length === 0
+                if (this.customFilter) {
+                    return this.options.length === 0
+                }
+
+                return this.filteredOptions.length === 0
             }
             return true
         },
@@ -524,7 +593,10 @@ export default defineComponent({
             if (this.withoutBorders) {
                 classes.push('dl_select__select--without-border')
             }
-            if (this.hasPrepend || this.search) {
+            if (this.withoutBorders && this.hasPrepend) {
+                classes.push('dl_select__select--without-border__with-prepend')
+            }
+            if (this.hasPrepend || this.searchable) {
                 classes.push('dl_select__select--prepend')
                 classes.push('dl_select__select--both-adornments')
             }
@@ -548,12 +620,8 @@ export default defineComponent({
                 '--dl-select-width': this.width,
                 '--dl-select-expand-icon-width': this.withoutDropdownIconPadding
                     ? '16px'
-                    : '28px'
-            }
-        },
-        dropdownCSSVars(): Record<string, string> {
-            return {
-                '--dl-select-dropdown-max-height': this.dropdownMaxHeight
+                    : '28px',
+                '--dl-menu-scrollbar-width': '10px'
             }
         },
         asteriskClasses(): string[] {
@@ -569,19 +637,21 @@ export default defineComponent({
             return classes
         },
         isSmall(): boolean {
-            return this.size === InputSizes.s
+            return (
+                this.size === (InputSizes.s as TInputSizes) ||
+                this.size === (InputSizes.small as TInputSizes)
+            )
         },
         hasPrepend(): boolean {
-            if (isVue2) {
-                // @ts-ignore
-                return !!this.$scopedSlots.prepend && !this.isSmall
-            }
             return !!this.$slots.prepend && !this.isSmall
+        },
+        chevronIconColor(): string {
+            return `${this.disabled ? 'dl-color-disabled' : null}`
         }
     },
     watch: {
         isExpanded(newVal: boolean) {
-            if (this.search) {
+            if (this.searchable) {
                 if (newVal) {
                     const inputRef = this.$refs.searchInput as HTMLInputElement
                     this.$nextTick(() => {
@@ -620,7 +690,7 @@ export default defineComponent({
                 return
             }
 
-            if (this.emitValue) {
+            if (this.emitValue && this.selectedIndex !== -1) {
                 this.selectedIndex = this.options.findIndex(
                     (
                         option:
@@ -716,8 +786,9 @@ export default defineComponent({
                     ? undefined
                     : this.options[this.selectedIndex]
 
-            if (this.search) {
-                (this.$refs.searchInput as HTMLInputElement).value =
+            if (this.searchable) {
+                const searchInput = this.$refs.searchInput as HTMLInputElement
+                searchInput.value =
                     typeof selectedOption === 'string'
                         ? selectedOption
                         : (selectedOption as Record<string, any>)?.label
@@ -732,22 +803,46 @@ export default defineComponent({
             this.handleModelValueUpdate(valueToEmit)
         },
         handleSearchInput(e: Event): void {
-            if (this.search) {
-                this.$emit(
-                    'filter',
-                    (e.target as HTMLInputElement).value.trim()
-                )
+            if (this.searchable) {
+                if (this.customFilter) {
+                    this.$emit(
+                        'filter',
+                        (e.target as HTMLInputElement).value.trim()
+                    )
+                } else {
+                    this.searchTerm = (
+                        e.target as HTMLInputElement
+                    ).value.trim()
+                }
+
                 this.showAllItems =
                     (e.target as HTMLInputElement).value.trim() === ''
 
                 this.$nextTick(() => {
-                    (this.$refs.menu as any)?.updatePosition()
+                    const menu = this.$refs.menu as any
+                    menu?.updatePosition()
                 })
             }
-            this.$emit('search-input', (e.target as HTMLInputElement).value)
+            const searchValue = (e.target as HTMLInputElement).value
+            this.searchInputValue = searchValue
+            this.$emit('search-input', searchValue)
+        },
+        getOptionHtml(option: DlSelectOptionType) {
+            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>`
+            )
+            const html = `<span>${highlightedHtml}</span>`
+
+            return html
         },
         handleSearchBlur(e: Event): void {
-            if (this.search) {
+            if (this.searchable) {
                 const inputRef = this.$refs.searchInput as HTMLInputElement
                 this.$nextTick(() => {
                     inputRef?.focus({})
@@ -763,13 +858,14 @@ export default defineComponent({
             if (!this.preserveSearch) {
                 const inputRef = this.$refs.searchInput as HTMLInputElement
                 if (inputRef) inputRef.value = ''
+                this.searchTerm = ''
                 this.$emit('filter', '')
             }
         },
         getLabel,
         onMenuOpen(): void {
             this.$emit('before-show')
-            if (this.search) {
+            if (this.searchable) {
                 const inputRef = this.$refs.searchInput as HTMLInputElement
                 this.$nextTick(() => {
                     inputRef?.focus({})
@@ -800,8 +896,12 @@ export default defineComponent({
         display: flex;
         align-items: center;
     }
+    &--small {
+        display: flex;
+        align-items: center;
+    }
     &--placeholder {
-        color: var(--placeholder-color);
+        color: var(--dl-select-palceholder-color, --placeholder-color);
     }
 
     .dl-select__title-container {
@@ -810,14 +910,14 @@ export default defineComponent({
         align-items: center;
         color: var(--dl-color-lighter);
 
-        &--s {
+        &--small {
             margin-right: 5px;
             margin-bottom: 0px;
         }
     }
 
     .selected-label {
-        color: var(--placeholder-color);
+        color: var(--dl-select-palceholder-color, --placeholder-color);
     }
 
     .dl-select__title {
@@ -895,6 +995,10 @@ export default defineComponent({
             padding-top: 7px;
             padding-bottom: 7px;
         }
+        &--medium {
+            padding-top: 7px;
+            padding-bottom: 7px;
+        }
 
         &--s {
             padding-top: 3px;
@@ -903,6 +1007,13 @@ export default defineComponent({
             padding-right: 5px;
             width: calc(100% - 10px);
         }
+        &--small {
+            padding-top: 3px;
+            padding-bottom: 3px;
+            padding-left: 5px;
+            padding-right: 5px;
+            width: calc(100% - 10px);
+        }
 
         &--has-selection {
             color: var(--dl-color-medium);
@@ -920,6 +1031,13 @@ export default defineComponent({
                 height: 100%;
             }
             height: auto;
+
+            &__with-prepend {
+                padding-left: 30px;
+                padding-top: 10px;
+                padding-bottom: 10px;
+                width: calc(80% - var(--dl-select-expand-icon-width));
+            }
         }
 
         &::placeholder {
@@ -965,6 +1083,7 @@ export default defineComponent({
         background-color: var(--dl-color-fill);
     }
 
+    //todo: This doesnt work because of portal.
     .select-list {
         padding: 5px 0;
         max-height: var(--dl-select-dropdown-max-height);
@@ -996,14 +1115,26 @@ export default defineComponent({
             height: 34px;
         }
 
+        &--large {
+            height: 34px;
+        }
+
         &--m {
             height: 28px;
         }
 
+        &--medium {
+            height: 28px;
+        }
+
         &--s {
             height: 20px;
         }
 
+        &--small {
+            height: 20px;
+        }
+
         &--pos-left {
             top: 0;
             left: 0;
@@ -1047,4 +1178,7 @@ export default defineComponent({
         padding-top: 3px;
     }
 }
+.fit-content > * {
+    max-width: fit-content;
+}
 </style>