mediacube-ui-v2 0.0.7 → 0.0.9

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

@@ -0,0 +1,489 @@
+import McTitle from '../McTitle/McTitle.vue';
+import McSvgIcon from '../McSvgIcon/McSvgIcon.vue';
+import { computed, useSlots, watch } from 'vue';
+import { useFieldErrors } from '@/composables/useFieldErrors';
+import { Directions } from '@/enums/ui/Directions';
+import { TitleVariations } from '@/enums';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const slots = useSlots();
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    /**
+     *  Значение
+     */
+    modelValue: {
+        default: null
+    },
+    value: {
+        default: null
+    },
+    /**
+     *  Name
+     */
+    name: {
+        type: String,
+        required: true
+    },
+    /**
+     *  Подпись радио:
+     *
+     */
+    label: {
+        type: [String, Number],
+        default: null
+    },
+    /**
+     *  Вспомогательный текст под инпутом:
+     *
+     */
+    helpText: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Ошибки
+     *
+     */
+    errors: {
+        type: Array,
+        default: null
+    },
+    /**
+     *  Отключенное состояние
+     *
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     * Атрибут tabindex для главного элемента
+     *
+     */
+    tabindex: {
+        type: [String, Number]
+    },
+    /**
+     * Вариант активного состояния
+     * circle - внутри круг
+     * checkmark - внутри галочка
+     * */
+    variation: {
+        type: String,
+        default: 'circle'
+    },
+    /**
+     * цвет
+     */
+    color: {
+        type: String,
+        default: 'purple'
+    },
+    iconSize: {
+        type: String,
+        default: '250'
+    },
+    dir: {
+        type: String,
+        default: Directions.Ltr
+    }
+});
+const fieldErrors = useFieldErrors(props.errors);
+const classes = computed(() => {
+    return {
+        'mc-field-radio-button--disabled': props.disabled,
+        'mc-field-radio-button--empty': !props.label && !slots.default,
+        'mc-field-radio-button--rtl': rtl.value
+    };
+});
+const rtl = computed(() => {
+    return props.dir === Directions.Rtl;
+});
+const activeIcon = computed(() => {
+    switch (props.variation) {
+        case 'checkmark': {
+            return 'check_circle_solid';
+        }
+        default: {
+            return 'radio--checked';
+        }
+    }
+});
+const iconColor = computed(() => {
+    switch (true) {
+        case props.disabled:
+            return 'outline-gray';
+        case inputProps.value.checked:
+            return props.color;
+        default:
+            return 'gray';
+    }
+});
+const inputProps = computed(() => {
+    return {
+        disabled: props.disabled,
+        value: props.modelValue,
+        name: props.name,
+        checked: props.value && props.value === props.modelValue,
+        tabindex: props.tabindex,
+        class: 'mc-field-radio-button__input',
+        type: 'radio'
+    };
+});
+watch(() => props.modelValue, () => {
+    fieldErrors.toggleErrorVisible();
+});
+const handleChange = () => {
+    emit('update:modelValue', props.value);
+}; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        /**
+         *  Значение
+         */
+        modelValue: {
+            default: null
+        },
+        value: {
+            default: null
+        },
+        /**
+         *  Name
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  Подпись радио:
+         *
+         */
+        label: {
+            type: [String, Number],
+            default: null
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         *
+         */
+        helpText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: null
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         *
+         */
+        tabindex: {
+            type: [String, Number]
+        },
+        /**
+         * Вариант активного состояния
+         * circle - внутри круг
+         * checkmark - внутри галочка
+         * */
+        variation: {
+            type: String,
+            default: 'circle'
+        },
+        /**
+         * цвет
+         */
+        color: {
+            type: String,
+            default: 'purple'
+        },
+        iconSize: {
+            type: String,
+            default: '250'
+        },
+        dir: {
+            type: String,
+            default: Directions.Ltr
+        }
+    },
+    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;
+    __VLS_elementAsFunction(__VLS_intrinsicElements.label, __VLS_intrinsicElements.label)({ dir: ((props.dir)), ...{ class: ("mc-field-radio-button") }, ...{ class: ((__VLS_ctx.classes)) }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.input)({ ...{ onChange: (__VLS_ctx.handleChange) }, checked: (true), ...(__VLS_ctx.inputProps), });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ("mc-field-radio-button__icon_wrapper") }, });
+    // @ts-ignore
+    [McSvgIcon,];
+    // @ts-ignore
+    const __VLS_0 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ name: ((__VLS_ctx.inputProps.checked ? __VLS_ctx.activeIcon : 'circle')), color: ((__VLS_ctx.iconColor)), size: ((props.iconSize)), ...{ class: ("mc-field-radio-button__icon") }, }));
+    const __VLS_1 = __VLS_0({ name: ((__VLS_ctx.inputProps.checked ? __VLS_ctx.activeIcon : 'circle')), color: ((__VLS_ctx.iconColor)), size: ((props.iconSize)), ...{ class: ("mc-field-radio-button__icon") }, }, ...__VLS_functionalComponentArgsRest(__VLS_0));
+    if (__VLS_ctx.label || __VLS_ctx.$slots.default) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ("mc-field-radio-button__text") }, });
+        var __VLS_5 = {};
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_6 = __VLS_asFunctionalComponent(McTitle, new McTitle({}));
+        const __VLS_7 = __VLS_6({}, ...__VLS_functionalComponentArgsRest(__VLS_6));
+        (__VLS_ctx.label);
+        __VLS_nonNullable(__VLS_10.slots).default;
+        var __VLS_10;
+        if (__VLS_ctx.fieldErrors.errorText.value) {
+            // @ts-ignore
+            [McTitle, McTitle,];
+            // @ts-ignore
+            const __VLS_11 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), maxWidth: ("100%"), }));
+            const __VLS_12 = __VLS_11({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), maxWidth: ("100%"), }, ...__VLS_functionalComponentArgsRest(__VLS_11));
+            (__VLS_ctx.fieldErrors.errorText.value);
+            __VLS_nonNullable(__VLS_15.slots).default;
+            var __VLS_15;
+        }
+        if (__VLS_ctx.fieldErrors.errorText.value) {
+            __VLS_elementAsFunction(__VLS_intrinsicElements.br)({});
+        }
+        var __VLS_16 = {};
+        if (props.helpText) {
+            // @ts-ignore
+            [McTitle, McTitle,];
+            // @ts-ignore
+            const __VLS_17 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }));
+            const __VLS_18 = __VLS_17({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }, ...__VLS_functionalComponentArgsRest(__VLS_17));
+            (props.helpText);
+            __VLS_nonNullable(__VLS_21.slots).default;
+            var __VLS_21;
+        }
+    }
+    __VLS_styleScopedClasses['mc-field-radio-button'];
+    __VLS_styleScopedClasses['mc-field-radio-button__icon_wrapper'];
+    __VLS_styleScopedClasses['mc-field-radio-button__icon'];
+    __VLS_styleScopedClasses['mc-field-radio-button__text'];
+    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 {
+            McTitle: McTitle,
+            McSvgIcon: McSvgIcon,
+            TitleVariations: TitleVariations,
+            fieldErrors: fieldErrors,
+            classes: classes,
+            activeIcon: activeIcon,
+            iconColor: iconColor,
+            inputProps: inputProps,
+            handleChange: handleChange,
+        };
+    },
+    emits: {},
+    props: {
+        /**
+         *  Значение
+         */
+        modelValue: {
+            default: null
+        },
+        value: {
+            default: null
+        },
+        /**
+         *  Name
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  Подпись радио:
+         *
+         */
+        label: {
+            type: [String, Number],
+            default: null
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         *
+         */
+        helpText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: null
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         *
+         */
+        tabindex: {
+            type: [String, Number]
+        },
+        /**
+         * Вариант активного состояния
+         * circle - внутри круг
+         * checkmark - внутри галочка
+         * */
+        variation: {
+            type: String,
+            default: 'circle'
+        },
+        /**
+         * цвет
+         */
+        color: {
+            type: String,
+            default: 'purple'
+        },
+        iconSize: {
+            type: String,
+            default: '250'
+        },
+        dir: {
+            type: String,
+            default: Directions.Ltr
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    emits: {},
+    props: {
+        /**
+         *  Значение
+         */
+        modelValue: {
+            default: null
+        },
+        value: {
+            default: null
+        },
+        /**
+         *  Name
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  Подпись радио:
+         *
+         */
+        label: {
+            type: [String, Number],
+            default: null
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         *
+         */
+        helpText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: null
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         *
+         */
+        tabindex: {
+            type: [String, Number]
+        },
+        /**
+         * Вариант активного состояния
+         * circle - внутри круг
+         * checkmark - внутри галочка
+         * */
+        variation: {
+            type: String,
+            default: 'circle'
+        },
+        /**
+         * цвет
+         */
+        color: {
+            type: String,
+            default: 'purple'
+        },
+        iconSize: {
+            type: String,
+            default: '250'
+        },
+        dir: {
+            type: String,
+            default: Directions.Ltr
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */