@teammodlr/ui-kit 2.0.29 → 2.0.30

package/src/components/dropdown/Dropdown.vue

@@ -1,263 +1,270 @@
-<template>
-    <span ref="wrapper" :class="computedWrapperClasses">
-        <span ref="referenceRef" :class="computedReferenceClasses" @click="toggleDropdown">
-            <slot/>
-        </span>
-
-        <DropdownWrapper>
-            <Teleport :disabled="isNested" to="body">
-                <transition :name="transitionName">
-                    <div v-if="isOpen" ref="popper" :class="menuClasses"  :style="{zIndex: zIndex}">
-                        <slot name="menu"/>
-                    </div>
-                </transition>
-            </Teleport>
-        </DropdownWrapper>
-    </span>
-</template>
-
-<script lang="ts">
-import {usePopper} from '../../composables/usePopper';
-import type {Placement, VirtualElement} from '@popperjs/core';
-import {
-    defineComponent,
-    inject,
-    ref,
-    type PropType,
-    provide,
-    watch,
-    onMounted,
-    nextTick,
-    computed,
-    toRef, reactive
-} 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";
-
-export default defineComponent({
-    name: 'Dropdown',
-    components: {
-        DropdownWrapper
-    },
-    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(null);
-        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;
-        });
-
-        const {popper, transferTo, updatePopper} = usePopper({
-            reference: reference,
-            placement,
-            transfer,
-            wrapper,
-            isDrop: true,
-            offset: isNested ? [-2, 2] : [0, 5]
-        });
-
-        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}`;
-        });
-
-        return {
-            wrapper,
-            referenceRef,
-            popper,
-            transferTo,
-            isOpen,
-            isNested,
-            placement,
-            menuClasses,
-            computedWrapperClasses,
-            computedReferenceClasses,
-            transitionName,
-            toggleDropdown,
-            zIndex
-        }
-    }
-})
-</script>
+<template>
+    <span ref="wrapper" :class="computedWrapperClasses">
+        <span ref="referenceRef" :class="computedReferenceClasses" @click="toggleDropdown">
+            <slot/>
+        </span>
+
+        <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}">
+                        <slot name="menu"/>
+                    </div>
+                </transition>
+            </Teleport>
+        </DropdownWrapper>
+    </span>
+</template>
+
+<script lang="ts">
+import {usePopper} from '../../composables/usePopper';
+import type {Placement, VirtualElement} from '@popperjs/core';
+import { scale } from "../../styles/transitions.css";
+import {
+    defineComponent,
+    inject,
+    ref,
+    type PropType,
+    provide,
+    watch,
+    onMounted,
+    nextTick,
+    computed,
+    toRef, reactive
+} 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";
+
+export default defineComponent({
+    name: 'Dropdown',
+    components: {
+        DropdownWrapper
+    },
+    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(null);
+        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;
+        });
+
+        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}`;
+        });
+
+        return {
+            wrapper,
+            referenceRef,
+            popper,
+            transferTo,
+            isOpen,
+            isNested,
+            placement,
+            menuClasses,
+            computedWrapperClasses,
+            computedReferenceClasses,
+            transitionName,
+            toggleDropdown,
+            zIndex,
+            scale
+        }
+    }
+})
+</script>