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

package/src/components/paneldialog/PanelDialog.vue

@@ -0,0 +1,509 @@
+<template>
+    <DialogRoot :open="isOpen" :modal="modal" @update:open="handleOpenChange">
+        <DialogPortal to="body">
+            <Transition
+                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 && modal" force-mount :class="style.backdrop" :style="{ zIndex, pointerEvents: 'auto' }" />
+            </Transition>
+            <Transition
+                type="animation"
+                :enter-active-class="modalScale.enterActive"
+                :leave-active-class="modalScale.leaveActive"
+                :enter-from-class="modalScale.enterFrom"
+                :leave-to-class="modalScale.leaveTo"
+                @after-leave="handleAfterLeave"
+            >
+                <DialogContent
+                    v-if="isOpen"
+                    ref="dialogContent"
+                    force-mount
+                    :class="contentClasses"
+                    :style="contentStyle"
+                    :disable-outside-pointer-events="modal"
+                    @open-auto-focus="handleOpenAutoFocus"
+                    @escape-key-down="handleEscapeKeyDown"
+                    @pointer-down-outside.prevent
+                    @focus-outside="handleFocusOutside"
+                    @interact-outside.prevent
+                >
+                    <FocusScope :trapped="focusTrap" :loop="focusTrap" :class="focusScopeClasses">
+                        <slot name="backdrop" />
+                        <div v-if="backdrop && !$slots.backdrop" :class="[style.backdrop, backdropClass]" />
+                        <div
+                            ref="panel"
+                            :class="[style.panel, panelClass]"
+                            :style="panelComputedStyle"
+                            @pointerdown="onPanelPointerDown"
+                        >
+                            <slot :close="close" />
+                        </div>
+                    </FocusScope>
+                </DialogContent>
+            </Transition>
+        </DialogPortal>
+    </DialogRoot>
+</template>
+<script lang="ts">
+import { fade, modalScale } from '../../styles/transitions.css';
+import {
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+    FocusScope
+} from 'reka-ui';
+import {
+    computed,
+    defineComponent,
+    nextTick,
+    onBeforeUnmount,
+    provide,
+    ref,
+    shallowRef,
+    watch,
+    type ComponentPublicInstance,
+    type CSSProperties,
+    type PropType
+} from 'vue';
+import type { ComputedRef } from 'vue';
+import { useZIndex, ZINDEX } from '../../composables/useZIndex';
+import { useEventListener } from '@vueuse/core';
+import * as style from './style';
+
+function toCssSize(value: number | string | undefined): string | undefined {
+    if (value === undefined) {
+        return undefined;
+    }
+
+    return typeof value === 'number' ? `${value}px` : value;
+}
+
+function resolveElement(
+    value: HTMLElement | ComponentPublicInstance | null | undefined
+): HTMLElement | null {
+    if (!value) {
+        return null;
+    }
+
+    if (value instanceof HTMLElement) {
+        return value;
+    }
+
+    if ('$el' in value && value.$el instanceof HTMLElement) {
+        return value.$el;
+    }
+
+    return null;
+}
+
+export default defineComponent({
+    name: 'PanelDialog',
+    components: {
+        DialogContent,
+        DialogOverlay,
+        DialogPortal,
+        DialogRoot,
+        FocusScope
+    },
+    props: {
+        open: {
+            type: Boolean,
+            default: false
+        },
+        modal: {
+            type: Boolean,
+            default: false
+        },
+        width: {
+            type: [Number, String] as PropType<number | string>,
+            default: '500px'
+        },
+        height: {
+            type: [Number, String] as PropType<number | string>,
+            default: undefined
+        },
+        maxHeight: {
+            type: [Number, String] as PropType<number | string>,
+            default: '85vh'
+        },
+        draggable: {
+            type: Boolean,
+            default: true
+        },
+        handleSelector: {
+            type: String,
+            default: '[data-panel-handle]'
+        },
+        backdrop: {
+            type: Boolean,
+            default: false
+        },
+        backdropClass: {
+            type: String,
+            default: ''
+        },
+        panelClass: {
+            type: [String, Array, Object] as PropType<string | unknown[] | Record<string, unknown>>,
+            default: ''
+        },
+        panelStyle: {
+            type: Object as PropType<CSSProperties>,
+            default: undefined
+        },
+        zIndex: {
+            type: Number
+        },
+        focusTrap: {
+            type: Boolean,
+            default: true
+        },
+        onClose: {
+            type: Function as PropType<() => void>,
+            default: () => {}
+        }
+    },
+    emits: {
+        onOpen: () => true,
+        onClose: () => true,
+        'update:open': (_value: boolean) => true,
+        open: () => true,
+        close: () => true,
+        // Fired once the leave animation has finished and the panel is out of the DOM
+        'after-leave': () => true
+    },
+    setup(props, { emit, expose }) {
+        const dialogContent = shallowRef<HTMLElement | ComponentPublicInstance | null>(null);
+        const panel = ref<HTMLElement | null>(null);
+        const { nextZIndex, current: maxZIndex } = useZIndex();
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+        provide(ZINDEX, zIndex);
+        const hasOpened = ref(false);
+
+        const offsetX = ref(0);
+        const offsetY = ref(0);
+        const isDragging = ref(false);
+
+        const dialogContentElement = computed(() => resolveElement(dialogContent.value));
+
+        const isOpen = computed(() => props.open);
+
+        const contentClasses = computed(() => [
+            style.dialogContent,
+            props.modal ? style.dialogContentModal : style.dialogContentNonModal
+        ]);
+
+        const contentStyle: ComputedRef<CSSProperties> = computed(() => ({
+            zIndex: zIndex.value
+        }));
+
+        const focusScopeClasses = computed(() => [
+            style.focusScope,
+            props.modal ? style.focusScopeModal : style.focusScopeNonModal
+        ]);
+
+        const panelComputedStyle: ComputedRef<CSSProperties> = computed(() => ({
+            ...props.panelStyle,
+            width: toCssSize(props.width),
+            height: toCssSize(props.height),
+            maxHeight: toCssSize(props.maxHeight),
+            transform: `translate(${offsetX.value}px, ${offsetY.value}px)`
+        }));
+
+        const focusableSelector = [
+            '[autofocus]',
+            'input:not([type="hidden"])',
+            'textarea',
+            'select',
+            '[contenteditable="true"]',
+            'button',
+            'a[href]',
+            '[tabindex]:not([tabindex="-1"])'
+        ].join(', ');
+
+        function close(): void {
+            handleOpenChange(false);
+        }
+
+        function handleEscapeKeyDown(event: KeyboardEvent): void {
+            event.preventDefault();
+            event.stopPropagation();
+            close();
+        }
+
+        function handleAfterLeave(): void {
+            emit('close');
+            emit('after-leave');
+        }
+
+        function onCloseEmit(): void {
+            emit('onClose');
+            if (props.onClose) {
+                props.onClose();
+            }
+        }
+
+        function onEnter(): void {
+            emit('onOpen');
+            emit('open');
+            zIndex.value = props.zIndex ?? nextZIndex();
+        }
+
+        function handleFocusOutside(event: Event): void {
+            event.preventDefault();
+        }
+
+        function handleOpenAutoFocus(event: Event): void {
+            const element = dialogContentElement.value ?? panel.value;
+
+            if (!element) {
+                return;
+            }
+
+            const firstFocusableElement = Array.from(
+                element.querySelectorAll<HTMLElement>(focusableSelector)
+            ).find(candidate => {
+                return (
+                    !candidate.matches(':disabled') &&
+                    candidate.getAttribute('aria-disabled') !== 'true' &&
+                    candidate.getAttribute('aria-hidden') !== 'true' &&
+                    candidate.getClientRects().length > 0
+                );
+            });
+
+            if (!firstFocusableElement) {
+                return;
+            }
+
+            event.preventDefault();
+            firstFocusableElement.focus();
+        }
+
+        function handleOpenChange(value: boolean): void {
+            if (!value && props.open) {
+                emit('update:open', false);
+                onCloseEmit();
+                hasOpened.value = false;
+
+                return;
+            }
+
+            emit('update:open', value);
+        }
+
+        function clampOffset(): void {
+            const element = panel.value;
+
+            if (!element) {
+                return;
+            }
+
+            const rect = element.getBoundingClientRect();
+            let dx = 0;
+            let dy = 0;
+
+            if (rect.width < window.innerWidth) {
+                if (rect.left < 0) {
+                    dx = -rect.left;
+                } else if (rect.right > window.innerWidth) {
+                    dx = window.innerWidth - rect.right;
+                }
+            } else if (rect.left !== 0) {
+                dx = -rect.left;
+            }
+
+            if (rect.height < window.innerHeight) {
+                if (rect.top < 0) {
+                    dy = -rect.top;
+                } else if (rect.bottom > window.innerHeight) {
+                    dy = window.innerHeight - rect.bottom;
+                }
+            } else if (rect.top !== 0) {
+                dy = -rect.top;
+            }
+
+            if (dx !== 0 || dy !== 0) {
+                offsetX.value += dx;
+                offsetY.value += dy;
+                element.style.transform = `translate(${offsetX.value}px, ${offsetY.value}px)`;
+            }
+        }
+
+        function resetPosition(): void {
+            offsetX.value = 0;
+            offsetY.value = 0;
+
+            if (panel.value) {
+                panel.value.style.transform = 'translate(0px, 0px)';
+            }
+        }
+
+        interface DragState {
+            startX: number;
+            startY: number;
+            baseX: number;
+            baseY: number;
+        }
+
+        let dragState: DragState | null = null;
+
+        function onPointerMove(event: PointerEvent): void {
+            if (!dragState || !panel.value) {
+                return;
+            }
+
+            const element = panel.value;
+            const renderedRect = element.getBoundingClientRect();
+            const renderedX = offsetX.value;
+            const renderedY = offsetY.value;
+            let nextX = dragState.baseX + (event.clientX - dragState.startX);
+            let nextY = dragState.baseY + (event.clientY - dragState.startY);
+            const dx = nextX - renderedX;
+            const dy = nextY - renderedY;
+            const nextRect = {
+                left: renderedRect.left + dx,
+                right: renderedRect.right + dx,
+                top: renderedRect.top + dy,
+                bottom: renderedRect.bottom + dy,
+                width: renderedRect.width,
+                height: renderedRect.height
+            };
+
+            if (nextRect.width < window.innerWidth) {
+                if (nextRect.left < 0) {
+                    nextX -= nextRect.left;
+                } else if (nextRect.right > window.innerWidth) {
+                    nextX -= nextRect.right - window.innerWidth;
+                }
+            }
+
+            if (nextRect.height < window.innerHeight) {
+                if (nextRect.top < 0) {
+                    nextY -= nextRect.top;
+                } else if (nextRect.bottom > window.innerHeight) {
+                    nextY -= nextRect.bottom - window.innerHeight;
+                }
+            }
+
+            offsetX.value = nextX;
+            offsetY.value = nextY;
+            element.style.transform = `translate(${nextX}px, ${nextY}px)`;
+        }
+
+        function onPointerUp(): void {
+            dragState = null;
+            isDragging.value = false;
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+        }
+
+        function onPanelPointerDown(event: PointerEvent): void {
+            if (!props.draggable || !panel.value) {
+                return;
+            }
+
+            if (event.button !== 0) {
+                return;
+            }
+
+            const target = event.target as HTMLElement | null;
+
+            if (!target || typeof target.closest !== 'function') {
+                return;
+            }
+
+            if (props.handleSelector && !target.closest(props.handleSelector)) {
+                return;
+            }
+
+            if (
+                target.closest(
+                    'button, input, select, textarea, a[href], [contenteditable="true"]'
+                )
+            ) {
+                return;
+            }
+
+            if (zIndex.value < maxZIndex.value) {
+                zIndex.value = nextZIndex();
+            }
+
+            dragState = {
+                startX: event.clientX,
+                startY: event.clientY,
+                baseX: offsetX.value,
+                baseY: offsetY.value
+            };
+            isDragging.value = true;
+            window.addEventListener('pointermove', onPointerMove);
+            window.addEventListener('pointerup', onPointerUp);
+            event.preventDefault();
+        }
+
+        function onWindowResize(): void {
+            if (props.open) {
+                nextTick(() => clampOffset());
+            }
+        }
+
+        useEventListener(window, 'resize', onWindowResize);
+
+        onBeforeUnmount(() => {
+            window.removeEventListener('pointermove', onPointerMove);
+            window.removeEventListener('pointerup', onPointerUp);
+        });
+
+        watch(
+            () => props.open,
+            async newVal => {
+                if (newVal) {
+                    await nextTick();
+                    resetPosition();
+                    nextTick(() => clampOffset());
+                    zIndex.value = props.zIndex ?? nextZIndex();
+                    if (!hasOpened.value) {
+                        onEnter();
+                        hasOpened.value = true;
+                    }
+                } else {
+                    hasOpened.value = false;
+                    if (dragState) {
+                        onPointerUp();
+                    }
+                }
+            },
+            { immediate: true }
+        );
+
+        expose({
+            close
+        });
+
+        return {
+            dialogContent,
+            panel,
+            zIndex,
+            fade,
+            modalScale,
+            style,
+            isOpen,
+            contentClasses,
+            contentStyle,
+            focusScopeClasses,
+            panelComputedStyle,
+            isDragging,
+            close,
+            handleAfterLeave,
+            handleEscapeKeyDown,
+            handleOpenChange,
+            handleOpenAutoFocus,
+            handleFocusOutside,
+            onPanelPointerDown
+        };
+    }
+});
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+    <div>
+        <button @click="open = true">Open panel</button>
+        <MPanelDialog
+            v-model:open="open"
+            :modal="false"
+            width="500px"
+            :draggable="true"
+            @onClose="closed"
+        >
+            <div data-panel-handle style="padding: 12px 16px; border-bottom: 1px solid #e4e2ea; font-weight: 600;">
+                Draggable panel (grab here)
+            </div>
+            <div style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
+                <p style="margin: 0;">Non-modal floating panel. Drag by the header. Background stays interactive.</p>
+                <MInput placeholder="Focus me — blue ring must remain" />
+                <input type="text" placeholder="Native input" />
+                <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);
+
+function closed(): void {
+    console.log('closed');
+}
+</script>

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';