@akanjs/ui 0.0.150 → 0.0.152

package/cjs/Menu.js

@@ -0,0 +1,231 @@
+"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 Menu_exports = {};
+__export(Menu_exports, {
+  Menu: () => Menu
+});
+module.exports = __toCommonJS(Menu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_client = require("@akanjs/client");
+var import_store = require("@akanjs/store");
+var import_react = require("react");
+var import_ai = require("react-icons/ai");
+const Menu = ({
+  items,
+  onClick,
+  selectedKeys,
+  labelClassName,
+  defaultSelectedKeys,
+  className = "",
+  ulClassName = "",
+  liClassName,
+  style,
+  mode = "inline",
+  activeStyle = "bordered",
+  inlineCollapsed,
+  onMouseOver,
+  onMouseLeave
+}) => {
+  const [expandedKey, setExpandedKey] = (0, import_react.useState)();
+  const [currentKey, setCurrentKey] = (0, import_react.useState)(defaultSelectedKeys?.[0] ?? null);
+  const modeClassName = mode === "horizontal" ? "menu-horizontal flex-row " : "bg-base-200";
+  const menuRef = (0, import_react.useRef)(null);
+  const LiRefs = (0, import_react.useRef)([]);
+  const overflowLiRef = (0, import_react.useRef)(null);
+  const itemWidthsRef = (0, import_react.useRef)([]);
+  const innerWidth = import_store.st.use.innerWidth();
+  const subMenuClassName = mode === "horizontal" ? `fixed menu-title bottom-0 translate-y-[98%] border-0 rounded-xs shadow-lg bg-base-100 hover:bg-base-100 flex flex-col` : "flex flex-col gap-0 p-0 bg-primary/10 hover:bg-primary/10 overflow-hidden";
+  const subMenuItemClassName = mode === "inline" ? "w-full h-full bg-red-500 btn btn-ghost px-2 m-0 hover:bg-primary/20 btn btn-ghost text-primary-focus font-normal" : "w-full text-center duration-300 whitespace-nowrap btn btn-ghost text-primary-focus font-normal";
+  const activeClassName = activeStyle === "active" ? "bg-primary text-primary-focus" : activeStyle === "bordered" ? " border-b-2 border-white" : activeStyle;
+  const [overflowMenuItems, setOverflowMenuItems] = (0, import_react.useState)([]);
+  (0, import_react.useLayoutEffect)(() => {
+    if (mode !== "horizontal")
+      return;
+    const menu = menuRef.current;
+    if (!menu)
+      return;
+    const liList = LiRefs.current;
+    const widths = [];
+    liList.forEach((li) => {
+      widths.push(li.getBoundingClientRect().width);
+    });
+    itemWidthsRef.current = widths;
+    checkOverflow();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    checkOverflow();
+  }, [innerWidth]);
+  const checkOverflow = (0, import_react.useCallback)(() => {
+    if (mode !== "horizontal" || !itemWidthsRef.current.length)
+      return;
+    const menu = menuRef.current;
+    if (!menu)
+      return;
+    const totalWidth = menu.getBoundingClientRect().width;
+    const widths = itemWidthsRef.current;
+    const overflowItems = [];
+    let accumulatedWidth = 0;
+    for (let i = 0; i < widths.length; i++) {
+      accumulatedWidth += widths[i];
+      if (accumulatedWidth > totalWidth) {
+        if (overflowItems.length === 0 && i - 1 >= 0)
+          overflowItems.push(items[i - 1]);
+        overflowItems.push(items[i]);
+      }
+    }
+    setOverflowMenuItems(overflowItems);
+  }, [items, mode]);
+  const handleOnClick = (item) => {
+    setCurrentKey(item.key);
+    if (mode === "inline" && item.children)
+      setExpandedKey(item.key === expandedKey ? void 0 : item.key);
+    else
+      onClick?.(item);
+  };
+  const checkIsActive = (key) => {
+    if (selectedKeys)
+      return selectedKeys.includes(key);
+    return key === currentKey;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref: menuRef,
+      id: "menu",
+      className: (0, import_client.clsx)(mode === "horizontal" ? "w-full shrink overflow-hidden" : "w-fit", className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "ul",
+        {
+          className: (0, import_client.clsx)("menu size-full flex-nowrap overflow-y-auto p-0", modeClassName, ulClassName),
+          style: { ...style },
+          onMouseOver,
+          onMouseLeave,
+          children: [
+            items.filter((item) => !overflowMenuItems.some((overflowItem) => overflowItem.key === item.key)).map((item, idx) => {
+              const isOverflowItem = overflowMenuItems.some((overflowItem) => overflowItem.key === item.key);
+              const overflowClassName = isOverflowItem ? "opacity-50" : "";
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "li",
+                {
+                  ref: (el) => {
+                    if (el)
+                      LiRefs.current[idx] = el;
+                  },
+                  id: item.key,
+                  className: (0, import_client.clsx)("relative m-0 duration-200 hover:opacity-70", overflowClassName, liClassName, {
+                    "bg-base-300": activeStyle === "active" && checkIsActive(item.key),
+                    "border-base-100 border-b-2": activeStyle === "bordered" && checkIsActive(item.key)
+                  }),
+                  onClick: () => {
+                    if (!isOverflowItem)
+                      handleOnClick(item);
+                  },
+                  onMouseEnter: () => {
+                    if (mode === "horizontal" && !isOverflowItem && item.children && expandedKey !== item.key)
+                      setExpandedKey(item.key);
+                  },
+                  onMouseLeave: () => {
+                    if (mode === "horizontal" && !isOverflowItem)
+                      setExpandedKey(void 0);
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex h-full justify-between rounded-none", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("flex items-center gap-1", labelClassName?.(checkIsActive(item.key))), children: [
+                        item.icon,
+                        !inlineCollapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-base-content whitespace-nowrap", children: item.label })
+                      ] }),
+                      item.children && mode === "inline" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_ai.AiFillCaretDown,
+                        {
+                          className: (0, import_client.clsx)(
+                            "text-xs transition-transform duration-400",
+                            expandedKey === item.key ? "rotate-180" : ""
+                          )
+                        }
+                      )
+                    ] }),
+                    item.children && expandedKey === item.key && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: subMenuClassName, children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onClick?.(child);
+                          setExpandedKey(void 0);
+                        },
+                        className: subMenuItemClassName,
+                        children: child.label
+                      },
+                      child.key
+                    )) })
+                  ]
+                },
+                item.key
+              );
+            }),
+            overflowMenuItems.length > 0 && mode === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OverflowMenu, { overflowItems: overflowMenuItems, onClick })
+          ]
+        }
+      )
+    }
+  );
+};
+const OverflowMenu = ({ overflowItems, onClick }) => {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [expandedKey, setExpandedKey] = (0, import_react.useState)();
+  const handleMouseEnter = () => {
+    setIsOpen(true);
+  };
+  const handleMouseLeave = () => {
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "relative h-full", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-full items-center justify-center rounded-none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineEllipsis, {}) }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-base-100 hover:bg-base-100 fixed -bottom-0 flex translate-y-[98%] flex-col rounded-xs border-0 p-2 shadow-lg", children: overflowItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        onClick: () => onClick?.(item),
+        className: "btn btn-ghost text-primary-focus relative font-normal whitespace-nowrap",
+        onMouseEnter: () => {
+          if (item.children && expandedKey !== item.key)
+            setExpandedKey(item.key);
+        },
+        onMouseLeave: () => {
+          setExpandedKey(void 0);
+        },
+        children: [
+          item.label,
+          item.children && expandedKey === item.key && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-base-100 absolute top-0 left-0 -translate-x-full p-4 drop-shadow-sm", children: item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onClick?.(child);
+                setExpandedKey(void 0);
+              },
+              className: "btn btn-ghost text-primary-focus flex items-center justify-center text-center font-normal",
+              children: child.label
+            },
+            child.key
+          )) })
+        ]
+      },
+      item.key
+    )) })
+  ] });
+};

package/cjs/Modal.js

@@ -0,0 +1,88 @@
+"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 Modal_exports = {};
+__export(Modal_exports, {
+  Modal: () => Modal,
+  Window: () => Window
+});
+module.exports = __toCommonJS(Modal_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var RadixDialog = __toESM(require("@radix-ui/react-dialog"));
+var import_bi = require("react-icons/bi");
+var import_Dialog = require("./Dialog");
+const Modal = ({
+  className,
+  title,
+  action,
+  open,
+  onCancel,
+  bodyClassName,
+  children,
+  confirmClose = false
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.Dialog, { open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Dialog.Dialog.Modal, { className, onCancel, bodyClassName, confirmClose, children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.Dialog.Title, { children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.Dialog.Content, { children }),
+    action ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.Dialog.Action, { children: action }) : null
+  ] }) });
+};
+const Window = ({ open, onCancel, title, children }) => {
+  if (!open)
+    return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixDialog.Root, { open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(RadixDialog.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixDialog.Overlay, { className: "fixed inset-0 bg-black/40" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      RadixDialog.Content,
+      {
+        className: "animate-fadeIn fixed top-1/2 left-1/2 z-[2] w-[90%] min-w-auto -translate-x-1/2 -translate-y-1/2 rounded-[10px] border-[3px] border-black text-black backdrop-blur-lg md:w-fit",
+        style: {
+          background: `rgba(255, 255, 255, 0.3)`,
+          width: "406px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(RadixDialog.Title, { className: "height-[36px] relative overflow-hidden rounded-t-[6px] border-b-2 border-black bg-white/60 text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "m-0 text-[22px]", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              RadixDialog.Close,
+              {
+                onClick: () => {
+                  onCancel();
+                },
+                className: "absolute top-0 right-0 flex h-[34px] w-[40px] cursor-pointer items-center justify-center border-l-2 border-black",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_bi.BiX, { className: "text-[32px]" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixDialog.Description, { className: "overflow-y-hidden rounded-b-[10px] p-2", children })
+        ]
+      }
+    )
+  ] }) });
+};
+Modal.Window = Window;

package/cjs/Model/Edit.js

@@ -0,0 +1,67 @@
+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 Edit_exports = {};
+__export(Edit_exports, {
+  default: () => Edit
+});
+module.exports = __toCommonJS(Edit_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+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_EditWrapper = __toESM(require("./EditWrapper"));
+function Edit({
+  className,
+  wrapperClassName,
+  type = "button",
+  children,
+  sliceName,
+  modelId,
+  modal,
+  renderTitle
+}) {
+  const { l } = (0, import_next.usePage)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("inline", wrapperClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_EditWrapper.default,
+      {
+        className: (0, import_client.clsx)("flex w-full items-center justify-center gap-2", className),
+        sliceName,
+        modelId,
+        modal,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineEdit, {}),
+          " ",
+          type === "button" ? l("shared.edit") : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EditModal.default, { renderTitle, sliceName, id: modelId, children })
+  ] });
+}

package/cjs/Model/EditModal.js

@@ -0,0 +1,253 @@
+"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 EditModal_exports = {};
+__export(EditModal_exports, {
+  default: () => EditModal
+});
+module.exports = __toCommonJS(EditModal_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_signal = require("@akanjs/signal");
+var import_store2 = 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");
+const EditModel = ({
+  type = "modal",
+  sliceName,
+  className,
+  checkSubmit = true,
+  edit,
+  modal,
+  children,
+  loadingWrapper
+}) => {
+  const storeUse = import_store2.st.use;
+  const storeDo = import_store2.st.do;
+  const refName = import_store2.st.slice[sliceName].refName;
+  const [modelName, ModelName] = (0, import_react.useMemo)(() => [(0, import_common.lowerlize)(refName), (0, import_common.capitalize)(refName)], []);
+  const names = (0, import_react.useMemo)(
+    () => ({
+      model: modelName,
+      Model: ModelName,
+      modelForm: `${modelName}Form`,
+      modelFormLoading: `${modelName}FormLoading`,
+      modelModal: `${modelName}Modal`,
+      checkModelSubmitable: `check${ModelName}Submitable`
+    }),
+    []
+  );
+  const modelModal = storeUse[names.modelModal]();
+  const modelForm = storeUse[names.modelForm]();
+  const checkSubmitable = (0, import_next.useDebounce)(() => {
+    storeDo[names.checkModelSubmitable]();
+  });
+  (0, import_react.useEffect)(() => {
+    if (checkSubmit)
+      checkSubmitable();
+  }, [modelModal, modelForm]);
+  const LoadingWrapper = (0, import_react.useMemo)(() => {
+    return loadingWrapper === false ? ({ children: children2, className: className2 }) => children2 : typeof loadingWrapper === "function" ? loadingWrapper : ({ children: children2, className: className2 }) => {
+      const modelFormLoading = storeUse[names.modelFormLoading]();
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_client.clsx)("", className2), children: [
+        children2,
+        modelFormLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bg-base-100/50 absolute inset-0 animate-pulse" }) : null
+      ] });
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingWrapper, { className: (0, import_client.clsx)("w-full", className), children });
+};
+function EditModal({
+  type = "modal",
+  sliceName,
+  id,
+  className,
+  disabled,
+  checkSubmit = true,
+  modalClassName,
+  edit,
+  modal,
+  renderTitle,
+  children,
+  submitOption,
+  renderSubmit,
+  loadingWrapper,
+  onSubmit,
+  onCancel
+}) {
+  const { l } = (0, import_next.usePage)();
+  const refName = import_store2.st.slice[sliceName].refName;
+  const storeUse = import_store2.st.use;
+  const storeDo = import_store2.st.do;
+  const storeSel = import_store2.st.sel;
+  const modelEdit = edit?.then ? (0, import_react.use)(edit) : edit;
+  const [modelName, ModelName] = (0, import_react.useMemo)(() => [(0, import_common.lowerlize)(refName), (0, import_common.capitalize)(refName)], []);
+  const names = (0, import_react.useMemo)(
+    () => ({
+      model: modelName,
+      modelForm: `${modelName}Form`,
+      modelFormLoading: `${modelName}FormLoading`,
+      modelModal: `${modelName}Modal`,
+      modelSubmit: `${modelName}Submit`,
+      submitModel: `submit${ModelName}`,
+      resetModel: `reset${ModelName}`,
+      setModelModal: `set${ModelName}Modal`,
+      modelLoading: `${modelName}Loading`,
+      modelViewAt: `${modelName}ViewAt`,
+      newModel: `new${ModelName}`,
+      crystalizeModel: `crystalize${ModelName}`,
+      modelObj: `${modelName}Obj`
+    }),
+    []
+  );
+  const modelModal = storeUse[names.modelModal]();
+  const modelFormId = storeSel(
+    (state) => state[names.modelForm].id
+  );
+  const modelFormLoading = storeUse[names.modelFormLoading]();
+  const isModalOpen = modelModal === (modal ?? "edit") && (modelFormLoading === false || modelFormLoading === id) && (!modelFormId && !id || id === modelFormId);
+  (0, import_react.useEffect)(() => {
+    if (!modelEdit)
+      return;
+    const refName2 = modelEdit.refName;
+    const editType = refName2 && modelEdit[names.modelObj] ? "edit" : "new";
+    const crystalizeModel = import_signal.fetch[names.crystalizeModel];
+    const modelRef = (0, import_constant.getFullModelRef)(modelName);
+    if (editType === "edit") {
+      const crystal = crystalizeModel(modelEdit[names.modelObj]);
+      import_store2.st.set({
+        [names.model]: crystal,
+        [names.modelLoading]: false,
+        [names.modelForm]: (0, import_signal.immerify)(modelRef, crystal),
+        [names.modelFormLoading]: false,
+        [names.modelModal]: modal ?? "edit",
+        [names.modelViewAt]: modelEdit[names.modelViewAt]
+      });
+    } else {
+      const crystal = crystalizeModel(modelEdit);
+      void storeDo[names.newModel](crystal, { modal, setDefault: true, sliceName });
+    }
+    return () => {
+    };
+  }, [modelEdit]);
+  const handleCancel = (0, import_react.useCallback)(() => {
+    const modelForm = import_store2.st.get()[names.modelForm];
+    const form = (0, import_common.deepObjectify)({ ...modelForm });
+    void storeDo[names.setModelModal](null);
+    if (typeof onCancel === "function")
+      onCancel(form);
+    else if (onCancel === "back")
+      import_client.router.back();
+    else if (onCancel === "reset")
+      void storeDo[names.resetModel]();
+    else if (typeof onCancel === "string")
+      import_client.router.replace(onCancel);
+  }, []);
+  const Title = () => {
+    const modelFormLoading2 = storeUse[names.modelFormLoading]();
+    const modelForm = storeUse[names.modelForm]();
+    return modelFormLoading2 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : renderTitle ? typeof renderTitle === "string" ? `${l(`${modelName}.modelName`)}${renderTitle === "default" ? "" : ` - ${modelForm[renderTitle]}`}` : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: renderTitle(modelForm) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+  };
+  const Submit = (0, import_react.useMemo)(
+    () => renderSubmit === false ? () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : typeof renderSubmit === "function" ? () => renderSubmit(storeUse[names.modelForm]()) : () => {
+      const modelSubmit = storeUse[names.modelSubmit]();
+      const handleSubmit = (0, import_react.useCallback)(async ({ onError } = {}) => {
+        await storeDo[names.submitModel]({
+          ...submitOption,
+          sliceName,
+          onError,
+          onSuccess: typeof onSubmit === "function" ? onSubmit : void 0
+        });
+        if (onSubmit === "back")
+          import_client.router.back();
+        else if (onSubmit === "reset")
+          void storeDo[names.resetModel]();
+        else if (typeof onSubmit === "string")
+          import_client.router.replace(onSubmit);
+      }, []);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_Button.Button,
+        {
+          className: "btn btn-primary w-full gap-2 rounded-2xl",
+          disabled: modelSubmit.disabled || !!disabled,
+          onClick: async (e, { onError }) => {
+            await handleSubmit({ onError });
+          },
+          onSuccess: () => {
+          },
+          children: [
+            modelFormId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlineSave, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ai.AiOutlinePlus, {}),
+            l(modelFormId ? "shared.updateModel" : "shared.createModel", {
+              model: l.field(names.model, "modelName")
+            })
+          ]
+        }
+      );
+    },
+    [disabled, modelFormId]
+  );
+  if (type === "modal")
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Modal.Modal,
+      {
+        open: isModalOpen,
+        onCancel: () => {
+          handleCancel();
+        },
+        className: modalClassName,
+        title: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, {}),
+        action: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Submit, {}),
+        children: isModalOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          EditModel,
+          {
+            type,
+            sliceName,
+            className,
+            checkSubmit,
+            edit,
+            modal,
+            loadingWrapper,
+            children
+          }
+        ) : null
+      }
+    );
+  else if (isModalOpen)
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      EditModel,
+      {
+        type,
+        sliceName,
+        className,
+        checkSubmit,
+        edit,
+        modal,
+        loadingWrapper,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Title, {}),
+          children,
+          type === "form" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Submit, {}) }) : null
+        ]
+      }
+    );
+}