mediacube-ui-v2 0.0.7 → 0.0.9

package/dist/components/patterns/McSideBar/McSideBarCenter/McSideBarCenter.vue.js

@@ -0,0 +1,413 @@
+import McTitle from '@/components/elements/McTitle/McTitle.vue';
+import McSideBarButton from '@/components/patterns/McSideBar/McSideBarButton/McSideBarButton.vue';
+import McSeparator from '@/components/elements/McSeparator/McSeparator.vue';
+import McButton from '@/components/elements/McButton/McButton.vue';
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue';
+import { useRandomNumber } from '@/composables/useRandomNumber';
+import { computed, inject, nextTick, onBeforeMount, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { ButtonSize, SidebarTheme } from '@/enums';
+import McSlideUpDown from '@/components/elements/McSlideUpDown/McSlideUpDown.vue';
+import { defaultThemes } from '@/mocks/sidebar';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const route = useRoute();
+const randomNumber = useRandomNumber();
+const provideData = inject('provideData', {});
+const emit = defineEmits();
+const props = defineProps({
+    /**
+     *  Заголовок
+     */
+    title: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Центральное меню
+     */
+    menuMain: {
+        type: Array,
+        default: () => []
+    },
+    /**
+     *  Каунты для пунктов меню
+     *  вставляются в пункты с ключем 'count_key'
+     *
+     */
+    counts: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     *  Id чатры
+     *
+     */
+    chatraConfig: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     *  Компактный вид
+     */
+    compact: {
+        type: Boolean,
+        default: false
+    }
+});
+const loading = ref(true);
+const preparedMainMenu = ref([]);
+const themeConfig = computed(() => {
+    return provideData.currentThemeConfig || defaultThemes[SidebarTheme.Black];
+});
+onBeforeMount(() => {
+    setMainMenu();
+});
+watch(() => props.menuMain, () => {
+    setMainMenu();
+}, { deep: true });
+watch(() => props.compact, () => {
+    setMainMenu();
+});
+// если переходим на роут с вложенным меню, открываем вложенное меню
+watch(() => route, (newRoute, oldRoute) => {
+    loading.value = true;
+    if (oldRoute.path !== newRoute.path) {
+        const target_route = preparedMainMenu.value.find((r) => r.to === newRoute.path || r.menu?.find((childRoute) => childRoute.to === newRoute.path));
+        target_route?.menu && !props.compact && (target_route.open = true);
+    }
+    nextTick(() => {
+        preparedMainMenu.value.forEach((mi) => {
+            const exact_route = mi.to === newRoute.path;
+            const route_menu_match_new_route = mi.menu && mi.menu.some((mim) => mim.to?.match(newRoute?.path) || newRoute.path?.match(mim.to));
+            if (!(exact_route || route_menu_match_new_route))
+                mi.open = false;
+        });
+        loading.value = false;
+    });
+});
+const getMenuItemHeadClasses = (menuMainItem) => {
+    return {
+        open: menuMainItem.open,
+        active: menuMainItem.active(),
+        'with-submenu': menuMainItem.menu && menuMainItem.menu.length,
+        [`mc-side-bar--${themeConfig.value.mode || 'black'}__button`]: true,
+        'purple-hover': themeConfig.value.mainMenuLinks.variable === 'black-flat',
+        [`mc-button--variation-${themeConfig.value.mainMenuLinks.variable}`]: !!themeConfig.value.mainMenuLinks.variable,
+        ['mc-side-bar--black__button mc-button nuxt-link-active']: menuMainItem.menu && menuMainItem.menu.length && !menuMainItem.open && menuMainItem.active()
+    };
+};
+const handlerSidebarItemClick = () => {
+    props.compact && emit('open-side-bar');
+};
+// заранее формируем меню один раз, так как компьютед излишен и во вторых нужна переменная "open" что бы ее тогглить
+const setMainMenu = () => {
+    loading.value = true;
+    preparedMainMenu.value = props.menuMain.map((i) => {
+        const active = () => {
+            return (i.menu && i.menu.some((r) => route?.path?.match(r.to))) || !!route?.path?.match(i.to);
+        };
+        return {
+            id: randomNumber.timestamp(5),
+            ...i,
+            active,
+            indicator: () => i.menu && i.menu.some((r) => !!props.counts?.[r.count_key]),
+            open: !props.compact && active()
+        };
+    });
+    loading.value = false;
+}; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Заголовок
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Центральное меню
+         */
+        menuMain: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Каунты для пунктов меню
+         *  вставляются в пункты с ключем 'count_key'
+         *
+         */
+        counts: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Id чатры
+         *
+         */
+        chatraConfig: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Компактный вид
+         */
+        compact: {
+            type: Boolean,
+            default: false
+        }
+    },
+    __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-side-bar-center") }, });
+    if (__VLS_ctx.title) {
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_0 = __VLS_asFunctionalComponent(McTitle, new McTitle({ ...{ class: ("mc-side-bar-center__title") }, color: ((__VLS_ctx.compact ? 'transparent' : 'dark-gray')), }));
+        const __VLS_1 = __VLS_0({ ...{ class: ("mc-side-bar-center__title") }, color: ((__VLS_ctx.compact ? 'transparent' : 'dark-gray')), }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+        (__VLS_ctx.title);
+        __VLS_nonNullable(__VLS_4.slots).default;
+        var __VLS_4;
+    }
+    if (__VLS_ctx.preparedMainMenu && __VLS_ctx.preparedMainMenu.length) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-side-bar-center__content") }, });
+        __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, modifiers: {}, value: (!__VLS_ctx.loading) }, null, null);
+        for (const [menuMainItem] of __VLS_getVForSourceType((__VLS_ctx.preparedMainMenu))) {
+            __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ key: ((menuMainItem.id)), ...{ class: (({ 'item-active': menuMainItem.active() })) }, ...{ class: ("mc-side-bar-center__content-item item") }, });
+            __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ onClick: (__VLS_ctx.handlerSidebarItemClick) }, ...{ class: ("item__head") }, ...{ class: ((__VLS_ctx.getMenuItemHeadClasses(menuMainItem))) }, });
+            // @ts-ignore
+            [McSideBarButton,];
+            // @ts-ignore
+            const __VLS_5 = __VLS_asFunctionalComponent(McSideBarButton, new McSideBarButton({ info: ((!(menuMainItem.menu && !!menuMainItem.menu.length)
+                    ? menuMainItem.info || props.counts[menuMainItem.count_key] || null
+                    : null)), href: ((menuMainItem.href)), to: ((menuMainItem.to)), icon: ((menuMainItem.icon)), iconColor: ((menuMainItem.iconColor)), title: ((menuMainItem.name)), compact: ((__VLS_ctx.compact)), isActive: ((menuMainItem.active())), withSubmenu: ((menuMainItem.menu && !!menuMainItem.menu.length)), withIndicator: ((menuMainItem.indicator() && !menuMainItem.open)), withTooltip: (true), ...{ class: ("item__head-button--no-hover") }, }));
+            const __VLS_6 = __VLS_5({ info: ((!(menuMainItem.menu && !!menuMainItem.menu.length)
+                    ? menuMainItem.info || props.counts[menuMainItem.count_key] || null
+                    : null)), href: ((menuMainItem.href)), to: ((menuMainItem.to)), icon: ((menuMainItem.icon)), iconColor: ((menuMainItem.iconColor)), title: ((menuMainItem.name)), compact: ((__VLS_ctx.compact)), isActive: ((menuMainItem.active())), withSubmenu: ((menuMainItem.menu && !!menuMainItem.menu.length)), withIndicator: ((menuMainItem.indicator() && !menuMainItem.open)), withTooltip: (true), ...{ class: ("item__head-button--no-hover") }, }, ...__VLS_functionalComponentArgsRest(__VLS_5));
+            if (menuMainItem.menu && menuMainItem.menu.length && !__VLS_ctx.compact) {
+                // @ts-ignore
+                [McButton, McButton,];
+                // @ts-ignore
+                const __VLS_10 = __VLS_asFunctionalComponent(McButton, new McButton({ ...{ 'onClick': {} }, variation: ((menuMainItem.active() ? 'white-link' : 'gray-link')), size: ((__VLS_ctx.ButtonSize.MCompact)), ...{ class: ("item__head-arrow") }, ...{ class: (({
+                            rotate: menuMainItem.active() ? menuMainItem.active() && menuMainItem.open : menuMainItem.open
+                        })) }, }));
+                const __VLS_11 = __VLS_10({ ...{ 'onClick': {} }, variation: ((menuMainItem.active() ? 'white-link' : 'gray-link')), size: ((__VLS_ctx.ButtonSize.MCompact)), ...{ class: ("item__head-arrow") }, ...{ class: (({
+                            rotate: menuMainItem.active() ? menuMainItem.active() && menuMainItem.open : menuMainItem.open
+                        })) }, }, ...__VLS_functionalComponentArgsRest(__VLS_10));
+                let __VLS_15;
+                const __VLS_16 = {
+                    onClick: (...[$event]) => {
+                        if (!((__VLS_ctx.preparedMainMenu && __VLS_ctx.preparedMainMenu.length)))
+                            return;
+                        if (!((menuMainItem.menu && menuMainItem.menu.length && !__VLS_ctx.compact)))
+                            return;
+                        menuMainItem.open = !menuMainItem.open;
+                    }
+                };
+                let __VLS_12;
+                let __VLS_13;
+                __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+                {
+                    const { "icon-prepend": __VLS_thisSlot } = __VLS_nonNullable(__VLS_14.slots);
+                    // @ts-ignore
+                    [McSvgIcon,];
+                    // @ts-ignore
+                    const __VLS_17 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ("arrow_forward"), }));
+                    const __VLS_18 = __VLS_17({ name: ("arrow_forward"), }, ...__VLS_functionalComponentArgsRest(__VLS_17));
+                }
+                var __VLS_14;
+            }
+            if (menuMainItem.menu && menuMainItem.menu.length) {
+                // @ts-ignore
+                [McSlideUpDown, McSlideUpDown,];
+                // @ts-ignore
+                const __VLS_22 = __VLS_asFunctionalComponent(McSlideUpDown, new McSlideUpDown({ ...{ class: ("item__submenu") }, active: ((menuMainItem.active() ? menuMainItem.active() && menuMainItem.open : menuMainItem.open)), }));
+                const __VLS_23 = __VLS_22({ ...{ class: ("item__submenu") }, active: ((menuMainItem.active() ? menuMainItem.active() && menuMainItem.open : menuMainItem.open)), }, ...__VLS_functionalComponentArgsRest(__VLS_22));
+                for (const [menuItem, i] of __VLS_getVForSourceType((menuMainItem.menu))) {
+                    // @ts-ignore
+                    [McSideBarButton,];
+                    // @ts-ignore
+                    const __VLS_27 = __VLS_asFunctionalComponent(McSideBarButton, new McSideBarButton({ key: ((i)), info: ((__VLS_ctx.counts[menuItem.count_key])), href: ((menuItem.href)), to: ((menuItem.to)), icon: ((menuItem.icon)), iconColor: ((menuItem.iconColor)), title: ((menuItem.name)), compact: ((__VLS_ctx.compact)), withTooltip: (true), }));
+                    const __VLS_28 = __VLS_27({ key: ((i)), info: ((__VLS_ctx.counts[menuItem.count_key])), href: ((menuItem.href)), to: ((menuItem.to)), icon: ((menuItem.icon)), iconColor: ((menuItem.iconColor)), title: ((menuItem.name)), compact: ((__VLS_ctx.compact)), withTooltip: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_27));
+                }
+                __VLS_nonNullable(__VLS_26.slots).default;
+                var __VLS_26;
+            }
+        }
+    }
+    if (__VLS_ctx.chatraConfig.title) {
+        // @ts-ignore
+        [McSeparator,];
+        // @ts-ignore
+        const __VLS_32 = __VLS_asFunctionalComponent(McSeparator, new McSeparator({ color: ("dark-gray"), indentTop: ("150"), indentBottom: ("150"), indentLeft: ((__VLS_ctx.compact ? '50' : '100')), indentRight: ((__VLS_ctx.compact ? '50' : '100')), }));
+        const __VLS_33 = __VLS_32({ color: ("dark-gray"), indentTop: ("150"), indentBottom: ("150"), indentLeft: ((__VLS_ctx.compact ? '50' : '100')), indentRight: ((__VLS_ctx.compact ? '50' : '100')), }, ...__VLS_functionalComponentArgsRest(__VLS_32));
+    }
+    if (__VLS_ctx.chatraConfig.title) {
+        // @ts-ignore
+        [McSideBarButton,];
+        // @ts-ignore
+        const __VLS_37 = __VLS_asFunctionalComponent(McSideBarButton, new McSideBarButton({ ...{ 'onClick': {} }, icon: ("chat_messages"), title: ((__VLS_ctx.chatraConfig.title)), compact: ((__VLS_ctx.compact)), withTooltip: (true), }));
+        const __VLS_38 = __VLS_37({ ...{ 'onClick': {} }, icon: ("chat_messages"), title: ((__VLS_ctx.chatraConfig.title)), compact: ((__VLS_ctx.compact)), withTooltip: (true), }, ...__VLS_functionalComponentArgsRest(__VLS_37));
+        let __VLS_42;
+        const __VLS_43 = {
+            onClick: (...[$event]) => {
+                if (!((__VLS_ctx.chatraConfig.title)))
+                    return;
+                __VLS_ctx.emit('handlerChatraClick');
+            }
+        };
+        let __VLS_39;
+        let __VLS_40;
+        var __VLS_41;
+    }
+    __VLS_styleScopedClasses['mc-side-bar-center'];
+    __VLS_styleScopedClasses['mc-side-bar-center__title'];
+    __VLS_styleScopedClasses['mc-side-bar-center__content'];
+    __VLS_styleScopedClasses['item-active'];
+    __VLS_styleScopedClasses['mc-side-bar-center__content-item'];
+    __VLS_styleScopedClasses['item'];
+    __VLS_styleScopedClasses['item__head'];
+    __VLS_styleScopedClasses['item__head-button--no-hover'];
+    __VLS_styleScopedClasses['item__head-arrow'];
+    __VLS_styleScopedClasses['rotate'];
+    __VLS_styleScopedClasses['item__submenu'];
+    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 {
+            McTitle: McTitle,
+            McSideBarButton: McSideBarButton,
+            McSeparator: McSeparator,
+            McButton: McButton,
+            McSvgIcon: McSvgIcon,
+            ButtonSize: ButtonSize,
+            McSlideUpDown: McSlideUpDown,
+            emit: emit,
+            loading: loading,
+            preparedMainMenu: preparedMainMenu,
+            getMenuItemHeadClasses: getMenuItemHeadClasses,
+            handlerSidebarItemClick: handlerSidebarItemClick,
+        };
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         *  Заголовок
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Центральное меню
+         */
+        menuMain: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Каунты для пунктов меню
+         *  вставляются в пункты с ключем 'count_key'
+         *
+         */
+        counts: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Id чатры
+         *
+         */
+        chatraConfig: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Компактный вид
+         */
+        compact: {
+            type: Boolean,
+            default: false
+        }
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         *  Заголовок
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Центральное меню
+         */
+        menuMain: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Каунты для пунктов меню
+         *  вставляются в пункты с ключем 'count_key'
+         *
+         */
+        counts: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Id чатры
+         *
+         */
+        chatraConfig: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Компактный вид
+         */
+        compact: {
+            type: Boolean,
+            default: false
+        }
+    },
+    __typeEl: {},
+});
+; /* PartiallyEnd: #4569/main.vue */