element-plus/packages/hooks/use-common-props/index.ts
三咲智子 c72679e4e9
refactor(components)!: refactor form (#5401)
* refactor(components): refactor form

* refactor: resolve PR comments

* refactor(components): refactor isNested

* refactor: resolve PR comments
2022-03-06 22:20:56 +08:00

49 lines
1.5 KiB
TypeScript

import { ref, unref, inject, computed } from 'vue'
import { formItemContextKey, formContextKey } from '@element-plus/tokens'
import { buildProp } from '@element-plus/utils'
import { componentSizes } from '@element-plus/constants'
import { useProp } from '../use-prop'
import { useGlobalConfig } from '../use-global-config'
import type { ComponentSize } from '@element-plus/constants'
import type { MaybeRef } from '@vueuse/core'
export const useSizeProp = buildProp({
type: String,
values: componentSizes,
required: false,
} as const)
export const useSize = (
fallback?: MaybeRef<ComponentSize | undefined>,
ignore: Partial<Record<'prop' | 'form' | 'formItem' | 'global', boolean>> = {}
) => {
const emptyRef = ref(undefined)
const size = ignore.prop ? emptyRef : useProp<ComponentSize>('size')
const globalConfig = ignore.global ? emptyRef : useGlobalConfig('size')
const form = ignore.form
? { size: undefined }
: inject(formContextKey, undefined)
const formItem = ignore.formItem
? { size: undefined }
: inject(formItemContextKey, undefined)
return computed(
(): ComponentSize =>
size.value ||
unref(fallback) ||
formItem?.size ||
form?.size ||
globalConfig.value ||
'default'
)
}
export const useDisabled = (fallback?: MaybeRef<boolean | undefined>) => {
const disabled = useProp<boolean>('disabled')
const form = inject(formContextKey, undefined)
return computed(
() => disabled.value || unref(fallback) || form?.disabled || false
)
}