@teammodlr/ui-kit 2.1.41 → 2.1.43

package/src/components/dropdown/Dropdown.vue

@@ -1,308 +1,308 @@
-<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, maxHeight: maxHeight }">
-                        <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,
-    watchEffect
-} 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}`;
-        });
-
-        const maxHeight = ref('auto');
-        useEventListener(window, 'resize', () => {
-            if (isOpen.value) {
-                resize();
-                updatePopper();
-            }
-        });
-
-        watchEffect(() => {
-            resize();
-        });
-
-        function resize() {
-            if (!isOpen.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>
+    <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, maxHeight: maxHeight }">
+                        <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,
+    watchEffect
+} 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}`;
+        });
+
+        const maxHeight = ref('auto');
+        useEventListener(window, 'resize', () => {
+            if (isOpen.value) {
+                resize();
+                updatePopper();
+            }
+        });
+
+        watchEffect(() => {
+            resize();
+        });
+
+        function resize() {
+            if (!isOpen.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>

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>
+    <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>