@akanjs/ui 0.0.149 → 0.0.151

package/esm/Model/EditModal.js

@@ -0,0 +1,226 @@
+"use client";
+import { clsx, router } from "@akanjs/client";
+import { capitalize, deepObjectify, lowerlize } from "@akanjs/common";
+import { getFullModelRef } from "@akanjs/constant";
+import { useDebounce, usePage } from "@akanjs/next";
+import { fetch, immerify } from "@akanjs/signal";
+import { st } from "@akanjs/store";
+import React, { use, useCallback, useEffect, useMemo } from "react";
+import { AiOutlinePlus, AiOutlineSave } from "react-icons/ai";
+import { Button } from "../Button";
+import { Modal } from "../Modal";
+const EditModel = ({
+  type = "modal",
+  sliceName,
+  className,
+  checkSubmit = true,
+  edit,
+  modal,
+  children,
+  loadingWrapper
+}) => {
+  const storeUse = st.use;
+  const storeDo = st.do;
+  const refName = st.slice[sliceName].refName;
+  const [modelName, ModelName] = useMemo(() => [lowerlize(refName), capitalize(refName)], []);
+  const names = 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 = useDebounce(() => {
+    storeDo[names.checkModelSubmitable]();
+  });
+  useEffect(() => {
+    if (checkSubmit)
+      checkSubmitable();
+  }, [modelModal, modelForm]);
+  const LoadingWrapper = useMemo(() => {
+    return loadingWrapper === false ? ({ children: children2, className: className2 }) => children2 : typeof loadingWrapper === "function" ? loadingWrapper : ({ children: children2, className: className2 }) => {
+      const modelFormLoading = storeUse[names.modelFormLoading]();
+      return /* @__PURE__ */ React.createElement("div", { className: clsx("", className2) }, children2, modelFormLoading ? /* @__PURE__ */ React.createElement("div", { className: "bg-base-100/50 absolute inset-0 animate-pulse" }) : null);
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(LoadingWrapper, { className: 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 } = usePage();
+  const refName = st.slice[sliceName].refName;
+  const storeUse = st.use;
+  const storeDo = st.do;
+  const storeSel = st.sel;
+  const modelEdit = edit?.then ? use(edit) : edit;
+  const [modelName, ModelName] = useMemo(() => [lowerlize(refName), capitalize(refName)], []);
+  const names = 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);
+  useEffect(() => {
+    if (!modelEdit)
+      return;
+    const refName2 = modelEdit.refName;
+    const editType = refName2 && modelEdit[names.modelObj] ? "edit" : "new";
+    const crystalizeModel = fetch[names.crystalizeModel];
+    const modelRef = getFullModelRef(modelName);
+    if (editType === "edit") {
+      const crystal = crystalizeModel(modelEdit[names.modelObj]);
+      st.set({
+        [names.model]: crystal,
+        [names.modelLoading]: false,
+        [names.modelForm]: 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 = useCallback(() => {
+    const modelForm = st.get()[names.modelForm];
+    const form = deepObjectify({ ...modelForm });
+    void storeDo[names.setModelModal](null);
+    if (typeof onCancel === "function")
+      onCancel(form);
+    else if (onCancel === "back")
+      router.back();
+    else if (onCancel === "reset")
+      void storeDo[names.resetModel]();
+    else if (typeof onCancel === "string")
+      router.replace(onCancel);
+  }, []);
+  const Title = () => {
+    const modelFormLoading2 = storeUse[names.modelFormLoading]();
+    const modelForm = storeUse[names.modelForm]();
+    return modelFormLoading2 ? /* @__PURE__ */ React.createElement(React.Fragment, null) : renderTitle ? typeof renderTitle === "string" ? `${l(`${modelName}.modelName`)}${renderTitle === "default" ? "" : ` - ${modelForm[renderTitle]}`}` : /* @__PURE__ */ React.createElement(React.Fragment, null, renderTitle(modelForm)) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+  };
+  const Submit = useMemo(
+    () => renderSubmit === false ? () => /* @__PURE__ */ React.createElement(React.Fragment, null) : typeof renderSubmit === "function" ? () => renderSubmit(storeUse[names.modelForm]()) : () => {
+      const modelSubmit = storeUse[names.modelSubmit]();
+      const handleSubmit = useCallback(async ({ onError } = {}) => {
+        await storeDo[names.submitModel]({
+          ...submitOption,
+          sliceName,
+          onError,
+          onSuccess: typeof onSubmit === "function" ? onSubmit : void 0
+        });
+        if (onSubmit === "back")
+          router.back();
+        else if (onSubmit === "reset")
+          void storeDo[names.resetModel]();
+        else if (typeof onSubmit === "string")
+          router.replace(onSubmit);
+      }, []);
+      return /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          className: "btn btn-primary w-full gap-2 rounded-2xl",
+          disabled: modelSubmit.disabled || !!disabled,
+          onClick: async (e, { onError }) => {
+            await handleSubmit({ onError });
+          },
+          onSuccess: () => {
+          }
+        },
+        modelFormId ? /* @__PURE__ */ React.createElement(AiOutlineSave, null) : /* @__PURE__ */ React.createElement(AiOutlinePlus, null),
+        l(modelFormId ? "shared.updateModel" : "shared.createModel", {
+          model: l.field(names.model, "modelName")
+        })
+      );
+    },
+    [disabled, modelFormId]
+  );
+  if (type === "modal")
+    return /* @__PURE__ */ React.createElement(
+      Modal,
+      {
+        open: isModalOpen,
+        onCancel: () => {
+          handleCancel();
+        },
+        className: modalClassName,
+        title: /* @__PURE__ */ React.createElement(Title, null),
+        action: /* @__PURE__ */ React.createElement(Submit, null)
+      },
+      isModalOpen ? /* @__PURE__ */ React.createElement(
+        EditModel,
+        {
+          type,
+          sliceName,
+          className,
+          checkSubmit,
+          edit,
+          modal,
+          loadingWrapper
+        },
+        children
+      ) : null
+    );
+  else if (isModalOpen)
+    return /* @__PURE__ */ React.createElement(
+      EditModel,
+      {
+        type,
+        sliceName,
+        className,
+        checkSubmit,
+        edit,
+        modal,
+        loadingWrapper
+      },
+      /* @__PURE__ */ React.createElement(Title, null),
+      children,
+      type === "form" ? /* @__PURE__ */ React.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React.createElement(Submit, null)) : null
+    );
+}
+export {
+  EditModal as default
+};

package/esm/Model/EditWrapper.js

@@ -0,0 +1,29 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { capitalize } from "@akanjs/common";
+import { st } from "@akanjs/store";
+function EditWrapper({ children, sliceName, modelId, className, modal, resets }) {
+  const refName = st.slice[sliceName].refName;
+  const modelName = refName;
+  const names = {
+    editModel: `edit${capitalize(modelName)}`
+  };
+  const storeDo = st.do;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx("cursor-pointer", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        void storeDo[names.editModel](modelId, { modal });
+        resets?.forEach((reset) => {
+          void storeDo[`reset${capitalize(reset)}`]();
+        });
+      }
+    },
+    children
+  );
+}
+export {
+  EditWrapper as default
+};

package/esm/Model/LoadInit.js

@@ -0,0 +1,8 @@
+"use client";
+import { Load } from "../Load";
+function LoadInit({ init }) {
+  return /* @__PURE__ */ React.createElement(Load.Units, { init, renderList: () => null, loading: null, renderEmpty: null });
+}
+export {
+  LoadInit as default
+};

package/esm/Model/New.js

@@ -0,0 +1,32 @@
+import { clsx } from "@akanjs/client";
+import { usePage } from "@akanjs/next";
+import { AiOutlinePlus } from "react-icons/ai";
+import EditModal from "./EditModal";
+import NewWrapper from "./NewWrapper";
+function New({
+  className,
+  wrapperClassName,
+  type = "button",
+  children,
+  sliceName,
+  modal,
+  partial,
+  renderTitle
+}) {
+  const { l } = usePage();
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("inline", wrapperClassName) }, /* @__PURE__ */ React.createElement(
+    NewWrapper,
+    {
+      className: clsx("flex w-full items-center justify-center gap-2", className),
+      sliceName,
+      modal,
+      partial
+    },
+    /* @__PURE__ */ React.createElement(AiOutlinePlus, null),
+    " ",
+    type === "button" ? l("shared.new") : null
+  ), /* @__PURE__ */ React.createElement(EditModal, { renderTitle, sliceName }, children));
+}
+export {
+  New as default
+};

package/esm/Model/NewWrapper.js

@@ -0,0 +1,9 @@
+import { deepObjectify } from "@akanjs/common";
+import { NewWrapper_Client } from "./NewWrapper_Client";
+function NewWrapper({ partial = {}, ...props }) {
+  const serializedPartial = deepObjectify(typeof partial === "function" ? partial() : partial, { serializable: true });
+  return /* @__PURE__ */ React.createElement(NewWrapper_Client, { ...props, partial: serializedPartial });
+}
+export {
+  NewWrapper as default
+};

package/esm/Model/NewWrapper_Client.js

@@ -0,0 +1,47 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { capitalize } from "@akanjs/common";
+import { fetch } from "@akanjs/signal";
+import { st } from "@akanjs/store";
+const NewWrapper_Client = ({
+  children,
+  sliceName,
+  partial,
+  setDefault,
+  className,
+  modal,
+  resets
+}) => {
+  const refName = st.slice[sliceName].refName;
+  const modelName = refName;
+  const names = {
+    newModel: `new${capitalize(modelName)}`,
+    crystalizeModel: `crystalize${capitalize(modelName)}`,
+    modelModal: `${modelName}Modal`
+  };
+  const storeDo = st.do;
+  const storeUse = st.use;
+  const crystalizeModel = fetch[names.crystalizeModel];
+  const modelModal = storeUse[names.modelModal]();
+  const disabled = modelModal === "edit";
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: 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${capitalize(reset)}`]();
+        });
+      }
+    },
+    children
+  );
+};
+export {
+  NewWrapper_Client
+};

package/esm/Model/Remove.js

@@ -0,0 +1,67 @@
+"use client";
+import { clsx, router } from "@akanjs/client";
+import { capitalize } from "@akanjs/common";
+import { msg } from "@akanjs/dictionary";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import { useMemo, useState } from "react";
+import { AiOutlineDelete } from "react-icons/ai";
+import { Button } from "../Button";
+import { Modal } from "../Modal";
+function Remove({ className, name, modelId, sliceName, modal, redirect }) {
+  const { l } = usePage();
+  const [modalOpen, setModalOpen] = useState(false);
+  const storeDo = st.do;
+  const refName = st.slice[sliceName].refName;
+  const modelName = refName;
+  const names = useMemo(
+    () => ({
+      removeModel: `remove${capitalize(modelName)}`
+    }),
+    []
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: "inline size-full" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: clsx("btn text-error btn-sm size-full flex-nowrap whitespace-nowrap", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        setModalOpen(true);
+      }
+    },
+    /* @__PURE__ */ React.createElement(AiOutlineDelete, null),
+    " ",
+    l("shared.remove")
+  ), /* @__PURE__ */ React.createElement(
+    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(
+        Button,
+        {
+          className: "btn btn-warning w-full",
+          onClick: async (e, { onError }) => {
+            await storeDo[names.removeModel](modelId, { onError, modal });
+            msg.success("shared.removeSuccess", { data: { model: l(`${modelName}.modelName`) } });
+            setModalOpen(false);
+            if (!redirect)
+              return;
+            if (redirect === "back")
+              router.back();
+            else
+              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 ?? "" }))
+  ));
+}
+export {
+  Remove as default
+};

package/esm/Model/RemoveWrapper.js

@@ -0,0 +1,29 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { capitalize } from "@akanjs/common";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import { Popconfirm } from "../Popconfirm";
+function RemoveWrapper({ children, sliceName, name, modelId, className, modal }) {
+  const { l } = usePage();
+  const refName = st.slice[sliceName].refName;
+  const modelName = refName;
+  const names = {
+    removeModel: `remove${capitalize(modelName)}`
+  };
+  const storeDo = st.do;
+  return /* @__PURE__ */ React.createElement(
+    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: clsx("cursor-pointer", className) }, children)
+  );
+}
+export {
+  RemoveWrapper as default
+};

package/esm/Model/SureToRemove.js

@@ -0,0 +1,90 @@
+"use client";
+import { clsx, router } from "@akanjs/client";
+import { capitalize } from "@akanjs/common";
+import { msg } from "@akanjs/dictionary";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import { useMemo, useState } from "react";
+import { AiOutlineDelete } from "react-icons/ai";
+import { Modal } from "../Modal";
+function SureToRemove({
+  className,
+  modelId,
+  name,
+  sliceName,
+  redirect,
+  typeNameToRemove
+}) {
+  const { l } = usePage();
+  const [repeatName, setRepeatName] = useState("");
+  const [modalOpen, setModalOpen] = useState(false);
+  const storeDo = st.do;
+  const refName = st.slice[sliceName].refName;
+  const modelName = refName;
+  const names = useMemo(
+    () => ({
+      removeModel: `remove${capitalize(modelName)}`
+    }),
+    []
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: "inline size-full" }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: 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(AiOutlineDelete, null),
+    " ",
+    l("shared.remove")
+  ), /* @__PURE__ */ React.createElement(
+    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);
+            msg.success("shared.removeSuccess", { data: { model: l(`${modelName}.modelName`) } });
+            setModalOpen(false);
+            if (!redirect)
+              return;
+            if (redirect === "back")
+              router.back();
+            else
+              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
+  ));
+}
+export {
+  SureToRemove as default
+};

package/esm/Model/View.js

@@ -0,0 +1,25 @@
+"use client";
+import { useMemo } from "react";
+import { AiOutlineMeh } from "react-icons/ai";
+function View({
+  className,
+  model,
+  modelLoading = true,
+  render,
+  loadingWrapper,
+  loading,
+  empty
+}) {
+  const RenderLoadingWrapper = 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 = 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(AiOutlineMeh, { className: "scale-150 text-4xl" }), " Empty")),
+    [model, modelLoading]
+  );
+  return /* @__PURE__ */ React.createElement(RenderLoadingWrapper, { className }, /* @__PURE__ */ React.createElement(RenderModel, null));
+}
+export {
+  View as default
+};

package/esm/Model/ViewEditModal.js

@@ -0,0 +1,89 @@
+"use client";
+import { capitalize } from "@akanjs/common";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import { AiOutlineEdit, AiOutlineSave } from "react-icons/ai";
+import { BiDotsVertical } from "react-icons/bi";
+import { Modal } from "../Modal";
+import Remove from "./Remove";
+import View from "./View";
+function ViewEditModal({
+  modalClassName,
+  viewClassName,
+  sliceName,
+  renderTitle,
+  renderView,
+  renderTemplate
+}) {
+  const { l } = usePage();
+  const storeUse = st.use;
+  const storeDo = st.do;
+  const storeSel = st.sel;
+  const refName = st.slice[sliceName].refName;
+  const [modelName, ModelName] = [refName, 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(
+    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(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(Remove, { 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(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(AiOutlineSave, null),
+        " ",
+        l("shared.save")
+      )
+    },
+    modelModal === "view" ? /* @__PURE__ */ React.createElement(View, { className: viewClassName, model, modelLoading, render: renderView }) : modelModal === "edit" ? /* @__PURE__ */ React.createElement(Template, null) : null
+  );
+}
+export {
+  ViewEditModal as default
+};