Skip to content

Commit f825778

Browse files
tmorehousetmorehouse
authored
chore(b-datepicker): minor code optimizations for better minification (bootstrap-vue#4800)
1 parent b485577 commit f825778

File tree

1 file changed

+43
-40
lines changed

1 file changed

+43
-40
lines changed

‎src/components/form-datepicker/form-datepicker.js‎

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -242,36 +242,38 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
242242
return this.activeYMD.slice(0, -3)
243243
},
244244
calendarProps() {
245+
// We alis `this` to `self` for better minification
246+
const self = this
245247
// TODO: Make the ID's computed props
246-
const idLabel = this.safeId('_value_')
247-
const idWrapper = this.safeId('_b-form-date_')
248+
const idLabel = self.safeId('_value_')
249+
const idWrapper = self.safeId('_b-form-date_')
248250
return {
249251
// id: this.safeId('_picker_'),
250252
ariaControls: [idLabel, idWrapper].filter(identity).join(' ') || null,
251-
value: this.localYMD,
252-
hidden: !this.visible,
253-
min: this.min,
254-
max: this.max,
255-
readonly: this.readonly,
256-
disabled: this.disabled,
257-
locale: this.locale,
258-
startWeekday: this.startWeekday,
259-
direction: this.direction,
260-
dateDisabledFn: this.dateDisabledFn,
261-
selectedVariant: this.selectedVariant,
262-
todayVariant: this.todayVariant,
263-
hideHeader: this.hideHeader,
264-
labelPrevYear: this.labelPrevYear,
265-
labelPrevMonth: this.labelPrevMonth,
266-
labelCurrentMonth: this.labelCurrentMonth,
267-
labelNextMonth: this.labelNextMonth,
268-
labelNextYear: this.labelNextYear,
269-
labelToday: this.labelToday,
270-
labelSelected: this.labelSelected,
271-
labelNoDateSelected: this.labelNoDateSelected,
272-
labelCalendar: this.labelCalendar,
273-
labelNav: this.labelNav,
274-
labelHelp: this.labelHelp
253+
value: self.localYMD,
254+
hidden: !self.visible,
255+
min: self.min,
256+
max: self.max,
257+
readonly: self.readonly,
258+
disabled: self.disabled,
259+
locale: self.locale,
260+
startWeekday: self.startWeekday,
261+
direction: self.direction,
262+
dateDisabledFn: self.dateDisabledFn,
263+
selectedVariant: self.selectedVariant,
264+
todayVariant: self.todayVariant,
265+
hideHeader: self.hideHeader,
266+
labelPrevYear: self.labelPrevYear,
267+
labelPrevMonth: self.labelPrevMonth,
268+
labelCurrentMonth: self.labelCurrentMonth,
269+
labelNextMonth: self.labelNextMonth,
270+
labelNextYear: self.labelNextYear,
271+
labelToday: self.labelToday,
272+
labelSelected: self.labelSelected,
273+
labelNoDateSelected: self.labelNoDateSelected,
274+
labelCalendar: self.labelCalendar,
275+
labelNav: self.labelNav,
276+
labelHelp: self.labelHelp
275277
}
276278
},
277279
computedResetValue() {
@@ -296,8 +298,6 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
296298
},
297299
mounted() {
298300
this.$on('shown', () => {
299-
// May want to make an option to focus
300-
// the entire calendar (dropdown-menu) or just the date
301301
try {
302302
this.$refs.calendar.focus()
303303
} catch {}
@@ -370,18 +370,21 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
370370
render(h) {
371371
const size = this.size
372372
const state = this.state
373+
const visible = this.visible
374+
const isHovered = this.isHovered
375+
const hasFocus = this.hasFocus
373376
const localYMD = this.localYMD
374377
const disabled = this.disabled
375378
const readonly = this.readonly
379+
const required = this.required
380+
// TODO: move these to computed props
376381
const idButton = this.safeId()
377382
const idLabel = this.safeId('_value_')
378383
const idMenu = this.safeId('_dialog_')
379384
const idWrapper = this.safeId('_b-form-date_')
380385

381386
let $button = h('div', { attrs: { 'aria-hidden': 'true' } }, [
382-
this.isHovered || this.hasFocus
383-
? h(BIconCalendarFill, { props: { scale: 1.25 } })
384-
: h(BIconCalendar, { props: { scale: 1.25 } })
387+
h(isHovered || hasFocus ? BIconCalendarFill : BIconCalendar, { props: { scale: 1.25 } })
385388
])
386389
$button = h(
387390
'button',
@@ -394,9 +397,9 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
394397
type: 'button',
395398
disabled: disabled,
396399
'aria-haspopup': 'dialog',
397-
'aria-expanded': this.visible ? 'true' : 'false',
400+
'aria-expanded': visible ? 'true' : 'false',
398401
'aria-invalid': state === false ? 'true' : null,
399-
'aria-required': this.required ? 'true' : null
402+
'aria-required': required ? 'true' : null
400403
},
401404
on: {
402405
mousedown: this.onMousedown,
@@ -428,7 +431,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
428431
dir: this.isRTL ? 'rtl' : 'ltr',
429432
lang: this.localLocale || null,
430433
'aria-invalid': state === false ? 'true' : null,
431-
'aria-required': this.required ? 'true' : null
434+
'aria-required': required ? 'true' : null
432435
},
433436
on: {
434437
// Disable bubbling of the click event to
@@ -440,7 +443,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
440443
},
441444
[
442445
// Add the formatted value or placeholder
443-
localYMD ? this.formattedValue : this.placeholder || this.labelNoDateSelected,
446+
localYMD ? this.formattedValue : this.placeholder || this.labelNoDateSelected || '\u00A0',
444447
// Add an sr-only 'selected date' label if a date is selected
445448
localYMD ? h('span', { staticClass: 'sr-only' }, ` (${this.labelSelected}) `) : h()
446449
]
@@ -485,7 +488,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
485488
h(
486489
BButton,
487490
{
488-
props: { size: 'sm', disabled: this.disabled, variant: this.closeButtonVariant },
491+
props: { size: 'sm', disabled: disabled, variant: this.closeButtonVariant },
489492
attrs: { 'aria-label': label || null },
490493
on: { click: this.onCloseButton }
491494
},
@@ -532,7 +535,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
532535
ref: 'menu',
533536
staticClass: 'dropdown-menu p-2',
534537
class: {
535-
show: this.visible,
538+
show: visible,
536539
'dropdown-menu-right': this.right,
537540
'bg-dark': this.dark,
538541
'text-light': this.dark
@@ -569,8 +572,8 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
569572
class: [
570573
this.directionClass,
571574
{
572-
show: this.visible,
573-
focus: this.hasFocus,
575+
show: visible,
576+
focus: hasFocus,
574577
[`form-control-${size}`]: !!size,
575578
'is-invalid': state === false,
576579
'is-valid': state === true
@@ -583,7 +586,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
583586
'aria-readonly': readonly && !disabled,
584587
'aria-labelledby': idLabel,
585588
'aria-invalid': state === false ? 'true' : null,
586-
'aria-required': this.required ? 'true' : null,
589+
'aria-required': required ? 'true' : null,
587590
// We don't want the flex order to change here
588591
// So we always use 'ltr'
589592
dir: 'ltr'

0 commit comments

Comments
 (0)