From 2fa1187dcefd42a599f6a8e734571601f6bc16d0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 14 Apr 2020 21:33:50 -0300 Subject: [PATCH 01/14] feat(b-calendar, b-form-datepicker): add scoped slots for month navigation buttons --- src/components/calendar/calendar.js | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js index db3faae4c14..54b1b61cd44 100644 --- a/src/components/calendar/calendar.js +++ b/src/components/calendar/calendar.js @@ -797,13 +797,28 @@ export const BCalendar = Vue.extend({ // Content for the date navigation buttons // TODO: add slots for the nav button content - const $prevDecadeIcon = h(BIconChevronBarLeft, { props: { shiftV: 0.5, flipH: isRTL } }) - const $prevYearIcon = h(BIconChevronDoubleLeft, { props: { shiftV: 0.5, flipH: isRTL } }) - const $prevMonthIcon = h(BIconChevronLeft, { props: { shiftV: 0.5, flipH: isRTL } }) - const $thisMonthIcon = h(BIconCircleFill, { props: { shiftV: 0.5 } }) - const $nextMonthIcon = h(BIconChevronLeft, { props: { shiftV: 0.5, flipH: !isRTL } }) - const $nextYearIcon = h(BIconChevronDoubleLeft, { props: { shiftV: 0.5, flipH: !isRTL } }) - const $nextDecadeIcon = h(BIconChevronBarLeft, { props: { shiftV: 0.5, flipH: !isRTL } }) + const navScope = { isRTL } + const $prevDecadeIcon = + this.normalizeSlot('nav-prev-decade', navScope) || + h(BIconChevronBarLeft, { props: { shiftV: 0.5, flipH: isRTL } }) + const $prevYearIcon = + this.normalizeSlot('nav-prev-year', navScope) || + h(BIconChevronDoubleLeft, { props: { shiftV: 0.5, flipH: isRTL } }) + const $prevMonthIcon = + this.normalizeSlot('nav-prev-month', navScope) || + h(BIconChevronLeft, { props: { shiftV: 0.5, flipH: isRTL } }) + const $thisMonthIcon = + this.normalizeSlot('nav-this-month', navScope) || + h(BIconCircleFill, { props: { shiftV: 0.5 } }) + const $nextMonthIcon = + this.normalizeSlot('nav-next-month', navScope) || + h(BIconChevronLeft, { props: { shiftV: 0.5, flipH: !isRTL } }) + const $nextYearIcon = + this.normalizeSlot('nav-next-year', navScope) || + h(BIconChevronDoubleLeft, { props: { shiftV: 0.5, flipH: !isRTL } }) + const $nextDecadeIcon = + this.normalizeSlot('nav-next-decade', navScope) || + h(BIconChevronBarLeft, { props: { shiftV: 0.5, flipH: !isRTL } }) // Utility to create the date navigation buttons const makeNavBtn = (content, label, handler, btnDisabled, shortcut) => { From 72e16e6a32101c46cfef69120581096a3b42c788 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 14 Apr 2020 21:53:37 -0300 Subject: [PATCH 02/14] Update form-datepicker.js --- src/components/form-datepicker/form-datepicker.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js index 44f2ea80089..bc160cb8c79 100644 --- a/src/components/form-datepicker/form-datepicker.js +++ b/src/components/form-datepicker/form-datepicker.js @@ -513,6 +513,15 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({ selected: this.onSelected, input: this.onInput, context: this.onContext + }, + scopedSlots: { + 'nav-prev-decade': this.$scopedSlot['nav-prev-decade'], + 'nav-prev-year': this.$scopedSlot['nav-prev-year'], + 'nav-prev-month': this.$scopedSlot['nav-prev-month'], + 'nav-this-month': this.$scopedSlot['nav-this-month'], + 'nav-next-month': this.$scopedSlot['nav-next-month'], + 'nav-next-year': this.$scopedSlot['nav-next-year'], + 'nav-next-decade': this.$scopedSlot['nav-next-decade'] } }, $footer From b0e62fe8dc909c043db009b796902f83cd954f4b Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 14 Apr 2020 21:57:00 -0300 Subject: [PATCH 03/14] Update form-datepicker.js --- src/components/form-datepicker/form-datepicker.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js index bc160cb8c79..7c3c7deee08 100644 --- a/src/components/form-datepicker/form-datepicker.js +++ b/src/components/form-datepicker/form-datepicker.js @@ -515,13 +515,13 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({ context: this.onContext }, scopedSlots: { - 'nav-prev-decade': this.$scopedSlot['nav-prev-decade'], - 'nav-prev-year': this.$scopedSlot['nav-prev-year'], - 'nav-prev-month': this.$scopedSlot['nav-prev-month'], - 'nav-this-month': this.$scopedSlot['nav-this-month'], - 'nav-next-month': this.$scopedSlot['nav-next-month'], - 'nav-next-year': this.$scopedSlot['nav-next-year'], - 'nav-next-decade': this.$scopedSlot['nav-next-decade'] + 'nav-prev-decade': this.$scopedSlots['nav-prev-decade'], + 'nav-prev-year': this.$scopedSlots['nav-prev-year'], + 'nav-prev-month': this.$scopedSlots['nav-prev-month'], + 'nav-this-month': this.$scopedSlots['nav-this-month'], + 'nav-next-month': this.$scopedSlots['nav-next-month'], + 'nav-next-year': this.$scopedSlots['nav-next-year'], + 'nav-next-decade': this.$scopedSlots['nav-next-decade'] } }, $footer From adda8755abc427981e58742a02ee67a0294a4e0e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 14 Apr 2020 21:58:53 -0300 Subject: [PATCH 04/14] Update form-datepicker.js --- src/components/form-datepicker/form-datepicker.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js index 7c3c7deee08..fc0565deb83 100644 --- a/src/components/form-datepicker/form-datepicker.js +++ b/src/components/form-datepicker/form-datepicker.js @@ -431,6 +431,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({ } }, render(h) { + const $scopedSlots = this.$scopedSlots const localYMD = this.localYMD const disabled = this.disabled const readonly = this.readonly @@ -515,13 +516,13 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({ context: this.onContext }, scopedSlots: { - 'nav-prev-decade': this.$scopedSlots['nav-prev-decade'], - 'nav-prev-year': this.$scopedSlots['nav-prev-year'], - 'nav-prev-month': this.$scopedSlots['nav-prev-month'], - 'nav-this-month': this.$scopedSlots['nav-this-month'], - 'nav-next-month': this.$scopedSlots['nav-next-month'], - 'nav-next-year': this.$scopedSlots['nav-next-year'], - 'nav-next-decade': this.$scopedSlots['nav-next-decade'] + 'nav-prev-decade': $scopedSlots['nav-prev-decade'], + 'nav-prev-year': $scopedSlots['nav-prev-year'], + 'nav-prev-month': $scopedSlots['nav-prev-month'], + 'nav-this-month': $scopedSlots['nav-this-month'], + 'nav-next-month': $scopedSlots['nav-next-month'], + 'nav-next-year': $scopedSlots['nav-next-year'], + 'nav-next-decade': $scopedSlots['nav-next-decade'] } }, $footer From af312cb54d6f7ffba6e59870e615ec0b75e3598a Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 14 Apr 2020 22:45:47 -0300 Subject: [PATCH 05/14] Update package.json --- src/components/calendar/package.json | 84 ++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) diff --git a/src/components/calendar/package.json b/src/components/calendar/package.json index 9fc266464f2..e90cb19ca00 100644 --- a/src/components/calendar/package.json +++ b/src/components/calendar/package.json @@ -223,6 +223,90 @@ { "name": "default", "description": "Used to place custom controls at the bottom of the calendar component" + }, + { + "name": "nav-prev-decade", + "version": "2.12.0", + "description": "Used to place custom content in the previous decade navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] + }, + { + "name": "nav-prev-year", + "version": "2.12.0", + "description": "Used to place custom content in the previous year navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] + }, + { + "name": "nav-prev-month", + "version": "2.12.0", + "description": "Used to place custom content in the previous month navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] + }, + { + "name": "nav-this-month", + "version": "2.12.0", + "description": "Used to place custom content in the this month/day navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] + }, + { + "name": "nav-next-month", + "version": "2.12.0", + "description": "Used to place custom content in the next month navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] + }, + { + "name": "nav-next-year", + "version": "2.12.0", + "description": "Used to place custom content in the next year navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] + }, + { + "name": "nav-next-decade", + "version": "2.12.0", + "description": "Used to place custom content in the next decade navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] } ] } From ecb189ef0885cc9c9196dc6ced9eb92e18bad2a7 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 14 Apr 2020 22:46:46 -0300 Subject: [PATCH 06/14] Update package.json --- src/components/form-datepicker/package.json | 84 +++++++++++++++++++++ 1 file changed, 84 insertions(+) diff --git a/src/components/form-datepicker/package.json b/src/components/form-datepicker/package.json index 95ab91591e9..44762185fd7 100644 --- a/src/components/form-datepicker/package.json +++ b/src/components/form-datepicker/package.json @@ -329,6 +329,90 @@ "description": "The visibility state of the popup. `true` if the popup is visible and `false` if not" } ] + }, + { + "name": "nav-prev-decade", + "version": "2.12.0", + "description": "Used to place custom content in the previous decade navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] + }, + { + "name": "nav-prev-year", + "version": "2.12.0", + "description": "Used to place custom content in the previous year navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] + }, + { + "name": "nav-prev-month", + "version": "2.12.0", + "description": "Used to place custom content in the previous month navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] + }, + { + "name": "nav-this-month", + "version": "2.12.0", + "description": "Used to place custom content in the this month/day navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] + }, + { + "name": "nav-next-month", + "version": "2.12.0", + "description": "Used to place custom content in the next month navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] + }, + { + "name": "nav-next-year", + "version": "2.12.0", + "description": "Used to place custom content in the next year navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] + }, + { + "name": "nav-next-decade", + "version": "2.12.0", + "description": "Used to place custom content in the next decade navigation button", + "scope": [ + { + "prop": "isRTL", + "type": "Boolean", + "description": "Will be `true` if the nav bar is rendered right to left" + } + ] } ] } From 6ce23800358ffcf13de98876407bef67c21082c5 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 14 Apr 2020 23:13:16 -0300 Subject: [PATCH 07/14] Update package.json --- src/components/calendar/package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/calendar/package.json b/src/components/calendar/package.json index e90cb19ca00..f64b8f18a43 100644 --- a/src/components/calendar/package.json +++ b/src/components/calendar/package.json @@ -244,7 +244,7 @@ { "prop": "isRTL", "type": "Boolean", - "description": "Will be `true` if the nav bar is rendered right to left" + "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, @@ -256,7 +256,7 @@ { "prop": "isRTL", "type": "Boolean", - "description": "Will be `true` if the nav bar is rendered right to left" + "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, @@ -268,7 +268,7 @@ { "prop": "isRTL", "type": "Boolean", - "description": "Will be `true` if the nav bar is rendered right to left" + "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, @@ -280,7 +280,7 @@ { "prop": "isRTL", "type": "Boolean", - "description": "Will be `true` if the nav bar is rendered right to left" + "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, @@ -292,7 +292,7 @@ { "prop": "isRTL", "type": "Boolean", - "description": "Will be `true` if the nav bar is rendered right to left" + "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, @@ -304,7 +304,7 @@ { "prop": "isRTL", "type": "Boolean", - "description": "Will be `true` if the nav bar is rendered right to left" + "description": "Will be `true` if the date navigation bar is rendered right to left" } ] } From 6c533d8d369792c3994064b931d7f69394065ce3 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 14 Apr 2020 23:14:07 -0300 Subject: [PATCH 08/14] Update package.json --- src/components/form-datepicker/package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/form-datepicker/package.json b/src/components/form-datepicker/package.json index 44762185fd7..e761ba97a96 100644 --- a/src/components/form-datepicker/package.json +++ b/src/components/form-datepicker/package.json @@ -338,7 +338,7 @@ { "prop": "isRTL", "type": "Boolean", - "description": "Will be `true` if the nav bar is rendered right to left" + "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, @@ -350,7 +350,7 @@ { "prop": "isRTL", "type": "Boolean", - "description": "Will be `true` if the nav bar is rendered right to left" + "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, @@ -362,7 +362,7 @@ { "prop": "isRTL", "type": "Boolean", - "description": "Will be `true` if the nav bar is rendered right to left" + "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, @@ -374,7 +374,7 @@ { "prop": "isRTL", "type": "Boolean", - "description": "Will be `true` if the nav bar is rendered right to left" + "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, @@ -386,7 +386,7 @@ { "prop": "isRTL", "type": "Boolean", - "description": "Will be `true` if the nav bar is rendered right to left" + "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, @@ -398,7 +398,7 @@ { "prop": "isRTL", "type": "Boolean", - "description": "Will be `true` if the nav bar is rendered right to left" + "description": "Will be `true` if the date navigation bar is rendered right to left" } ] }, @@ -410,7 +410,7 @@ { "prop": "isRTL", "type": "Boolean", - "description": "Will be `true` if the nav bar is rendered right to left" + "description": "Will be `true` if the date navigation bar is rendered right to left" } ] } From 8f65eea2453eb7886e398206990f5211e7f2b0f5 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 14 Apr 2020 23:24:31 -0300 Subject: [PATCH 09/14] Update README.md --- src/components/calendar/README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/components/calendar/README.md b/src/components/calendar/README.md index bcae22f01a3..c98627cab61 100644 --- a/src/components/calendar/README.md +++ b/src/components/calendar/README.md @@ -366,6 +366,31 @@ slot can be used to add buttons such as `Select Today` or `Reset`, etc. ``` +### Date navigation button slots + +2.12.0+ + +To change the content of the calendar's date navigation buttons, BootstrapVue provided scoped slots +for each button: + +- `nav-prev-decade' +- `nav-prev-year` +- `nav-prev-month` +- `nav-this-month` (the go to selected/today button) +- `nav-next-month` +- `nav-next-year` +- `nav-next-decade` + +All seven slots have the same scoped property available: + +| Property | Type | Description | +| -------- | ------- | --------------------------------------------------------------------- | +| `isRTL` | Boolean | Will be `true` when the date navigation bar is rendered right-to-left | + +You can use the `isRTL` scoped property to "flip" the prev vs next button content to handle the +left-to-right to right-to-left orientation change — i.e. the previous year button will be on +the right when `isRTL` is `true`, instead of the left. + ### Adding CSS classes to specific dates If you need to highlight a specific date or dates, set the `date-info-fn` prop to a reference to a From aa6b4cc5ce149d12ed647376fc154a74917968e7 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 14 Apr 2020 23:25:28 -0300 Subject: [PATCH 10/14] Update README.md --- src/components/form-datepicker/README.md | 25 ++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src/components/form-datepicker/README.md b/src/components/form-datepicker/README.md index 253d5533b4d..2c359bf9bde 100644 --- a/src/components/form-datepicker/README.md +++ b/src/components/form-datepicker/README.md @@ -439,6 +439,31 @@ Notes: - `year`, `month` and `day` will always be shown. If you need to leave out a value, set the property to `undefined`, although this is highly discouraged for accessibility reasons +### Date navigation button slots + +2.12.0+ + +To change the content of the calendar's date navigation buttons, BootstrapVue provided scoped slots +for each button: + +- `nav-prev-decade' +- `nav-prev-year` +- `nav-prev-month` +- `nav-this-month` (the go to selected/today button) +- `nav-next-month` +- `nav-next-year` +- `nav-next-decade` + +All seven slots have the same scoped property available: + +| Property | Type | Description | +| -------- | ------- | --------------------------------------------------------------------- | +| `isRTL` | Boolean | Will be `true` when the date navigation bar is rendered right-to-left | + +You can use the `isRTL` scoped property to "flip" the prev vs next button content to handle the +left-to-right to right-to-left orientation change — i.e. the previous year button will be on +the right when `isRTL` is `true`, instead of the left. + ## Internationalization Internationalization of the date picker's calendar is provided via From b2889bcd9370e8051564b6a88f76d02b2b85e150 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 15 Apr 2020 08:58:55 +0200 Subject: [PATCH 11/14] Update README.md --- src/components/calendar/README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/calendar/README.md b/src/components/calendar/README.md index c98627cab61..3efb92ff386 100644 --- a/src/components/calendar/README.md +++ b/src/components/calendar/README.md @@ -370,16 +370,16 @@ slot can be used to add buttons such as `Select Today` or `Reset`, etc. 2.12.0+ -To change the content of the calendar's date navigation buttons, BootstrapVue provided scoped slots +To change the content of the calendar's date navigation buttons, BootstrapVue provides scoped slots for each button: -- `nav-prev-decade' -- `nav-prev-year` -- `nav-prev-month` -- `nav-this-month` (the go to selected/today button) -- `nav-next-month` -- `nav-next-year` -- `nav-next-decade` +- `'nav-prev-decade'` +- `'nav-prev-year'` +- `'nav-prev-month'` +- `'nav-this-month'` (the go to selected/today button) +- `'nav-next-month'` +- `'nav-next-year'` +- `'nav-next-decade'` All seven slots have the same scoped property available: From ff24bf2e63fa9d2b2b6e973fcc7fbd3dbc6b34e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 15 Apr 2020 08:58:59 +0200 Subject: [PATCH 12/14] Update calendar.js --- src/components/calendar/calendar.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/calendar/calendar.js b/src/components/calendar/calendar.js index 54b1b61cd44..b1a9e5e42ef 100644 --- a/src/components/calendar/calendar.js +++ b/src/components/calendar/calendar.js @@ -796,29 +796,28 @@ export const BCalendar = Vue.extend({ ) // Content for the date navigation buttons - // TODO: add slots for the nav button content const navScope = { isRTL } + const navProps = { shiftV: 0.5 } + const navPrevProps = { ...navProps, flipH: isRTL } + const navNextProps = { ...navProps, flipH: !isRTL } const $prevDecadeIcon = this.normalizeSlot('nav-prev-decade', navScope) || - h(BIconChevronBarLeft, { props: { shiftV: 0.5, flipH: isRTL } }) + h(BIconChevronBarLeft, { props: navPrevProps }) const $prevYearIcon = this.normalizeSlot('nav-prev-year', navScope) || - h(BIconChevronDoubleLeft, { props: { shiftV: 0.5, flipH: isRTL } }) + h(BIconChevronDoubleLeft, { props: navPrevProps }) const $prevMonthIcon = - this.normalizeSlot('nav-prev-month', navScope) || - h(BIconChevronLeft, { props: { shiftV: 0.5, flipH: isRTL } }) + this.normalizeSlot('nav-prev-month', navScope) || h(BIconChevronLeft, { props: navPrevProps }) const $thisMonthIcon = - this.normalizeSlot('nav-this-month', navScope) || - h(BIconCircleFill, { props: { shiftV: 0.5 } }) + this.normalizeSlot('nav-this-month', navScope) || h(BIconCircleFill, { props: navProps }) const $nextMonthIcon = - this.normalizeSlot('nav-next-month', navScope) || - h(BIconChevronLeft, { props: { shiftV: 0.5, flipH: !isRTL } }) + this.normalizeSlot('nav-next-month', navScope) || h(BIconChevronLeft, { props: navNextProps }) const $nextYearIcon = this.normalizeSlot('nav-next-year', navScope) || - h(BIconChevronDoubleLeft, { props: { shiftV: 0.5, flipH: !isRTL } }) + h(BIconChevronDoubleLeft, { props: navNextProps }) const $nextDecadeIcon = this.normalizeSlot('nav-next-decade', navScope) || - h(BIconChevronBarLeft, { props: { shiftV: 0.5, flipH: !isRTL } }) + h(BIconChevronBarLeft, { props: navNextProps }) // Utility to create the date navigation buttons const makeNavBtn = (content, label, handler, btnDisabled, shortcut) => { From 78203f5d1cc0630603a8c827fcf9320bb151dab7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 15 Apr 2020 09:17:28 +0200 Subject: [PATCH 13/14] Update README.md --- src/components/form-datepicker/README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/form-datepicker/README.md b/src/components/form-datepicker/README.md index 2c359bf9bde..61e1cd5a269 100644 --- a/src/components/form-datepicker/README.md +++ b/src/components/form-datepicker/README.md @@ -443,16 +443,16 @@ Notes: 2.12.0+ -To change the content of the calendar's date navigation buttons, BootstrapVue provided scoped slots +To change the content of the calendar's date navigation buttons, BootstrapVue provides scoped slots for each button: -- `nav-prev-decade' -- `nav-prev-year` -- `nav-prev-month` -- `nav-this-month` (the go to selected/today button) -- `nav-next-month` -- `nav-next-year` -- `nav-next-decade` +- `'nav-prev-decade'` +- `'nav-prev-year'` +- `'nav-prev-month'` +- `'nav-this-month'` (the go to selected/today button) +- `'nav-next-month'` +- `'nav-next-year'` +- `'nav-next-decade'` All seven slots have the same scoped property available: From dc10241a8e0fd99d8c34a286b8f921be3b7ff31d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Wed, 15 Apr 2020 09:18:17 +0200 Subject: [PATCH 14/14] Add `pick()` util --- .../form-datepicker/form-datepicker.js | 21 ++++++++++--------- src/utils/object.js | 15 ++++++++++--- src/utils/object.spec.js | 19 +++++++++++++++++ 3 files changed, 42 insertions(+), 13 deletions(-) create mode 100644 src/utils/object.spec.js diff --git a/src/components/form-datepicker/form-datepicker.js b/src/components/form-datepicker/form-datepicker.js index fc0565deb83..c790134017e 100644 --- a/src/components/form-datepicker/form-datepicker.js +++ b/src/components/form-datepicker/form-datepicker.js @@ -3,6 +3,7 @@ import { BVFormBtnLabelControl, dropdownProps } from '../../utils/bv-form-btn-la import { getComponentConfig } from '../../utils/config' import { createDate, constrainDate, formatYMD, parseYMD } from '../../utils/date' import { isUndefinedOrNull } from '../../utils/inspect' +import { pick } from '../../utils/object' import idMixin from '../../mixins/id' import { BButton } from '../button/button' import { BCalendar } from '../calendar/calendar' @@ -515,15 +516,15 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({ input: this.onInput, context: this.onContext }, - scopedSlots: { - 'nav-prev-decade': $scopedSlots['nav-prev-decade'], - 'nav-prev-year': $scopedSlots['nav-prev-year'], - 'nav-prev-month': $scopedSlots['nav-prev-month'], - 'nav-this-month': $scopedSlots['nav-this-month'], - 'nav-next-month': $scopedSlots['nav-next-month'], - 'nav-next-year': $scopedSlots['nav-next-year'], - 'nav-next-decade': $scopedSlots['nav-next-decade'] - } + scopedSlots: pick($scopedSlots, [ + 'nav-prev-decade', + 'nav-prev-year', + 'nav-prev-month', + 'nav-this-month', + 'nav-next-month', + 'nav-next-year', + 'nav-next-decade' + ]) }, $footer ) @@ -551,7 +552,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({ hidden: this.onHidden }, scopedSlots: { - 'button-content': this.$scopedSlots['button-content'] || this.defaultButtonFn + 'button-content': $scopedSlots['button-content'] || this.defaultButtonFn } }, [$calendar] diff --git a/src/utils/object.js b/src/utils/object.js index feaf442d046..72cba7268cd 100644 --- a/src/utils/object.js +++ b/src/utils/object.js @@ -5,7 +5,8 @@ import { isArray } from './array' export const assign = (...args) => Object.assign(...args) export const create = (proto, optionalProps) => Object.create(proto, optionalProps) export const defineProperties = (obj, props) => Object.defineProperties(obj, props) -export const defineProperty = (obj, prop, descr) => Object.defineProperty(obj, prop, descr) +export const defineProperty = (obj, prop, descriptor) => + Object.defineProperty(obj, prop, descriptor) export const freeze = obj => Object.freeze(obj) export const getOwnPropertyNames = obj => Object.getOwnPropertyNames(obj) export const getOwnPropertyDescriptor = (obj, prop) => Object.getOwnPropertyDescriptor(obj, prop) @@ -43,8 +44,16 @@ export const isPlainObject = obj => Object.prototype.toString.call(obj) === '[ob export const clone = obj => ({ ...obj }) /** - * Return a shallow copy of object with - * the specified properties omitted + * Return a shallow copy of object with the specified properties only + * @link https://gist.github.com/bisubus/2da8af7e801ffd813fab7ac221aa7afc + */ +export const pick = (obj, props) => + keys(obj) + .filter(key => props.indexOf(key) !== -1) + .reduce((result, key) => ({ ...result, [key]: obj[key] }), {}) + +/** + * Return a shallow copy of object with the specified properties omitted * @link https://gist.github.com/bisubus/2da8af7e801ffd813fab7ac221aa7afc */ export const omit = (obj, props) => diff --git a/src/utils/object.spec.js b/src/utils/object.spec.js new file mode 100644 index 00000000000..50b29841816 --- /dev/null +++ b/src/utils/object.spec.js @@ -0,0 +1,19 @@ +import { pick, omit } from './object' + +describe('utils/object', () => { + it('pick() works', async () => { + const obj = { a: 1, b: 2, c: 3, d: null, e: [] } + + expect(pick(obj, ['a', 'b', 'c'])).toEqual({ a: 1, b: 2, c: 3 }) + expect(pick(obj, Object.keys(obj))).toEqual(obj) + expect(pick(obj, [])).toEqual({}) + }) + + it('omit() works', async () => { + const obj = { a: 1, b: 2, c: 3, d: null, e: [] } + + expect(omit(obj, ['a', 'b', 'c'])).toEqual({ d: null, e: [] }) + expect(omit(obj, Object.keys(obj))).toEqual({}) + expect(omit(obj, [])).toEqual(obj) + }) +})