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

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/hovercard/HoverCard.vue

@@ -0,0 +1,163 @@
+<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'],
+    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>

package/src/components/hovercard/style/HoverCard.css.ts

@@ -0,0 +1,175 @@
+import { globalKeyframes, globalStyle, style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+const slideFadeOutTopAnimation = 'hover-card-slide-fade-out-top';
+globalKeyframes(slideFadeOutTopAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.98)'
+    }
+});
+
+const slideFadeOutBottomAnimation = 'hover-card-slide-fade-out-bottom';
+globalKeyframes(slideFadeOutBottomAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.98)'
+    }
+});
+
+const slideFadeOutLeftAnimation = 'hover-card-slide-fade-out-left';
+globalKeyframes(slideFadeOutLeftAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.98)'
+    }
+});
+
+const slideFadeOutRightAnimation = 'hover-card-slide-fade-out-right';
+globalKeyframes(slideFadeOutRightAnimation, {
+    from: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    },
+    to: {
+        opacity: 0,
+        transform: 'translateX(-6px) scale(0.98)'
+    }
+});
+
+const slideFadeTopAnimation = 'hover-card-slide-fade-top';
+globalKeyframes(slideFadeTopAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const slideFadeBottomAnimation = 'hover-card-slide-fade-bottom';
+globalKeyframes(slideFadeBottomAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const slideFadeLeftAnimation = 'hover-card-slide-fade-left';
+globalKeyframes(slideFadeLeftAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    }
+});
+
+const slideFadeRightAnimation = 'hover-card-slide-fade-right';
+globalKeyframes(slideFadeRightAnimation, {
+    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-hover-card-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: slideFadeOutTopAnimation
+        },
+        '&[data-state="closed"][data-side="bottom"]': {
+            animationName: slideFadeOutBottomAnimation
+        },
+        '&[data-state="closed"][data-side="left"]': {
+            animationName: slideFadeOutLeftAnimation
+        },
+        '&[data-state="closed"][data-side="right"]': {
+            animationName: slideFadeOutRightAnimation
+        },
+        '&[data-state="open"][data-side="top"]': {
+            animationName: slideFadeTopAnimation
+        },
+        '&[data-state="open"][data-side="bottom"]': {
+            animationName: slideFadeBottomAnimation
+        },
+        '&[data-state="open"][data-side="left"]': {
+            animationName: slideFadeLeftAnimation
+        },
+        '&[data-state="open"][data-side="right"]': {
+            animationName: slideFadeRightAnimation
+        }
+    }
+});
+
+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]
+});

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

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

package/src/components/index.ts

@@ -54,6 +54,9 @@ export { default as MVirtualScroll } from './virtualscroll/VirtualScroll.vue';
 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 MPanelDialog } from './paneldialog/PanelDialog.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';
+export { default as MHoverCard } from './hovercard/HoverCard.vue';

package/src/components/input/Input.vue

@@ -20,9 +20,10 @@
                 :type="inputType"
                 :placeholder="placeholder"
                 :name="name"
-                :value="modelValue || ''"
+                :value="currentValue"
                 :readonly="readonly"
                 v-on="inputListeners"
+                @input="onNativeInput"
                 :class="inputComputedClasses"
                 v-bind="$attrs"
                 :disabled="disabled || loading"
@@ -32,6 +33,7 @@
             <div v-if="hasSuffix" :class="style.suffix">
                 <slot name="suffix" />
             </div>
+            <MClearButton v-if="showClear" :class="clearClasses" @clear="onClear" />
             <div v-if="hasRightIcon" :class="style.rightIcon">
                 <slot name="icon-right" />
             </div>
@@ -52,14 +54,17 @@ import {
     defineComponent,
     ref,
     computed,
-    toRef
+    toRef,
+    watch
 } from "vue";
 import { useInput } from "../../composables/useInput";
 import { useInteractive } from "../../composables/useInteractive";
+import MClearButton from '../clearbutton/ClearButton.vue';
 import * as style from './style';
 
 export default defineComponent({
     name: 'MInput',
+    components: { MClearButton },
     props: {
         ...useInput.props(),
         ...useInteractive.props(),
@@ -100,11 +105,15 @@ export default defineComponent({
             default: false
         },
         error: {
-            type: String,
+            type: String as PropType<string | null>,
             default: ''
         },
+        clearable: {
+            type: Boolean,
+            default: false
+        },
     },
-    emits: useInput.emits(),
+    emits: [...useInput.emits(), 'clear'],
     setup(props, { slots, emit, expose }) {
         const element = ref<HTMLInputElement|null>(null);
         const { focus, blur } = useInteractive(element);
@@ -170,6 +179,8 @@ export default defineComponent({
                     [style.disabled]: disabled.value || loading.value,
                     [style.hasLeftIcon]: hasLeftIcon.value,
                     [style.hasRightIcon]: hasRightIcon.value,
+                    [style.hasClear]: props.clearable,
+                    [style.hasClearAndRightIcon]: props.clearable && hasRightIcon.value,
                 }
             ];
 
@@ -193,8 +204,41 @@ export default defineComponent({
             return formError.value || props.error;
         });
 
+        // Tracks typed text so clearable works without v-model
+        const internalValue = ref<any>(props.modelValue ?? '');
+        watch(() => props.modelValue, value => {
+            internalValue.value = value ?? '';
+        });
+
+        const currentValue = computed(() => {
+            const value = props.modelValue !== undefined ? props.modelValue : internalValue.value;
+            return value || '';
+        });
+
+        const onNativeInput = (event: Event) => {
+            internalValue.value = (event.target as HTMLInputElement).value;
+        };
+
+        const showClear = computed(() => {
+            return props.clearable
+                && !disabled.value
+                && !loading.value
+                && !props.readonly
+                && currentValue.value !== '';
+        });
+
+        const clearClasses = computed(() => {
+            return [
+                style.clear,
+                { [style.clearWithRightIcon]: hasRightIcon.value }
+            ];
+        });
+
         const onClear = () => {
+            internalValue.value = '';
             emit('update:modelValue', '');
+            emit('clear');
+            focus();
         };
 
         expose({
@@ -220,6 +264,10 @@ export default defineComponent({
             hasHelpMessage,
             inputError,
             style,
+            showClear,
+            clearClasses,
+            currentValue,
+            onNativeInput,
 
             onClear,
             validate,