mediacube-ui-v2 0.0.7 → 0.0.9

package/dist/components/elements/McProgress/McProgress.vue.js

@@ -0,0 +1,361 @@
+import { computed } from 'vue';
+import { Colors } from '@/types/styles/Colors';
+import { useFieldErrors } from '@/composables/useFieldErrors';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    /**
+     *  Процент
+     *
+     */
+    percent: {
+        type: Number,
+        default: 0
+    },
+    /**
+     *  Число для отображения, если не укказано, используется процент
+     *
+     */
+    amount: {
+        type: [String, Number, Boolean],
+        default: null
+    },
+    /**
+     *  Цвет
+     *
+     */
+    color: {
+        type: String,
+        default: 'dark-gray'
+    },
+    /**
+     *  Цвет текста
+     *
+     */
+    helpTextColor: {
+        type: String,
+        default: 'gray'
+    },
+    /**
+     *  Вспомогательный текст
+     */
+    helpText: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Ошибки
+     */
+    errors: {
+        type: Array,
+        default: () => []
+    },
+    /**
+     *  Поменять местами подписи
+     */
+    reverseHeaders: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Использовать моноширинный шрифт для percent и amount
+     */
+    monospaceNumbers: {
+        type: Boolean,
+        default: false
+    }
+});
+const fieldErrors = useFieldErrors(props.errors);
+const wrapperClasses = computed(() => ({
+    'mc-progress': true,
+    'mc-progress--error': fieldErrors.errorText.value
+}));
+const topClasses = computed(() => ({
+    'mc-progress__top': true,
+    'mc-progress__top--reverse-headers': props.reverseHeaders
+}));
+const percentClasses = computed(() => ({
+    'mc-progress__percent': true,
+    'mc-progress__percent--monospace': props.monospaceNumbers
+}));
+const lineClasses = computed(() => ({
+    'mc-progress__line': true
+}));
+const styles = computed(() => {
+    return {
+        '--mc-progress-color': Colors[props.color]
+    };
+});
+const helpTextStyles = computed(() => {
+    return {
+        '--mc-progress-help-text-color': Colors[props.helpTextColor]
+    };
+});
+const lineStyles = computed(() => {
+    return {
+        width: `${fieldErrors.errorText.value ? 2 : Math.sign(props.percent) > 0 ? props.percent : 0}%`
+    };
+});
+const percentValue = computed(() => {
+    if (fieldErrors.errorText.value)
+        return 0;
+    return props.amount ?? `${props.percent}%`;
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Процент
+         *
+         */
+        percent: {
+            type: Number,
+            default: 0
+        },
+        /**
+         *  Число для отображения, если не укказано, используется процент
+         *
+         */
+        amount: {
+            type: [String, Number, Boolean],
+            default: null
+        },
+        /**
+         *  Цвет
+         *
+         */
+        color: {
+            type: String,
+            default: 'dark-gray'
+        },
+        /**
+         *  Цвет текста
+         *
+         */
+        helpTextColor: {
+            type: String,
+            default: 'gray'
+        },
+        /**
+         *  Вспомогательный текст
+         */
+        helpText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Ошибки
+         */
+        errors: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Поменять местами подписи
+         */
+        reverseHeaders: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Использовать моноширинный шрифт для percent и amount
+         */
+        monospaceNumbers: {
+            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;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ((__VLS_ctx.wrapperClasses)) }, ...{ style: ((__VLS_ctx.styles)) }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ((__VLS_ctx.topClasses)) }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ((__VLS_ctx.percentClasses)) }, });
+    (__VLS_ctx.percentValue);
+    if (props.helpText) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-progress__help-text") }, ...{ style: ((__VLS_ctx.helpTextStyles)) }, });
+        (props.helpText);
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-progress__wrapper-line") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ((__VLS_ctx.lineClasses)) }, ...{ style: ((__VLS_ctx.lineStyles)) }, });
+    if (__VLS_ctx.fieldErrors.errorText.value) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-progress__errors-container") }, });
+        (__VLS_ctx.fieldErrors.errorText.value);
+    }
+    __VLS_styleScopedClasses['mc-progress__help-text'];
+    __VLS_styleScopedClasses['mc-progress__wrapper-line'];
+    __VLS_styleScopedClasses['mc-progress__errors-container'];
+    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 {
+            fieldErrors: fieldErrors,
+            wrapperClasses: wrapperClasses,
+            topClasses: topClasses,
+            percentClasses: percentClasses,
+            lineClasses: lineClasses,
+            styles: styles,
+            helpTextStyles: helpTextStyles,
+            lineStyles: lineStyles,
+            percentValue: percentValue,
+        };
+    },
+    props: {
+        /**
+         *  Процент
+         *
+         */
+        percent: {
+            type: Number,
+            default: 0
+        },
+        /**
+         *  Число для отображения, если не укказано, используется процент
+         *
+         */
+        amount: {
+            type: [String, Number, Boolean],
+            default: null
+        },
+        /**
+         *  Цвет
+         *
+         */
+        color: {
+            type: String,
+            default: 'dark-gray'
+        },
+        /**
+         *  Цвет текста
+         *
+         */
+        helpTextColor: {
+            type: String,
+            default: 'gray'
+        },
+        /**
+         *  Вспомогательный текст
+         */
+        helpText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Ошибки
+         */
+        errors: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Поменять местами подписи
+         */
+        reverseHeaders: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Использовать моноширинный шрифт для percent и amount
+         */
+        monospaceNumbers: {
+            type: Boolean,
+            default: false
+        }
+    },
+});
+export default (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        /**
+         *  Процент
+         *
+         */
+        percent: {
+            type: Number,
+            default: 0
+        },
+        /**
+         *  Число для отображения, если не укказано, используется процент
+         *
+         */
+        amount: {
+            type: [String, Number, Boolean],
+            default: null
+        },
+        /**
+         *  Цвет
+         *
+         */
+        color: {
+            type: String,
+            default: 'dark-gray'
+        },
+        /**
+         *  Цвет текста
+         *
+         */
+        helpTextColor: {
+            type: String,
+            default: 'gray'
+        },
+        /**
+         *  Вспомогательный текст
+         */
+        helpText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Ошибки
+         */
+        errors: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Поменять местами подписи
+         */
+        reverseHeaders: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Использовать моноширинный шрифт для percent и amount
+         */
+        monospaceNumbers: {
+            type: Boolean,
+            default: false
+        }
+    },
+    __typeEl: {},
+});
+; /* PartiallyEnd: #4569/main.vue */

package/dist/components/elements/McSeparator/McSeparator.vue.js

@@ -0,0 +1,325 @@
+import { computed } from 'vue';
+import { Colors } from '@/types/styles/Colors';
+import { Spaces } from '@/types/styles/Spaces';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const props = defineProps({
+    /**
+     * Толщина `s, m`
+     */
+    weight: {
+        type: String,
+        default: 's',
+    },
+    /**
+     * Цвет (токены)
+     */
+    color: {
+        type: String,
+        default: 'outline-gray',
+    },
+    /**
+     * Отступ слева и справа: 50, 200... ...1000
+     */
+    indentX: {
+        type: String,
+        default: '',
+    },
+    /**
+     * Отступ сверху и снизу: 50, 200... ...1000
+     */
+    indentY: {
+        type: String,
+        default: '',
+    },
+    /**
+     * Отступ сверху: 50, 200... ...1000
+     */
+    indentTop: {
+        type: String,
+        default: '',
+    },
+    /**
+     * Отступ снизу: 50, 200... ...1000
+     */
+    indentBottom: {
+        type: String,
+        default: '',
+    },
+    /**
+     * Отступ слева: 50, 200... ...1000
+     */
+    indentLeft: {
+        type: String,
+        default: '',
+    },
+    /**
+     * Отступ справа: 50, 200... ...1000
+     */
+    indentRight: {
+        type: String,
+        default: '',
+    },
+});
+const indents = computed(() => ({
+    top: props.indentTop || props.indentY,
+    bottom: props.indentBottom || props.indentY,
+    left: props.indentLeft || props.indentX,
+    right: props.indentRight || props.indentX,
+}));
+const classes = computed(() => ({
+    'mc-separator': true,
+}));
+const styles = computed(() => {
+    let style = {};
+    if (props.color)
+        style['--mc-separator-color'] = Colors[props.color];
+    if (indents.value.top)
+        style['--mc-separator-indent-top'] = Spaces[indents.value.top];
+    if (indents.value.bottom)
+        style['--mc-separator-indent-bottom'] = Spaces[indents.value.bottom];
+    if (indents.value.left)
+        style['--mc-separator-indent-left'] = Spaces[indents.value.left];
+    if (indents.value.right)
+        style['--mc-separator-indent-right'] = Spaces[indents.value.right];
+    let weight;
+    switch (props.weight) {
+        case 's': {
+            weight = '1px';
+            break;
+        }
+        case 'm': {
+            weight = '2px';
+        }
+    }
+    if (weight)
+        style['--mc-separator-weight'] = weight;
+    return style;
+}); /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         * Толщина `s, m`
+         */
+        weight: {
+            type: String,
+            default: 's',
+        },
+        /**
+         * Цвет (токены)
+         */
+        color: {
+            type: String,
+            default: 'outline-gray',
+        },
+        /**
+         * Отступ слева и справа: 50, 200... ...1000
+         */
+        indentX: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ сверху и снизу: 50, 200... ...1000
+         */
+        indentY: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ сверху: 50, 200... ...1000
+         */
+        indentTop: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ снизу: 50, 200... ...1000
+         */
+        indentBottom: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ слева: 50, 200... ...1000
+         */
+        indentLeft: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ справа: 50, 200... ...1000
+         */
+        indentRight: {
+            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.div, __VLS_intrinsicElements.div)({ ...{ class: ((__VLS_ctx.classes)) }, ...{ style: ((__VLS_ctx.styles)) }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-separator__wrapper") }, });
+    var __VLS_0 = {};
+    __VLS_styleScopedClasses['mc-separator__wrapper'];
+    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 {
+            classes: classes,
+            styles: styles,
+        };
+    },
+    props: {
+        /**
+         * Толщина `s, m`
+         */
+        weight: {
+            type: String,
+            default: 's',
+        },
+        /**
+         * Цвет (токены)
+         */
+        color: {
+            type: String,
+            default: 'outline-gray',
+        },
+        /**
+         * Отступ слева и справа: 50, 200... ...1000
+         */
+        indentX: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ сверху и снизу: 50, 200... ...1000
+         */
+        indentY: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ сверху: 50, 200... ...1000
+         */
+        indentTop: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ снизу: 50, 200... ...1000
+         */
+        indentBottom: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ слева: 50, 200... ...1000
+         */
+        indentLeft: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ справа: 50, 200... ...1000
+         */
+        indentRight: {
+            type: String,
+            default: '',
+        },
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    props: {
+        /**
+         * Толщина `s, m`
+         */
+        weight: {
+            type: String,
+            default: 's',
+        },
+        /**
+         * Цвет (токены)
+         */
+        color: {
+            type: String,
+            default: 'outline-gray',
+        },
+        /**
+         * Отступ слева и справа: 50, 200... ...1000
+         */
+        indentX: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ сверху и снизу: 50, 200... ...1000
+         */
+        indentY: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ сверху: 50, 200... ...1000
+         */
+        indentTop: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ снизу: 50, 200... ...1000
+         */
+        indentBottom: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ слева: 50, 200... ...1000
+         */
+        indentLeft: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ справа: 50, 200... ...1000
+         */
+        indentRight: {
+            type: String,
+            default: '',
+        },
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */