mediacube-ui-v2 0.0.7 → 0.0.9

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

@@ -0,0 +1,427 @@
+import { computed, onMounted, onUpdated, ref, watch, provide, nextTick } from 'vue';
+import { Colors } from '@/types/styles/Colors';
+import { useRouter } from 'vue-router';
+import McWrapScroll from '@/components/patterns/McWrapScroll/McWrapScroll.vue';
+import { TabVariations } from '@/enums/Tab';
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const emit = defineEmits();
+const router = useRouter();
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Размеры табов:
+     *  `body, caption, overline`
+     */
+    tabVariation: {
+        type: String,
+        default: TabVariations.Captions
+    },
+    /**
+     *  Цвет текста табов
+     */
+    color: {
+        type: String,
+        default: 'black'
+    },
+    /**
+     *  Цвет линии активного таба
+     */
+    accentColor: {
+        type: String,
+        default: 'purple'
+    },
+    /**
+     *  Заглавные буквы
+     *  табов
+     */
+    uppercase: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Передаваемое состояние загрузки
+     *
+     * Нужно для метода switchingDisableTab
+     * в случае, если состояние табов (active/disable)
+     * задается динамически
+     */
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Закрепленные табы
+     *
+     * Добавляет верхнее расстояние
+     * для табов для правильного отображения
+     */
+    sticky: {
+        type: Boolean,
+        default: false
+    }
+});
+const tabs = ref([]);
+const classes = computed(() => {
+    return {
+        'mc-tabs': true,
+        [`mc-tabs--tab-variation-${props.tabVariation}`]: !!props.tabVariation,
+        'mc-tabs--uppercase': !!props.uppercase,
+        'mc-tabs--sticky': !!props.sticky
+    };
+});
+const styles = computed(() => {
+    return {
+        '--mc-tabs-color': Colors[props.color],
+        '--mc-tabs-accent-color': Colors[props.accentColor]
+    };
+});
+const computedValue = computed({
+    // @ts-ignore
+    get() {
+        return props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    }
+});
+const activeVisibleTabs = computed(() => {
+    return tabs.value.filter((tab) => tab.visible && !tab.isDisabled);
+});
+onMounted(() => {
+    handleCheckInitTab();
+});
+onUpdated(() => {
+    setTimeout(() => {
+        watchDisableTab();
+    }, 10);
+});
+const updateTabsState = (payload) => {
+    tabs.value.forEach((tab) => {
+        tab.isActive = tab.computedId === payload;
+        tab.isActive ? tab.showTab() : tab.hideTab();
+    });
+};
+const selfRegisterTabMethod = (payload) => {
+    tabs.value.push(payload);
+};
+const handleCheckInitTab = () => {
+    let [tab] = activeVisibleTabs.value;
+    const preselectedTab = tabs.value.find((tab) => tab.computedId === props.modelValue);
+    if (preselectedTab && !preselectedTab.isDisabled) {
+        tab = preselectedTab;
+    }
+    if (!tab)
+        return;
+    handleSelectTab(tab);
+};
+const handleEmitChange = (tab) => {
+    emit('tab-changed', { tab });
+};
+const watchDisableTab = () => {
+    if (props.loading)
+        return;
+    const activeTab = tabs.value?.find((tab) => tab.isActive);
+    if (!activeTab?.isDisabled)
+        return;
+    const [tab] = activeVisibleTabs.value;
+    handleSelectTab(tab);
+};
+const handleSelectTab = (tab, event) => {
+    event?.preventDefault();
+    if (tab.isDisabled)
+        return;
+    if (tab.onClick && typeof tab.onClick === 'function')
+        return tab.onClick(tab);
+    if (tab.href) {
+        window.open(tab.href, '_blank');
+        return;
+    }
+    if (tab.to && router) {
+        router.push(tab.to);
+        return;
+    }
+    handleEmitChange(tab);
+    updateTabsState(tab.computedId);
+    //@ts-ignore
+    computedValue.value = tab.computedId;
+};
+watch(() => props.loading, (val, oldVal) => {
+    if (!val && oldVal)
+        nextTick(() => {
+            handleCheckInitTab();
+        });
+});
+provide('selfRegisterTabMethod', selfRegisterTabMethod); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        modelValue: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Размеры табов:
+         *  `body, caption, overline`
+         */
+        tabVariation: {
+            type: String,
+            default: TabVariations.Captions
+        },
+        /**
+         *  Цвет текста табов
+         */
+        color: {
+            type: String,
+            default: 'black'
+        },
+        /**
+         *  Цвет линии активного таба
+         */
+        accentColor: {
+            type: String,
+            default: 'purple'
+        },
+        /**
+         *  Заглавные буквы
+         *  табов
+         */
+        uppercase: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Передаваемое состояние загрузки
+         *
+         * Нужно для метода switchingDisableTab
+         * в случае, если состояние табов (active/disable)
+         * задается динамически
+         */
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Закрепленные табы
+         *
+         * Добавляет верхнее расстояние
+         * для табов для правильного отображения
+         */
+        sticky: {
+            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: ((__VLS_ctx.classes)) }, ...{ style: ((__VLS_ctx.styles)) }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("tabs-component") }, });
+    // @ts-ignore
+    [McWrapScroll, McWrapScroll,];
+    // @ts-ignore
+    const __VLS_0 = __VLS_asFunctionalComponent(McWrapScroll, new McWrapScroll({ tagName: ("ul"), role: ("tablist"), scrollable: (true), ...{ class: ("tabs-component-tabs") }, }));
+    const __VLS_1 = __VLS_0({ tagName: ("ul"), role: ("tablist"), scrollable: (true), ...{ class: ("tabs-component-tabs") }, }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+    for (const [tab, i] of __VLS_getVForSourceType((__VLS_ctx.tabs))) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.li, __VLS_intrinsicElements.li)({ key: ((i)), ...{ class: (({ 'is-active': tab.isActive, 'is-disabled': tab.isDisabled })) }, ...{ class: ("tabs-component-tab") }, role: ("presentation"), });
+        __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, modifiers: {}, value: (tab.isVisible) }, null, null);
+        __VLS_elementAsFunction(__VLS_intrinsicElements.a, __VLS_intrinsicElements.a)({ ...{ onClick: ((e) => __VLS_ctx.handleSelectTab(tab, e)) }, "aria-controls": ((tab.hash)), "aria-selected": ((tab.isActive)), href: ((tab.href || tab.hash || 'javascript:void(0)')), ...{ class: ("tabs-component-tab-a") }, role: ("tab"), });
+        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ("tabs-component-tab__tab-name") }, });
+        if (tab.iconPrepend) {
+            // @ts-ignore
+            [McSvgIcon,];
+            // @ts-ignore
+            const __VLS_5 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ((tab.iconPrepend)), color: ((tab.iconPrependColor)), }));
+            const __VLS_6 = __VLS_5({ name: ((tab.iconPrepend)), color: ((tab.iconPrependColor)), }, ...__VLS_functionalComponentArgsRest(__VLS_5));
+        }
+        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({});
+        (tab.header);
+        if (tab.iconAppend) {
+            // @ts-ignore
+            [McSvgIcon,];
+            // @ts-ignore
+            const __VLS_10 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ((tab.iconAppend)), color: ((tab.iconAppendColor)), }));
+            const __VLS_11 = __VLS_10({ name: ((tab.iconAppend)), color: ((tab.iconAppendColor)), }, ...__VLS_functionalComponentArgsRest(__VLS_10));
+        }
+    }
+    __VLS_nonNullable(__VLS_4.slots).default;
+    var __VLS_4;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("tabs-component-panels") }, });
+    var __VLS_15 = {};
+    __VLS_styleScopedClasses['tabs-component'];
+    __VLS_styleScopedClasses['tabs-component-tabs'];
+    __VLS_styleScopedClasses['is-active'];
+    __VLS_styleScopedClasses['is-disabled'];
+    __VLS_styleScopedClasses['tabs-component-tab'];
+    __VLS_styleScopedClasses['tabs-component-tab-a'];
+    __VLS_styleScopedClasses['tabs-component-tab__tab-name'];
+    __VLS_styleScopedClasses['tabs-component-panels'];
+    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 {
+            McWrapScroll: McWrapScroll,
+            McSvgIcon: McSvgIcon,
+            tabs: tabs,
+            classes: classes,
+            styles: styles,
+            handleSelectTab: handleSelectTab,
+        };
+    },
+    __typeEmits: {},
+    props: {
+        modelValue: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Размеры табов:
+         *  `body, caption, overline`
+         */
+        tabVariation: {
+            type: String,
+            default: TabVariations.Captions
+        },
+        /**
+         *  Цвет текста табов
+         */
+        color: {
+            type: String,
+            default: 'black'
+        },
+        /**
+         *  Цвет линии активного таба
+         */
+        accentColor: {
+            type: String,
+            default: 'purple'
+        },
+        /**
+         *  Заглавные буквы
+         *  табов
+         */
+        uppercase: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Передаваемое состояние загрузки
+         *
+         * Нужно для метода switchingDisableTab
+         * в случае, если состояние табов (active/disable)
+         * задается динамически
+         */
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Закрепленные табы
+         *
+         * Добавляет верхнее расстояние
+         * для табов для правильного отображения
+         */
+        sticky: {
+            type: Boolean,
+            default: false
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    __typeEmits: {},
+    props: {
+        modelValue: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Размеры табов:
+         *  `body, caption, overline`
+         */
+        tabVariation: {
+            type: String,
+            default: TabVariations.Captions
+        },
+        /**
+         *  Цвет текста табов
+         */
+        color: {
+            type: String,
+            default: 'black'
+        },
+        /**
+         *  Цвет линии активного таба
+         */
+        accentColor: {
+            type: String,
+            default: 'purple'
+        },
+        /**
+         *  Заглавные буквы
+         *  табов
+         */
+        uppercase: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Передаваемое состояние загрузки
+         *
+         * Нужно для метода switchingDisableTab
+         * в случае, если состояние табов (active/disable)
+         * задается динамически
+         */
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Закрепленные табы
+         *
+         * Добавляет верхнее расстояние
+         * для табов для правильного отображения
+         */
+        sticky: {
+            type: Boolean,
+            default: false
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */