You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
24 lines
778 B
TypeScript
24 lines
778 B
TypeScript
import { computed, inject, useAttrs } from 'vue'
|
|
|
|
import { cFormFieldKey } from '../form-field/context'
|
|
|
|
export function useFormControl(props: { invalid: boolean; required: boolean }) {
|
|
const attrs = useAttrs()
|
|
const field = inject(cFormFieldKey, undefined)
|
|
|
|
const controlId = computed(() => {
|
|
const id = attrs.id
|
|
return typeof id === 'string' ? id : field?.controlId.value
|
|
})
|
|
|
|
const describedBy = computed(() => {
|
|
const value = attrs['aria-describedby']
|
|
return typeof value === 'string' ? value : field?.describedBy.value
|
|
})
|
|
|
|
const invalid = computed(() => props.invalid || Boolean(field?.invalid.value))
|
|
const required = computed(() => props.required || Boolean(field?.required.value))
|
|
|
|
return { controlId, describedBy, invalid, required }
|
|
}
|