mediacube-ui-v2 0.0.8 → 0.0.9

package/dist/components/patterns/McDropdown/McDropdown.vue.js

@@ -0,0 +1,366 @@
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useThrottleFn } from '@vueuse/core';
+import McDropdownPanel from '@/components/patterns/McDropdown/McDropdownPanel.vue';
+import { DropdownListPositions, DropdownPositions } from '@/enums/Dropdown';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const throttle = useThrottleFn((method) => {
+    method();
+}, 200);
+const id = 'dropdown-element-id';
+const localList_position = ref(null);
+const local_position = ref(null);
+const dropdown_body = ref(null);
+const activator = ref(null);
+const is_open = ref(false);
+const route = useRoute();
+const emit = defineEmits();
+const props = defineProps({
+    /**
+     * Состояние видимости контента
+     */
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    items: {
+        type: Array,
+        default: () => []
+    },
+    /**
+     * Выравнивание
+     * контента: 'left', 'right', 'auto'
+     */
+    position: {
+        type: String,
+        default: DropdownPositions.Left
+    },
+    /**
+     * Направление отображения
+     * контента: 'top', 'bottom', 'auto'
+     */
+    listPosition: {
+        type: String,
+        default: DropdownListPositions.Bottom
+    },
+    /**
+     * Минимальная ширина выпадаюзего списка
+     */
+    listMinWidth: {
+        type: String,
+        default: 'inherit'
+    },
+    /**
+     * Минимальная ширина выпадаюзего списка
+     */
+    listMaxHeight: {
+        type: Number,
+        default: 300
+    },
+    hideOnSelect: {
+        type: Boolean,
+        default: true
+    }
+});
+const dropdownClasses = computed(() => {
+    return {
+        [`mc-dropdown--position-${local_position.value}`]: !!local_position.value,
+        [`mc-dropdown--list-position-${localList_position.value}`]: !!localList_position.value,
+        ['mc-dropdown--is-open']: is_open.value
+    };
+});
+const dropdownStyles = computed(() => {
+    return {
+        '--dropdown-body-min-width': props.listMinWidth
+    };
+});
+onMounted(() => {
+    window.addEventListener('resize', throttledCalculateDropdownPosition);
+    window.addEventListener('transitionrun', throttledCalculateDropdownPosition);
+});
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', throttledCalculateDropdownPosition);
+    window.removeEventListener('transitionrun', throttledCalculateDropdownPosition);
+});
+const toggleDropdown = () => {
+    setOpenState(!is_open.value);
+};
+const handleClickOutside = (e) => {
+    const target = e.target;
+    if (is_open.value && !target.closest(`#${id}`))
+        closeDropdown();
+};
+const closeDropdown = () => {
+    setOpenState(false);
+};
+const setOpenState = (payload) => {
+    is_open.value = payload;
+    emit('update:modelValue', payload);
+    if (is_open.value)
+        document.addEventListener('click', handleClickOutside);
+    else
+        document.removeEventListener('click', handleClickOutside);
+};
+const handleItemClick = (payload) => {
+    emit('select', payload);
+    if (props.hideOnSelect)
+        closeDropdown();
+};
+const calculateDropdownPosition = () => {
+    if (!dropdown_body.value)
+        return;
+    const rect = activator.value?.getBoundingClientRect();
+    if (!rect)
+        return;
+    const space_below = window.innerHeight - rect.bottom;
+    const space_left = window.innerWidth - rect.left;
+    const { offsetHeight: dropdown_height, offsetWidth: dropdown_width } = dropdown_body.value;
+    // Определяем направление отображения списка
+    const auto_list_position = space_below < dropdown_height ? DropdownListPositions.Top : DropdownListPositions.Bottom;
+    const auto_position = space_left > dropdown_width ? DropdownPositions.Left : DropdownPositions.Right;
+    // Устанавливаем значения в зависимости от position
+    localList_position.value = props.listPosition === DropdownListPositions.Auto ? auto_list_position : props.listPosition;
+    local_position.value = props.position === DropdownPositions.Auto ? auto_position : props.position;
+};
+const throttledCalculateDropdownPosition = () => throttle(() => calculateDropdownPosition());
+watch(() => route, closeDropdown);
+watch(() => props.modelValue, (val) => {
+    if (is_open.value !== val)
+        setOpenState(val);
+    nextTick(() => {
+        calculateDropdownPosition();
+    });
+}, { immediate: true }); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         * Состояние видимости контента
+         */
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        items: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         * Выравнивание
+         * контента: 'left', 'right', 'auto'
+         */
+        position: {
+            type: String,
+            default: DropdownPositions.Left
+        },
+        /**
+         * Направление отображения
+         * контента: 'top', 'bottom', 'auto'
+         */
+        listPosition: {
+            type: String,
+            default: DropdownListPositions.Bottom
+        },
+        /**
+         * Минимальная ширина выпадаюзего списка
+         */
+        listMinWidth: {
+            type: String,
+            default: 'inherit'
+        },
+        /**
+         * Минимальная ширина выпадаюзего списка
+         */
+        listMaxHeight: {
+            type: Number,
+            default: 300
+        },
+        hideOnSelect: {
+            type: Boolean,
+            default: true
+        }
+    },
+    __typeEmits: {},
+});
+;
+let __VLS_functionalComponentProps;
+function __VLS_template() {
+    const __VLS_ctx = {};
+    const __VLS_localComponents = {
+        ...{},
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_components;
+    const __VLS_localDirectives = {
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_directives;
+    let __VLS_styleScopedClasses;
+    // CSS variable injection 
+    // CSS variable injection end 
+    let __VLS_resolvedLocalAndGlobalComponents;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-dropdown") }, id: ((__VLS_ctx.id)), ...{ class: ((__VLS_ctx.dropdownClasses)) }, ...{ style: ((__VLS_ctx.dropdownStyles)) }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ onKeyup: (__VLS_ctx.closeDropdown) }, ...{ onClick: (__VLS_ctx.toggleDropdown) }, ...{ class: ("mc-dropdown__toggle") }, ref: ("activator"), tabindex: ("0"), });
+    // @ts-ignore navigation for `const activator = ref()`
+    __VLS_ctx.activator;
+    var __VLS_0 = {};
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ref: ("dropdown_body"), ...{ class: ("mc-dropdown__body") }, });
+    // @ts-ignore navigation for `const dropdown_body = ref()`
+    __VLS_ctx.dropdown_body;
+    // @ts-ignore
+    [McDropdownPanel, McDropdownPanel,];
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent(McDropdownPanel, new McDropdownPanel({ maxHeight: ((__VLS_ctx.listMaxHeight)), }));
+    const __VLS_2 = __VLS_1({ maxHeight: ((__VLS_ctx.listMaxHeight)), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    var __VLS_6 = {};
+    for (const [item, index] of __VLS_getVForSourceType((__VLS_ctx.items))) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ onClick: (...[$event]) => {
+                    __VLS_ctx.handleItemClick(item);
+                } }, key: ((`dropdown-list-item-${item.id || item.key || index}`)), ...{ class: ("mc-dropdown-panel__item") }, });
+        var __VLS_7 = {
+            item: ((item)),
+        };
+    }
+    __VLS_nonNullable(__VLS_5.slots).default;
+    __VLS_nonNullable(__VLS_5.slots).default;
+    var __VLS_5;
+    __VLS_styleScopedClasses['mc-dropdown'];
+    __VLS_styleScopedClasses['mc-dropdown__toggle'];
+    __VLS_styleScopedClasses['mc-dropdown__body'];
+    __VLS_styleScopedClasses['mc-dropdown-panel__item'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {
+        "activator": __VLS_nativeElements['div'],
+        "dropdown_body": __VLS_nativeElements['div'],
+    };
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            McDropdownPanel: McDropdownPanel,
+            id: id,
+            dropdown_body: dropdown_body,
+            activator: activator,
+            dropdownClasses: dropdownClasses,
+            dropdownStyles: dropdownStyles,
+            toggleDropdown: toggleDropdown,
+            closeDropdown: closeDropdown,
+            handleItemClick: handleItemClick,
+        };
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         * Состояние видимости контента
+         */
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        items: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         * Выравнивание
+         * контента: 'left', 'right', 'auto'
+         */
+        position: {
+            type: String,
+            default: DropdownPositions.Left
+        },
+        /**
+         * Направление отображения
+         * контента: 'top', 'bottom', 'auto'
+         */
+        listPosition: {
+            type: String,
+            default: DropdownListPositions.Bottom
+        },
+        /**
+         * Минимальная ширина выпадаюзего списка
+         */
+        listMinWidth: {
+            type: String,
+            default: 'inherit'
+        },
+        /**
+         * Минимальная ширина выпадаюзего списка
+         */
+        listMaxHeight: {
+            type: Number,
+            default: 300
+        },
+        hideOnSelect: {
+            type: Boolean,
+            default: true
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         * Состояние видимости контента
+         */
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        items: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         * Выравнивание
+         * контента: 'left', 'right', 'auto'
+         */
+        position: {
+            type: String,
+            default: DropdownPositions.Left
+        },
+        /**
+         * Направление отображения
+         * контента: 'top', 'bottom', 'auto'
+         */
+        listPosition: {
+            type: String,
+            default: DropdownListPositions.Bottom
+        },
+        /**
+         * Минимальная ширина выпадаюзего списка
+         */
+        listMinWidth: {
+            type: String,
+            default: 'inherit'
+        },
+        /**
+         * Минимальная ширина выпадаюзего списка
+         */
+        listMaxHeight: {
+            type: Number,
+            default: 300
+        },
+        hideOnSelect: {
+            type: Boolean,
+            default: true
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

package/dist/components/patterns/McDropdown/McDropdownPanel.vue.js

@@ -0,0 +1,83 @@
+import { computed } from 'vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    maxHeight: {
+        type: Number,
+        default: 300
+    }
+});
+const panelStyles = computed(() => {
+    return {
+        '--panel-max-height': `${props.maxHeight}px`
+    };
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        maxHeight: {
+            type: Number,
+            default: 300
+        }
+    },
+});
+;
+let __VLS_functionalComponentProps;
+function __VLS_template() {
+    const __VLS_ctx = {};
+    const __VLS_localComponents = {
+        ...{},
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_components;
+    const __VLS_localDirectives = {
+        ...{},
+        ...__VLS_ctx,
+    };
+    let __VLS_directives;
+    let __VLS_styleScopedClasses;
+    // CSS variable injection 
+    // CSS variable injection end 
+    let __VLS_resolvedLocalAndGlobalComponents;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.section, __VLS_intrinsicElements.section)({ ...{ class: ("mc-dropdown-panel") }, ...{ style: ((__VLS_ctx.panelStyles)) }, });
+    var __VLS_0 = {};
+    __VLS_styleScopedClasses['mc-dropdown-panel'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {};
+    var $refs;
+    var $el;
+    return {
+        attrs: {},
+        slots: __VLS_slots,
+        refs: $refs,
+        rootEl: $el,
+    };
+}
+;
+const __VLS_self = (await import('vue')).defineComponent({
+    setup() {
+        return {
+            panelStyles: panelStyles,
+        };
+    },
+    props: {
+        maxHeight: {
+            type: Number,
+            default: 300
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        maxHeight: {
+            type: Number,
+            default: 300
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */