Skip to content
Permalink
Browse files
feat(b-form-spinbutton): add slots for increment and decrement button…
… content (closes #4958) (#4963)

Co-authored-by: Jacob Müller
  • Loading branch information
tmorehouse committed Mar 19, 2020
1 parent d481365 commit 5684405197c8dd03b0711b0efc11ab6d76fb7714
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 9 deletions.
@@ -48,7 +48,7 @@
pointer-events: none;
}

&:hover:not(:disabled) > div {
&:hover:not(:disabled) > div > .b-icon {
transform: scale(1.25);
}
}
@@ -9,6 +9,7 @@ import { toString } from '../../utils/string'
import identity from '../../utils/identity'
import KeyCodes from '../../utils/key-codes'
import idMixin from '../../mixins/id'
import normalizeSlotMixin from '../../mixins/normalize-slot'
import { BIconPlus, BIconDash } from '../../icons/icons'

// --- Constants ---
@@ -47,7 +48,7 @@ const defaultInteger = (value, defaultValue = null) => {
// @vue/component
export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
name: NAME,
mixins: [idMixin],
mixins: [idMixin, normalizeSlotMixin],
inheritAttrs: false,
props: {
value: {
@@ -439,11 +440,12 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
const hasValue = !isNull(value)
const formatter = isFunction(this.formatterFn) ? this.formatterFn : this.defaultFormatter

const makeButton = (stepper, label, IconCmp, keyRef, shortcut, btnDisabled) => {
const makeButton = (stepper, label, IconCmp, keyRef, shortcut, btnDisabled, slotName) => {
const $icon = h(IconCmp, {
props: { scale: this.hasFocus ? 1.5 : 1.25 },
attrs: { 'aria-hidden': 'true' }
})
const scope = { hasFocus: this.hasFocus }
const handler = evt => {
if (!isDisabled && !isReadonly) {
evt.preventDefault()
@@ -476,12 +478,28 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
touchstart: handler
}
},
[h('div', {}, [$icon])]
[h('div', {}, [this.normalizeSlot(slotName, scope) || $icon])]
)
}
// TODO: Add button disabled state when `wrap` is `false` and at value max/min
const $increment = makeButton(this.stepUp, this.labelIncrement, BIconPlus, 'inc', 'ArrowUp')
const $decrement = makeButton(this.stepDown, this.labelDecrement, BIconDash, 'dec', 'ArrowDown')
const $increment = makeButton(
this.stepUp,
this.labelIncrement,
BIconPlus,
'inc',
'ArrowUp',
false,
'increment'
)
const $decrement = makeButton(
this.stepDown,
this.labelDecrement,
BIconDash,
'dec',
'ArrowDown',
false,
'decrement'
)

let $hidden = h()
if (this.name && !isDisabled) {
@@ -99,6 +99,32 @@
"description": "Number of steps to jump by once the `repeat-threshold` has been reached. Must be a positive integer. This value is also used for the page up and down keys"
}
],
"slots": [
{
"name": "increment",
"version": "2.8.0",
"description": "Custom content to place in the increment button",
"scope": [
{
"prop": "hasFocus",
"type": "Boolean",
"description": "`true` when the spinbutton has focus"
}
]
},
{
"name": "decrement",
"version": "2.8.0",
"description": "Custom content to place in the decrement button",
"scope": [
{
"prop": "hasFocus",
"type": "Boolean",
"description": "`true` when the spinbutton has focus"
}
]
}
],
"events": [
{
"event": "input",
@@ -236,8 +236,7 @@ In the following simple example, we are placing the timepicker (button only mode
button-only
right
show-seconds
:hour12="false"
locale="en-US"
locale="en"
aria-controls="example-input"
></b-form-timepicker>
</b-input-group-append">
@@ -17,7 +17,7 @@ import idMixin from '../../mixins/id'
import normalizeSlotMixin from '../../mixins/normalize-slot'
// Sub components used
import { BFormSpinbutton } from '../form-spinbutton/form-spinbutton'
import { BIconCircleFill } from '../../icons/icons'
import { BIconCircleFill, BIconChevronUp } from '../../icons/icons'

// --- Constants ---

@@ -288,6 +288,21 @@ export const BTime = /*#__PURE__*/ Vue.extend({
return this.timeFormatter(createDate(Date.UTC(0, 0, 1, hours, minutes, seconds)))
}
return this.labelNoTimeSelected || ' '
},
spinScopedSlots() {
const h = this.$createElement
return {
increment: ({ hasFocus }) =>
h(BIconChevronUp, {
props: { scale: hasFocus ? 1.5 : 1.25 },
attrs: { 'aria-hidden': 'true' }
}),
decrement: ({ hasFocus }) =>
h(BIconChevronUp, {
props: { flipV: true, scale: hasFocus ? 1.5 : 1.25 },
attrs: { 'aria-hidden': 'true' }
})
}
}
},
watch: {
@@ -467,6 +482,7 @@ export const BTime = /*#__PURE__*/ Vue.extend({
min: 0,
...spinbuttonProps
},
scopedSlots: this.spinScopedSlots,
on: {
// We use `change` event to minimize SR verbosity
// As the spinbutton will announce each value change

0 comments on commit 5684405

Please sign in to comment.