feat: added support for conditional tabs (#8720)

Adds support for conditional tabs.

You can now add a `condition` function like other fields to each
individual tab's admin config like so:

```ts
{
  name: 'contentTab',
  admin: {
    condition: (data) => Boolean(data?.enableTab)
  }
}
```

This will toggle the individual tab's visibility in the document listing

### Example


https://github.com/user-attachments/assets/45cf9cfd-eaed-4dfe-8a32-1992385fd05c

This is an updated PR from
https://github.com/payloadcms/payload/pull/8406 thanks to @willviles

---------

Co-authored-by: Will Viles <will@willviles.com>
Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>
This commit is contained in:
Paul
2025-03-13 13:32:53 +00:00
committed by GitHub
parent e8064a3a0c
commit 878dc54579
12 changed files with 323 additions and 63 deletions

View File

@@ -1831,6 +1831,19 @@ export interface TabsField {
* This should not collapse despite there being many tabs pushing the main fields open.
*/
sidebarField?: string | null;
/**
* When active, the conditional tab should be visible. When inactive, it should be hidden.
*/
conditionalTabVisible?: boolean | null;
conditionalTab?: {
conditionalTabField?: string | null;
/**
* When active, the nested conditional tab should be visible. When inactive, it should be hidden.
*/
nestedConditionalTabVisible?: boolean | null;
nestedUnconditionalTabInput?: string | null;
nestedConditionalTabInput?: string | null;
};
array: {
text: string;
id?: string | null;
@@ -3452,6 +3465,15 @@ export interface TabsFields2Select<T extends boolean = true> {
*/
export interface TabsFieldsSelect<T extends boolean = true> {
sidebarField?: T;
conditionalTabVisible?: T;
conditionalTab?:
| T
| {
conditionalTabField?: T;
nestedConditionalTabVisible?: T;
nestedUnconditionalTabInput?: T;
nestedConditionalTabInput?: T;
};
array?:
| T
| {