@element-plus-next/vue-hooks/src/use-common-props/index.ts

Vue hooks for Element Plus.

import { computed, ref, unref } from 'vue'
import { buildProp } from '@element-plus-next/vue-utils'
import { componentSizes } from '@element-plus-next/constants'
import { useGlobalConfig } from '@element-plus-next/vue-context'
import { useProp } from '../use-prop'
import type { ComponentSize } from '@element-plus-next/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')
  // V3 todo
  // 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 ||
      ''
  )
}

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
  )
}