mediacube-ui-v2 0.0.33 → 0.0.34

package/dist/src/components/templates/McModal/McModal.vue.js

@@ -1,664 +0,0 @@
-import { McSvgIcon } from '@/components';
-import { computed, nextTick, reactive, ref, watch } from 'vue';
-import { LineHeights, Sizes, Spaces } from '@/types';
-import { TransitionPresets, useTransition } from '@vueuse/core';
-const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
-const emit = defineEmits();
-const props = defineProps({
-    modelValue: {
-        type: Boolean,
-        default: false
-    },
-    name: {
-        type: String
-    },
-    /**
-     * Максимальная ширина модального окна
-     * */
-    maxWidth: {
-        type: Number,
-        default: 510
-    },
-    /**
-     * Скорость анимации
-     * */
-    duration: {
-        type: Number,
-        default: 200
-    },
-    /**
-     * Показывать кнопку закрытия модали
-     * */
-    closeVisible: {
-        type: Boolean,
-        default: true
-    },
-    showOverlay: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     *  Нужно ли закрывать попап
-     *  кликом вне окна
-     */
-    clickBackdropToClose: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     *  Стрелка в хедере
-     */
-    arrowVisible: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     *  Кастомное модальное окно
-     */
-    secondaryModal: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * Должен ли контент внутри модалки скроллится с фиксированной шапкой и футером
-     * Отключать, когда внутри есть селекты
-     * */
-    scrollableContent: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * Показывать сепараторы у хедера и футера при скролле.
-     */
-    separators: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * Выравнивание заголовка в шапке,
-     * если centered добавляются отступы слева и справа, чтобы текст не наезжал на кнопки
-     * centered || left || right
-     * */
-    headerAlign: {
-        type: String,
-        default: 'center'
-    },
-    /**
-     * Отступ от верхнего края модального окна до контента.
-     * Для "красивой" обрезки картинки при скролле в ситуациях, когда нет хедера
-     */
-    topPadding: {
-        type: Boolean,
-        default: false
-    },
-    /**
-     * Вариация модалки default || info
-     * info модалки имеют меньшие размеры паддингов
-     * */
-    variation: {
-        type: String,
-        default: 'default'
-    }
-});
-const modalTransitionState = ref(0);
-const modalTransition = useTransition(modalTransitionState, {
-    duration: props.duration || 300,
-    transition: TransitionPresets.easeOutQuart
-});
-const mcModalBody = ref(null);
-const modalInner = ref(null);
-const data = reactive({
-    scrolled_top: false,
-    scrolled_bottom: false,
-    resize_observer: {},
-    small_indents: false,
-    can_shorten_modal: false,
-    modal_params: {},
-    indent: {
-        regular: '400',
-        small: '150'
-    },
-    footer: {
-        button: {
-            regular: '600',
-            small: '500'
-        }
-    },
-    header: {
-        title: {
-            line_height: {
-                regular: '300',
-                small: '250'
-            }
-        }
-    }
-});
-const classes = computed(() => {
-    return {
-        'mc-modal--arrow-visible': props.arrowVisible,
-        'mc-modal--scrolled-top': data.scrolled_top,
-        'mc-modal--scrolled-bottom': data.scrolled_bottom,
-        'mc-modal--scrollable': props.scrollableContent,
-        'mc-modal--top-padding': props.topPadding,
-        'mc-modal--small-indents': data.small_indents,
-        [`mc-modal--variation-${props.variation}`]: !!props.variation,
-        [`mc-modal--header-align-${props.headerAlign}`]: (props.closeVisible || props.arrowVisible) && !!props.headerAlign
-    };
-});
-const styles = computed(() => {
-    return {
-        '--mc-modal-padding': Spaces[data.indent.regular],
-        '--mc-modal-padding-small': Spaces[data.indent.small],
-        '--mc-modal-header-line-height': LineHeights[data.header.title.line_height.regular],
-        '--mc-modal-header-line-height-small': LineHeights[data.header.title.line_height.small],
-        '--mc-modal-button-height': Sizes[data.footer.button.regular],
-        '--mc-modal-button-height-small': Sizes[data.footer.button.small],
-        '--mc-modal-max-width': `${props.maxWidth + 24}px`,
-        '--mc-modal-state-number': modalTransition.value
-    };
-});
-/**
- * Устанавливаем сепараторы, если есть скролл
- * @param {Boolean} scrolled - если метод вызван скроллом
- */
-const calculateSeparators = (scrolled = true) => {
-    if (!scrolled) {
-        data.scrolled_top = false;
-        data.scrolled_bottom = false;
-        data.small_indents = false;
-    }
-    setTimeout(() => {
-        if (mcModalBody.value) {
-            const { scrollTop, scrollHeight, clientHeight } = mcModalBody.value;
-            // Сепаратор появится если высота скролла будет > 2px
-            const offset = 2;
-            data.scrolled_top = scrollTop > offset;
-            data.small_indents = data.scrolled_top && data.can_shorten_modal;
-            data.scrolled_bottom = scrollTop + clientHeight < scrollHeight - offset;
-        }
-    }, scrolled ? 0 : 300);
-};
-const handleBeforeClose = () => {
-    /**
-     * Событие перед закрытием
-     * @property {Object}
-     */
-    emit('before-close');
-    if (mcModalBody.value) {
-        data.resize_observer && data.resize_observer.unobserve(mcModalBody.value);
-        mcModalBody.value.removeEventListener('scroll', () => calculateSeparators());
-    }
-};
-const handleOpened = () => {
-    if (props.separators) {
-        getParams();
-        if (mcModalBody.value) {
-            mcModalBody.value.addEventListener('scroll', () => calculateSeparators(), {
-                passive: true
-            });
-            data.resize_observer = new ResizeObserver(() => resizeHandler());
-            data.resize_observer.observe(mcModalBody.value);
-        }
-        calculateSeparators();
-    }
-    /**
-     * Событие после открытия
-     * @property {Object}
-     */
-    emit('opened');
-};
-const handleBack = (event) => {
-    emit('back', event);
-};
-const getParams = () => {
-    try {
-        if (modalInner.value) {
-            Object.keys(styles.value).forEach((attr) => {
-                //@ts-ignore
-                const param = parseInt(getComputedStyle(modalInner.value)?.getPropertyValue(attr));
-                param && (data.modal_params[attr] = param);
-            });
-        }
-    }
-    catch (e) {
-        console.error(e);
-    }
-};
-const calculateIndents = () => {
-    /* Если шапка уже маленькая, то отключаем при отключении сепаратора
-     * Иначе смотрим, чтобы отступ был > чем убираемые отступы, т.к. нет смысла сжимать шапку, если <
-     */
-    const indentDifferences = (+data.modal_params?.['--mc-modal-padding'] - +data.modal_params?.['--mc-modal-padding-small']) * 3 +
-        +data.modal_params?.['--mc-modal-padding-small'];
-    const lineHeightDifferences = +data.modal_params?.['--mc-modal-header-line-height'] - +data.modal_params?.['--mc-modal-header-line-height-small'];
-    const buttonDifferences = +data.modal_params?.['--mc-modal-button-height'] - +data.modal_params?.['--mc-modal-button-height-small'];
-    const sizeDifferences = indentDifferences + lineHeightDifferences + buttonDifferences;
-    if (!data.small_indents && mcModalBody.value) {
-        data.can_shorten_modal = mcModalBody.value?.scrollHeight - mcModalBody.value?.clientHeight > sizeDifferences;
-    }
-};
-const resizeHandler = () => {
-    calculateIndents();
-    calculateSeparators();
-};
-const openModal = () => {
-    modalTransitionState.value = 1;
-    emit('before-open');
-    emit('update:modelValue', true);
-    nextTick(() => handleOpened());
-};
-const closeModal = () => {
-    modalTransitionState.value = 0;
-    setTimeout(() => {
-        handleBeforeClose();
-        emit('update:modelValue', false);
-        emit('closed');
-    }, props.duration || 300);
-};
-const handleOverlayClick = () => {
-    if (!props.clickBackdropToClose)
-        return;
-    closeModal();
-};
-watch(() => props.modelValue, (value) => {
-    value ? openModal() : closeModal();
-}, { immediate: true }); /* PartiallyEnd: #3632/scriptSetup.vue */
-const __VLS_fnComponent = (await import('vue')).defineComponent({
-    props: {
-        modelValue: {
-            type: Boolean,
-            default: false
-        },
-        name: {
-            type: String
-        },
-        /**
-         * Максимальная ширина модального окна
-         * */
-        maxWidth: {
-            type: Number,
-            default: 510
-        },
-        /**
-         * Скорость анимации
-         * */
-        duration: {
-            type: Number,
-            default: 200
-        },
-        /**
-         * Показывать кнопку закрытия модали
-         * */
-        closeVisible: {
-            type: Boolean,
-            default: true
-        },
-        showOverlay: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Нужно ли закрывать попап
-         *  кликом вне окна
-         */
-        clickBackdropToClose: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Стрелка в хедере
-         */
-        arrowVisible: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Кастомное модальное окно
-         */
-        secondaryModal: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Должен ли контент внутри модалки скроллится с фиксированной шапкой и футером
-         * Отключать, когда внутри есть селекты
-         * */
-        scrollableContent: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * Показывать сепараторы у хедера и футера при скролле.
-         */
-        separators: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * Выравнивание заголовка в шапке,
-         * если centered добавляются отступы слева и справа, чтобы текст не наезжал на кнопки
-         * centered || left || right
-         * */
-        headerAlign: {
-            type: String,
-            default: 'center'
-        },
-        /**
-         * Отступ от верхнего края модального окна до контента.
-         * Для "красивой" обрезки картинки при скролле в ситуациях, когда нет хедера
-         */
-        topPadding: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Вариация модалки default || info
-         * info модалки имеют меньшие размеры паддингов
-         * */
-        variation: {
-            type: String,
-            default: 'default'
-        }
-    },
-    __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;
-    if (props.modelValue) {
-        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-modal__wrapper") }, });
-        if (props.showOverlay) {
-            __VLS_elementAsFunction(__VLS_intrinsicElements.div)({ ...{ onClick: (__VLS_ctx.handleOverlayClick) }, ...{ class: ("mc-modal__overlay") }, });
-        }
-        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-modal") }, ...{ class: ((__VLS_ctx.classes)) }, ...{ style: ((__VLS_ctx.styles)) }, });
-        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ref: ("modalInner"), ...{ class: ("mc-modal__inner") }, });
-        // @ts-ignore navigation for `const modalInner = ref()`
-        __VLS_ctx.modalInner;
-        if (__VLS_ctx.$slots.title) {
-            __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-modal__header") }, });
-            __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-modal__title") }, });
-            var __VLS_0 = {};
-        }
-        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ref: ("mcModalBody"), ...{ class: ("mc-modal__body") }, });
-        // @ts-ignore navigation for `const mcModalBody = ref()`
-        __VLS_ctx.mcModalBody;
-        var __VLS_1 = {};
-        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-modal__control") }, });
-        var __VLS_2 = {};
-        __VLS_elementAsFunction(__VLS_intrinsicElements.div)({ id: ("mcModalFooter"), });
-        if (__VLS_ctx.arrowVisible) {
-            __VLS_elementAsFunction(__VLS_intrinsicElements.button, __VLS_intrinsicElements.button)({ ...{ onClick: (__VLS_ctx.handleBack) }, type: ("button"), ...{ class: ("mc-modal__btn-back") }, });
-            const __VLS_3 = __VLS_resolvedLocalAndGlobalComponents.McSvgIcon;
-            /** @type { [typeof __VLS_components.McSvgIcon, typeof __VLS_components.mcSvgIcon, ] } */
-            // @ts-ignore
-            const __VLS_4 = __VLS_asFunctionalComponent(__VLS_3, new __VLS_3({ name: ("arrow_leftward"), ...{ class: ("mc-modal__icon-back") }, }));
-            const __VLS_5 = __VLS_4({ name: ("arrow_leftward"), ...{ class: ("mc-modal__icon-back") }, }, ...__VLS_functionalComponentArgsRest(__VLS_4));
-        }
-        if (__VLS_ctx.closeVisible) {
-            __VLS_elementAsFunction(__VLS_intrinsicElements.button, __VLS_intrinsicElements.button)({ ...{ onClick: (__VLS_ctx.closeModal) }, type: ("button"), ...{ class: ("mc-modal__btn-close") }, });
-            const __VLS_9 = __VLS_resolvedLocalAndGlobalComponents.McSvgIcon;
-            /** @type { [typeof __VLS_components.McSvgIcon, typeof __VLS_components.mcSvgIcon, ] } */
-            // @ts-ignore
-            const __VLS_10 = __VLS_asFunctionalComponent(__VLS_9, new __VLS_9({ ...{ class: ("mc-modal__icon-close") }, width: ("24"), height: ("24"), name: ("close"), }));
-            const __VLS_11 = __VLS_10({ ...{ class: ("mc-modal__icon-close") }, width: ("24"), height: ("24"), name: ("close"), }, ...__VLS_functionalComponentArgsRest(__VLS_10));
-        }
-    }
-    __VLS_styleScopedClasses['mc-modal__wrapper'];
-    __VLS_styleScopedClasses['mc-modal__overlay'];
-    __VLS_styleScopedClasses['mc-modal'];
-    __VLS_styleScopedClasses['mc-modal__inner'];
-    __VLS_styleScopedClasses['mc-modal__header'];
-    __VLS_styleScopedClasses['mc-modal__title'];
-    __VLS_styleScopedClasses['mc-modal__body'];
-    __VLS_styleScopedClasses['mc-modal__control'];
-    __VLS_styleScopedClasses['mc-modal__btn-back'];
-    __VLS_styleScopedClasses['mc-modal__icon-back'];
-    __VLS_styleScopedClasses['mc-modal__btn-close'];
-    __VLS_styleScopedClasses['mc-modal__icon-close'];
-    var __VLS_slots;
-    var __VLS_inheritedAttrs;
-    const __VLS_refs = {
-        "modalInner": __VLS_nativeElements['div'],
-        "mcModalBody": __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 {
-            McSvgIcon: McSvgIcon,
-            mcModalBody: mcModalBody,
-            modalInner: modalInner,
-            classes: classes,
-            styles: styles,
-            handleBack: handleBack,
-            closeModal: closeModal,
-            handleOverlayClick: handleOverlayClick,
-        };
-    },
-    __typeEmits: {},
-    props: {
-        modelValue: {
-            type: Boolean,
-            default: false
-        },
-        name: {
-            type: String
-        },
-        /**
-         * Максимальная ширина модального окна
-         * */
-        maxWidth: {
-            type: Number,
-            default: 510
-        },
-        /**
-         * Скорость анимации
-         * */
-        duration: {
-            type: Number,
-            default: 200
-        },
-        /**
-         * Показывать кнопку закрытия модали
-         * */
-        closeVisible: {
-            type: Boolean,
-            default: true
-        },
-        showOverlay: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Нужно ли закрывать попап
-         *  кликом вне окна
-         */
-        clickBackdropToClose: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Стрелка в хедере
-         */
-        arrowVisible: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Кастомное модальное окно
-         */
-        secondaryModal: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Должен ли контент внутри модалки скроллится с фиксированной шапкой и футером
-         * Отключать, когда внутри есть селекты
-         * */
-        scrollableContent: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * Показывать сепараторы у хедера и футера при скролле.
-         */
-        separators: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * Выравнивание заголовка в шапке,
-         * если centered добавляются отступы слева и справа, чтобы текст не наезжал на кнопки
-         * centered || left || right
-         * */
-        headerAlign: {
-            type: String,
-            default: 'center'
-        },
-        /**
-         * Отступ от верхнего края модального окна до контента.
-         * Для "красивой" обрезки картинки при скролле в ситуациях, когда нет хедера
-         */
-        topPadding: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Вариация модалки default || info
-         * info модалки имеют меньшие размеры паддингов
-         * */
-        variation: {
-            type: String,
-            default: 'default'
-        }
-    },
-});
-const __VLS_component = (await import('vue')).defineComponent({
-    setup() {
-        return {};
-    },
-    __typeEmits: {},
-    props: {
-        modelValue: {
-            type: Boolean,
-            default: false
-        },
-        name: {
-            type: String
-        },
-        /**
-         * Максимальная ширина модального окна
-         * */
-        maxWidth: {
-            type: Number,
-            default: 510
-        },
-        /**
-         * Скорость анимации
-         * */
-        duration: {
-            type: Number,
-            default: 200
-        },
-        /**
-         * Показывать кнопку закрытия модали
-         * */
-        closeVisible: {
-            type: Boolean,
-            default: true
-        },
-        showOverlay: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Нужно ли закрывать попап
-         *  кликом вне окна
-         */
-        clickBackdropToClose: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         *  Стрелка в хедере
-         */
-        arrowVisible: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         *  Кастомное модальное окно
-         */
-        secondaryModal: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Должен ли контент внутри модалки скроллится с фиксированной шапкой и футером
-         * Отключать, когда внутри есть селекты
-         * */
-        scrollableContent: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * Показывать сепараторы у хедера и футера при скролле.
-         */
-        separators: {
-            type: Boolean,
-            default: true
-        },
-        /**
-         * Выравнивание заголовка в шапке,
-         * если centered добавляются отступы слева и справа, чтобы текст не наезжал на кнопки
-         * centered || left || right
-         * */
-        headerAlign: {
-            type: String,
-            default: 'center'
-        },
-        /**
-         * Отступ от верхнего края модального окна до контента.
-         * Для "красивой" обрезки картинки при скролле в ситуациях, когда нет хедера
-         */
-        topPadding: {
-            type: Boolean,
-            default: false
-        },
-        /**
-         * Вариация модалки default || info
-         * info модалки имеют меньшие размеры паддингов
-         * */
-        variation: {
-            type: String,
-            default: 'default'
-        }
-    },
-});
-export default {};
-; /* PartiallyEnd: #4569/main.vue */