Skip to content

Commit da5e473

Browse files
tmorehousejacobmllr95
tmorehouse
and
jacobmllr95
authored
feat(b-form-spinbutton): new form control component b-form-spinbutton (bootstrap-vue#4744)
Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
1 parent 1113c6f commit da5e473

15 files changed

+2051
-20
lines changed

‎src/components/calendar/calendar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -770,7 +770,7 @@ export const BCalendar = Vue.extend({
770770
type: 'button',
771771
'aria-label': label || null,
772772
'aria-disabled': btnDisabled ? 'true' : null,
773-
'aria-shortcutkeys': shortcut || null
773+
'aria-keyshortcuts': shortcut || null
774774
},
775775
on: btnDisabled ? {} : { click: handler }
776776
},

‎src/components/form-datepicker/README.md

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
As a form control wrapper component for the [`<b-calendar>`](/docs/components/calendar) component,
77
it provides additional validation state presentation and a compact interface. Native HTML5 date
88
inputs vary in presentation, accessibility, and in some instances are not supported by all browsers.
9-
`<b-form-datepicker>` provides a consistent and accessible interface across all browser platforms and
10-
devices.
9+
`<b-form-datepicker>` provides a consistent and accessible interface across all browser platforms
10+
and devices.
1111

1212
The `<b-form-datepicker>` component was introduced in BootstrapVue release `v2.5.0`.
1313

@@ -41,8 +41,8 @@ The `<b-form-datepicker>` component was introduced in BootstrapVue release `v2.5
4141

4242
By default, `<b-form-datepicker>` returns dates as a string in the `YYYY-MM-DD` format, which is the
4343
same format returned by native browser `<input type="date">` controls. You can have
44-
`<b-form-datepicker>` return a `Date` object (with no time portion) as the `v-model` value instead by
45-
setting the `value-as-date` prop.
44+
`<b-form-datepicker>` return a `Date` object (with no time portion) as the `v-model` value instead
45+
by setting the `value-as-date` prop.
4646

4747
If no date is selected, `<b-form-datepicker>` returns an empty string `''`, or returns `null` if the
4848
`value-as-date` prop is set.
@@ -51,9 +51,9 @@ Note that when `value-as-date` prop is set, the returned `Date` object will be i
5151
default timezone.
5252

5353
If `<b-form-datepicker>` has a value set for the `name` prop, a hidden input will be created which
54-
will have its name attribute set to the value of the `name` prop, and the value attribute will be set
55-
to the selected date as a `YYYY-MM-DD` string. This will allow the `<b-form-datepicker>` selected
56-
value to be submitted via native browser form submission.
54+
will have its name attribute set to the value of the `name` prop, and the value attribute will be
55+
set to the selected date as a `YYYY-MM-DD` string. This will allow the `<b-form-datepicker>`
56+
selected value to be submitted via native browser form submission.
5757

5858
## Disabled and readonly states
5959

@@ -186,9 +186,10 @@ Note the `min` and `max` date constraints are evaluated first, before `date-disa
186186

187187
## Validation states
188188

189-
`<b-form-datepicker>` supports invalid and valid styling via the boolean `state` prop. Setting `state`
190-
to boolean `false` will style the input as invalid, while setting it to boolean `true` will style it
191-
as valid. Setting `state` to `null` will not show any validation state styling (the default).
189+
`<b-form-datepicker>` supports invalid and valid styling via the boolean `state` prop. Setting
190+
`state` to boolean `false` will style the input as invalid, while setting it to boolean `true` will
191+
style it as valid. Setting `state` to `null` will not show any validation state styling (the
192+
default).
192193

193194
```html
194195
<template>
@@ -308,9 +309,9 @@ except for labels applied to elements of the calendar control (aria-labels, sele
308309
help text). You must provide your own translations for these labels. The available locales will be
309310
browser dependant (not all browsers support all locales)
310311

311-
By default `<b-form-datepicker>` will use the browser's default locale, but you can specify the locale
312-
(or locales) to use via the `locale` prop. The prop accepts either a single locale string, or an array
313-
of locale strings (listed in order of preferred locale).
312+
By default `<b-form-datepicker>` will use the browser's default locale, but you can specify the
313+
locale (or locales) to use via the `locale` prop. The prop accepts either a single locale string, or
314+
an array of locale strings (listed in order of preferred locale).
314315

315316
The calendar starts the week on Sunday. This can be changed by setting the `start-weekday` prop to a
316317
number in the range of `0` to `6` where `0` represents Sunday, `1` for Monday, up to `6` for
@@ -431,8 +432,8 @@ details.
431432
`<b-form-datepicker>` is based upon the components [`<b-calendar>`](/docs/components/calendar) and
432433
[`<b-dropdown>`](/docs/components/dropdown).
433434

434-
`<b-form-datepicker>` uses Bootstrap's margin, padding, border, and flex utility classes, along
435-
with button (`btn-*`) classes, and the `form-control*` (plus validation) classes.
435+
`<b-form-datepicker>` uses Bootstrap's margin, padding, border, and flex utility classes, along with
436+
button (`btn-*`) classes, and the `form-control*` (plus validation) classes.
436437

437438
BootstrapVue's Custom SCSS/CSS is also required for proper styling of the date picker and calendar.
438439

0 commit comments

Comments
 (0)