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

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,

package/src/components/input/examples/clearable.vue

@@ -0,0 +1,18 @@
+<template>
+    <div style="display: flex; flex-direction: column; gap: 12px; max-width: 320px;">
+        <MInput v-model="value" placeholder="Type something..." clearable />
+        <MInput v-model="value" placeholder="With a right icon" clearable>
+            <template #icon-right>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 20px; height: 20px;">
+                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd" />
+                </svg>
+            </template>
+        </MInput>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref('Clear me');
+</script>

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

@@ -5,7 +5,8 @@ import {
     MInputPrefix,
     MInputLeftIcon,
     MInputRightIcon,
-    MInputSizes
+    MInputSizes,
+    MInputClearable
 } from './index';
 
 import { createStory, sizeArgType } from '../../../__storybook__';
@@ -24,3 +25,4 @@ export const Prefix = createStory(MInputPrefix);
 export const Sizes = createStory(MInputSizes);
 export const LeftIcon = createStory(MInputLeftIcon);
 export const RightIcon = createStory(MInputRightIcon);
+export const Clearable = createStory(MInputClearable);

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

@@ -4,3 +4,4 @@ export { default as MInputPrefix } from './prefix.vue';
 export { default as MInputSizes } from './sizes.vue';
 export { default as MInputLeftIcon } from './left-icon.vue';
 export { default as MInputRightIcon } from './right-icon.vue';
+export { default as MInputClearable } from './clearable.vue';

package/src/components/input/style/Input.css.ts

@@ -251,6 +251,25 @@ export const hasRightIcon = style({
     paddingRight: '2.25rem'
 });
 
+export const hasClear = style({
+    paddingRight: '1.75rem'
+});
+
+export const hasClearAndRightIcon = style({
+    paddingRight: '4rem'
+});
+
+export const clear = style({
+    position: 'absolute',
+    top: '50%',
+    right: themeVars.space[1],
+    transform: 'translateY(-50%)'
+});
+
+export const clearWithRightIcon = style({
+    right: '2.25rem'
+});
+
 export const prefix = style({
     pointerEvents: 'none',
     marginRight: themeVars.space[3],

package/src/components/messageprovider/MessageProvider.vue

@@ -64,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]);
 
@@ -100,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,
@@ -133,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) {
@@ -164,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;
         }

package/src/components/modal/Modal.vue

@@ -6,7 +6,8 @@
                 <DialogOverlay v-if="isOpen" force-mount :class="style.mask" :style="{ zIndex }" />
             </Transition>
             <Transition appear type="animation" :enter-active-class="modalScale.enterActive" :leave-active-class="modalScale.leaveActive"
-                :enter-from-class="modalScale.enterFrom" :leave-to-class="modalScale.leaveTo">
+                :enter-from-class="modalScale.enterFrom" :leave-to-class="modalScale.leaveTo"
+                @after-leave="handleAfterLeave">
                 <div tabIndex="-1" v-if="isOpen" ref="wrapperRef"
                     :class="computedWrapperClasses" :style="computedWrapperStyles">
                     <DialogContent
@@ -73,6 +74,7 @@ import {
     computed,
     defineComponent,
     nextTick,
+    onBeforeUnmount,
     provide,
     ref,
     shallowRef,
@@ -144,7 +146,13 @@ export default defineComponent({
             default: true
         }
     },
-    emits: ['open', 'close', 'update:open'],
+    emits: {
+        open: () => true,
+        close: (_e?: MouseEvent | KeyboardEvent) => true,
+        'update:open': (_value: boolean) => true,
+        // Fired once the leave animation has finished and the modal is out of the DOM
+        'after-leave': () => true
+    },
     setup(props, { emit, slots }) {
         const { nextZIndex } = useZIndex();
 
@@ -302,7 +310,6 @@ export default defineComponent({
 
         const close = (e: MouseEvent | KeyboardEvent | undefined) => {
             props.onClose?.(e);
-            ownerScrollbarClose();
             emit('close', e);
             isOpen.value = false;
         };
@@ -330,14 +337,26 @@ export default defineComponent({
         }
 
         function ownerScrollbarClose() {
-            setTimeout(() => {
-                let documentElement = window.document.documentElement;
+            let documentElement = window.document.documentElement;
 
-                documentElement.style.overflow = 'visible';
-                documentElement.style.paddingRight = '0px';
-            }, 250);
+            documentElement.style.overflow = 'visible';
+            documentElement.style.paddingRight = '0px';
         }
 
+        // Runs when the leave transition actually completes, so the scroll lock
+        // can't drift from the animation duration.
+        const handleAfterLeave = () => {
+            ownerScrollbarClose();
+            emit('after-leave');
+        };
+
+        // Unmounted while open: there is no leave transition, so release the lock here
+        onBeforeUnmount(() => {
+            if (isOpen.value) {
+                ownerScrollbarClose();
+            }
+        });
+
         watch(
             () => isOpen.value,
             (newValue, oldValue) => {
@@ -346,9 +365,6 @@ export default defineComponent({
                     ownerScrollbarOpen();
                     zIndex.value = props.zIndex ?? nextZIndex();
                     emit('open');
-                } else if (!newValue && oldValue) {
-                    // Closing
-                    ownerScrollbarClose();
                 }
             },
             { immediate: true }
@@ -362,6 +378,7 @@ export default defineComponent({
             onInteractOutside,
             handleOpenChange,
             handleOpenAutoFocus,
+            handleAfterLeave,
             target,
             bodyRef,
             style,

package/src/components/pagination/Pagination.vue

@@ -126,7 +126,10 @@ export default defineComponent({
             default: false
         }
     },
-    emits: ['update:page', 'update:pageSize'],
+    emits: {
+        'update:page': (_page: number) => true,
+        'update:pageSize': (_pageSize: number) => true
+    },
     setup(props, { emit }) {
         const realTotal = computed(() => {
             return props.total || 0;