mediacube-ui-v2 0.0.37 → 0.0.38

package/dist/src/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';
+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;
+    const __VLS_1 = __VLS_resolvedLocalAndGlobalComponents.McDropdownPanel;
+    /** @type { [typeof __VLS_components.McDropdownPanel, typeof __VLS_components.mcDropdownPanel, typeof __VLS_components.McDropdownPanel, typeof __VLS_components.mcDropdownPanel, ] } */
+    // @ts-ignore
+    const __VLS_2 = __VLS_asFunctionalComponent(__VLS_1, new __VLS_1({ maxHeight: ((__VLS_ctx.listMaxHeight)), }));
+    const __VLS_3 = __VLS_2({ maxHeight: ((__VLS_ctx.listMaxHeight)), }, ...__VLS_functionalComponentArgsRest(__VLS_2));
+    var __VLS_7 = {};
+    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_8 = {
+            item: ((item)),
+        };
+    }
+    __VLS_nonNullable(__VLS_6.slots).default;
+    __VLS_nonNullable(__VLS_6.slots).default;
+    var __VLS_6;
+    __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/src/components/patterns/McDropdown/McDropdownPanel.vue.d.ts

@@ -0,0 +1,23 @@
+import { type PropType } from 'vue';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    maxHeight: {
+        type: PropType<number>;
+        default: number;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    maxHeight: {
+        type: PropType<number>;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    maxHeight: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLElement>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=McDropdownPanel.vue.d.ts.map

package/dist/src/components/patterns/McDropdown/McDropdownPanel.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"McDropdownPanel.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/patterns/McDropdown/McDropdownPanel.vue"],"names":[],"mappings":"AAAA,OAmEO,EAAY,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;AAkG7C,wBAAoG;AAKpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/src/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 */

package/dist/{types/src → src}/components/patterns/McFilter/McFilter.vue.d.ts

@@ -1,6 +1,6 @@
-import { PropType } from 'vue';
-import { IFilter, IFilterPlaceholders, IFilterValue } from '../../../types';
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+import { type PropType } from 'vue';
+import type { IFilter, IFilterPlaceholders, IFilterValue } from '@/types';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /**
      *  Имя фильтра
      *  (для записи данных в стор)
@@ -64,13 +64,13 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<Partial<IFilterPlaceholders>>;
         default: () => {};
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     error: (value: string) => any;
     "update:modelValue": (value: IFilterValue) => any;
     clear: (value: string) => any;
     confirm: (value: IFilterValue) => any;
     "delete-preset": (value: string) => any;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      *  Имя фильтра
      *  (для записи данных в стор)
@@ -148,6 +148,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     buttonConfirmIsLoading: boolean;
     useTeleport: boolean;
     disabledOpen: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;
 //# sourceMappingURL=McFilter.vue.d.ts.map

package/dist/src/components/patterns/McFilter/McFilter.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"McFilter.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/patterns/McFilter/McFilter.vue"],"names":[],"mappings":"AA24BA,OAAO,EAAwC,KAAK,QAAQ,EAAkC,MAAM,KAAK,CAAA;AACzG,OAAO,KAAK,EAKV,OAAO,EAKP,mBAAmB,EAEnB,YAAY,EAYb,MAAM,SAAS,CAAA;;IA8rCd;;;OAGG;;;;;IAKH;;OAEG;;;;;;;;;IAMH;;OAEG;;;;;;IAMH;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;OAEG;;;;;IAKH;;SAEK;;;;;IAKL;;OAEG;;;;;;;;;;;;IAvDH;;;OAGG;;;;;IAKH;;OAEG;;;;;;;;;IAMH;;OAEG;;;;;;IAMH;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;OAEG;;;;;IAKH;;SAEK;;;;;IAKL;;OAEG;;;;;;;;;;;;;;;;;;;;AA9DL,wBAqEG"}