@teammodlr/ui-kit 3.0.0-beta.23 → 3.0.0-beta.26

package/src/components/select/Select.vue

@@ -1,6 +1,6 @@
 <template>
     <PopoverRoot :open="isOpen" @update:open="handleOpenChange">
-        <div ref="selectRef" tabindex="-1">
+        <div ref="selectRef" tabindex="-1" :class="fillRootClass">
             <label v-if="label" :for="id" :class="style.label" :id="`${id}-label`">
                 {{ label }}
             </label>
@@ -26,10 +26,10 @@
                             </template>
                         </template>
                         <template v-else-if="!multiple && selected">
-                            {{ getSelectedLabel(selected) }}
+                            <span :class="fillLabelClass">{{ getSelectedLabel(selected) }}</span>
                         </template>
                         <template v-else>
-                            <div :class="style.placeholder">{{ placeholder }}</div>
+                            <div :class="[style.placeholder, fillLabelClass]">{{ placeholder }}</div>
                         </template>
                         <span :class="selectComputedArrowClasses">
                             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>
@@ -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';
@@ -202,6 +213,14 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        fill: {
+            type: Boolean,
+            default: false
+        },
+        noBorder: {
+            type: Boolean,
+            default: false
+        },
         zIndex: {
             type: Number
         },
@@ -214,6 +233,7 @@ export default defineComponent({
     },
     components: {
         MTag,
+        VList,
         PopoverContent,
         PopoverPortal,
         PopoverRoot,
@@ -221,7 +241,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>();
@@ -741,20 +761,35 @@ 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);
+
         const computedWrapperClasses = computed(() => {
-            return [style.wrapper];
+            return [
+                style.wrapper,
+                { [style.fill]: props.fill }
+            ];
         });
 
         const selectComputedClasses = computed(() => {
             return [
                 style.base,
+                style.sizes[props.size],
                 {
                     [style.selectedTags]:
                         props.multiple &&
                         Array.isArray(selected.value) &&
                         selected.value.length > 0,
-                    [style.focused]: open.value || focused.value,
-                    // [`m-select--${props.size}`]: props.size,
+                    [style.focused]: !props.noBorder && (open.value || focused.value),
+                    [style.fillBase]: props.fill,
+                    [style.noBorder]: props.noBorder,
                     'm-select--disabled': disabled.value || loading.value,
                     'm-select--focused': open.value || focused.value,
                     'm-select--multiple': props.multiple,
@@ -784,11 +819,8 @@ 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' });
             }
         });
 
@@ -816,7 +848,7 @@ export default defineComponent({
                     });
                 }
 
-                if (value && optionsRef.value) {
+                if (value) {
                     const selectedValue = Array.isArray(selected.value)
                         ? selected.value[0]
                         : selected.value;
@@ -824,9 +856,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;
@@ -894,7 +924,7 @@ export default defineComponent({
 
         return {
             container,
-            optionsRef,
+            virtualListRef,
             searchRef,
             selectRef,
             popper,
@@ -928,7 +958,12 @@ export default defineComponent({
             style,
             focused,
             fade,
-            toggleAllItems
+            toggleAllItems,
+            optionItemHeight,
+            optionsHeight,
+            optionSizeClass,
+            fillRootClass,
+            fillLabelClass
         };
     }
 });

package/src/components/select/examples/fill.vue

@@ -0,0 +1,52 @@
+<template>
+    <div style="display: grid; grid-template-columns: 120px 1fr 1fr; border: 1px solid #e5e7eb;">
+        <div style="padding: 6px 8px; font-size: 13px; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; background: #f9fafb; font-weight: 500;">Row 1</div>
+        <div style="height: 36px; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;">
+            <MSelect size="xs" v-model="row1Status" :options="statusOptions" fill no-border />
+        </div>
+        <div style="height: 36px; border-bottom: 1px solid #e5e7eb;">
+            <MSelect size="xs" v-model="row1Priority" :options="priorityOptions" fill no-border />
+        </div>
+
+        <div style="padding: 6px 8px; font-size: 13px; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; background: #f9fafb; font-weight: 500;">Row 2</div>
+        <div style="height: 36px; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;">
+            <MSelect size="xs" v-model="row2Status" :options="statusOptions" fill no-border />
+        </div>
+        <div style="height: 36px; border-bottom: 1px solid #e5e7eb;">
+            <MSelect size="xs" v-model="row2Priority" :options="priorityOptions" fill no-border />
+        </div>
+
+        <div style="padding: 6px 8px; font-size: 13px; border-right: 1px solid #e5e7eb; background: #f9fafb; font-weight: 500;">Row 3</div>
+        <div style="height: 36px; border-right: 1px solid #e5e7eb;">
+            <MSelect size="xs" v-model="row3Status" :options="statusOptions" fill no-border />
+        </div>
+        <div style="height: 36px;">
+            <MSelect size="xs" v-model="row3Priority" :options="priorityOptions" fill no-border />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const statusOptions = [
+    { value: 'todo', label: 'To Do' },
+    { value: 'in_progress', label: 'In Progress' },
+    { value: 'in_review', label: 'In Review' },
+    { value: 'done', label: 'Done' }
+];
+
+const priorityOptions = [
+    { value: 'low', label: 'Low' },
+    { value: 'medium', label: 'Medium' },
+    { value: 'high', label: 'High' },
+    { value: 'critical', label: 'Critical' }
+];
+
+const row1Status = ref('in_progress');
+const row1Priority = ref('high');
+const row2Status = ref('todo');
+const row2Priority = ref('medium');
+const row3Status = ref('done');
+const row3Priority = ref('low');
+</script>

package/src/components/select/examples/index.stories.ts

@@ -1,5 +1,5 @@
 import MSelect from '../Select.vue';
-import { MSelectBasic, MSelectSearchable, MSelectMultiple } from './index';
+import { MSelectBasic, MSelectSearchable, MSelectMultiple, MSelectFill } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
 
@@ -14,3 +14,4 @@ export default {
 export const Basic = createStory(MSelectBasic);
 export const Searchable = createStory(MSelectSearchable);
 export const Multiple = createStory(MSelectMultiple);
+export const Fill = createStory(MSelectFill);

package/src/components/select/examples/index.ts

@@ -1,3 +1,4 @@
 export { default as MSelectBasic } from './basic.vue';
 export { default as MSelectSearchable } from './searchable.vue';
 export { default as MSelectMultiple } from './multiple.vue';
+export { default as MSelectFill } from './fill.vue';

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

@@ -6,7 +6,7 @@ import {
 } from '@vanilla-extract/css';
 import { themeVars } from '../../../styles/theme.css';
 
-const sizes = {
+const heights = {
     xs: '26px',
     sm: '30px',
     md: '38px',
@@ -42,7 +42,7 @@ export const wrapper = style({
 
 export const base = style({
     vars: {
-        [vars.height]: sizes.md,
+        [vars.height]: heights.md,
         [vars.radius]: borderRadiuses.md,
         [vars.paddingX]: themeVars.space[2],
         [vars.paddingY]: themeVars.space[0],
@@ -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',
@@ -371,12 +393,104 @@ export const arrow = style({
     height: themeVars.space[4],
     position: 'absolute',
     right: themeVars.space[3],
-    top: themeVars.space[3],
+    top: '50%',
+    transform: 'translateY(-50%)',
     display: 'flex',
     color: themeVars.color.gray[500],
     transition: 'transform 0.3s ease',
 });
 
 export const arrowOpen = style({
-    transform: 'rotate(180deg)',
+    transform: 'translateY(-50%) rotate(180deg)',
 })
+
+export const fillRoot = style({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%'
+});
+
+export const fill = style({
+    flexGrow: 1,
+    width: '100%',
+    minHeight: 0
+});
+
+export const sizes = styleVariants({
+    xs: {
+        vars: {
+            [vars.height]: heights.xs,
+            [vars.radius]: borderRadiuses.xs,
+            [vars.paddingX]: themeVars.space[1]
+        },
+        fontSize: themeVars.fontSize.small
+    },
+    sm: {
+        vars: {
+            [vars.height]: heights.sm,
+            [vars.radius]: borderRadiuses.sm,
+            [vars.paddingX]: themeVars.space[1.5]
+        },
+        fontSize: themeVars.fontSize.small
+    },
+    md: {
+        vars: {
+            [vars.height]: heights.md,
+            [vars.radius]: borderRadiuses.md
+        }
+    },
+    lg: {
+        vars: {
+            [vars.height]: heights.lg,
+            [vars.radius]: borderRadiuses.lg,
+            [vars.paddingX]: themeVars.space[2.5]
+        },
+        fontSize: themeVars.fontSize.large
+    },
+    xl: {
+        vars: {
+            [vars.height]: heights.xl,
+            [vars.radius]: borderRadiuses.xl,
+            [vars.paddingX]: themeVars.space[3]
+        },
+        fontSize: themeVars.fontSize.large
+    }
+});
+
+export const fillBase = style({
+    minHeight: 'unset',
+    height: '100%',
+    lineHeight: 'normal',
+    display: 'flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+    paddingRight: '2rem'
+});
+
+export const fillLabel = style({
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    flex: 1,
+    minWidth: 0
+});
+
+export const noBorder = style({
+    vars: {
+        [vars.borderColor]: 'transparent'
+    },
+    borderRadius: 0,
+    boxShadow: 'none',
+    ':hover': {
+        vars: {
+            [vars.borderColor]: 'transparent'
+        }
+    },
+    ':focus': {
+        vars: {
+            [vars.borderColor]: 'transparent'
+        },
+        boxShadow: 'none'
+    }
+});