@duke333/builder-ui 0.1.3 → 0.1.5

package/README.md

@@ -65,6 +65,13 @@ Use:
 - `DynamicList` for list-only read flow
 - `DynamicView` for full CRUD flow
 
+Runtime form schemas expose `presentation: "dialog" | "drawer"`. The injected main-form and
+subform `DialogShell` components receive that value and choose the matching host UI shell.
+
+When binding a data grid, forward the row click event through `onRowClick(row, event)`. Action
+buttons should pass their click event to `actions.onEdit(row, event)` or
+`actions.onDelete(row, event)` so an action click cannot also open the row editor.
+
 ## Validation
 
 ```bash

package/dist/{BuilderAdminPages-Buy2nvjs.d.ts → BuilderAdminPages-C-jaMLOa.d.ts}

@@ -70,6 +70,7 @@ type BuilderEditorSubform = {
     childField: string;
     buttonLabel?: string;
     icon?: string;
+    presentation?: "dialog" | "drawer";
 };
 type BuilderEditorFormLayoutField = {
     key: string;
@@ -96,6 +97,7 @@ type BuilderFormEditorEntity<TFieldType extends string = string, TTriggerEvent e
     version: number;
     source: BuilderEditorSource;
     schema: {
+        presentation?: "dialog" | "drawer";
         fields: BuilderEditorField<TFieldType>[];
         layout?: BuilderEditorFormLayout;
         subforms?: BuilderEditorSubform[];
@@ -138,6 +140,7 @@ type BuilderFormEditorSubformValues = {
     childField: string;
     buttonLabel?: string;
     icon?: string;
+    presentation?: "dialog" | "drawer";
 };
 type BuilderFormEditorLayoutFieldValues = {
     key: string;
@@ -171,6 +174,7 @@ type BuilderEditorFieldTriggerValues = {
 type BuilderFormEditorValues<TFieldType extends string = string, TTriggerEvent extends string = string> = {
     title: string;
     description?: string;
+    presentation?: "dialog" | "drawer";
     sourceType: "none" | "dbTable" | "apiEndpoint";
     sourceTable: string;
     apiBasePath?: string;
@@ -241,6 +245,7 @@ declare function builderFormEditorInputFromValues<TFieldType extends string, TTr
         tableName?: undefined;
     } | null;
     schema: {
+        presentation: "dialog" | "drawer";
         fields: {
             key: string;
             label: string;
@@ -280,6 +285,7 @@ declare function builderFormEditorInputFromValues<TFieldType extends string, TTr
             childField: string;
             buttonLabel: string | undefined;
             icon: string | undefined;
+            presentation: "dialog" | "drawer";
         }[];
     };
     triggers: {

package/dist/{RuntimeEntryDialog-DAO74GFp.d.ts → RuntimeEntryDialog-Bw741XbS.d.ts}

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';
 import { BuilderApiContracts } from './api/index.js';
 import { BuilderHooks } from './hooks/index.js';
-import { BuilderRuntimeFormSchemaLike, BuilderRuntimeFormValues, BuilderRuntimeEntryLike, BuilderRuntimeViewLike, BuilderRuntimeEntryValues } from './runtime/index.js';
+import { BuilderRuntimeFormSchemaLike, BuilderRuntimeFormValues, BuilderRuntimeEntryLike, BuilderRuntimeViewLike, BuilderRuntimePresentation, BuilderRuntimeEntryValues } from './runtime/index.js';
 
 type DynamicFormContracts = BuilderApiContracts & {
     BuilderForm: {
@@ -114,9 +114,14 @@ type DynamicViewContracts = BuilderApiContracts & {
 type DynamicViewProps = {
     viewId: string;
 };
+type DynamicViewInteractionEvent = {
+    defaultPrevented?: boolean;
+    target?: unknown;
+    stopPropagation?(): void;
+};
 type DynamicViewColumnActions<TEntry> = {
-    onEdit(entry: TEntry): void;
-    onDelete(entry: TEntry): void;
+    onEdit(entry: TEntry, event?: DynamicViewInteractionEvent): void;
+    onDelete(entry: TEntry, event?: DynamicViewInteractionEvent): void;
 };
 type DynamicViewDataGridProps<TController> = {
     title?: string;
@@ -126,7 +131,7 @@ type DynamicViewDataGridProps<TController> = {
     searchPlaceholder?: string;
     emptyTitle?: string;
     emptyDescription?: string;
-    onRowClick?: (row: unknown) => void;
+    onRowClick?: (row: unknown, event?: DynamicViewInteractionEvent) => void;
     toolbarExtra?: ReactNode;
 };
 type DynamicViewAddButtonProps = {
@@ -154,6 +159,7 @@ type DynamicViewErrorStateProps = {
     title: string;
     description: string;
 };
+declare function shouldHandleDynamicViewRowClick(event?: DynamicViewInteractionEvent): boolean;
 type DynamicViewDependencies<C extends DynamicViewContracts, TColumn, TState extends {
     query: C["ListBuilderViewEntriesQuery"];
 }, TController> = {
@@ -216,6 +222,7 @@ type RuntimeEntryDialogProps<TView, TEntry, TInput> = {
 };
 type RuntimeEntryDialogShellProps = {
     open: boolean;
+    presentation: BuilderRuntimePresentation;
     title: string;
     description: string;
     onClose: () => void;
@@ -279,4 +286,4 @@ type RuntimeEntryDialogDependencies<TView extends RuntimeEntryDialogViewLike, TE
 };
 declare function createRuntimeEntryDialogComponent<TView extends RuntimeEntryDialogViewLike, TEntry extends BuilderRuntimeEntryLike, TInput extends BuilderRuntimeEntryValues>(deps: RuntimeEntryDialogDependencies<TView, TEntry>): ({ open, view, editing, onClose, onSave, isSaving, }: RuntimeEntryDialogProps<TView, TEntry, TInput>) => react.JSX.Element;
 
-export { type RuntimeEntryDialogSaveArgs as A, type RuntimeEntryDialogShellProps as B, type RuntimeEntryDialogViewLike as C, type DynamicFormContracts as D, createDynamicFormComponent as E, createDynamicListComponent as F, createDynamicViewComponent as G, createRuntimeEntryDialogComponent as H, type RuntimeEntryDialogDraftRowsChange as R, type DynamicFormDependencies as a, type DynamicFormErrorStateProps as b, type DynamicFormFieldsProps as c, type DynamicFormNotifications as d, type DynamicFormProps as e, type DynamicFormShellProps as f, type DynamicFormSubmitProps as g, type DynamicListContracts as h, type DynamicListDataGridProps as i, type DynamicListDependencies as j, type DynamicListErrorStateProps as k, type DynamicListProps as l, type DynamicViewAddButtonProps as m, type DynamicViewColumnActions as n, type DynamicViewContracts as o, type DynamicViewDataGridProps as p, type DynamicViewDeleteDialogProps as q, type DynamicViewDependencies as r, type DynamicViewEntryDialogProps as s, type DynamicViewErrorStateProps as t, type DynamicViewProps as u, type RuntimeEntryDialogActionsProps as v, type RuntimeEntryDialogDependencies as w, type RuntimeEntryDialogFieldsProps as x, type RuntimeEntryDialogNotifications as y, type RuntimeEntryDialogProps as z };
+export { type RuntimeEntryDialogProps as A, type RuntimeEntryDialogSaveArgs as B, type RuntimeEntryDialogShellProps as C, type DynamicFormContracts as D, type RuntimeEntryDialogViewLike as E, createDynamicFormComponent as F, createDynamicListComponent as G, createDynamicViewComponent as H, createRuntimeEntryDialogComponent as I, shouldHandleDynamicViewRowClick as J, type RuntimeEntryDialogDraftRowsChange as R, type DynamicFormDependencies as a, type DynamicFormErrorStateProps as b, type DynamicFormFieldsProps as c, type DynamicFormNotifications as d, type DynamicFormProps as e, type DynamicFormShellProps as f, type DynamicFormSubmitProps as g, type DynamicListContracts as h, type DynamicListDataGridProps as i, type DynamicListDependencies as j, type DynamicListErrorStateProps as k, type DynamicListProps as l, type DynamicViewAddButtonProps as m, type DynamicViewColumnActions as n, type DynamicViewContracts as o, type DynamicViewDataGridProps as p, type DynamicViewDeleteDialogProps as q, type DynamicViewDependencies as r, type DynamicViewEntryDialogProps as s, type DynamicViewErrorStateProps as t, type DynamicViewInteractionEvent as u, type DynamicViewProps as v, type RuntimeEntryDialogActionsProps as w, type RuntimeEntryDialogDependencies as x, type RuntimeEntryDialogFieldsProps as y, type RuntimeEntryDialogNotifications as z };

package/dist/admin/index.d.ts

@@ -1,5 +1,5 @@
-import { A as BuilderViewEditorEntity, C as BuilderViewEditorValues, W as BuilderFormEditorLayoutGroupValues, u as BuilderFormEditorValues, s as BuilderFormEditorFieldValues, X as BuilderFormEditorSubformValues } from '../BuilderAdminPages-Buy2nvjs.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 BuilderListEditorPageDependencies, z as BuilderListEditorValues, D as builderEditorOptionsToText, E as builderEditorSearchFieldsToText, F as builderEditorTextToOptions, G as builderEditorTextToSearchFields, Y as builderFormEditorDefaultLayoutGroups, Z as builderFormEditorDefaultSpan, H as builderFormEditorFieldsFromTable, I as builderFormEditorInputFromValues, J as builderFormEditorValuesFromEntity, K as builderListEditorColumnsFromTable, L as builderListEditorInputFromValues, M as builderListEditorValuesFromEntity, N as builderViewEditorInputFromValues, O as builderViewEditorValuesFromEntity, P as createBuilderAdminPages, Q as createBuilderDefaultEntityManagerComponent, R as createBuilderDefaultFormEditorBody, S as createBuilderDefaultListEditorBody, T as createBuilderFormEditorPageComponent, U as createBuilderListEditorPageComponent, V as getBuilderEditorTriggerRoute } from '../BuilderAdminPages-Buy2nvjs.js';
+import { A as BuilderViewEditorEntity, C as BuilderViewEditorValues, W as BuilderFormEditorLayoutGroupValues, u as BuilderFormEditorValues, s as BuilderFormEditorFieldValues, X as BuilderFormEditorSubformValues } from '../BuilderAdminPages-C-jaMLOa.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 BuilderListEditorPageDependencies, z as BuilderListEditorValues, D as builderEditorOptionsToText, E as builderEditorSearchFieldsToText, F as builderEditorTextToOptions, G as builderEditorTextToSearchFields, Y as builderFormEditorDefaultLayoutGroups, Z as builderFormEditorDefaultSpan, H as builderFormEditorFieldsFromTable, I as builderFormEditorInputFromValues, J as builderFormEditorValuesFromEntity, K as builderListEditorColumnsFromTable, L as builderListEditorInputFromValues, M as builderListEditorValuesFromEntity, N as builderViewEditorInputFromValues, O as builderViewEditorValuesFromEntity, P as createBuilderAdminPages, Q as createBuilderDefaultEntityManagerComponent, R as createBuilderDefaultFormEditorBody, S as createBuilderDefaultListEditorBody, T as createBuilderFormEditorPageComponent, U as createBuilderListEditorPageComponent, V as getBuilderEditorTriggerRoute } from '../BuilderAdminPages-C-jaMLOa.js';
 import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';
 import { BuilderApiContracts } from '../api/index.js';

package/dist/admin/index.js

@@ -128,11 +128,13 @@ function builderFormEditorValuesFromEntity(form, emptyValues) {
     parentField: subform.parentField,
     childField: subform.childField,
     buttonLabel: subform.buttonLabel ?? "",
-    icon: subform.icon ?? ""
+    icon: subform.icon ?? "",
+    presentation: subform.presentation ?? "dialog"
   }));
   return {
     title: form.title,
     description: form.description ?? "",
+    presentation: form.schema.presentation ?? "dialog",
     sourceType: source?.type ?? "none",
     sourceTable: source?.type === "dbTable" ? source.tableName : BUILDER_EDITOR_NONE_VALUE,
     apiBasePath: source?.type === "apiEndpoint" ? source.basePath : "",
@@ -214,6 +216,7 @@ function builderFormEditorInputFromValues(values) {
     description: values.description || null,
     source,
     schema: {
+      presentation: values.presentation ?? "dialog",
       fields: values.fields.map((field) => ({
         key: field.key,
         label: field.label,
@@ -258,7 +261,8 @@ function builderFormEditorInputFromValues(values) {
         parentField: subform.parentField,
         childField: subform.childField,
         buttonLabel: subform.buttonLabel?.trim() || void 0,
-        icon: subform.icon?.trim() || void 0
+        icon: subform.icon?.trim() || void 0,
+        presentation: subform.presentation ?? "dialog"
       }))
     },
     triggers: values.triggers.map((trigger) => ({
@@ -463,6 +467,13 @@ function createBuilderDefaultFormEditorBody(options) {
             /* @__PURE__ */ jsx("span", { style: styles.label, children: "Description" }),
             /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register("description") })
           ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Presentation" }),
+            /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register("presentation"), children: [
+              /* @__PURE__ */ jsx("option", { value: "dialog", children: "Dialog" }),
+              /* @__PURE__ */ jsx("option", { value: "drawer", children: "Drawer" })
+            ] })
+          ] }),
           /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
             /* @__PURE__ */ jsx("span", { style: styles.label, children: "Datasource" }),
             /* @__PURE__ */ jsxs("select", { style: styles.input, ...form.register("sourceType"), children: [
@@ -644,7 +655,8 @@ function createBuilderDefaultFormEditorBody(options) {
                 parentField: "id",
                 childField: "parentId",
                 buttonLabel: "",
-                icon: ""
+                icon: "",
+                presentation: "dialog"
               }),
               children: "Add subform"
             }
@@ -671,6 +683,20 @@ function createBuilderDefaultFormEditorBody(options) {
             /* @__PURE__ */ jsx("span", { style: styles.label, children: "Child field" }),
             /* @__PURE__ */ jsx("input", { style: styles.input, ...form.register(`subforms.${index}.childField`) })
           ] }),
+          /* @__PURE__ */ jsxs("label", { style: styles.field, children: [
+            /* @__PURE__ */ jsx("span", { style: styles.label, children: "Presentation" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                style: styles.input,
+                ...form.register(`subforms.${index}.presentation`),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "dialog", children: "Dialog" }),
+                  /* @__PURE__ */ jsx("option", { value: "drawer", children: "Drawer" })
+                ]
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx("button", { type: "button", style: styles.button, onClick: () => subformArray.remove(index), children: "Remove" })
         ] }, subform.id))
       ] }),
@@ -1534,6 +1560,7 @@ function createBuilderAdminPages({
   const emptyFormValues = {
     title: "",
     description: "",
+    presentation: "dialog",
     sourceType: "none",
     sourceTable: BUILDER_EDITOR_NONE_VALUE,
     apiBasePath: "",