mediacube-ui-v2 0.0.7 → 0.0.9

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

@@ -0,0 +1,518 @@
+import { computed, ref, inject, onMounted, useAttrs } from 'vue';
+import { Colors } from '@/types/styles/Colors';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const selfRegisterTabToMcTabs = inject('selfRegisterTabMethod', () => { });
+const attrs = useAttrs();
+const props = defineProps({
+    /**
+     *  Если нужен иной фрагмент в url после #
+     *  (по умолчанию берётся из 'name')
+     */
+    id: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Имя таба (unique)
+     */
+    name: {
+        type: String,
+        required: true,
+        default: ''
+    },
+    /**
+     *  Вставка в начало имени таба
+     *  (не влияет на значение вставленное в url)
+     */
+    prefix: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Вставка в конец имени таба
+     *  (не влияет на значение вставленное в url)
+     */
+    suffix: {
+        type: String,
+        default: ''
+    },
+    appendCount: {
+        type: Number,
+        default: null
+    },
+    appendCountColor: {
+        type: String,
+        default: 'black'
+    },
+    /**
+     *  Отключенное состояние
+     */
+    isDisabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Виден ли таб
+     */
+    visible: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     *  Классы иконки в начале
+     */
+    iconPrepend: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Классы иконки в конце
+     */
+    iconAppend: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Цвет иконки в начале
+     */
+    iconPrependColor: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Цвет иконки в конце
+     */
+    iconAppendColor: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Если нужна ссылка внутри приложения:
+     * `{name: 'test', params: { id: test.id }}`
+     */
+    to: {
+        type: Object,
+        default: null
+    },
+    /**
+     *  Если нужна обычная ссылка:
+     * `https://mediacube.agency/`
+     */
+    href: {
+        type: String,
+        default: ''
+    }
+});
+const isActive = ref(false);
+const isVisible = ref(true);
+const computedId = computed(() => {
+    return props.id ? props.id : props.name.toLowerCase().replace(/ /g, '-');
+});
+const hash = computed(() => {
+    return props.isDisabled ? '#' : `#${computedId.value}`;
+});
+const hasAppendCount = computed(() => {
+    return !!props.appendCount || props.appendCount === 0;
+});
+const appendCountStyles = computed(() => {
+    return `--mc-tab-append-count-color: ${Colors[props.appendCountColor]}`;
+});
+const computedTabName = computed(() => {
+    return [props.prefix, props.name, props.suffix].filter(Boolean).join('');
+});
+const header = computed(() => {
+    return props.visible ? computedTabName.value : '';
+});
+const showTab = () => {
+    isActive.value = true;
+};
+const hideTab = () => {
+    isActive.value = false;
+};
+onMounted(() => {
+    if (selfRegisterTabToMcTabs) {
+        const payload = {
+            isActive: isActive.value,
+            isVisible: isVisible.value,
+            computedId: computedId.value,
+            hash: hash.value,
+            hasAppendCount: hasAppendCount.value,
+            appendCountStyles: appendCountStyles.value,
+            header: header.value,
+            id: props.id,
+            name: props.name,
+            to: props.to,
+            href: props.href,
+            iconAppendColor: props.iconAppendColor,
+            iconPrependColor: props.iconPrependColor,
+            iconAppend: props.iconAppend,
+            iconPrepend: props.iconPrepend,
+            visible: props.visible,
+            isDisabled: props.isDisabled,
+            appendCountColor: props.appendCountColor,
+            appendCount: props.appendCount,
+            suffix: props.suffix,
+            prefix: props.prefix,
+            showTab,
+            hideTab,
+            onClick: attrs.onClick,
+            ...attrs
+        };
+        selfRegisterTabToMcTabs(payload);
+    }
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Если нужен иной фрагмент в url после #
+         *  (по умолчанию берётся из 'name')
+         */
+        id: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Имя таба (unique)
+         */
+        name: {
+            type: String,
+            required: true,
+            default: ''
+        },
+        /**
+         *  Вставка в начало имени таба
+         *  (не влияет на значение вставленное в url)
+         */
+        prefix: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Вставка в конец имени таба
+         *  (не влияет на значение вставленное в url)
+         */
+        suffix: {
+            type: String,
+            default: ''
+        },
+        appendCount: {
+            type: Number,
+            default: null
+        },
+        appendCountColor: {
+            type: String,
+            default: 'black'
+        },
+        /**
+         *  Отключенное состояние
+         */
+        isDisabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Виден ли таб
+         */
+        visible: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         *  Классы иконки в начале
+         */
+        iconPrepend: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Классы иконки в конце
+         */
+        iconAppend: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Цвет иконки в начале
+         */
+        iconPrependColor: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Цвет иконки в конце
+         */
+        iconAppendColor: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Если нужна ссылка внутри приложения:
+         * `{name: 'test', params: { id: test.id }}`
+         */
+        to: {
+            type: Object,
+            default: null
+        },
+        /**
+         *  Если нужна обычная ссылка:
+         * `https://mediacube.agency/`
+         */
+        href: {
+            type: String,
+            default: ''
+        }
+    },
+});
+;
+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.section, __VLS_intrinsicElements.section)({ id: ((__VLS_ctx.id)), "aria-hidden": ((!__VLS_ctx.isActive)), ...{ class: ("tabs-component-panel") }, role: ("tabpanel"), href: ((__VLS_ctx.href)), to: ((__VLS_ctx.to)), });
+    __VLS_asFunctionalDirective(__VLS_directives.vShow)(null, { ...__VLS_directiveBindingRestFields, modifiers: {}, value: (__VLS_ctx.isActive) }, null, null);
+    if (__VLS_ctx.visible) {
+        var __VLS_0 = {};
+    }
+    __VLS_styleScopedClasses['tabs-component-panel'];
+    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 {
+            isActive: isActive,
+        };
+    },
+    props: {
+        /**
+         *  Если нужен иной фрагмент в url после #
+         *  (по умолчанию берётся из 'name')
+         */
+        id: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Имя таба (unique)
+         */
+        name: {
+            type: String,
+            required: true,
+            default: ''
+        },
+        /**
+         *  Вставка в начало имени таба
+         *  (не влияет на значение вставленное в url)
+         */
+        prefix: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Вставка в конец имени таба
+         *  (не влияет на значение вставленное в url)
+         */
+        suffix: {
+            type: String,
+            default: ''
+        },
+        appendCount: {
+            type: Number,
+            default: null
+        },
+        appendCountColor: {
+            type: String,
+            default: 'black'
+        },
+        /**
+         *  Отключенное состояние
+         */
+        isDisabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Виден ли таб
+         */
+        visible: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         *  Классы иконки в начале
+         */
+        iconPrepend: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Классы иконки в конце
+         */
+        iconAppend: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Цвет иконки в начале
+         */
+        iconPrependColor: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Цвет иконки в конце
+         */
+        iconAppendColor: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Если нужна ссылка внутри приложения:
+         * `{name: 'test', params: { id: test.id }}`
+         */
+        to: {
+            type: Object,
+            default: null
+        },
+        /**
+         *  Если нужна обычная ссылка:
+         * `https://mediacube.agency/`
+         */
+        href: {
+            type: String,
+            default: ''
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        /**
+         *  Если нужен иной фрагмент в url после #
+         *  (по умолчанию берётся из 'name')
+         */
+        id: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Имя таба (unique)
+         */
+        name: {
+            type: String,
+            required: true,
+            default: ''
+        },
+        /**
+         *  Вставка в начало имени таба
+         *  (не влияет на значение вставленное в url)
+         */
+        prefix: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Вставка в конец имени таба
+         *  (не влияет на значение вставленное в url)
+         */
+        suffix: {
+            type: String,
+            default: ''
+        },
+        appendCount: {
+            type: Number,
+            default: null
+        },
+        appendCountColor: {
+            type: String,
+            default: 'black'
+        },
+        /**
+         *  Отключенное состояние
+         */
+        isDisabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Виден ли таб
+         */
+        visible: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         *  Классы иконки в начале
+         */
+        iconPrepend: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Классы иконки в конце
+         */
+        iconAppend: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Цвет иконки в начале
+         */
+        iconPrependColor: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Цвет иконки в конце
+         */
+        iconAppendColor: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Если нужна ссылка внутри приложения:
+         * `{name: 'test', params: { id: test.id }}`
+         */
+        to: {
+            type: Object,
+            default: null
+        },
+        /**
+         *  Если нужна обычная ссылка:
+         * `https://mediacube.agency/`
+         */
+        href: {
+            type: String,
+            default: ''
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */