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

package/src/components/input/examples/clearable.vue

@@ -0,0 +1,18 @@
+<template>
+    <div style="display: flex; flex-direction: column; gap: 12px; max-width: 320px;">
+        <MInput v-model="value" placeholder="Type something..." clearable />
+        <MInput v-model="value" placeholder="With a right icon" clearable>
+            <template #icon-right>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px;">
+                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
+                </svg>
+            </template>
+        </MInput>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('Clear me');
+</script>

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

@@ -5,7 +5,8 @@ import {
     MInputPrefix,
     MInputLeftIcon,
     MInputRightIcon,
-    MInputSizes
+    MInputSizes,
+    MInputClearable
 } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
@@ -24,3 +25,4 @@ export const Prefix = createStory(MInputPrefix);
 export const Sizes = createStory(MInputSizes);
 export const LeftIcon = createStory(MInputLeftIcon);
 export const RightIcon = createStory(MInputRightIcon);
+export const Clearable = createStory(MInputClearable);

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

@@ -4,3 +4,4 @@ export { default as MInputPrefix } from './prefix.vue';
 export { default as MInputSizes } from './sizes.vue';
 export { default as MInputLeftIcon } from './left-icon.vue';
 export { default as MInputRightIcon } from './right-icon.vue';
+export { default as MInputClearable } from './clearable.vue';

package/src/components/input/style/Input.css.ts

@@ -251,6 +251,25 @@ export const hasRightIcon = style({
     paddingRight: '2.25rem'
 });
 
+export const hasClear = style({
+    paddingRight: '1.75rem'
+});
+
+export const hasClearAndRightIcon = style({
+    paddingRight: '4rem'
+});
+
+export const clear = style({
+    position: 'absolute',
+    top: '50%',
+    right: themeVars.space[1],
+    transform: 'translateY(-50%)'
+});
+
+export const clearWithRightIcon = style({
+    right: '2.25rem'
+});
+
 export const prefix = style({
     pointerEvents: 'none',
     marginRight: themeVars.space[3],

package/src/components/messageprovider/MessageProvider.vue

@@ -64,7 +64,7 @@ export default defineComponent({
         },
     },
     setup(props) {
-        const activeMessages = new Map<string, { stop: () => void; closed: boolean; onClose?: () => void }>();
+        const activeMessages = new Map<string, { stop: () => void; closed: boolean; currentId: string; onClose?: () => void }>();
 
         const sonnerPosition = computed(() => placementMap[props.placement]);
 
@@ -100,9 +100,9 @@ export default defineComponent({
             return timeout ?? props.timeout;
         }
 
-        function syncToast(message: PrivateMessageReactive) {
+        function createToast(message: PrivateMessageReactive, sonnerId: string) {
             const options: ExternalToast = {
-                id: message.id,
+                id: sonnerId,
                 duration: normalizeDuration(message.timeout),
                 closeButton: message.closeButton ?? message.closable,
                 richColors: message.richColors,
@@ -133,6 +133,23 @@ export default defineComponent({
             }
         }
 
+        function syncToast(message: PrivateMessageReactive) {
+            const active = activeMessages.get(message.id);
+            if (!active) {
+                return;
+            }
+
+            const oldId = active.currentId;
+            const newId = Math.random().toString(16).slice(2, 14);
+            active.currentId = newId;
+
+            toast.dismiss(oldId);
+
+            requestAnimationFrame(() => {
+                createToast(message, newId);
+            });
+        }
+
         function closeMessage(id: string, invokeOnClose: boolean) {
             const active = activeMessages.get(id);
             if (!active || active.closed) {
@@ -164,20 +181,29 @@ export default defineComponent({
                 type: options.type,
                 onClose: options.onClose,
                 destroy: () => {
+                    const active = activeMessages.get(id);
+                    const sonnerId = active?.currentId ?? id;
                     closeMessage(id, false);
-                    toast.dismiss(id);
+                    toast.dismiss(sonnerId);
                 },
             }) as PrivateMessageReactive;
 
+            const sonnerId = Math.random().toString(16).slice(2, 14);
+            activeMessages.set(id, { stop: () => {}, closed: false, currentId: sonnerId, onClose: options.onClose });
+
             const stop = watch(
                 () => [message.content, message.type, message.timeout, message.closable, message.closeButton, message.richColors, sonnerPosition.value],
-                () => {
-                    syncToast(message);
+                (_, oldVal) => {
+                    if (!oldVal) {
+                        createToast(message, activeMessages.get(id)!.currentId);
+                    } else {
+                        syncToast(message);
+                    }
                 },
                 { immediate: true }
             );
 
-            activeMessages.set(id, { stop, closed: false, onClose: options.onClose });
+            activeMessages.get(id)!.stop = stop;
 
             return message;
         }

package/src/components/paneldialog/PanelDialog.vue

@@ -0,0 +1,500 @@
+<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', 'onClose', 'update:open', 'open', 'close'],
+    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');
+        }
+
+        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>