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

fix(ButtonGroup/FormGroup): pass default sizes to children (#1875)

Browse Source
This commit is contained in:
Romain Hamel
2024-06-19 12:08:13 +02:00
committed by GitHub
parent 4ad904f83d
commit 6b6b03d59f
6 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/runtime/components/forms/Input.vue
View File

@@ -171,7 +171,7 @@ export default defineComponent({
const { emitFormBlur, emitFormInput, size: sizeFormGroup, color, inputId, name } = useFormGroup(props, config)
const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value)
const modelModifiers = ref(defu({}, props.modelModifiers, { trim: false, lazy: false, number: false }))

2
src/runtime/components/forms/InputMenu.vue
View File

@@ -290,7 +290,7 @@ export default defineComponent({
const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
const { emitFormBlur, emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config)
const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value)
const internalQuery = ref('')
const query = computed({

2
src/runtime/components/forms/Select.vue
View File

@@ -187,7 +187,7 @@ export default defineComponent({
const { emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config)
const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value)
const onInput = (event: Event) => {
emit('update:modelValue', (event.target as HTMLInputElement).value)

2
src/runtime/components/forms/SelectMenu.vue
View File

@@ -346,7 +346,7 @@ export default defineComponent({
const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
const { emitFormBlur, emitFormChange, inputId, color, size: sizeFormGroup, name } = useFormGroup(props, config)
const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
const size = computed(() => sizeButtonGroup.value ?? sizeFormGroup.value)
const internalQuery = ref('')
const query = computed({

6
src/runtime/composables/useButtonGroup.ts
View File

@@ -72,8 +72,12 @@ export function useInjectButtonGroup ({ ui, props }: { ui: any, props: any }) {
onUnmounted(() => {
groupContext?.value.unregister(instance)
})
return {
size: computed(() => groupContext?.value.size || props.size),
size: computed(() => {
if (!groupContext?.value) return props.size
return groupContext?.value.size ?? ui.value.default.size
}),
rounded: computed(() => {
if (!groupContext || positionInGroup.value === -1) return ui.value.rounded
if (groupContext.value.children.length === 1) return groupContext.value.ui.rounded

9
src/runtime/composables/useFormGroup.ts
View File

@@ -1,6 +1,10 @@
import { inject, ref, computed } from 'vue'
import { type UseEventBusReturn, useDebounceFn } from '@vueuse/core'
import type { FormEvent, FormEventType, InjectedFormGroupValue } from '../types/form'
import { mergeConfig } from '../utils'
// @ts-expect-error
import appConfig from '#build/app.config'
import { formGroup } from '#ui/ui.config'
type InputProps = {
id?: string
@@ -11,6 +15,9 @@ type InputProps = {
legend?: string | null
}
const formGroupConfig = mergeConfig<typeof formGroup>(appConfig.ui.strategy, appConfig.ui.formGroup, formGroup)
export const useFormGroup = (inputProps?: InputProps, config?: any) => {
const formBus = inject<UseEventBusReturn<FormEvent, string> | undefined>('form-events', undefined)
const formGroup = inject<InjectedFormGroupValue | undefined>('form-group', undefined)
@@ -55,7 +62,7 @@ export const useFormGroup = (inputProps?: InputProps, config?: any) => {
name: computed(() => inputProps?.name ?? formGroup?.name.value),
size: computed(() => {
const formGroupSize = config.size[formGroup?.size.value as string] ? formGroup?.size.value : null
return inputProps?.size ?? formGroupSize ?? config?.default?.size
return inputProps?.size ?? formGroupSize ?? formGroupConfig?.default?.size
}),
color: computed(() => formGroup?.error?.value ? 'red' : inputProps?.color),
emitFormBlur,