@compill/admin 1.0.71 → 1.0.73

package/index.cjs.js

@@ -18,10 +18,10 @@ var react = require('@soperio/react');
 var editor = require('@compill/editor');
 var admin = require('@compill/admin');
 var reactDom = require('react-dom');
+var router = require('next/router');
 var table = require('@compill/table');
 var hooks = require('@compill/hooks');
 var env = require('@compill/env');
-var router = require('next/router');
 var reactQuery = require('@tanstack/react-query');
 var Image = require('next/image');
 
@@ -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
@@ -1135,18 +1130,27 @@ function Buttons$1({
   });
 }
 
+function useQueryField(queryField, useNextRouter) {
+  if (useNextRouter) {
+    const router$1 = router.useRouter();
+    return router$1.query[queryField];
+  }
+  const {
+    [queryField]: id
+  } = reactRouterDom.useParams();
+  return id;
+}
 function DetailsView(_a) {
   var {
       queryField,
       api,
+      useNextRouter,
       processInput,
       screen,
       tabbed
     } = _a,
-    props = __rest$1(_a, ["queryField", "api", "processInput", "screen", "tabbed"]);
-  const {
-    [queryField]: id
-  } = reactRouterDom.useParams();
+    props = __rest$1(_a, ["queryField", "api", "useNextRouter", "processInput", "screen", "tabbed"]);
+  const id = useQueryField(queryField, useNextRouter);
   const ref = React__default["default"].useRef(null);
   return jsxRuntime.jsx(PageQueryStateContainer, Object.assign({
     api: api,
@@ -1173,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"
   });
@@ -1214,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",
@@ -1230,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",
@@ -1238,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,
@@ -1250,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))
           })]
         })]
@@ -1264,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

@@ -14,10 +14,10 @@ import { createContext as createContext$1, runIfFn, isFunction } from '@soperio/
 import { Editor } from '@compill/editor';
 import { PageSectionTitle as PageSectionTitle$1, ButtonBarDialogButton as ButtonBarDialogButton$1, TableRowActionButton as TableRowActionButton$1, DialogButton as DialogButton$1 } from '@compill/admin';
 import { createPortal } from 'react-dom';
+import { useRouter } from 'next/router';
 import { TableContextProvider, useTableContext, Table } from '@compill/table';
 import { useOpenLink, useBoolean } from '@compill/hooks';
 import { Env } from '@compill/env';
-import { useRouter } from 'next/router';
 import { useQueryClient } from '@tanstack/react-query';
 import Image from 'next/image';
 
@@ -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
@@ -1125,18 +1120,27 @@ function Buttons$1({
   });
 }
 
+function useQueryField(queryField, useNextRouter) {
+  if (useNextRouter) {
+    const router = useRouter();
+    return router.query[queryField];
+  }
+  const {
+    [queryField]: id
+  } = useParams();
+  return id;
+}
 function DetailsView(_a) {
   var {
       queryField,
       api,
+      useNextRouter,
       processInput,
       screen,
       tabbed
     } = _a,
-    props = __rest$1(_a, ["queryField", "api", "processInput", "screen", "tabbed"]);
-  const {
-    [queryField]: id
-  } = useParams();
+    props = __rest$1(_a, ["queryField", "api", "useNextRouter", "processInput", "screen", "tabbed"]);
+  const id = useQueryField(queryField, useNextRouter);
   const ref = React.useRef(null);
   return jsx(PageQueryStateContainer, Object.assign({
     api: api,
@@ -1163,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"
   });
@@ -1204,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",
@@ -1220,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",
@@ -1228,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,
@@ -1240,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))
           })]
         })]
@@ -1254,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.71",
+    "version": "1.0.73",
     "module": "./index.esm.js",
     "main": "./index.cjs.js"
 }

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SoperioComponent } from "@soperio/react";
 import { DetailsViewConfig } from "./types/DetailsView";
-export declare function DetailsView({ queryField, api, processInput, screen, tabbed, ...props }: DetailsViewConfig & {
+export declare function DetailsView({ queryField, api, useNextRouter, processInput, screen, tabbed, ...props }: DetailsViewConfig & {
     tabbed?: boolean;
 } & SoperioComponent): JSX.Element;

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

@@ -7,6 +7,7 @@ export type DetailsViewConfig<T = any> = {
     type: "details";
     api: API<T>;
     queryField: string;
+    useNextRouter?: boolean;
     processInput?: (input: T) => any;
     screen: Screen | ((data: T) => Screen);
 };
@@ -18,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;
@@ -31,7 +35,7 @@ type DetailEditor = {
 };
 export type DetailSection = {
     type: "section";
-    title: string;
+    title?: string;
     form: FormRendererConfig | ((item: any) => FormRendererConfig);
 } | {
     type: "custom";