@teammodlr/ui-kit 3.0.0-beta.9 → 3.0.1

package/src/components/popover/Popover.vue

@@ -9,6 +9,7 @@
                 :side="resolvedSide"
                 :align="resolvedAlign"
                 :side-offset="sideOffset"
+                :collision-padding="collisionPadding"
                 :style="{ zIndex: zIndex }"
             >
                 <slot name="content" />
@@ -68,12 +69,16 @@ export default defineComponent({
         },
         transfer: {
             type: Boolean,
-            default: false
+            default: true
         },
         sideOffset: {
             type: Number,
             default: 5
         },
+        collisionPadding: {
+            type: [Number, Object] as PropType<number | { top?: number; right?: number; bottom?: number; left?: number }>,
+            default: 10
+        },
         arrow: {
             type: Boolean,
             default: false
@@ -86,7 +91,9 @@ export default defineComponent({
             type: Number
         }
     },
-    emits: ['update:open'],
+    emits: {
+        'update:open': (_value: boolean) => true
+    },
     setup(props, { emit }) {
         const attrs = useAttrs();
         const { nextZIndex } = useZIndex();

package/src/components/radiobuttongroup/RadioButtonGroup.vue

@@ -39,7 +39,9 @@ export default defineComponent({
             default: false
         }
     },
-    emits: ['update:modelValue'],
+    emits: {
+        'update:modelValue': (_value: any) => true
+    },
     setup(props, {emit}) {
 
         function doUpdateValue (value: string | number) {

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>
@@ -8,7 +8,7 @@
                 {{ description }}
             </div>
 
-            <PopoverTrigger as-child :disabled="disabled || loading">
+            <PopoverTrigger as-child :disabled="blocked">
                 <div :class="computedWrapperClasses" v-on="inputListeners" :id="id" ref="container"
                     :aria-disabled="disabled ? 'true' : 'false'" :aria-labelledby="`${id}-label`" tabindex="0"
                     data-m-select-trigger="true"
@@ -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">
@@ -26,15 +26,16 @@
                             </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>
                         </span>
                     </div>
+                    <MClearButton v-if="showClear" :class="style.clear" @clear="clearSelected" />
                 </div>
             </PopoverTrigger>
 
@@ -71,24 +72,31 @@
                             <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="showRemoteLoading" :class="style.noResults">Loading...</div>
+                        <div v-else-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>
@@ -101,7 +109,7 @@
 </template>
 
 <script lang="ts">
-import { useInput } from '../../composables/useInput';
+import { useInput, type InputEmitsMap } from '../../composables/useInput';
 import type { MaybeArray, Size } from '../../types/props';
 import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from 'reka-ui';
 import { useEventListener } from '@vueuse/core';
@@ -109,13 +117,20 @@ import {
     computed,
     defineComponent,
     nextTick,
+    onBeforeUnmount,
     ref,
     watch,
     watchEffect,
         type PropType
 } from 'vue';
 import MTag from '../tag/Tag.vue';
+import MClearButton from '../clearbutton/ClearButton.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 +142,12 @@ let shouldOpenNextFocusedSelect = false;
 export default defineComponent({
     name: 'MSelect',
     emits: {
-        ...useInput.emits()
+        ...(useInput.emits() as unknown as InputEmitsMap),
+        'on-open': () => true,
+        'on-close': () => true,
+        clear: () => true,
+        // Emitted when the search text changes (debounced when `remote`). Emits '' when the menu closes.
+        search: (_query: string) => true
     },
     props: {
         ...useInput.props(),
@@ -151,6 +171,17 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        // Options are loaded from a server: search no longer filters locally,
+        // the consumer listens to `search` and updates `options`.
+        remote: {
+            type: Boolean,
+            default: false
+        },
+        // Debounce (ms) applied to the `search` event when `remote`
+        searchDebounce: {
+            type: Number,
+            default: 300
+        },
         size: {
             type: String as PropType<Size>,
             default: 'md'
@@ -184,7 +215,7 @@ export default defineComponent({
             default: false
         },
         error: {
-            type: String
+            type: String as PropType<string | null>
         },
         allowBlank: {
             type: Boolean,
@@ -202,9 +233,26 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        fill: {
+            type: Boolean,
+            default: false
+        },
+        noBorder: {
+            type: Boolean,
+            default: false
+        },
         zIndex: {
             type: Number
         },
+        clearable: {
+            type: Boolean,
+            default: false
+        },
+        // Value a single select resets to when cleared (e.g. a "Don't restrict" option)
+        clearValue: {
+            type: [String, Number, Boolean, Object] as PropType<string | number | boolean | object | null>,
+            default: undefined
+        },
         showDataOptions: {
             type: Boolean,
             default: true
@@ -214,6 +262,8 @@ export default defineComponent({
     },
     components: {
         MTag,
+        MClearButton,
+        VList,
         PopoverContent,
         PopoverPortal,
         PopoverRoot,
@@ -221,7 +271,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>();
@@ -267,6 +317,23 @@ export default defineComponent({
 
         const disabled = computed(() => formDisabled || props.disabled);
         const loading = computed(() => formLoading || props.loading);
+        // In remote mode `loading` is shown inside the menu (so the user can keep
+        // typing while a search is in flight) rather than locking the trigger.
+        const blocked = computed(() => disabled.value || (loading.value && !props.remote));
+
+        // Remote options come and go between searches, so remember every option we've
+        // seen to keep labels for selected values that are no longer in `options`.
+        const knownOptions = new Map<any, any>();
+        watch(
+            () => props.options,
+            (options) => {
+                if (!props.remote || !options) {
+                    return;
+                }
+                options.forEach(option => knownOptions.set(option[props.optionValue], option));
+            },
+            { immediate: true }
+        );
 
         const selected = computed<any | any[]>({
             get() {
@@ -331,80 +398,44 @@ export default defineComponent({
             };
         });
 
+        const showRemoteLoading = computed(() => props.remote && loading.value);
+
         const computedOptions = computed(() => {
             if (!props.options || props.options.length == 0) {
                 return [];
             }
 
-            // Filter options by search
-            if (props.searchable && search.value) {
-                let options = props.options
-                    .filter(option => {
-                        return option[props.optionLabel]
-                            .toLowerCase()
-                            .includes(search.value.toLowerCase());
-                    })
-                    .map(option => {
-                        if (option[props.optionValue] === undefined) {
-                            throw new Error('Option value is undefined');
-                        }
-
-                        if (option[props.optionLabel] === undefined) {
-                            throw new Error('Option label is undefined');
-                        }
-
-                        let value = option[props.optionValue];
-                        let active: boolean;
-                        if (props.multiple && Array.isArray(selected.value)) {
-                            active = selected.value.includes(value);
-                        } else {
-                            active = selected.value === value;
-                        }
-
-                        return {
-                            value: value,
-                            label: option[props.optionLabel],
-                            active: active,
-                            onClick: () => handleOptionClick(value)
-                        };
-                    });
+            // Remote options are already filtered by the server
+            const query = props.searchable && !props.remote
+                ? search.value.toLowerCase()
+                : '';
 
-                if (props.allowBlank) {
-                    options.unshift({
-                        value: '',
-                        label: '',
-                        active: false,
-                        onClick: () => handleOptionClick('')
-                    });
-                }
-
-                return options;
-            }
-
-            let options = props.options.map(option => {
-                if (option[props.optionValue] === undefined) {
-                    throw new Error('Option value is undefined');
-                }
+            const options = props.options
+                .filter(option => !query || option[props.optionLabel].toLowerCase().includes(query))
+                .map(option => {
+                    if (option[props.optionValue] === undefined) {
+                        throw new Error('Option value is undefined');
+                    }
 
-                if (option[props.optionLabel] === undefined) {
-                    throw new Error('Option label is undefined');
-                }
+                    if (option[props.optionLabel] === undefined) {
+                        throw new Error('Option label is undefined');
+                    }
 
-                let value = option[props.optionValue];
-                let active: boolean;
-                if (props.multiple && Array.isArray(selected.value)) {
-                    active = selected.value.includes(value);
-                } else {
-                    active = selected.value === value;
-                }
+                    const value = option[props.optionValue];
+                    let active: boolean;
+                    if (props.multiple && Array.isArray(selected.value)) {
+                        active = selected.value.includes(value);
+                    } else {
+                        active = selected.value === value;
+                    }
 
-                return {
-                    value: value,
-                    label: option[props.optionLabel],
-                    active: active,
-                    onClick: () => handleOptionClick(value)
-                };
-            });
+                    return {
+                        value: value,
+                        label: option[props.optionLabel],
+                        active: active,
+                        onClick: () => handleOptionClick(value)
+                    };
+                });
 
             if (props.allowBlank) {
                 options.unshift({
@@ -441,7 +472,7 @@ export default defineComponent({
         }
 
         function openSelect(forceOpen = false) {
-            if (disabled.value || loading.value) {
+            if (blocked.value) {
                 return;
             }
 
@@ -593,9 +624,33 @@ export default defineComponent({
             }
         }
 
-        function removeSelected(event: MouseEvent, value: string | number) {
-            event.preventDefault();
-            event.stopPropagation();
+        const hasValue = computed(() => {
+            if (props.multiple) {
+                return Array.isArray(selected.value) && selected.value.length > 0;
+            }
+
+            if (props.clearValue !== undefined && selected.value === props.clearValue) {
+                return false;
+            }
+
+            return !!selected.value;
+        });
+
+        const showClear = computed(() => {
+            return props.clearable
+                && hasValue.value
+                && !blocked.value;
+        });
+
+        function clearSelected() {
+            selected.value = props.multiple
+                ? []
+                : (props.clearValue !== undefined ? props.clearValue : '');
+            emit('clear');
+            container.value?.focus();
+        }
+
+        function removeSelected(value: string | number) {
             if (!props.multiple) {
                 return;
             }
@@ -741,21 +796,37 @@ 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.hasClear]: showClear.value,
                     [style.selectedTags]:
                         props.multiple &&
                         Array.isArray(selected.value) &&
                         selected.value.length > 0,
-                    [style.focused]: open.value || focused.value,
-                    // [`m-select--${props.size}`]: props.size,
-                    'm-select--disabled': disabled.value || loading.value,
+                    [style.focused]: !props.noBorder && (open.value || focused.value),
+                    [style.fillBase]: props.fill,
+                    [style.noBorder]: props.noBorder,
+                    'm-select--disabled': blocked.value,
                     'm-select--focused': open.value || focused.value,
                     'm-select--multiple': props.multiple,
                     'm-select--error': formError.value
@@ -766,7 +837,7 @@ export default defineComponent({
         function getSelectedLabel(value: string | number | []) {
             const option = props.options.find(
                 i => i[props.optionValue] === value
-            );
+            ) ?? (props.remote ? knownOptions.get(value) : undefined);
             if (!option) {
                 return null;
             }
@@ -784,21 +855,42 @@ 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' });
+            }
+        });
+
+        // Emit search changes. Remote searches are debounced so we don't hit the
+        // server on every keystroke; clearing the query (e.g. on close) is immediate.
+        let searchTimer: ReturnType<typeof setTimeout> | undefined;
+        watch(search, (query: string) => {
+            clearTimeout(searchTimer);
+
+            if (props.remote && props.searchDebounce > 0 && query !== '') {
+                searchTimer = setTimeout(() => emit('search', query), props.searchDebounce);
+                return;
+            }
+
+            emit('search', query);
+        });
+        onBeforeUnmount(() => clearTimeout(searchTimer));
+
+        // Remote options replace the list under the cursor, keep the highlight in range
+        watch(computedOptions, (options) => {
+            if (selectedIndex.value !== undefined && selectedIndex.value >= options.length) {
+                selectedIndex.value = 0;
             }
         });
 
         watch(open, (value: boolean) => {
             nextTick(() => {
                 if (!value) {
+                    emit('on-close');
                     search.value = '';
                 }
 
                 if (value) {
+                    emit('on-open');
                     zIndex.value = nextZIndex();
                 }
 
@@ -816,7 +908,7 @@ export default defineComponent({
                     });
                 }
 
-                if (value && optionsRef.value) {
+                if (value) {
                     const selectedValue = Array.isArray(selected.value)
                         ? selected.value[0]
                         : selected.value;
@@ -824,9 +916,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;
@@ -852,6 +942,7 @@ export default defineComponent({
         const isOpen = computed(() => {
             if (
                 props.multiple &&
+                !props.remote &&
                 computedOptions.value.length == 0 &&
                 !search.value
             ) {
@@ -894,7 +985,7 @@ export default defineComponent({
 
         return {
             container,
-            optionsRef,
+            virtualListRef,
             searchRef,
             selectRef,
             popper,
@@ -922,13 +1013,22 @@ export default defineComponent({
             getSelectedLabel,
             openSelect,
             removeSelected,
+            showClear,
+            clearSelected,
             inputError,
             transitionName,
             inputListeners,
             style,
             focused,
+            blocked,
+            showRemoteLoading,
             fade,
-            toggleAllItems
+            toggleAllItems,
+            optionItemHeight,
+            optionsHeight,
+            optionSizeClass,
+            fillRootClass,
+            fillLabelClass
         };
     }
 });

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

@@ -0,0 +1,18 @@
+<template>
+    <div style="display: flex; flex-direction: column; gap: 12px; max-width: 320px;">
+        <MSelect v-model="single" :options="options" clearable />
+        <MSelect v-model="multiple" :options="options" multiple clearable />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const options = Array.from({ length: 10 }, (_, i) => ({
+    value: i + 1,
+    label: `Option ${i + 1}`
+}));
+
+const single = ref(2);
+const multiple = ref([1, 2]);
+</script>

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>