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

package/src/components/messageprovider/types.ts

@@ -17,6 +17,12 @@ export type MessagePlacement =
     | 'bottom-left'
     | 'bottom-right';
 
+export type MessageCloseButtonPosition =
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right';
+
 export type MessageRenderMessage = (props: any) => VNodeChild;
 
 export interface MessageOptions {
@@ -24,6 +30,8 @@ export interface MessageOptions {
     render?: MessageRenderMessage;
     timeout?: number;
     closable?: boolean;
+    closeButton?: boolean;
+    richColors?: boolean;
     onClose?: () => void;
 }
 
@@ -31,6 +39,8 @@ export interface MessageReactive {
     content: ContentType;
     timeout?: number;
     closable?: boolean;
+    closeButton?: boolean;
+    richColors?: boolean;
     type: MessageType;
     onClose?: () => void;
     destroy: () => void;

package/src/components/modal/Modal.vue

@@ -1,66 +1,98 @@
 <template>
-    <Teleport :to="'body'">
-        <TransitionGroup type="animation" :enter-active-class="fade.enterActive" :leave-active-class="fade.leaveActive"
-            :enter-from-class="fade.enterFrom" :leave-to-class="fade.leaveTo">
-            <div :class="style.mask" :style="{ zIndex: zIndex }" v-if="isOpen"></div>
-            <div tabIndex="-1" v-if="isOpen" @keydown="onWrapperKeyDown" ref="wrapperRef" role="dialog"
-                :class="computedWrapperClasses" :style="computedWrapperStyles" @click="onOutsideClick">
-                <!--                    <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="computedModalClasses" role="document" v-bind="$attrs" :style="contentStyleRef">
-                    <div :class="computedContainerClasses" @mousedown="onContentMouseDown" @mouseup="onContentMouseUp"
-                        ref="target">
-                        <template v-if="loading">
-                            <slot name="loading"> Loading...</slot>
-                        </template>
-                        <template v-else>
-                            <div :class="style.sidebar" v-if="hasSidebar">
-                                <slot name="sidebar"></slot>
-                            </div>
-                            <div :class="style.content">
-                                <div v-if="title || showClose" :class="style.header">
-                                    <div :class="style.title" v-if="title">
-                                        <div>{{ title }}</div>
+    <DialogRoot :open="isOpen" modal @update:open="handleOpenChange">
+        <DialogPortal to="body">
+            <Transition appear type="animation" :enter-active-class="fade.enterActive" :leave-active-class="fade.leaveActive"
+                :enter-from-class="fade.enterFrom" :leave-to-class="fade.leaveTo">
+                <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">
+                <div tabIndex="-1" v-if="isOpen" ref="wrapperRef"
+                    :class="computedWrapperClasses" :style="computedWrapperStyles">
+                    <DialogContent
+                        force-mount
+                        :class="computedModalClasses"
+                        v-bind="$attrs"
+                        :style="contentStyleRef"
+                        :disable-outside-pointer-events="true"
+                        @open-auto-focus="handleOpenAutoFocus"
+                        @escape-key-down="onEscapeKeyDown"
+                        @pointer-down-outside="onPointerDownOutside"
+                        @interact-outside="onInteractOutside"
+                    >
+                        <FocusScope :trapped="focusTrap" :loop="focusTrap">
+                            <div :class="computedContainerClasses" ref="target">
+                                <template v-if="loading">
+                                    <slot name="loading"> Loading...</slot>
+                                </template>
+                                <template v-else>
+                                    <div :class="style.sidebar" v-if="hasSidebar">
+                                        <slot name="sidebar"></slot>
+                                    </div>
+                                    <div :class="style.content">
+                                        <div v-if="title || showClose" :class="style.header">
+                                            <DialogTitle as-child v-if="title">
+                                                <div :class="style.title">
+                                                    <div>{{ title }}</div>
+                                                </div>
+                                            </DialogTitle>
+                                        </div>
+                                        <DialogClose as-child v-if="showClose">
+                                            <button :class="style.close"></button>
+                                        </DialogClose>
+                                        <div :class="style.body" ref="bodyRef">
+                                            <slot name="body"></slot>
+                                            <slot></slot>
+                                        </div>
+                                        <div :class="style.footer" v-if="hasFooter">
+                                            <slot name="footer"></slot>
+                                        </div>
                                     </div>
-                                </div>
-                                <button v-if="showClose" :class="style.close" @click="close"></button>
-                                <div :class="style.body">
-                                    <slot name="body"></slot>
-                                    <slot></slot>
-                                </div>
-                                <div :class="style.footer" v-if="hasFooter">
-                                    <slot name="footer"></slot>
-                                </div>
+                                </template>
                             </div>
-                        </template>
-                    </div>
+                        </FocusScope>
+                    </DialogContent>
                 </div>
-                <!--                    </Transition>-->
-            </div>
-        </TransitionGroup>
-    </Teleport>
+            </Transition>
+        </DialogPortal>
+    </DialogRoot>
 </template>
 
 <script lang="ts">
 import type { CSSProperties, PropType } from 'vue';
+import {
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+    DialogTitle,
+    FocusScope,
+} from 'reka-ui';
 import {
     computed,
     defineComponent,
     nextTick,
+    provide,
     ref,
     shallowRef,
     watch
 } from 'vue';
 import * as style from './style';
 import { fade, modalScale } from '../../styles/transitions.css';
-import { useZIndex } from '../../composables/useZIndex';
+import { useZIndex, ZINDEX } from '../../composables/useZIndex';
 
 export default defineComponent({
     name: 'MModal',
+    components: {
+        DialogClose,
+        DialogContent,
+        DialogOverlay,
+        DialogPortal,
+        DialogRoot,
+        DialogTitle,
+        FocusScope,
+    },
     props: {
         open: {
             type: Boolean,
@@ -106,15 +138,21 @@ export default defineComponent({
         centered: {
             type: Boolean,
             default: true
+        },
+        focusTrap: {
+            type: Boolean,
+            default: true
         }
     },
-    emits: ['open', 'update:open'],
+    emits: ['open', 'close', 'update:open'],
     setup(props, { emit, slots }) {
         const { nextZIndex } = useZIndex();
 
         const target = ref();
+        const bodyRef = ref<HTMLElement | null>(null);
         const wrapperRef = shallowRef<HTMLDivElement>();
         const zIndex = ref(props.zIndex ?? nextZIndex());
+        provide(ZINDEX, zIndex);
         const hasSidebar = computed(() => !!slots.sidebar);
         const hasFooter = computed(() => !!slots.footer);
         const transformOrigin = ref<string>();
@@ -194,43 +232,78 @@ export default defineComponent({
             };
         });
 
-        const contentClickRef = shallowRef(false);
-        const contentTimeoutRef = shallowRef<any>();
+        const canCloseOutside = computed(() => props.canClickOutside || props.outsideClose);
+
+        const focusableBodySelector = [
+            '[autofocus]',
+            'input:not([type="hidden"])',
+            'textarea',
+            'select',
+            '[contenteditable="true"]',
+            'button',
+            'a[href]',
+            '[tabindex]:not([tabindex="-1"])'
+        ].join(', ');
+
+        function getFirstFocusableBodyElement() {
+            if (!bodyRef.value) {
+                return null;
+            }
+
+            return Array.from(
+                bodyRef.value.querySelectorAll<HTMLElement>(focusableBodySelector)
+            ).find(element => {
+                return !element.matches(':disabled')
+                    && element.getAttribute('aria-disabled') !== 'true'
+                    && element.getAttribute('aria-hidden') !== 'true'
+                    && element.getClientRects().length > 0;
+            }) ?? null;
+        }
+
+        const handleOpenAutoFocus = (event: Event) => {
+            const firstFocusableBodyElement = getFirstFocusableBodyElement();
+
+            if (!firstFocusableBodyElement) {
+                return;
+            }
 
-        const onContentMouseDown = () => {
-            clearTimeout(contentTimeoutRef.value);
-            contentClickRef.value = true;
+            event.preventDefault();
+            firstFocusableBodyElement.focus();
         };
 
-        const onContentMouseUp = () => {
-            contentTimeoutRef.value = setTimeout(() => {
-                contentClickRef.value = false;
-            }, 0);
+        const onEscapeKeyDown = (e: KeyboardEvent) => {
+            e.stopPropagation();
+            close(e);
         };
 
-        const onOutsideClick = (e: MouseEvent) => {
-            if (!(props.canClickOutside || props.outsideClose)) {
-                return null;
+        const onPointerDownOutside = (e: Event) => {
+            if (!canCloseOutside.value) {
+                e.preventDefault();
             }
+        };
 
-            if (contentClickRef.value) {
-                contentClickRef.value = false;
-            } else if (wrapperRef.value === e.target) {
-                close(e);
+        const onInteractOutside = (e: Event) => {
+            if (!canCloseOutside.value) {
+                e.preventDefault();
+                return;
             }
+
+            close(e as MouseEvent | KeyboardEvent);
         };
 
-        const onWrapperKeyDown = (e: KeyboardEvent) => {
-            if (e.key === 'Escape') {
-                e.stopPropagation();
-                close(e);
+        const handleOpenChange = (value: boolean) => {
+            if (!value && isOpen.value) {
+                close(undefined);
                 return;
             }
+
+            isOpen.value = value;
         };
 
         const close = (e: MouseEvent | KeyboardEvent | undefined) => {
             props.onClose?.(e);
             ownerScrollbarClose();
+            emit('close', e);
             isOpen.value = false;
         };
 
@@ -283,12 +356,14 @@ export default defineComponent({
 
         return {
             close,
-            onOutsideClick,
             open,
-            onContentMouseDown,
-            onContentMouseUp,
-            onWrapperKeyDown,
+            onEscapeKeyDown,
+            onPointerDownOutside,
+            onInteractOutside,
+            handleOpenChange,
+            handleOpenAutoFocus,
             target,
+            bodyRef,
             style,
             isOpen,
             computedWrapperStyles,

package/src/components/modal/style/Modal.css.ts

@@ -79,7 +79,16 @@ export const modal = style({
     top: 100,
     paddingBottom: '24px',
     maxWidth: `calc(100vw - 32px)`,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            boxShadow: 'none'
+        }
+    }
 });
 
 export const centeredWrapper = style({
@@ -113,7 +122,17 @@ export const container = style({
     flexDirection: 'column',
     position: 'relative',
     gap: themeVars.space[2],
-    pointerEvents: 'auto'
+    pointerEvents: 'auto',
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            boxShadow:
+                '0 1px 2px -2px rgba(0, 0, 0, 0.08), 0 3px 6px 0 rgba(0, 0, 0, 0.06), 0 5px 12px 4px rgba(0, 0, 0, 0.04)'
+        }
+    }
 });
 
 export const hasSidebar = style({
@@ -159,6 +178,11 @@ export const close = style([
         ':focus': {
             backgroundColor: themeVars.color.gray[150]
         },
+        ':focus-visible': {
+            outline: 'none',
+            boxShadow: 'none',
+            backgroundColor: themeVars.color.gray[150]
+        },
         '::before': {
             content: '""',
             position: 'absolute',

package/src/components/popover/Popover.vue

@@ -0,0 +1,155 @@
+<template>
+    <PopoverRoot v-model:open="isOpen" :modal="modal">
+        <PopoverTrigger as-child>
+            <slot />
+        </PopoverTrigger>
+        <PopoverPortal :disabled="!transfer">
+            <PopoverContent
+                :class="contentClasses"
+                :side="resolvedSide"
+                :align="resolvedAlign"
+                :side-offset="sideOffset"
+                :collision-padding="collisionPadding"
+                :style="{ zIndex: zIndex }"
+            >
+                <slot name="content" />
+                <PopoverArrow v-if="showArrow" :class="style.arrow" :width="12" :height="6" />
+            </PopoverContent>
+        </PopoverPortal>
+    </PopoverRoot>
+</template>
+
+<script lang="ts">
+import {
+    PopoverArrow,
+    PopoverContent,
+    PopoverPortal,
+    PopoverRoot,
+    PopoverTrigger,
+    type PopoverContentProps
+} 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: 'MPopover',
+    inheritAttrs: false,
+    components: {
+        PopoverArrow,
+        PopoverContent,
+        PopoverPortal,
+        PopoverRoot,
+        PopoverTrigger
+    },
+    props: {
+        open: {
+            type: Boolean,
+            default: false
+        },
+        modal: {
+            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'
+        },
+        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?: PopoverContentProps['side'];
+                align?: PopoverContentProps['align'];
+            };
+        });
+
+        const showArrow = computed(() => {
+            const { align } = resolvedPlacement.value;
+            return props.arrow && (!align || align === 'center');
+        });
+
+        const contentClasses = computed(() => {
+            return [
+                'm-popover-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/popover/examples/arrow.vue

@@ -0,0 +1,47 @@
+<template>
+    <div style="padding: 100px; display: flex; gap: 16px; flex-wrap: wrap;">
+        <MPopover arrow placement="bottom">
+            <MButton>Bottom (Arrow)</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 180px;">
+                    <p style="margin: 0; font-size: 14px;">
+                        Arrow points to the trigger.
+                    </p>
+                </div>
+            </template>
+        </MPopover>
+
+        <MPopover arrow placement="top">
+            <MButton>Top (Arrow)</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 180px;">
+                    <p style="margin: 0; font-size: 14px;">
+                        Arrow points to the trigger.
+                    </p>
+                </div>
+            </template>
+        </MPopover>
+
+        <MPopover arrow placement="left">
+            <MButton>Left (Arrow)</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 180px;">
+                    <p style="margin: 0; font-size: 14px;">
+                        Arrow points to the trigger.
+                    </p>
+                </div>
+            </template>
+        </MPopover>
+
+        <MPopover arrow placement="right">
+            <MButton>Right (Arrow)</MButton>
+            <template #content>
+                <div style="padding: 8px; min-width: 180px;">
+                    <p style="margin: 0; font-size: 14px;">
+                        Arrow points to the trigger.
+                    </p>
+                </div>
+            </template>
+        </MPopover>
+    </div>
+</template>

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>