mediacube-ui-v2 0.0.9 → 0.0.11

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

@@ -1,366 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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 */