@akanjs/ui 0.0.150 → 0.0.151

package/cjs/Model/New.js

@@ -0,0 +1,61 @@
+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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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 New_exports = {};
+__export(New_exports, {
+  default: () => New
+});
+module.exports = __toCommonJS(New_exports);
+var import_client = require("@akanjs/client");
+var import_next = require("@akanjs/next");
+var import_ai = require("react-icons/ai");
+var import_EditModal = __toESM(require("./EditModal"));
+var import_NewWrapper = __toESM(require("./NewWrapper"));
+function New({
+  className,
+  wrapperClassName,
+  type = "button",
+  children,
+  sliceName,
+  modal,
+  partial,
+  renderTitle
+}) {
+  const { l } = (0, import_next.usePage)();
+  return /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("inline", wrapperClassName) }, /* @__PURE__ */ React.createElement(
+    import_NewWrapper.default,
+    {
+      className: (0, import_client.clsx)("flex w-full items-center justify-center gap-2", className),
+      sliceName,
+      modal,
+      partial
+    },
+    /* @__PURE__ */ React.createElement(import_ai.AiOutlinePlus, null),
+    " ",
+    type === "button" ? l("shared.new") : null
+  ), /* @__PURE__ */ React.createElement(import_EditModal.default, { renderTitle, sliceName }, children));
+}

package/cjs/Model/NewWrapper.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NewWrapper_exports = {};
+__export(NewWrapper_exports, {
+  default: () => NewWrapper
+});
+module.exports = __toCommonJS(NewWrapper_exports);
+var import_common = require("@akanjs/common");
+var import_NewWrapper_Client = require("./NewWrapper_Client");
+function NewWrapper({ partial = {}, ...props }) {
+  const serializedPartial = (0, import_common.deepObjectify)(typeof partial === "function" ? partial() : partial, { serializable: true });
+  return /* @__PURE__ */ React.createElement(import_NewWrapper_Client.NewWrapper_Client, { ...props, partial: serializedPartial });
+}

package/cjs/Model/NewWrapper_Client.js

@@ -0,0 +1,66 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NewWrapper_Client_exports = {};
+__export(NewWrapper_Client_exports, {
+  NewWrapper_Client: () => NewWrapper_Client
+});
+module.exports = __toCommonJS(NewWrapper_Client_exports);
+var import_client = require("@akanjs/client");
+var import_common = require("@akanjs/common");
+var import_signal = require("@akanjs/signal");
+var import_store = require("@akanjs/store");
+const NewWrapper_Client = ({
+  children,
+  sliceName,
+  partial,
+  setDefault,
+  className,
+  modal,
+  resets
+}) => {
+  const refName = import_store.st.slice[sliceName].refName;
+  const modelName = refName;
+  const names = {
+    newModel: `new${(0, import_common.capitalize)(modelName)}`,
+    crystalizeModel: `crystalize${(0, import_common.capitalize)(modelName)}`,
+    modelModal: `${modelName}Modal`
+  };
+  const storeDo = import_store.st.do;
+  const storeUse = import_store.st.use;
+  const crystalizeModel = import_signal.fetch[names.crystalizeModel];
+  const modelModal = storeUse[names.modelModal]();
+  const disabled = modelModal === "edit";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: (0, import_client.clsx)({ "cursor-pointer": !disabled, "pointer-events-none": disabled }, className),
+      onClick: (e) => {
+        e.stopPropagation();
+        if (disabled)
+          return;
+        const crystal = crystalizeModel(partial);
+        void storeDo[names.newModel](crystal, { modal, setDefault, sliceName });
+        resets?.forEach((reset) => {
+          void storeDo[`reset${(0, import_common.capitalize)(reset)}`]();
+        });
+      }
+    },
+    children
+  );
+};

package/cjs/Model/Remove.js

@@ -0,0 +1,86 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Remove_exports = {};
+__export(Remove_exports, {
+  default: () => Remove
+});
+module.exports = __toCommonJS(Remove_exports);
+var import_client = require("@akanjs/client");
+var import_common = require("@akanjs/common");
+var import_dictionary = require("@akanjs/dictionary");
+var import_next = require("@akanjs/next");
+var import_store = require("@akanjs/store");
+var import_react = require("react");
+var import_ai = require("react-icons/ai");
+var import_Button = require("../Button");
+var import_Modal = require("../Modal");
+function Remove({ className, name, modelId, sliceName, modal, redirect }) {
+  const { l } = (0, import_next.usePage)();
+  const [modalOpen, setModalOpen] = (0, import_react.useState)(false);
+  const storeDo = import_store.st.do;
+  const refName = import_store.st.slice[sliceName].refName;
+  const modelName = refName;
+  const names = (0, import_react.useMemo)(
+    () => ({
+      removeModel: `remove${(0, import_common.capitalize)(modelName)}`
+    }),
+    []
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: "inline size-full" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: (0, import_client.clsx)("btn text-error btn-sm size-full flex-nowrap whitespace-nowrap", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        setModalOpen(true);
+      }
+    },
+    /* @__PURE__ */ React.createElement(import_ai.AiOutlineDelete, null),
+    " ",
+    l("shared.remove")
+  ), /* @__PURE__ */ React.createElement(
+    import_Modal.Modal,
+    {
+      open: modalOpen,
+      onCancel: () => {
+        setModalOpen(false);
+      },
+      title: /* @__PURE__ */ React.createElement("div", { className: "text-error text-lg font-bold" }, l("shared.removeModel", { model: l(`${modelName}.modelName`) })),
+      action: /* @__PURE__ */ React.createElement(
+        import_Button.Button,
+        {
+          className: "btn btn-warning w-full",
+          onClick: async (e, { onError }) => {
+            await storeDo[names.removeModel](modelId, { onError, modal });
+            import_dictionary.msg.success("shared.removeSuccess", { data: { model: l(`${modelName}.modelName`) } });
+            setModalOpen(false);
+            if (!redirect)
+              return;
+            if (redirect === "back")
+              import_client.router.back();
+            else
+              import_client.router.push(redirect);
+          }
+        },
+        l("shared.yesRemove", { model: l(`${modelName}.modelName`) })
+      )
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-center" }, l("shared.sureToRemove", { model: l(`${modelName}.modelName`), name: name ?? "" }))
+  ));
+}

package/cjs/Model/RemoveWrapper.js

@@ -0,0 +1,48 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var RemoveWrapper_exports = {};
+__export(RemoveWrapper_exports, {
+  default: () => RemoveWrapper
+});
+module.exports = __toCommonJS(RemoveWrapper_exports);
+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_Popconfirm = require("../Popconfirm");
+function RemoveWrapper({ children, sliceName, name, modelId, className, modal }) {
+  const { l } = (0, import_next.usePage)();
+  const refName = import_store.st.slice[sliceName].refName;
+  const modelName = refName;
+  const names = {
+    removeModel: `remove${(0, import_common.capitalize)(modelName)}`
+  };
+  const storeDo = import_store.st.do;
+  return /* @__PURE__ */ React.createElement(
+    import_Popconfirm.Popconfirm,
+    {
+      title: l("shared.removeModel", { model: l(`${modelName}.modelName`) }),
+      description: /* @__PURE__ */ React.createElement("div", null, l("shared.sureToRemove", { model: l(`${modelName}.modelName`), name })),
+      onConfirm: () => {
+        void storeDo[names.removeModel](modelId, { modal });
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { className: (0, import_client.clsx)("cursor-pointer", className) }, children)
+  );
+}

package/cjs/Model/SureToRemove.js

@@ -0,0 +1,109 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var SureToRemove_exports = {};
+__export(SureToRemove_exports, {
+  default: () => SureToRemove
+});
+module.exports = __toCommonJS(SureToRemove_exports);
+var import_client = require("@akanjs/client");
+var import_common = require("@akanjs/common");
+var import_dictionary = require("@akanjs/dictionary");
+var import_next = require("@akanjs/next");
+var import_store = require("@akanjs/store");
+var import_react = require("react");
+var import_ai = require("react-icons/ai");
+var import_Modal = require("../Modal");
+function SureToRemove({
+  className,
+  modelId,
+  name,
+  sliceName,
+  redirect,
+  typeNameToRemove
+}) {
+  const { l } = (0, import_next.usePage)();
+  const [repeatName, setRepeatName] = (0, import_react.useState)("");
+  const [modalOpen, setModalOpen] = (0, import_react.useState)(false);
+  const storeDo = import_store.st.do;
+  const refName = import_store.st.slice[sliceName].refName;
+  const modelName = refName;
+  const names = (0, import_react.useMemo)(
+    () => ({
+      removeModel: `remove${(0, import_common.capitalize)(modelName)}`
+    }),
+    []
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: "inline size-full" }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: (0, import_client.clsx)(
+        "text-error flex size-full cursor-pointer flex-nowrap items-center justify-center gap-2 whitespace-nowrap",
+        className
+      ),
+      onClick: (e) => {
+        e.stopPropagation();
+        setModalOpen(true);
+      }
+    },
+    /* @__PURE__ */ React.createElement(import_ai.AiOutlineDelete, null),
+    " ",
+    l("shared.remove")
+  ), /* @__PURE__ */ React.createElement(
+    import_Modal.Modal,
+    {
+      open: modalOpen,
+      onCancel: () => {
+        setModalOpen(false);
+      },
+      title: /* @__PURE__ */ React.createElement("div", { className: "text-error text-lg font-bold" }, l("shared.removeModel", { model: l(`${modelName}.modelName`) })),
+      bodyClassName: "border-error",
+      action: /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: "btn btn-error w-full",
+          disabled: typeNameToRemove && repeatName !== name,
+          onClick: async () => {
+            await storeDo[names.removeModel](modelId);
+            import_dictionary.msg.success("shared.removeSuccess", { data: { model: l(`${modelName}.modelName`) } });
+            setModalOpen(false);
+            if (!redirect)
+              return;
+            if (redirect === "back")
+              import_client.router.back();
+            else
+              import_client.router.push(redirect);
+          }
+        },
+        l("shared.removeModel", { model: l(`${modelName}.modelName`) })
+      )
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "py-4" }, l("shared.sureToRemove", { model: l(`${modelName}.modelName`), name }), /* @__PURE__ */ React.createElement("br", null), l("shared.irreversibleOps"), typeNameToRemove ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("br", null), l("shared.typeNameToRemove", { model: l(`${modelName}.modelName`), name })) : null),
+    typeNameToRemove ? /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        className: "input w-full text-center",
+        placeholder: `${l(`${modelName}.modelName`)} name`,
+        value: repeatName,
+        onChange: (e) => {
+          setRepeatName(e.target.value);
+        }
+      }
+    ) : null
+  ));
+}

package/cjs/Model/View.js

@@ -0,0 +1,44 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var View_exports = {};
+__export(View_exports, {
+  default: () => View
+});
+module.exports = __toCommonJS(View_exports);
+var import_react = require("react");
+var import_ai = require("react-icons/ai");
+function View({
+  className,
+  model,
+  modelLoading = true,
+  render,
+  loadingWrapper,
+  loading,
+  empty
+}) {
+  const RenderLoadingWrapper = (0, import_react.useMemo)(
+    () => loadingWrapper === null ? ({ children, className: className2 }) => children : loadingWrapper ?? (({ children, className: className2 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, children, modelLoading ? /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0 animate-pulse" }) : null)),
+    [modelLoading]
+  );
+  const RenderModel = (0, import_react.useMemo)(
+    () => modelLoading ? loading === null ? () => null : loading ?? (() => /* @__PURE__ */ React.createElement("div", { className: "flex size-full flex-col items-center justify-center gap-3 pt-6 pb-3" }, /* @__PURE__ */ React.createElement("span", { className: "loading loading-dots loading-lg" }), "Loading")) : model ? () => render(model) : empty === null ? () => null : empty ?? (() => /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col items-center justify-center gap-3 pt-6 pb-3" }, /* @__PURE__ */ React.createElement(import_ai.AiOutlineMeh, { className: "scale-150 text-4xl" }), " Empty")),
+    [model, modelLoading]
+  );
+  return /* @__PURE__ */ React.createElement(RenderLoadingWrapper, { className }, /* @__PURE__ */ React.createElement(RenderModel, null));
+}

package/cjs/Model/ViewEditModal.js

@@ -0,0 +1,118 @@
+"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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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 ViewEditModal_exports = {};
+__export(ViewEditModal_exports, {
+  default: () => ViewEditModal
+});
+module.exports = __toCommonJS(ViewEditModal_exports);
+var import_common = require("@akanjs/common");
+var import_next = require("@akanjs/next");
+var import_store = require("@akanjs/store");
+var import_ai = require("react-icons/ai");
+var import_bi = require("react-icons/bi");
+var import_Modal = require("../Modal");
+var import_Remove = __toESM(require("./Remove"));
+var import_View = __toESM(require("./View"));
+function ViewEditModal({
+  modalClassName,
+  viewClassName,
+  sliceName,
+  renderTitle,
+  renderView,
+  renderTemplate
+}) {
+  const { l } = (0, import_next.usePage)();
+  const storeUse = import_store.st.use;
+  const storeDo = import_store.st.do;
+  const storeSel = import_store.st.sel;
+  const refName = import_store.st.slice[sliceName].refName;
+  const [modelName, ModelName] = [refName, (0, import_common.capitalize)(refName)];
+  const names = {
+    model: modelName,
+    Model: ModelName,
+    viewModel: `view${ModelName}`,
+    modelLoading: `${modelName}Loading`,
+    modelModal: `${modelName}Modal`,
+    resetModel: `reset${ModelName}`,
+    editModel: `edit${ModelName}`,
+    submitModel: `submit${ModelName}`,
+    modelForm: `${modelName}Form`
+  };
+  const model = storeUse[names.model]();
+  const modelModal = storeUse[names.modelModal]();
+  const modelLoading = storeUse[names.modelLoading]();
+  const modelFormId = storeSel((state) => state[names.modelForm].id);
+  const isModalOpen = modelModal === "view" || modelModal === "edit" && !!modelFormId;
+  const Title = () => {
+    if (!model || modelLoading || !renderTitle)
+      return /* @__PURE__ */ React.createElement(React.Fragment, null);
+    const render = renderTitle(model);
+    if (typeof render === "string")
+      return /* @__PURE__ */ React.createElement("h2", { className: "flex items-center text-sm md:text-base lg:text-lg xl:text-2xl" }, render);
+    else
+      return render;
+  };
+  const Template = renderTemplate;
+  return /* @__PURE__ */ React.createElement(
+    import_Modal.Modal,
+    {
+      open: isModalOpen,
+      onCancel: () => {
+        storeDo[names.resetModel]();
+      },
+      className: modalClassName,
+      title: /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-between" }, /* @__PURE__ */ React.createElement(Title, null), /* @__PURE__ */ React.createElement("div", { className: "dropdown dropdown-end" }, /* @__PURE__ */ React.createElement("label", { tabIndex: 0, className: "btn btn-square m-1" }, /* @__PURE__ */ React.createElement(import_bi.BiDotsVertical, null)), /* @__PURE__ */ React.createElement("ul", { tabIndex: 0, className: "dropdown-content menu bg-base-100 rounded-box z-[1] p-2 shadow-sm" }, model ? /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(import_Remove.default, { sliceName, modelId: model.id, modal: null })) : null))),
+      action: modelModal === "view" ? /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: "btn btn-primary w-full",
+          onClick: () => {
+            if (model)
+              storeDo[names.editModel](model.id);
+          }
+        },
+        /* @__PURE__ */ React.createElement(import_ai.AiOutlineEdit, null),
+        " ",
+        l("shared.edit")
+      ) : /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: "btn btn-primary w-full",
+          onClick: () => {
+            storeDo[names.submitModel]({ sliceName, modal: "view" });
+          }
+        },
+        /* @__PURE__ */ React.createElement(import_ai.AiOutlineSave, null),
+        " ",
+        l("shared.save")
+      )
+    },
+    modelModal === "view" ? /* @__PURE__ */ React.createElement(import_View.default, { className: viewClassName, model, modelLoading, render: renderView }) : modelModal === "edit" ? /* @__PURE__ */ React.createElement(Template, null) : null
+  );
+}

package/cjs/Model/ViewModal.js

@@ -0,0 +1,92 @@
+"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)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  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 ViewModal_exports = {};
+__export(ViewModal_exports, {
+  default: () => ViewModal
+});
+module.exports = __toCommonJS(ViewModal_exports);
+var import_common = require("@akanjs/common");
+var import_store = require("@akanjs/store");
+var import_Modal = require("../Modal");
+var import_View = __toESM(require("./View"));
+function ViewModal({
+  id,
+  modal,
+  modalClassName,
+  viewClassName,
+  sliceName,
+  renderTitle,
+  renderAction,
+  renderView
+}) {
+  const storeUse = import_store.st.use;
+  const storeDo = import_store.st.do;
+  const refName = import_store.st.slice[sliceName].refName;
+  const [modelName, ModelName] = [refName, (0, import_common.capitalize)(refName)];
+  const names = {
+    model: modelName,
+    Model: ModelName,
+    viewModel: `view${ModelName}`,
+    modelLoading: `${modelName}Loading`,
+    modelModal: `${modelName}Modal`,
+    resetModel: `reset${ModelName}`
+  };
+  const model = storeUse[names.model]();
+  const modelModal = storeUse[names.modelModal]();
+  const modelLoading = storeUse[names.modelLoading]();
+  const isModalOpen = modelModal === (modal ?? "view") && (modelLoading === id || model?.id === id);
+  const Title = () => {
+    if (!model || modelLoading || !renderTitle)
+      return /* @__PURE__ */ React.createElement(React.Fragment, null);
+    const render = renderTitle(model);
+    if (typeof render === "string")
+      return /* @__PURE__ */ React.createElement("h2", { className: "flex items-center text-2xl" }, render);
+    else
+      return render;
+  };
+  const Action = () => {
+    if (!model || modelLoading || !renderAction)
+      return /* @__PURE__ */ React.createElement(React.Fragment, null);
+    const render = renderAction(model);
+    return render;
+  };
+  return /* @__PURE__ */ React.createElement(
+    import_Modal.Modal,
+    {
+      open: isModalOpen,
+      onCancel: () => {
+        storeDo[names.resetModel]();
+      },
+      className: modalClassName,
+      title: /* @__PURE__ */ React.createElement(Title, null),
+      action: /* @__PURE__ */ React.createElement(Action, null)
+    },
+    /* @__PURE__ */ React.createElement(import_View.default, { className: viewClassName, model, modelLoading, render: renderView })
+  );
+}