element-plus
Version:
A Component Library for Vue 3
1 lines • 4.12 kB
Source Map (JSON)
{"version":3,"file":"use-form-item.mjs","names":[],"sources":["../../../../../../../packages/components/form/src/hooks/use-form-item.ts"],"sourcesContent":["import {\n computed,\n getCurrentInstance,\n inject,\n onMounted,\n onUnmounted,\n ref,\n toRef,\n watch,\n} from 'vue'\nimport { useId } from '@element-plus/hooks/use-id'\nimport { formContextKey, formItemContextKey } from '../constants'\n\nimport type { ComputedRef, Ref, WatchStopHandle } from 'vue'\nimport type { FormItemContext } from '../types'\n\nexport const useFormItem = () => {\n const form = inject(formContextKey, undefined)\n const formItem = inject(formItemContextKey, undefined)\n return {\n form,\n formItem,\n }\n}\n\nexport type IUseFormItemInputCommonProps = {\n id?: string\n label?: string | number | boolean | Record<string, any>\n ariaLabel?: string | number | boolean | Record<string, any>\n}\n\nexport const useFormItemInputId = (\n props: Partial<IUseFormItemInputCommonProps>,\n {\n formItemContext,\n disableIdGeneration,\n disableIdManagement,\n }: {\n formItemContext?: FormItemContext\n disableIdGeneration?: ComputedRef<boolean> | Ref<boolean>\n disableIdManagement?: ComputedRef<boolean> | Ref<boolean>\n }\n) => {\n if (!disableIdGeneration) {\n disableIdGeneration = ref<boolean>(false)\n }\n if (!disableIdManagement) {\n disableIdManagement = ref<boolean>(false)\n }\n\n const instance = getCurrentInstance()\n\n const inLabel = () => {\n let parent = instance?.parent\n while (parent) {\n if (parent.type.name === 'ElFormItem') {\n return false\n }\n if (parent.type.name === 'ElLabelWrap') {\n return true\n }\n parent = parent.parent\n }\n return false\n }\n\n const inputId = ref<string>()\n let idUnwatch: WatchStopHandle | undefined = undefined\n\n const isLabeledByFormItem = computed<boolean>(() => {\n return !!(\n !(props.label || props.ariaLabel) &&\n formItemContext &&\n formItemContext.inputIds &&\n formItemContext.inputIds?.length <= 1\n )\n })\n\n // Generate id for ElFormItem label if not provided as prop\n onMounted(() => {\n idUnwatch = watch(\n [toRef(props, 'id'), disableIdGeneration] as any,\n ([id, disableIdGeneration]: [string, boolean]) => {\n const newId = id ?? (!disableIdGeneration ? useId().value : undefined)\n if (newId !== inputId.value) {\n if (formItemContext?.removeInputId && !inLabel()) {\n inputId.value && formItemContext.removeInputId(inputId.value)\n if (!disableIdManagement?.value && !disableIdGeneration && newId) {\n formItemContext.addInputId(newId)\n }\n }\n inputId.value = newId\n }\n },\n { immediate: true }\n )\n })\n\n onUnmounted(() => {\n idUnwatch && idUnwatch()\n if (formItemContext?.removeInputId) {\n inputId.value && formItemContext.removeInputId(inputId.value)\n }\n })\n\n return {\n isLabeledByFormItem,\n inputId,\n }\n}\n"],"mappings":";;;;AAgBA,MAAa,oBAAoB;CAG/B,OAAO;EACL,MAHW,OAAO,gBAAgB,KAAA,EAG9B;EACJ,UAHe,OAAO,oBAAoB,KAAA,EAGlC;EACT;;AASH,MAAa,sBACX,OACA,EACE,iBACA,qBACA,0BAMC;CACH,IAAI,CAAC,qBACH,sBAAsB,IAAa,MAAM;CAE3C,IAAI,CAAC,qBACH,sBAAsB,IAAa,MAAM;CAG3C,MAAM,WAAW,oBAAoB;CAErC,MAAM,gBAAgB;EACpB,IAAI,SAAS,UAAU;EACvB,OAAO,QAAQ;GACb,IAAI,OAAO,KAAK,SAAS,cACvB,OAAO;GAET,IAAI,OAAO,KAAK,SAAS,eACvB,OAAO;GAET,SAAS,OAAO;;EAElB,OAAO;;CAGT,MAAM,UAAU,KAAa;CAC7B,IAAI,YAAyC,KAAA;CAE7C,MAAM,sBAAsB,eAAwB;EAClD,OAAO,CAAC,EACN,EAAE,MAAM,SAAS,MAAM,cACvB,mBACA,gBAAgB,YAChB,gBAAgB,UAAU,UAAU;GAEtC;CAGF,gBAAgB;EACd,YAAY,MACV,CAAC,MAAM,OAAO,KAAK,EAAE,oBAAoB,GACxC,CAAC,IAAI,yBAA4C;GAChD,MAAM,QAAQ,OAAO,CAAC,sBAAsB,OAAO,CAAC,QAAQ,KAAA;GAC5D,IAAI,UAAU,QAAQ,OAAO;IAC3B,IAAI,iBAAiB,iBAAiB,CAAC,SAAS,EAAE;KAChD,QAAQ,SAAS,gBAAgB,cAAc,QAAQ,MAAM;KAC7D,IAAI,CAAC,qBAAqB,SAAS,CAAC,uBAAuB,OACzD,gBAAgB,WAAW,MAAM;;IAGrC,QAAQ,QAAQ;;KAGpB,EAAE,WAAW,MAAM,CACpB;GACD;CAEF,kBAAkB;EAChB,aAAa,WAAW;EACxB,IAAI,iBAAiB,eACnB,QAAQ,SAAS,gBAAgB,cAAc,QAAQ,MAAM;GAE/D;CAEF,OAAO;EACL;EACA;EACD"}