mediacube-ui-v2 0.0.8 → 0.0.9

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

@@ -0,0 +1,542 @@
+import McTitle from '@/components/elements/McTitle/McTitle.vue';
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue';
+import { useFieldErrors } from '@/composables/useFieldErrors';
+import { computed, useSlots } from 'vue';
+import { Sizes } from '@/types/styles/Sizes';
+import { Directions } from '@/enums/ui/Directions';
+import { TitleVariations, Weights } from '@/enums';
+const { defineProps, defineSlots, defineEmits, defineExpose, defineModel, defineOptions, withDefaults, } = await import('vue');
+const emit = defineEmits(['update:modelValue']);
+const slots = useSlots();
+const props = defineProps({
+    //@ts-ignore
+    modelValue: {
+        type: [Boolean, String, Number, Array],
+        validator(value, props) {
+            return props.multiple ? Array.isArray(value) : true;
+        }
+    },
+    /**
+     *  Name
+     *
+     */
+    name: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Выбранное значение
+     *
+     */
+    checkedValue: {
+        type: [String, Boolean, Number],
+        default: true
+    },
+    /**
+     *  Невыбранное значение
+     *
+     */
+    uncheckedValue: {
+        type: [String, Boolean, Number],
+        default: false
+    },
+    /**
+     *  Ошибки
+     *
+     */
+    errors: {
+        type: Array,
+        default: null
+    },
+    /**
+     *  Вспомогательный текст под инпутом:
+     *
+     */
+    helpText: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Подпись чекбокса:
+     *
+     */
+    mainText: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Заголовок поля:
+     *
+     */
+    title: {
+        type: String,
+        default: null
+    },
+    /**
+     *  Отключенное состояние
+     *
+     */
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    multiple: {
+        type: Boolean,
+        default: false
+    },
+    checkboxSize: {
+        type: String,
+        default: '250'
+    },
+    /**
+     * Атрибут tabindex для главного элемента
+     *
+     */
+    tabindex: {
+        type: [String, Number]
+    },
+    dir: {
+        type: String,
+        default: Directions.Ltr
+    }
+});
+const fieldErrors = useFieldErrors(props.errors);
+const rtl = computed(() => {
+    return props.dir === Directions.Rtl;
+});
+const classes = computed(() => ({
+    'mc-field-checkbox': true,
+    'mc-field-checkbox--error': props.errors,
+    'mc-field-checkbox--disabled': props.disabled,
+    'mc-field-checkbox--empty': !props.mainText && !slots.default,
+    'mc-field-checkbox--rtl': rtl.value
+}));
+const styles = computed(() => ({
+    '--mc-field-checkbox-size': Sizes[props.checkboxSize]
+}));
+const isChecked = computed(() => {
+    return props.multiple && props.modelValue
+        ? props.modelValue.includes(props.checkedValue)
+        : props.modelValue === props.checkedValue;
+});
+const inputProps = computed(() => ({
+    disabled: props.disabled,
+    name: props.name,
+    checked: isChecked.value,
+    tabindex: props.tabindex,
+    type: 'checkbox',
+    class: 'mc-field-checkbox__input'
+}));
+const handleChange = (e) => {
+    fieldErrors.toggleErrorVisible();
+    const payload = props.multiple && props.modelValue
+        ? props.modelValue.includes(props.checkedValue)
+            ? props.modelValue.filter((v) => v !== props.checkedValue)
+            : [...props.modelValue, props.checkedValue]
+        : //@ts-ignore
+            e.target && e.target.checked
+                ? props.checkedValue
+                : props.uncheckedValue;
+    emit('update:modelValue', payload);
+}; /* PartiallyEnd: #3632/scriptSetup.vue */
+const __VLS_fnComponent = (await import('vue')).defineComponent({
+    props: {
+        //@ts-ignore
+        modelValue: {
+            type: [Boolean, String, Number, Array],
+            validator(value, props) {
+                return props.multiple ? Array.isArray(value) : true;
+            }
+        },
+        /**
+         *  Name
+         *
+         */
+        name: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Выбранное значение
+         *
+         */
+        checkedValue: {
+            type: [String, Boolean, Number],
+            default: true
+        },
+        /**
+         *  Невыбранное значение
+         *
+         */
+        uncheckedValue: {
+            type: [String, Boolean, Number],
+            default: false
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: null
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         *
+         */
+        helpText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Подпись чекбокса:
+         *
+         */
+        mainText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Заголовок поля:
+         *
+         */
+        title: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        checkboxSize: {
+            type: String,
+            default: '250'
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         *
+         */
+        tabindex: {
+            type: [String, Number]
+        },
+        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.div, __VLS_intrinsicElements.div)({ dir: ((props.dir)), ...{ class: ((__VLS_ctx.classes)) }, ...{ style: ((__VLS_ctx.styles)) }, });
+    if (props.title || __VLS_ctx.$slots.header) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-text__header") }, });
+        var __VLS_0 = {};
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent(McTitle, new McTitle({ weight: ((__VLS_ctx.Weights.Medium)), }));
+        const __VLS_2 = __VLS_1({ weight: ((__VLS_ctx.Weights.Medium)), }, ...__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-checkbox__input-wrap") }, });
+    __VLS_elementAsFunction(__VLS_intrinsicElements.label, __VLS_intrinsicElements.label)({ ...{ class: ("mc-field-checkbox__name") }, });
+    // @ts-ignore
+    [McSvgIcon,];
+    // @ts-ignore
+    const __VLS_6 = __VLS_asFunctionalComponent(McSvgIcon, new McSvgIcon({ ...{ class: ("mc-field-checkbox__icon") }, name: ((__VLS_ctx.isChecked ? 'checkbox--checked' : 'checkbox')), color: ((__VLS_ctx.isChecked ? 'purple' : 'gray')), size: ((props.checkboxSize)), }));
+    const __VLS_7 = __VLS_6({ ...{ class: ("mc-field-checkbox__icon") }, name: ((__VLS_ctx.isChecked ? 'checkbox--checked' : 'checkbox')), color: ((__VLS_ctx.isChecked ? 'purple' : 'gray')), size: ((props.checkboxSize)), }, ...__VLS_functionalComponentArgsRest(__VLS_6));
+    __VLS_elementAsFunction(__VLS_intrinsicElements.input)({ ...{ onChange: (__VLS_ctx.handleChange) }, ...(__VLS_ctx.inputProps), });
+    if (props.mainText || __VLS_ctx.$slots.default) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)({ ...{ class: ("mc-field-checkbox__name-text") }, });
+        var __VLS_11 = {};
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_12 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), }));
+        const __VLS_13 = __VLS_12({ tagName: ("div"), }, ...__VLS_functionalComponentArgsRest(__VLS_12));
+        (props.mainText);
+        __VLS_nonNullable(__VLS_16.slots).default;
+        var __VLS_16;
+    }
+    __VLS_elementAsFunction(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)({ ...{ class: ("mc-field-checkbox__footer") }, });
+    if (__VLS_ctx.fieldErrors.errorText.value) {
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_17 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), maxWidth: ("100%"), }));
+        const __VLS_18 = __VLS_17({ tagName: ("div"), color: ("red"), variation: ((__VLS_ctx.TitleVariations.Overline)), maxWidth: ("100%"), }, ...__VLS_functionalComponentArgsRest(__VLS_17));
+        (__VLS_ctx.fieldErrors.errorText.value);
+        __VLS_nonNullable(__VLS_21.slots).default;
+        var __VLS_21;
+    }
+    if (__VLS_ctx.fieldErrors.errorText.value) {
+        __VLS_elementAsFunction(__VLS_intrinsicElements.br)({});
+    }
+    var __VLS_22 = {};
+    if (props.helpText) {
+        // @ts-ignore
+        [McTitle, McTitle,];
+        // @ts-ignore
+        const __VLS_23 = __VLS_asFunctionalComponent(McTitle, new McTitle({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }));
+        const __VLS_24 = __VLS_23({ tagName: ("div"), variation: ((__VLS_ctx.TitleVariations.Overline)), color: ("gray"), maxWidth: ("100%"), }, ...__VLS_functionalComponentArgsRest(__VLS_23));
+        (props.helpText);
+        __VLS_nonNullable(__VLS_27.slots).default;
+        var __VLS_27;
+    }
+    __VLS_styleScopedClasses['mc-field-text__header'];
+    __VLS_styleScopedClasses['mc-field-checkbox__input-wrap'];
+    __VLS_styleScopedClasses['mc-field-checkbox__name'];
+    __VLS_styleScopedClasses['mc-field-checkbox__icon'];
+    __VLS_styleScopedClasses['mc-field-checkbox__name-text'];
+    __VLS_styleScopedClasses['mc-field-checkbox__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 {
+            McTitle: McTitle,
+            McSvgIcon: McSvgIcon,
+            TitleVariations: TitleVariations,
+            Weights: Weights,
+            fieldErrors: fieldErrors,
+            classes: classes,
+            styles: styles,
+            isChecked: isChecked,
+            inputProps: inputProps,
+            handleChange: handleChange,
+        };
+    },
+    emits: {},
+    props: {
+        //@ts-ignore
+        modelValue: {
+            type: [Boolean, String, Number, Array],
+            validator(value, props) {
+                return props.multiple ? Array.isArray(value) : true;
+            }
+        },
+        /**
+         *  Name
+         *
+         */
+        name: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Выбранное значение
+         *
+         */
+        checkedValue: {
+            type: [String, Boolean, Number],
+            default: true
+        },
+        /**
+         *  Невыбранное значение
+         *
+         */
+        uncheckedValue: {
+            type: [String, Boolean, Number],
+            default: false
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: null
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         *
+         */
+        helpText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Подпись чекбокса:
+         *
+         */
+        mainText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Заголовок поля:
+         *
+         */
+        title: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        checkboxSize: {
+            type: String,
+            default: '250'
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         *
+         */
+        tabindex: {
+            type: [String, Number]
+        },
+        dir: {
+            type: String,
+            default: Directions.Ltr
+        }
+    },
+});
+const __VLS_component = (await import('vue')).defineComponent({
+    setup() {
+        return {};
+    },
+    emits: {},
+    props: {
+        //@ts-ignore
+        modelValue: {
+            type: [Boolean, String, Number, Array],
+            validator(value, props) {
+                return props.multiple ? Array.isArray(value) : true;
+            }
+        },
+        /**
+         *  Name
+         *
+         */
+        name: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Выбранное значение
+         *
+         */
+        checkedValue: {
+            type: [String, Boolean, Number],
+            default: true
+        },
+        /**
+         *  Невыбранное значение
+         *
+         */
+        uncheckedValue: {
+            type: [String, Boolean, Number],
+            default: false
+        },
+        /**
+         *  Ошибки
+         *
+         */
+        errors: {
+            type: Array,
+            default: null
+        },
+        /**
+         *  Вспомогательный текст под инпутом:
+         *
+         */
+        helpText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Подпись чекбокса:
+         *
+         */
+        mainText: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Заголовок поля:
+         *
+         */
+        title: {
+            type: String,
+            default: null
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        checkboxSize: {
+            type: String,
+            default: '250'
+        },
+        /**
+         * Атрибут tabindex для главного элемента
+         *
+         */
+        tabindex: {
+            type: [String, Number]
+        },
+        dir: {
+            type: String,
+            default: Directions.Ltr
+        }
+    },
+    __typeEl: {},
+});
+export default {};
+; /* PartiallyEnd: #4569/main.vue */