fix: respect format props and default value (#2034)

* fix: respect format props and default value

Vue 3 props will always have all keys defined, regardless if users pass props when using the component.
So {format, ...props} will always overwrite the default format because props has format defined on it.
When users do not pass format, the code breaks.

* fix: null-coalescing operator(??) requires parens

* fix: capture reactivity
This commit is contained in:
Herrington Darkholme 2021-05-20 16:15:40 +08:00 committed by GitHub
parent 83bc018598
commit 8f519cfbef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -47,7 +47,6 @@ export default defineComponent({
setup(props, ctx) {
provide('ElPopperOptions', props.popperOptions)
const commonPicker = ref(null)
const format = DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE
const refProps = {
...props,
focus: () => {
@ -55,15 +54,20 @@ export default defineComponent({
},
}
ctx.expose(refProps)
return () => h(CommonPicker, {
format,
...props, // allow format to be overwrite
type: props.type,
ref: commonPicker,
'onUpdate:modelValue': value => ctx.emit('update:modelValue', value),
},
{
default: scopedProps => h(getPanel(props.type), scopedProps),
})
return () => {
// since props always have all defined keys on it, {format, ...props} will always overwrite format
// pick props.format or provide default value here before spreading
const format = props.format ?? (DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE)
return h(CommonPicker, {
...props,
format,
type: props.type,
ref: commonPicker,
'onUpdate:modelValue': value => ctx.emit('update:modelValue', value),
},
{
default: scopedProps => h(getPanel(props.type), scopedProps),
})
}
},
})