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

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
+    }
+});

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

@@ -0,0 +1 @@
+export * from './Popover.css';