mediacube-ui-v2 0.0.27 → 0.0.29

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

@@ -0,0 +1,738 @@
+import { computed, onBeforeUnmount, onMounted, provide, reactive, ref, watch } from 'vue';
+import { McSideBarTop, McSideBarCenter, McSideBarBottom } from '@/components';
+import { defaultThemes } from '@/mocks/sidebar';
+import { SidebarTheme, TitleVariations } from '@/enums';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const emit = defineEmits();
+const props = defineProps({
+    /**
+     *  Название сервиса
+     *
+     */
+    logoTitle: {
+        type: String,
+        default: 'Dashboard'
+    },
+    /**
+     *  Размер текста названия сервиса
+     *
+     */
+    logoTitleVariation: {
+        type: String,
+        default: TitleVariations.Subtitle
+    },
+    /**
+     *  Путь до изображения
+     *
+     */
+    logoSrc: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Имя иконки
+     *  заголовка
+     */
+    logoIcon: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Заголовок
+     *  центрального блока
+     */
+    menuMainTitle: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Центральное меню
+     *
+     */
+    menuMain: {
+        type: Array,
+        default: () => []
+    },
+    /**
+     *  Каунты для пунктов меню
+     *  вставляются в пункты с ключем 'count_key'
+     *
+     */
+    counts: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     *  Меню приложений
+     *
+     */
+    menuApps: {
+        type: Array,
+        default: () => []
+    },
+    /**
+     *  Config чатры
+     *
+     */
+    chatraConfig: {
+        type: Object,
+        default: () => ({})
+    },
+    /**
+     *  Текст кнопки
+     *  сворачивания меню
+     */
+    hideText: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Компактный вид
+     */
+    compact: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Цветовая схема
+     */
+    variable: {
+        type: String,
+        default: SidebarTheme.Black
+    },
+    /**
+     * Ширина сайдбара
+     */
+    width: {
+        type: String,
+        default: '216px'
+    },
+    /**
+     * Ширина компактного сайдбара
+     */
+    compactWidth: {
+        type: String,
+        default: '56px'
+    },
+    /**
+     * Брейкпоинт после которого
+     * сайдбар становится абсолютным и появляется затемненный бэкдроп
+     */
+    absoluteBreakpoint: {
+        type: Number,
+        default: null
+    },
+    /**
+     * Брейкпоинт после которого
+     * сайдбар полностью прячется
+     */
+    hiddenBreakpoint: {
+        type: Number,
+        default: null
+    }
+});
+const is_hidden = ref(false);
+const pretty_compact = ref(props.compact);
+const has_compact_class = ref(props.compact);
+const window_width = ref(0);
+const sideBarClasses = computed(() => {
+    return {
+        'mc-side-bar--compact': has_compact_class.value,
+        [currentThemeConfig.value.className]: true
+    };
+});
+const sideBarStyles = computed(() => {
+    return {
+        overflow: `${is_hidden.value ? 'hidden' : 'visible'}`,
+        width: has_compact_class.value ? props.compactWidth : props.width
+    };
+});
+const wrapperStyles = computed(() => {
+    const position = hiddenMode.value && has_compact_class.value
+        ? {
+            position: 'absolute',
+            left: `-${props.compactWidth}`
+        }
+        : {};
+    let width = {
+        width: has_compact_class.value ? props.compactWidth : props.width
+    };
+    if (absoluteMode.value) {
+        width.width = props.compactWidth;
+    }
+    if (hiddenMode.value) {
+        width.width = '0px';
+    }
+    return {
+        ...width,
+        ...position
+    };
+});
+const backdropClasses = computed(() => {
+    return {
+        'mc-side-bar-wrapper__backdrop--full-width': !has_compact_class.value && window_width.value < props.absoluteBreakpoint
+    };
+});
+const absoluteMode = computed(() => {
+    return !!props.absoluteBreakpoint && window_width.value < props.absoluteBreakpoint;
+});
+const hiddenMode = computed(() => {
+    return !!props.hiddenBreakpoint && window_width.value < props.hiddenBreakpoint;
+});
+const currentThemeConfig = computed(() => {
+    return sidebarThemeConfig.value[props.variable] || sidebarThemeConfig.value[SidebarTheme.Black];
+});
+const sidebarThemeConfig = computed(() => {
+    return {
+        black: defaultThemes.black,
+        white: defaultThemes.white
+    };
+});
+onMounted(() => {
+    if (props.absoluteBreakpoint || (props.hiddenBreakpoint && window)) {
+        resize();
+        window.addEventListener('resize', resize);
+    }
+});
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', resize);
+});
+const handleToggleSize = () => {
+    has_compact_class.value = !has_compact_class.value;
+    emit('compact', has_compact_class.value);
+};
+const openSideBar = () => {
+    has_compact_class.value = false;
+    emit('compact', has_compact_class.value);
+};
+const resize = () => {
+    window_width.value = window.innerWidth;
+};
+watch(() => has_compact_class.value, (value) => {
+    if (value) {
+        setTimeout(() => {
+            pretty_compact.value = value;
+        }, 280);
+    }
+    else {
+        pretty_compact.value = value;
+    }
+    is_hidden.value = true;
+    setTimeout(() => {
+        is_hidden.value = false;
+    }, 280);
+});
+watch(() => props.compact, (value) => {
+    has_compact_class.value = value;
+});
+watch(() => absoluteMode.value, (value) => {
+    emit('absolute-mode', value);
+}, { immediate: true });
+watch(() => hiddenMode.value, (value) => {
+    emit('hidden-mode', value);
+}, { immediate: true });
+provide('provideData', reactive({ currentThemeConfig: currentThemeConfig.value })); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Название сервиса
+         *
+         */
+        logoTitle: {
+            type: String,
+            default: 'Dashboard'
+        },
+        /**
+         *  Размер текста названия сервиса
+         *
+         */
+        logoTitleVariation: {
+            type: String,
+            default: TitleVariations.Subtitle
+        },
+        /**
+         *  Путь до изображения
+         *
+         */
+        logoSrc: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Имя иконки
+         *  заголовка
+         */
+        logoIcon: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Заголовок
+         *  центрального блока
+         */
+        menuMainTitle: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Центральное меню
+         *
+         */
+        menuMain: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Каунты для пунктов меню
+         *  вставляются в пункты с ключем 'count_key'
+         *
+         */
+        counts: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Меню приложений
+         *
+         */
+        menuApps: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Config чатры
+         *
+         */
+        chatraConfig: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Текст кнопки
+         *  сворачивания меню
+         */
+        hideText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Компактный вид
+         */
+        compact: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Цветовая схема
+         */
+        variable: {
+            type: String,
+            default: SidebarTheme.Black
+        },
+        /**
+         * Ширина сайдбара
+         */
+        width: {
+            type: String,
+            default: '216px'
+        },
+        /**
+         * Ширина компактного сайдбара
+         */
+        compactWidth: {
+            type: String,
+            default: '56px'
+        },
+        /**
+         * Брейкпоинт после которого
+         * сайдбар становится абсолютным и появляется затемненный бэкдроп
+         */
+        absoluteBreakpoint: {
+            type: Number,
+            default: null
+        },
+        /**
+         * Брейкпоинт после которого
+         * сайдбар полностью прячется
+         */
+        hiddenBreakpoint: {
+            type: Number,
+            default: null
+        }
+    },
+    __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.article, __VLS_intrinsicElements.article)({ ref: ("sidebar-wrapper"), ...{ class: ("mc-side-bar-wrapper") }, ...{ style: ((__VLS_ctx.wrapperStyles)) }, });
+    // @ts-ignore navigation for `const sidebar-wrapper = ref()`
+    __VLS_ctx["sidebar-wrapper"];
+    __VLS_elementAsFunction(__VLS_intrinsicElements.section, __VLS_intrinsicElements.section)({ ...{ onClick: (__VLS_ctx.handleToggleSize) }, ...{ class: ("mc-side-bar-wrapper__backdrop") }, ...{ class: ((__VLS_ctx.backdropClasses)) }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ onClick: () => { } }, ref: ("sidebar"), ...{ class: ("mc-side-bar") }, ...{ class: ((__VLS_ctx.sideBarClasses)) }, ...{ style: ((__VLS_ctx.sideBarStyles)) }, });
+    // @ts-ignore navigation for `const sidebar = ref()`
+    __VLS_ctx.sidebar;
+    const __VLS_0 = __VLS_resolvedLocalAndGlobalComponents.McSideBarTop;
+    /** @type { [typeof __VLS_components.McSideBarTop, typeof __VLS_components.mcSideBarTop, typeof __VLS_components.McSideBarTop, typeof __VLS_components.mcSideBarTop, ] } */
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ logoTitle: ((__VLS_ctx.logoTitle)), logoTitleVariation: ((__VLS_ctx.logoTitleVariation)), logoSrc: ((__VLS_ctx.logoSrc)), logoIcon: ((__VLS_ctx.logoIcon)), compact: ((__VLS_ctx.pretty_compact)), menuApps: ((__VLS_ctx.menuApps)), }));
+    const __VLS_2 = __VLS_1({ logoTitle: ((__VLS_ctx.logoTitle)), logoTitleVariation: ((__VLS_ctx.logoTitleVariation)), logoSrc: ((__VLS_ctx.logoSrc)), logoIcon: ((__VLS_ctx.logoIcon)), compact: ((__VLS_ctx.pretty_compact)), menuApps: ((__VLS_ctx.menuApps)), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { "title-append": __VLS_thisSlot } = __VLS_nonNullable(__VLS_5.slots);
+        var __VLS_6 = {};
+    }
+    var __VLS_5;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.section, __VLS_intrinsicElements.section)({ ...{ class: ("mc-side-bar__scrollable-container") }, });
+    const __VLS_7 = __VLS_resolvedLocalAndGlobalComponents.McSideBarCenter;
+    /** @type { [typeof __VLS_components.McSideBarCenter, typeof __VLS_components.mcSideBarCenter, ] } */
+    // @ts-ignore
+    const __VLS_8 = __VLS_asFunctionalComponent(__VLS_7, new __VLS_7({ ...{ 'onHandlerChatraClick': {} }, ...{ 'onOpenSideBar': {} }, title: ((__VLS_ctx.menuMainTitle)), menuMain: ((__VLS_ctx.menuMain)), counts: ((__VLS_ctx.counts)), chatraConfig: ((__VLS_ctx.chatraConfig)), compact: ((__VLS_ctx.pretty_compact)), }));
+    const __VLS_9 = __VLS_8({ ...{ 'onHandlerChatraClick': {} }, ...{ 'onOpenSideBar': {} }, title: ((__VLS_ctx.menuMainTitle)), menuMain: ((__VLS_ctx.menuMain)), counts: ((__VLS_ctx.counts)), chatraConfig: ((__VLS_ctx.chatraConfig)), compact: ((__VLS_ctx.pretty_compact)), }, ...__VLS_functionalComponentArgsRest(__VLS_8));
+    let __VLS_13;
+    const __VLS_14 = {
+        onHandlerChatraClick: (...[$event]) => {
+            __VLS_ctx.emit('chatraClick');
+        }
+    };
+    const __VLS_15 = {
+        onOpenSideBar: (__VLS_ctx.openSideBar)
+    };
+    let __VLS_10;
+    let __VLS_11;
+    var __VLS_12;
+    const __VLS_16 = __VLS_resolvedLocalAndGlobalComponents.McSideBarBottom;
+    /** @type { [typeof __VLS_components.McSideBarBottom, typeof __VLS_components.mcSideBarBottom, typeof __VLS_components.McSideBarBottom, typeof __VLS_components.mcSideBarBottom, ] } */
+    // @ts-ignore
+    const __VLS_17 = __VLS_asFunctionalComponent(__VLS_16, new __VLS_16({ ...{ 'onToggleSize': {} }, hideText: ((__VLS_ctx.hideText)), compact: ((__VLS_ctx.pretty_compact)), hiddenMode: ((__VLS_ctx.hiddenMode)), sidebarWidth: ((__VLS_ctx.width)), }));
+    const __VLS_18 = __VLS_17({ ...{ 'onToggleSize': {} }, hideText: ((__VLS_ctx.hideText)), compact: ((__VLS_ctx.pretty_compact)), hiddenMode: ((__VLS_ctx.hiddenMode)), sidebarWidth: ((__VLS_ctx.width)), }, ...__VLS_functionalComponentArgsRest(__VLS_17));
+    let __VLS_22;
+    const __VLS_23 = {
+        onToggleSize: (__VLS_ctx.handleToggleSize)
+    };
+    let __VLS_19;
+    let __VLS_20;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { "bottom-message": __VLS_thisSlot } = __VLS_nonNullable(__VLS_21.slots);
+        var __VLS_24 = {};
+    }
+    var __VLS_21;
+    __VLS_styleScopedClasses['mc-side-bar-wrapper'];
+    __VLS_styleScopedClasses['mc-side-bar-wrapper__backdrop'];
+    __VLS_styleScopedClasses['mc-side-bar'];
+    __VLS_styleScopedClasses['mc-side-bar__scrollable-container'];
+    var __VLS_slots;
+    var __VLS_inheritedAttrs;
+    const __VLS_refs = {
+        "sidebar-wrapper": __VLS_nativeElements['article'],
+        "sidebar": __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 {
+            McSideBarTop: McSideBarTop,
+            McSideBarCenter: McSideBarCenter,
+            McSideBarBottom: McSideBarBottom,
+            emit: emit,
+            pretty_compact: pretty_compact,
+            sideBarClasses: sideBarClasses,
+            sideBarStyles: sideBarStyles,
+            wrapperStyles: wrapperStyles,
+            backdropClasses: backdropClasses,
+            hiddenMode: hiddenMode,
+            handleToggleSize: handleToggleSize,
+            openSideBar: openSideBar,
+        };
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         *  Название сервиса
+         *
+         */
+        logoTitle: {
+            type: String,
+            default: 'Dashboard'
+        },
+        /**
+         *  Размер текста названия сервиса
+         *
+         */
+        logoTitleVariation: {
+            type: String,
+            default: TitleVariations.Subtitle
+        },
+        /**
+         *  Путь до изображения
+         *
+         */
+        logoSrc: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Имя иконки
+         *  заголовка
+         */
+        logoIcon: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Заголовок
+         *  центрального блока
+         */
+        menuMainTitle: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Центральное меню
+         *
+         */
+        menuMain: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Каунты для пунктов меню
+         *  вставляются в пункты с ключем 'count_key'
+         *
+         */
+        counts: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Меню приложений
+         *
+         */
+        menuApps: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Config чатры
+         *
+         */
+        chatraConfig: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Текст кнопки
+         *  сворачивания меню
+         */
+        hideText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Компактный вид
+         */
+        compact: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Цветовая схема
+         */
+        variable: {
+            type: String,
+            default: SidebarTheme.Black
+        },
+        /**
+         * Ширина сайдбара
+         */
+        width: {
+            type: String,
+            default: '216px'
+        },
+        /**
+         * Ширина компактного сайдбара
+         */
+        compactWidth: {
+            type: String,
+            default: '56px'
+        },
+        /**
+         * Брейкпоинт после которого
+         * сайдбар становится абсолютным и появляется затемненный бэкдроп
+         */
+        absoluteBreakpoint: {
+            type: Number,
+            default: null
+        },
+        /**
+         * Брейкпоинт после которого
+         * сайдбар полностью прячется
+         */
+        hiddenBreakpoint: {
+            type: Number,
+            default: null
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         *  Название сервиса
+         *
+         */
+        logoTitle: {
+            type: String,
+            default: 'Dashboard'
+        },
+        /**
+         *  Размер текста названия сервиса
+         *
+         */
+        logoTitleVariation: {
+            type: String,
+            default: TitleVariations.Subtitle
+        },
+        /**
+         *  Путь до изображения
+         *
+         */
+        logoSrc: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Имя иконки
+         *  заголовка
+         */
+        logoIcon: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Заголовок
+         *  центрального блока
+         */
+        menuMainTitle: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Центральное меню
+         *
+         */
+        menuMain: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Каунты для пунктов меню
+         *  вставляются в пункты с ключем 'count_key'
+         *
+         */
+        counts: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Меню приложений
+         *
+         */
+        menuApps: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Config чатры
+         *
+         */
+        chatraConfig: {
+            type: Object,
+            default: () => ({})
+        },
+        /**
+         *  Текст кнопки
+         *  сворачивания меню
+         */
+        hideText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Компактный вид
+         */
+        compact: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Цветовая схема
+         */
+        variable: {
+            type: String,
+            default: SidebarTheme.Black
+        },
+        /**
+         * Ширина сайдбара
+         */
+        width: {
+            type: String,
+            default: '216px'
+        },
+        /**
+         * Ширина компактного сайдбара
+         */
+        compactWidth: {
+            type: String,
+            default: '56px'
+        },
+        /**
+         * Брейкпоинт после которого
+         * сайдбар становится абсолютным и появляется затемненный бэкдроп
+         */
+        absoluteBreakpoint: {
+            type: Number,
+            default: null
+        },
+        /**
+         * Брейкпоинт после которого
+         * сайдбар полностью прячется
+         */
+        hiddenBreakpoint: {
+            type: Number,
+            default: null
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */