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

package/src/components/dialog/Dialog.vue

@@ -13,6 +13,7 @@
                     v-if="isOpen"
                     ref="dialog"
                     force-mount
+                    :class="style.dialogContent"
                     :style="computedStyle"
                     :disable-outside-pointer-events="modal"
                     @open-auto-focus="handleOpenAutoFocus"
@@ -21,7 +22,7 @@
                     @focus-outside="handleFocusOutside"
                     @interact-outside.prevent
                 >
-                    <FocusScope :trapped="focusTrap" :loop="focusTrap">
+                    <FocusScope :trapped="focusTrap" :loop="focusTrap" :class="style.focusScope">
                         <slot v-if="$slots.container" name="container" :close="close"></slot>
                         <template v-else>
                             <div :class="style.content">
@@ -246,10 +247,6 @@ export default defineComponent({
         }
 
         function handleFocusOutside(event: Event) {
-            if (!props.focusTrap) {
-                return;
-            }
-
             event.preventDefault();
         }
 

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

@@ -72,6 +72,36 @@ export const content = style({
     }
 });
 
+// DialogContent chrome ([role="dialog"]). Covers both the default content
+// above and custom `#container` panels, which bypass `content`.
+// Scoped to the chrome element itself so interactive descendants
+// (inputs, buttons) keep their own focus rings.
+export const dialogContent = style({
+    outline: 'none',
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none'
+        }
+    }
+});
+
+// Inner FocusScope wrapper ([tabindex="-1"]) rendered inside DialogContent.
+// Suppresses the detached black outline seen on drag mousedown / Tab wrap.
+export const focusScope = style({
+    outline: 'none',
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none'
+        }
+    }
+});
+
 export const header = style({
     color: themeVars.color.font.default,
     backgroundColor: '#FFF',

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>