arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-22 07:50:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(FormField): set aria-describedby and aria-invalid attributes (#3123)

Browse Source
This commit is contained in:
Romain Hamel
2025-01-20 11:46:09 +01:00
committed by GitHub
parent b8d99726ef
commit b95b91391a
21 changed files with 275 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/runtime/components/Select.vue
View File

@@ -129,11 +129,11 @@ const emits = defineEmits<SelectEmits<T, V, M>>()
const slots = defineSlots<SelectSlots<T, M>>()
const appConfig = useAppConfig()
const rootProps = useForwardPropsEmits(reactivePick(props, 'modelValue', 'defaultValue', 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required', 'multiple'), emits)
const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'disabled', 'autocomplete', 'required', 'multiple'), emits)
const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }) as SelectContentProps)
const arrowProps = toRef(() => props.arrow as SelectArrowProps)
const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, highlight, disabled } = useFormField<InputProps>(props)
const { emitFormChange, emitFormInput, emitFormBlur, size: formGroupSize, color, id, name, highlight, disabled, ariaAttrs } = useFormField<InputProps>(props)
const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, { trailingIcon: appConfig.ui.icons.chevronDown })))
@@ -186,16 +186,17 @@ function onUpdateOpen(value: boolean) {
<!-- eslint-disable vue/no-template-shadow -->
<template>
<SelectRoot
:id="id"
v-slot="{ modelValue, open }"
v-bind="rootProps"
:name="name"
v-bind="rootProps"
:autocomplete="autocomplete"
:disabled="disabled"
:default-value="defaultValue as (AcceptableValue | AcceptableValue[] | undefined)"
:model-value="modelValue as (AcceptableValue | AcceptableValue[] | undefined)"
@update:model-value="onUpdate"
@update:open="onUpdateOpen"
>
<SelectTrigger :class="ui.base({ class: [props.class, props.ui?.base] })">
<SelectTrigger :id="id" :class="ui.base({ class: [props.class, props.ui?.base] })" v-bind="ariaAttrs">
<span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
<slot name="leading" :model-value="(modelValue as M extends true ? AcceptableValue[] : AcceptableValue)" :open="open" :ui="ui">
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />