+79
-14
lines changedFilter options
+79
-14
lines changed Original file line number Diff line number Diff line change
@@ -200,9 +200,16 @@ default. To specify a different theme color to use for today's date, use the `to
200 200 201 201
To disable highlighting of today's date altogether, set the `no-highlight-today` prop.
202 202 203 +
The navigation buttons default to the `'secondary'` theme variant. You can change this via the
204 +
`nav-button-variant` prop.
205 + 203 206
```html
204 207
<template>
205 -
<b-calendar selected-variant="success" today-variant="info"></b-calendar>
208 +
<b-calendar
209 +
selected-variant="success"
210 +
today-variant="info"
211 +
nav-button-variant="primary"
212 +
></b-calendar>
206 213
</template>
207 214 208 215
<!-- b-calendar-variants.vue -->
@@ -123,12 +123,17 @@ export const BCalendar = Vue.extend({
123 123
selectedVariant: {
124 124
// Variant color to use for the selected date
125 125
type: String,
126 -
default: 'primary'
126 +
default: getComponentConfig(NAME, 'selectedVariant')
127 127
},
128 128
todayVariant: {
129 -
// Variant color to use for today's date (defaults to `variant`)
130 -
type: String
131 -
// default: null
129 +
// Variant color to use for today's date (defaults to `selectedVariant`)
130 +
type: String,
131 +
default: getComponentConfig(NAME, 'todayVariant')
132 +
},
133 +
navButtonVariant: {
134 +
// Variant color to use for the navigation buttons
135 +
type: String,
136 +
default: getComponentConfig(NAME, 'navButtonVariant')
132 137
},
133 138
noHighlightToday: {
134 139
// Disable highlighting today's date
@@ -355,6 +360,9 @@ export const BCalendar = Vue.extend({
355 360
computedTodayVariant() {
356 361
return `btn-outline-${this.todayVariant || this.selectedVariant || 'primary'}`
357 362
},
363 +
computedNavButtonVariant() {
364 +
return `btn-outline-${this.navButtonVariant || 'primary'}`
365 +
},
358 366
isRTL() {
359 367
// `true` if the language requested is RTL
360 368
const dir = toString(this.direction).toLowerCase()
@@ -889,8 +897,8 @@ export const BCalendar = Vue.extend({
889 897
return h(
890 898
'button',
891 899
{
892 -
staticClass: 'btn btn-sm btn-outline-secondary border-0 flex-fill',
893 -
class: { disabled: btnDisabled },
900 +
staticClass: 'btn btn-sm border-0 flex-fill',
901 +
class: [this.computedNavButtonVariant, { disabled: btnDisabled }],
894 902
attrs: {
895 903
title: label || null,
896 904
type: 'button',
@@ -339,4 +339,22 @@ describe('calendar', () => {
339 339 340 340
wrapper.destroy()
341 341
})
342 + 343 +
it('`nav-button-variant` changes nav button class', async () => {
344 +
const wrapper = mount(BCalendar, {
345 +
attachTo: createContainer(),
346 +
propsData: {
347 +
navButtonVariant: 'primary'
348 +
}
349 +
})
350 + 351 +
const nav = wrapper.find('.b-calendar-nav')
352 +
const buttons = nav.findAll('button')
353 +
expect(buttons.length).toBe(5)
354 +
expect(buttons.at(0).classes()).toContain('btn-outline-primary')
355 +
expect(buttons.at(1).classes()).toContain('btn-outline-primary')
356 +
expect(buttons.at(2).classes()).toContain('btn-outline-primary')
357 +
expect(buttons.at(3).classes()).toContain('btn-outline-primary')
358 +
expect(buttons.at(4).classes()).toContain('btn-outline-primary')
359 +
})
342 360
})
Original file line number Diff line number Diff line change
@@ -34,11 +34,19 @@
34 34
},
35 35
{
36 36
"prop": "selectedVariant",
37 +
"settings": true,
37 38
"description": "Theme color variant to use for the selected date button"
38 39
},
39 40
{
40 41
"prop": "todayVariant",
41 -
"description": "Theme color variant to use for highlighting todays date button. Defaults to the `variant` prop"
42 +
"settings": true,
43 +
"description": "Theme color variant to use for highlighting todays date button. Defaults to the `selectedVariant` prop"
44 +
},
45 +
{
46 +
"prop": "navButtonVariant",
47 +
"version": "2.17.0",
48 +
"settings": true,
49 +
"description": "Theme color variant to use for the navigation buttons"
42 50
},
43 51
{
44 52
"prop": "noHighlightToday",
@@ -219,6 +219,9 @@ default. To specify a different theme color to use for today's date, use the `to
219 219 220 220
To disable highlighting of today's date altogether, set the `no-highlight-today` prop.
221 221 222 +
The navigation buttons default to the `'secondary'` theme variant. You can change this via the
223 +
`nav-button-variant` prop.
224 + 222 225
### Control sizing
223 226 224 227
Fancy a smaller or larger `<b-form-datepicker>` control? Set the `size` prop to `'sm'` for a smaller
@@ -133,12 +133,17 @@ const propsMixin = {
133 133
selectedVariant: {
134 134
// Variant color to use for the selected date
135 135
type: String,
136 -
default: 'primary'
136 +
default: () => getConfigFallback('selectedVariant')
137 137
},
138 138
todayVariant: {
139 -
// Variant color to use for today's date (defaults to `variant`)
140 -
type: String
141 -
// default: null
139 +
// Variant color to use for today's date (defaults to `selectedVariant`)
140 +
type: String,
141 +
default: () => getConfigFallback('todayVariant')
142 +
},
143 +
navButtonVariant: {
144 +
// Variant color to use for the navigation buttons
145 +
type: String,
146 +
default: () => getConfigFallback('navButtonVariant')
142 147
},
143 148
noHighlightToday: {
144 149
// Disable highlighting today's date
@@ -325,6 +330,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
325 330
dateDisabledFn: self.dateDisabledFn,
326 331
selectedVariant: self.selectedVariant,
327 332
todayVariant: self.todayVariant,
333 +
navButtonVariant: self.navButtonVariant,
328 334
dateInfoFn: self.dateInfoFn,
329 335
hideHeader: self.hideHeader,
330 336
showDecadeNav: self.showDecadeNav,
@@ -46,11 +46,19 @@
46 46
},
47 47
{
48 48
"prop": "selectedVariant",
49 +
"settings": true,
49 50
"description": "Theme color variant to use for the selected date button"
50 51
},
51 52
{
52 53
"prop": "todayVariant",
53 -
"description": "Theme color variant to use for highlighting todays date button. Defaults to the `variant` prop"
54 +
"settings": true,
55 +
"description": "Theme color variant to use for highlighting todays date button. Defaults to the `selectedVariant` prop"
56 +
},
57 +
{
58 +
"prop": "navButtonVariant",
59 +
"version": "2.17.0",
60 +
"settings": true,
61 +
"description": "Theme color variant to use for the navigation buttons"
54 62
},
55 63
{
56 64
"prop": "noHighlightToday",
@@ -64,11 +64,15 @@ export default deepFreeze({
64 64
},
65 65
BButtonClose: {
66 66
content: '×',
67 -
// `textVariant` is `null` to inherit the current text color
67 +
// `textVariant` is `undefined` to inherit the current text color
68 68
textVariant: undefined,
69 69
ariaLabel: 'Close'
70 70
},
71 71
BCalendar: {
72 +
selectedVariant: 'primary',
73 +
// Defaults to `selectedVariant`
74 +
todayVariant: undefined,
75 +
navButtonVariant: 'secondary',
72 76
// BFormDate will choose these first if not provided in BFormDate section
73 77
labelPrevDecade: 'Previous decade',
74 78
labelPrevYear: 'Previous year',
@@ -102,6 +106,9 @@ export default deepFreeze({
102 106
},
103 107
BFormDatepicker: {
104 108
// BFormDatepicker will choose from BCalendar first if not provided here
109 +
selectedVariant: undefined,
110 +
todayVariant: undefined,
111 +
navButtonVariant: undefined,
105 112
labelPrevDecade: undefined,
106 113
labelPrevYear: undefined,
107 114
labelPrevMonth: undefined,
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