@akanjs/ui 0.0.151 → 0.0.152

package/cjs/Data/Item.js

@@ -1,9 +1,7 @@
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Item_exports = {};
 __export(Item_exports, {
@@ -33,11 +23,11 @@ __export(Item_exports, {
   default: () => Item
 });
 module.exports = __toCommonJS(Item_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_common = require("@akanjs/common");
 var import_next = require("@akanjs/next");
 var import_store = require("@akanjs/store");
-var import_react = __toESM(require("react"));
 var import_ai = require("react-icons/ai");
 var import_Dropdown = require("../Dropdown");
 var import_ObjectId = require("../ObjectId");
@@ -68,21 +58,21 @@ const convToAntdColumn = (column) => {
       key: column,
       dataIndex: column,
       title: (0, import_common.capitalize)(column),
-      render: (date) => /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(import_RecentTime.RecentTime, { date }))
+      render: (date) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RecentTime.RecentTime, { date }) })
     };
   else if (column.includes("status") || column.includes("Status"))
     return {
       key: column,
       dataIndex: column,
       title: (0, import_common.capitalize)(column),
-      render: (status) => /* @__PURE__ */ import_react.default.createElement(StatusTag, { status })
+      render: (status) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusTag, { status })
     };
   else if (column.includes("role") || column.includes("Role"))
     return {
       key: column,
       dataIndex: column,
       title: (0, import_common.capitalize)(column),
-      render: (role) => /* @__PURE__ */ import_react.default.createElement(RoleTags, { role })
+      render: (role) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RoleTags, { role })
     };
   else
     return { key: column, dataIndex: column, title: (0, import_common.capitalize)(column) };
@@ -98,7 +88,7 @@ function Item({
   children
 }) {
   const { l } = (0, import_next.usePage)();
-  const strActions = actions.filter((action) => typeof action === "string").map((action, idx) => /* @__PURE__ */ import_react.default.createElement(Action, { key: idx, action, outline: false, model, sliceName }));
+  const strActions = actions.filter((action) => typeof action === "string").map((action, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Action, { action, outline: false, model, sliceName }, idx));
   const customActions = actions.filter((action) => typeof action !== "string").map((action, idx) => ({
     key: idx,
     label: typeof action !== "string" ? action.render() : null
@@ -112,18 +102,43 @@ function Item({
     const render = convToAntdColumn(column).render ?? ((v, m, i) => JSON.stringify(v, null, 2));
     const modelKeyLength = model[key]?.length;
     if (convToAntdColumn(column).render) {
-      return /* @__PURE__ */ import_react.default.createElement("div", { key: idx, className: "flex-wrap overflow-hidden text-xs" }, !!modelKeyLength && /* @__PURE__ */ import_react.default.createElement("span", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "font-semibold whitespace-nowrap" }, title2), /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm" }, render(model[key], model, idx))));
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-wrap overflow-hidden text-xs", children: !!modelKeyLength && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold whitespace-nowrap", children: title2 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm", children: render(model[key], model, idx) })
+      ] }) }, idx);
     }
-    return /* @__PURE__ */ import_react.default.createElement("div", { key: idx, className: "flex-wrap overflow-hidden text-xs" }, !!modelKeyLength && /* @__PURE__ */ import_react.default.createElement("span", { className: "flex items-center gap-3" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "font-semibold whitespace-nowrap" }, title2), /* @__PURE__ */ import_react.default.createElement("span", { className: "text-sm" }, model[key])));
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-wrap overflow-hidden text-xs", children: !!modelKeyLength && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold whitespace-nowrap", children: title2 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm", children: model[key] })
+    ] }) }, idx);
   });
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("flex flex-col", className) }, children ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "relative size-full", onClick }, children, /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute inset-0" }))) : title ? /* @__PURE__ */ import_react.default.createElement("div", { className: "font-bold" }, title) : null, /* @__PURE__ */ import_react.default.createElement("div", { className: "bg-primary/5 mt-2 h-full rounded-lg p-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-2 flex justify-between" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "[&_.badge]:badge-xs [&_.badge]:p-2" }, columns.find((c) => c === "id") && /* @__PURE__ */ import_react.default.createElement(import_ObjectId.ObjectId, { id: model.id })), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-end justify-center gap-2" }, columns.find((c) => c === "createdAt") && /* @__PURE__ */ import_react.default.createElement(import_RecentTime.RecentTime, { date: model.createdAt, className: "text-xs opacity-60" }), columns.find((c) => c === "status") && /* @__PURE__ */ import_react.default.createElement(StatusTag, { status: model.status, className: "badge-xs mr-0 p-2" }))), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex flex-col gap-1" }, extraCols), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex w-full justify-around" }, strActions.map((action, idx) => /* @__PURE__ */ import_react.default.createElement("div", { className: "", key: idx }, action)), customActions.length ? /* @__PURE__ */ import_react.default.createElement(
-    import_Dropdown.Dropdown,
-    {
-      buttonClassName: "m-1 text-center btn btn-square btn-ghost btn-sm ",
-      value: /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineMore, null),
-      content: customActions.map((action) => /* @__PURE__ */ import_react.default.createElement("div", { key: action.key }, action.label))
-    }
-  ) : null)));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex flex-col", className), children: [
+    children ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative size-full", onClick, children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0" })
+    ] }) }) : title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-bold", children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "bg-primary/5 mt-2 h-full rounded-lg p-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "[&_.badge]:badge-xs [&_.badge]:p-2", children: columns.find((c) => c === "id") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ObjectId.ObjectId, { id: model.id }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-end justify-center gap-2", children: [
+          columns.find((c) => c === "createdAt") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_RecentTime.RecentTime, { date: model.createdAt, className: "text-xs opacity-60" }),
+          columns.find((c) => c === "status") && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusTag, { status: model.status, className: "badge-xs mr-0 p-2" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col gap-1", children: extraCols }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex w-full justify-around", children: [
+        strActions.map((action, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "", children: action }, idx)),
+        customActions.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Dropdown.Dropdown,
+          {
+            buttonClassName: "m-1 text-center btn btn-square btn-ghost btn-sm ",
+            value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineMore, {}),
+            content: customActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: action.label }, action.key))
+          }
+        ) : null
+      ] })
+    ] })
+  ] });
 }
 const Action = ({
   action,
@@ -147,28 +162,28 @@ const Action = ({
     viewModel: sliceName.replace(names.model, names.viewModel),
     removeModel: sliceName.replace(names.model, names.removeModel)
   };
-  return action === "edit" ? /* @__PURE__ */ import_react.default.createElement(
+  return action === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
       className: `btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}`,
-      onClick: () => void storeDo[namesOfSlice.editModel](model.id)
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineEdit, { key: action })
-  ) : action === "view" ? /* @__PURE__ */ import_react.default.createElement(
+      onClick: () => void storeDo[namesOfSlice.editModel](model.id),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineEdit, {}, action)
+    }
+  ) : action === "view" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
       className: `btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}`,
-      onClick: () => void storeDo[namesOfSlice.viewModel](model.id)
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineEye, { key: action })
-  ) : action === "remove" ? /* @__PURE__ */ import_react.default.createElement(
+      onClick: () => void storeDo[namesOfSlice.viewModel](model.id),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineEye, {}, action)
+    }
+  ) : action === "remove" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Popconfirm.Popconfirm,
     {
-      key: action,
       title: l("shared.removeMsg"),
-      onConfirm: () => void storeDo[namesOfSlice.removeModel](model.id)
+      onConfirm: () => void storeDo[namesOfSlice.removeModel](model.id),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className: `btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineDelete, {}) })
     },
-    /* @__PURE__ */ import_react.default.createElement("button", { className: `btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}` }, /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineDelete, null))
+    action
   ) : action.render();
 };
 const statusColors = {
@@ -188,7 +203,7 @@ const statusColors = {
   finished: "badge-secondary"
 };
 const StatusTag = ({ status, className }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)(`badge mr-1 p-3 ${statusColors[status] ?? "badge-outline"}`, className) }, status);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)(`badge mr-1 p-3 ${statusColors[status] ?? "badge-outline"}`, className), children: status });
 };
 Item.StatusTag = StatusTag;
 const roleColors = {
@@ -199,6 +214,6 @@ const roleColors = {
   root: "badge-primary"
 };
 const RoleTags = ({ role }) => {
-  return Array.isArray(role) ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, role.map((role2) => /* @__PURE__ */ import_react.default.createElement("div", { className: `badge mr-1 ${roleColors[role2]}`, key: role2 }, role2))) : /* @__PURE__ */ import_react.default.createElement("div", { className: "badge mr-1", style: { backgroundColor: roleColors[role] } }, role);
+  return Array.isArray(role) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: role.map((role2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `badge mr-1 ${roleColors[role2]}`, children: role2 }, role2)) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "badge mr-1", style: { backgroundColor: roleColors[role] }, children: role });
 };
 Item.RoleTags = RoleTags;

package/cjs/Data/ListContainer.js

@@ -31,13 +31,13 @@ __export(ListContainer_exports, {
   default: () => ListContainer
 });
 module.exports = __toCommonJS(ListContainer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_common = require("@akanjs/common");
 var import_constant = require("@akanjs/constant");
 var import_next = require("@akanjs/next");
 var import_store = require("@akanjs/store");
 var import_file_saver = require("file-saver");
-var import_react = __toESM(require("react"));
 var import_ai = require("react-icons/ai");
 var import_Dropdown = require("../Dropdown");
 var import_Loading = require("../Loading");
@@ -62,9 +62,16 @@ function ListContainer({
   renderDashboard,
   renderItem,
   renderTemplate,
-  renderTitle = (model) => model.id ? /* @__PURE__ */ import_react.default.createElement("h2", { className: "flex items-center justify-center py-3 text-lg sm:justify-start md:text-2xl" }, sliceName, " - ", model.id) : /* @__PURE__ */ import_react.default.createElement("h2", { className: "flex items-center justify-center py-3 text-lg sm:justify-start md:text-2xl" }, "New ", sliceName),
+  renderTitle = (model) => model.id ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", { className: "flex items-center justify-center py-3 text-lg sm:justify-start md:text-2xl", children: [
+    sliceName,
+    " - ",
+    model.id
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", { className: "flex items-center justify-center py-3 text-lg sm:justify-start md:text-2xl", children: [
+    "New ",
+    sliceName
+  ] }),
   renderView,
-  renderQueryMaker = () => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null),
+  renderQueryMaker = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}),
   renderInsight,
   renderLoading
 }) {
@@ -109,13 +116,13 @@ function ListContainer({
     const summaryLoading = storeUse.summaryLoading();
     const Stat = renderDashboard;
     if (!Stat)
-      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-4" }, !summary || summaryLoading ? /* @__PURE__ */ import_react.default.createElement(import_Loading.Loading.Skeleton, { active: true }) : /* @__PURE__ */ import_react.default.createElement(Stat, { summary, hidePresents: true }));
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-4", children: !summary || summaryLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Loading.Loading.Skeleton, { active: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, { summary, hidePresents: true }) });
   };
   const RenderQueryMaker = renderQueryMaker;
   const RenderInsight = () => {
     const modelInsight = storeUse[namesOfSlice.modelInsight]();
-    return renderInsight ? renderInsight({ insight: modelInsight }) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null);
+    return renderInsight ? renderInsight({ insight: modelInsight }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
   };
   const RenderTemplate = renderTemplate;
   const RenderTools = () => {
@@ -124,7 +131,7 @@ function ListContainer({
     const toolList = modelListLoading ? [] : [
       ...Array.isArray(tools) ? tools : tools([...modelList]),
       {
-        render: () => /* @__PURE__ */ import_react.default.createElement(
+        render: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
             className: "btn btn-sm btn-ghost flex flex-nowrap justify-start gap-2",
@@ -153,14 +160,16 @@ function ListContainer({
               const blob = new Blob([`${header}
 ${body}`], { type: "text/csv;charset=utf-8" });
               (0, import_file_saver.saveAs)(blob, `${sliceName}.csv`);
-            }
-          },
-          /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineFileExcel, null),
-          /* @__PURE__ */ import_react.default.createElement("span", null, "Export CSV")
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineFileExcel, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Export CSV" })
+            ]
+          }
         )
       },
       {
-        render: () => /* @__PURE__ */ import_react.default.createElement(
+        render: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
             className: "btn btn-sm btn-ghost flex flex-nowrap justify-start gap-2",
@@ -168,25 +177,27 @@ ${body}`], { type: "text/csv;charset=utf-8" });
               const json = JSON.stringify((0, import_common.deepObjectify)([...modelList], { serializable: true }));
               const blob = new Blob([json], { type: "application/json" });
               (0, import_file_saver.saveAs)(blob, `${sliceName}.json`);
-            }
-          },
-          /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineFileProtect, null),
-          /* @__PURE__ */ import_react.default.createElement("span", null, "Export JSON")
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineFileProtect, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Export JSON" })
+            ]
+          }
         )
       }
     ];
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Dropdown.Dropdown,
       {
         buttonClassName: `btn btn-primary btn-sm ${renderTemplate && create ? "rounded-l-none" : ""}`,
-        value: /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineEllipsis, null),
-        content: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, toolList.map((tool, idx) => /* @__PURE__ */ import_react.default.createElement(tool.render, { key: idx })))
+        value: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineEllipsis, {}),
+        content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: toolList.map((tool, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(tool.render, {}, idx)) })
       }
     );
   };
   const RenderSort = () => {
     const sortMap = (0, import_constant.getFilterSortMap)(cnst.Filter);
-    return /* @__PURE__ */ import_react.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_Select.Select,
       {
         value: sortOfModel,
@@ -198,54 +209,77 @@ ${body}`], { type: "text/csv;charset=utf-8" });
       }
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_client.clsx)("m-4", className) }, /* @__PURE__ */ import_react.default.createElement("div", { className: "mb-3 flex flex-wrap justify-between" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex pb-1" }, /* @__PURE__ */ import_react.default.createElement("p", { className: "prose text-lg" }, title ?? l.field(sliceName, "modelName")), /* @__PURE__ */ import_react.default.createElement("div", { className: "ml-3 flex items-center" }, renderTemplate && create ? /* @__PURE__ */ import_react.default.createElement(
-    "button",
-    {
-      onClick: () => void storeDo[namesOfSlice.newModel](),
-      className: `btn btn-sm btn-primary mr-[0.5px] rounded-r-none`
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlinePlus, null),
-    " ",
-    l("shared.new")
-  ) : null, /* @__PURE__ */ import_react.default.createElement(RenderTools, null))), /* @__PURE__ */ import_react.default.createElement("div", { className: "flex" }, /* @__PURE__ */ import_react.default.createElement(
-    "button",
-    {
-      className: "btn btn-primary btn-sm btn-square mx-1",
-      onClick: () => void storeDo[namesOfSlice.refreshModel]()
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_ai.AiOutlineRedo, { className: "mx-2" })
-  ), /* @__PURE__ */ import_react.default.createElement(RenderSort, null), /* @__PURE__ */ import_react.default.createElement(
-    import_Select.Select,
-    {
-      value: limitOfModel,
-      options: [10, 20, 50, 100].map((limit) => ({
-        label: `${limit} ${l("shared.perPage")}`,
-        value: limit
-      })),
-      onChange: (limit) => void storeDo[namesOfSlice.setLimitOfModel](limit)
-    }
-  ))), !query && /* @__PURE__ */ import_react.default.createElement(ModelDashboard, null), /* @__PURE__ */ import_react.default.createElement(import_QueryMaker.default, { className: "mb-4", sliceName, query }), /* @__PURE__ */ import_react.default.createElement(RenderQueryMaker, null), /* @__PURE__ */ import_react.default.createElement(RenderInsight, null), type === "card" ? /* @__PURE__ */ import_react.default.createElement(
-    import_CardList.default,
-    {
-      sliceName,
-      renderItem: renderItem ?? (({ [sliceName]: model }) => /* @__PURE__ */ import_react.default.createElement("div", { key: model.id }, model.id)),
-      renderLoading,
-      renderTemplate,
-      renderView,
-      renderTitle,
-      columns,
-      actions,
-      cardListClassName
-    }
-  ) : /* @__PURE__ */ import_react.default.createElement(
-    import_TableList.default,
-    {
-      columns,
-      sliceName,
-      actions,
-      renderTemplate,
-      renderTitle,
-      renderView
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(import_Model.Model.EditModal, { sliceName, renderTitle }, RenderTemplate ? /* @__PURE__ */ import_react.default.createElement(RenderTemplate, null) : null));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("m-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-3 flex flex-wrap justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex pb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "prose text-lg", children: title ?? l.field(sliceName, "modelName") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ml-3 flex items-center", children: [
+          renderTemplate && create ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              onClick: () => void storeDo[namesOfSlice.newModel](),
+              className: `btn btn-sm btn-primary mr-[0.5px] rounded-r-none`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlinePlus, {}),
+                " ",
+                l("shared.new")
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderTools, {})
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            className: "btn btn-primary btn-sm btn-square mx-1",
+            onClick: () => void storeDo[namesOfSlice.refreshModel](),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineRedo, { className: "mx-2" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderSort, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Select.Select,
+          {
+            value: limitOfModel,
+            options: [10, 20, 50, 100].map((limit) => ({
+              label: `${limit} ${l("shared.perPage")}`,
+              value: limit
+            })),
+            onChange: (limit) => void storeDo[namesOfSlice.setLimitOfModel](limit)
+          }
+        )
+      ] })
+    ] }),
+    !query && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModelDashboard, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_QueryMaker.default, { className: "mb-4", sliceName, query }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderQueryMaker, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderInsight, {}),
+    type === "card" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_CardList.default,
+      {
+        sliceName,
+        renderItem: renderItem ?? (({ [sliceName]: model }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: model.id }, model.id)),
+        renderLoading,
+        renderTemplate,
+        renderView,
+        renderTitle,
+        columns,
+        actions,
+        cardListClassName
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_TableList.default,
+      {
+        columns,
+        sliceName,
+        actions,
+        renderTemplate,
+        renderTitle,
+        renderView
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Model.Model.EditModal, { sliceName, renderTitle, children: RenderTemplate ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderTemplate, {}) : null })
+  ] });
 }

package/cjs/Data/Pagination.js

@@ -21,6 +21,7 @@ __export(Pagination_exports, {
   default: () => Pagination
 });
 module.exports = __toCommonJS(Pagination_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_client = require("@akanjs/client");
 var import_common = require("@akanjs/common");
 var import_store = require("@akanjs/store");
@@ -50,7 +51,7 @@ function Pagination({ className, sliceName }) {
   const limitOfModel = storeUse[namesOfSlice.limitOfModel]();
   const lastPageOfModel = storeUse[namesOfSlice.lastPageOfModel]();
   const pageOfModel = storeUse[namesOfSlice.pageOfModel]();
-  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("mt-4 flex flex-wrap justify-center", className) }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_client.clsx)("mt-4 flex flex-wrap justify-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Pagination.Pagination,
     {
       currentPage: pageOfModel,
@@ -60,5 +61,5 @@ function Pagination({ className, sliceName }) {
       },
       itemsPerPage: limitOfModel || modelInsight.count
     }
-  ));
+  ) });
 }