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

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

@@ -0,0 +1,22 @@
+import MPanelDialog from '../PanelDialog.vue';
+import { MPanelDialogBasic, MPanelDialogModal } from './index';
+import { createStory } from '../../../__storybook__';
+
+export default {
+    component: MPanelDialog,
+    title: 'Components/PanelDialog',
+    argTypes: {
+        open: { control: 'boolean' },
+        modal: { control: 'boolean' },
+        draggable: { control: 'boolean' },
+        width: { control: 'text' },
+        height: { control: 'text' },
+        maxHeight: { control: 'text' },
+        handleSelector: { control: 'text' },
+        backdrop: { control: 'boolean' },
+        focusTrap: { control: 'boolean' }
+    }
+};
+
+export const Basic = createStory(MPanelDialogBasic);
+export const Modal = createStory(MPanelDialogModal);

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

@@ -0,0 +1,2 @@
+export { default as MPanelDialogBasic } from './basic.vue';
+export { default as MPanelDialogModal } from './modal.vue';

package/src/components/paneldialog/examples/modal.vue

@@ -0,0 +1,31 @@
+<template>
+    <div>
+        <button @click="open = true">Open modal panel</button>
+        <MPanelDialog
+            v-model:open="open"
+            :modal="true"
+            width="520px"
+            :draggable="false"
+            :backdrop="true"
+        >
+            <div data-panel-handle style="padding: 12px 16px; border-bottom: 1px solid #e4e2ea; font-weight: 600;">
+                Modal panel (drag disabled)
+            </div>
+            <div style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
+                <p style="margin: 0;">Modal variant blocks background interaction and shows an overlay.</p>
+                <MInput placeholder="Focus trap stays inside" />
+                <div style="display: flex; gap: 8px; justify-content: flex-end;">
+                    <button @click="open = false">Close</button>
+                </div>
+            </div>
+        </MPanelDialog>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MPanelDialog from '../PanelDialog.vue';
+import MInput from '../../input/Input.vue';
+
+const open = ref(false);
+</script>

package/src/components/paneldialog/style/PanelDialog.css.ts

@@ -0,0 +1,90 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+export const backdrop = style({
+    position: 'fixed',
+    inset: 0,
+    backgroundColor: 'rgba(0,0,0,.45)',
+    pointerEvents: 'none'
+});
+
+export const dialogContent = style({
+    position: 'fixed',
+    inset: 0,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    outline: 'none',
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none'
+        }
+    }
+});
+
+export const dialogContentModal = style({
+    pointerEvents: 'auto'
+});
+
+export const dialogContentNonModal = style({
+    pointerEvents: 'none'
+});
+
+export const focusScope = style({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    outline: 'none',
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none'
+        }
+    }
+});
+
+export const focusScopeNonModal = style({
+    pointerEvents: 'none'
+});
+
+export const focusScopeModal = style({
+    pointerEvents: 'auto'
+});
+
+export const panel = style({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: '#FFF',
+    backgroundClip: 'padding-box',
+    border: `1px solid ${themeVars.color.gray[300]}`,
+    borderRadius: themeVars.rounded.medium,
+    boxShadow: `2px 2px 8px rgba(128, 128, 128, 0.1), 0 9px 28px 8px rgba(0,0,0,.05)`,
+    overflow: 'hidden',
+    outline: 'none',
+    pointerEvents: 'auto',
+    maxWidth: 'calc(100vw - 32px)',
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none'
+        }
+    }
+});
+
+globalStyle(`${panel} [data-panel-handle]`, {
+    cursor: 'grab'
+});
+
+globalStyle(`${panel} [data-panel-handle]:active`, {
+    cursor: 'grabbing'
+});

package/src/components/paneldialog/style/index.ts

@@ -0,0 +1 @@
+export * from './PanelDialog.css';

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

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>
@@ -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,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>
@@ -101,7 +108,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';
@@ -115,7 +122,13 @@ import {
         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 +140,10 @@ 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
     },
     props: {
         ...useInput.props(),
@@ -184,7 +200,7 @@ export default defineComponent({
             default: false
         },
         error: {
-            type: String
+            type: String as PropType<string | null>
         },
         allowBlank: {
             type: Boolean,
@@ -202,9 +218,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 +247,8 @@ export default defineComponent({
     },
     components: {
         MTag,
+        MClearButton,
+        VList,
         PopoverContent,
         PopoverPortal,
         PopoverRoot,
@@ -221,7 +256,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>();
@@ -593,9 +628,34 @@ 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
+                && !disabled.value
+                && !loading.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,20 +801,36 @@ 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,
+                    [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,21 +860,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();
                 }
 
@@ -816,7 +891,7 @@ export default defineComponent({
                     });
                 }
 
-                if (value && optionsRef.value) {
+                if (value) {
                     const selectedValue = Array.isArray(selected.value)
                         ? selected.value[0]
                         : selected.value;
@@ -824,9 +899,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 +967,7 @@ export default defineComponent({
 
         return {
             container,
-            optionsRef,
+            virtualListRef,
             searchRef,
             selectRef,
             popper,
@@ -922,13 +995,20 @@ export default defineComponent({
             getSelectedLabel,
             openSelect,
             removeSelected,
+            showClear,
+            clearSelected,
             inputError,
             transitionName,
             inputListeners,
             style,
             focused,
             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>

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, MSelectClearable } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
 
@@ -14,3 +14,5 @@ export default {
 export const Basic = createStory(MSelectBasic);
 export const Searchable = createStory(MSelectSearchable);
 export const Multiple = createStory(MSelectMultiple);
+export const Fill = createStory(MSelectFill);
+export const Clearable = createStory(MSelectClearable);

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

@@ -1,3 +1,5 @@
 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';
+export { default as MSelectClearable } from './clearable.vue';