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

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

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

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

@@ -0,0 +1,59 @@
+<template>
+    <div style="padding: 150px; display: flex; gap: 16px; flex-wrap: wrap;">
+        <MPopover placement="top">
+            <MButton>Top</MButton>
+            <template #content>
+                <div style="padding: 8px;">Top</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="top-start">
+            <MButton>Top Start</MButton>
+            <template #content>
+                <div style="padding: 8px;">Top Start</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="top-end">
+            <MButton>Top End</MButton>
+            <template #content>
+                <div style="padding: 8px;">Top End</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="bottom">
+            <MButton>Bottom</MButton>
+            <template #content>
+                <div style="padding: 8px;">Bottom</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="bottom-start">
+            <MButton>Bottom Start</MButton>
+            <template #content>
+                <div style="padding: 8px;">Bottom Start</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="bottom-end">
+            <MButton>Bottom End</MButton>
+            <template #content>
+                <div style="padding: 8px;">Bottom End</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="left">
+            <MButton>Left</MButton>
+            <template #content>
+                <div style="padding: 8px;">Left</div>
+            </template>
+        </MPopover>
+
+        <MPopover placement="right">
+            <MButton>Right</MButton>
+            <template #content>
+                <div style="padding: 8px;">Right</div>
+            </template>
+        </MPopover>
+    </div>
+</template>

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

@@ -0,0 +1,30 @@
+<template>
+    <div style="padding: 100px; display: flex; gap: 16px;">
+        <MPopover>
+            <MButton>Light (Default)</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 150px;">
+                    <p style="margin: 0; font-size: 14px;">Light popover content</p>
+                </div>
+            </template>
+        </MPopover>
+
+        <MPopover variant="dark">
+            <MButton variant="dark">Dark</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 150px;">
+                    <p style="margin: 0; font-size: 14px;">Dark popover content</p>
+                </div>
+            </template>
+        </MPopover>
+
+        <MPopover variant="dark" arrow placement="bottom">
+            <MButton variant="dark">Dark with Arrow</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 150px;">
+                    <p style="margin: 0; font-size: 14px;">Dark popover with arrow</p>
+                </div>
+            </template>
+        </MPopover>
+    </div>
+</template>

package/src/components/popover/style/Popover.css.ts

@@ -0,0 +1,203 @@
+import { globalKeyframes, globalStyle, style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const menuFadeOutAnimation = 'popover-fade-out';
+globalKeyframes(menuFadeOutAnimation, {
+    from: {
+        opacity: 1
+    },
+    to: {
+        opacity: 0
+    }
+});
+
+const menuSlideFadeOutTopAnimation = 'popover-slide-fade-out-top';
+globalKeyframes(menuSlideFadeOutTopAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.98)'
+    }
+});
+
+const menuSlideFadeOutBottomAnimation = 'popover-slide-fade-out-bottom';
+globalKeyframes(menuSlideFadeOutBottomAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.98)'
+    }
+});
+
+const menuSlideFadeOutLeftAnimation = 'popover-slide-fade-out-left';
+globalKeyframes(menuSlideFadeOutLeftAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.98)'
+    }
+});
+
+const menuSlideFadeOutRightAnimation = 'popover-slide-fade-out-right';
+globalKeyframes(menuSlideFadeOutRightAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateX(-6px) scale(0.98)'
+    }
+});
+
+const menuSlideFadeTopAnimation = 'popover-slide-fade-top';
+globalKeyframes(menuSlideFadeTopAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const menuSlideFadeBottomAnimation = 'popover-slide-fade-bottom';
+globalKeyframes(menuSlideFadeBottomAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const menuSlideFadeLeftAnimation = 'popover-slide-fade-left';
+globalKeyframes(menuSlideFadeLeftAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    }
+});
+
+const menuSlideFadeRightAnimation = 'popover-slide-fade-right';
+globalKeyframes(menuSlideFadeRightAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateX(-6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    }
+});
+
+export const content = style({
+    backgroundColor: '#ffffff',
+    borderRadius: '5px',
+    padding: '5px',
+    zIndex: 4000,
+    boxSizing: 'border-box',
+    position: 'relative',
+    minWidth: '130px',
+    maxWidth: '350px',
+    border: `1px solid ${themeVars.color.gray[300]}`,
+    boxShadow: themeVars.shadow.md,
+    transformOrigin: 'var(--reka-popover-content-transform-origin)',
+    willChange: 'transform, opacity',
+    outline: 'none',
+    selectors: {
+        '&[data-state="open"]': {
+            animationDuration: '0.16s',
+            animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+            animationFillMode: 'both'
+        },
+        '&[data-state="closed"]': {
+            animationDuration: '0.12s',
+            animationTimingFunction: 'ease-out',
+            animationFillMode: 'both'
+        },
+        '&[data-state="closed"][data-side="top"]': {
+            animationName: menuSlideFadeOutTopAnimation
+        },
+        '&[data-state="closed"][data-side="bottom"]': {
+            animationName: menuSlideFadeOutBottomAnimation
+        },
+        '&[data-state="closed"][data-side="left"]': {
+            animationName: menuSlideFadeOutLeftAnimation
+        },
+        '&[data-state="closed"][data-side="right"]': {
+            animationName: menuSlideFadeOutRightAnimation
+        },
+        '&[data-state="open"][data-side="top"]': {
+            animationName: menuSlideFadeTopAnimation
+        },
+        '&[data-state="open"][data-side="bottom"]': {
+            animationName: menuSlideFadeBottomAnimation
+        },
+        '&[data-state="open"][data-side="left"]': {
+            animationName: menuSlideFadeLeftAnimation
+        },
+        '&[data-state="open"][data-side="right"]': {
+            animationName: menuSlideFadeRightAnimation
+        }
+    }
+});
+
+export const arrow = style({
+    fill: '#ffffff'
+});
+
+globalStyle(`${arrow} path`, {
+    fill: '#ffffff',
+    stroke: themeVars.color.gray[300],
+    strokeWidth: '1px'
+});
+
+export const dark = style({
+    backgroundColor: themeVars.color.gray[900],
+    border: `1px solid ${themeVars.color.gray[800]}`,
+    color: themeVars.color.gray[100]
+});
+
+globalStyle(`${dark} ${arrow}`, {
+    fill: themeVars.color.gray[900]
+});
+
+globalStyle(`${dark} ${arrow} path`, {
+    fill: themeVars.color.gray[900],
+    stroke: themeVars.color.gray[800]
+});
+
+export const close = style({
+    position: 'absolute',
+    top: themeVars.space[2],
+    right: themeVars.space[2],
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '20px',
+    height: '20px',
+    borderRadius: themeVars.rounded.default,
+    cursor: 'pointer',
+    color: themeVars.color.font.muted,
+    ':hover': {
+        backgroundColor: themeVars.color.gray[100],
+        color: themeVars.color.font.text
+    }
+});