Commit6401fbe

committed

feat(CFormFeedback): add new component

1 parent6e42bf5 commit6401fbeCopy full SHA for 6401fbe

File tree

+49

-0

lines changed

+49

-0

lines changed

Lines changed: 46 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,46 @@`
	`1`	`+import{defineComponent,h}from'vue'`
	`2`	`+`
	`3`	`+constCFormFeedback=defineComponent({`
	`4`	`+name:'CFormFeedback',`
	`5`	`+props:{`
	`6`	`+/**`
	`7`	`+ * Component used for the root node. Either a string to use a HTML element or a component.`
	`8`	`+ *`
	`9`	`+ *@default 'div'`
	`10`	`+ */`
	`11`	`+component:{`
	`12`	`+type:String,`
	`13`	`+required:false,`
	`14`	`+default:'div',`
	`15`	`+},`
	`16`	`+/**`
	`17`	+ * Method called immediately after the `value` prop changes.
	`18`	`+ */`
	`19`	`+invalid:Boolean,`
	`20`	`+/**`
	`21`	`+ * If your form layout allows it, you can display validation feedback in a styled tooltip.`
	`22`	`+ */`
	`23`	`+tooltip:Boolean,`
	`24`	`+/**`
	`25`	`+ * Set component validation state to valid.`
	`26`	`+ */`
	`27`	`+valid:Boolean,`
	`28`	`+},`
	`29`	`+setup(props,{ slots}){`
	`30`	`+return()=>`
	`31`	`+h(`
	`32`	`+props.component,`
	`33`	`+{`
	`34`	`+class:[`
	`35`	`+{`
	`36`	+[`invalid-${props.tooltip ?'tooltip' :'feedback'}`]:props.invalid,
	`37`	+[`valid-${props.tooltip ?'tooltip' :'feedback'}`]:props.valid,
	`38`	`+},`
	`39`	`+],`
	`40`	`+},`
	`41`	`+slots.default&&slots.default(),`
	`42`	`+)`
	`43`	`+},`
	`44`	`+})`
	`45`	`+`
	`46`	`+export{CFormFeedback}`

Lines changed: 3 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ import { App } from 'vue'`
`2`	`2`	`import{CForm}from'./CForm'`
`3`	`3`	`import{CFormCheck}from'./CFormCheck'`
`4`	`4`	`import{CFormControl}from'./CFormControl'`
	`5`	`+import{CFormFeedback}from'./CFormFeedback'`
`5`	`6`	`import{CFormFloating}from'./CFormFloating'`
`6`	`7`	`import{CFormInput}from'./CFormInput'`
`7`	`8`	`import{CFormLabel}from'./CFormLabel'`
`@@ -18,6 +19,7 @@ const CFormPlugin = {`
`18`	`19`	`app.component(CForm.name,CForm)`
`19`	`20`	`app.component(CFormCheck.name,CFormCheck)`
`20`	`21`	`app.component(CFormControl.name,CFormControl)`
	`22`	`+app.component(CFormFeedback.name,CFormFeedback)`
`21`	`23`	`app.component(CFormFloating.name,CFormFloating)`
`22`	`24`	`app.component(CFormInput.name,CFormInput)`
`23`	`25`	`app.component(CFormLabel.name,CFormLabel)`
`@@ -36,6 +38,7 @@ export {`
`36`	`38`	`CForm,`
`37`	`39`	`CFormCheck,`
`38`	`40`	`CFormControl,`
	`41`	`+CFormFeedback,`
`39`	`42`	`CFormFloating,`
`40`	`43`	`CFormInput,`
`41`	`44`	`CFormLabel,`

Comments

(0)