Technically you could already set `label: undefined` and it would be
supported by group fields but the types didn't reflect this.
So now you can create an unnamed group field like this:
```ts
{
type: 'group',
fields: [
{
type: 'text',
name: 'insideGroupWithNoLabel',
},
],
},
```
This will remove the label while still visually grouping the fields.

---------
Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>
365 lines
7.6 KiB
TypeScript
365 lines
7.6 KiB
TypeScript
import type { CollectionConfig } from 'payload'
|
|
|
|
import { groupFieldsSlug } from '../../slugs.js'
|
|
|
|
export const groupDefaultValue = 'set from parent'
|
|
export const groupDefaultChild = 'child takes priority'
|
|
|
|
const GroupFields: CollectionConfig = {
|
|
slug: groupFieldsSlug,
|
|
versions: true,
|
|
admin: {
|
|
defaultColumns: ['id', 'group', 'insideUnnamedGroup', 'deeplyNestedGroup'],
|
|
},
|
|
fields: [
|
|
{
|
|
label: 'Group Field',
|
|
name: 'group',
|
|
type: 'group',
|
|
defaultValue: {
|
|
defaultParent: groupDefaultValue,
|
|
},
|
|
admin: {
|
|
description: 'This is a group.',
|
|
},
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
required: true,
|
|
defaultValue: groupDefaultValue,
|
|
},
|
|
{
|
|
name: 'defaultParent',
|
|
type: 'text',
|
|
defaultValue: groupDefaultChild,
|
|
},
|
|
{
|
|
name: 'defaultChild',
|
|
type: 'text',
|
|
defaultValue: groupDefaultChild,
|
|
},
|
|
{
|
|
name: 'subGroup',
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
name: 'textWithinGroup',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'arrayWithinGroup',
|
|
type: 'array',
|
|
fields: [
|
|
{
|
|
name: 'textWithinArray',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'arrayOfGroups',
|
|
type: 'array',
|
|
defaultValue: [
|
|
{
|
|
groupItem: {
|
|
text: 'Hello world',
|
|
},
|
|
},
|
|
],
|
|
fields: [
|
|
{
|
|
name: 'groupItem',
|
|
type: 'group',
|
|
fields: [{ name: 'text', type: 'text' }],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'localizedGroup',
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
localized: true,
|
|
},
|
|
{
|
|
name: 'potentiallyEmptyGroup',
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
name: 'text',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'row',
|
|
fields: [
|
|
{
|
|
name: 'groupInRow',
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
name: 'field',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'secondField',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'thirdField',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'secondGroupInRow',
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
name: 'field',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'nestedGroup',
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
name: 'nestedField',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'tabs',
|
|
tabs: [
|
|
{
|
|
name: 'groups',
|
|
label: 'Groups in tabs',
|
|
fields: [
|
|
{
|
|
type: 'row',
|
|
fields: [
|
|
{
|
|
name: 'groupInRow',
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
name: 'field',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'secondField',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'thirdField',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'secondGroupInRow',
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
name: 'field',
|
|
type: 'text',
|
|
},
|
|
{
|
|
name: 'nestedGroup',
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
name: 'nestedField',
|
|
type: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'camelCaseGroup',
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
name: 'array',
|
|
type: 'array',
|
|
fields: [
|
|
{
|
|
type: 'text',
|
|
name: 'text',
|
|
localized: true,
|
|
},
|
|
{
|
|
type: 'array',
|
|
name: 'array',
|
|
fields: [
|
|
{
|
|
type: 'text',
|
|
name: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'localizedGroupArr',
|
|
type: 'group',
|
|
localized: true,
|
|
fields: [
|
|
{
|
|
name: 'array',
|
|
type: 'array',
|
|
fields: [
|
|
{
|
|
type: 'text',
|
|
name: 'text',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'localizedGroupSelect',
|
|
type: 'group',
|
|
localized: true,
|
|
fields: [
|
|
{
|
|
type: 'select',
|
|
hasMany: true,
|
|
options: ['one', 'two'],
|
|
name: 'select',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'localizedGroupRel',
|
|
type: 'group',
|
|
localized: true,
|
|
fields: [
|
|
{
|
|
type: 'relationship',
|
|
relationTo: 'email-fields',
|
|
name: 'email',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'localizedGroupManyRel',
|
|
type: 'group',
|
|
localized: true,
|
|
fields: [
|
|
{
|
|
type: 'relationship',
|
|
relationTo: 'email-fields',
|
|
name: 'email',
|
|
hasMany: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'localizedGroupPolyRel',
|
|
type: 'group',
|
|
localized: true,
|
|
fields: [
|
|
{
|
|
type: 'relationship',
|
|
relationTo: ['email-fields'],
|
|
name: 'email',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'localizedGroupPolyHasManyRel',
|
|
type: 'group',
|
|
localized: true,
|
|
fields: [
|
|
{
|
|
type: 'relationship',
|
|
relationTo: ['email-fields'],
|
|
name: 'email',
|
|
hasMany: true,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'group',
|
|
label: 'Unnamed group',
|
|
fields: [
|
|
{
|
|
type: 'text',
|
|
name: 'insideUnnamedGroup',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'group',
|
|
fields: [
|
|
{
|
|
type: 'text',
|
|
name: 'insideGroupWithNoLabel',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: 'group',
|
|
label: 'Deeply nested group',
|
|
fields: [
|
|
{
|
|
type: 'group',
|
|
label: 'Deeply nested group',
|
|
fields: [
|
|
{
|
|
type: 'group',
|
|
name: 'deeplyNestedGroup',
|
|
label: 'Deeply nested group',
|
|
fields: [
|
|
{
|
|
type: 'group',
|
|
label: 'Deeply nested group',
|
|
fields: [
|
|
{
|
|
type: 'group',
|
|
label: 'Deeply nested group',
|
|
fields: [
|
|
{
|
|
type: 'text',
|
|
name: 'insideNestedUnnamedGroup',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
],
|
|
}
|
|
|
|
export default GroupFields
|