10000 feat: further improve shared form props usage · bootstrap-vue/bootstrap-vue@9c667de · GitHub
[go: up one dir, main page]
Skip to content

Commit 9c667de

Browse files
jacobmllr95jacobmllr95
committed
feat: further improve shared form props usage
1 parent 4baa858 commit 9c667de

File tree

8 files changed

+200
-556
lines changed

8 files changed

+200
-556
lines changed

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

Lines changed: 20 additions & 206 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
11
import Vue from '../../vue'
22
import { NAME_FORM_DATEPICKER } from '../../constants/components'
33
import {
4-
CALENDAR_LONG,
5-
CALENDAR_NARROW,
6-
CALENDAR_SHORT,
7-
DATE_FORMAT_NUMERIC
8-
} from '../../constants/date'
9-
import { arrayIncludes } from '../../utils/array'
10-
import { BVFormBtnLabelControl, dropdownProps } from '../../utils/bv-form-btn-label-control'
4+
BVFormBtnLabelControl,
5+
props as BVFormBtnLabelControlProps
6+
} from '../../utils/bv-form-btn-label-control'
117
import { makePropsConfigurable } from '../../utils/config'
128
import { createDate, constrainDate, formatYMD, parseYMD } from '../../utils/date'
139
import { attemptBlur, attemptFocus } from '../../utils/dom'
1410
import { isUndefinedOrNull } from '../../utils/inspect'
15-
import { pick } from '../../utils/object'
11+
import { pick, omit } from '../../utils/object'
12+
import { pluckProps } from '../../utils/props'
1613
import idMixin from '../../mixins/id'
1714
import { BButton } from '../button/button'
18-
import { BCalendar, props as calendarProps } from '../calendar/calendar'
15+
import { BCalendar, props as BCalendarProps } from '../calendar/calendar'
1916
import { BIconCalendar, BIconCalendarFill } from '../../icons/icons'
2017

2118
// --- Main component ---
@@ -30,100 +27,16 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
3027
},
3128
props: makePropsConfigurable(
3229
{
33-
value: {
34-
type: [String, Date],
35-
default: null
36-
},
37-
valueAsDate: {
38-
type: Boolean,
39-
default: false
40-
},
30+
...BCalendarProps,
31+
...omit(BVFormBtnLabelControlProps, ['id', 'value', 'formattedValue', 'rtl', 'lang']),
4132
resetValue: {
4233
type: [String, Date]
4334
// default: null
4435
},
45-
initialDate: {
46-
// This specifies the calendar year/month/day that will be shown when
47-
// first opening the datepicker if no v-model value is provided
48-
// Default is the current date (or `min`/`max`)
49-
// Passed directly to <b-calendar>
50-
type: [String, Date]
51-
// default: null
52-
},
53-
placeholder: {
54-
type: String
55-
// Defaults to `labelNoDateSelected` from calendar context
56-
// default: null
57-
},
58-
size: {
59-
type: String
60-
// default: null
61-
},
62-
min: {
63-
type: [String, Date]
64-
// default: null
65-
},
66-
max: {
67-
type: [String, Date]
68-
// default: null
69-
},
70-
disabled: {
71-
type: Boolean,
72-
default: false
73-
},
74-
readonly: {
75-
type: Boolean,
76-
default: false
77-
},
78-
required: {
79-
// If true adds the `aria-required` attribute
80-
type: Boolean,
81-
default: false
82-
},
83-
name: {
84-
type: String
85-
// default: null
86-
},
87-
form: {
88-
type: String
89-
// default: null
90-
},
91-
state: {
92-
// Tri-state prop: `true`, `false` or `null`
93-
type: Boolean,
94-
default: null
95-
},
96-
dateDisabledFn: {
97-
type: Function
98-
// default: null
99-
},
10036
noCloseOnSelect: {
10137
type: Boolean,
10238
default: false
10339
},
104-
hideHeader: {
105-
type: Boolean,
106-
default: false
107-
},
108-
showDecadeNav: {
109-
// When `true` enables the decade navigation buttons
110-
type: Boolean,
111-
default: false
112-
},
113-
locale: {
114-
type: [String, Array]
115-
// default: null
116-
},
117-
startWeekday: {
118-
// `0` (Sunday), `1` (Monday), ... `6` (Saturday)
119-
// Day of week to start calendar on
120-
type: [Number, String],
121-
default: 0
122-
},
123-
direction: {
124-
type: String
125-
// default: null
126-
},
12740
buttonOnly: {
12841
type: Boolean,
12942
default: false
@@ -138,12 +51,6 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
13851
type: String,
13952
default: '270px'
14053
},
141-
...pick(calendarProps, ['selectedVariant', 'todayVariant', 'navButtonVariant']),
142-
noHighlightToday: {
143-
// Disable highlighting today's date
144-
type: Boolean,
145-
default: false
146-
},
14754
todayButton: {
14855
type: Boolean,
14956
default: false
@@ -180,62 +87,11 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
18087
type: String,
18188
default: 'outline-secondary'
18289
},
183-
dateInfoFn: {
184-
// Passed through to b-calendar
185-
type: Function
186-
// default: undefined
187-
},
188-
// Labels for buttons and keyboard shortcuts
189-
// These pick BCalendar global config if no BFormDate global config
190-
...pick(calendarProps, [
191-
'labelPrevDecade',
192-
'labelPrevYear',
193-
'labelPrevMonth',
194-
'labelCurrentMonth',
195-
'labelNextMonth',
196-
'labelNextYear',
197-
'labelToday',
198-
'labelSelected',
199-
'labelNoDateSelected',
200-
'labelCalendar',
201-
'labelNav',
202-
'labelHelp'
203-
]),
204-
dateFormatOptions: {
205-
// `Intl.DateTimeFormat` object
206-
// Note: This value is *not* to be placed in the global config
207-
type: Object,
208-
default: () => ({
209-
year: DATE_FORMAT_NUMERIC,
210-
month: CALENDAR_LONG,
211-
day: DATE_FORMAT_NUMERIC,
212-
weekday: CALENDAR_LONG
213-
})
214-
},
215-
weekdayHeaderFormat: {
216-
// Format of the weekday names at the top of the calendar
217-
// Note: This value is *not* to be placed in the global config
218-
type: String,
219-
// `short` is typically a 3 letter abbreviation,
220-
// `narrow` is typically a single letter
221-
// `long` is the full week day name
222-
// Although some locales may override this (i.e `ar`, etc.)
223-
default: CALENDAR_SHORT,
224-
validator(value) {
225-
return arrayIncludes([CALENDAR_LONG, CALENDAR_SHORT, CALENDAR_NARROW], value)
226-
}
227-
},
22890
// Dark mode
22991
dark: {
23092
type: Boolean,
23193
default: false
232-
},
233-
// extra dropdown stuff
234-
menuClass: {
235-
type: [String, Array, Object]
236-
// default: null
237-
},
238-
...dropdownProps
94+
}
23995
},
24096
NAME_FORM_DATEPICKER
24197
),
@@ -258,47 +114,6 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
258114
// Returns the `YYYY-MM` portion of the active calendar date
259115
return this.activeYMD.slice(0, -3)
260116
},
261-
calendarProps() {
262-
// Use self for better minification, as `this` won't
263-
// minimize and we reference it many times below
264-
const self = this
265-
return {
266-
hidden: !self.isVisible,
267-
value: self.localYMD,
268-
min: self.min,
269-
max: self.max,
270-
initialDate: self.initialDate,
271-
readonly: self.readonly,
272-
disabled: self.disabled,
273-
locale: self.locale,
274-
startWeekday: self.startWeekday,
275-
direction: self.direction,
276-
width: self.calendarWidth,
277-
dateDisabledFn: self.dateDisabledFn,
278-
selectedVariant: self.selectedVariant,
279-
todayVariant: self.todayVariant,
280-
navButtonVariant: self.navButtonVariant,
281-
dateInfoFn: self.dateInfoFn,
282-
hideHeader: self.hideHeader,
283-
showDecadeNav: self.showDecadeNav,
284-
noHighlightToday: self.noHighlightToday,
285-
labelPrevDecade: self.labelPrevDecade,
286-
labelPrevYear: self.labelPrevYear,
287-
labelPrevMonth: self.labelPrevMonth,
288-
labelCurrentMonth: self.labelCurrentMonth,
289-
labelNextMonth: self.labelNextMonth,
290-
labelNextYear: self.labelNextYear,
291-
labelNextDecade: self.labelNextDecade,
292-
labelToday: self.labelToday,
293-
labelSelected: self.labelSelected,
294-
labelNoDateSelected: self.labelNoDateSelected,
295-
labelCalendar: self.labelCalendar,
296-
labelNav: self.labelNav,
297-
labelHelp: self.labelHelp,
298-
dateFormatOptions: self.dateFormatOptions,
299-
weekdayHeaderFormat: self.weekdayHeaderFormat
300-
}
301-
},
302117
computedLang() {
303118
return (this.localLocale || '').replace(/-u-.*$/i, '') || null
304119
},
@@ -401,10 +216,7 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
401216
}
402217
},
403218
render(h) {
404-
const $scopedSlots = this.$scopedSlots
405-
const localYMD = this.localYMD
406-
const disabled = this.disabled
407-
const readonly = this.readonly
219+
const { localYMD, disabled, readonly, dark, $props, $scopedSlots } = this
408220
const placeholder = isUndefinedOrNull(this.placeholder)
409221
? this.labelNoDateSelected
410222
: this.placeholder
@@ -479,7 +291,11 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
479291
key: 'calendar',
480292
ref: 'calendar',
481293
staticClass: 'b-form-date-calendar w-100',
482-
props: this.calendarProps,
294+
props: {
295+
...pluckProps(BCalendarProps, $props),
296+
value: localYMD,
297+
hidden: !this.isVisible
298+
},
483299
on: {
484300
selected: this.onSelected,
485301
input: this.onInput,
@@ -504,16 +320,14 @@ export const BFormDatepicker = /*#__PURE__*/ Vue.extend({
504320
ref: 'control',
505321
staticClass: 'b-form-datepicker',
506322
props: {
507-
// This adds unneeded props, but reduces code size:
508-
...this.$props,
509-
// Overridden / computed props
323+
...pluckProps(BVFormBtnLabelControlProps, $props),
510324
id: this.safeId(),
325+
value: localYMD,
326+
formattedValue: localYMD ? this.formattedValue : '',
327+
placeholder,
511328
rtl: this.isRTL,
512329
lang: this.computedLang,
513-
value: localYMD || '',
514-
formattedValue: localYMD ? this.formattedValue : '',
515-
placeholder: placeholder || '',
516-
menuClass: [{ 'bg-dark': !!this.dark, 'text-light': !!this.dark }, this.menuClass]
330+
menuClass: [{ 'bg-dark': !!dark, 'text-light': !!dark }, this.menuClass]
517331
},
518332
on: {
519333
show: this.onShow,

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import formCustomMixin, { props as formCustomProps } from '../../mixins/form-cus
2727
import formStateMixin, { props as formStateProps } from '../../mixins/form-state'
2828
import idMixin from '../../mixins/id'
2929
import normalizeSlotMixin from '../../mixins/normalize-slot'
30+
import { props as formSizeProps } from '../../mixins/form-size'
3031

3132
// --- Constants ---
3233

@@ -135,10 +136,7 @@ export const BFormFile = /*#__PURE__*/ Vue.extend({
135136
...formControlProps,
136137
...formCustomProps,
137138
...formStateProps,
138-
size: {
139-
type: String
140-
// default: null
141-
},
139+
...formSizeProps,
142140
value: {
143141
type: [File, Array],
144142
default: null,

0 commit comments

Comments
 (0)
0