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

UI Components Library for Vue.js

import { defineComponent, h } from 'vue';
import { CFormControlValidation } from './CFormControlValidation.js';
import { CFormFloating } from './CFormFloating.js';
import { CFormLabel } from './CFormLabel.js';
import { CFormText } from './CFormText.js';

const CFormControlWrapper = defineComponent({
    name: 'CFormControlWrapper',
    inheritAttrs: false,
    props: {
        ...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 = () => h(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
            ? h(CFormFloating, () => [
                slots.default && slots.default(),
                h(CFormLabel, {
                    for: props.id,
                }, {
                    default: () => (slots.label && slots.label()) || props.label || props.floatingLabel,
                }),
                (props.text || slots.text) &&
                    h(CFormText, {
                        id: props.describedby,
                    }, {
                        default: () => (slots.text && slots.text()) || props.text,
                    }),
                formControlValidation(),
            ])
            : [
                (props.label || slots.label) &&
                    h(CFormLabel, {
                        for: props.id,
                    }, {
                        default: () => (slots.label && slots.label()) || props.label,
                    }),
                slots.default && slots.default(),
                (props.text || slots.text) &&
                    h(CFormText, {
                        id: props.describedby,
                    }, {
                        default: () => (slots.text && slots.text()) || props.text,
                    }),
                formControlValidation(),
            ];
    },
});

export { CFormControlWrapper };
//# sourceMappingURL=CFormControlWrapper.js.map