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

Nyantekyi · Jun 19, 2024 · 6b6b03d · 6b6b03d
1 parent 4ad904f
commit 6b6b03d
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 6 deletions.
diff --git a/src/runtime/components/forms/Input.vue b/src/runtime/components/forms/Input.vue
@@ -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 }))
 

diff --git a/src/runtime/components/forms/InputMenu.vue b/src/runtime/components/forms/InputMenu.vue
@@ -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({

diff --git a/src/runtime/components/forms/Select.vue b/src/runtime/components/forms/Select.vue
@@ -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)

diff --git a/src/runtime/components/forms/SelectMenu.vue b/src/runtime/components/forms/SelectMenu.vue
@@ -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({

diff --git a/src/runtime/composables/useButtonGroup.ts b/src/runtime/composables/useButtonGroup.ts
@@ -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

diff --git a/src/runtime/composables/useFormGroup.ts b/src/runtime/composables/useFormGroup.ts
@@ -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,