@compill/admin 1.0.43 → 1.0.45

package/index.cjs.js

@@ -172,10 +172,10 @@ function InvalidateButton(_a) {
   });
   return jsxRuntime.jsx(ui.Button, Object.assign({
     scheme: "dark",
-    variant: "glass",
-    corners: "pill",
-    w: "10",
-    h: "10",
+    variant: "borderless",
+    size: "sm",
+    corners: "square",
+    aspectRatio: "square",
     title: "Regenerate",
     disabled: mutation.isLoading,
     onClick: invalidate
@@ -836,11 +836,12 @@ function PageQueryStateContainerInner(_a) {
       children
     } = _a,
     props = __rest$1(_a, ["queryId", "api", "apiFn", "loadingStyles", "errorStyles", "children"]);
+  // @ts-ignore
   const {
     data,
     isLoading,
     isError
-  } = apiFn == "get" ? api.useApiQuery(api$1.queryKey, api$1.get, queryId) : api.useApiQuery(api$1.queryKey, api$1.getAll);
+  } = apiFn == "getAll" ? api.useApiQuery(api$1.queryKey, api$1.getAll, props.apiParams) : api.useApiQuery(api$1.queryKey, api$1.get, queryId);
   const invalidate = api.useInvalidateQuery(api$1.queryKey, queryId);
   if (isLoading) return jsxRuntime.jsx(components.QueryLoadingState, Object.assign({
     w: "full",
@@ -1362,12 +1363,7 @@ function TableContainer(_a) {
       children
     } = _a,
     props = __rest$1(_a, ["initialPageSize", "initialVisibleColumns", "columns", "children"]);
-  return jsxRuntime.jsx(ui.Tile, Object.assign({
-    scheme: "light",
-    shadow: true,
-    rounded: "md",
-    px: "0",
-    py: "4",
+  return jsxRuntime.jsx("div", Object.assign({
     w: "full",
     dflex: true,
     flexCol: true
@@ -1389,10 +1385,10 @@ function TableCreateButton(_a) {
     } = _a,
     props = __rest$1(_a, ["children"]);
   return jsxRuntime.jsx(DialogButton, Object.assign({
-    scheme: "default",
-    corners: "pill",
-    h: "10",
-    variant: "glass"
+    scheme: "dark",
+    size: "sm",
+    aspectRatio: "square",
+    variant: "borderless"
   }, props, {
     children: children !== null && children !== void 0 ? children : jsxRuntime.jsx(ui.Icon, {
       path: mdiPlusThick
@@ -1407,11 +1403,11 @@ function TableFilterButton(_a) {
     side: "bottom-end",
     modal: true,
     children: [jsxRuntime.jsx(ui.Button, Object.assign({
-      scheme: "default",
-      corners: "pill",
-      w: "10",
-      h: "10",
-      variant: "glass"
+      scheme: "dark",
+      size: "sm",
+      aspectRatio: "square",
+      variant: "borderless",
+      corners: "square"
     }, props, {
       children: jsxRuntime.jsx(ui.Icon, {
         path: mdiFilter
@@ -1446,26 +1442,18 @@ function TableFilterButton(_a) {
 function TableTopBar(_a) {
   var {
       title,
-      queryKey,
       children
     } = _a,
-    props = __rest$1(_a, ["title", "queryKey", "children"]);
-  const invalidate = api.useInvalidateQuery(queryKey);
-  useHotkeys('ctrl+r', () => invalidate(), {
-    preventDefault: true
-  }, [invalidate]);
+    props = __rest$1(_a, ["title", "children"]);
   return jsxRuntime.jsxs("div", Object.assign({
     dflex: true,
     flexRow: true,
-    pb: "4",
     alignItems: "center",
     gap: "3",
-    px: "8",
-    borderB: "0.5",
-    borderBColor: "--bg-2"
+    p: "3"
   }, props, {
     children: [title && jsxRuntime.jsx("h2", {
-      textSize: "x3",
+      textSize: "x2",
       fontWeight: "600",
       textColor: "#3f4254",
       textTransform: "capitalize",
@@ -1473,22 +1461,7 @@ function TableTopBar(_a) {
     }), jsxRuntime.jsx("div", {
       flexGrow: true,
       children: "\u00A0"
-    }), jsxRuntime.jsxs("div", {
-      spaceX: "2",
-      dflex: true,
-      alignItems: "center",
-      children: [jsxRuntime.jsx(ui.Button, {
-        scheme: "default",
-        corners: "pill",
-        w: "10",
-        h: "10",
-        variant: "glass",
-        onClick: invalidate,
-        children: jsxRuntime.jsx(ui.Icon, {
-          path: mdiRefresh
-        })
-      }), children]
-    })]
+    }), children]
   }));
 }
 
@@ -1951,15 +1924,14 @@ function TableRowPublishPostButton$1(_a) {
     mutation.mutateAsync(id).then(() => reactToastify.toast.success(isDraft ? "Published!" : "Unpublished!")).catch(error => reactToastify.toast.error(`Error: ${error}`));
   }, [mutation, id]);
   return jsxRuntime.jsx(ui.Button, Object.assign({
-    w: "10",
-    h: "10",
     variant: "borderless",
-    corners: "pill",
+    corners: "square",
     scheme: "default",
     onClick: publish
   }, props, {
     children: jsxRuntime.jsx(ui.Icon, {
-      path: isDraft ? mdiPublish : mdiPublishOff
+      path: isDraft ? mdiPublish : mdiPublishOff,
+      size: "sm"
     })
   }));
 }
@@ -1974,8 +1946,14 @@ function TableRowActionsView({
   const item = row.original;
   return jsxRuntime.jsx("div", {
     dflex: true,
-    spaceX: "1",
+    w: "full",
+    alignItems: "stretch",
     placeContent: "end",
+    h: "full",
+    divideX: "1px",
+    divideColor: "zinc-100",
+    rounded: "lg",
+    overflow: "hidden",
     children: rowActions === null || rowActions === void 0 ? void 0 : rowActions.map((action, index) => jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [action.type === "publish" && jsxRuntime.jsx(TableRowPublishPostButton$1, {
         id: item.id,
@@ -1988,7 +1966,8 @@ function TableRowActionsView({
         onClick: () => onAction(action, item),
         scheme: schemes$1[action.type],
         children: jsxRuntime.jsx(ui.Icon, {
-          path: icons[action.type]
+          path: icons[action.type],
+          size: "sm"
         })
       })]
     }, index))
@@ -2005,10 +1984,15 @@ function ActionButton$1(_a) {
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }, [onClick]);
   return jsxRuntime.jsx(ui.Button, Object.assign({
-    w: "10",
-    h: "10",
+    dflex: true,
+    alignContent: "center",
+    placeContent: "center",
+    py: "2.5",
+    px: "2",
+    h: "full",
+    size: "lg",
     variant: "borderless",
-    corners: "pill",
+    corners: "square",
     onClick: handleClick
   }, props));
 }
@@ -2504,7 +2488,7 @@ function TableView(_a) {
   const id = useId(queryField);
   const _screen = react.runIfFn(screen, id);
   return jsxRuntime.jsx(PageContainer, Object.assign({
-    p: "5"
+    bgColor: "white"
   }, props, {
     children: jsxRuntime.jsx(TableContainer, {
       columns: _screen.table.columns,
@@ -2543,15 +2527,16 @@ function TT({
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [breadcrumbs && jsxRuntime.jsx(PageTopBar, {
       breadcrumbs: breadcrumbs
-    }), jsxRuntime.jsxs(TableTopBar, {
+    }), jsxRuntime.jsx(TableTopBar, {
       title: title,
-      queryKey: tableApi.queryKey,
-      children: [jsxRuntime.jsx(ButtonBar, {
+      children: jsxRuntime.jsx(ButtonBar, {
         buttonBar: buttonBar,
         createView: createView,
         editView: editView,
-        api: tableApi
-      }), filters && jsxRuntime.jsx(TableFilterButton, {})]
+        api: tableApi,
+        queryKey: tableApi.queryKey,
+        children: filters && jsxRuntime.jsx(TableFilterButton, {})
+      })
     }), filters && jsxRuntime.jsx(TableFilters, {
       form: filters.form,
       initialValues: filters.initialValues,
@@ -2576,10 +2561,16 @@ function TT({
 }
 function ButtonBar({
   buttonBar,
+  queryKey,
   createView,
   editView,
-  api
+  api: api$1,
+  children
 }) {
+  const invalidate = api.useInvalidateQuery(queryKey);
+  useHotkeys('ctrl+r', () => invalidate(), {
+    preventDefault: true
+  }, [invalidate]);
   const createDialog = React__default["default"].useCallback(onClose => {
     const view = createView !== null && createView !== void 0 ? createView : editView;
     if (view.type == "customDialog") return view.render({
@@ -2588,17 +2579,33 @@ function ButtonBar({
     });else return jsxRuntime.jsx(DialogRenderer, {
       config: view,
       onClose: onClose,
-      invalidateQueryKey: api.queryKey
+      invalidateQueryKey: api$1.queryKey
     });
-  }, [editView, api]);
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: buttonBar && buttonBar.map((button, index) => jsxRuntime.jsxs("div", {
+  }, [editView, api$1]);
+  return jsxRuntime.jsxs("div", {
+    dflex: true,
+    border: "1px",
+    borderColor: "zinc-200",
+    divideX: "1px",
+    divideColor: "zinc-200",
+    rounded: "lg",
+    overflow: "hidden",
+    children: [jsxRuntime.jsx(ui.Button, {
+      scheme: "dark",
+      size: "sm",
+      aspectRatio: "square",
+      variant: "borderless",
+      onClick: invalidate,
+      children: jsxRuntime.jsx(ui.Icon, {
+        path: mdiRefresh
+      })
+    }), buttonBar && buttonBar.map((button, index) => jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [button.type === "create" && editView && jsxRuntime.jsx(TableCreateButton, {
         buildDialog: createDialog
       }), button.type === "invalidate" && jsxRuntime.jsx(InvalidateButton, {
         pathOrPermalink: button.pathOrPermalink
       }), button.type === "custom" && button.render()]
-    }, index))
+    }, index)), children]
   });
 }
 function TableWrapper({
@@ -2620,6 +2627,8 @@ function TableWrapper({
     };
   }, [subtitle]);
   return jsxRuntime.jsx(table.Table, Object.assign({}, tableProps, {
+    px: "3",
+    py: "3",
     title: _subtitle
   }));
 }

package/index.esm.js

@@ -163,10 +163,10 @@ function InvalidateButton(_a) {
   });
   return jsx(Button, Object.assign({
     scheme: "dark",
-    variant: "glass",
-    corners: "pill",
-    w: "10",
-    h: "10",
+    variant: "borderless",
+    size: "sm",
+    corners: "square",
+    aspectRatio: "square",
     title: "Regenerate",
     disabled: mutation.isLoading,
     onClick: invalidate
@@ -827,11 +827,12 @@ function PageQueryStateContainerInner(_a) {
       children
     } = _a,
     props = __rest$1(_a, ["queryId", "api", "apiFn", "loadingStyles", "errorStyles", "children"]);
+  // @ts-ignore
   const {
     data,
     isLoading,
     isError
-  } = apiFn == "get" ? useApiQuery(api.queryKey, api.get, queryId) : useApiQuery(api.queryKey, api.getAll);
+  } = apiFn == "getAll" ? useApiQuery(api.queryKey, api.getAll, props.apiParams) : useApiQuery(api.queryKey, api.get, queryId);
   const invalidate = useInvalidateQuery(api.queryKey, queryId);
   if (isLoading) return jsx(QueryLoadingState, Object.assign({
     w: "full",
@@ -1353,12 +1354,7 @@ function TableContainer(_a) {
       children
     } = _a,
     props = __rest$1(_a, ["initialPageSize", "initialVisibleColumns", "columns", "children"]);
-  return jsx(Tile, Object.assign({
-    scheme: "light",
-    shadow: true,
-    rounded: "md",
-    px: "0",
-    py: "4",
+  return jsx("div", Object.assign({
     w: "full",
     dflex: true,
     flexCol: true
@@ -1380,10 +1376,10 @@ function TableCreateButton(_a) {
     } = _a,
     props = __rest$1(_a, ["children"]);
   return jsx(DialogButton, Object.assign({
-    scheme: "default",
-    corners: "pill",
-    h: "10",
-    variant: "glass"
+    scheme: "dark",
+    size: "sm",
+    aspectRatio: "square",
+    variant: "borderless"
   }, props, {
     children: children !== null && children !== void 0 ? children : jsx(Icon, {
       path: mdiPlusThick
@@ -1398,11 +1394,11 @@ function TableFilterButton(_a) {
     side: "bottom-end",
     modal: true,
     children: [jsx(Button, Object.assign({
-      scheme: "default",
-      corners: "pill",
-      w: "10",
-      h: "10",
-      variant: "glass"
+      scheme: "dark",
+      size: "sm",
+      aspectRatio: "square",
+      variant: "borderless",
+      corners: "square"
     }, props, {
       children: jsx(Icon, {
         path: mdiFilter
@@ -1437,26 +1433,18 @@ function TableFilterButton(_a) {
 function TableTopBar(_a) {
   var {
       title,
-      queryKey,
       children
     } = _a,
-    props = __rest$1(_a, ["title", "queryKey", "children"]);
-  const invalidate = useInvalidateQuery(queryKey);
-  useHotkeys('ctrl+r', () => invalidate(), {
-    preventDefault: true
-  }, [invalidate]);
+    props = __rest$1(_a, ["title", "children"]);
   return jsxs("div", Object.assign({
     dflex: true,
     flexRow: true,
-    pb: "4",
     alignItems: "center",
     gap: "3",
-    px: "8",
-    borderB: "0.5",
-    borderBColor: "--bg-2"
+    p: "3"
   }, props, {
     children: [title && jsx("h2", {
-      textSize: "x3",
+      textSize: "x2",
       fontWeight: "600",
       textColor: "#3f4254",
       textTransform: "capitalize",
@@ -1464,22 +1452,7 @@ function TableTopBar(_a) {
     }), jsx("div", {
       flexGrow: true,
       children: "\u00A0"
-    }), jsxs("div", {
-      spaceX: "2",
-      dflex: true,
-      alignItems: "center",
-      children: [jsx(Button, {
-        scheme: "default",
-        corners: "pill",
-        w: "10",
-        h: "10",
-        variant: "glass",
-        onClick: invalidate,
-        children: jsx(Icon, {
-          path: mdiRefresh
-        })
-      }), children]
-    })]
+    }), children]
   }));
 }
 
@@ -1942,15 +1915,14 @@ function TableRowPublishPostButton$1(_a) {
     mutation.mutateAsync(id).then(() => toast.success(isDraft ? "Published!" : "Unpublished!")).catch(error => toast.error(`Error: ${error}`));
   }, [mutation, id]);
   return jsx(Button, Object.assign({
-    w: "10",
-    h: "10",
     variant: "borderless",
-    corners: "pill",
+    corners: "square",
     scheme: "default",
     onClick: publish
   }, props, {
     children: jsx(Icon, {
-      path: isDraft ? mdiPublish : mdiPublishOff
+      path: isDraft ? mdiPublish : mdiPublishOff,
+      size: "sm"
     })
   }));
 }
@@ -1965,8 +1937,14 @@ function TableRowActionsView({
   const item = row.original;
   return jsx("div", {
     dflex: true,
-    spaceX: "1",
+    w: "full",
+    alignItems: "stretch",
     placeContent: "end",
+    h: "full",
+    divideX: "1px",
+    divideColor: "zinc-100",
+    rounded: "lg",
+    overflow: "hidden",
     children: rowActions === null || rowActions === void 0 ? void 0 : rowActions.map((action, index) => jsxs(React.Fragment, {
       children: [action.type === "publish" && jsx(TableRowPublishPostButton$1, {
         id: item.id,
@@ -1979,7 +1957,8 @@ function TableRowActionsView({
         onClick: () => onAction(action, item),
         scheme: schemes$1[action.type],
         children: jsx(Icon, {
-          path: icons[action.type]
+          path: icons[action.type],
+          size: "sm"
         })
       })]
     }, index))
@@ -1996,10 +1975,15 @@ function ActionButton$1(_a) {
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }, [onClick]);
   return jsx(Button, Object.assign({
-    w: "10",
-    h: "10",
+    dflex: true,
+    alignContent: "center",
+    placeContent: "center",
+    py: "2.5",
+    px: "2",
+    h: "full",
+    size: "lg",
     variant: "borderless",
-    corners: "pill",
+    corners: "square",
     onClick: handleClick
   }, props));
 }
@@ -2495,7 +2479,7 @@ function TableView(_a) {
   const id = useId(queryField);
   const _screen = runIfFn(screen, id);
   return jsx(PageContainer, Object.assign({
-    p: "5"
+    bgColor: "white"
   }, props, {
     children: jsx(TableContainer, {
       columns: _screen.table.columns,
@@ -2534,15 +2518,16 @@ function TT({
   return jsxs(Fragment, {
     children: [breadcrumbs && jsx(PageTopBar, {
       breadcrumbs: breadcrumbs
-    }), jsxs(TableTopBar, {
+    }), jsx(TableTopBar, {
       title: title,
-      queryKey: tableApi.queryKey,
-      children: [jsx(ButtonBar, {
+      children: jsx(ButtonBar, {
         buttonBar: buttonBar,
         createView: createView,
         editView: editView,
-        api: tableApi
-      }), filters && jsx(TableFilterButton, {})]
+        api: tableApi,
+        queryKey: tableApi.queryKey,
+        children: filters && jsx(TableFilterButton, {})
+      })
     }), filters && jsx(TableFilters, {
       form: filters.form,
       initialValues: filters.initialValues,
@@ -2567,10 +2552,16 @@ function TT({
 }
 function ButtonBar({
   buttonBar,
+  queryKey,
   createView,
   editView,
-  api
+  api,
+  children
 }) {
+  const invalidate = useInvalidateQuery(queryKey);
+  useHotkeys('ctrl+r', () => invalidate(), {
+    preventDefault: true
+  }, [invalidate]);
   const createDialog = React.useCallback(onClose => {
     const view = createView !== null && createView !== void 0 ? createView : editView;
     if (view.type == "customDialog") return view.render({
@@ -2582,14 +2573,30 @@ function ButtonBar({
       invalidateQueryKey: api.queryKey
     });
   }, [editView, api]);
-  return jsx(Fragment, {
-    children: buttonBar && buttonBar.map((button, index) => jsxs("div", {
+  return jsxs("div", {
+    dflex: true,
+    border: "1px",
+    borderColor: "zinc-200",
+    divideX: "1px",
+    divideColor: "zinc-200",
+    rounded: "lg",
+    overflow: "hidden",
+    children: [jsx(Button, {
+      scheme: "dark",
+      size: "sm",
+      aspectRatio: "square",
+      variant: "borderless",
+      onClick: invalidate,
+      children: jsx(Icon, {
+        path: mdiRefresh
+      })
+    }), buttonBar && buttonBar.map((button, index) => jsxs(React.Fragment, {
       children: [button.type === "create" && editView && jsx(TableCreateButton, {
         buildDialog: createDialog
       }), button.type === "invalidate" && jsx(InvalidateButton, {
         pathOrPermalink: button.pathOrPermalink
       }), button.type === "custom" && button.render()]
-    }, index))
+    }, index)), children]
   });
 }
 function TableWrapper({
@@ -2611,6 +2618,8 @@ function TableWrapper({
     };
   }, [subtitle]);
   return jsx(Table, Object.assign({}, tableProps, {
+    px: "3",
+    py: "3",
     title: _subtitle
   }));
 }

package/package.json

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

package/src/lib/page/PageQueryStateContainer.d.ts

@@ -12,6 +12,7 @@ type PageQueryContainerProps<T extends CRUD_MODEL> = Omit<ContainerProps, "child
     children: (data: T) => React.ReactElement;
 } | {
     apiFn: "getAll";
+    apiParams?: any;
     children: (data: T[]) => React.ReactElement;
 }));
 export declare const PageQueryStateContainer: <T extends CRUD_MODEL>(p: PageQueryContainerProps<T> & {

package/src/lib/table/TableTopBar.d.ts

@@ -2,7 +2,6 @@
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 interface TableTopBarProps extends SoperioComponent, ParentComponent {
     title?: string;
-    queryKey: string[];
 }
-export declare function TableTopBar({ title, queryKey, children, ...props }: TableTopBarProps): JSX.Element;
+export declare function TableTopBar({ title, children, ...props }: TableTopBarProps): JSX.Element;
 export {};