Browse Source
Add `type: 'group'` to `FormSchema`, parallel to `type: 'array'`, so a set of fields can be organised into a collapsible section without turning the group itself into a field. Co-authored-by: Cursor <cursoragent@cursor.com>pull/8379/head
Zehui Chan
3 weeks ago
19 changed files with 1069 additions and 61 deletions
@ -0,0 +1,5 @@ |
|||
--- |
|||
'@vben-core/form-ui': minor |
|||
--- |
|||
|
|||
feat: support grouped schema for collapsible sections |
|||
@ -0,0 +1,189 @@ |
|||
import type { VueWrapper } from '@vue/test-utils'; |
|||
|
|||
import type { FormSchema } from '../src/types'; |
|||
|
|||
import { flushPromises, mount } from '@vue/test-utils'; |
|||
import { defineComponent, h } from 'vue'; |
|||
|
|||
import { afterEach, beforeAll, describe, expect, it } from 'vitest'; |
|||
import { z } from 'zod'; |
|||
|
|||
import { setupVbenForm } from '../src/config'; |
|||
import { useVbenForm } from '../src/use-vben-form'; |
|||
|
|||
const wrappers: VueWrapper[] = []; |
|||
|
|||
const TestInput = defineComponent({ |
|||
inheritAttrs: false, |
|||
emits: ['update:modelValue'], |
|||
setup(_props, { attrs, emit }) { |
|||
return () => |
|||
h('input', { |
|||
...attrs, |
|||
onInput: (event: Event) => { |
|||
emit('update:modelValue', (event.target as HTMLInputElement).value); |
|||
}, |
|||
value: attrs.modelValue ?? '', |
|||
}); |
|||
}, |
|||
}); |
|||
|
|||
beforeAll(() => { |
|||
setupVbenForm({ config: {} }); |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
for (const wrapper of wrappers.splice(0)) { |
|||
wrapper.unmount(); |
|||
} |
|||
}); |
|||
|
|||
function createContactGroup( |
|||
overrides: Partial<Extract<FormSchema, { type: 'group' }>> = {}, |
|||
): FormSchema { |
|||
return { |
|||
children: [ |
|||
{ |
|||
component: TestInput, |
|||
defaultValue: 'ada@example.com', |
|||
fieldName: 'email', |
|||
label: 'Email', |
|||
}, |
|||
{ component: TestInput, fieldName: 'phone', label: 'Phone' }, |
|||
], |
|||
name: 'contact', |
|||
title: 'Contact', |
|||
type: 'group', |
|||
...overrides, |
|||
}; |
|||
} |
|||
|
|||
function getGroupState(wrapper: VueWrapper) { |
|||
return wrapper.get('.form-group [data-state]').attributes('data-state'); |
|||
} |
|||
|
|||
describe('form group rendering', () => { |
|||
it('renders grouped fields as regular form fields', async () => { |
|||
const [Form, formApi] = useVbenForm({ |
|||
schema: [ |
|||
{ component: TestInput, fieldName: 'name', label: 'Name' }, |
|||
createContactGroup({ extra: 'Optional' }), |
|||
], |
|||
}); |
|||
const wrapper = mount(Form); |
|||
wrappers.push(wrapper); |
|||
await flushPromises(); |
|||
|
|||
expect(wrapper.get('.form-group-title').text()).toBe('Contact'); |
|||
expect(wrapper.text()).toContain('Optional'); |
|||
expect(wrapper.findAll('input')).toHaveLength(3); |
|||
expect(wrapper.get('.form-group').findAll('input')).toHaveLength(2); |
|||
expect(getGroupState(wrapper)).toBe('open'); |
|||
expect(await formApi.getValues()).toEqual({ email: 'ada@example.com' }); |
|||
}); |
|||
|
|||
it('toggles the group from its header and honors defaultCollapsed', async () => { |
|||
const [Form] = useVbenForm({ |
|||
schema: [createContactGroup({ defaultCollapsed: true })], |
|||
}); |
|||
const wrapper = mount(Form); |
|||
wrappers.push(wrapper); |
|||
await flushPromises(); |
|||
|
|||
expect(getGroupState(wrapper)).toBe('closed'); |
|||
|
|||
await wrapper.get('.form-group-header').trigger('click'); |
|||
expect(getGroupState(wrapper)).toBe('open'); |
|||
|
|||
await wrapper.get('.form-group-header').trigger('click'); |
|||
expect(getGroupState(wrapper)).toBe('closed'); |
|||
}); |
|||
|
|||
it('keeps a non-collapsible group open when the header is clicked', async () => { |
|||
const [Form] = useVbenForm({ |
|||
schema: [createContactGroup({ collapsible: false })], |
|||
}); |
|||
const wrapper = mount(Form); |
|||
wrappers.push(wrapper); |
|||
await flushPromises(); |
|||
|
|||
await wrapper.get('.form-group-header').trigger('click'); |
|||
expect(getGroupState(wrapper)).toBe('open'); |
|||
}); |
|||
|
|||
it('expands a collapsed group when one of its fields fails validation', async () => { |
|||
const [Form, formApi] = useVbenForm({ |
|||
schema: [ |
|||
createContactGroup({ |
|||
children: [ |
|||
{ |
|||
component: TestInput, |
|||
fieldName: 'email', |
|||
label: 'Email', |
|||
rules: z.string().min(1, 'Email is required'), |
|||
}, |
|||
], |
|||
defaultCollapsed: true, |
|||
}), |
|||
], |
|||
}); |
|||
const wrapper = mount(Form); |
|||
wrappers.push(wrapper); |
|||
await flushPromises(); |
|||
|
|||
expect(getGroupState(wrapper)).toBe('closed'); |
|||
|
|||
expect(await formApi.validate()).toEqual({ |
|||
errors: { email: 'Email is required' }, |
|||
valid: false, |
|||
}); |
|||
await flushPromises(); |
|||
|
|||
expect(getGroupState(wrapper)).toBe('open'); |
|||
expect(wrapper.text()).toContain('Email is required'); |
|||
}); |
|||
|
|||
it('skips hidden groups and forwards field slots into groups', async () => { |
|||
const [Form] = useVbenForm({ |
|||
schema: [ |
|||
createContactGroup(), |
|||
{ |
|||
children: [{ component: TestInput, fieldName: 'secret' }], |
|||
hide: true, |
|||
name: 'hidden', |
|||
type: 'group', |
|||
}, |
|||
], |
|||
}); |
|||
const wrapper = mount(Form, { |
|||
slots: { |
|||
phone: (slotProps: Record<string, any>) => |
|||
h(TestInput, { |
|||
...slotProps.componentProps, |
|||
class: 'slot-phone', |
|||
}), |
|||
}, |
|||
}); |
|||
wrappers.push(wrapper); |
|||
await flushPromises(); |
|||
|
|||
expect(wrapper.findAll('.form-group')).toHaveLength(1); |
|||
expect(wrapper.findAll('input')).toHaveLength(2); |
|||
expect(wrapper.get('.form-group').find('.slot-phone').exists()).toBe(true); |
|||
}); |
|||
|
|||
it('re-renders grouped fields after updateSchema', async () => { |
|||
const [Form, formApi] = useVbenForm({ |
|||
schema: [createContactGroup()], |
|||
}); |
|||
const wrapper = mount(Form); |
|||
wrappers.push(wrapper); |
|||
await flushPromises(); |
|||
|
|||
formApi.updateSchema([{ fieldName: 'phone', label: 'Mobile' }]); |
|||
await flushPromises(); |
|||
|
|||
expect(wrapper.text()).toContain('Mobile'); |
|||
expect(wrapper.text()).not.toContain('Phone'); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,107 @@ |
|||
<script setup lang="ts"> |
|||
import type { FormGroupSchema } from '../types'; |
|||
|
|||
import { computed, ref, watch } from 'vue'; |
|||
|
|||
import { ChevronsDown } from '@vben-core/icons'; |
|||
import { VbenCollapsible, VbenRenderContent } from '@vben-core/shadcn-ui'; |
|||
import { cn } from '@vben-core/shared/utils'; |
|||
|
|||
import { injectRenderFormProps } from './context'; |
|||
|
|||
interface Props { |
|||
/** 分组内容区（字段栅格）的样式 */ |
|||
contentClass?: string; |
|||
/** 表单折叠按钮收起时是否隐藏当前分组 */ |
|||
hidden?: boolean; |
|||
schema: FormGroupSchema; |
|||
} |
|||
|
|||
const props = withDefaults(defineProps<Props>(), { |
|||
contentClass: '', |
|||
hidden: false, |
|||
}); |
|||
|
|||
const formRenderProps = injectRenderFormProps(); |
|||
|
|||
const collapseOpen = ref(!props.schema.defaultCollapsed); |
|||
|
|||
const shouldCollapsible = computed(() => { |
|||
return props.schema.collapsible !== false; |
|||
}); |
|||
|
|||
// 组内任一字段校验失败时自动展开，避免错误提示被折叠区域遮住 |
|||
const hasInvalidField = computed(() => { |
|||
const errors = formRenderProps.form?.errors ?? {}; |
|||
return props.schema.children.some((field) => |
|||
Boolean(errors[field.fieldName]), |
|||
); |
|||
}); |
|||
|
|||
watch(hasInvalidField, (invalid) => { |
|||
if (invalid && !collapseOpen.value) { |
|||
collapseOpen.value = true; |
|||
} |
|||
}); |
|||
|
|||
function toggleCollapsed() { |
|||
if (!shouldCollapsible.value) { |
|||
return; |
|||
} |
|||
collapseOpen.value = !collapseOpen.value; |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div |
|||
:class=" |
|||
cn( |
|||
'form-group col-span-full flex w-full flex-col', |
|||
{ hidden: props.hidden }, |
|||
props.schema.formItemClass, |
|||
) |
|||
" |
|||
> |
|||
<VbenCollapsible v-model:open="collapseOpen" :show-trigger="false"> |
|||
<template #label> |
|||
<div |
|||
:class=" |
|||
cn( |
|||
'form-group-header mb-2 flex min-h-7 flex-1 items-center gap-2', |
|||
{ |
|||
'cursor-pointer select-none': shouldCollapsible, |
|||
}, |
|||
) |
|||
" |
|||
@click="toggleCollapsed" |
|||
> |
|||
<span class="bg-primary h-3.5 w-[3px] flex-none rounded-full"></span> |
|||
<span |
|||
v-if="props.schema.title" |
|||
class="form-group-title text-sm font-medium leading-6" |
|||
> |
|||
<VbenRenderContent :content="props.schema.title" /> |
|||
</span> |
|||
<div v-if="props.schema.extra" class="ml-auto" @click.stop> |
|||
<VbenRenderContent :content="props.schema.extra" /> |
|||
</div> |
|||
<ChevronsDown |
|||
v-if="shouldCollapsible" |
|||
:size="16" |
|||
:class=" |
|||
cn('text-muted-foreground transition-transform', { |
|||
'ml-auto': !props.schema.extra, |
|||
'rotate-180': collapseOpen, |
|||
}) |
|||
" |
|||
/> |
|||
</div> |
|||
</template> |
|||
<template #collapsibleContent> |
|||
<div :class="props.contentClass"> |
|||
<slot></slot> |
|||
</div> |
|||
</template> |
|||
</VbenCollapsible> |
|||
</div> |
|||
</template> |
|||
Loading…
Reference in new issue