@teammodlr/ui-kit 3.0.0-beta.24 → 3.0.0-beta.28

package/src/components/select/Select.vue

@@ -16,7 +16,7 @@
                     <div :class="selectComputedClasses">
                         <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
                             <MTag v-for="value in selectedMax" :key="value" :closeable="true"
-                                @close="event => removeSelected(event, value)" :size="size">
+                                @close="() => removeSelected(value)" :size="size">
                                 {{ getSelectedLabel(value) }}
                             </MTag>
                             <template v-if="selectedCountNotShown > 0">
@@ -71,24 +71,30 @@
                             <input v-if="searchable" type="text" ref="searchRef" v-model="search" placeholder="Search"
                                 :class="style.searchInput" :data-input="`select-menu-search-${id}`" />
                         </div>
-                        <div :class="style.options">
-                            <div v-for="(option, index) in computedOptions" :key="index" ref="optionsRef" :class="{
-                                [style.option]: true,
-                                [style.optionSelected]: option.active,
-                                [style.optionFocused]: selectedIndex === index
-                            }" @click.prevent="option.onClick" @mouseenter="selectedIndex = index"
-                                :data-element="`select-menu-option-${id}-${option.value}`">
-                                <span :class="style.optionIcon">
-                                    <svg v-if="option.active" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                                        <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
-                                    </svg>
-                                </span>
-                                <span :class="style.optionLabel">{{ option.label }}</span>
-                            </div>
-                            <template v-if="computedOptions.length === 0">
-                                <div :class="style.noResults">No results</div>
+                        <div v-if="computedOptions.length === 0" :class="style.noResults">No results</div>
+                        <VList
+                            v-else
+                            ref="virtualListRef"
+                            :data="computedOptions"
+                            :item-size="optionItemHeight"
+                            :style="{ height: optionsHeight + 'px', padding: '4px' }"
+                        >
+                            <template #default="{ item, index }">
+                                <div :class="[optionSizeClass, {
+                                    [style.option]: true,
+                                    [style.optionSelected]: item.active,
+                                    [style.optionFocused]: selectedIndex === index
+                                }]" @click.prevent="item.onClick" @mouseenter="selectedIndex = index"
+                                    :data-element="`select-menu-option-${id}-${item.value}`">
+                                    <span :class="style.optionIcon">
+                                        <svg v-if="item.active" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                                            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd"></path>
+                                        </svg>
+                                    </span>
+                                    <span :class="style.optionLabel">{{ item.label }}</span>
+                                </div>
                             </template>
-                        </div>
+                        </VList>
                     </PopoverContent>
                 </Transition>
             </PopoverPortal>
@@ -115,7 +121,12 @@ import {
         type PropType
 } from 'vue';
 import MTag from '../tag/Tag.vue';
+import { VList } from 'virtua/vue';
 import * as style from './style';
+
+interface VListHandle {
+    scrollToIndex(index: number, opts?: { align?: 'start' | 'center' | 'end' | 'nearest' }): void;
+}
 import { fade } from '../../styles/transitions.css';
 import { useInteractive } from '../../composables/useInteractive';
 import type { OnUpdateValue, OnUpdateValueImpl } from './types';
@@ -127,7 +138,9 @@ let shouldOpenNextFocusedSelect = false;
 export default defineComponent({
     name: 'MSelect',
     emits: {
-        ...useInput.emits()
+        ...useInput.emits(),
+        'on-open': () => true,
+        'on-close': () => true
     },
     props: {
         ...useInput.props(),
@@ -222,6 +235,7 @@ export default defineComponent({
     },
     components: {
         MTag,
+        VList,
         PopoverContent,
         PopoverPortal,
         PopoverRoot,
@@ -229,7 +243,7 @@ export default defineComponent({
     },
     setup(props, { emit, expose }) {
         const container = ref<HTMLElement | null>(null);
-        const optionsRef = ref<HTMLElement[]>([]);
+        const virtualListRef = ref<VListHandle | null>(null);
         const searchRef = ref<HTMLInputElement>();
         const selectRef = ref<HTMLElement>();
         const popper = ref<HTMLElement>();
@@ -601,9 +615,7 @@ export default defineComponent({
             }
         }
 
-        function removeSelected(event: MouseEvent, value: string | number) {
-            event.preventDefault();
-            event.stopPropagation();
+        function removeSelected(value: string | number) {
             if (!props.multiple) {
                 return;
             }
@@ -749,6 +761,13 @@ export default defineComponent({
             ]
         })
 
+        const optionItemHeightMap: Record<string, number> = { xs: 30, sm: 32, md: 38, lg: 42, xl: 46 };
+        const optionItemHeight = computed(() => optionItemHeightMap[props.size] ?? 38);
+        const optionsHeight = computed(() => {
+            const total = computedOptions.value.length * optionItemHeight.value + 8; // 8px = paddingTop+paddingBottom
+            return Math.min(total, 222);
+        });
+        const optionSizeClass = computed(() => style.optionSizes[props.size]);
         const fillRootClass = computed(() => props.fill ? style.fillRoot : undefined);
         const fillLabelClass = computed(() => props.fill ? style.fillLabel : undefined);
 
@@ -800,21 +819,20 @@ export default defineComponent({
             if (!keyboardNavigation.value) {
                 return;
             }
-            if (typeof index !== 'undefined' && optionsRef.value) {
-                optionsRef.value[index].scrollIntoView({
-                    block: 'nearest',
-                    inline: 'nearest'
-                });
+            if (typeof index !== 'undefined') {
+                virtualListRef.value?.scrollToIndex(index, { align: 'nearest' });
             }
         });
 
         watch(open, (value: boolean) => {
             nextTick(() => {
                 if (!value) {
+                    emit('on-close');
                     search.value = '';
                 }
 
                 if (value) {
+                    emit('on-open');
                     zIndex.value = nextZIndex();
                 }
 
@@ -832,7 +850,7 @@ export default defineComponent({
                     });
                 }
 
-                if (value && optionsRef.value) {
+                if (value) {
                     const selectedValue = Array.isArray(selected.value)
                         ? selected.value[0]
                         : selected.value;
@@ -840,9 +858,7 @@ export default defineComponent({
                         i => i.value === selectedValue
                     );
                     if (index !== -1) {
-                        optionsRef.value[index].scrollIntoView({
-                            block: 'nearest'
-                        });
+                        nextTick(() => virtualListRef.value?.scrollToIndex(index, { align: 'nearest' }));
                         selectedIndex.value = index;
                     } else if (computedOptions.value.length > 0) {
                         selectedIndex.value = 0;
@@ -910,7 +926,7 @@ export default defineComponent({
 
         return {
             container,
-            optionsRef,
+            virtualListRef,
             searchRef,
             selectRef,
             popper,
@@ -945,6 +961,9 @@ export default defineComponent({
             focused,
             fade,
             toggleAllItems,
+            optionItemHeight,
+            optionsHeight,
+            optionSizeClass,
             fillRootClass,
             fillLabelClass
         };

package/src/components/select/style/Select.css.ts

@@ -189,8 +189,7 @@ export const menu = style({
     borderRadius: '4px',
     border: `1px solid ${themeVars.color.gray[200]}`,
     boxShadow: themeVars.shadow.md,
-    maxHeight: '230px',
-    overflowY: 'auto'
+    overflow: 'hidden'
 });
 
 export const placeholder = style({
@@ -199,11 +198,7 @@ export const placeholder = style({
 });
 
 export const search = style({
-    // padding: `${themeVars.space[1]} ${themeVars.space[1]} 0`,
     backgroundColor: '#FFFFFF',
-    position: 'sticky',
-    top: 0,
-    zIndex: 1,
     borderBottom: `1px solid ${themeVars.color.gray[200]}`,
     display: 'flex'
 });
@@ -219,10 +214,7 @@ export const searchInput = style({
 });
 
 export const options = style({
-    padding: themeVars.space[1],
-    display: 'flex',
-    flexDirection: 'column',
-    gap: themeVars.space[0.5]
+    overflow: 'hidden'
 });
 
 export const option = style({
@@ -234,10 +226,7 @@ export const option = style({
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer',
-    minHeight: '36px',
-    fontSize: themeVars.fontSize.base,
-    paddingBlock: themeVars.space['1.5'],
-    paddingInline: themeVars.space['3'],
+    marginBottom: '2px',
     gap: themeVars.space[2],
     color: vars.optionColor,
     transition: 'background-color 0.05s ease-in-out',
@@ -280,6 +269,39 @@ export const optionSelected = style({
 
 export const optionLabel = style({});
 
+export const optionSizes = styleVariants({
+    xs: {
+        minHeight: '28px',
+        fontSize: themeVars.fontSize.small,
+        paddingBlock: themeVars.space['1'],
+        paddingInline: themeVars.space['2']
+    },
+    sm: {
+        minHeight: '30px',
+        fontSize: themeVars.fontSize.base,
+        paddingBlock: themeVars.space['1'],
+        paddingInline: themeVars.space['2.5']
+    },
+    md: {
+        minHeight: '36px',
+        fontSize: themeVars.fontSize.base,
+        paddingBlock: themeVars.space['1.5'],
+        paddingInline: themeVars.space['3']
+    },
+    lg: {
+        minHeight: '40px',
+        fontSize: themeVars.fontSize.large,
+        paddingBlock: themeVars.space['2'],
+        paddingInline: themeVars.space['3']
+    },
+    xl: {
+        minHeight: '44px',
+        fontSize: themeVars.fontSize.large,
+        paddingBlock: themeVars.space['2.5'],
+        paddingInline: themeVars.space['3']
+    }
+});
+
 export const checkAll = style({
     display: 'flex',
     alignItems: 'center',