mediacube-ui-v2 0.0.7 → 0.0.9

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

@@ -0,0 +1,204 @@
+import McSideBarButton from '@/components/patterns/McSideBar/McSideBarButton/McSideBarButton.vue';
+import { computed, inject } from 'vue';
+import { defaultThemes } from '@/mocks/sidebar';
+import { SidebarTheme } from '@/enums';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const provideData = inject('provideData', {});
+const emit = defineEmits();
+const props = defineProps({
+    /**
+     *  Текст кнопки
+     *  сворачивания меню
+     */
+    hideText: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Компактный вид
+     */
+    compact: {
+        type: Boolean,
+        default: false
+    },
+    hiddenMode: {
+        type: Boolean,
+        default: false
+    },
+    sidebarWidth: {
+        type: String,
+        default: null
+    }
+});
+const themeConfig = computed(() => {
+    return provideData.currentThemeConfig || defaultThemes[SidebarTheme.Black];
+});
+const closeButtonProps = computed(() => {
+    return themeConfig.value?.closeButton;
+});
+const classes = computed(() => {
+    return {
+        'mc-side-bar-bottom--compact': props.compact
+    };
+});
+const messageStyles = computed(() => {
+    return {
+        minWidth: props.sidebarWidth
+    };
+});
+const handleClick = () => {
+    emit('toggle-size', !props.compact);
+}; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Текст кнопки
+         *  сворачивания меню
+         */
+        hideText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Компактный вид
+         */
+        compact: {
+            type: Boolean,
+            default: false
+        },
+        hiddenMode: {
+            type: Boolean,
+            default: false
+        },
+        sidebarWidth: {
+            type: String,
+            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.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-side-bar-bottom") }, ...{ class: ((__VLS_ctx.classes)) }, });
+    if (!__VLS_ctx.compact && __VLS_ctx.$slots['bottom-message']) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-side-bar-bottom__slot-message") }, ...{ style: ((__VLS_ctx.messageStyles)) }, });
+        var __VLS_0 = {};
+    }
+    if (!__VLS_ctx.hiddenMode) {
+        // @ts-ignore
+        [McSideBarButton,];
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(McSideBarButton, new McSideBarButton({ ...{ 'onClick': {} }, ...{ class: ("mc-side-bar-bottom__hide-button") }, icon: ("arrow_backward"), title: ((__VLS_ctx.hideText)), compact: ((__VLS_ctx.compact)), variation: ((__VLS_ctx.closeButtonProps.variable)), secondaryColor: ((__VLS_ctx.closeButtonProps.secondaryColor)), }));
+        const __VLS_2 = __VLS_1({ ...{ 'onClick': {} }, ...{ class: ("mc-side-bar-bottom__hide-button") }, icon: ("arrow_backward"), title: ((__VLS_ctx.hideText)), compact: ((__VLS_ctx.compact)), variation: ((__VLS_ctx.closeButtonProps.variable)), secondaryColor: ((__VLS_ctx.closeButtonProps.secondaryColor)), }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        let __VLS_6;
+        const __VLS_7 = {
+            onClick: (__VLS_ctx.handleClick)
+        };
+        let __VLS_3;
+        let __VLS_4;
+        var __VLS_5;
+    }
+    __VLS_styleScopedClasses['mc-side-bar-bottom'];
+    __VLS_styleScopedClasses['mc-side-bar-bottom__slot-message'];
+    __VLS_styleScopedClasses['mc-side-bar-bottom__hide-button'];
+    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 {
+            McSideBarButton: McSideBarButton,
+            closeButtonProps: closeButtonProps,
+            classes: classes,
+            messageStyles: messageStyles,
+            handleClick: handleClick,
+        };
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         *  Текст кнопки
+         *  сворачивания меню
+         */
+        hideText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Компактный вид
+         */
+        compact: {
+            type: Boolean,
+            default: false
+        },
+        hiddenMode: {
+            type: Boolean,
+            default: false
+        },
+        sidebarWidth: {
+            type: String,
+            default: null
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        /**
+         *  Текст кнопки
+         *  сворачивания меню
+         */
+        hideText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Компактный вид
+         */
+        compact: {
+            type: Boolean,
+            default: false
+        },
+        hiddenMode: {
+            type: Boolean,
+            default: false
+        },
+        sidebarWidth: {
+            type: String,
+            default: null
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */

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

@@ -0,0 +1,510 @@
+import McButton from '@/components/elements/McButton/McButton.vue';
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue';
+import McChip from '@/components/elements/McChip/McChip.vue';
+import { computed, inject, useAttrs } from 'vue';
+import { ButtonSize, HorizontalAlignment, SidebarTheme, TooltipPositions } from '@/enums';
+import { defaultThemes } from '@/mocks/sidebar';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const attrs = useAttrs();
+const provideData = inject('provideData', {});
+const props = defineProps({
+    /**
+     *  Если нужна ссылка внутри приложения:
+     */
+    to: {
+        type: Object,
+        default: null
+    },
+    /**
+     *  Если нужна обычная ссылка:
+     * `https://mcpay.io/`
+     */
+    href: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Если нужна иконка
+     */
+    icon: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Если нужен конкретный
+     *  цвет иконки
+     */
+    iconColor: {
+        type: String,
+        default: 'currentColor'
+    },
+    /**
+     *  Тайтл кнопки
+     */
+    title: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Compact size
+     */
+    compact: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Дизайн:
+     *  `purple, red, purple-outline, purple-invert, purple-flat и т.д.`
+     */
+    variation: {
+        type: String
+    },
+    /**
+     * Если нужен другой цвет при взаимодействии
+     */
+    secondaryColor: {
+        type: String
+    },
+    withTooltip: {
+        type: Boolean,
+        default: false
+    },
+    withIndicator: {
+        type: Boolean,
+        default: false
+    },
+    isActive: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Additional info
+     */
+    info: {
+        type: [String, Number],
+        default: ''
+    },
+    /**
+     *  Exact
+     *
+     */
+    exact: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Отключенное состояние
+     *
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+});
+const themeConfig = computed(() => {
+    return provideData.currentThemeConfig || defaultThemes[SidebarTheme.Black];
+});
+const classes = computed(() => {
+    return {
+        'mc-side-bar-button': true,
+        [`mc-side-bar--${themeConfig.value.mode || 'black'}__button`]: true,
+        'purple-hover': !props.secondaryColor && themeConfig.value.mainMenuLinks.variable === 'black-flat',
+        //@ts-ignore
+        [attrs.class]: !!attrs.class
+    };
+});
+const btnAttrs = computed(() => {
+    return {
+        ...attrs,
+        variation: props.variation || themeConfig.value.mainMenuLinks.variable,
+        secondaryColor: props.secondaryColor || themeConfig.value.mainMenuLinks.secondaryColor,
+        textAlign: HorizontalAlignment.Left,
+        fullWidth: true,
+        size: props.compact ? ButtonSize.SCompact : ButtonSize.S,
+        href: props.href,
+        to: props.to,
+        exact: props.exact,
+        disabled: props.disabled,
+        isActive: props.isActive,
+        tooltip: props.compact && props.withTooltip ? props.title : '',
+        tooltipPlacement: TooltipPositions.Right
+    };
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Если нужна ссылка внутри приложения:
+         */
+        to: {
+            type: Object,
+            default: null
+        },
+        /**
+         *  Если нужна обычная ссылка:
+         * `https://mcpay.io/`
+         */
+        href: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Если нужна иконка
+         */
+        icon: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Если нужен конкретный
+         *  цвет иконки
+         */
+        iconColor: {
+            type: String,
+            default: 'currentColor'
+        },
+        /**
+         *  Тайтл кнопки
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Compact size
+         */
+        compact: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Дизайн:
+         *  `purple, red, purple-outline, purple-invert, purple-flat и т.д.`
+         */
+        variation: {
+            type: String
+        },
+        /**
+         * Если нужен другой цвет при взаимодействии
+         */
+        secondaryColor: {
+            type: String
+        },
+        withTooltip: {
+            type: Boolean,
+            default: false
+        },
+        withIndicator: {
+            type: Boolean,
+            default: false
+        },
+        isActive: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Additional info
+         */
+        info: {
+            type: [String, Number],
+            default: ''
+        },
+        /**
+         *  Exact
+         *
+         */
+        exact: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            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;
+    // @ts-ignore
+    [McButton, McButton,];
+    // @ts-ignore
+    const __VLS_0 = __VLS_asFunctionalComponent(McButton, new McButton({ ...(__VLS_ctx.btnAttrs), ...{ class: ((__VLS_ctx.classes)) }, }));
+    const __VLS_1 = __VLS_0({ ...(__VLS_ctx.btnAttrs), ...{ class: ((__VLS_ctx.classes)) }, }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+    var __VLS_5 = {};
+    __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+    {
+        const { "icon-prepend": __VLS_thisSlot } = __VLS_nonNullable(__VLS_4.slots);
+        if (__VLS_ctx.icon) {
+            // @ts-ignore
+            [McSvgIcon,];
+            // @ts-ignore
+            const __VLS_6 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ fill: ((__VLS_ctx.iconColor)), ...{ class: ("mc-side-bar-button__icon") }, name: ((__VLS_ctx.icon)), }));
+            const __VLS_7 = __VLS_6({ fill: ((__VLS_ctx.iconColor)), ...{ class: ("mc-side-bar-button__icon") }, name: ((__VLS_ctx.icon)), }, ...__VLS_functionalComponentArgsRest(__VLS_6));
+        }
+        if (__VLS_ctx.icon && __VLS_ctx.compact && (__VLS_ctx.info || __VLS_ctx.withIndicator)) {
+            __VLS_elementAsFunction(__VLS_intrinsicElements.span)({ ...{ class: ("mc-side-bar-button__dot") }, });
+        }
+    }
+    if (!__VLS_ctx.compact) {
+        (__VLS_ctx.title);
+    }
+    if (!__VLS_ctx.compact) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.template, __VLS_intrinsicElements.template)({});
+        {
+            const { "icon-append": __VLS_thisSlot } = __VLS_nonNullable(__VLS_4.slots);
+            if (__VLS_ctx.info || __VLS_ctx.withIndicator) {
+                // @ts-ignore
+                [McChip, McChip,];
+                // @ts-ignore
+                const __VLS_11 = __VLS_asFunctionalComponent(McChip, new McChip({ variation: ("purple"), ...{ class: ("mc-side-bar-button__chip") }, ...{ class: (({ indicator: __VLS_ctx.withIndicator })) }, }));
+                const __VLS_12 = __VLS_11({ variation: ("purple"), ...{ class: ("mc-side-bar-button__chip") }, ...{ class: (({ indicator: __VLS_ctx.withIndicator })) }, }, ...__VLS_functionalComponentArgsRest(__VLS_11));
+                (__VLS_ctx.withIndicator ? '' : __VLS_ctx.info);
+                __VLS_nonNullable(__VLS_15.slots).default;
+                var __VLS_15;
+            }
+        }
+    }
+    var __VLS_4;
+    __VLS_styleScopedClasses['mc-side-bar-button__icon'];
+    __VLS_styleScopedClasses['mc-side-bar-button__dot'];
+    __VLS_styleScopedClasses['mc-side-bar-button__chip'];
+    __VLS_styleScopedClasses['indicator'];
+    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 {
+            McButton: McButton,
+            McSvgIcon: McSvgIcon,
+            McChip: McChip,
+            classes: classes,
+            btnAttrs: btnAttrs,
+        };
+    },
+    props: {
+        /**
+         *  Если нужна ссылка внутри приложения:
+         */
+        to: {
+            type: Object,
+            default: null
+        },
+        /**
+         *  Если нужна обычная ссылка:
+         * `https://mcpay.io/`
+         */
+        href: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Если нужна иконка
+         */
+        icon: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Если нужен конкретный
+         *  цвет иконки
+         */
+        iconColor: {
+            type: String,
+            default: 'currentColor'
+        },
+        /**
+         *  Тайтл кнопки
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Compact size
+         */
+        compact: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Дизайн:
+         *  `purple, red, purple-outline, purple-invert, purple-flat и т.д.`
+         */
+        variation: {
+            type: String
+        },
+        /**
+         * Если нужен другой цвет при взаимодействии
+         */
+        secondaryColor: {
+            type: String
+        },
+        withTooltip: {
+            type: Boolean,
+            default: false
+        },
+        withIndicator: {
+            type: Boolean,
+            default: false
+        },
+        isActive: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Additional info
+         */
+        info: {
+            type: [String, Number],
+            default: ''
+        },
+        /**
+         *  Exact
+         *
+         */
+        exact: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        /**
+         *  Если нужна ссылка внутри приложения:
+         */
+        to: {
+            type: Object,
+            default: null
+        },
+        /**
+         *  Если нужна обычная ссылка:
+         * `https://mcpay.io/`
+         */
+        href: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Если нужна иконка
+         */
+        icon: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Если нужен конкретный
+         *  цвет иконки
+         */
+        iconColor: {
+            type: String,
+            default: 'currentColor'
+        },
+        /**
+         *  Тайтл кнопки
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Compact size
+         */
+        compact: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Дизайн:
+         *  `purple, red, purple-outline, purple-invert, purple-flat и т.д.`
+         */
+        variation: {
+            type: String
+        },
+        /**
+         * Если нужен другой цвет при взаимодействии
+         */
+        secondaryColor: {
+            type: String
+        },
+        withTooltip: {
+            type: Boolean,
+            default: false
+        },
+        withIndicator: {
+            type: Boolean,
+            default: false
+        },
+        isActive: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Additional info
+         */
+        info: {
+            type: [String, Number],
+            default: ''
+        },
+        /**
+         *  Exact
+         *
+         */
+        exact: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    __typeEl: {},
+});
+; /* PartiallyEnd: #4569/main.vue */