+68
-9
lines changedFilter options
+68
-9
lines changed Original file line number Diff line number Diff line change
@@ -48,7 +48,7 @@
48 48
pointer-events: none;
49 49
}
50 50 51 -
&:hover:not(:disabled) > div {
51 +
&:hover:not(:disabled) > div > .b-icon {
52 52
transform: scale(1.25);
53 53
}
54 54
}
@@ -9,6 +9,7 @@ import { toString } from '../../utils/string'
9 9
import identity from '../../utils/identity'
10 10
import KeyCodes from '../../utils/key-codes'
11 11
import idMixin from '../../mixins/id'
12 +
import normalizeSlotMixin from '../../mixins/normalize-slot'
12 13
import { BIconPlus, BIconDash } from '../../icons/icons'
13 14 14 15
// --- Constants ---
@@ -47,7 +48,7 @@ const defaultInteger = (value, defaultValue = null) => {
47 48
// @vue/component
48 49
export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
49 50
name: NAME,
50 -
mixins: [idMixin],
51 +
mixins: [idMixin, normalizeSlotMixin],
51 52
inheritAttrs: false,
52 53
props: {
53 54
value: {
@@ -439,11 +440,12 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
439 440
const hasValue = !isNull(value)
440 441
const formatter = isFunction(this.formatterFn) ? this.formatterFn : this.defaultFormatter
441 442 442 -
const makeButton = (stepper, label, IconCmp, keyRef, shortcut, btnDisabled) => {
443 +
const makeButton = (stepper, label, IconCmp, keyRef, shortcut, btnDisabled, slotName) => {
443 444
const $icon = h(IconCmp, {
444 445
props: { scale: this.hasFocus ? 1.5 : 1.25 },
445 446
attrs: { 'aria-hidden': 'true' }
446 447
})
448 +
const scope = { hasFocus: this.hasFocus }
447 449
const handler = evt => {
448 450
if (!isDisabled && !isReadonly) {
449 451
evt.preventDefault()
@@ -476,12 +478,28 @@ export const BFormSpinbutton = /*#__PURE__*/ Vue.extend({
476 478
touchstart: handler
477 479
}
478 480
},
479 -
[h('div', {}, [$icon])]
481 +
[h('div', {}, [this.normalizeSlot(slotName, scope) || $icon])]
480 482
)
481 483
}
482 484
// TODO: Add button disabled state when `wrap` is `false` and at value max/min
483 -
const $increment = makeButton(this.stepUp, this.labelIncrement, BIconPlus, 'inc', 'ArrowUp')
484 -
const $decrement = makeButton(this.stepDown, this.labelDecrement, BIconDash, 'dec', 'ArrowDown')
485 +
const $increment = makeButton(
486 +
this.stepUp,
487 +
this.labelIncrement,
488 +
BIconPlus,
489 +
'inc',
490 +
'ArrowUp',
491 +
false,
492 +
'increment'
493 +
)
494 +
const $decrement = makeButton(
495 +
this.stepDown,
496 +
this.labelDecrement,
497 +
BIconDash,
498 +
'dec',
499 +
'ArrowDown',
500 +
false,
501 +
'decrement'
502 +
)
485 503 486 504
let $hidden = h()
487 505
if (this.name && !isDisabled) {
@@ -99,6 +99,32 @@
99 99
"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"
100 100
}
101 101
],
102 +
"slots": [
103 +
{
104 +
"name": "increment",
105 +
"version": "2.8.0",
106 +
"description": "Custom content to place in the increment button",
107 +
"scope": [
108 +
{
109 +
"prop": "hasFocus",
110 +
"type": "Boolean",
111 +
"description": "`true` when the spinbutton has focus"
112 +
}
113 +
]
114 +
},
115 +
{
116 +
"name": "decrement",
117 +
"version": "2.8.0",
118 +
"description": "Custom content to place in the decrement button",
119 +
"scope": [
120 +
{
121 +
"prop": "hasFocus",
122 +
"type": "Boolean",
123 +
"description": "`true` when the spinbutton has focus"
124 +
}
125 +
]
126 +
}
127 +
],
102 128
"events": [
103 129
{
104 130
"event": "input",
@@ -236,8 +236,7 @@ In the following simple example, we are placing the timepicker (button only mode
236 236
button-only
237 237
right
238 238
show-seconds
239 -
:hour12="false"
240 -
locale="en-US"
239 +
locale="en"
241 240
aria-controls="example-input"
242 241
></b-form-timepicker>
243 242
</b-input-group-append">
@@ -17,7 +17,7 @@ import idMixin from '../../mixins/id'
17 17
import normalizeSlotMixin from '../../mixins/normalize-slot'
18 18
// Sub components used
19 19
import { BFormSpinbutton } from '../form-spinbutton/form-spinbutton'
20 -
import { BIconCircleFill } from '../../icons/icons'
20 +
import { BIconCircleFill, BIconChevronUp } from '../../icons/icons'
21 21 22 22
// --- Constants ---
23 23
@@ -288,6 +288,21 @@ export const BTime = /*#__PURE__*/ Vue.extend({
288 288
return this.timeFormatter(createDate(Date.UTC(0, 0, 1, hours, minutes, seconds)))
289 289
}
290 290
return this.labelNoTimeSelected || ' '
291 +
},
292 +
spinScopedSlots() {
293 +
const h = this.$createElement
294 +
return {
295 +
increment: ({ hasFocus }) =>
296 +
h(BIconChevronUp, {
297 +
props: { scale: hasFocus ? 1.5 : 1.25 },
298 +
attrs: { 'aria-hidden': 'true' }
299 +
}),
300 +
decrement: ({ hasFocus }) =>
301 +
h(BIconChevronUp, {
302 +
props: { flipV: true, scale: hasFocus ? 1.5 : 1.25 },
303 +
attrs: { 'aria-hidden': 'true' }
304 +
})
305 +
}
291 306
}
292 307
},
293 308
watch: {
@@ -467,6 +482,7 @@ export const BTime = /*#__PURE__*/ Vue.extend({
467 482
min: 0,
468 483
...spinbuttonProps
469 484
},
485 +
scopedSlots: this.spinScopedSlots,
470 486
on: {
471 487
// We use `change` event to minimize SR verbosity
472 488
// As the spinbutton will announce each value change
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4