mediacube-ui-v2 0.0.37 → 0.0.38

package/dist/src/components/elements/McButton/McButton.vue.js

@@ -0,0 +1,1037 @@
+import { computed, ref } from 'vue';
+import { Colors } from '@/types/styles/Colors';
+import { FontWeights } from '@/types/styles/FontWeights';
+import { useTooltip } from '@/composables';
+import { TooltipPositions, TooltipSizes } from '@/enums/Tooltip';
+import { McSvgIcon } from '@/components';
+import { ButtonModifiers } from '@/enums';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const vTooltip = useTooltip();
+const buttonTooltip = computed(() => {
+    let payload = {};
+    if (props.tooltip) {
+        payload = {
+            content: props.tooltip,
+            size: TooltipSizes.M,
+            placement: props.tooltipPlacement || TooltipPositions.Top,
+        };
+    }
+    return payload;
+});
+const props = defineProps({
+    /**
+     *  Если нужна ссылка внутри приложения:
+     */
+    to: {
+        type: String,
+    },
+    /**
+     *  Если нужна обычная ссылка:
+     * `https://mediacube.agency/`
+     */
+    href: {
+        type: String,
+    },
+    /**
+     *  По умолчанию ожидается использование в `Nuxt`
+     *
+     */
+    nuxt: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     *  Отключенное состояние
+     *
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Дизэйблить не меняя внешнего вида
+     *
+     */
+    inactive: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Индикация загрузки
+     *
+     */
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Индикация загрузки
+     *  вращением иконки
+     */
+    iconLoading: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Типы:
+     *  `button, submit, reset`
+     */
+    type: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Дизайн:
+     *  `purple, red, purple-outline, purple-invert, purple-flat и т.д.`
+     */
+    variation: {
+        type: String,
+        default: 'purple'
+    },
+    /**
+     *  Размеры:
+     *  `xs, xs-compact, s, s-compact, m, m-compact, l, l-compact`
+     */
+    size: {
+        type: String,
+        default: 'm'
+    },
+    /**
+     *  Тень
+     *
+     */
+    shadow: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Круглая (применимо для *-compact size)
+     *
+     */
+    rounded: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Закругленная
+     *
+     */
+    semiRounded: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Позиция текста внутри кнопки:
+     *  `left, center, right`
+     */
+    textAlign: {
+        type: String,
+        default: 'center'
+    },
+    /**
+     *  На всю ширину
+     *
+     */
+    fullWidth: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Если нужно активное состояние
+     *
+     */
+    isActive: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  exact
+     *
+     */
+    exact: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Заглавные буквы
+     */
+    uppercase: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Тег по умолчанию
+     */
+    defaultTag: {
+        type: String,
+        default: 'button'
+    },
+    /**
+     * Если нужен другой цвет при взаимодействии
+     */
+    secondaryColor: {
+        type: String,
+        default: null
+    },
+    /**
+     * Если нужна подчёркнутая ссылка
+     */
+    underlineLink: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Если нужен постоянный
+     * фон у типа 'flat'
+     */
+    bgFlat: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Жирность шрифта:
+     * `normal, medium, semi-bold`
+     */
+    weight: {
+        type: String,
+        default: 'semi-bold'
+    },
+    /**
+     * Тултип при наличии
+     */
+    tooltip: {
+        type: String,
+        default: null
+    },
+    tooltipPlacement: {
+        type: String,
+        default: null,
+    },
+    /**
+     * Атрибут tabindex для главного элемента
+     *
+     */
+    tabindex: {
+        type: [String, Number]
+    }
+});
+const mcButton = ref(null);
+const emit = defineEmits(['blur', 'click']);
+const classes = computed(() => {
+    return {
+        [`mc-button--variation-${props.variation}`]: !!props.variation,
+        [`mc-button--size-${props.size}`]: !!props.size,
+        [`mc-button--text-align-${props.textAlign}`]: !!props.textAlign,
+        'mc-button--loading': !!props.loading,
+        'mc-button--icon-loading': !!props.iconLoading,
+        'mc-button--is-active': !!props.isActive,
+        'mc-button--disabled': !!props.disabled,
+        'mc-button--rounded': props.rounded && /-compact$/.test(props.size),
+        'mc-button--semi-rounded': !!props.semiRounded,
+        'mc-button--full-width': !!props.fullWidth,
+        'mc-button--uppercase': !!props.uppercase,
+        'mc-button--shadow': !!props.shadow,
+        'mc-button--secondary-color': !!props.secondaryColor,
+        'mc-button--underline-link': !!props.underlineLink,
+        'mc-button--bg-flat': !!props.bgFlat,
+        [`mc-button--type-${buttonVariation.value.type}`]: !!buttonVariation.value.type,
+        'mc-button--inactive': !!props.inactive
+    };
+});
+const buttonVariation = computed(() => {
+    const variation = props.variation;
+    const texts = variation.split('-');
+    const currentStyle = texts[texts.length - 1];
+    let color = variation.replace(`-${currentStyle}`, '');
+    switch (currentStyle) {
+        case ButtonModifiers.Link:
+        case ButtonModifiers.Flat:
+        case ButtonModifiers.Outline:
+        case ButtonModifiers.Invert: {
+            break;
+        }
+        default: {
+            color = variation;
+            break;
+        }
+    }
+    return {
+        color: color,
+        type: currentStyle
+    };
+});
+const styles = computed(() => {
+    let hoverBrightness;
+    let textColor;
+    switch (buttonVariation.value.type) {
+        case ButtonModifiers.Link:
+        case ButtonModifiers.Flat:
+        case ButtonModifiers.Outline:
+        case ButtonModifiers.Invert: {
+            break;
+        }
+        default: {
+            switch (buttonVariation.value.color) {
+                case 'yellow':
+                case 'white': {
+                    hoverBrightness = '0.9';
+                    break;
+                }
+                case 'toxic': {
+                    break;
+                }
+                default: {
+                    textColor = 'white';
+                }
+            }
+            break;
+        }
+    }
+    return {
+        '--mc-button-secondary-color': props.secondaryColor && Colors[props.secondaryColor],
+        '--mc-button-background-color': props.variation && Colors[buttonVariation.value.color],
+        '--mc-button-font-weight': props.weight && FontWeights[props.weight],
+        '--mc-button-hover-brightness': hoverBrightness,
+        '--mc-button-text-color': textColor && Colors[textColor]
+    };
+});
+const tag = computed(() => {
+    if (props.to) {
+        return props.nuxt ? 'nuxt-link' : 'router-link';
+    }
+    else if (props.href) {
+        return 'a';
+    }
+    return props.defaultTag;
+});
+const isVariationLink = computed(() => {
+    return buttonVariation.value.type === ButtonModifiers.Link;
+});
+const tagBind = computed(() => {
+    let result = {
+        to: props.to,
+        href: props.href,
+        disabled: false,
+        rel: '',
+        type: props.type,
+        tabindex: props.tabindex
+    };
+    if (props.to) {
+        delete result.href;
+    }
+    else if (props.href) {
+        delete result.to;
+    }
+    else if (props.disabled || props.loading) {
+        result.disabled = true;
+    }
+    if (isVariationLink.value)
+        result.rel = 'noreferrer';
+    return result;
+});
+const handleBlur = (e) => {
+    emit('blur', e);
+};
+const handleClick = (e) => {
+    emit('click', e);
+}; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Если нужна ссылка внутри приложения:
+         */
+        to: {
+            type: String,
+        },
+        /**
+         *  Если нужна обычная ссылка:
+         * `https://mediacube.agency/`
+         */
+        href: {
+            type: String,
+        },
+        /**
+         *  По умолчанию ожидается использование в `Nuxt`
+         *
+         */
+        nuxt: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Дизэйблить не меняя внешнего вида
+         *
+         */
+        inactive: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Индикация загрузки
+         *
+         */
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Индикация загрузки
+         *  вращением иконки
+         */
+        iconLoading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Типы:
+         *  `button, submit, reset`
+         */
+        type: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Дизайн:
+         *  `purple, red, purple-outline, purple-invert, purple-flat и т.д.`
+         */
+        variation: {
+            type: String,
+            default: 'purple'
+        },
+        /**
+         *  Размеры:
+         *  `xs, xs-compact, s, s-compact, m, m-compact, l, l-compact`
+         */
+        size: {
+            type: String,
+            default: 'm'
+        },
+        /**
+         *  Тень
+         *
+         */
+        shadow: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Круглая (применимо для *-compact size)
+         *
+         */
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Закругленная
+         *
+         */
+        semiRounded: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Позиция текста внутри кнопки:
+         *  `left, center, right`
+         */
+        textAlign: {
+            type: String,
+            default: 'center'
+        },
+        /**
+         *  На всю ширину
+         *
+         */
+        fullWidth: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Если нужно активное состояние
+         *
+         */
+        isActive: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  exact
+         *
+         */
+        exact: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Заглавные буквы
+         */
+        uppercase: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Тег по умолчанию
+         */
+        defaultTag: {
+            type: String,
+            default: 'button'
+        },
+        /**
+         * Если нужен другой цвет при взаимодействии
+         */
+        secondaryColor: {
+            type: String,
+            default: null
+        },
+        /**
+         * Если нужна подчёркнутая ссылка
+         */
+        underlineLink: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Если нужен постоянный
+         * фон у типа 'flat'
+         */
+        bgFlat: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Жирность шрифта:
+         * `normal, medium, semi-bold`
+         */
+        weight: {
+            type: String,
+            default: 'semi-bold'
+        },
+        /**
+         * Тултип при наличии
+         */
+        tooltip: {
+            type: String,
+            default: null
+        },
+        tooltipPlacement: {
+            type: String,
+            default: null,
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         *
+         */
+        tabindex: {
+            type: [String, Number]
+        }
+    },
+    emits: {},
+});
+;
+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;
+    const __VLS_0 = ((__VLS_ctx.tag));
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent(__VLS_0, new __VLS_0({ ...{ 'onBlur': {} }, ...{ 'onClick': {} }, ref: ((__VLS_ctx.mcButton)), ...({ ...__VLS_ctx.tagBind }), ...{ class: ("mc-button") }, ...{ class: ((__VLS_ctx.classes)) }, exact: ((__VLS_ctx.exact)), ...{ style: ((__VLS_ctx.styles)) }, }));
+    const __VLS_2 = __VLS_1({ ...{ 'onBlur': {} }, ...{ 'onClick': {} }, ref: ((__VLS_ctx.mcButton)), ...({ ...__VLS_ctx.tagBind }), ...{ class: ("mc-button") }, ...{ class: ((__VLS_ctx.classes)) }, exact: ((__VLS_ctx.exact)), ...{ style: ((__VLS_ctx.styles)) }, }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    __VLS_asFunctionalDirective(__VLS_directives.vTooltip)(null, { ...__VLS_directiveBindingRestFields, modifiers: {}, value: (__VLS_ctx.buttonTooltip) }, null, null);
+    var __VLS_6 = {};
+    let __VLS_7;
+    const __VLS_8 = {
+        onBlur: (__VLS_ctx.handleBlur)
+    };
+    const __VLS_9 = {
+        onClick: (__VLS_ctx.handleClick)
+    };
+    let __VLS_3;
+    let __VLS_4;
+    if (__VLS_ctx.$slots['icon-prepend']) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ("mc-button__prepend") }, });
+        var __VLS_10 = {};
+    }
+    if (__VLS_ctx.loading) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ("mc-button__loader") }, });
+        const __VLS_11 = __VLS_resolvedLocalAndGlobalComponents.McSvgIcon;
+        /** @type { [typeof __VLS_components.McSvgIcon, typeof __VLS_components.mcSvgIcon, ] } */
+        // @ts-ignore
+        const __VLS_12 = __VLS_asFunctionalComponent(__VLS_11, new __VLS_11({ ...{ class: ("mc-button__loader-icon") }, type: ("div"), name: ("loader"), }));
+        const __VLS_13 = __VLS_12({ ...{ class: ("mc-button__loader-icon") }, type: ("div"), name: ("loader"), }, ...__VLS_functionalComponentArgsRest(__VLS_12));
+    }
+    if (__VLS_ctx.$slots.default) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ("mc-button__text") }, });
+        var __VLS_17 = {};
+    }
+    if (__VLS_ctx.$slots['icon-append']) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ("mc-button__append") }, });
+        var __VLS_18 = {};
+    }
+    if (!__VLS_ctx.isVariationLink) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div)({ ...{ class: ("mc-button__background") }, });
+    }
+    __VLS_nonNullable(__VLS_5.slots).default;
+    var __VLS_5;
+    __VLS_styleScopedClasses['mc-button'];
+    __VLS_styleScopedClasses['mc-button__prepend'];
+    __VLS_styleScopedClasses['mc-button__loader'];
+    __VLS_styleScopedClasses['mc-button__loader-icon'];
+    __VLS_styleScopedClasses['mc-button__text'];
+    __VLS_styleScopedClasses['mc-button__append'];
+    __VLS_styleScopedClasses['mc-button__background'];
+    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 {
+            McSvgIcon: McSvgIcon,
+            vTooltip: vTooltip,
+            buttonTooltip: buttonTooltip,
+            mcButton: mcButton,
+            classes: classes,
+            styles: styles,
+            tag: tag,
+            isVariationLink: isVariationLink,
+            tagBind: tagBind,
+            handleBlur: handleBlur,
+            handleClick: handleClick,
+        };
+    },
+    emits: {},
+    props: {
+        /**
+         *  Если нужна ссылка внутри приложения:
+         */
+        to: {
+            type: String,
+        },
+        /**
+         *  Если нужна обычная ссылка:
+         * `https://mediacube.agency/`
+         */
+        href: {
+            type: String,
+        },
+        /**
+         *  По умолчанию ожидается использование в `Nuxt`
+         *
+         */
+        nuxt: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Дизэйблить не меняя внешнего вида
+         *
+         */
+        inactive: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Индикация загрузки
+         *
+         */
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Индикация загрузки
+         *  вращением иконки
+         */
+        iconLoading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Типы:
+         *  `button, submit, reset`
+         */
+        type: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Дизайн:
+         *  `purple, red, purple-outline, purple-invert, purple-flat и т.д.`
+         */
+        variation: {
+            type: String,
+            default: 'purple'
+        },
+        /**
+         *  Размеры:
+         *  `xs, xs-compact, s, s-compact, m, m-compact, l, l-compact`
+         */
+        size: {
+            type: String,
+            default: 'm'
+        },
+        /**
+         *  Тень
+         *
+         */
+        shadow: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Круглая (применимо для *-compact size)
+         *
+         */
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Закругленная
+         *
+         */
+        semiRounded: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Позиция текста внутри кнопки:
+         *  `left, center, right`
+         */
+        textAlign: {
+            type: String,
+            default: 'center'
+        },
+        /**
+         *  На всю ширину
+         *
+         */
+        fullWidth: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Если нужно активное состояние
+         *
+         */
+        isActive: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  exact
+         *
+         */
+        exact: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Заглавные буквы
+         */
+        uppercase: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Тег по умолчанию
+         */
+        defaultTag: {
+            type: String,
+            default: 'button'
+        },
+        /**
+         * Если нужен другой цвет при взаимодействии
+         */
+        secondaryColor: {
+            type: String,
+            default: null
+        },
+        /**
+         * Если нужна подчёркнутая ссылка
+         */
+        underlineLink: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Если нужен постоянный
+         * фон у типа 'flat'
+         */
+        bgFlat: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Жирность шрифта:
+         * `normal, medium, semi-bold`
+         */
+        weight: {
+            type: String,
+            default: 'semi-bold'
+        },
+        /**
+         * Тултип при наличии
+         */
+        tooltip: {
+            type: String,
+            default: null
+        },
+        tooltipPlacement: {
+            type: String,
+            default: null,
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         *
+         */
+        tabindex: {
+            type: [String, Number]
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    emits: {},
+    props: {
+        /**
+         *  Если нужна ссылка внутри приложения:
+         */
+        to: {
+            type: String,
+        },
+        /**
+         *  Если нужна обычная ссылка:
+         * `https://mediacube.agency/`
+         */
+        href: {
+            type: String,
+        },
+        /**
+         *  По умолчанию ожидается использование в `Nuxt`
+         *
+         */
+        nuxt: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Дизэйблить не меняя внешнего вида
+         *
+         */
+        inactive: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Индикация загрузки
+         *
+         */
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Индикация загрузки
+         *  вращением иконки
+         */
+        iconLoading: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Типы:
+         *  `button, submit, reset`
+         */
+        type: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Дизайн:
+         *  `purple, red, purple-outline, purple-invert, purple-flat и т.д.`
+         */
+        variation: {
+            type: String,
+            default: 'purple'
+        },
+        /**
+         *  Размеры:
+         *  `xs, xs-compact, s, s-compact, m, m-compact, l, l-compact`
+         */
+        size: {
+            type: String,
+            default: 'm'
+        },
+        /**
+         *  Тень
+         *
+         */
+        shadow: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Круглая (применимо для *-compact size)
+         *
+         */
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Закругленная
+         *
+         */
+        semiRounded: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Позиция текста внутри кнопки:
+         *  `left, center, right`
+         */
+        textAlign: {
+            type: String,
+            default: 'center'
+        },
+        /**
+         *  На всю ширину
+         *
+         */
+        fullWidth: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Если нужно активное состояние
+         *
+         */
+        isActive: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  exact
+         *
+         */
+        exact: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Заглавные буквы
+         */
+        uppercase: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Тег по умолчанию
+         */
+        defaultTag: {
+            type: String,
+            default: 'button'
+        },
+        /**
+         * Если нужен другой цвет при взаимодействии
+         */
+        secondaryColor: {
+            type: String,
+            default: null
+        },
+        /**
+         * Если нужна подчёркнутая ссылка
+         */
+        underlineLink: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Если нужен постоянный
+         * фон у типа 'flat'
+         */
+        bgFlat: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Жирность шрифта:
+         * `normal, medium, semi-bold`
+         */
+        weight: {
+            type: String,
+            default: 'semi-bold'
+        },
+        /**
+         * Тултип при наличии
+         */
+        tooltip: {
+            type: String,
+            default: null
+        },
+        tooltipPlacement: {
+            type: String,
+            default: null,
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         *
+         */
+        tabindex: {
+            type: [String, Number]
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */