@teammodlr/ui-kit 2.3.23 → 3.0.0-beta.11

package/src/components/dropdown/examples/context.vue

@@ -2,7 +2,7 @@
     <div>
 
 
-        <MDropdown v-model:open="isOpen" :style="{ top: `199px`, left: `9px` }">
+        <MDropdown contextMenu v-model:open="isOpen" :style="{ top: `199px`, left: `9px` }">
             <div style="background: #eee; width: 500px; height: 500px;">
             </div>
             <template #menu>
@@ -47,7 +47,7 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-const isOpen = ref(true);
+const isOpen = ref(false);
 const handleClick = () => {
     alert('hi');
 }

package/src/components/dropdown/style/Dropdown.css.ts

@@ -1,6 +1,112 @@
-import { createVar, style, styleVariants } from '@vanilla-extract/css';
+import { createVar, globalKeyframes, style, styleVariants } from '@vanilla-extract/css';
 import { themeVars } from '../../../styles/theme.css';
 
+const menuFadeOutAnimation = 'dropdown-fade-out';
+globalKeyframes(menuFadeOutAnimation, {
+    from: {
+        opacity: 1
+    },
+    to: {
+        opacity: 0
+    }
+});
+
+const menuSlideFadeOutTopAnimation = 'dropdown-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 = 'dropdown-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 = 'dropdown-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 = 'dropdown-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 = 'dropdown-slide-fade-top';
+globalKeyframes(menuSlideFadeTopAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const menuSlideFadeBottomAnimation = 'dropdown-slide-fade-bottom';
+globalKeyframes(menuSlideFadeBottomAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const menuSlideFadeLeftAnimation = 'dropdown-slide-fade-left';
+globalKeyframes(menuSlideFadeLeftAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    }
+});
+
+const menuSlideFadeRightAnimation = 'dropdown-slide-fade-right';
+globalKeyframes(menuSlideFadeRightAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateX(-6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    }
+});
+
 export const menu = style({
     backgroundColor: '#ffffff',
     borderRadius: '5px',
@@ -12,7 +118,45 @@ export const menu = style({
     maxWidth: '350px',
     border: `1px solid ${themeVars.color.gray[300]}`,
     boxShadow: themeVars.shadow.md,
-    overflow: 'auto'
+    overflow: 'auto',
+    transformOrigin: 'var(--reka-dropdown-menu-content-transform-origin)',
+    willChange: 'transform, opacity',
+    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 menuItems = style({
@@ -33,8 +177,8 @@ export const menuItem = style({
     },
     display: 'grid',
     alignItems: 'center',
-    gridTemplateAreas: '"icon name kbd"',
-    gridTemplateColumns: '16px 1fr auto',
+    gridTemplateAreas: '"icon name kbd arrow"',
+    gridTemplateColumns: '16px 1fr auto auto',
     gridTemplateRows: '16px',
     columnGap: themeVars.space['1.5'],
     rowGap: themeVars.space['0.5'],
@@ -53,6 +197,22 @@ export const menuItem = style({
         backgroundColor: vars.backgroundColor,
         color: vars.color,
         outline: 'none'
+    },
+    ':focus': {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.gray[150],
+        },
+        backgroundColor: vars.backgroundColor,
+        outline: 'none'
+    },
+    selectors: {
+        '&[aria-expanded="true"]': {
+            vars: {
+                [vars.backgroundColor]: themeVars.color.gray[150],
+            },
+            backgroundColor: vars.backgroundColor,
+            outline: 'none'
+        }
     }
 });
 
@@ -144,6 +304,15 @@ export const menuItemIcon = style({
     opacity: 0.8
 });
 
+export const menuItemIconRight = style({
+    gridArea: 'arrow',
+    flexShrink: 0,
+    display: 'flex',
+    alignItems: 'center',
+    opacity: 0.8,
+    marginLeft: themeVars.space[2]
+});
+
 export const menuSeperator = style({
     height: '1px',
     backgroundColor: themeVars.color.gray[200],

package/src/components/dropdown/symbol.ts

@@ -1,9 +1,13 @@
 import type { InjectionKey } from 'vue';
 
 export interface DropdownState {
+    contextMenu: boolean;
     handleSelect: (labels: string[]) => void;
     isOpen: boolean;
 }
 
 export const DROPDOWN_STATE: InjectionKey<DropdownState> =
     Symbol('DROPDOWN_STATE');
+
+export const DROPDOWN_TRIGGER_STATE: InjectionKey<boolean> =
+    Symbol('DROPDOWN_TRIGGER_STATE');

package/src/components/form/examples/basic.vue

@@ -2,17 +2,17 @@
     <MForm @submit="onSubmit" :loading="loading">
         <MInput
             label="Email"
-            placeholder="Email Address" 
-            name="email" 
-            v-model="email" 
+            placeholder="Email Address"
+            name="email"
+            v-model="email"
             :rules="[rules.isRequired, rules.isEmail]"
         />
 
         <MInput
             label="Name"
-            placeholder="Name" 
-            name="name" 
-            v-model="name" 
+            placeholder="Name"
+            name="name"
+            v-model="name"
             :rules="[rules.isRequired]"
         />
 
@@ -23,9 +23,20 @@
             :option-value="'id'"
             :option-label="'name'"
             :rules="[rules.isRequired]"
+            searchable
+            multiple
             />
 
-        <MCheckbox
+        <MSelect
+            label="Option"
+            v-model="option"
+            :options="options"
+            :option-value="'id'"
+            :option-label="'name'"
+            :rules="[rules.isRequired]"
+            multiple
+            />
+        <!-- <MCheckbox
             label="Agree to terms"
             v-model="agree"
             :rules="[rules.isRequired]"
@@ -33,7 +44,7 @@
             Something here!
         </MCheckbox>
 
-        <MColorPicker />
+        <MColorPicker /> -->
 
 
         <MButton type="submit" color="blue">Submit</MButton>

package/src/components/index.ts

@@ -56,3 +56,4 @@ export { default as MConfirmProvider } from './confirm/ConfirmProvider.vue';
 export { default as MDialog } from './dialog/Dialog.vue';
 export { default as MDialogProvider } from './dialogprovider/DialogProvider.vue';
 export { default as MTree } from './tree/Tree.vue';
+export { default as MPopover } from './popover/Popover.vue';

package/src/components/messageprovider/MessageProvider.vue

@@ -1,77 +1,73 @@
 <template>
     <slot />
-    <template v-if="messageList.length > 0">
-        <Teleport to="body">
-            <transition
-                type="animation"
-                :enter-active-class="modalScale.enterActive"
-                :leave-active-class="modalScale.leaveActive"
-                :enter-from-class="modalScale.enterFrom"
-                :leave-to-class="modalScale.leaveTo">
-                <div :class="classes">
-                    <MMessage
-                        v-for="message in messageList"
-                        :key="message.key"
-                        :internalKey="message.key"
-                        :variant="message.type"
-                        :content="message.content"
-                        :timeout="message.timeout ?? timeout"
-                        ref="messageRefs"
-                        :on-internal-after-leave="onInternalAfterLeave" />
-                </div>
-            </transition>
-        </Teleport>
-    </template>
+    <Toaster
+        :class="style.toaster"
+        :position="sonnerPosition"
+        :duration="timeout"
+        :visible-toasts="max"
+        :close-button-position="closeButtonPosition"
+    />
 </template>
 
 <script lang="ts">
-import {
-    ref,
-    reactive,
-    defineComponent,
-    provide,
-    computed
-} from 'vue';
+import 'vue-sonner/style.css';
+
+import { computed, defineComponent, provide, reactive, watch } from 'vue';
+import { Toaster, toast } from 'vue-sonner';
+import type { ExternalToast } from 'vue-sonner';
 import type {
-    MessageType,
-    MessageReactive,
-    MessageOptions,
-    MessageApiInjection,
     ContentType,
-    MessagePlacement
+    MessageApiInjection,
+    MessageCloseButtonPosition,
+    MessageOptions,
+    MessagePlacement,
+    MessageReactive,
+    MessageType,
 } from './types';
 import type { PropType } from 'vue';
-import MMessage from './Message.vue';
-import * as style from './style';
-import { modalScale } from '../../styles/transitions.css';
+import * as style from './style/Toaster.css';
 
 interface PrivateMessageReactive extends MessageReactive {
-    key: string;
+    id: string;
 }
 
-interface PrivateMessageRef extends MessageReactive {
-    key: string;
-    hide: () => void;
-}
+const placementMap: Record<MessagePlacement, ExternalToast['position']> = {
+    top: 'top-center',
+    'top-left': 'top-left',
+    'top-right': 'top-right',
+    bottom: 'bottom-center',
+    'bottom-left': 'bottom-left',
+    'bottom-right': 'bottom-right',
+};
 
 export default defineComponent({
     name: 'MMessageProvider',
     components: {
-        MMessage
+        Toaster,
     },
     props: {
         placement: {
             type: String as PropType<MessagePlacement>,
-            default: 'top'
+            default: 'top',
         },
         timeout: {
             type: Number,
-            default: 3000
-        }
+            default: 3000,
+        },
+        max: {
+            type: Number,
+            default: 999,
+        },
+        closeButtonPosition: {
+            type: String as PropType<MessageCloseButtonPosition>,
+            default: 'top-right',
+        },
     },
-    setup(props, { slots }) {
-        const messageListRef = ref<PrivateMessageReactive[]>([]);
-        const messageRefs = ref<Record<string, PrivateMessageRef>>({});
+    setup(props) {
+        const activeMessages = new Map<string, { stop: () => void; closed: boolean; onClose?: () => void }>();
+
+        const sonnerPosition = computed(() => placementMap[props.placement]);
+
         const api: MessageApiInjection = {
             create(content: ContentType, options?: MessageOptions) {
                 return create(content, { type: 'default', ...options });
@@ -91,62 +87,119 @@ export default defineComponent({
             loading(content: ContentType, options?: MessageOptions) {
                 return create(content, { ...options, type: 'loading' });
             },
-            destroyAll
+            destroyAll,
         };
 
         provide('m-message', api);
+
+        function normalizeDuration(timeout?: number): number {
+            if (timeout === 0) {
+                return Infinity;
+            }
+
+            return timeout ?? props.timeout;
+        }
+
+        function syncToast(message: PrivateMessageReactive, isUpdate = false) {
+            const options: ExternalToast = {
+                id: message.id,
+                duration: normalizeDuration(message.timeout),
+                closeButton: message.closeButton ?? message.closable,
+                richColors: message.richColors,
+                position: sonnerPosition.value,
+                onDismiss: () => closeMessage(message.id, true),
+                onAutoClose: () => closeMessage(message.id, true),
+            };
+
+            if (isUpdate) {
+                toast.dismiss(message.id);
+            }
+
+            switch (message.type) {
+                case 'success':
+                    toast.success(message.content, options);
+                    break;
+                case 'info':
+                    toast.info(message.content, options);
+                    break;
+                case 'warning':
+                    toast.warning(message.content, options);
+                    break;
+                case 'error':
+                    toast.error(message.content, options);
+                    break;
+                case 'loading':
+                    toast.loading(message.content, options);
+                    break;
+                default:
+                    toast(message.content, options);
+                    break;
+            }
+        }
+
+        function closeMessage(id: string, invokeOnClose: boolean) {
+            const active = activeMessages.get(id);
+            if (!active || active.closed) {
+                return;
+            }
+
+            active.closed = true;
+            active.stop();
+
+            if (invokeOnClose) {
+                active.onClose?.();
+            }
+
+            activeMessages.delete(id);
+        }
+
         function create(
             content: ContentType,
             options: MessageOptions & { type: MessageType }
         ): MessageReactive {
-            const key = Math.random()
-                .toString(16)
-                .slice(2, 2 + 12);
-            const messageReactive = reactive({
-                ...options,
+            const id = Math.random().toString(16).slice(2, 14);
+            const message = reactive({
+                id,
                 content,
-                key,
+                timeout: options.timeout,
+                closable: options.closable,
+                closeButton: options.closeButton,
+                richColors: options.richColors,
+                type: options.type,
+                onClose: options.onClose,
                 destroy: () => {
-                    messageRefs.value[key].hide();
-                }
-            });
+                    closeMessage(id, false);
+                    toast.dismiss(id);
+                },
+            }) as PrivateMessageReactive;
+
+            const stop = watch(
+                () => [message.content, message.type, message.timeout, message.closable, message.closeButton, message.richColors, sonnerPosition.value],
+                (newVal, oldVal) => {
+                    syncToast(message, !!oldVal);
+                },
+                { immediate: true }
+            );
 
-            messageListRef.value.push(messageReactive);
-            return messageReactive;
+            activeMessages.set(id, { stop, closed: false, onClose: options.onClose });
+
+            return message;
         }
 
         function destroyAll(): void {
-            //@ts-ignore
-            Object.values(messageRefs.value).forEach(messageRef => {
-                messageRef.hide();
-            });
-        }
+            for (const [id, active] of activeMessages.entries()) {
+                active.closed = true;
+                active.stop();
+            }
 
-        function onInternalAfterLeave(key: string): void {
-            messageListRef.value = messageListRef.value.filter(
-                message => message.key !== key
-            );
-            delete messageRefs.value[key];
+            activeMessages.clear();
+            toast.dismiss();
         }
 
-        const classes = computed(() => {
-            return [
-                style.wrapper,
-                // @ts-ignore
-                [style.placement[props.placement]]
-            ];
-        });
-
-        return Object.assign(
-            {
-                messageRefs,
-                messageList: messageListRef,
-                onInternalAfterLeave,
-                classes,
-                modalScale
-            },
-            api
-        );
-    }
+        return {
+            sonnerPosition,
+            style,
+        };
+    },
 });
 </script>

package/src/components/messageprovider/examples/basic.vue

@@ -37,13 +37,15 @@ function updateNumber() {
         msg.content = `Saved Successfully`;
         msg.type = 'success';
         msg.timeout = 3000;
+        msg.closable = true
     }
 }
 
 
 const showSuccess = () => {
     message.success(`Hello World`, {
-        timeout: 3000
+        timeout: 3000,
+        richColors: true,
     });
 };
 

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

@@ -1,6 +1,15 @@
 import MMessageProvider from '../MessageProvider.vue';
 import { MMessageProviderBasic } from './index';
 
+const placementOptions = [
+    'top',
+    'top-left',
+    'top-right',
+    'bottom',
+    'bottom-left',
+    'bottom-right'
+];
+
 const Template = (args: any) => ({
     components: {
         MMessageProvider,
@@ -20,7 +29,34 @@ const Template = (args: any) => ({
 
 export default {
     component: MMessageProvider,
-    title: 'Components/MessageProvider'
+    title: 'Components/MessageProvider',
+    args: {
+        placement: 'top',
+        timeout: 3000,
+        max: 5,
+        closeButtonPosition: 'top-right'
+    },
+    argTypes: {
+        placement: {
+            control: 'select',
+            options: placementOptions
+        },
+        closeButtonPosition: {
+            control: 'select',
+            options: [
+                'top-left',
+                'top-right',
+                'bottom-left',
+                'bottom-right'
+            ]
+        },
+        timeout: {
+            control: 'number'
+        },
+        max: {
+            control: 'number'
+        }
+    }
 };
 
 export const Primary = Template.bind({});

package/src/components/messageprovider/style/Toaster.css.ts

@@ -0,0 +1,24 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+import { themeVars } from '../../../styles/theme.css';
+
+export const toaster = style({});
+
+globalStyle(`${toaster} [data-sonner-toast][data-type='success'] [data-icon]`, {
+    color: themeVars.color.green[500]
+});
+
+globalStyle(`${toaster} [data-sonner-toast][data-type='error'] [data-icon]`, {
+    color: themeVars.color.red[500]
+});
+
+globalStyle(`${toaster} [data-sonner-toast][data-type='warning'] [data-icon]`, {
+    color: themeVars.color.amber[500]
+});
+
+globalStyle(`${toaster} [data-sonner-toast][data-type='info'] [data-icon]`, {
+    color: themeVars.color.blue[500]
+});
+
+globalStyle(`${toaster} [data-sonner-toast][data-type='loading'] [data-icon]`, {
+    color: themeVars.color.gray[500]
+});