@coreui/vue-pro 5.0.0-alpha.0 → 5.0.0-beta.0

package/dist/cjs/components/form/CFormSelect.js

@@ -0,0 +1,171 @@
+'use strict';
+
+var vue = require('vue');
+var CFormControlWrapper = require('./CFormControlWrapper.js');
+
+const CFormSelect = vue.defineComponent({
+    name: 'CFormSelect',
+    props: {
+        /**
+         * Provide valuable, actionable feedback.
+         *
+         * @since 4.3.0
+         */
+        feedback: String,
+        /**
+         * Provide valuable, actionable feedback.
+         *
+         * @since 4.3.0
+         */
+        feedbackInvalid: String,
+        /**
+         * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+         *
+         * @since 4.3.0
+         */
+        feedbackValid: String,
+        /**
+         * 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,
+        /**
+         * Specifies the number of visible options in a drop-down list.
+         */
+        htmlSize: Number,
+        /**
+         * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+         */
+        id: String,
+        /**
+         * Set component validation state to invalid.
+         */
+        invalid: Boolean,
+        /**
+         * Add a caption for a component.
+         *
+         * @since 4.3.0
+         */
+        label: String,
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: {
+            type: [String, Array],
+        },
+        multiple: Boolean,
+        /**
+         * Options list of the select component. Available keys: `label`, `value`, `disabled`.
+         * Examples:
+         * - `:options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"`
+         * - `:options="['js', 'html']"`
+         */
+        options: Array,
+        /**
+         * Size the component small or large.
+         *
+         * @values 'sm' | 'lg'
+         */
+        size: {
+            type: String,
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
+        },
+        /**
+         * Add helper text to the component.
+         *
+         * @since 4.3.0
+         */
+        text: String,
+        /**
+         * Display validation feedback in a styled tooltip.
+         *
+         * @since 4.3.0
+         */
+        tooltipFeedback: Boolean,
+        /**
+         * Set component validation state to valid.
+         */
+        valid: Boolean,
+    },
+    emits: [
+        /**
+         * Event occurs when when a user changes the selected option of a `<select>` element.
+         */
+        'change',
+        /**
+         * Emit the new value whenever there’s a change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { attrs, emit, slots }) {
+        const handleChange = (event) => {
+            const target = event.target;
+            const selected = Array.from(target.options)
+                .filter((option) => option.selected)
+                .map((option) => option.value);
+            emit('change', event);
+            emit('update:modelValue', target.multiple ? selected : selected[0]);
+        };
+        return () => vue.h(CFormControlWrapper.CFormControlWrapper, {
+            describedby: attrs['aria-describedby'],
+            feedback: props.feedback,
+            feedbackInvalid: props.feedbackInvalid,
+            feedbackValid: props.feedbackValid,
+            floatingLabel: props.floatingLabel,
+            id: props.id,
+            invalid: props.invalid,
+            label: props.label,
+            text: props.text,
+            tooltipFeedback: props.tooltipFeedback,
+            valid: props.valid,
+        }, {
+            default: () => vue.h('select', {
+                id: props.id,
+                ...attrs,
+                class: [
+                    'form-select',
+                    {
+                        [`form-select-${props.size}`]: props.size,
+                        'is-invalid': props.invalid,
+                        'is-valid': props.valid,
+                    },
+                    attrs.class,
+                ],
+                multiple: props.multiple,
+                onChange: (event) => handleChange(event),
+                size: props.htmlSize,
+                ...(props.modelValue && !props.multiple && { value: props.modelValue }),
+            }, props.options
+                ? props.options.map((option) => {
+                    return vue.h('option', {
+                        ...(typeof option === 'object' && {
+                            ...(option.disabled && { disabled: option.disabled }),
+                            ...(option.selected && { selected: option.selected }),
+                            ...(option.value !== undefined && {
+                                value: option.value,
+                                ...(props.modelValue &&
+                                    props.multiple &&
+                                    props.modelValue.includes(option.value) && { selected: true }),
+                            }),
+                        }),
+                    }, typeof option === 'string' ? option : option.label);
+                })
+                : slots.default && slots.default()),
+            ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
+            ...(slots.feedbackInvalid && {
+                feedbackInvalid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
+            }),
+            ...(slots.feedbackValid && {
+                feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
+            }),
+            ...(slots.label && { label: () => slots.label && slots.label() }),
+            ...(slots.text && { text: () => slots.text && slots.text() }),
+        });
+    },
+});
+
+exports.CFormSelect = CFormSelect;
+//# sourceMappingURL=CFormSelect.js.map

package/dist/cjs/components/form/CFormSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CFormSelect.js","sources":["../../../../src/components/form/CFormSelect.ts"],"sourcesContent":[null],"names":["defineComponent","h","CFormControlWrapper"],"mappings":";;;;;AAUM,MAAA,WAAW,GAAGA,mBAAe,CAAC;AAClC,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,KAAK,EAAE;AACL;;;;AAIG;AACH,QAAA,QAAQ,EAAE,MAAM;AAChB;;;;AAIG;AACH,QAAA,eAAe,EAAE,MAAM;AACvB;;;;AAIG;AACH,QAAA,aAAa,EAAE,MAAM;AACrB;;;;AAIG;AACH,QAAA,aAAa,EAAE,MAAM;AACrB;;AAEG;AACH,QAAA,QAAQ,EAAE,MAAM;AAChB;;AAEG;AACH,QAAA,EAAE,EAAE,MAAM;AACV;;AAEG;AACH,QAAA,OAAO,EAAE,OAAO;AAChB;;;;AAIG;AACH,QAAA,KAAK,EAAE,MAAM;AACb;;AAEG;AACH,QAAA,UAAU,EAAE;AACV,YAAA,IAAI,EAAE,CAAC,MAAM,EAAE,KAAK,CAAgC;AACrD,SAAA;AACD,QAAA,QAAQ,EAAE,OAAO;AACjB;;;;;AAKG;AACH,QAAA,OAAO,EAAE,KAAsC;AAC/C;;;;AAIG;AACH,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,SAAS,EAAE,CAAC,KAAa,KAAI;gBAC3B,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;aACpC;AACF,SAAA;AACD;;;;AAIG;AACH,QAAA,IAAI,EAAE,MAAM;AACZ;;;;AAIG;AACH,QAAA,eAAe,EAAE,OAAO;AACxB;;AAEG;AACH,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;AAEG;QACH,QAAQ;AACR;;AAEG;QACH,mBAAmB;AACpB,KAAA;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAA;AACjC,QAAA,MAAM,YAAY,GAAG,CAAC,KAAiB,KAAI;AACzC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA2B,CAAA;YAChD,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;iBACxC,MAAM,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,CAAC;iBACnC,GAAG,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,KAAK,CAAC,CAAA;AAChC,YAAA,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;AACrB,YAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;AACrE,SAAC,CAAA;AAED,QAAA,OAAO,MACLC,KAAC,CACCC,uCAAmB,EACnB;AACE,YAAA,WAAW,EAAE,KAAK,CAAC,kBAAkB,CAAC;YACtC,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,aAAa,EAAE,KAAK,CAAC,aAAa;YAClC,aAAa,EAAE,KAAK,CAAC,aAAa;YAClC,EAAE,EAAE,KAAK,CAAC,EAAE;YACZ,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,KAAK,EAAE,KAAK,CAAC,KAAK;SACnB,EACD;AACE,YAAA,OAAO,EAAE,MACPD,KAAC,CACC,QAAQ,EACR;gBACE,EAAE,EAAE,KAAK,CAAC,EAAE;AACZ,gBAAA,GAAG,KAAK;AACR,gBAAA,KAAK,EAAE;oBACL,aAAa;AACb,oBAAA;wBACE,CAAC,CAAA,YAAA,EAAe,KAAK,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC,IAAI;wBACzC,YAAY,EAAE,KAAK,CAAC,OAAO;wBAC3B,UAAU,EAAE,KAAK,CAAC,KAAK;AACxB,qBAAA;AACD,oBAAA,KAAK,CAAC,KAAK;AACZ,iBAAA;gBACD,QAAQ,EAAE,KAAK,CAAC,QAAQ;gBACxB,QAAQ,EAAE,CAAC,KAAiB,KAAK,YAAY,CAAC,KAAK,CAAC;gBACpD,IAAI,EAAE,KAAK,CAAC,QAAQ;AACpB,gBAAA,IAAI,KAAK,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE;aACvE,EACD,KAAK,CAAC,OAAO;kBACT,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAuB,KAAI;oBAC5C,OAAOA,KAAC,CACN,QAAQ,EACR;AACE,wBAAA,IAAI,OAAO,MAAM,KAAK,QAAQ,IAAI;AAChC,4BAAA,IAAI,MAAM,CAAC,QAAQ,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE;AACpD,4BAAA,IAAI,MAAM,CAAC,QAAQ,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE;AACpD,4BAAA,IAAI,MAAM,CAAC,KAAK,KAAK,SAAS,IAAI;gCAChC,KAAK,EAAE,MAAM,CAAC,KAAK;gCACnB,IAAI,KAAK,CAAC,UAAU;AAClB,oCAAA,KAAK,CAAC,QAAQ;AACd,oCAAA,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE;6BAChE;yBACF;AACF,qBAAA,EACD,OAAO,MAAM,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC,KAAK,CACnD,CAAA;AACH,iBAAC,CAAC;kBACF,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CACrC;YACH,IAAI,KAAK,CAAC,QAAQ,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE;AAC5E,YAAA,IAAI,KAAK,CAAC,eAAe,IAAI;gBAC3B,eAAe,EAAE,MAAM,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe,EAAE;aACxE;AACD,YAAA,IAAI,KAAK,CAAC,aAAa,IAAI;gBACzB,aAAa,EAAE,MAAM,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe,EAAE;aACtE;YACD,IAAI,KAAK,CAAC,KAAK,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,EAAE;YAChE,IAAI,KAAK,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,EAAE,EAAE;AAC7D,SAAA,CACF,CAAA;KACJ;AACF,CAAA;;;;"}

package/dist/cjs/components/form/CFormSwitch.js

@@ -0,0 +1,110 @@
+'use strict';
+
+var vue = require('vue');
+var CFormLabel = require('./CFormLabel.js');
+
+const CFormSwitch = vue.defineComponent({
+    name: 'CFormSwitch',
+    inheritAttrs: false,
+    props: {
+        /**
+         * The id global attribute defines an identifier (ID) that must be unique in the whole document
+         */
+        id: String,
+        /**
+         * Set component validation state to invalid.
+         */
+        invalid: Boolean,
+        /**
+         * The element represents a caption for a component.
+         */
+        label: String,
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: [Boolean, String],
+        /**
+         * Put checkboxes or radios on the opposite side.
+         *
+         * @since 4.8.0
+         */
+        reverse: Boolean,
+        /**
+         * Size the component large or extra large. Works only with `switch`.
+         *
+         * @values 'lg' | 'xl'
+         */
+        size: {
+            type: String,
+            validator: (value) => {
+                return ['lg', 'xl'].includes(value);
+            },
+        },
+        /**
+         * Specifies the type of component.
+         *
+         * @values 'checkbox', 'radio'
+         */
+        type: {
+            type: String,
+            default: 'checkbox',
+        },
+        /**
+         * Set component validation state to valid.
+         */
+        valid: Boolean,
+    },
+    emits: [
+        /**
+         * Event occurs when the checked value has been changed.
+         */
+        'change',
+        /**
+         * Emit the new value whenever there’s a change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { attrs, emit }) {
+        const handleChange = (event) => {
+            const target = event.target;
+            emit('change', event);
+            emit('update:modelValue', target.checked);
+        };
+        return () => vue.h('div', {
+            class: [
+                'form-check form-switch',
+                {
+                    'form-check-reverse': props.reverse,
+                    [`form-switch-${props.size}`]: props.size,
+                    'is-invalid': props.invalid,
+                    'is-valid': props.valid,
+                },
+            ],
+        }, [
+            vue.h('input', {
+                ...attrs,
+                ...(props.modelValue && { checked: props.modelValue }),
+                class: [
+                    'form-check-input',
+                    {
+                        'is-invalid': props.invalid,
+                        'is-valid': props.valid,
+                    },
+                ],
+                id: props.id,
+                onChange: (event) => handleChange(event),
+                type: props.type,
+            }),
+            props.label &&
+                vue.h(CFormLabel.CFormLabel, {
+                    ...(props.id && { for: props.id }),
+                    class: 'form-check-label',
+                }, {
+                    default: () => props.label,
+                }),
+        ]);
+    },
+});
+
+exports.CFormSwitch = CFormSwitch;
+//# sourceMappingURL=CFormSwitch.js.map

package/dist/cjs/components/form/CFormSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CFormSwitch.js","sources":["../../../../src/components/form/CFormSwitch.ts"],"sourcesContent":[null],"names":["defineComponent","h","CFormLabel"],"mappings":";;;;;AAIM,MAAA,WAAW,GAAGA,mBAAe,CAAC;AAClC,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,KAAK,EAAE;AACL;;AAEG;AACH,QAAA,EAAE,EAAE,MAAM;AACV;;AAEG;AACH,QAAA,OAAO,EAAE,OAAO;AAChB;;AAEG;AACH,QAAA,KAAK,EAAE,MAAM;AACb;;AAEG;AACH,QAAA,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;AAC7B;;;;AAIG;AACH,QAAA,OAAO,EAAE,OAAO;AAChB;;;;AAIG;AACH,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,SAAS,EAAE,CAAC,KAAa,KAAI;gBAC3B,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;aACpC;AACF,SAAA;AACD;;;;AAIG;AACH,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,UAAU;AACpB,SAAA;AACD;;AAEG;AACH,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;AAEG;QACH,QAAQ;AACR;;AAEG;QACH,mBAAmB;AACpB,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAA;AAC1B,QAAA,MAAM,YAAY,GAAG,CAAC,KAAiB,KAAI;AACzC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAA;AAC/C,YAAA,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;AACrB,YAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,OAAO,CAAC,CAAA;AAC3C,SAAC,CAAA;AAED,QAAA,OAAO,MACLC,KAAC,CACC,KAAK,EACL;AACE,YAAA,KAAK,EAAE;gBACL,wBAAwB;AACxB,gBAAA;oBACE,oBAAoB,EAAE,KAAK,CAAC,OAAO;oBACnC,CAAC,CAAA,YAAA,EAAe,KAAK,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC,IAAI;oBACzC,YAAY,EAAE,KAAK,CAAC,OAAO;oBAC3B,UAAU,EAAE,KAAK,CAAC,KAAK;AACxB,iBAAA;AACF,aAAA;SACF,EACD;YACEA,KAAC,CAAC,OAAO,EAAE;AACT,gBAAA,GAAG,KAAK;AACR,gBAAA,IAAI,KAAK,CAAC,UAAU,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,UAAU,EAAE;AACrD,gBAAA,KAAK,EAAE;oBACL,kBAAkB;AAClB,oBAAA;wBACE,YAAY,EAAE,KAAK,CAAC,OAAO;wBAC3B,UAAU,EAAE,KAAK,CAAC,KAAK;AACxB,qBAAA;AACF,iBAAA;gBACD,EAAE,EAAE,KAAK,CAAC,EAAE;gBACZ,QAAQ,EAAE,CAAC,KAAiB,KAAK,YAAY,CAAC,KAAK,CAAC;gBACpD,IAAI,EAAE,KAAK,CAAC,IAAI;aACjB,CAAC;AACF,YAAA,KAAK,CAAC,KAAK;gBACTA,KAAC,CACCC,qBAAU,EACV;AACE,oBAAA,IAAI,KAAK,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;AACjC,oBAAA,KAAK,EAAE,kBAAkB;iBAC1B,EACD;AACE,oBAAA,OAAO,EAAE,MAAM,KAAK,CAAC,KAAK;iBAC3B,CACF;AACJ,SAAA,CACF,CAAA;KACJ;AACF,CAAA;;;;"}

package/dist/cjs/components/form/CFormText.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var vue = require('vue');
+
+const CFormText = vue.defineComponent({
+    name: 'CFormText',
+    props: {
+        /**
+         * Component used for the root node. Either a string to use a HTML element or a component.
+         */
+        component: {
+            type: String,
+            default: 'div',
+        },
+    },
+    setup(props, { slots }) {
+        return () => vue.h(props.component, { class: 'form-text' }, slots.default && slots.default());
+    },
+});
+
+exports.CFormText = CFormText;
+//# sourceMappingURL=CFormText.js.map

package/dist/cjs/components/form/CFormText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CFormText.js","sources":["../../../../src/components/form/CFormText.ts"],"sourcesContent":[null],"names":["defineComponent","h"],"mappings":";;;;AAEM,MAAA,SAAS,GAAGA,mBAAe,CAAC;AAChC,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,KAAK,EAAE;AACL;;AAEG;AACH,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,KAAK;AACf,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA;QACpB,OAAO,MAAMC,KAAC,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC,CAAA;KAC1F;AACF,CAAA;;;;"}

package/dist/cjs/components/form/CFormTextarea.js

@@ -0,0 +1,148 @@
+'use strict';
+
+var vue = require('vue');
+var CFormControlWrapper = require('./CFormControlWrapper.js');
+
+const CFormTextarea = vue.defineComponent({
+    name: 'CFormTextarea',
+    props: {
+        /**
+         * Toggle the disabled state for the component.
+         */
+        disabled: Boolean,
+        /**
+         * Provide valuable, actionable feedback.
+         *
+         * @since 4.3.0
+         */
+        feedback: String,
+        /**
+         * Provide valuable, actionable feedback.
+         *
+         * @since 4.3.0
+         */
+        feedbackInvalid: String,
+        /**
+         * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+         *
+         * @since 4.3.0
+         */
+        feedbackValid: String,
+        /**
+         * 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,
+        /**
+         * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+         */
+        id: String,
+        /**
+         * Set component validation state to invalid.
+         */
+        invalid: Boolean,
+        /**
+         * Add a caption for a component.
+         *
+         * @since 4.3.0
+         */
+        label: String,
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: String,
+        /**
+         * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
+         */
+        plainText: Boolean,
+        /**
+         * Toggle the readonly state for the component.
+         */
+        readonly: Boolean,
+        /**
+         * Add helper text to the component.
+         *
+         * @since 4.3.0
+         */
+        text: String,
+        /**
+         * Display validation feedback in a styled tooltip.
+         *
+         * @since 4.3.0
+         */
+        tooltipFeedback: Boolean,
+        /**
+         * Set component validation state to valid.
+         */
+        valid: Boolean,
+    },
+    emits: [
+        /**
+         * Event occurs when the element loses focus, after the content has been changed.
+         */
+        'change',
+        /**
+         * Event occurs immediately after the value of a component has changed.
+         */
+        'input',
+        /**
+         * Emit the new value whenever there’s an input or change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { attrs, emit, slots }) {
+        const handleChange = (event) => {
+            const target = event.target;
+            emit('change', event);
+            emit('update:modelValue', target.value);
+        };
+        const handleInput = (event) => {
+            const target = event.target;
+            emit('input', event);
+            emit('update:modelValue', target.value);
+        };
+        return () => vue.h(CFormControlWrapper.CFormControlWrapper, {
+            describedby: attrs['aria-describedby'],
+            feedback: props.feedback,
+            feedbackInvalid: props.feedbackInvalid,
+            feedbackValid: props.feedbackValid,
+            floatingLabel: props.floatingLabel,
+            id: props.id,
+            invalid: props.invalid,
+            label: props.label,
+            text: props.text,
+            tooltipFeedback: props.tooltipFeedback,
+            valid: props.valid,
+        }, {
+            default: () => vue.h('textarea', {
+                id: props.id,
+                ...attrs,
+                disabled: props.disabled,
+                readonly: props.readonly,
+                class: [
+                    props.plainText ? 'form-control-plaintext' : 'form-control',
+                    {
+                        'is-invalid': props.invalid,
+                        'is-valid': props.valid,
+                    },
+                ],
+                onChange: (event) => handleChange(event),
+                onInput: (event) => handleInput(event),
+                ...(props.modelValue && { value: props.modelValue }),
+            }, slots.default && slots.default()),
+            ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
+            ...(slots.feedbackInvalid && {
+                feedbackInvalid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
+            }),
+            ...(slots.feedbackValid && {
+                feedbackValid: () => slots.feedbackInvalid && slots.feedbackInvalid(),
+            }),
+            ...(slots.label && { label: () => slots.label && slots.label() }),
+            ...(slots.text && { text: () => slots.text && slots.text() }),
+        });
+    },
+});
+
+exports.CFormTextarea = CFormTextarea;
+//# sourceMappingURL=CFormTextarea.js.map

package/dist/cjs/components/form/CFormTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CFormTextarea.js","sources":["../../../../src/components/form/CFormTextarea.ts"],"sourcesContent":[null],"names":["defineComponent","h","CFormControlWrapper"],"mappings":";;;;;AAGM,MAAA,aAAa,GAAGA,mBAAe,CAAC;AACpC,IAAA,IAAI,EAAE,eAAe;AACrB,IAAA,KAAK,EAAE;AACL;;AAEG;AACH,QAAA,QAAQ,EAAE,OAAO;AACjB;;;;AAIG;AACH,QAAA,QAAQ,EAAE,MAAM;AAChB;;;;AAIG;AACH,QAAA,eAAe,EAAE,MAAM;AACvB;;;;AAIG;AACH,QAAA,aAAa,EAAE,MAAM;AACrB;;;;AAIG;AACH,QAAA,aAAa,EAAE,MAAM;AACrB;;AAEG;AACH,QAAA,EAAE,EAAE,MAAM;AACV;;AAEG;AACH,QAAA,OAAO,EAAE,OAAO;AAChB;;;;AAIG;AACH,QAAA,KAAK,EAAE,MAAM;AACb;;AAEG;AACH,QAAA,UAAU,EAAE,MAAM;AAClB;;AAEG;AACH,QAAA,SAAS,EAAE,OAAO;AAClB;;AAEG;AACH,QAAA,QAAQ,EAAE,OAAO;AACjB;;;;AAIG;AACH,QAAA,IAAI,EAAE,MAAM;AACZ;;;;AAIG;AACH,QAAA,eAAe,EAAE,OAAO;AACxB;;AAEG;AACH,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;AACD,IAAA,KAAK,EAAE;AACL;;AAEG;QACH,QAAQ;AACR;;AAEG;QACH,OAAO;AACP;;AAEG;QACH,mBAAmB;AACpB,KAAA;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAA;AACjC,QAAA,MAAM,YAAY,GAAG,CAAC,KAAiB,KAAI;AACzC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAA;AAC/C,YAAA,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;AACrB,YAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,KAAK,CAAC,CAAA;AACzC,SAAC,CAAA;AAED,QAAA,MAAM,WAAW,GAAG,CAAC,KAAiB,KAAI;AACxC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAA;AAC/C,YAAA,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;AACpB,YAAA,IAAI,CAAC,mBAAmB,EAAE,MAAM,CAAC,KAAK,CAAC,CAAA;AACzC,SAAC,CAAA;AAED,QAAA,OAAO,MACLC,KAAC,CACCC,uCAAmB,EACnB;AACE,YAAA,WAAW,EAAE,KAAK,CAAC,kBAAkB,CAAC;YACtC,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,aAAa,EAAE,KAAK,CAAC,aAAa;YAClC,aAAa,EAAE,KAAK,CAAC,aAAa;YAClC,EAAE,EAAE,KAAK,CAAC,EAAE;YACZ,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,KAAK,EAAE,KAAK,CAAC,KAAK;SACnB,EACD;AACE,YAAA,OAAO,EAAE,MACPD,KAAC,CACC,UAAU,EACV;gBACE,EAAE,EAAE,KAAK,CAAC,EAAE;AACZ,gBAAA,GAAG,KAAK;gBACR,QAAQ,EAAE,KAAK,CAAC,QAAQ;gBACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;AACxB,gBAAA,KAAK,EAAE;oBACL,KAAK,CAAC,SAAS,GAAG,wBAAwB,GAAG,cAAc;AAC3D,oBAAA;wBACE,YAAY,EAAE,KAAK,CAAC,OAAO;wBAC3B,UAAU,EAAE,KAAK,CAAC,KAAK;AACxB,qBAAA;AACF,iBAAA;gBACD,QAAQ,EAAE,CAAC,KAAiB,KAAK,YAAY,CAAC,KAAK,CAAC;gBACpD,OAAO,EAAE,CAAC,KAAiB,KAAK,WAAW,CAAC,KAAK,CAAC;AAClD,gBAAA,IAAI,KAAK,CAAC,UAAU,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE;aACpD,EACD,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CACjC;YACH,IAAI,KAAK,CAAC,QAAQ,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE;AAC5E,YAAA,IAAI,KAAK,CAAC,eAAe,IAAI;gBAC3B,eAAe,EAAE,MAAM,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe,EAAE;aACxE;AACD,YAAA,IAAI,KAAK,CAAC,aAAa,IAAI;gBACzB,aAAa,EAAE,MAAM,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe,EAAE;aACtE;YACD,IAAI,KAAK,CAAC,KAAK,IAAI,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,EAAE;YAChE,IAAI,KAAK,CAAC,IAAI,IAAI,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,EAAE,EAAE;AAC7D,SAAA,CACF,CAAA;KACJ;AACF,CAAA;;;;"}

package/dist/cjs/components/form/CInputGroup.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var vue = require('vue');
+
+const CInputGroup = vue.defineComponent({
+    name: 'CInputGroup',
+    props: {
+        /**
+         * Size the component small or large.
+         *
+         * @values 'sm', 'lg'
+         */
+        size: {
+            type: String,
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
+        },
+    },
+    setup(props, { slots }) {
+        return () => vue.h('div', {
+            class: [
+                'input-group',
+                {
+                    [`input-group-${props.size}`]: props.size,
+                },
+            ],
+        }, slots.default && slots.default());
+    },
+});
+
+exports.CInputGroup = CInputGroup;
+//# sourceMappingURL=CInputGroup.js.map

package/dist/cjs/components/form/CInputGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CInputGroup.js","sources":["../../../../src/components/form/CInputGroup.ts"],"sourcesContent":[null],"names":["defineComponent","h"],"mappings":";;;;AAEM,MAAA,WAAW,GAAGA,mBAAe,CAAC;AAClC,IAAA,IAAI,EAAE,aAAa;AACnB,IAAA,KAAK,EAAE;AACL;;;;AAIG;AACH,QAAA,IAAI,EAAE;AACJ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,SAAS,EAAE,CAAC,KAAa,KAAI;gBAC3B,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;aACpC;AACF,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA;AACpB,QAAA,OAAO,MACLC,KAAC,CACC,KAAK,EACL;AACE,YAAA,KAAK,EAAE;gBACL,aAAa;AACb,gBAAA;oBACE,CAAC,CAAA,YAAA,EAAe,KAAK,CAAC,IAAI,EAAE,GAAG,KAAK,CAAC,IAAI;AAC1C,iBAAA;AACF,aAAA;SACF,EACD,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CACjC,CAAA;KACJ;AACF,CAAA;;;;"}

package/dist/cjs/components/form/CInputGroupText.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var vue = require('vue');
+
+const CInputGroupText = vue.defineComponent({
+    name: 'CInputGroupText',
+    props: {
+        /**
+         * Component used for the root node. Either a string to use a HTML element or a component.
+         */
+        component: {
+            type: String,
+            default: 'span',
+        },
+    },
+    setup(props, { slots }) {
+        return () => vue.h(props.component, { class: 'input-group-text' }, slots.default && slots.default());
+    },
+});
+
+exports.CInputGroupText = CInputGroupText;
+//# sourceMappingURL=CInputGroupText.js.map

package/dist/cjs/components/form/CInputGroupText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CInputGroupText.js","sources":["../../../../src/components/form/CInputGroupText.ts"],"sourcesContent":[null],"names":["defineComponent","h"],"mappings":";;;;AAEM,MAAA,eAAe,GAAGA,mBAAe,CAAC;AACtC,IAAA,IAAI,EAAE,iBAAiB;AACvB,IAAA,KAAK,EAAE;AACL;;AAEG;AACH,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,OAAO,EAAE,MAAM;AAChB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAA;QACpB,OAAO,MAAMC,KAAC,CAAC,KAAK,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC,CAAA;KACjG;AACF,CAAA;;;;"}

package/dist/cjs/components/form/index.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var CForm = require('./CForm.js');
+var CFormCheck = require('./CFormCheck.js');
+var CFormFeedback = require('./CFormFeedback.js');
+var CFormFloating = require('./CFormFloating.js');
+var CFormInput = require('./CFormInput.js');
+var CFormLabel = require('./CFormLabel.js');
+var CFormRange = require('./CFormRange.js');
+var CFormSelect = require('./CFormSelect.js');
+var CFormSwitch = require('./CFormSwitch.js');
+var CFormText = require('./CFormText.js');
+var CFormTextarea = require('./CFormTextarea.js');
+var CInputGroup = require('./CInputGroup.js');
+var CInputGroupText = require('./CInputGroupText.js');
+
+const CFormPlugin = {
+    install: (app) => {
+        app.component(CForm.CForm.name, CForm.CForm);
+        app.component(CFormCheck.CFormCheck.name, CFormCheck.CFormCheck);
+        // app.component(CFormControl.name, CFormControl)
+        app.component(CFormFeedback.CFormFeedback.name, CFormFeedback.CFormFeedback);
+        app.component(CFormFloating.CFormFloating.name, CFormFloating.CFormFloating);
+        app.component(CFormInput.CFormInput.name, CFormInput.CFormInput);
+        app.component(CFormLabel.CFormLabel.name, CFormLabel.CFormLabel);
+        app.component(CFormRange.CFormRange.name, CFormRange.CFormRange);
+        app.component(CFormSelect.CFormSelect.name, CFormSelect.CFormSelect);
+        app.component(CFormSwitch.CFormSwitch.name, CFormSwitch.CFormSwitch);
+        app.component(CFormText.CFormText.name, CFormText.CFormText);
+        app.component(CFormTextarea.CFormTextarea.name, CFormTextarea.CFormTextarea);
+        app.component(CInputGroup.CInputGroup.name, CInputGroup.CInputGroup);
+        app.component(CInputGroupText.CInputGroupText.name, CInputGroupText.CInputGroupText);
+    },
+};
+
+exports.CForm = CForm.CForm;
+exports.CFormCheck = CFormCheck.CFormCheck;
+exports.CFormFeedback = CFormFeedback.CFormFeedback;
+exports.CFormFloating = CFormFloating.CFormFloating;
+exports.CFormInput = CFormInput.CFormInput;
+exports.CFormLabel = CFormLabel.CFormLabel;
+exports.CFormRange = CFormRange.CFormRange;
+exports.CFormSelect = CFormSelect.CFormSelect;
+exports.CFormSwitch = CFormSwitch.CFormSwitch;
+exports.CFormText = CFormText.CFormText;
+exports.CFormTextarea = CFormTextarea.CFormTextarea;
+exports.CInputGroup = CInputGroup.CInputGroup;
+exports.CInputGroupText = CInputGroupText.CInputGroupText;
+exports.CFormPlugin = CFormPlugin;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/form/index.ts"],"sourcesContent":[null],"names":["CForm","CFormCheck","CFormFeedback","CFormFloating","CFormInput","CFormLabel","CFormRange","CFormSelect","CFormSwitch","CFormText","CFormTextarea","CInputGroup","CInputGroupText"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,WAAW,GAAG;AAClB,IAAA,OAAO,EAAE,CAAC,GAAQ,KAAU;QAC1B,GAAG,CAAC,SAAS,CAACA,WAAK,CAAC,IAAI,EAAEA,WAAK,CAAC,CAAA;QAChC,GAAG,CAAC,SAAS,CAACC,qBAAU,CAAC,IAAI,EAAEA,qBAAU,CAAC,CAAA;;QAE1C,GAAG,CAAC,SAAS,CAACC,2BAAa,CAAC,IAAI,EAAEA,2BAAa,CAAC,CAAA;QAChD,GAAG,CAAC,SAAS,CAACC,2BAAa,CAAC,IAAI,EAAEA,2BAAa,CAAC,CAAA;QAChD,GAAG,CAAC,SAAS,CAACC,qBAAU,CAAC,IAAI,EAAEA,qBAAU,CAAC,CAAA;QAC1C,GAAG,CAAC,SAAS,CAACC,qBAAU,CAAC,IAAI,EAAEA,qBAAU,CAAC,CAAA;QAC1C,GAAG,CAAC,SAAS,CAACC,qBAAU,CAAC,IAAI,EAAEA,qBAAU,CAAC,CAAA;QAC1C,GAAG,CAAC,SAAS,CAACC,uBAAW,CAAC,IAAI,EAAEA,uBAAW,CAAC,CAAA;QAC5C,GAAG,CAAC,SAAS,CAACC,uBAAW,CAAC,IAAI,EAAEA,uBAAW,CAAC,CAAA;QAC5C,GAAG,CAAC,SAAS,CAACC,mBAAS,CAAC,IAAI,EAAEA,mBAAS,CAAC,CAAA;QACxC,GAAG,CAAC,SAAS,CAACC,2BAAa,CAAC,IAAI,EAAEA,2BAAa,CAAC,CAAA;QAChD,GAAG,CAAC,SAAS,CAACC,uBAAW,CAAC,IAAI,EAAEA,uBAAW,CAAC,CAAA;QAC5C,GAAG,CAAC,SAAS,CAACC,+BAAe,CAAC,IAAI,EAAEA,+BAAe,CAAC,CAAA;KACrD;;;;;;;;;;;;;;;;;;"}