@teammodlr/ui-kit 3.0.0-beta.2 → 3.0.0-beta.20

package/src/components/dialog/Dialog.vue

@@ -6,6 +6,7 @@
                 <DialogOverlay v-if="isOpen && modal" force-mount :class="backdropClasses" style="z-index: 10"  />
             </Transition>
             <Transition type="animation" :enter-active-class="modalScale.enterActive" :leave-active-class="modalScale.leaveActive"
+                @after-leave="handleAfterLeave"
                 :enter-from-class="modalScale.enterFrom" :leave-to-class="modalScale.leaveTo">
 
                 <DialogContent
@@ -15,12 +16,12 @@
                     :style="computedStyle"
                     :disable-outside-pointer-events="modal"
                     @open-auto-focus="handleOpenAutoFocus"
-                    @escape-key-down.prevent
-                    @pointer-down-outside.prevent
-                    @focus-outside="handleFocusOutside"
-                    @interact-outside.prevent
+                    @escape-key-down="handleEscapeKeyDown"
+                    @pointer-down-outside="handleOutsideEvent"
+                    @focus-outside="handleOutsideEvent"
+                    @interact-outside="handleOutsideEvent"
                 >
-                    <FocusScope :trapped="focusTrap" :loop="focusTrap">
+                    <FocusScope :trapped="activeFocusTrap" :loop="activeFocusTrap">
                         <slot v-if="$slots.container" name="container" :close="close"></slot>
                         <template v-else>
                             <div :class="style.content">
@@ -125,7 +126,7 @@ export default defineComponent({
         },
     },
     // Eventually remove 'open', i lazy cant be assed for now
-    emits: ['onOpen', 'onClose', 'update:open', 'open'],
+    emits: ['onOpen', 'onClose', 'update:open', 'open', 'close'],
     setup(props, { emit, expose }) {
         const wrapper = ref<HTMLElement | null>(null);
         const dialog = shallowRef<HTMLElement | ComponentPublicInstance | null>(null);
@@ -135,6 +136,8 @@ export default defineComponent({
         const zIndex = ref(props.zIndex ?? nextZIndex());
         provide(ZINDEX, zIndex);
         const hasOpened = ref(false);
+        const focusTrapOverride = ref<boolean | null>(null);
+        const activeFocusTrap = computed(() => focusTrapOverride.value ?? props.focusTrap);
 
         const isDragging = ref<boolean>(false);
 
@@ -221,6 +224,16 @@ export default defineComponent({
             handleOpenChange(false);
         }
 
+        function handleEscapeKeyDown(event: KeyboardEvent) {
+            event.preventDefault();
+            event.stopPropagation();
+            close();
+        }
+
+        function handleAfterLeave() {
+            emit('close');
+        }
+
         function onCloseEmit() {
             emit('onClose');
             if (props.onClose) {
@@ -234,12 +247,10 @@ export default defineComponent({
             zIndex.value = nextZIndex();
         }
 
-        function handleFocusOutside(event: Event) {
-            if (!props.focusTrap) {
-                return;
+        function handleOutsideEvent(event: Event) {
+            if (activeFocusTrap.value) {
+                event.preventDefault();
             }
-
-            event.preventDefault();
         }
 
         function handleOpenAutoFocus(event: Event) {
@@ -340,8 +351,13 @@ export default defineComponent({
             { immediate: true }
         );
 
+        function setFocusTrap(value: boolean) {
+            focusTrapOverride.value = value;
+        }
+
         expose({
             close,
+            setFocusTrap,
         });
 
         return {
@@ -360,11 +376,14 @@ export default defineComponent({
             wrapperClasses,
             wrapperStyle,
             close,
+            handleAfterLeave,
+            handleEscapeKeyDown,
             onEnter,
             handleOpenChange,
             handleOpenAutoFocus,
-            handleFocusOutside,
-            isOpen: computed(() => props.open)
+            handleOutsideEvent,
+            isOpen: computed(() => props.open),
+            activeFocusTrap,
         };
     },
 });

package/src/components/dialog/style/Dialog.css.ts

@@ -60,7 +60,16 @@ export const content = style({
     border: `1px solid ${themeVars.color.gray[300]}`,
     borderRadius: themeVars.rounded.medium,
     pointerEvents: 'auto',
-    boxShadow: `2px 2px 8px rgba(128, 128, 128, 0.1), 0 9px 28px 8px rgba(0,0,0,.05)`
+    boxShadow: `2px 2px 8px rgba(128, 128, 128, 0.1), 0 9px 28px 8px rgba(0,0,0,.05)`,
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            boxShadow: `2px 2px 8px rgba(128, 128, 128, 0.1), 0 9px 28px 8px rgba(0,0,0,.05)`
+        }
+    }
 });
 
 export const header = style({
@@ -119,6 +128,11 @@ export const close = style([
         ':focus': {
             backgroundColor: themeVars.color.gray[150]
         },
+        ':focus-visible': {
+            outline: 'none',
+            boxShadow: 'none',
+            backgroundColor: themeVars.color.gray[150]
+        },
         '::before': {
             content: '""',
             position: 'absolute',

package/src/components/dialogprovider/DialogProvider.vue

@@ -39,6 +39,10 @@ export default defineComponent({
             };
         }
 
+        function setFocusTrap(key: string, enabled: boolean) {
+            dialogRefs.value[key]?.setFocusTrap(enabled);
+        }
+
         function create(key: string, options: DialogOptions = {}): DialogReactive {
             if (dialogMap[key]) {
                 // Merge new options into existing reactive options
@@ -72,6 +76,7 @@ export default defineComponent({
                         handleClose(key);
                     }
                 },
+                setFocusTrap: (enabled: boolean) => setFocusTrap(key, enabled),
             };
 
             dialogMap[key] = dialog;
@@ -122,7 +127,8 @@ export default defineComponent({
             remove,
             hasOpenDialog: () => hasOpenDialog.value,
             openDialogCount: () => openDialogCount.value,
-            openDialogKeys: () => openDialogKeys.value
+            openDialogKeys: () => openDialogKeys.value,
+            setFocusTrap,
         };
 
         provide('m-dialog', api);

package/src/components/dialogprovider/types.ts

@@ -19,6 +19,7 @@ export interface DialogReactive {
     options: DialogOptions;
     open: () => void;
     close: () => void;
+    setFocusTrap: (enabled: boolean) => void;
 }
 
 export interface DialogApiInjection {
@@ -27,4 +28,5 @@ export interface DialogApiInjection {
     hasOpenDialog: () => boolean;
     openDialogCount: () => number;
     openDialogKeys: () => string[];
+    setFocusTrap: (key: string, enabled: boolean) => void;
 }

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>