@dataloop-ai/components 0.17.18 → 0.17.19

package/package.json

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

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

@@ -464,7 +464,7 @@ export default defineComponent({
 .dl-popup {
     z-index: calc(var(--dl-z-index-menu) - 1);
     position: fixed !important;
-    padding: 10px 0 16px 0;
+    padding: var(--dl-popup-padding, 10px 0 16px 0);
     border: 1px solid var(--dl-color-separator);
     display: flex;
     background-color: var(--dl-color-panel-background);

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

@@ -186,8 +186,63 @@
                             {{ computedAllItemsLabel }}
                         </template>
                     </dl-select-option>
+                    <!-- Virtual scroll -->
+                    <dl-virtual-scroll
+                        v-if="optionsCount > MAX_ITEMS_PER_LIST"
+                        v-slot="{ item }"
+                        :items="options"
+                        :virtual-scroll-item-size="28"
+                        :virtual-scroll-sticky-size-start="28"
+                        :virtual-scroll-sticky-size-end="20"
+                        separator
+                    >
+                        <dl-select-option
+                            :key="getKeyForOption(item)"
+                            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(item)"
+                            :highlight-selected="highlightSelected"
+                            :count="getOptionCount(item)"
+                            :children="getOptionChildren(item)"
+                            :capitalized="capitalizedOptions"
+                            @update:model-value="handleModelValueUpdate"
+                            @click="selectOption(item)"
+                            @selected="handleSelected"
+                            @deselected="handleDeselected"
+                        >
+                            <slot
+                                v-if="hasOptionSlot"
+                                :opt="item"
+                                name="option"
+                            />
+                            <template v-else>
+                                {{
+                                    capitalizedOptions
+                                        ? typeof getOptionLabel(item) ===
+                                            'string' &&
+                                            getOptionLabel(item).toLowerCase()
+                                        : getOptionLabel(item)
+                                }}
+                            </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"
@@ -259,7 +314,11 @@
 import { InputSizes, TInputSizes } from '../../../utils/input-sizes'
 import { DlListItem } from '../../basic'
 import { DlTooltip, DlList, DlIcon, DlMenu } from '../../essential'
-import { DlInfoErrorMessage, DlItemSection } from '../../shared'
+import {
+    DlInfoErrorMessage,
+    DlItemSection,
+    DlVirtualScroll
+} from '../../shared'
 import { defineComponent, isVue2, PropType, ref } from 'vue-demi'
 import {
     getLabel,
@@ -282,7 +341,8 @@ export default defineComponent({
         DlListItem,
         DlMenu,
         DlTooltip,
-        DlSelectOption
+        DlSelectOption,
+        DlVirtualScroll
     },
     model: {
         prop: 'modelValue',
@@ -349,6 +409,8 @@ export default defineComponent({
         const isExpanded = ref(false)
         const selectedIndex = ref(-1)
         const highlightedIndex = ref(-1)
+        const isEmpty = ref(true)
+        const MAX_ITEMS_PER_LIST = 100 // HARDCODED - max items per list before virtual scroll
 
         const setHighlightedIndex = (value: any) => {
             highlightedIndex.value = value
@@ -367,6 +429,9 @@ export default defineComponent({
         }
 
         return {
+            uuid: `dl-select-${v4()}`,
+            MAX_ITEMS_PER_LIST,
+            isEmpty,
             isExpanded,
             highlightedIndex,
             selectedIndex,
@@ -375,13 +440,10 @@ export default defineComponent({
             handleModelValueUpdate
         }
     },
-    data() {
-        return {
-            uuid: `dl-select-${v4()}`,
-            isEmpty: true
-        }
-    },
     computed: {
+        optionsCount(): number {
+            return this.options?.length ?? 0
+        },
         identifierClass(): string {
             return `dl-select-${this.title}-${
                 this.placeholder ?? ''

package/src/demos/DlSelectDemo.vue

@@ -346,12 +346,27 @@
                 </div>
             </template>
         </dl-select>
+
+        Select with virtual scrolling
+        <dl-select
+            v-model="selectedOption"
+            :options="alotOfOptions ? alotOfOptions : []"
+            style="margin-bottom: 150px"
+        >
+            <template #option="scope">
+                <div style="padding: 5px 0px">
+                    <div>{{ scope.opt.label }}</div>
+                    <div>{{ scope.opt.subLabel }}</div>
+                </div>
+            </template>
+        </dl-select>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { DlChip, DlSelect, DlIcon, DlBadge } from '../components'
+import { DlSelectOptionType } from '../components/compound/DlSelect/utils'
 
 const defaultOptions = [
     { label: 'Contributor 1', value: 'c1' },
@@ -480,6 +495,21 @@ export default defineComponent({
         isNotSelected() {
             // @ts-ignore
             return defaultOptions.includes(this.selectedBySearch as any)
+        },
+        alotOfOptions(): DlSelectOptionType {
+            const arr = [] as any[]
+
+            for (let i = 0; i < 1000; ++i) {
+                arr.push({
+                    key: i,
+                    subLabel: 'not so high',
+                    label: 'High ' + i,
+                    value: 'high',
+                    bgColor: 'dl-color-negative'
+                })
+            }
+
+            return arr
         }
     },
     methods: {