2021-09-13 23:14:48 +08:00
|
|
|
import { inject, computed, getCurrentInstance, unref } from 'vue'
|
|
|
|
import { elFormKey, elFormItemKey } from '@element-plus/tokens'
|
2021-10-06 19:56:24 +08:00
|
|
|
import { buildProps } from '@element-plus/utils/props'
|
2021-09-13 23:14:48 +08:00
|
|
|
import { useGlobalConfig } from '@element-plus/utils/util'
|
|
|
|
|
|
|
|
import type { ExtractPropTypes } from 'vue'
|
2021-10-25 17:07:48 +08:00
|
|
|
import type { MaybeRef } from '@vueuse/core'
|
2021-09-13 23:14:48 +08:00
|
|
|
|
|
|
|
const sizes = ['', 'large', 'medium', 'small', 'mini'] as const
|
|
|
|
|
2021-10-06 19:56:24 +08:00
|
|
|
export const useFormItemProps = buildProps({
|
|
|
|
size: {
|
2021-09-13 23:14:48 +08:00
|
|
|
type: String,
|
|
|
|
values: sizes,
|
|
|
|
default: '',
|
2021-10-06 19:56:24 +08:00
|
|
|
},
|
2021-09-13 23:14:48 +08:00
|
|
|
disabled: Boolean,
|
2021-10-06 19:56:24 +08:00
|
|
|
} as const)
|
2021-09-13 23:14:48 +08:00
|
|
|
|
|
|
|
export type UseFormItemProps = ExtractPropTypes<typeof useFormItemProps>
|
|
|
|
|
|
|
|
export type LocalFallbacks = {
|
|
|
|
size?: MaybeRef<UseFormItemProps['size'] | undefined>
|
|
|
|
disabled?: MaybeRef<UseFormItemProps['disabled'] | undefined>
|
|
|
|
}
|
|
|
|
|
|
|
|
export const useFormItem = ({ size, disabled }: LocalFallbacks) => {
|
2021-10-22 23:28:03 +08:00
|
|
|
const vm = getCurrentInstance()!
|
2021-09-13 23:14:48 +08:00
|
|
|
const $ELEMENT = useGlobalConfig()
|
|
|
|
|
|
|
|
// vm.props is not reactive so we use the reactive one here.
|
2021-10-22 23:28:03 +08:00
|
|
|
const props = vm.proxy?.$props as UseFormItemProps
|
2021-09-13 23:14:48 +08:00
|
|
|
const form = inject(elFormKey, undefined)
|
|
|
|
const formItem = inject(elFormItemKey, undefined)
|
|
|
|
|
|
|
|
return {
|
|
|
|
size: computed(() => {
|
|
|
|
// TODO, fallback to default size like 'medium/large' instead of empty string
|
|
|
|
return (
|
|
|
|
props.size ||
|
|
|
|
unref(size) ||
|
|
|
|
formItem?.size ||
|
|
|
|
form?.size ||
|
|
|
|
$ELEMENT.size ||
|
|
|
|
''
|
|
|
|
)
|
|
|
|
}),
|
|
|
|
disabled: computed(() => {
|
|
|
|
return (
|
|
|
|
props.disabled === true || unref(disabled) || form?.disabled || false
|
|
|
|
)
|
|
|
|
}),
|
2021-11-06 03:41:04 +08:00
|
|
|
form,
|
|
|
|
formItem,
|
2021-09-13 23:14:48 +08:00
|
|
|
}
|
|
|
|
}
|