element-plus/packages/hooks/use-form-item/index.ts

57 lines
1.5 KiB
TypeScript
Raw Normal View History

import { inject, computed, getCurrentInstance, unref } from 'vue'
import { elFormKey, elFormItemKey } from '@element-plus/tokens'
import { buildProps } from '@element-plus/utils/props'
import { useGlobalConfig } from '@element-plus/utils/util'
import type { ExtractPropTypes } from 'vue'
import type { MaybeRef } from '@vueuse/core'
const sizes = ['', 'large', 'medium', 'small', 'mini'] as const
export const useFormItemProps = buildProps({
size: {
type: String,
values: sizes,
default: '',
},
disabled: Boolean,
} as const)
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) => {
const vm = getCurrentInstance()!
const $ELEMENT = useGlobalConfig()
// vm.props is not reactive so we use the reactive one here.
const props = vm.proxy?.$props as UseFormItemProps
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,
}
}