Update form-group.js

src/components/form-group/form-group.js

@@ -17,6 +17,9 @@ import BFormText from '../form/form-text'
 import BFormInvalidFeedback from '../form/form-invalid-feedback'
 import BFormValidFeedback from '../form/form-valid-feedback'
 
+// Component name
+const NAME = 'BFormGroup'
+
 // Selector for finding first input in the form-group
 const SELECTOR = 'input:not(:disabled),textarea:not(:disabled),select:not(:disabled)'
 
@@ -35,7 +38,7 @@ const renderInvalidFeedback = (h, ctx) => {
   let invalidFeedback = h(false)
   if (content) {
     invalidFeedback = h(
-      'b-form-invalid-feedback',
+      BFormInvalidFeedback,
       {
         props: {
           id: ctx.invalidFeedbackId,
@@ -61,7 +64,7 @@ const renderValidFeedback = (h, ctx) => {
   let validFeedback = h(false)
   if (content) {
     validFeedback = h(
-      'b-form-valid-feedback',
+      BFormValidFeedback,
       {
         props: {
           id: ctx.validFeedbackId,
@@ -88,7 +91,7 @@ const renderHelpText = (h, ctx) => {
   let description = h(false)
   if (content) {
     description = h(
-      'b-form-text',
+      BFormText,
       {
         attrs: {
           id: ctx.descriptionId,
@@ -122,12 +125,12 @@ const renderLabel = (h, ctx) => {
         [content]
       )
     }
-    return h(isHorizontal ? 'b-col' : 'div', { props: isHorizontal ? ctx.labelColProps : {} }, [
+    return h(isHorizontal ? BCol : 'div', { props: isHorizontal ? ctx.labelColProps : {} }, [
       label
     ])
   } else {
     return h(
-      isHorizontal ? 'b-col' : labelTag,
+      isHorizontal ? BCol : labelTag,
       {
         on: isLegend ? { click: ctx.legendClick } : {},
         props: isHorizontal ? { tag: labelTag, ...ctx.labelColProps } : {},
@@ -188,14 +191,7 @@ export default (resolve, reject) => {
 
   // @vue/component
   const BFormGroup = {
-    name: 'BFormGroup',
-    components: {
-      BFormRow,
-      BCol,
-      BFormInvalidFeedback,
-      BFormValidFeedback,
-      BFormText
-    },
+    name: NAME,
     mixins: [idMixin, formStateMixin],
     props: {
       label: {
@@ -416,7 +412,7 @@ export default (resolve, reject) => {
       const label = renderLabel(h, this)
       // Generate the content
       const content = h(
-        isHorizontal ? 'b-col' : 'div',
+        isHorizontal ? BCol : 'div',
         {
           ref: 'content',
           attrs: {
@@ -453,9 +449,9 @@ export default (resolve, reject) => {
       // to them due to browser specific render issues, so we move the `form-row`
       // to an inner wrapper div when horizontal and using a fieldset
       return h(
-        isFieldset ? 'fieldset' : isHorizontal ? 'b-form-row' : 'div',
+        isFieldset ? 'fieldset' : isHorizontal ? BFormRow : 'div',
         data,
-        isHorizontal && isFieldset ? [h('b-form-row', {}, [label, content])] : [label, content]
+        isHorizontal && isFieldset ? [h(BFormRow, {}, [label, content])] : [label, content]
       )
     }
   }