mediacube-ui-v2 0.0.27 → 0.0.29

package/dist/src/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 : '';
+});
+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);
+    }
+});
+const showTab = () => {
+    isActive.value = true;
+};
+const hideTab = () => {
+    isActive.value = false;
+}; /* 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 */

package/dist/{types/src → src}/components/patterns/McTabs/McTabs.vue.d.ts

@@ -1,7 +1,8 @@
-import { PropType } from 'vue';
-import { ITab, TabVariationUnion } from '../../../types/ITabs';
-import { TabVariations } from '../../../enums/Tab';
-declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+import { type PropType } from 'vue';
+import type { ITab } from '@/types/ITabs';
+import { type TabVariationUnion } from '@/types/ITabs';
+import { TabVariations } from '@/enums/Tab';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<string | null>;
         default: null;
@@ -57,7 +58,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
         type: PropType<boolean>;
         default: boolean;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: string) => any;
     "tab-changed": (value: {
         tab: ITab;
@@ -65,7 +66,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     clicked: (value: {
         tab: ITab;
     }) => any;
-}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<string | null>;
         default: null;
@@ -137,7 +138,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<im
     tabVariation: TabVariationUnion;
     accentColor: "transparent" | "purple" | "hover-purple" | "light-purple" | "bg-purple" | "lighter-purple" | "black" | "outline-light" | "dark-gray" | "gray" | "outline-gray" | "hover-gray" | "bg-gray" | "white" | "hover-blue" | "blue" | "light-blue" | "lighter-blue" | "dark-orange" | "orange" | "yellow" | "dark-red" | "red" | "bright-pink" | "pale-pink" | "dark-green" | "green" | "toxic" | "ultraviolet" | "pinkish" | "azure" | "turquoise" | "darken-turquoise";
     sticky: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, HTMLDivElement>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/src/components/patterns/McTabs/McTabs.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"McTabs.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/patterns/McTabs/McTabs.vue"],"names":[],"mappings":"AAAA,OAwYO,EAAkC,KAAK,QAAQ,EAAiC,MAAM,KAAK,CAAA;AAKlG,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;;;;;;IAiZzC;;;OAGG;;;;;IAKH;;OAEG;;;;;IAKH;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;;;;;OAMG;;;;;IAKH;;;;;OAKG;;;;;;;;;;;;;;;;;;IA9CH;;;OAGG;;;;;IAKH;;OAEG;;;;;IAKH;;OAEG;;;;;IAKH;;;OAGG;;;;;IAKH;;;;;;OAMG;;;;;IAKH;;;;;OAKG;;;;;;;;;;;;;;;;;;;;;;;;AAQL,wBAAoG;AAKpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}