Permalink
Browse files

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
  • Loading branch information...
tmorehouse committed Jun 30, 2017
1 parent 59e5286 commit e253daeb00d6d6d1fee1a7ae5bd9aec7de3b12f7
Showing with 63 additions and 21 deletions.
  1. +12 −6 docs/components/form-fieldset/README.md
  2. +16 −2 docs/components/form-fieldset/meta.json
  3. +35 −13 lib/components/form-fieldset.vue
@@ -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`.
@@ -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"
}
]
}
@@ -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,

0 comments on commit e253dae

Please sign in to comment.