@coreui/vue/dist/cjs/components/form/CFormControlWrapper.js

UI Components Library for Vue.js

'use strict';

var vue = require('vue');
var CFormControlValidation = require('./CFormControlValidation.js');
var CFormFloating = require('./CFormFloating.js');
var CFormLabel = require('./CFormLabel.js');
var CFormText = require('./CFormText.js');

const CFormControlWrapper = vue.defineComponent({
    name: 'CFormControlWrapper',
    inheritAttrs: false,
    props: {
        ...CFormControlValidation.CFormControlValidation.props,
        /**
         * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
         *
         * @since 4.3.0
         */
        floatingLabel: String,
        /**
         * @ignore
         */
        id: {
            type: String,
        },
        /**
         * Add a caption for a component.
         *
         * @since 4.3.0
         */
        label: String,
        /**
         * Add helper text to the component.
         *
         * @since 4.3.0
         */
        text: String,
    },
    setup(props, { slots }) {
        const formControlValidation = () => vue.h(CFormControlValidation.CFormControlValidation, {
            describedby: props.describedby,
            feedback: props.feedback,
            feedbackInvalid: props.feedbackInvalid,
            feedbackValid: props.feedbackValid,
            invalid: props.invalid,
            tooltipFeedback: props.tooltipFeedback,
            valid: props.valid,
        }, {
            ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
            ...(slots.feedbackInvalid && {
                feedbackInvalid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
            }),
            ...(slots.feedbackValid && {
                feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
            }),
        });
        return () => props.floatingLabel
            ? vue.h(CFormFloating.CFormFloating, () => [
                slots.default && slots.default(),
                vue.h(CFormLabel.CFormLabel, {
                    for: props.id,
                }, {
                    default: () => (slots.label && slots.label()) || props.label || props.floatingLabel,
                }),
                (props.text || slots.text) &&
                    vue.h(CFormText.CFormText, {
                        id: props.describedby,
                    }, {
                        default: () => (slots.text && slots.text()) || props.text,
                    }),
                formControlValidation(),
            ])
            : [
                (props.label || slots.label) &&
                    vue.h(CFormLabel.CFormLabel, {
                        for: props.id,
                    }, {
                        default: () => (slots.label && slots.label()) || props.label,
                    }),
                slots.default && slots.default(),
                (props.text || slots.text) &&
                    vue.h(CFormText.CFormText, {
                        id: props.describedby,
                    }, {
                        default: () => (slots.text && slots.text()) || props.text,
                    }),
                formControlValidation(),
            ];
    },
});

exports.CFormControlWrapper = CFormControlWrapper;
//# sourceMappingURL=CFormControlWrapper.js.map