mediacube-ui-v2 0.0.7 → 0.0.9

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

@@ -0,0 +1,471 @@
+import McFieldRadioButton from '../McFieldRadio/McFieldRadio.vue';
+import McTitle from '../McTitle/McTitle.vue';
+import { computed } from 'vue';
+import { useFieldErrors } from '@/composables/useFieldErrors';
+import { Directions } from '@/enums/ui/Directions';
+import { RadioGroupDirection } from '@/enums/RadioGroup';
+import { TitleVariations } from '@/enums';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const emit = defineEmits(['update:modelValue', 'change']);
+//@ts-ignore
+const props = defineProps({
+    modelValue: [String, Number],
+    /**
+     *  Объект или массив данных
+     */
+    options: {
+        type: [Array],
+        default: () => []
+    },
+    /**
+     *  Заголовок:
+     *
+     */
+    title: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Вспомогательный текст под инпутом:
+     *
+     */
+    helpText: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Ошибки
+     *
+     */
+    errors: {
+        type: Array,
+        default: () => []
+    },
+    /**
+     *  Name
+     */
+    name: {
+        type: String,
+        required: true
+    },
+    /**
+     *  Отключенное состояние
+     *  всего списка
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    /**
+     *  Добавление пользовательского
+     *  класса к radio
+     */
+    radioClassName: {
+        type: String,
+        default: ''
+    },
+    /**
+     *  Направление списка
+     *  `column`, `row`
+     */
+    direction: {
+        type: String,
+        default: RadioGroupDirection.Column
+    },
+    dir: {
+        type: String,
+        default: Directions.Ltr
+    },
+    /**
+     * Вариант активного состояния
+     * circle - внутри круг
+     * checkmark - внутри галочка
+     * */
+    variation: {
+        type: String,
+        default: 'circle'
+    }
+});
+const fieldErrors = useFieldErrors(props.errors);
+const computedOptions = computed(() => {
+    if (!props.options.length)
+        return [];
+    return props.options.map((o, i) => {
+        const optionData = typeof o === 'object' ? o : { label: o, value: o };
+        return {
+            id: Date.now() + i,
+            ...optionData,
+            disabled: props.disabled || optionData.disabled,
+            value: optionData.value,
+            modelValue: props.modelValue,
+            class: props.radioClassName,
+            dir: props.dir,
+            variation: props.variation
+        };
+    });
+});
+const classes = computed(() => {
+    return {
+        [`mc-field-radio-group--direction-${props.direction}`]: !!props.direction
+    };
+});
+/**
+ * Событие по смене выбора
+ * @property {event}
+ */
+const handleInput = (e) => {
+    fieldErrors.toggleErrorVisible();
+    emit('update:modelValue', e);
+    emit('change', e);
+}; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        modelValue: [String, Number],
+        /**
+         *  Объект или массив данных
+         */
+        options: {
+            type: [Array],
+            default: () => []
+        },
+        /**
+         *  Заголовок:
+         *
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         *
+         */
+        helpText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Name
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  Отключенное состояние
+         *  всего списка
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Добавление пользовательского
+         *  класса к radio
+         */
+        radioClassName: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Направление списка
+         *  `column`, `row`
+         */
+        direction: {
+            type: String,
+            default: RadioGroupDirection.Column
+        },
+        dir: {
+            type: String,
+            default: Directions.Ltr
+        },
+        /**
+         * Вариант активного состояния
+         * circle - внутри круг
+         * checkmark - внутри галочка
+         * */
+        variation: {
+            type: String,
+            default: 'circle'
+        }
+    },
+    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.div, __VLS_intrinsicElements.div)({ dir: ((props.dir)), ...{ class: ("mc-field-radio-group") }, ...{ class: ((__VLS_ctx.classes)) }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-radio-group__header") }, });
+    var __VLS_0 = {};
+    if (props.title) {
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(McTitle, new McTitle({}));
+        const __VLS_2 = __VLS_1({}, ...__VLS_functionalComponentArgsRest(__VLS_1));
+        (props.title);
+        __VLS_nonNullable(__VLS_5.slots).default;
+        var __VLS_5;
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-radio-group__buttons") }, });
+    for (const [radio] of __VLS_getVForSourceType((__VLS_ctx.computedOptions))) {
+        // @ts-ignore
+        [McFieldRadioButton,];
+        // @ts-ignore
+        const __VLS_6 = __VLS_asFunctionalComponent(McFieldRadioButton, new McFieldRadioButton({ ...{ 'onUpdate:modelValue': {} }, key: ((radio.id)), ...(radio), name: ((props.name)), }));
+        const __VLS_7 = __VLS_6({ ...{ 'onUpdate:modelValue': {} }, key: ((radio.id)), ...(radio), name: ((props.name)), }, ...__VLS_functionalComponentArgsRest(__VLS_6));
+        let __VLS_11;
+        const __VLS_12 = {
+            'onUpdate:modelValue': (__VLS_ctx.handleInput)
+        };
+        let __VLS_8;
+        let __VLS_9;
+        var __VLS_10;
+    }
+    if (__VLS_ctx.fieldErrors.errorText.value || props.helpText || __VLS_ctx.$slots.footer) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-radio-group__footer") }, });
+        if (__VLS_ctx.fieldErrors.errorText.value) {
+            // @ts-ignore
+            [McTitle, McTitle,];
+            // @ts-ignore
+            const __VLS_13 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), maxWidth: ("100%"), }));
+            const __VLS_14 = __VLS_13({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), maxWidth: ("100%"), }, ...__VLS_functionalComponentArgsRest(__VLS_13));
+            (__VLS_ctx.fieldErrors.errorText.value);
+            __VLS_nonNullable(__VLS_17.slots).default;
+            var __VLS_17;
+        }
+        if (__VLS_ctx.fieldErrors.errorText.value) {
+            __VLS_elementAsFunction(__VLS_intrinsicElements.br)({});
+        }
+        var __VLS_18 = {};
+        if (props.helpText) {
+            // @ts-ignore
+            [McTitle, McTitle,];
+            // @ts-ignore
+            const __VLS_19 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }));
+            const __VLS_20 = __VLS_19({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }, ...__VLS_functionalComponentArgsRest(__VLS_19));
+            (props.helpText);
+            __VLS_nonNullable(__VLS_23.slots).default;
+            var __VLS_23;
+        }
+    }
+    __VLS_styleScopedClasses['mc-field-radio-group'];
+    __VLS_styleScopedClasses['mc-field-radio-group__header'];
+    __VLS_styleScopedClasses['mc-field-radio-group__buttons'];
+    __VLS_styleScopedClasses['mc-field-radio-group__footer'];
+    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 {
+            McFieldRadioButton: McFieldRadioButton,
+            McTitle: McTitle,
+            TitleVariations: TitleVariations,
+            fieldErrors: fieldErrors,
+            computedOptions: computedOptions,
+            classes: classes,
+            handleInput: handleInput,
+        };
+    },
+    emits: {},
+    props: {
+        modelValue: [String, Number],
+        /**
+         *  Объект или массив данных
+         */
+        options: {
+            type: [Array],
+            default: () => []
+        },
+        /**
+         *  Заголовок:
+         *
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         *
+         */
+        helpText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Name
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  Отключенное состояние
+         *  всего списка
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Добавление пользовательского
+         *  класса к radio
+         */
+        radioClassName: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Направление списка
+         *  `column`, `row`
+         */
+        direction: {
+            type: String,
+            default: RadioGroupDirection.Column
+        },
+        dir: {
+            type: String,
+            default: Directions.Ltr
+        },
+        /**
+         * Вариант активного состояния
+         * circle - внутри круг
+         * checkmark - внутри галочка
+         * */
+        variation: {
+            type: String,
+            default: 'circle'
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    emits: {},
+    props: {
+        modelValue: [String, Number],
+        /**
+         *  Объект или массив данных
+         */
+        options: {
+            type: [Array],
+            default: () => []
+        },
+        /**
+         *  Заголовок:
+         *
+         */
+        title: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         *
+         */
+        helpText: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: () => []
+        },
+        /**
+         *  Name
+         */
+        name: {
+            type: String,
+            required: true
+        },
+        /**
+         *  Отключенное состояние
+         *  всего списка
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        /**
+         *  Добавление пользовательского
+         *  класса к radio
+         */
+        radioClassName: {
+            type: String,
+            default: ''
+        },
+        /**
+         *  Направление списка
+         *  `column`, `row`
+         */
+        direction: {
+            type: String,
+            default: RadioGroupDirection.Column
+        },
+        dir: {
+            type: String,
+            default: Directions.Ltr
+        },
+        /**
+         * Вариант активного состояния
+         * circle - внутри круг
+         * checkmark - внутри галочка
+         * */
+        variation: {
+            type: String,
+            default: 'circle'
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */