@duke333/builder-ui 0.2.4 → 0.2.5

package/README.md

@@ -53,6 +53,24 @@ loading, empty, errors, focus restoration, and row action isolation. Runtime for
 
 The existing `createDynamic*Component` factories remain available as the advanced headless API.
 
+## Form Layout Presentation
+
+Form layout groups stay backward-compatible and render as stacked sections by default. Set the
+layout presentation to `tabs` when each group should be shown as a tab:
+
+```ts
+layout: {
+  presentation: "tabs",
+  groups: [
+    { id: "general", title: "General", columns: 12, fields: [] },
+    { id: "content", title: "Content", columns: 12, fields: [] },
+  ],
+}
+```
+
+The ready runtime keeps inactive tab fields mounted so their form state and validation remain
+intact. Headless consumers should preserve the same behavior in their form adapter.
+
 ## Validation
 
 ```bash

package/dist/{BuilderAdminPages-DwwdA8Dv.d.ts → BuilderAdminPages-bV-lwDOp.d.ts}

@@ -87,6 +87,7 @@ type BuilderEditorFormLayoutGroup = {
     fields?: BuilderEditorFormLayoutField[];
 };
 type BuilderEditorFormLayout = {
+    presentation?: "stacked" | "tabs";
     groups?: BuilderEditorFormLayoutGroup[];
 };
 type BuilderEditorColumn = {
@@ -189,6 +190,7 @@ type BuilderFormEditorValues<TFieldType extends string = string, TTriggerEvent e
     sourceTable: string;
     apiBasePath?: string;
     fields: BuilderFormEditorFieldValues<TFieldType>[];
+    layoutPresentation: "stacked" | "tabs";
     layoutGroups: BuilderFormEditorLayoutGroupValues[];
     subforms?: BuilderFormEditorSubformValues[];
     triggers: BuilderEditorTriggerValues<TTriggerEvent>[];
@@ -295,6 +297,7 @@ declare function builderFormEditorInputFromValues<TFieldType extends string, TTr
             }[];
         }[];
         layout: {
+            presentation: "stacked" | "tabs";
             groups: BuilderFormEditorLayoutGroupValues[];
         };
         subforms: {

package/dist/admin/index.d.ts

@@ -1,5 +1,5 @@
-import { C as BuilderViewEditorEntity, D as BuilderViewEditorValues, X as BuilderFormEditorLayoutGroupValues, u as BuilderFormEditorValues, s as BuilderFormEditorFieldValues, Y as BuilderFormEditorSubformValues } from '../BuilderAdminPages-DwwdA8Dv.js';
-export { B as BUILDER_EDITOR_NONE_VALUE, a as BuilderAdminPageContracts, b as BuilderAdminPagesOptions, c as BuilderAdminPagesRoutes, d as BuilderDefaultEntity, e as BuilderDefaultEntityListResult, f as BuilderDefaultEntityManagerDependencies, g as BuilderDefaultEntityManagerLabels, h as BuilderDefaultEntityManagerState, i as BuilderDefaultEntityMutation, j as BuilderDefaultEntityQueryResult, k as BuilderDefaultFormEditorBodyOptions, l as BuilderDefaultListEditorBodyOptions, m as BuilderDefaultOption, n as BuilderEditorDbTable, o as BuilderEditorSelectOption, p as BuilderEditorTriggerValues, q as BuilderFormEditorBodyProps, r as BuilderFormEditorEntity, t as BuilderFormEditorPageDependencies, v as BuilderListEditorBodyProps, w as BuilderListEditorColumnValues, x as BuilderListEditorEntity, y as BuilderListEditorOrderByValues, z as BuilderListEditorPageDependencies, A as BuilderListEditorValues, E as builderEditorOptionsToText, F as builderEditorSearchFieldsToText, G as builderEditorTextToOptions, H as builderEditorTextToSearchFields, Z as builderFormEditorDefaultLayoutGroups, _ as builderFormEditorDefaultSpan, I as builderFormEditorFieldsFromTable, J as builderFormEditorInputFromValues, K as builderFormEditorValuesFromEntity, L as builderListEditorColumnsFromTable, M as builderListEditorInputFromValues, N as builderListEditorValuesFromEntity, O as builderViewEditorInputFromValues, P as builderViewEditorValuesFromEntity, Q as createBuilderAdminPages, R as createBuilderDefaultEntityManagerComponent, S as createBuilderDefaultFormEditorBody, T as createBuilderDefaultListEditorBody, U as createBuilderFormEditorPageComponent, V as createBuilderListEditorPageComponent, W as getBuilderEditorTriggerRoute } from '../BuilderAdminPages-DwwdA8Dv.js';
+import { C as BuilderViewEditorEntity, D as BuilderViewEditorValues, X as BuilderFormEditorLayoutGroupValues, u as BuilderFormEditorValues, s as BuilderFormEditorFieldValues, Y as BuilderFormEditorSubformValues } from '../BuilderAdminPages-bV-lwDOp.js';
+export { B as BUILDER_EDITOR_NONE_VALUE, a as BuilderAdminPageContracts, b as BuilderAdminPagesOptions, c as BuilderAdminPagesRoutes, d as BuilderDefaultEntity, e as BuilderDefaultEntityListResult, f as BuilderDefaultEntityManagerDependencies, g as BuilderDefaultEntityManagerLabels, h as BuilderDefaultEntityManagerState, i as BuilderDefaultEntityMutation, j as BuilderDefaultEntityQueryResult, k as BuilderDefaultFormEditorBodyOptions, l as BuilderDefaultListEditorBodyOptions, m as BuilderDefaultOption, n as BuilderEditorDbTable, o as BuilderEditorSelectOption, p as BuilderEditorTriggerValues, q as BuilderFormEditorBodyProps, r as BuilderFormEditorEntity, t as BuilderFormEditorPageDependencies, v as BuilderListEditorBodyProps, w as BuilderListEditorColumnValues, x as BuilderListEditorEntity, y as BuilderListEditorOrderByValues, z as BuilderListEditorPageDependencies, A as BuilderListEditorValues, E as builderEditorOptionsToText, F as builderEditorSearchFieldsToText, G as builderEditorTextToOptions, H as builderEditorTextToSearchFields, Z as builderFormEditorDefaultLayoutGroups, _ as builderFormEditorDefaultSpan, I as builderFormEditorFieldsFromTable, J as builderFormEditorInputFromValues, K as builderFormEditorValuesFromEntity, L as builderListEditorColumnsFromTable, M as builderListEditorInputFromValues, N as builderListEditorValuesFromEntity, O as builderViewEditorInputFromValues, P as builderViewEditorValuesFromEntity, Q as createBuilderAdminPages, R as createBuilderDefaultEntityManagerComponent, S as createBuilderDefaultFormEditorBody, T as createBuilderDefaultListEditorBody, U as createBuilderFormEditorPageComponent, V as createBuilderListEditorPageComponent, W as getBuilderEditorTriggerRoute } from '../BuilderAdminPages-bV-lwDOp.js';
 import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';
 import { BuilderApiContracts } from '../api/index.js';

package/dist/admin/index.js

@@ -145,6 +145,7 @@ function builderFormEditorValuesFromEntity(form, emptyValues) {
     sourceTable: source?.type === "dbTable" ? source.tableName : BUILDER_EDITOR_NONE_VALUE,
     apiBasePath: source?.type === "apiEndpoint" ? source.basePath : "",
     fields,
+    layoutPresentation: form.schema.layout?.presentation ?? "stacked",
     layoutGroups: normalizeBuilderFormEditorLayoutGroups(
       form.schema.layout?.groups,
       fields,
@@ -264,6 +265,7 @@ function builderFormEditorInputFromValues(values) {
         }))
       })),
       layout: {
+        presentation: values.layoutPresentation,
         groups: normalizeBuilderFormEditorLayoutGroups(
           values.layoutGroups,
           values.fields,
@@ -657,6 +659,13 @@ function createBuilderDefaultFormEditorBody(options) {
             }
           )
         ] }),
+        /* @__PURE__ */ jsx("div", { style: styles.grid, children: /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+          /* @__PURE__ */ jsx("span", { style: styles.label, children: "Group presentation" }),
+          /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register("layoutPresentation"), children: [
+            /* @__PURE__ */ jsx("option", { value: "stacked", children: "Stacked sections" }),
+            /* @__PURE__ */ jsx("option", { value: "tabs", children: "Tabs" })
+          ] })
+        ] }) }),
         form.watch("layoutGroups").map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { style: styles.row, children: [
           /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
             /* @__PURE__ */ jsx("span", { style: styles.label, children: "Group title" }),
@@ -1714,6 +1723,7 @@ function createBuilderAdminPages({
     sourceTable: BUILDER_EDITOR_NONE_VALUE,
     apiBasePath: "",
     fields: [emptyField],
+    layoutPresentation: "stacked",
     layoutGroups: builderFormEditorDefaultLayoutGroups([emptyField]),
     subforms: [],
     triggers: [],