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

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/dropdown/Dropdown.vue

@@ -9,7 +9,7 @@
             </ContextMenuSubContent>
         </ContextMenuPortal>
     </ContextMenuSub>
-    <ContextMenuRoot v-else-if="isContextMenu" v-model:open="isOpen" v-bind="$attrs">
+    <ContextMenuRoot v-else-if="isContextMenu" v-model:open="isOpen" :modal="modal" v-bind="$attrs">
         <ContextMenuTrigger as-child>
             <slot />
         </ContextMenuTrigger>

package/src/components/dropdown/style/Dropdown.css.ts

@@ -197,6 +197,22 @@ export const menuItem = style({
         backgroundColor: vars.backgroundColor,
         color: vars.color,
         outline: 'none'
+    },
+    ':focus': {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.gray[150],
+        },
+        backgroundColor: vars.backgroundColor,
+        outline: 'none'
+    },
+    selectors: {
+        '&[aria-expanded="true"]': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.gray[150],
+            },
+            backgroundColor: vars.backgroundColor,
+            outline: 'none'
+        }
     }
 });
 

package/src/components/index.ts

@@ -55,4 +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';

package/src/components/messageprovider/MessageProvider.vue

@@ -1,6 +1,7 @@
 <template>
     <slot />
     <Toaster
+        :class="style.toaster"
         :position="sonnerPosition"
         :duration="timeout"
         :visible-toasts="max"
@@ -24,6 +25,7 @@ import type {
     MessageType,
 } from './types';
 import type { PropType } from 'vue';
+import * as style from './style/Toaster.css';
 
 interface PrivateMessageReactive extends MessageReactive {
     id: string;
@@ -62,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]);
 
@@ -98,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,
@@ -131,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) {
@@ -162,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;
         }
@@ -192,6 +220,7 @@ export default defineComponent({
 
         return {
             sonnerPosition,
+            style,
         };
     },
 });

package/src/components/messageprovider/style/Toaster.css.ts

@@ -0,0 +1,24 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+export const toaster = style({});
+
+globalStyle(`${toaster} [data-sonner-toast][data-type='success'] [data-icon]`, {
+    color: themeVars.color.green[500]
+});
+
+globalStyle(`${toaster} [data-sonner-toast][data-type='error'] [data-icon]`, {
+    color: themeVars.color.red[500]
+});
+
+globalStyle(`${toaster} [data-sonner-toast][data-type='warning'] [data-icon]`, {
+    color: themeVars.color.amber[500]
+});
+
+globalStyle(`${toaster} [data-sonner-toast][data-type='info'] [data-icon]`, {
+    color: themeVars.color.blue[500]
+});
+
+globalStyle(`${toaster} [data-sonner-toast][data-type='loading'] [data-icon]`, {
+    color: themeVars.color.gray[500]
+});

package/src/components/modal/style/Modal.css.ts

@@ -79,7 +79,16 @@ export const modal = style({
     top: 100,
     paddingBottom: '24px',
     maxWidth: `calc(100vw - 32px)`,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            boxShadow: 'none'
+        }
+    }
 });
 
 export const centeredWrapper = style({
@@ -113,7 +122,17 @@ export const container = style({
     flexDirection: 'column',
     position: 'relative',
     gap: themeVars.space[2],
-    pointerEvents: 'auto'
+    pointerEvents: 'auto',
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            boxShadow:
+                '0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04)'
+        }
+    }
 });
 
 export const hasSidebar = style({
@@ -159,6 +178,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/popover/Popover.vue

@@ -0,0 +1,155 @@
+<template>
+    <PopoverRoot v-model:open="isOpen" :modal="modal">
+        <PopoverTrigger as-child>
+            <slot />
+        </PopoverTrigger>
+        <PopoverPortal :disabled="!transfer">
+            <PopoverContent
+                :class="contentClasses"
+                :side="resolvedSide"
+                :align="resolvedAlign"
+                :side-offset="sideOffset"
+                :collision-padding="collisionPadding"
+                :style="{ zIndex: zIndex }"
+            >
+                <slot name="content" />
+                <PopoverArrow v-if="showArrow" :class="style.arrow" :width="12" :height="6" />
+            </PopoverContent>
+        </PopoverPortal>
+    </PopoverRoot>
+</template>
+
+<script lang="ts">
+import {
+    PopoverArrow,
+    PopoverContent,
+    PopoverPortal,
+    PopoverRoot,
+    PopoverTrigger,
+    type PopoverContentProps
+} from 'reka-ui';
+import {
+    computed,
+    defineComponent,
+    ref,
+    useAttrs,
+    watch,
+    type PropType
+} from 'vue';
+import {
+    type Placement,
+    placementWhileList
+} from '../../composables/usePopper';
+import { useZIndex } from '../../composables/useZIndex';
+import * as style from './style';
+
+export default defineComponent({
+    name: 'MPopover',
+    inheritAttrs: false,
+    components: {
+        PopoverArrow,
+        PopoverContent,
+        PopoverPortal,
+        PopoverRoot,
+        PopoverTrigger
+    },
+    props: {
+        open: {
+            type: Boolean,
+            default: false
+        },
+        modal: {
+            type: Boolean,
+            default: false
+        },
+        placement: {
+            type: String as PropType<Placement>,
+            default: 'bottom',
+            validator: (value: Placement) => placementWhileList.includes(value)
+        },
+        transfer: {
+            type: Boolean,
+            default: true
+        },
+        sideOffset: {
+            type: Number,
+            default: 5
+        },
+        collisionPadding: {
+            type: [Number, Object] as PropType<number | { top?: number; right?: number; bottom?: number; left?: number }>,
+            default: 10
+        },
+        arrow: {
+            type: Boolean,
+            default: false
+        },
+        variant: {
+            type: String as PropType<'light' | 'dark'>,
+            default: 'light'
+        },
+        zIndex: {
+            type: Number
+        }
+    },
+    emits: ['update:open'],
+    setup(props, { emit }) {
+        const attrs = useAttrs();
+        const { nextZIndex } = useZIndex();
+        const isOpen = ref(props.open);
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+
+        const resolvedPlacement = computed(() => {
+            const [side, align] = props.placement.split('-');
+
+            return {
+                side: side === 'top' || side === 'right' || side === 'bottom' || side === 'left'
+                    ? side
+                    : undefined,
+                align: align === 'start' || align === 'center' || align === 'end'
+                    ? align
+                    : undefined
+            } as {
+                side?: PopoverContentProps['side'];
+                align?: PopoverContentProps['align'];
+            };
+        });
+
+        const showArrow = computed(() => {
+            const { align } = resolvedPlacement.value;
+            return props.arrow && (!align || align === 'center');
+        });
+
+        const contentClasses = computed(() => {
+            return [
+                'm-popover-content',
+                style.content,
+                {
+                    [style.dark]: props.variant === 'dark'
+                },
+                attrs.class
+            ];
+        });
+
+        watch(
+            () => props.open,
+            value => {
+                isOpen.value = value;
+            }
+        );
+
+        watch(isOpen, value => {
+            emit('update:open', value);
+        });
+
+        return {
+            isOpen,
+            zIndex,
+            showArrow,
+            contentClasses,
+            resolvedSide: computed(() => resolvedPlacement.value.side),
+            resolvedAlign: computed(() => resolvedPlacement.value.align),
+            style
+        };
+    }
+});
+</script>

package/src/components/popover/examples/arrow.vue

@@ -0,0 +1,47 @@
+<template>
+    <div style="padding: 100px; display: flex; gap: 16px; flex-wrap: wrap;">
+        <MPopover arrow placement="bottom">
+            <MButton>Bottom (Arrow)</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 180px;">
+                    <p style="margin: 0; font-size: 14px;">
+                        Arrow points to the trigger.
+                    </p>
+                </div>
+            </template>
+        </MPopover>
+
+        <MPopover arrow placement="top">
+            <MButton>Top (Arrow)</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 180px;">
+                    <p style="margin: 0; font-size: 14px;">
+                        Arrow points to the trigger.
+                    </p>
+                </div>
+            </template>
+        </MPopover>
+
+        <MPopover arrow placement="left">
+            <MButton>Left (Arrow)</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 180px;">
+                    <p style="margin: 0; font-size: 14px;">
+                        Arrow points to the trigger.
+                    </p>
+                </div>
+            </template>
+        </MPopover>
+
+        <MPopover arrow placement="right">
+            <MButton>Right (Arrow)</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 180px;">
+                    <p style="margin: 0; font-size: 14px;">
+                        Arrow points to the trigger.
+                    </p>
+                </div>
+            </template>
+        </MPopover>
+    </div>
+</template>

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

@@ -0,0 +1,15 @@
+<template>
+    <div style="padding: 100px;">
+        <MPopover>
+            <MButton>Open Popover</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 200px;">
+                    <h4 style="margin: 0 0 8px; font-weight: 600;">Popover Title</h4>
+                    <p style="margin: 0; color: #666; font-size: 14px;">
+                        This is the popover content. You can put anything here.
+                    </p>
+                </div>
+            </template>
+        </MPopover>
+    </div>
+</template>

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

@@ -0,0 +1,19 @@
+import MPopover from '../Popover.vue';
+import MButton from '../../button/Button.vue';
+
+import { MPopoverBasic, MPopoverPlacement, MPopoverArrow, MPopoverVariant } from './index';
+import { createStory, popperPositionArgType } from '../../../__storybook__';
+
+export default {
+    component: MPopover,
+    subcomponents: { MButton },
+    title: 'Components/Popover',
+    argTypes: {
+        ...popperPositionArgType()
+    }
+};
+
+export const Basic = createStory(MPopoverBasic);
+export const Placement = createStory(MPopoverPlacement);
+export const Arrow = createStory(MPopoverArrow);
+export const Variant = createStory(MPopoverVariant);

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

@@ -0,0 +1,4 @@
+export { default as MPopoverBasic } from './basic.vue';
+export { default as MPopoverPlacement } from './placement.vue';
+export { default as MPopoverArrow } from './arrow.vue';
+export { default as MPopoverVariant } from './variant.vue';