feat(CFormFeedback): add new component

Author: mrholek

src/components/form/CFormFeedback.ts

@@ -0,0 +1,46 @@
+import { defineComponent, h } from 'vue'
+
+const CFormFeedback = defineComponent({
+  name: 'CFormFeedback',
+  props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     *
+     * @default 'div'
+     */
+    component: {
+      type: String,
+      required: false,
+      default: 'div',
+    },
+    /**
+     * Method called immediately after the `value` prop changes.
+     */
+    invalid: Boolean,
+    /**
+     * If your form layout allows it, you can display validation feedback in a styled tooltip.
+     */
+    tooltip: Boolean,
+    /**
+     * Set component validation state to valid.
+     */
+    valid: Boolean,
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        props.component,
+        {
+          class: [
+            {
+              [`invalid-${props.tooltip ? 'tooltip' : 'feedback'}`]: props.invalid,
+              [`valid-${props.tooltip ? 'tooltip' : 'feedback'}`]: props.valid,
+            },
+          ],
+        },
+        slots.default && slots.default(),
+      )
+  },
+})
+
+export { CFormFeedback }

src/components/form/index.ts

@@ -2,6 +2,7 @@ import { App } from 'vue'
 import { CForm } from './CForm'
 import { CFormCheck } from './CFormCheck'
 import { CFormControl } from './CFormControl'
+import { CFormFeedback } from './CFormFeedback'
 import { CFormFloating } from './CFormFloating'
 import { CFormInput } from './CFormInput'
 import { CFormLabel } from './CFormLabel'
@@ -18,6 +19,7 @@ const CFormPlugin = {
     app.component(CForm.name, CForm)
     app.component(CFormCheck.name, CFormCheck)
     app.component(CFormControl.name, CFormControl)
+    app.component(CFormFeedback.name, CFormFeedback)
     app.component(CFormFloating.name, CFormFloating)
     app.component(CFormInput.name, CFormInput)
     app.component(CFormLabel.name, CFormLabel)
@@ -36,6 +38,7 @@ export {
   CForm,
   CFormCheck,
   CFormControl,
+  CFormFeedback,
   CFormFloating,
   CFormInput,
   CFormLabel,