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

chore(FormField): rename inputId to id

Browse Source
This commit is contained in:
Benjamin Canac
2024-04-28 11:46:24 +02:00
parent 65e916d09a
commit 16071846a8
9 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/runtime/components/Checkbox.vue
View File

@@ -44,8 +44,8 @@ const modelValue = defineModel<boolean | undefined>({ default: undefined })
const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
const appConfig = useAppConfig()
const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField<CheckboxProps>(props)
const inputId = _inputId.value ?? useId()
const { id: _id, emitFormChange, size, color, name, disabled } = useFormField<CheckboxProps>(props)
const id = _id.value ?? useId()
const indeterminate = computed(() => (modelValue.value === undefined && props.indeterminate))
@@ -79,7 +79,7 @@ function onChecked() {
<div :class="ui.root({ class: props.class })">
<div :class="ui.container()">
<CheckboxRoot
:id="inputId"
:id="id"
v-model:checked="checked"
:default-checked="defaultValue"
v-bind="rootProps"
@@ -96,7 +96,7 @@ function onChecked() {
</div>
<div v-if="(label || $slots.label) || (description || $slots.description)" :class="ui.wrapper()">
<Label v-if="label || $slots.label" :for="inputId" :class="ui.label()">
<Label v-if="label || $slots.label" :for="id" :class="ui.label()">
<slot name="label" :label="label">
{{ label }}
</slot>

6
src/runtime/components/FormField.vue
View File

@@ -58,11 +58,11 @@ const error = computed(() => {
: formErrors?.value?.find(error => error.name === props.name)?.message
})
const inputId = ref(useId())
const id = ref(useId())
provide<FormFieldInjectedOptions<FormFieldProps>>('form-field', {
error,
inputId,
id,
name: computed(() => props.name),
size: computed(() => props.size),
eagerValidation: computed(() => props.eagerValidation),
@@ -74,7 +74,7 @@ provide<FormFieldInjectedOptions<FormFieldProps>>('form-field', {
<div :class="ui.root({ class: props.class })">
<div :class="ui.wrapper()">
<div v-if="label || $slots.label" :class="ui.labelWrapper()">
<Label :for="inputId" :class="ui.label()">
<Label :for="id" :class="ui.label()">
<slot name="label" :label="label">
{{ label }}
</slot>

4
src/runtime/components/Input.vue
View File

@@ -55,7 +55,7 @@ defineSlots<InputSlots>()
const [modelValue, modelModifiers] = defineModel<string | number>()
const { emitFormBlur, emitFormInput, size, color, inputId, name, disabled } = useFormField<InputProps>(props)
const { emitFormBlur, emitFormInput, size, color, id, name, disabled } = useFormField<InputProps>(props)
const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
// const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
@@ -127,7 +127,7 @@ onMounted(() => {
<template>
<div :class="ui.root({ class: props.class })">
<input
:id="inputId"
:id="id"
ref="inputRef"
:type="type"
:value="modelValue"

10
src/runtime/components/RadioGroup.vue
View File

@@ -56,8 +56,8 @@ const modelValue = defineModel<T>({
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'orientation', 'loop', 'required'), emits)
const { emitFormChange, color, name, size, inputId: _inputId, disabled } = useFormField<RadioGroupProps<T>>(props)
const inputId = _inputId.value ?? useId()
const { emitFormChange, color, name, size, id: _id, disabled } = useFormField<RadioGroupProps<T>>(props)
const id = _id.value ?? useId()
const ui = computed(() => tv({ extend: radioGroup, slots: props.ui })({
size: size.value,
@@ -70,7 +70,7 @@ const ui = computed(() => tv({ extend: radioGroup, slots: props.ui })({
function normalizeOption(option: any) {
if (['string', 'number', 'boolean'].includes(typeof option)) {
return {
id: `${inputId}:${option}`,
id: `${id}:${option}`,
value: option,
label: option
}
@@ -78,7 +78,7 @@ function normalizeOption(option: any) {
return {
...option,
id: `${inputId}:${option.value}`
id: `${id}:${option.value}`
}
}
@@ -97,7 +97,7 @@ function onUpdate() {
<template>
<RadioGroupRoot
:id="inputId"
:id="id"
v-model="modelValue"
v-bind="rootProps"
:name="name"

4
src/runtime/components/Slider.vue
View File

@@ -40,7 +40,7 @@ const modelValue = defineModel<number | number[]>()
const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'orientation', 'min', 'max', 'step', 'minStepsBetweenThumbs', 'inverted'), emits)
const { inputId, emitFormChange, size, color, name, disabled } = useFormField<SliderProps>(props)
const { id, emitFormChange, size, color, name, disabled } = useFormField<SliderProps>(props)
const defaultSliderValue = computed(() => {
if (typeof props.defaultValue === 'number') {
@@ -74,7 +74,7 @@ const ui = computed(() => tv({ extend: slider, slots: props.ui })({
<template>
<SliderRoot
v-bind="rootProps"
:id="inputId"
:id="id"
v-model="sliderValue"
:name="name"
:disabled="disabled"

8
src/runtime/components/Switch.vue
View File

@@ -45,8 +45,8 @@ const modelValue = defineModel<boolean | undefined>({ default: undefined })
const appConfig = useAppConfig()
const rootProps = useForwardProps(reactivePick(props, 'as', 'required', 'value'))
const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField<SwitchProps>(props)
const inputId = _inputId.value ?? useId()
const { id: _id, emitFormChange, size, color, name, disabled } = useFormField<SwitchProps>(props)
const id = _id.value ?? useId()
const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
size: size.value,
@@ -68,7 +68,7 @@ async function onChecked() {
<div :class="ui.root({ class: props.class })">
<div :class="ui.container()">
<SwitchRoot
:id="inputId"
:id="id"
v-model:checked="modelValue"
:default-checked="defaultValue"
v-bind="rootProps"
@@ -87,7 +87,7 @@ async function onChecked() {
</SwitchRoot>
</div>
<div v-if="(label || $slots.label) || (description || $slots.description)" :class="ui.wrapper()">
<Label v-if="label || $slots.label" :for="inputId" :class="ui.label()">
<Label v-if="label || $slots.label" :for="id" :class="ui.label()">
<slot name="label" :label="label">
{{ label }}
</slot>

4
src/runtime/components/Textarea.vue
View File

@@ -54,7 +54,7 @@ const emits = defineEmits<TextareaEmits>()
const [modelValue, modelModifiers] = defineModel<string | number>()
const { emitFormBlur, emitFormInput, size, color, inputId, name, disabled } = useFormField<TextareaProps>(props)
const { emitFormBlur, emitFormInput, size, color, id, name, disabled } = useFormField<TextareaProps>(props)
const ui = computed(() => tv({ extend: textarea, slots: props.ui })({
color: color.value,
@@ -152,7 +152,7 @@ onMounted(() => {
<template>
<div :class="ui.root({ class: props.class })">
<textarea
:id="inputId"
:id="id"
ref="textareaRef"
:value="modelValue"
:name="name"

20
src/runtime/composables/useFormField.ts
View File

@@ -14,20 +14,20 @@ type Props<T> = {
disabled?: boolean
}
export function useFormField<T>(inputProps?: Props<T>) {
export function useFormField<T>(props?: Props<T>) {
const formOptions = inject<FormInjectedOptions | undefined>('form-options', undefined)
const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
const formField = inject<FormFieldInjectedOptions<T> | undefined>('form-field', undefined)
const formInputs = inject<any>('form-inputs', undefined)
if (formField) {
if (inputProps?.id) {
// Updates for="..." attribute on label if inputProps.id is provided
formField.inputId.value = inputProps?.id
if (props?.id) {
// Updates for="..." attribute on label if props.id is provided
formField.id.value = props?.id
}
if (formInputs && formField.name.value) {
formInputs.value[formField.name.value] = formField.inputId.value
formInputs.value[formField.name.value] = formField.id.value
}
}
@@ -58,11 +58,11 @@ export function useFormField<T>(inputProps?: Props<T>) {
)
return {
inputId: computed(() => inputProps?.id ?? formField?.inputId.value),
name: computed(() => inputProps?.name ?? formField?.name.value),
size: computed(() => inputProps?.size ?? formField?.size?.value),
color: computed(() => formField?.error?.value ? 'red' : inputProps?.color),
disabled: computed(() => formOptions?.disabled?.value || inputProps?.disabled),
id: computed(() => props?.id ?? formField?.id.value),
name: computed(() => props?.name ?? formField?.name.value),
size: computed(() => props?.size ?? formField?.size?.value),
color: computed(() => formField?.error?.value ? 'red' : props?.color),
disabled: computed(() => formOptions?.disabled?.value || props?.disabled),
emitFormBlur,
emitFormInput,
emitFormChange

2
src/runtime/types/form.ts
View File

@@ -69,7 +69,7 @@ export interface FormInjectedOptions {
}
export interface FormFieldInjectedOptions<T> {
inputId: Ref<string | undefined>
id: Ref<string | undefined>
name: ComputedRef<string | undefined>
// @ts-expect-error FIXME: TS doesn't like this
size: ComputedRef<T['size']>