@compill/admin 1.0.72 → 1.0.73

package/index.cjs.js

@@ -938,12 +938,7 @@ function PageSidebarSection(_a) {
     } = _a,
     props = __rest$1(_a, ["title", "children"]);
   return jsxRuntime.jsxs("div", Object.assign({
-    w: "full",
-    bgColor: "white",
-    rounded: "lg",
-    p: "5",
-    textSize: "sm",
-    shadow: true
+    w: "full"
   }, props, {
     children: [title && jsxRuntime.jsx(admin.PageSectionTitle, {
       children: title
@@ -1182,18 +1177,18 @@ function Internal({
   tabbed,
   containerRef
 }) {
+  var _a, _b, _c;
+  const pScreen = react.runIfFn(screen, item);
   const {
     breadcrumbs,
     schema,
     initialValues,
     header,
-    editorFooter: editoFooter,
     sections,
     buttonBar,
-    editor,
     type,
     invalidateParentQueryKey
-  } = react.runIfFn(screen, item);
+  } = pScreen;
   const mutation = api.useInvalidateParentMutation(api$1.update, invalidateParentQueryKey !== null && invalidateParentQueryKey !== void 0 ? invalidateParentQueryKey : api$1.queryKey, {
     networkMode: "always"
   });
@@ -1223,7 +1218,10 @@ function Internal({
       item: item,
       isLoading: mutation.isLoading,
       trackingRef: containerRef === null || containerRef === void 0 ? void 0 : containerRef.current
-    }), jsxRuntime.jsx("div", {
+    }), type == "form" && (sections === null || sections === void 0 ? void 0 : sections.map((section, index) => jsxRuntime.jsx(Section, {
+      section: section,
+      item: item
+    }, index))), (pScreen.type == "post" || pScreen.type == "section") && jsxRuntime.jsx("div", {
       p: "5",
       bgColor: "slate-100",
       rounded: "lg",
@@ -1239,7 +1237,7 @@ function Internal({
             flexCol: true,
             gap: "8",
             flexGrow: true,
-            children: [(editor === null || editor === void 0 ? void 0 : editor.type) != "textarea" &&
+            children: [((_a = pScreen.editor) === null || _a === void 0 ? void 0 : _a.type) != "textarea" &&
             // TODO Find a way to make this editor shrink in width when resizing the window...
             jsxRuntime.jsx(PageContentEditor, {
               name: "content",
@@ -1247,8 +1245,8 @@ function Internal({
               minW: "144",
               shadow: true,
               rounded: "lg"
-            }), (editor === null || editor === void 0 ? void 0 : editor.type) == "textarea" && jsxRuntime.jsx(form.TextArea, {
-              name: editor === null || editor === void 0 ? void 0 : editor.name,
+            }), ((_b = pScreen.editor) === null || _b === void 0 ? void 0 : _b.type) == "textarea" && jsxRuntime.jsx(form.TextArea, {
+              name: (_c = pScreen.editor) === null || _c === void 0 ? void 0 : _c.name,
               maxW: editorMaxW,
               minW: editorMaxW,
               w: editorMaxW,
@@ -1259,11 +1257,12 @@ function Internal({
               shadow: true,
               p: "5",
               textColor: "slate-800"
-            }), editoFooter]
+            }), pScreen.editorFooter]
           }), jsxRuntime.jsx(PageSidebar, {
             children: sections === null || sections === void 0 ? void 0 : sections.map((section, index) => jsxRuntime.jsx(Section, {
               section: section,
-              item: item
+              item: item,
+              cardStyle: true
             }, index))
           })]
         })]
@@ -1273,15 +1272,24 @@ function Internal({
 }
 function Section({
   section,
-  item
+  item,
+  cardStyle
 }) {
   if (section.type === "section") {
-    return jsxRuntime.jsx(PageSidebarSection, {
-      title: section.title,
+    const style = cardStyle ? {
+      bgColor: "white",
+      rounded: "lg",
+      p: "5",
+      textSize: "sm",
+      shadow: true
+    } : {};
+    return jsxRuntime.jsx(PageSidebarSection, Object.assign({
+      title: section.title
+    }, style, {
       children: jsxRuntime.jsx(form.FormRenderer, {
         form: react.runIfFn(section.form, item)
       })
-    });
+    }));
   }
   if (section.type === "custom") return react.runIfFn(section.component, item);
   return null;

package/index.esm.js

@@ -928,12 +928,7 @@ function PageSidebarSection(_a) {
     } = _a,
     props = __rest$1(_a, ["title", "children"]);
   return jsxs("div", Object.assign({
-    w: "full",
-    bgColor: "white",
-    rounded: "lg",
-    p: "5",
-    textSize: "sm",
-    shadow: true
+    w: "full"
   }, props, {
     children: [title && jsx(PageSectionTitle$1, {
       children: title
@@ -1172,18 +1167,18 @@ function Internal({
   tabbed,
   containerRef
 }) {
+  var _a, _b, _c;
+  const pScreen = runIfFn(screen, item);
   const {
     breadcrumbs,
     schema,
     initialValues,
     header,
-    editorFooter: editoFooter,
     sections,
     buttonBar,
-    editor,
     type,
     invalidateParentQueryKey
-  } = runIfFn(screen, item);
+  } = pScreen;
   const mutation = useInvalidateParentMutation(api.update, invalidateParentQueryKey !== null && invalidateParentQueryKey !== void 0 ? invalidateParentQueryKey : api.queryKey, {
     networkMode: "always"
   });
@@ -1213,7 +1208,10 @@ function Internal({
       item: item,
       isLoading: mutation.isLoading,
       trackingRef: containerRef === null || containerRef === void 0 ? void 0 : containerRef.current
-    }), jsx("div", {
+    }), type == "form" && (sections === null || sections === void 0 ? void 0 : sections.map((section, index) => jsx(Section, {
+      section: section,
+      item: item
+    }, index))), (pScreen.type == "post" || pScreen.type == "section") && jsx("div", {
       p: "5",
       bgColor: "slate-100",
       rounded: "lg",
@@ -1229,7 +1227,7 @@ function Internal({
             flexCol: true,
             gap: "8",
             flexGrow: true,
-            children: [(editor === null || editor === void 0 ? void 0 : editor.type) != "textarea" &&
+            children: [((_a = pScreen.editor) === null || _a === void 0 ? void 0 : _a.type) != "textarea" &&
             // TODO Find a way to make this editor shrink in width when resizing the window...
             jsx(PageContentEditor, {
               name: "content",
@@ -1237,8 +1235,8 @@ function Internal({
               minW: "144",
               shadow: true,
               rounded: "lg"
-            }), (editor === null || editor === void 0 ? void 0 : editor.type) == "textarea" && jsx(TextArea, {
-              name: editor === null || editor === void 0 ? void 0 : editor.name,
+            }), ((_b = pScreen.editor) === null || _b === void 0 ? void 0 : _b.type) == "textarea" && jsx(TextArea, {
+              name: (_c = pScreen.editor) === null || _c === void 0 ? void 0 : _c.name,
               maxW: editorMaxW,
               minW: editorMaxW,
               w: editorMaxW,
@@ -1249,11 +1247,12 @@ function Internal({
               shadow: true,
               p: "5",
               textColor: "slate-800"
-            }), editoFooter]
+            }), pScreen.editorFooter]
           }), jsx(PageSidebar, {
             children: sections === null || sections === void 0 ? void 0 : sections.map((section, index) => jsx(Section, {
               section: section,
-              item: item
+              item: item,
+              cardStyle: true
             }, index))
           })]
         })]
@@ -1263,15 +1262,24 @@ function Internal({
 }
 function Section({
   section,
-  item
+  item,
+  cardStyle
 }) {
   if (section.type === "section") {
-    return jsx(PageSidebarSection, {
-      title: section.title,
+    const style = cardStyle ? {
+      bgColor: "white",
+      rounded: "lg",
+      p: "5",
+      textSize: "sm",
+      shadow: true
+    } : {};
+    return jsx(PageSidebarSection, Object.assign({
+      title: section.title
+    }, style, {
       children: jsx(FormRenderer, {
         form: runIfFn(section.form, item)
       })
-    });
+    }));
   }
   if (section.type === "custom") return runIfFn(section.component, item);
   return null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@compill/admin",
-    "version": "1.0.72",
+    "version": "1.0.73",
     "module": "./index.esm.js",
     "main": "./index.cjs.js"
 }

package/src/lib/json/types/DetailsView.d.ts

@@ -19,10 +19,13 @@ type Screen = {
     header?: React.ReactNode;
     sections?: DetailSection[];
     buttonBar?: DetailViewButton[];
+} & ({
+    type: "form";
+} | {
+    type?: "post" | "section";
     editor?: DetailEditor;
     editorFooter?: React.ReactNode;
-    type?: "post" | "section";
-};
+});
 type DetailEditor = {
     type?: "blockEditor";
     name: string;
@@ -32,7 +35,7 @@ type DetailEditor = {
 };
 export type DetailSection = {
     type: "section";
-    title: string;
+    title?: string;
     form: FormRendererConfig | ((item: any) => FormRendererConfig);
 } | {
     type: "custom";