mediacube-ui-v2 0.0.9 → 0.0.11

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

@@ -1,740 +0,0 @@
-import { computed, onBeforeUnmount, onMounted, provide, reactive, ref, watch } from 'vue';
-import McSideBarTop from '@/components/patterns/McSideBar/McSideBarTop/McSideBarTop.vue';
-import McSideBarCenter from '@/components/patterns/McSideBar/McSideBarCenter/McSideBarCenter.vue';
-import McSideBarBottom from '@/components/patterns/McSideBar/McSideBarBottom/McSideBarBottom.vue';
-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;
-    // @ts-ignore
-    [McSideBarTop, McSideBarTop,];
-    // @ts-ignore
-    const __VLS_0 = __VLS_asFunctionalComponent(McSideBarTop, new McSideBarTop({ 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_1 = __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)), }, ...__VLS_functionalComponentArgsRest(__VLS_0));
-    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-    {
-        const { "title-append": __VLS_thisSlot } = __VLS_nonNullable(__VLS_4.slots);
-        var __VLS_5 = {};
-    }
-    var __VLS_4;
-    __VLS_elementAsFunction(__VLS_intrinsicElements.section, __VLS_intrinsicElements.section)({ ...{ class: ("mc-side-bar__scrollable-container") }, });
-    // @ts-ignore
-    [McSideBarCenter,];
-    // @ts-ignore
-    const __VLS_6 = __VLS_asFunctionalComponent(McSideBarCenter, new McSideBarCenter({ ...{ '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_7 = __VLS_6({ ...{ '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_6));
-    let __VLS_11;
-    const __VLS_12 = {
-        onHandlerChatraClick: (...[$event]) => {
-            __VLS_ctx.emit('chatraClick');
-        }
-    };
-    const __VLS_13 = {
-        onOpenSideBar: (__VLS_ctx.openSideBar)
-    };
-    let __VLS_8;
-    let __VLS_9;
-    var __VLS_10;
-    // @ts-ignore
-    [McSideBarBottom, McSideBarBottom,];
-    // @ts-ignore
-    const __VLS_14 = __VLS_asFunctionalComponent(McSideBarBottom, new McSideBarBottom({ ...{ 'onToggleSize': {} }, hideText: ((__VLS_ctx.hideText)), compact: ((__VLS_ctx.pretty_compact)), hiddenMode: ((__VLS_ctx.hiddenMode)), sidebarWidth: ((__VLS_ctx.width)), }));
-    const __VLS_15 = __VLS_14({ ...{ 'onToggleSize': {} }, hideText: ((__VLS_ctx.hideText)), compact: ((__VLS_ctx.pretty_compact)), hiddenMode: ((__VLS_ctx.hiddenMode)), sidebarWidth: ((__VLS_ctx.width)), }, ...__VLS_functionalComponentArgsRest(__VLS_14));
-    let __VLS_19;
-    const __VLS_20 = {
-        onToggleSize: (__VLS_ctx.handleToggleSize)
-    };
-    let __VLS_16;
-    let __VLS_17;
-    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
-    {
-        const { "bottom-message": __VLS_thisSlot } = __VLS_nonNullable(__VLS_18.slots);
-        var __VLS_21 = {};
-    }
-    var __VLS_18;
-    __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 */