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

package/src/components/cardcontextmenu/CardContextMenu.vue

@@ -1,35 +1,52 @@
 <template>
-    <span ref="wrapper" :class="computedWrapperClasses">
-        <span
-            ref="referenceRef"
-            :class="computedReferenceClasses"
-            @click="toggleDropdown">
+    <DropdownMenuSub v-if="isNested" v-model:open="isOpen">
+        <CardContextMenuTriggerProvider>
             <slot />
-        </span>
-
-        <CardContextMenuWrapper>
-            <Teleport :disabled="isNested" to="body">
-                <transition
-                    :enter-active-class="scale.enterActive"
-                    :leave-active-class="scale.leaveActive"
-                    :enter-from-class="scale.enterFrom"
-                    :leave-to-class="scale.leaveTo">
-                    <div
-                        v-if="isOpen"
-                        ref="popper"
-                        :class="menuClasses"
-                        :style="{ zIndex: zIndex, maxHeight: maxHeight }">
-                        <slot name="menu" />
-                    </div>
-                </transition>
-            </Teleport>
-        </CardContextMenuWrapper>
-    </span>
+        </CardContextMenuTriggerProvider>
+        <DropdownMenuPortal>
+            <DropdownMenuSubContent
+                :class="menuClasses"
+                align="start"
+                side="right"
+                :side-offset="2"
+                :align-offset="-6"
+                :style="{ zIndex, maxHeight }"
+            >
+                <slot name="menu" />
+            </DropdownMenuSubContent>
+        </DropdownMenuPortal>
+    </DropdownMenuSub>
+    <DropdownMenuRoot v-else :open="isOpen" @update:open="handleOpenChange">
+        <DropdownMenuTrigger v-if="$slots.default && !virtual" as-child>
+            <span ref="referenceRef" :class="computedReferenceClasses">
+                <slot />
+            </span>
+        </DropdownMenuTrigger>
+        <DropdownMenuPortal>
+            <DropdownMenuContent
+                v-if="isOpen"
+                :reference="reference"
+                :class="menuClasses"
+                :style="{ zIndex, maxHeight }"
+                :side-offset="14"
+                @close-auto-focus.prevent
+            >
+                <slot name="menu" />
+            </DropdownMenuContent>
+        </DropdownMenuPortal>
+    </DropdownMenuRoot>
 </template>
 
 <script lang="ts">
-import { usePopper } from '../../composables/usePopper';
 import type { Placement, VirtualElement } from '@popperjs/core';
+import {
+    DropdownMenuContent,
+    DropdownMenuPortal,
+    DropdownMenuRoot,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuTrigger,
+} from 'reka-ui';
 import { scale } from '../../styles/transitions.css';
 import {
     defineComponent,
@@ -39,23 +56,28 @@ import {
     provide,
     watch,
     onMounted,
-    nextTick,
     computed,
     toRef,
     reactive,
     watchEffect
 } from 'vue';
-import { onClickOutside, useEventListener } from '@vueuse/core';
-import { useLabel } from './hooks';
+import { useEventListener } from '@vueuse/core';
 import { useZIndex } from '../../composables/useZIndex';
 import type { CardContextMenuState } from './symbol';
 import { CARDCONTEXTMENU_STATE } from './symbol';
 import * as style from './style';
-import CardContextMenuWrapper from './CardContextMenuWrapper.vue';
+import CardContextMenuTriggerProvider from './CardContextMenuTriggerProvider.vue';
+
 export default defineComponent({
     name: 'CardContextMenu',
     components: {
-        CardContextMenuWrapper
+        CardContextMenuTriggerProvider,
+        DropdownMenuContent,
+        DropdownMenuPortal,
+        DropdownMenuRoot,
+        DropdownMenuSub,
+        DropdownMenuSubContent,
+        DropdownMenuTrigger,
     },
     props: {
         open: {
@@ -109,10 +131,7 @@ export default defineComponent({
         const isNested = !!parentState;
         const label = toRef(props, 'label');
         const isOpen = ref(props.open);
-        const placement = ref(props.placement);
-        const transfer = toRef(props, 'transfer');
-        const wrapper = ref(null);
-        const referenceRef = ref(null);
+        const referenceRef = ref<HTMLElement | null>(null);
         const zIndex = ref(props.zIndex ?? nextZIndex());
         const reference = computed(() => {
             if (props.virtual !== null) {
@@ -137,81 +156,39 @@ export default defineComponent({
             }
             return referenceRef.value;
         });
-        const { popper, transferTo, updatePopper } = usePopper({
-            reference: reference,
-            placement,
-            transfer,
-            wrapper,
-            isDrop: true,
-            offset: isNested ? [-2, 2] : [0, 14]
-        });
-        const currentLabel = useLabel(label, referenceRef);
         provide('dropdown-select', null);
         const startState: CardContextMenuState = reactive({
             handleSelect: handleSelect,
-            isOpen: isOpen
+            isOpen: isOpen.value
         });
         provide(CARDCONTEXTMENU_STATE, startState);
+
         watch(
             () => props.open,
             value => {
                 isOpen.value = value;
             }
         );
-        watch(
-            () => props.placement,
-            value => {
-                setPlacement(value);
-            }
-        );
+
         watch(isOpen, value => {
             if (value) {
-                updatePopper();
+                zIndex.value = props.zIndex ?? nextZIndex();
             }
             emit('update:open', value);
         });
-        onMounted(() => {
-            nextTick(() => {
-                setPlacement(props.placement);
-            });
-        });
-        useEventListener('resize', () => {
-            updatePopper();
-        });
-        onClickOutside(wrapper, e => {
-            let parent = e.target as HTMLElement;
-            let i = 0;
-            while (parent) {
-                if (parent.classList.contains('m-dropdown-menu')) {
-                    return;
-                }
-                parent = parent.parentElement as HTMLElement;
-                if (i > 10) {
-                    break;
-                }
-                i++;
-            }
-            isOpen.value = false;
-        });
-        function setPlacement(value: Placement) {
-            const [xPlacement] = value.split('-');
-            if (isNested && xPlacement !== 'right' && xPlacement !== 'left') {
-                placement.value = 'right-start';
-            } else {
-                placement.value = value;
-            }
-        }
-        function toggleDropdown() {
-            isOpen.value = !isOpen.value;
-        }
+
         function handleSelect(labels: string[]) {
             isOpen.value = false;
             props.onSelect(labels);
             if (typeof parentState?.handleSelect === 'function') {
-                // @ts-ignore
-                parentState.handleSelect([currentLabel.value!, ...labels]);
+                parentState.handleSelect(labels);
             }
         }
+
+        function handleOpenChange(value: boolean) {
+            isOpen.value = value;
+        }
+
         const computedWrapperClasses = computed(() => {
             return [
                 'm-dropdown',
@@ -221,7 +198,7 @@ export default defineComponent({
                 }
             ];
         });
-        const computedReferenceClasses = computed(() => {});
+        const computedReferenceClasses = computed(() => undefined);
         const menuClasses = computed(() => {
             return ['m-dropdown-menu', style.menu];
         });
@@ -232,7 +209,6 @@ export default defineComponent({
         useEventListener(window, 'resize', () => {
             if (isOpen.value) {
                 resize();
-                updatePopper();
             }
         });
         watchEffect(() => {
@@ -255,18 +231,15 @@ export default defineComponent({
             }px`;
         }
         return {
-            wrapper,
             referenceRef,
-            popper,
-            transferTo,
+            reference,
             isOpen,
             isNested,
-            placement,
+            handleOpenChange,
             menuClasses,
             computedWrapperClasses,
             computedReferenceClasses,
             transitionName,
-            toggleDropdown,
             zIndex,
             scale,
             maxHeight

package/src/components/cardcontextmenu/CardContextMenuItem.vue

@@ -1,25 +1,18 @@
 <template>
     <component
-        :is="computedType"
-        :href="href"
+        :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">
+        <div v-if="hasIconRight" :class="style.menuItemIconRight">
             <slot name="icon-right" />
         </div>
     </component>
@@ -31,15 +24,19 @@ import {
     defineComponent,
     inject,
     type PropType,
-    ref,
-    toRef
+    ref
 } from 'vue';
-import { useLabel } from './hooks';
+import { DropdownMenuItem, DropdownMenuSubTrigger } from 'reka-ui';
 import * as style from './style';
 import type { Variant } from '../../types/props';
+import { CARDCONTEXTMENU_STATE, CARDCONTEXTMENU_TRIGGER_STATE } from './symbol';
 
 export default defineComponent({
     name: 'CardContextMenuItem',
+    components: {
+        DropdownMenuItem,
+        DropdownMenuSubTrigger
+    },
     props: {
         label: {
             type: [String, Number],
@@ -76,69 +73,62 @@ export default defineComponent({
     },
     emits: [],
     setup(props, { slots }) {
-        const parentSelect = inject('dropdown-select', null);
-        // const state = inject(DROPDOWN_STATE, null);
-        // const keys = useMagicKeys({
-        //     passive: false,
-        //     onEventFired: (event) => {
-
-        //         // only fire when the dropdown is open
-        //         if (state?.isOpen.value) {
-        //             event.preventDefault();
-        //         }
-        //     }
-        // });
+        const state = inject(CARDCONTEXTMENU_STATE, null);
+        const isSubmenuTrigger = inject(CARDCONTEXTMENU_TRIGGER_STATE, false);
 
         const hasIconLeft = computed(() => !!slots['icon-left']);
         const hasIconRight = computed(() => !!slots['icon-right']);
 
-        const wrapper = ref(null);
-        const label = toRef(props, 'label');
+        const wrapper = ref<HTMLElement | null>(null);
         const isReference = ref(props.reference);
-        const currentLabel = useLabel(label, wrapper);
+        const currentLabel = computed(() => {
+            return props.label ?? wrapper.value?.textContent?.trim() ?? '';
+        });
+
         function handleSelect() {
-            if (props.disabled || isReference.value) {
+            if (props.disabled || isReference.value || isSubmenuTrigger) {
                 return;
             }
 
-            if (typeof parentSelect === 'function') {
-                // @ts-ignore
-                parentSelect([currentLabel.value!]);
+            if (typeof state?.handleSelect === 'function') {
+                state.handleSelect([String(currentLabel.value)]);
             }
 
-            props.onSelect(currentLabel.value!);
+            props.onSelect(currentLabel.value as string | number);
         }
 
-        // const isOpen = computed(() => {
-        //     return state?.isOpen.value;
-        // });
-
         const computedWrapperClasses = computed(() => {
             return [style.menuItem, style.variant[props.variant]];
         });
 
+        const itemComponent = computed(() => {
+            return isSubmenuTrigger ? DropdownMenuSubTrigger : DropdownMenuItem;
+        });
+
         const computedType = computed(() => {
             if (props.href) {
                 return 'a';
             }
 
-            return 'li';
+            return 'div';
         });
 
-        // onMounted(() => {
-        //     if (props.hotkey) {
-        //         const combination = keys[props.hotkey];
+        const componentProps = computed(() => {
+            if (isSubmenuTrigger) {
+                return {};
+            }
 
-        //         whenever(combination, (v) => {
-        //             if (v && isOpen.value) {
-        //                 handleSelect();
-        //             }
-        //         })
-        //     }
-        // })
+            return {
+                as: computedType.value,
+                href: props.href
+            };
+        });
 
         return {
             wrapper,
+            itemComponent,
+            componentProps,
+            isSubmenuTrigger,
             hasIconLeft,
             hasIconRight,
             handleSelect,

package/src/components/cardcontextmenu/CardContextMenuSeperator.vue

@@ -1,18 +1,20 @@
 <template>
-    <li :class="computedClasses"></li>
+    <DropdownMenuSeparator :class="computedClasses" />
 </template>
 
 <script lang="ts">
-import {computed, defineComponent} from "vue";
-import * as style from "./style";
+import { computed, defineComponent } from 'vue';
+import { DropdownMenuSeparator } from 'reka-ui';
+import * as style from './style';
 
 export default defineComponent({
-    name: "CardContextMenuSeperator",
+    name: 'CardContextMenuSeperator',
+    components: {
+        DropdownMenuSeparator
+    },
     setup() {
         const computedClasses = computed(() => {
-            return [
-                style.menuSeperator
-            ]
+            return [style.menuSeperator]
         });
 
         return {

package/src/components/cardcontextmenu/CardContextMenuTriggerProvider.vue

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

package/src/components/cardcontextmenu/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 = 'card-context-menu-fade-out';
+globalKeyframes(menuFadeOutAnimation, {
+    from: {
+        opacity: 1
+    },
+    to: {
+        opacity: 0
+    }
+});
+
+const menuSlideFadeOutTopAnimation = 'card-context-menu-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 = 'card-context-menu-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 = 'card-context-menu-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 = 'card-context-menu-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 = 'card-context-menu-slide-fade-top';
+globalKeyframes(menuSlideFadeTopAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const menuSlideFadeBottomAnimation = 'card-context-menu-slide-fade-bottom';
+globalKeyframes(menuSlideFadeBottomAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateY(-6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateY(0) scale(1)'
+    }
+});
+
+const menuSlideFadeLeftAnimation = 'card-context-menu-slide-fade-left';
+globalKeyframes(menuSlideFadeLeftAnimation, {
+    from: {
+        opacity: 0,
+        transform: 'translateX(6px) scale(0.98)'
+    },
+    to: {
+        opacity: 1,
+        transform: 'translateX(0) scale(1)'
+    }
+});
+
+const menuSlideFadeRightAnimation = 'card-context-menu-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({
@@ -143,6 +287,15 @@ export const menuItemIcon = style({
     opacity: 0.8
 });
 
+export const menuItemIconRight = style({
+    gridArea: 'decoration',
+    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/cardcontextmenu/symbol.ts

@@ -7,3 +7,6 @@ export interface CardContextMenuState {
 
 export const CARDCONTEXTMENU_STATE: InjectionKey<CardContextMenuState> =
     Symbol('CARDCONTEXTMENU_STATE');
+
+export const CARDCONTEXTMENU_TRIGGER_STATE: InjectionKey<boolean> =
+    Symbol('CARDCONTEXTMENU_TRIGGER_STATE');