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

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

@@ -0,0 +1,24 @@
+import MDrawer from '../Drawer.vue';
+import {
+    MDrawerBasic,
+    MDrawerPlacements,
+    MDrawerNoMask,
+    MDrawerWithFooter,
+    MDrawerCustomTitle,
+    MDrawerWithTrigger,
+    MDrawerNoOutsideClose
+} from './index';
+import { createStory } from '../../../__storybook__';
+
+export default {
+    component: MDrawer,
+    title: 'Components/Drawer'
+};
+
+export const Basic = createStory(MDrawerBasic);
+export const WithTrigger = createStory(MDrawerWithTrigger);
+export const Placements = createStory(MDrawerPlacements);
+export const NoMask = createStory(MDrawerNoMask);
+export const WithFooter = createStory(MDrawerWithFooter);
+export const CustomTitle = createStory(MDrawerCustomTitle);
+export const NoOutsideClose = createStory(MDrawerNoOutsideClose);

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

@@ -0,0 +1,7 @@
+export { default as MDrawerBasic } from './basic.vue';
+export { default as MDrawerPlacements } from './placements.vue';
+export { default as MDrawerNoMask } from './no-mask.vue';
+export { default as MDrawerWithFooter } from './with-footer.vue';
+export { default as MDrawerCustomTitle } from './custom-title.vue';
+export { default as MDrawerWithTrigger } from './with-trigger.vue';
+export { default as MDrawerNoOutsideClose } from './no-outside-close.vue';

package/src/components/drawer/examples/no-mask.vue

@@ -0,0 +1,15 @@
+<template>
+    <MDrawer v-model:open="isOpen" title="No Backdrop" :show-mask="false">
+        <p style="margin: 0">This drawer has no backdrop overlay.</p>
+    </MDrawer>
+
+    <MButton @click="isOpen = true">Open (no backdrop)</MButton>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+
+const isOpen = ref(false);
+</script>

package/src/components/drawer/examples/no-outside-close.vue

@@ -0,0 +1,15 @@
+<template>
+    <MDrawer ref="drawer" title="Persistent Drawer" :outside-close="false">
+        <p style="margin: 0">Clicking outside won't close this drawer. Use the × button or Escape.</p>
+    </MDrawer>
+
+    <MButton @click="drawer?.open()">Open Drawer</MButton>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+
+const drawer = ref<InstanceType<typeof MDrawer> | null>(null);
+</script>

package/src/components/drawer/examples/placements.vue

@@ -0,0 +1,28 @@
+<template>
+    <MDrawer v-model:open="isOpen" :placement="activePlacement" :title="`Drawer — ${activePlacement}`">
+        <p style="margin: 0">Sliding in from the <strong>{{ activePlacement }}</strong>.</p>
+    </MDrawer>
+
+    <div style="display: flex; gap: 8px; flex-wrap: wrap">
+        <MButton @click="open('left')">Left</MButton>
+        <MButton @click="open('right')">Right</MButton>
+        <MButton @click="open('top')">Top</MButton>
+        <MButton @click="open('bottom')">Bottom</MButton>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+
+type Placement = 'left' | 'right' | 'top' | 'bottom';
+
+const isOpen = ref(false);
+const activePlacement = ref<Placement>('right');
+
+function open(placement: Placement) {
+    activePlacement.value = placement;
+    isOpen.value = true;
+}
+</script>

package/src/components/drawer/examples/with-footer.vue

@@ -0,0 +1,21 @@
+<template>
+    <MDrawer v-model:open="isOpen" title="Drawer with Footer">
+        <p style="margin: 0">Drawer body content goes here.</p>
+        <template #footer>
+            <div style="display: flex; gap: 8px; justify-content: flex-end; width: 100%">
+                <MButton @click="isOpen = false">Cancel</MButton>
+                <MButton variant="primary" @click="isOpen = false">Save</MButton>
+            </div>
+        </template>
+    </MDrawer>
+
+    <MButton @click="isOpen = true">Open Drawer</MButton>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+
+const isOpen = ref(false);
+</script>

package/src/components/drawer/examples/with-trigger.vue

@@ -0,0 +1,13 @@
+<template>
+    <MDrawer title="Profile">
+        <template #trigger>
+            <MButton>Edit profile</MButton>
+        </template>
+        <p style="margin: 0">Trigger slot — no ref or v-model needed.</p>
+    </MDrawer>
+</template>
+
+<script lang="ts" setup>
+import MDrawer from '../Drawer.vue';
+import MButton from '../../button/Button.vue';
+</script>

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>
@@ -173,7 +173,9 @@ export default defineComponent({
             type: Number
         }
     },
-    emits: ['update:open'],
+    emits: {
+        'update:open': (_value: boolean) => true
+    },
     setup(props, { emit }) {
         const parentState = inject(DROPDOWN_STATE, null);
         const isSubmenu = computed(() => !!parentState);

package/src/components/form/Form.vue

@@ -51,9 +51,9 @@ export default defineComponent({
             type: String
         },
     },
-    emits: [
-        "submit"
-    ],
+    emits: {
+        submit: (_valid: boolean) => true
+    },
     expose: ["submit"],
     setup(props, { emit }) {
         const inputs: Form[] = [];

package/src/components/hovercard/HoverCard.vue

@@ -0,0 +1,165 @@
+<template>
+    <HoverCardRoot
+        v-model:open="isOpen"
+        :open-delay="openDelay"
+        :close-delay="closeDelay"
+    >
+        <HoverCardTrigger as-child>
+            <slot />
+        </HoverCardTrigger>
+        <HoverCardPortal :disabled="!transfer">
+            <HoverCardContent
+                :class="contentClasses"
+                :side="resolvedSide"
+                :align="resolvedAlign"
+                :side-offset="sideOffset"
+                :collision-padding="collisionPadding"
+                :style="{ zIndex: zIndex }"
+            >
+                <slot name="content" />
+                <HoverCardArrow v-if="showArrow" :class="style.arrow" :width="12" :height="6" />
+            </HoverCardContent>
+        </HoverCardPortal>
+    </HoverCardRoot>
+</template>
+
+<script lang="ts">
+import {
+    HoverCardArrow,
+    HoverCardContent,
+    HoverCardPortal,
+    HoverCardRoot,
+    HoverCardTrigger,
+    type HoverCardContentProps
+} 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: 'MHoverCard',
+    inheritAttrs: false,
+    components: {
+        HoverCardArrow,
+        HoverCardContent,
+        HoverCardPortal,
+        HoverCardRoot,
+        HoverCardTrigger
+    },
+    props: {
+        open: {
+            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'
+        },
+        openDelay: {
+            type: Number,
+            default: 700
+        },
+        closeDelay: {
+            type: Number,
+            default: 300
+        },
+        zIndex: {
+            type: Number
+        }
+    },
+    emits: {
+        'update:open': (_value: boolean) => true
+    },
+    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?: HoverCardContentProps['side'];
+                align?: HoverCardContentProps['align'];
+            };
+        });
+
+        const showArrow = computed(() => {
+            const { align } = resolvedPlacement.value;
+            return props.arrow && (!align || align === 'center');
+        });
+
+        const contentClasses = computed(() => {
+            return [
+                'm-hover-card-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>