@teammodlr/ui-kit 2.2.1 → 2.3.0

package/src/components/dropdown/Dropdown.vue

@@ -1,329 +1,203 @@
-<template>
-    <Primitive
-        as-child
-        ref="wrapper">
-
-        <DropdownTrigger
-            ref="referenceRef"
-            :class="computedReferenceClasses"
-            @click="toggleDropdown">
-            <slot />
-        </DropdownTrigger>
-
-        <DropdownWrapper>
-            <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>
-        </DropdownWrapper>
-    </Primitive>
-</template>
-
-<script lang="ts">
-import { usePopper } from '../../composables/usePopper';
-import type { Placement, VirtualElement } from '@popperjs/core';
-import { scale } from '../../styles/transitions.css';
-import {Primitive} from "../primative/primitive";
-import {
-    defineComponent,
-    inject,
-    ref,
-    type PropType,
-    provide,
-    watch,
-    onMounted,
-    nextTick,
-    computed,
-    toRef,
-    reactive,
-    watchEffect, type Ref
-} from 'vue';
-import { onClickOutside, useEventListener } from '@vueuse/core';
-import DropdownWrapper from './DropdownWrapper.vue';
-import { useLabel } from './hooks';
-import { useZIndex } from '../../composables/useZIndex';
-import type { DropdownState } from './symbol';
-import { DROPDOWN_STATE } from './symbol';
-import * as style from './style';
-import {createContext} from "../../utils/injection";
-import DropdownTrigger from "./DropdownTrigger.vue";
-
-interface DropdownContext {
-    reference: Ref<HTMLElement | undefined>
-    onReferenceChange: (element: HTMLElement | undefined) => void
-}
-
-export const [injectDropdownContext, provideDropdownContext] = createContext<DropdownContext>('Dropdown');
-
-
-export default defineComponent({
-    name: 'Dropdown',
-    components: {
-        DropdownTrigger,
-        DropdownWrapper,
-        Primitive
-    },
-    props: {
-        open: {
-            type: Boolean,
-            default: false
-        },
-        placement: {
-            type: String as PropType<Placement>,
-            default: 'bottom-start'
-        },
-        transfer: {
-            type: Boolean,
-            default: false
-        },
-        trigger: {
-            type: String as PropType<'click' | 'hover'>,
-            default: 'click'
-        },
-        virtual: {
-            type: [Object],
-            default: null
-        },
-        x: {
-            type: Number,
-            default: 0
-        },
-        y: {
-            type: Number,
-            default: 0
-        },
-        label: {
-            default: null,
-            static: true
-        },
-        transitionName: {
-            type: String,
-            default: 'fade'
-        },
-        onSelect: {
-            type: Function as PropType<(labels: any) => void>,
-            default: () => {}
-        },
-        zIndex: {
-            type: Number
-        }
-    },
-    emits: ['update:open'],
-    setup(props, { emit }) {
-        const parentState = inject(DROPDOWN_STATE, null);
-        const { nextZIndex } = useZIndex();
-        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<HTMLElement>();
-        const zIndex = ref(props.zIndex ?? nextZIndex());
-        const reference = computed(() => {
-            if (props.virtual !== null) {
-                const virtual = (props.virtual as any).$el ?? props.virtual;
-                if (virtual) {
-                    if ('getBoundingClientRect' in virtual) {
-                        return virtual as VirtualElement;
-                    }
-
-                    if ('x' in virtual && 'y' in virtual) {
-                        return {
-                            getBoundingClientRect: () => ({
-                                x: virtual.x,
-                                y: virtual.y,
-                                left: virtual.x,
-                                top: virtual.y,
-                                width: 0,
-                                height: 0
-                            })
-                        } as VirtualElement;
-                    }
-                }
-            }
-
-            return referenceRef.value;
-        });
-
-        provideDropdownContext({
-            reference: referenceRef,
-            onReferenceChange: element => referenceRef.value = element
-        });
-
-        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: DropdownState = reactive({
-            handleSelect: handleSelect,
-            isOpen: isOpen
-        });
-
-        provide(DROPDOWN_STATE, startState);
-
-        watch(
-            () => props.open,
-            value => {
-                isOpen.value = value;
-            }
-        );
-
-        watch(
-            () => props.placement,
-            value => {
-                setPlacement(value);
-            }
-        );
-
-        watch(isOpen, value => {
-            if (value) {
-                updatePopper();
-            }
-
-            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]);
-            }
-        }
-
-        const computedWrapperClasses = computed(() => {
-            return [
-                'm-dropdown',
-                {
-                    'm-dropdown--open': isOpen.value,
-                    'm-dropdown--nested': isNested
-                }
-            ];
-        });
-
-        const computedReferenceClasses = computed(() => {});
-
-        const menuClasses = computed(() => {
-            return ['m-dropdown-menu', style.menu];
-        });
-
-        const transitionName = computed(() => {
-            return `m-transition__${props.transitionName}`;
-        });
-
-        const maxHeight = ref('auto');
-        useEventListener(window, 'resize', () => {
-            if (isOpen.value) {
-                resize();
-                updatePopper();
-            }
-        });
-
-        watchEffect(() => {
-            resize();
-        });
-
-        function resize() {
-            if (!isOpen.value || !reference.value) {
-                maxHeight.value = 'auto';
-                return;
-            }
-            let referenceHeight =
-                reference.value?.getBoundingClientRect().height;
-
-            let referenceTop = reference.value?.getBoundingClientRect().top;
-            if (!referenceHeight || !referenceTop) {
-                return;
-            }
-            let windowHeight = window.innerHeight;
-
-            maxHeight.value = `${
-                windowHeight - referenceHeight - referenceTop - 30
-            }px`;
-        }
-
-        return {
-            wrapper,
-            referenceRef,
-            popper,
-            transferTo,
-            isOpen,
-            isNested,
-            placement,
-            menuClasses,
-            computedWrapperClasses,
-            computedReferenceClasses,
-            transitionName,
-            toggleDropdown,
-            zIndex,
-            scale,
-            maxHeight
-        };
-    }
-});
-</script>
+<template>
+    <ContextMenuRoot v-if="contextMenu">
+        <ContextMenuTrigger as-child>
+            <slot />
+        </ContextMenuTrigger>
+        <ContextMenuPortal>
+            <ContextMenuContent :align="placement" :class="menuClasses" :side-offset="5">
+                <slot name="menu" />
+            </ContextMenuContent>
+        </ContextMenuPortal>
+    </ContextMenuRoot>
+    <DropdownMenuRoot v-model:open="isOpen" v-else>
+        <DropdownMenuTrigger as-child>
+            <slot />
+        </DropdownMenuTrigger>
+        <DropdownMenuPortal>
+            <DropdownMenuContent :align="placement" :class="menuClasses" :side-offset="5">
+                <slot name="menu" />
+            </DropdownMenuContent>
+        </DropdownMenuPortal>
+    </DropdownMenuRoot>
+</template>
+
+<script lang="ts">
+import {
+    DropdownMenuArrow,
+    DropdownMenuCheckboxItem,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuItemIndicator,
+    DropdownMenuLabel,
+    DropdownMenuPortal,
+    DropdownMenuRadioGroup,
+    DropdownMenuRadioItem,
+    DropdownMenuRoot,
+    DropdownMenuSeparator,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+    DropdownMenuTrigger,
+
+    ContextMenuCheckboxItem,
+    ContextMenuContent,
+    ContextMenuItem,
+    ContextMenuItemIndicator,
+    ContextMenuLabel,
+    ContextMenuPortal,
+    ContextMenuRadioGroup,
+    ContextMenuRadioItem,
+    ContextMenuRoot,
+    ContextMenuSeparator,
+    ContextMenuSub,
+    ContextMenuSubContent,
+    ContextMenuSubTrigger,
+    ContextMenuTrigger,
+} from 'radix-vue';
+import {
+    computed,
+    defineComponent,
+    ref,
+    watch,
+    type PropType
+} from 'vue';
+import { useZIndex } from '../../composables/useZIndex';
+import { scale } from '../../styles/transitions.css';
+import * as style from './style';
+import { DROPDOWN_STATE } from './symbol';
+
+export default defineComponent({
+    name: 'Dropdown',
+    components: {
+        DropdownMenuArrow,
+        DropdownMenuCheckboxItem,
+        DropdownMenuContent,
+        DropdownMenuItem,
+        DropdownMenuItemIndicator,
+        DropdownMenuLabel,
+        DropdownMenuPortal,
+        DropdownMenuRadioGroup,
+        DropdownMenuRadioItem,
+        DropdownMenuRoot,
+        DropdownMenuSeparator,
+        DropdownMenuSub,
+        DropdownMenuSubContent,
+        DropdownMenuSubTrigger,
+        DropdownMenuTrigger,
+
+        ContextMenuCheckboxItem,
+        ContextMenuContent,
+        ContextMenuItem,
+        ContextMenuItemIndicator,
+        ContextMenuLabel,
+        ContextMenuPortal,
+        ContextMenuRadioGroup,
+        ContextMenuRadioItem,
+        ContextMenuRoot,
+        ContextMenuSeparator,
+        ContextMenuSub,
+        ContextMenuSubContent,
+        ContextMenuSubTrigger,
+        ContextMenuTrigger,
+    },
+    props: {
+        open: {
+            type: Boolean,
+            default: false
+        },
+        placement: {
+            type: String as PropType<"start" | "center" | "end">,
+            default: 'start'
+        },
+        transfer: {
+            type: Boolean,
+            default: false
+        },
+        trigger: {
+            type: String as PropType<'click' | 'hover'>,
+            default: 'click'
+        },
+        contextMenu: {
+            type: Boolean,
+            default: false
+        },
+        x: {
+            type: Number,
+            default: 0
+        },
+        y: {
+            type: Number,
+            default: 0
+        },
+        label: {
+            default: null,
+            static: true
+        },
+        transitionName: {
+            type: String,
+            default: 'fade'
+        },
+        onSelect: {
+            type: Function as PropType<(labels: any) => void>,
+            default: () => {}
+        },
+        zIndex: {
+            type: Number
+        }
+    },
+    emits: ['update:open'],
+    setup(props, { emit }) {
+        const { nextZIndex } = useZIndex();
+        const isOpen = ref(props.open);
+        const placement = ref(props.placement);
+        const wrapper = ref(null);
+        const referenceRef = ref<HTMLElement>();
+        const zIndex = ref(props.zIndex ?? nextZIndex());
+
+        watch(
+            () => props.open,
+            value => {
+                isOpen.value = value;
+            }
+        );
+
+        function toggleDropdown() {
+            isOpen.value = !isOpen.value;
+        }
+
+
+        const computedWrapperClasses = computed(() => {
+            return [
+                'm-dropdown',
+                {
+                    'm-dropdown--open': isOpen.value
+                }
+            ];
+        });
+
+        const computedReferenceClasses = computed(() => {});
+
+        const menuClasses = computed(() => {
+            return ['m-dropdown-menu', style.menu];
+        });
+
+        const transitionName = computed(() => {
+            return `m-transition__${props.transitionName}`;
+        });
+
+        return {
+            wrapper,
+            referenceRef,
+            isOpen,
+            placement,
+            menuClasses,
+            computedWrapperClasses,
+            computedReferenceClasses,
+            transitionName,
+            toggleDropdown,
+            zIndex,
+            scale
+        };
+    }
+});
+</script>

package/src/components/dropdown/DropdownHeading.vue

@@ -1,23 +1,23 @@
-<template>
-    <li :class="computedClasses">
-        <slot />
-    </li>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-import * as style from './style';
-
-export default defineComponent({
-    name: 'DropdownHeading',
-    setup() {
-        const computedClasses = computed(() => {
-            return [style.heading];
-        });
-
-        return {
-            computedClasses
-        };
-    }
-});
-</script>
+<template>
+    <div :class="computedClasses">
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import * as style from './style';
+
+export default defineComponent({
+    name: 'DropdownHeading',
+    setup() {
+        const computedClasses = computed(() => {
+            return [style.heading];
+        });
+
+        return {
+            computedClasses
+        };
+    }
+});
+</script>