feat(form-fieldset): label, description, and feedback slots, deprecat…

…e label-size (#598)

* [form-fieldset] Add label, description,a and feedback slots, deprecate label-size

Add named slots for label, feedback, and description.

Deprecate label-size in favour of label-cols

docs/components/form-fieldset/README.md

@@ -5,23 +5,29 @@ purpose is to provide a label and control pairing, help text and feedback text,
 as contextual state visual feedback
 
 ### Label
-The content of the generted `<label>` element (html supported).
-You may optionally visually hide the label by setting the prop `label-sr-only`.
+Use the prop `label` to set the content of the generted `<label>` element (html supported),
+or by using the named slot `label`, You may optionally visually hide the label by setting
+the prop `label-sr-only`.
 
 By default, the label apepars above the input element, but you may optionallu set
 the prop `horizontal` to place the label on the same line and control the width
-of the label by setting `label-size` to the number of columns (default of `3`).
-`label-size` has no effect if the layout is not `horizontal`
+of the label by setting `label-cols` to the number of columns (default of `3`,
+valid range of 1 through 11). `label-cols` has no effect if the layout is
+not `horizontal`.
+
+_**Note**: `label-size` has been deprecated in favour of `label-cols`._
 
 The label may also optionally be alligned `left`, `center` or `right` by setting
 the respective value via the prop `label-text-align`. Alignment has no effect if
 `label-sr-only` is set.
 
 ### Description
-Optional descriptive text which is always shown with the `.text-muted` class (html supported).
+Optional descriptive text which is always shown with the `.text-muted` class
+(html supported) by setting the `description` prop or using the named slot `description`.
 
 ### Feedback
-Optional text to provide textual state feedback (html supported).
+Show optional text to provide textual state feedback (html supported) by setting the
+prop `feedback` or using the named slot `feedback`.
 
 ### Contextual visual state
 Optional contextual visual feedback state of `danger`, `warning` or `success`.

docs/components/form-fieldset/meta.json

@@ -1,5 +1,19 @@
 {
   "title": "Form Fieldset",
   "component": "bFormFieldset",
-  "jsfiddle": "7ztq8nzd"
-}
+  "jsfiddle": "7ztq8nzd",
+  "slots": [
+    {
+      "name": "label",
+      "description": "Content to palce inside the <label> element."
+    },
+    {
+      "name": "description",
+      "description": "Content to palce in the description area."
+    },
+    {
+      "name": "feedback",
+      "description": "Content to place in the feedback area"
+    }
+  ]
+}

lib/components/form-fieldset.vue

@@ -4,32 +4,37 @@
          role="group"
          :aria-describedby="describedBy"
     >
-        <label v-if="label"
+        <label v-if="label || $slots['label']"
                :for="target"
                :id="labelId"
                :class="[labelSrOnly ? 'sr-only' : 'col-form-label',labelLayout,labelAlignClass]"
-               v-html="label"
-        ></label>
+        >
+            <slot name="label"><span v-html="label"></span></slot>
+        </label>
         <div :class="inputLayout" ref="content">
             <slot></slot>
-            <div v-if="feedback"
+            <div v-if="feedback || $slots['feedback']"
                  class="form-text form-control-feedback"
                  :id="feedbackId"
                  role="alert"
                  aria-live="assertive"
                  aria-atomic="true"
-                 v-html="feedback"
-            ></div>
-            <small v-if="description"
+            >
+                <slot name="feedback"><span v-html="feedback"></span></slot>
+            </div>
+            <small v-if="description || $slots['description']"
                    class="form-text text-muted"
                    :id="descriptionId"
-                   v-html="description"
-            ></small>
+            >
+                <slot name="description"><span v-html="description"></span></slot>
+            </small>
         </div>
     </div>
 </template>
 
 <script>
+    import warn from '../utils/warn';
+
     export default {
         data() {
             return {
@@ -59,11 +64,18 @@
             inputState() {
                 return this.state ? `has-${this.state}` : '';
             },
+            computedLabelCols() {
+                if (this.labelSize) {
+                    warn('b-form-fieldset: prop label-size has been deprecated. Use label-cols instead');
+                    return this.labelSize;
+                }
+                return this.labelCols;
+            },
             labelLayout() {
                 if (this.labelSrOnly) {
                     return null;
                 }
-                return this.horizontal ? ('col-sm-' + this.labelSize) : 'col-12';
+                return this.horizontal ? ('col-sm-' + this.computedLabelCols) : 'col-12';
             },
             labelAlignClass() {
                 if (this.labelSrOnly) {
@@ -72,7 +84,7 @@
                 return this.labelTextAlign ? `text-${this.labelTextAlign}` : null;
             },
             inputLayout() {
-                return this.horizontal ? ('col-sm-' + (12 - this.labelSize)) : 'col-12';
+                return this.horizontal ? ('col-sm-' + (12 - this.computedLabelCols)) : 'col-12';
             }
         },
         methods: {
@@ -111,9 +123,19 @@
                 type: Boolean,
                 default: false
             },
-            labelSize: {
+            labelCols: {
                 type: Number,
-                default: 3
+                default: 3,
+                validator(value) {
+                    if (value >= 1 && value <= 11) {
+                        return true;
+                    }
+                    warn('b-form-fieldset: label-cols must be a value between 1 and 11');
+                    return false;
+                }
+            },
+            labelSize: {
+                type: Number
             },
             labelTextAlign: {
                 type: String,