@teammodlr/ui-kit 3.0.0-beta.17 → 3.0.0-beta.19

package/src/components/drawer/Drawer.vue

@@ -0,0 +1,276 @@
+<template>
+    <DialogRoot :open="isOpen" modal @update:open="handleOpenChange">
+        <DialogTrigger v-if="hasTrigger" as-child>
+            <slot name="trigger" />
+        </DialogTrigger>
+        <DialogPortal to="body">
+            <Transition
+                appear
+                type="animation"
+                :enter-active-class="fade.enterActive"
+                :leave-active-class="fade.leaveActive"
+                :enter-from-class="fade.enterFrom"
+                :leave-to-class="fade.leaveTo"
+            >
+                <DialogOverlay
+                    v-if="isOpen && showMask"
+                    force-mount
+                    :class="style.mask"
+                    :style="{ zIndex }"
+                />
+            </Transition>
+            <Transition
+                appear
+                type="animation"
+                :enter-active-class="currentTransition.enterActive"
+                :leave-active-class="currentTransition.leaveActive"
+                :enter-from-class="currentTransition.enterFrom"
+                :leave-to-class="currentTransition.leaveTo"
+            >
+                <DialogContent
+                    v-if="isOpen"
+                    force-mount
+                    :class="[style.placement[placement]]"
+                    :style="contentStyle"
+                    :disable-outside-pointer-events="true"
+                    @open-auto-focus="handleOpenAutoFocus"
+                    @escape-key-down="onEscapeKeyDown"
+                    @pointer-down-outside="onPointerDownOutside"
+                    @interact-outside="onInteractOutside"
+                >
+                    <FocusScope :trapped="focusTrap" :loop="focusTrap">
+                        <div v-if="hasTitle || showClose" :class="style.header">
+                            <DialogTitle as-child>
+                                <div :class="style.title">
+                                    <slot name="title">{{ title }}</slot>
+                                </div>
+                            </DialogTitle>
+                            <DialogClose v-if="showClose" as-child>
+                                <button :class="style.close" aria-label="Close" />
+                            </DialogClose>
+                        </div>
+                        <div :class="style.body" ref="bodyRef">
+                            <slot />
+                        </div>
+                        <div v-if="hasFooter" :class="style.footer">
+                            <slot name="footer" />
+                        </div>
+                    </FocusScope>
+                </DialogContent>
+            </Transition>
+        </DialogPortal>
+    </DialogRoot>
+</template>
+
+<script lang="ts">
+import type { CSSProperties, PropType } from 'vue';
+import {
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+    DialogTitle,
+    DialogTrigger,
+    FocusScope
+} from 'reka-ui';
+import { computed, defineComponent, provide, ref, watch } from 'vue';
+import * as style from './style';
+import { fade } from '../../styles/transitions.css';
+import { useZIndex, ZINDEX } from '../../composables/useZIndex';
+
+type Placement = 'left' | 'right' | 'top' | 'bottom';
+
+export default defineComponent({
+    name: 'MDrawer',
+    components: {
+        DialogClose,
+        DialogContent,
+        DialogOverlay,
+        DialogPortal,
+        DialogRoot,
+        DialogTitle,
+        DialogTrigger,
+        FocusScope
+    },
+    props: {
+        open: {
+            type: Boolean,
+            default: undefined
+        },
+        placement: {
+            type: String as PropType<Placement>,
+            default: 'right'
+        },
+        width: {
+            type: [String, Number],
+            default: '378px'
+        },
+        height: {
+            type: [String, Number],
+            default: '378px'
+        },
+        title: {
+            type: String,
+            default: ''
+        },
+        showClose: {
+            type: Boolean,
+            default: true
+        },
+        showMask: {
+            type: Boolean,
+            default: true
+        },
+        outsideClose: {
+            type: Boolean,
+            default: true
+        },
+        focusTrap: {
+            type: Boolean,
+            default: true
+        },
+        zIndex: {
+            type: Number
+        }
+    },
+    emits: ['open', 'close', 'update:open'],
+    setup(props, { emit, slots }) {
+        const { nextZIndex } = useZIndex();
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+        provide(ZINDEX, zIndex);
+
+        const bodyRef = ref<HTMLElement | null>(null);
+        const hasFooter = computed(() => !!slots.footer);
+        const hasTitle = computed(() => !!slots.title || !!props.title);
+        const hasTrigger = computed(() => !!slots.trigger);
+
+        const internalOpen = ref(false);
+
+        const isOpen = computed({
+            get: () => {
+                if (props.open !== undefined) return props.open;
+                return internalOpen.value;
+            },
+            set: (value: boolean) => {
+                if (props.open !== undefined) {
+                    emit('update:open', value);
+                } else {
+                    internalOpen.value = value;
+                }
+            }
+        });
+
+        const isHorizontal = computed(() =>
+            props.placement === 'left' || props.placement === 'right'
+        );
+
+        const contentStyle = computed<CSSProperties>(() => {
+            const s: CSSProperties = { zIndex: zIndex.value };
+            if (isHorizontal.value) {
+                const w = props.width;
+                s.width = typeof w === 'number' ? `${w}px` : w;
+            } else {
+                const h = props.height;
+                s.height = typeof h === 'number' ? `${h}px` : h;
+            }
+            return s;
+        });
+
+        const currentTransition = computed(() => style.slideTransition[props.placement]);
+
+        const focusableSelector = [
+            '[autofocus]',
+            'input:not([type="hidden"])',
+            'textarea',
+            'select',
+            '[contenteditable="true"]',
+            'button',
+            'a[href]',
+            '[tabindex]:not([tabindex="-1"])'
+        ].join(', ');
+
+        function getFirstFocusable() {
+            if (!bodyRef.value) return null;
+            return Array.from(
+                bodyRef.value.querySelectorAll<HTMLElement>(focusableSelector)
+            ).find(el =>
+                !el.matches(':disabled') &&
+                el.getAttribute('aria-disabled') !== 'true' &&
+                el.getAttribute('aria-hidden') !== 'true' &&
+                el.getClientRects().length > 0
+            ) ?? null;
+        }
+
+        const handleOpenAutoFocus = (e: Event) => {
+            const first = getFirstFocusable();
+            if (first) {
+                e.preventDefault();
+                first.focus();
+            }
+        };
+
+        const close = (e: MouseEvent | KeyboardEvent | undefined) => {
+            emit('close', e);
+            isOpen.value = false;
+        };
+
+        const onEscapeKeyDown = (e: KeyboardEvent) => {
+            e.stopPropagation();
+            close(e);
+        };
+
+        const onPointerDownOutside = (e: Event) => {
+            if (!props.outsideClose) e.preventDefault();
+        };
+
+        const onInteractOutside = (e: Event) => {
+            if (!props.outsideClose) {
+                e.preventDefault();
+                return;
+            }
+            close(e as MouseEvent | KeyboardEvent);
+        };
+
+        const handleOpenChange = (value: boolean) => {
+            if (!value && isOpen.value) {
+                close(undefined);
+                return;
+            }
+            isOpen.value = value;
+        };
+
+        watch(
+            () => isOpen.value,
+            (next, prev) => {
+                if (next && !prev) {
+                    zIndex.value = props.zIndex ?? nextZIndex();
+                    emit('open');
+                }
+            }
+        );
+
+        const open = () => { isOpen.value = true; };
+
+        return {
+            style,
+            fade,
+            isOpen,
+            zIndex,
+            hasFooter,
+            hasTitle,
+            hasTrigger,
+            bodyRef,
+            contentStyle,
+            currentTransition,
+            open,
+            close,
+            handleOpenAutoFocus,
+            handleOpenChange,
+            onEscapeKeyDown,
+            onPointerDownOutside,
+            onInteractOutside
+        };
+    }
+});
+</script>

package/src/components/drawer/examples/basic.vue

@@ -0,0 +1,15 @@
+<template>
+    <MDrawer ref="drawer" title="Basic Drawer">
+        <p style="margin: 0">This is the drawer body. It slides in from the right by default.</p>
+    </MDrawer>
+
+    <MButton @click="drawer?.open()">Open Drawer</MButton>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+
+const drawer = ref<InstanceType<typeof MDrawer> | null>(null);
+</script>

package/src/components/drawer/examples/custom-title.vue

@@ -0,0 +1,21 @@
+<template>
+    <MDrawer ref="drawer">
+        <template #title>
+            <span style="display: flex; align-items: center; gap: 6px">
+                <span style="font-size: 1.1em">⚙️</span>
+                Settings
+            </span>
+        </template>
+        <p style="margin: 0">Custom title slot with an icon.</p>
+    </MDrawer>
+
+    <MButton @click="drawer?.open()">Open Drawer</MButton>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+
+const drawer = ref<InstanceType<typeof MDrawer> | null>(null);
+</script>

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

@@ -0,0 +1,24 @@
+import MDrawer from '../Drawer.vue';
+import {
+    MDrawerBasic,
+    MDrawerPlacements,
+    MDrawerNoMask,
+    MDrawerWithFooter,
+    MDrawerCustomTitle,
+    MDrawerWithTrigger,
+    MDrawerNoOutsideClose
+} from './index';
+import { createStory } from '../../../__storybook__';
+
+export default {
+    component: MDrawer,
+    title: 'Components/Drawer'
+};
+
+export const Basic = createStory(MDrawerBasic);
+export const WithTrigger = createStory(MDrawerWithTrigger);
+export const Placements = createStory(MDrawerPlacements);
+export const NoMask = createStory(MDrawerNoMask);
+export const WithFooter = createStory(MDrawerWithFooter);
+export const CustomTitle = createStory(MDrawerCustomTitle);
+export const NoOutsideClose = createStory(MDrawerNoOutsideClose);

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

@@ -0,0 +1,7 @@
+export { default as MDrawerBasic } from './basic.vue';
+export { default as MDrawerPlacements } from './placements.vue';
+export { default as MDrawerNoMask } from './no-mask.vue';
+export { default as MDrawerWithFooter } from './with-footer.vue';
+export { default as MDrawerCustomTitle } from './custom-title.vue';
+export { default as MDrawerWithTrigger } from './with-trigger.vue';
+export { default as MDrawerNoOutsideClose } from './no-outside-close.vue';

package/src/components/drawer/examples/no-mask.vue

@@ -0,0 +1,15 @@
+<template>
+    <MDrawer v-model:open="isOpen" title="No Backdrop" :show-mask="false">
+        <p style="margin: 0">This drawer has no backdrop overlay.</p>
+    </MDrawer>
+
+    <MButton @click="isOpen = true">Open (no backdrop)</MButton>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+
+const isOpen = ref(false);
+</script>

package/src/components/drawer/examples/no-outside-close.vue

@@ -0,0 +1,15 @@
+<template>
+    <MDrawer ref="drawer" title="Persistent Drawer" :outside-close="false">
+        <p style="margin: 0">Clicking outside won't close this drawer. Use the × button or Escape.</p>
+    </MDrawer>
+
+    <MButton @click="drawer?.open()">Open Drawer</MButton>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+
+const drawer = ref<InstanceType<typeof MDrawer> | null>(null);
+</script>

package/src/components/drawer/examples/placements.vue

@@ -0,0 +1,28 @@
+<template>
+    <MDrawer v-model:open="isOpen" :placement="activePlacement" :title="`Drawer — ${activePlacement}`">
+        <p style="margin: 0">Sliding in from the <strong>{{ activePlacement }}</strong>.</p>
+    </MDrawer>
+
+    <div style="display: flex; gap: 8px; flex-wrap: wrap">
+        <MButton @click="open('left')">Left</MButton>
+        <MButton @click="open('right')">Right</MButton>
+        <MButton @click="open('top')">Top</MButton>
+        <MButton @click="open('bottom')">Bottom</MButton>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+
+type Placement = 'left' | 'right' | 'top' | 'bottom';
+
+const isOpen = ref(false);
+const activePlacement = ref<Placement>('right');
+
+function open(placement: Placement) {
+    activePlacement.value = placement;
+    isOpen.value = true;
+}
+</script>

package/src/components/drawer/examples/with-footer.vue

@@ -0,0 +1,21 @@
+<template>
+    <MDrawer v-model:open="isOpen" title="Drawer with Footer">
+        <p style="margin: 0">Drawer body content goes here.</p>
+        <template #footer>
+            <div style="display: flex; gap: 8px; justify-content: flex-end; width: 100%">
+                <MButton @click="isOpen = false">Cancel</MButton>
+                <MButton variant="primary" @click="isOpen = false">Save</MButton>
+            </div>
+        </template>
+    </MDrawer>
+
+    <MButton @click="isOpen = true">Open Drawer</MButton>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+
+const isOpen = ref(false);
+</script>

package/src/components/drawer/examples/with-trigger.vue

@@ -0,0 +1,13 @@
+<template>
+    <MDrawer title="Profile">
+        <template #trigger>
+            <MButton>Edit profile</MButton>
+        </template>
+        <p style="margin: 0">Trigger slot — no ref or v-model needed.</p>
+    </MDrawer>
+</template>
+
+<script lang="ts" setup>
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+</script>

package/src/components/drawer/style/Drawer.css.ts

@@ -0,0 +1,208 @@
+import {
+    globalKeyframes,
+    style,
+    styleVariants
+} from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+export const mask = style({
+    position: 'fixed',
+    top: 0,
+    insetInlineEnd: 0,
+    bottom: 0,
+    insetInlineStart: 0,
+    height: '100%',
+    backgroundColor: 'hsla(0,0%,45.1%,0.7)'
+});
+
+const drawerBase = {
+    position: 'fixed' as const,
+    backgroundColor: '#fff',
+    display: 'flex',
+    flexDirection: 'column' as const,
+    boxShadow:
+        '0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05)',
+    selectors: {
+        '&:focus': { outline: 'none' },
+        '&:focus-visible': { outline: 'none' }
+    }
+};
+
+export const placement = styleVariants({
+    left: {
+        ...drawerBase,
+        top: 0,
+        left: 0,
+        bottom: 0,
+        height: '100%'
+    },
+    right: {
+        ...drawerBase,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        height: '100%'
+    },
+    top: {
+        ...drawerBase,
+        top: 0,
+        left: 0,
+        right: 0,
+        width: '100%'
+    },
+    bottom: {
+        ...drawerBase,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        width: '100%'
+    }
+});
+
+const DURATION = '0.28s';
+const TIMING = 'cubic-bezier(0.16, 1, 0.3, 1)';
+
+const SLIDE_LEFT_IN = 'drawer-slide-left-in';
+const SLIDE_LEFT_OUT = 'drawer-slide-left-out';
+const SLIDE_RIGHT_IN = 'drawer-slide-right-in';
+const SLIDE_RIGHT_OUT = 'drawer-slide-right-out';
+const SLIDE_TOP_IN = 'drawer-slide-top-in';
+const SLIDE_TOP_OUT = 'drawer-slide-top-out';
+const SLIDE_BOTTOM_IN = 'drawer-slide-bottom-in';
+const SLIDE_BOTTOM_OUT = 'drawer-slide-bottom-out';
+
+globalKeyframes(SLIDE_LEFT_IN, {
+    from: { transform: 'translateX(-100%)' },
+    to: { transform: 'translateX(0)' }
+});
+globalKeyframes(SLIDE_LEFT_OUT, {
+    from: { transform: 'translateX(0)' },
+    to: { transform: 'translateX(-100%)' }
+});
+globalKeyframes(SLIDE_RIGHT_IN, {
+    from: { transform: 'translateX(100%)' },
+    to: { transform: 'translateX(0)' }
+});
+globalKeyframes(SLIDE_RIGHT_OUT, {
+    from: { transform: 'translateX(0)' },
+    to: { transform: 'translateX(100%)' }
+});
+globalKeyframes(SLIDE_TOP_IN, {
+    from: { transform: 'translateY(-100%)' },
+    to: { transform: 'translateY(0)' }
+});
+globalKeyframes(SLIDE_TOP_OUT, {
+    from: { transform: 'translateY(0)' },
+    to: { transform: 'translateY(-100%)' }
+});
+globalKeyframes(SLIDE_BOTTOM_IN, {
+    from: { transform: 'translateY(100%)' },
+    to: { transform: 'translateY(0)' }
+});
+globalKeyframes(SLIDE_BOTTOM_OUT, {
+    from: { transform: 'translateY(0)' },
+    to: { transform: 'translateY(100%)' }
+});
+
+export const slideTransition = {
+    left: {
+        enterActive: style({ animation: `${DURATION} ${SLIDE_LEFT_IN} ${TIMING}`, willChange: 'transform' }),
+        leaveActive: style({ animation: `${DURATION} ${SLIDE_LEFT_OUT} ${TIMING}`, willChange: 'transform' }),
+        enterFrom: style({ transform: 'translateX(-100%)' }),
+        leaveTo: style({ transform: 'translateX(-100%)' })
+    },
+    right: {
+        enterActive: style({ animation: `${DURATION} ${SLIDE_RIGHT_IN} ${TIMING}`, willChange: 'transform' }),
+        leaveActive: style({ animation: `${DURATION} ${SLIDE_RIGHT_OUT} ${TIMING}`, willChange: 'transform' }),
+        enterFrom: style({ transform: 'translateX(100%)' }),
+        leaveTo: style({ transform: 'translateX(100%)' })
+    },
+    top: {
+        enterActive: style({ animation: `${DURATION} ${SLIDE_TOP_IN} ${TIMING}`, willChange: 'transform' }),
+        leaveActive: style({ animation: `${DURATION} ${SLIDE_TOP_OUT} ${TIMING}`, willChange: 'transform' }),
+        enterFrom: style({ transform: 'translateY(-100%)' }),
+        leaveTo: style({ transform: 'translateY(-100%)' })
+    },
+    bottom: {
+        enterActive: style({ animation: `${DURATION} ${SLIDE_BOTTOM_IN} ${TIMING}`, willChange: 'transform' }),
+        leaveActive: style({ animation: `${DURATION} ${SLIDE_BOTTOM_OUT} ${TIMING}`, willChange: 'transform' }),
+        enterFrom: style({ transform: 'translateY(100%)' }),
+        leaveTo: style({ transform: 'translateY(100%)' })
+    }
+};
+
+export const header = style({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: `${themeVars.space[4]} ${themeVars.space[4]} 0 ${themeVars.space[4]}`,
+    flexShrink: '0'
+});
+
+export const title = style({
+    margin: 0,
+    fontSize: `${themeVars.fontSize.xlarge}`,
+    fontWeight: '500',
+    color: themeVars.color.font.default
+});
+
+export const close = style({
+    outline: 'none',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '1.5rem',
+    height: '1.5rem',
+    backgroundColor: 'transparent',
+    border: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    borderRadius: themeVars.rounded.full,
+    position: 'relative',
+    transition: 'background-color 0.2s',
+    ':hover': {
+        backgroundColor: themeVars.color.gray[150]
+    },
+    ':focus-visible': {
+        outline: 'none',
+        backgroundColor: themeVars.color.gray[150]
+    },
+    '::before': {
+        content: '""',
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%) rotate(45deg)',
+        width: '0.8rem',
+        height: '2px',
+        backgroundColor: themeVars.color.gray[500],
+        transformOrigin: 'center'
+    },
+    '::after': {
+        content: '""',
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%) rotate(-45deg)',
+        width: '0.8rem',
+        height: '2px',
+        backgroundColor: themeVars.color.gray[500],
+        transformOrigin: 'center'
+    }
+});
+
+export const body = style({
+    padding: themeVars.space[4],
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: '1',
+    overflowY: 'auto',
+    color: themeVars.color.font.text
+});
+
+export const footer = style({
+    display: 'flex',
+    alignItems: 'center',
+    padding: `0 ${themeVars.space[4]} ${themeVars.space[4]} ${themeVars.space[4]}`,
+    flexShrink: '0'
+});

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

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

package/src/components/index.ts

@@ -55,5 +55,6 @@ export { default as MConfirm } from './confirm/Confirm.vue';
 export { default as MConfirmProvider } from './confirm/ConfirmProvider.vue';
 export { default as MDialog } from './dialog/Dialog.vue';
 export { default as MDialogProvider } from './dialogprovider/DialogProvider.vue';
+export { default as MDrawer } from './drawer/Drawer.vue';
 export { default as MTree } from './tree/Tree.vue';
 export { default as MPopover } from './popover/Popover.vue';