mediacube-ui-v2 0.0.8 → 0.0.9

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

@@ -0,0 +1,304 @@
+import { TransitionPresets, useTransition } from '@vueuse/core';
+import { computed, ref, watch } from 'vue';
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue';
+import { DrawerPositions } from '@/enums/Drawer';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const emit = defineEmits();
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    duration: {
+        type: Number,
+        default: 300
+    },
+    position: {
+        type: String,
+        default: DrawerPositions.Right
+    },
+    /**
+     * Нужна ли кнопка
+     * закрытия в шапке
+     */
+    closeVisible: {
+        type: Boolean,
+        default: true
+    },
+    showOverlay: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * Тип иконки
+     * закрытия в шапке
+     */
+    iconClose: {
+        type: String,
+        default: 'close'
+    },
+    width: {
+        type: Number,
+        default: 300
+    }
+});
+const overlayStartAnimationPosition = ref(0);
+const overlayEndAnimationPosition = ref(100);
+const isRightDrawerPosition = computed(() => {
+    return props.position === DrawerPositions.Right;
+});
+const drawerStartAnimationPosition = computed(() => {
+    return isRightDrawerPosition.value ? 100 : -100;
+});
+const drawerStartStaticPosition = computed(() => {
+    return {
+        [isRightDrawerPosition.value ? DrawerPositions.Right : DrawerPositions.Left]: 0
+    };
+});
+const overlayStateNumber = ref(overlayStartAnimationPosition.value);
+const drawerStateNumber = ref(drawerStartAnimationPosition.value);
+const drawerNumber = useTransition(drawerStateNumber, {
+    duration: props.duration,
+    transition: TransitionPresets.easeOutQuart
+});
+const drawerOverlayNumber = useTransition(overlayStateNumber, {
+    duration: props.duration,
+    transition: TransitionPresets.easeOutQuart
+});
+const overlayStyle = computed(() => {
+    return {
+        visibility: drawerOverlayNumber.value ? 'visible' : 'hidden',
+        zIndex: drawerOverlayNumber.value ? 1 : -1
+    };
+});
+const drawerStyle = computed(() => {
+    return {
+        transform: `translateX(${drawerNumber.value}%)`,
+        width: `${props.width}px`,
+        [props.position]: 0,
+        ...drawerStartStaticPosition.value
+    };
+});
+const overlayClasses = computed(() => {
+    return {
+        'mc-drawer__overlay': true,
+        'mc-drawer__overlay--hidden': !props.showOverlay
+    };
+});
+const openDrawer = () => {
+    overlayStateNumber.value = overlayEndAnimationPosition.value;
+    drawerStateNumber.value = overlayStateNumber.value === 0 ? 100 : 0;
+    if (!props.modelValue) {
+        emit('update:modelValue', true);
+        emit('open');
+    }
+};
+const closeDrawer = () => {
+    overlayStateNumber.value = overlayStartAnimationPosition.value;
+    drawerStateNumber.value = overlayStateNumber.value === 0 ? (isRightDrawerPosition.value ? 100 : -100) : 0;
+    if (props.modelValue) {
+        emit('update:modelValue', false);
+        emit('close');
+    }
+};
+const handleOverlayClick = () => {
+    if (!props.showOverlay)
+        return;
+    closeDrawer();
+};
+watch(() => props.modelValue, (value) => {
+    value ? openDrawer() : closeDrawer();
+}, { immediate: true }); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        duration: {
+            type: Number,
+            default: 300
+        },
+        position: {
+            type: String,
+            default: DrawerPositions.Right
+        },
+        /**
+         * Нужна ли кнопка
+         * закрытия в шапке
+         */
+        closeVisible: {
+            type: Boolean,
+            default: true
+        },
+        showOverlay: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * Тип иконки
+         * закрытия в шапке
+         */
+        iconClose: {
+            type: String,
+            default: 'close'
+        },
+        width: {
+            type: Number,
+            default: 300
+        }
+    },
+    __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-drawer__wrapper") }, ...{ style: ((__VLS_ctx.overlayStyle)) }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div)({ ...{ onClick: (__VLS_ctx.handleOverlayClick) }, ...{ class: ((__VLS_ctx.overlayClasses)) }, ...{ style: ((__VLS_ctx.overlayStyle)) }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ onClick: () => { } }, ...{ class: ("mc-drawer") }, ...{ style: ((__VLS_ctx.drawerStyle)) }, });
+    var __VLS_0 = {};
+    if (__VLS_ctx.closeVisible) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.button, __VLS_intrinsicElements.button)({ ...{ onClick: (__VLS_ctx.closeDrawer) }, type: ("button"), ...{ class: ("mc-drawer__btn-close") }, });
+        // @ts-ignore
+        [McSvgIcon,];
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ ...{ class: ("mc-drawer__icon-close") }, name: ((__VLS_ctx.iconClose)), }));
+        const __VLS_2 = __VLS_1({ ...{ class: ("mc-drawer__icon-close") }, name: ((__VLS_ctx.iconClose)), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        // @ts-ignore
+        [McSvgIcon,];
+        // @ts-ignore
+        const __VLS_6 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ ...{ class: ("mc-drawer__icon-close--small") }, name: ((__VLS_ctx.iconClose)), size: ("200"), }));
+        const __VLS_7 = __VLS_6({ ...{ class: ("mc-drawer__icon-close--small") }, name: ((__VLS_ctx.iconClose)), size: ("200"), }, ...__VLS_functionalComponentArgsRest(__VLS_6));
+    }
+    __VLS_styleScopedClasses['mc-drawer__wrapper'];
+    __VLS_styleScopedClasses['mc-drawer'];
+    __VLS_styleScopedClasses['mc-drawer__btn-close'];
+    __VLS_styleScopedClasses['mc-drawer__icon-close'];
+    __VLS_styleScopedClasses['mc-drawer__icon-close--small'];
+    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 {
+            McSvgIcon: McSvgIcon,
+            overlayStyle: overlayStyle,
+            drawerStyle: drawerStyle,
+            overlayClasses: overlayClasses,
+            closeDrawer: closeDrawer,
+            handleOverlayClick: handleOverlayClick,
+        };
+    },
+    __typeEmits: {},
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        duration: {
+            type: Number,
+            default: 300
+        },
+        position: {
+            type: String,
+            default: DrawerPositions.Right
+        },
+        /**
+         * Нужна ли кнопка
+         * закрытия в шапке
+         */
+        closeVisible: {
+            type: Boolean,
+            default: true
+        },
+        showOverlay: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * Тип иконки
+         * закрытия в шапке
+         */
+        iconClose: {
+            type: String,
+            default: 'close'
+        },
+        width: {
+            type: Number,
+            default: 300
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        duration: {
+            type: Number,
+            default: 300
+        },
+        position: {
+            type: String,
+            default: DrawerPositions.Right
+        },
+        /**
+         * Нужна ли кнопка
+         * закрытия в шапке
+         */
+        closeVisible: {
+            type: Boolean,
+            default: true
+        },
+        showOverlay: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * Тип иконки
+         * закрытия в шапке
+         */
+        iconClose: {
+            type: String,
+            default: 'close'
+        },
+        width: {
+            type: Number,
+            default: 300
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

package/dist/components/templates/McDrawer/McDrawerContainer.vue.js

@@ -0,0 +1,133 @@
+import { computed } from 'vue';
+import McDrawer from '@/components/templates/McDrawer/McDrawer.vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    drawerServiceState: {
+        type: Object,
+        default: () => ({})
+    },
+    reactiveProps: {
+        type: Object,
+        default: () => ({})
+    }
+});
+const containerStyle = computed(() => ({
+    zIndex: props.reactiveProps.drawers.length ? 99 : -1,
+    visibility: props.reactiveProps.drawers.length ? 'visible' : 'hidden'
+}));
+const closeDrawer = (value) => {
+    value.close();
+    setTimeout(() => {
+        if (props.reactiveProps.drawers.every((d) => !d.modelValue)) {
+            props.drawerServiceState.closeServiceState();
+        }
+    }, value?.drawerProps?.duration || 300);
+}; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        drawerServiceState: {
+            type: Object,
+            default: () => ({})
+        },
+        reactiveProps: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+});
+;
+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-drawer-container") }, ...{ style: ((__VLS_ctx.containerStyle)) }, });
+    for (const [drawer, i] of __VLS_getVForSourceType((props.reactiveProps.drawers))) {
+        // @ts-ignore
+        [McDrawer, McDrawer,];
+        // @ts-ignore
+        const __VLS_0 = __VLS_asFunctionalComponent(McDrawer, new McDrawer({ ...{ 'onClose': {} }, key: ((drawer.id)), modelValue: ((drawer.modelValue)), ...(drawer.drawerProps), showOverlay: ((i + 1 === props.reactiveProps.drawers.length)), }));
+        const __VLS_1 = __VLS_0({ ...{ 'onClose': {} }, key: ((drawer.id)), modelValue: ((drawer.modelValue)), ...(drawer.drawerProps), showOverlay: ((i + 1 === props.reactiveProps.drawers.length)), }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+        let __VLS_5;
+        const __VLS_6 = {
+            onClose: (() => __VLS_ctx.closeDrawer(drawer))
+        };
+        let __VLS_2;
+        let __VLS_3;
+        const __VLS_7 = ((drawer.component));
+        // @ts-ignore
+        const __VLS_8 = __VLS_asFunctionalComponent(__VLS_7, new __VLS_7({ ...{ 'onCloseDrawer': {} }, ...(drawer.componentProps), }));
+        const __VLS_9 = __VLS_8({ ...{ 'onCloseDrawer': {} }, ...(drawer.componentProps), }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+        let __VLS_13;
+        const __VLS_14 = {
+            onCloseDrawer: (() => __VLS_ctx.closeDrawer(drawer))
+        };
+        let __VLS_10;
+        let __VLS_11;
+        var __VLS_12;
+        __VLS_nonNullable(__VLS_4.slots).default;
+        var __VLS_4;
+    }
+    __VLS_styleScopedClasses['mc-drawer-container'];
+    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 {
+            McDrawer: McDrawer,
+            containerStyle: containerStyle,
+            closeDrawer: closeDrawer,
+        };
+    },
+    props: {
+        drawerServiceState: {
+            type: Object,
+            default: () => ({})
+        },
+        reactiveProps: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        drawerServiceState: {
+            type: Object,
+            default: () => ({})
+        },
+        reactiveProps: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    __typeEl: {},
+});
+; /* PartiallyEnd: #4569/main.vue */

package/dist/components/templates/McDrawer/McDrawerContentTemplate/McDrawerContentTemplate.vue.js

@@ -0,0 +1,134 @@
+import { TitleVariations } from '@/enums/Title';
+import { Weights } from '@/enums/ui/Weights';
+import McTitle from '@/components/elements/McTitle/McTitle.vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    /**
+     * Заголовок
+     */
+    title: {
+        type: String,
+        default: ''
+    },
+    titleEllipsis: {
+        type: Boolean,
+        default: false
+    }
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         * Заголовок
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        titleEllipsis: {
+            type: Boolean,
+            default: false
+        }
+    },
+});
+;
+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-drawer-content-template") }, });
+    if (__VLS_ctx.$slots.title || props.title) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-drawer-content-template__header") }, });
+        var __VLS_0 = {};
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(McTitle, new McTitle({ variation: ((__VLS_ctx.TitleVariations.Subtitle)), ellipsis: ((props.titleEllipsis)), weight: ((__VLS_ctx.Weights.SemiBold)), }));
+        const __VLS_2 = __VLS_1({ variation: ((__VLS_ctx.TitleVariations.Subtitle)), ellipsis: ((props.titleEllipsis)), weight: ((__VLS_ctx.Weights.SemiBold)), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        (props.title);
+        __VLS_nonNullable(__VLS_5.slots).default;
+        var __VLS_5;
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-drawer-content-template__body") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-drawer-content-template__tint") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-drawer-content-template__body-inner") }, });
+    var __VLS_6 = {};
+    if (__VLS_ctx.$slots.footer) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-drawer-content-template__footer") }, });
+        var __VLS_7 = {};
+    }
+    __VLS_styleScopedClasses['mc-drawer-content-template'];
+    __VLS_styleScopedClasses['mc-drawer-content-template__header'];
+    __VLS_styleScopedClasses['mc-drawer-content-template__body'];
+    __VLS_styleScopedClasses['mc-drawer-content-template__tint'];
+    __VLS_styleScopedClasses['mc-drawer-content-template__body-inner'];
+    __VLS_styleScopedClasses['mc-drawer-content-template__footer'];
+    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 {
+            TitleVariations: TitleVariations,
+            Weights: Weights,
+            McTitle: McTitle,
+        };
+    },
+    props: {
+        /**
+         * Заголовок
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        titleEllipsis: {
+            type: Boolean,
+            default: false
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        /**
+         * Заголовок
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        titleEllipsis: {
+            type: Boolean,
+            default: false
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */