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

package/src/components/dialog/Dialog.vue

@@ -1,25 +1,41 @@
 <template>
-    <Teleport to="body">
-        <Transition :enter-active-class="fade.enterActive" :leave-active-class="fade.leaveActive"
-            :enter-from-class="fade.enterFrom" :leave-to-class="fade.leaveTo">
-            <div :class="style.root" v-if="open"
-                :style="{ zIndex: zIndex, position: 'fixed', inset: '0', pointerEvents: modal ? 'all' : 'none' }">
-                <div :class="backdropClasses" v-if="modal"></div>
-                <div ref="wrapper" :class="wrapperClasses">
-
-                    <div ref="dialog" :style="computedStyle">
-                        <div tabindex="0" aria-hidden="true"
-                            style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
+    <DialogRoot :open="isOpen" :modal="modal" @update:open="handleOpenChange">
+        <DialogPortal to="body">
+            <Transition 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 && modal" force-mount :class="backdropClasses" style="z-index: 10"  />
+            </Transition>
+            <Transition type="animation" :enter-active-class="modalScale.enterActive" :leave-active-class="modalScale.leaveActive"
+                @after-leave="handleAfterLeave"
+                :enter-from-class="modalScale.enterFrom" :leave-to-class="modalScale.leaveTo">
+
+                <DialogContent
+                    v-if="isOpen"
+                    ref="dialog"
+                    force-mount
+                    :style="computedStyle"
+                    :disable-outside-pointer-events="modal"
+                    @open-auto-focus="handleOpenAutoFocus"
+                    @escape-key-down="handleEscapeKeyDown"
+                    @pointer-down-outside.prevent
+                    @focus-outside="handleFocusOutside"
+                    @interact-outside.prevent
+                >
+                    <FocusScope :trapped="focusTrap" :loop="focusTrap">
                         <slot v-if="$slots.container" name="container" :close="close"></slot>
                         <template v-else>
                             <div :class="style.content">
-                                <button role="button" :class="style.close" @click="close"></button>
+                                <DialogClose as-child>
+                                    <button ref="closeButton" role="button" :class="style.close"></button>
+                                </DialogClose>
                                 <div :class="headerClasses" ref="handle">
-                                    <div :class="style.title">
-                                        <slot name="title">
-                                            {{ resolvedTitle }}
-                                        </slot>
-                                    </div>
+                                    <DialogTitle as-child>
+                                        <div :class="style.title">
+                                            <slot name="title">
+                                                {{ resolvedTitle }}
+                                            </slot>
+                                        </div>
+                                    </DialogTitle>
                                 </div>
                                 <div>
                                     <slot></slot>
@@ -29,35 +45,53 @@
                                 </div>
                             </div>
                         </template>
-                        <div tabindex="0" aria-hidden="true"
-                            style="width: 0px; height: 0px; overflow: hidden; outline: none;"></div>
-                    </div>
-
-                </div>
-            </div>
-        </Transition>
-    </Teleport>
+                    </FocusScope>
+                </DialogContent>
+            </Transition>
+        </DialogPortal>
+    </DialogRoot>
 </template>
 <script lang="ts">
 import { fade, modalScale } from '../../styles/transitions.css';
+import {
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+    DialogTitle,
+    FocusScope,
+} from 'reka-ui';
 import {
     computed,
     defineComponent,
+    provide,
     ref,
+    shallowRef,
     watch,
     nextTick,
     isRef,
     type CSSProperties,
+    type ComponentPublicInstance,
     type PropType,
     type Ref,
 } from 'vue';
 import type { ComputedRef } from 'vue';
-import { useZIndex } from '../../composables/useZIndex';
+import { useZIndex, ZINDEX } from '../../composables/useZIndex';
 import { useDraggable, useEventListener } from '@vueuse/core';
 import * as style from './style';
 
 export default defineComponent({
     name: 'Dialog',
+    components: {
+        DialogClose,
+        DialogContent,
+        DialogOverlay,
+        DialogPortal,
+        DialogRoot,
+        DialogTitle,
+        FocusScope,
+    },
     props: {
         title: {
             type: [String, Object] as PropType<string | Ref<string>>,
@@ -92,17 +126,40 @@ export default defineComponent({
         },
     },
     // Eventually remove 'open', i lazy cant be assed for now
-    emits: ['onOpen', 'onClose', 'update:open', 'open'],
+    emits: ['onOpen', 'onClose', 'update:open', 'open', 'close'],
     setup(props, { emit, expose }) {
         const wrapper = ref<HTMLElement | null>(null);
-        const dialog = ref<HTMLElement | null>(null);
+        const dialog = shallowRef<HTMLElement | ComponentPublicInstance | null>(null);
         const handle = ref<HTMLElement | null>(null);
+        const closeButton = ref<HTMLElement | null>(null);
         const { nextZIndex, current: maxZIndex } = useZIndex();
         const zIndex = ref(props.zIndex ?? nextZIndex());
+        provide(ZINDEX, zIndex);
+        const hasOpened = ref(false);
 
         const isDragging = ref<boolean>(false);
 
-        const { x, y } = useDraggable(dialog, {
+        function resolveElement(
+            value: HTMLElement | ComponentPublicInstance | null | undefined
+        ): HTMLElement | null {
+            if (!value) {
+                return null;
+            }
+
+            if (value instanceof HTMLElement) {
+                return value;
+            }
+
+            if ('$el' in value && value.$el instanceof HTMLElement) {
+                return value.$el;
+            }
+
+            return null;
+        }
+
+        const dialogElement = computed(() => resolveElement(dialog.value));
+
+        const { x, y } = useDraggable(dialogElement, {
             handle,
             preventDefault: true,
             containerElement: wrapper,
@@ -115,6 +172,17 @@ export default defineComponent({
             isRef(props.title) ? props.title.value : props.title
         );
 
+        const focusableSelector = [
+            '[autofocus]',
+            'input:not([type="hidden"])',
+            'textarea',
+            'select',
+            '[contenteditable="true"]',
+            'button',
+            'a[href]',
+            '[tabindex]:not([tabindex="-1"])'
+        ].join(', ');
+
         const backdropClasses = computed(() => ({
             [style.backdrop]: true,
             [style.backdropColor]: props.modal === true,
@@ -131,6 +199,13 @@ export default defineComponent({
             [style.notModal]: !props.modal,
         }));
 
+        const wrapperStyle: ComputedRef<CSSProperties> = computed(() => ({
+            zIndex: zIndex.value,
+            position: 'fixed',
+            inset: '0',
+            pointerEvents: props.modal ? 'all' : 'none'
+        }));
+
         const width = computed(() =>
             typeof props.width === 'number' ? `${props.width}px` : props.width
         );
@@ -144,8 +219,17 @@ export default defineComponent({
         }));
 
         function close() {
-            emit('update:open', false);
-            onCloseEmit();
+            handleOpenChange(false);
+        }
+
+        function handleEscapeKeyDown(event: KeyboardEvent) {
+            event.preventDefault();
+            event.stopPropagation();
+            close();
+        }
+
+        function handleAfterLeave() {
+            emit('close');
         }
 
         function onCloseEmit() {
@@ -157,9 +241,54 @@ export default defineComponent({
 
         function onEnter() {
             emit('onOpen');
+            emit('open');
             zIndex.value = nextZIndex();
         }
 
+        function handleFocusOutside(event: Event) {
+            if (!props.focusTrap) {
+                return;
+            }
+
+            event.preventDefault();
+        }
+
+        function handleOpenAutoFocus(event: Event) {
+            const element = dialogElement.value;
+
+            if (!element) {
+                return;
+            }
+
+            const firstFocusableElement = Array.from(
+                element.querySelectorAll<HTMLElement>(focusableSelector)
+            ).find(candidate => {
+                return candidate !== closeButton.value
+                    && !candidate.matches(':disabled')
+                    && candidate.getAttribute('aria-disabled') !== 'true'
+                    && candidate.getAttribute('aria-hidden') !== 'true'
+                    && candidate.getClientRects().length > 0;
+            });
+
+            if (!firstFocusableElement) {
+                return;
+            }
+
+            event.preventDefault();
+            firstFocusableElement.focus();
+        }
+
+        function handleOpenChange(value: boolean) {
+            if (!value && props.open) {
+                emit('update:open', false);
+                onCloseEmit();
+                hasOpened.value = false;
+                return;
+            }
+
+            emit('update:open', value);
+        }
+
         function onDragStart() {
             if (zIndex.value < maxZIndex.value) {
                 zIndex.value = nextZIndex();
@@ -172,16 +301,20 @@ export default defineComponent({
         }
 
         function centerDialog() {
-            if (dialog.value) {
-                const boundingRect = dialog.value.getBoundingClientRect();
+            const element = dialogElement.value;
+
+            if (element) {
+                const boundingRect = element.getBoundingClientRect();
                 x.value = (window.innerWidth - boundingRect.width) / 2;
                 y.value = (window.innerHeight - boundingRect.height) / 2;
             }
         }
 
         function keepWithInBounds() {
-            if (dialog.value) {
-                const boundingRect = dialog.value.getBoundingClientRect();
+            const element = dialogElement.value;
+
+            if (element) {
+                const boundingRect = element.getBoundingClientRect();
                 const maxX = window.innerWidth - boundingRect.width;
                 const maxY = window.innerHeight - boundingRect.height;
 
@@ -206,7 +339,13 @@ export default defineComponent({
                 if (newVal) {
                     await nextTick();
                     centerDialog();
-                    emit('onOpen');
+                    zIndex.value = props.zIndex ?? nextZIndex();
+                    if (!hasOpened.value) {
+                        onEnter();
+                        hasOpened.value = true;
+                    }
+                } else {
+                    hasOpened.value = false;
                 }
             },
             { immediate: true }
@@ -220,6 +359,7 @@ export default defineComponent({
             wrapper,
             dialog,
             handle,
+            closeButton,
             zIndex,
             fade,
             modalScale,
@@ -229,9 +369,15 @@ export default defineComponent({
             backdropClasses,
             resolvedTitle,
             wrapperClasses,
+            wrapperStyle,
             close,
+            handleAfterLeave,
+            handleEscapeKeyDown,
             onEnter,
-            open: computed(() => props.open)
+            handleOpenChange,
+            handleOpenAutoFocus,
+            handleFocusOutside,
+            isOpen: computed(() => props.open)
         };
     },
 });

package/src/components/dialog/style/Dialog.css.ts

@@ -60,7 +60,16 @@ export const content = style({
     border: `1px solid ${themeVars.color.gray[300]}`,
     borderRadius: themeVars.rounded.medium,
     pointerEvents: 'auto',
-    boxShadow: `2px 2px 8px rgba(128, 128, 128, 0.1), 0 9px 28px 8px rgba(0,0,0,.05)`
+    boxShadow: `2px 2px 8px rgba(128, 128, 128, 0.1), 0 9px 28px 8px rgba(0,0,0,.05)`,
+    selectors: {
+        '&:focus': {
+            outline: 'none'
+        },
+        '&:focus-visible': {
+            outline: 'none',
+            boxShadow: `2px 2px 8px rgba(128, 128, 128, 0.1), 0 9px 28px 8px rgba(0,0,0,.05)`
+        }
+    }
 });
 
 export const header = style({
@@ -119,6 +128,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/dialogprovider/types.ts

@@ -11,6 +11,7 @@ export interface DialogOptions {
     open?: boolean;
     draggable?: boolean;
     modal?: boolean;
+    focusTrap?: boolean;
 }
 
 export interface DialogReactive {

package/src/components/dropdown/Dropdown.vue

@@ -1,5 +1,15 @@
 <template>
-    <ContextMenuRoot v-model:open="isOpen" v-if="contextMenu" v-bind="$attrs">
+    <ContextMenuSub v-model:open="isOpen" v-if="isContextMenu && isSubmenu">
+        <DropdownTriggerProvider>
+            <slot />
+        </DropdownTriggerProvider>
+        <ContextMenuPortal>
+            <ContextMenuSubContent :class="menuClasses" align="start" side="right" :side-offset="2" :align-offset="-6">
+                <slot name="menu" />
+            </ContextMenuSubContent>
+        </ContextMenuPortal>
+    </ContextMenuSub>
+    <ContextMenuRoot v-else-if="isContextMenu" v-model:open="isOpen" v-bind="$attrs">
         <ContextMenuTrigger as-child>
             <slot />
         </ContextMenuTrigger>
@@ -9,7 +19,17 @@
             </ContextMenuContent>
         </ContextMenuPortal>
     </ContextMenuRoot>
-    <DropdownMenuRoot v-model:open="isOpen" v-else :modal="modal" v-bind="$attrs">
+    <DropdownMenuSub v-else-if="isSubmenu" v-model:open="isOpen">
+        <DropdownTriggerProvider>
+            <slot />
+        </DropdownTriggerProvider>
+        <DropdownMenuPortal>
+            <DropdownMenuSubContent :class="menuClasses" align="start" side="right" :side-offset="2" :align-offset="-6">
+                <slot name="menu" />
+            </DropdownMenuSubContent>
+        </DropdownMenuPortal>
+    </DropdownMenuSub>
+    <DropdownMenuRoot v-else v-model:open="isOpen" :modal="modal" v-bind="$attrs">
         <DropdownMenuTrigger as-child>
             <slot />
         </DropdownMenuTrigger>
@@ -53,10 +73,12 @@ import {
     ContextMenuSubContent,
     ContextMenuSubTrigger,
     ContextMenuTrigger,
-} from 'radix-vue';
+} from 'reka-ui';
 import {
     computed,
     defineComponent,
+    inject,
+    provide,
     ref,
     watch,
     type PropType
@@ -65,6 +87,7 @@ import { useZIndex } from '../../composables/useZIndex';
 import { scale } from '../../styles/transitions.css';
 import * as style from './style';
 import { DROPDOWN_STATE } from './symbol';
+import DropdownTriggerProvider from './DropdownTriggerProvider.vue';
 
 export default defineComponent({
     name: 'Dropdown',
@@ -99,6 +122,7 @@ export default defineComponent({
         ContextMenuSubContent,
         ContextMenuSubTrigger,
         ContextMenuTrigger,
+        DropdownTriggerProvider,
     },
     props: {
         open: {
@@ -151,6 +175,9 @@ export default defineComponent({
     },
     emits: ['update:open'],
     setup(props, { emit }) {
+        const parentState = inject(DROPDOWN_STATE, null);
+        const isSubmenu = computed(() => !!parentState);
+        const isContextMenu = computed(() => props.contextMenu || parentState?.contextMenu || false);
         const { nextZIndex } = useZIndex();
         const isOpen = ref(props.open);
         const placement = ref(props.placement);
@@ -158,6 +185,16 @@ export default defineComponent({
         const referenceRef = ref<HTMLElement>();
         const zIndex = ref(props.zIndex ?? nextZIndex());
 
+        provide(DROPDOWN_STATE, {
+            contextMenu: isContextMenu.value,
+            isOpen: isOpen.value,
+            handleSelect(labels: string[]) {
+                isOpen.value = false;
+                props.onSelect(labels);
+                parentState?.handleSelect(labels);
+            }
+        });
+
         watch(
             () => props.open,
             value => {
@@ -165,6 +202,10 @@ export default defineComponent({
             }
         );
 
+        watch(isOpen, value => {
+            emit('update:open', value);
+        });
+
         function toggleDropdown() {
             isOpen.value = !isOpen.value;
         }
@@ -199,6 +240,8 @@ export default defineComponent({
             computedReferenceClasses,
             transitionName,
             toggleDropdown,
+            isContextMenu,
+            isSubmenu,
             zIndex,
             scale
         };

package/src/components/dropdown/DropdownItem.vue

@@ -1,54 +1,50 @@
 <template>
-    <DropdownMenuItem :class="computedWrapperClasses" :as="computedType" :href="href">
-        <div :class="style.menuItemIcon">
-            <slot name="icon-left" />
-        </div>
-        <div :class="style.menuItemTextContainer">
-            <span :class="style.menuItemText"><slot /></span>
-        </div>
-        <slot name="keyboard" />
-    </DropdownMenuItem>
-    <!-- <component
-        :is="computedType"
-        :href="href"
+    <component
+        :is="itemComponent"
         ref="wrapper"
         :class="computedWrapperClasses"
-        role="menuitem"
-        tabindex="0"
-        @click="handleSelect"
-        v-bind="$attrs">
+        :disabled="disabled"
+        v-bind="componentProps"
+        @select="!isSubmenuTrigger ? handleSelect : undefined"
+    >
         <div v-if="hasIconLeft" :class="style.menuItemIcon">
             <slot name="icon-left" />
         </div>
         <div :class="style.menuItemTextContainer">
             <span :class="style.menuItemText"><slot /></span>
         </div>
-        <!-- <div v-if="hotkey" class="m-dropdown__hotkeys">
-            <template v-for="key in hotkey.split('+')">
-                <kbd>{{ key }}</kbd>
-            </template>
-        </div> -->
-        <!-- <div v-if="hasIconRight" :class="style.menuItemIcon">
+        <slot name="keyboard" />
+        <div v-if="hasIconRight" :class="style.menuItemIconRight">
             <slot name="icon-right" />
         </div>
-    </component> -->
+    </component>
 </template>
 
 <script lang="ts">
 import {
     computed,
     defineComponent,
+    inject,
     type PropType,
     ref
 } from 'vue';
-import { DropdownMenuItem } from "radix-vue";
+import {
+    ContextMenuItem,
+    ContextMenuSubTrigger,
+    DropdownMenuItem,
+    DropdownMenuSubTrigger
+} from 'reka-ui';
 import * as style from './style';
 import type { Variant } from '../../types/props';
+import { DROPDOWN_STATE, DROPDOWN_TRIGGER_STATE } from './symbol';
 
 export default defineComponent({
     name: 'DropdownItem',
     components: {
+        ContextMenuItem,
+        ContextMenuSubTrigger,
         DropdownMenuItem
+        ,DropdownMenuSubTrigger
     },
     props: {
         label: {
@@ -86,15 +82,25 @@ export default defineComponent({
     },
     emits: [],
     setup(props, { slots }) {
+        const dropdownState = inject(DROPDOWN_STATE, null);
+        const isSubmenuTrigger = inject(DROPDOWN_TRIGGER_STATE, false);
 
         const hasIconLeft = computed(() => !!slots['icon-left']);
         const hasIconRight = computed(() => !!slots['icon-right']);
 
-        const wrapper = ref(null);
+        const wrapper = ref<HTMLElement | null>(null);
         const computedWrapperClasses = computed(() => {
             return [style.menuItem, style.variant[props.variant]];
         });
 
+        const itemComponent = computed(() => {
+            if (isSubmenuTrigger) {
+                return dropdownState?.contextMenu ? ContextMenuSubTrigger : DropdownMenuSubTrigger;
+            }
+
+            return dropdownState?.contextMenu ? ContextMenuItem : DropdownMenuItem;
+        });
+
         const computedType = computed(() => {
             if (props.href) {
                 return 'a';
@@ -103,11 +109,35 @@ export default defineComponent({
             return 'div';
         });
 
+        const componentProps = computed(() => {
+            if (isSubmenuTrigger) {
+                return {};
+            }
+
+            return {
+                as: computedType.value,
+                href: props.href
+            };
+        });
+
+        function handleSelect() {
+            if (props.disabled || isSubmenuTrigger) {
+                return;
+            }
+
+            dropdownState?.handleSelect([String(props.label ?? wrapper.value?.textContent?.trim() ?? '')]);
+            props.onSelect(props.label ?? wrapper.value?.textContent?.trim() ?? '');
+        }
+
         return {
             wrapper,
+            itemComponent,
+            isSubmenuTrigger,
             hasIconLeft,
             hasIconRight,
             computedWrapperClasses,
+            componentProps,
+            handleSelect,
             style,
             computedType
         };

package/src/components/dropdown/DropdownSeperator.vue

@@ -1,26 +1,34 @@
 <template>
-    <DropdownMenuSeparator :class="computedClasses" />
+    <component :is="separatorComponent" :class="computedClasses" />
 </template>
 
 <script lang="ts">
-import {computed, defineComponent} from "vue";
-import * as style from "./style";
-import { DropdownMenuSeparator  } from 'radix-vue';
+import { computed, defineComponent, inject } from 'vue';
+import { ContextMenuSeparator, DropdownMenuSeparator } from 'reka-ui';
+import * as style from './style';
+import { DROPDOWN_STATE } from './symbol';
+
 export default defineComponent({
-    name: "DropdownSeperator",
+    name: 'DropdownSeperator',
     components: {
+        ContextMenuSeparator,
         DropdownMenuSeparator
     },
     setup() {
+        const dropdownState = inject(DROPDOWN_STATE, null);
+
         const computedClasses = computed(() => {
-            return [
-                style.menuSeperator
-            ]
+            return [style.menuSeperator];
+        });
+
+        const separatorComponent = computed(() => {
+            return dropdownState?.contextMenu ? ContextMenuSeparator : DropdownMenuSeparator;
         });
 
         return {
-            computedClasses
-        }
+            computedClasses,
+            separatorComponent
+        };
     }
-})
+});
 </script>

package/src/components/dropdown/DropdownTriggerProvider.vue

@@ -0,0 +1,15 @@
+<template>
+    <slot />
+</template>
+
+<script lang="ts">
+import { defineComponent, provide } from 'vue';
+import { DROPDOWN_TRIGGER_STATE } from './symbol';
+
+export default defineComponent({
+    name: 'DropdownTriggerProvider',
+    setup() {
+        provide(DROPDOWN_TRIGGER_STATE, true);
+    }
+});
+</script>