mediacube-ui-v2 0.0.8 → 0.0.9

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

@@ -0,0 +1,664 @@
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue';
+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") }, });
+            // @ts-ignore
+            [McSvgIcon,];
+            // @ts-ignore
+            const __VLS_3 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ("arrow_leftward"), ...{ class: ("mc-modal__icon-back") }, }));
+            const __VLS_4 = __VLS_3({ name: ("arrow_leftward"), ...{ class: ("mc-modal__icon-back") }, }, ...__VLS_functionalComponentArgsRest(__VLS_3));
+        }
+        if (__VLS_ctx.closeVisible) {
+            __VLS_elementAsFunction(__VLS_intrinsicElements.button, __VLS_intrinsicElements.button)({ ...{ onClick: (__VLS_ctx.closeModal) }, type: ("button"), ...{ class: ("mc-modal__btn-close") }, });
+            // @ts-ignore
+            [McSvgIcon,];
+            // @ts-ignore
+            const __VLS_8 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ ...{ class: ("mc-modal__icon-close") }, width: ("24"), height: ("24"), name: ("close"), }));
+            const __VLS_9 = __VLS_8({ ...{ class: ("mc-modal__icon-close") }, width: ("24"), height: ("24"), name: ("close"), }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+        }
+    }
+    __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 */