@akanjs/ui 0.0.149 → 0.0.151

package/esm/Layout/Header.js

@@ -0,0 +1,33 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { useEffect, useRef, useState } from "react";
+const Header = ({ className, type, children, height = 40 }) => {
+  const [visible, setVisible] = useState(true);
+  const position = useRef(0);
+  useEffect(() => {
+    if (type === "static")
+      return;
+    const handleScroll = () => {
+      const isVisible = window.scrollY < 64 ? true : position.current > window.scrollY;
+      position.current = window.scrollY;
+      setVisible(isVisible);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: { height } }), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        `fixed top-0 z-[9] flex duration-300 ${!visible && "md:-translate-y-full"} bg-base-100 w-full shadow-sm backdrop-blur-lg`,
+        className
+      )
+    },
+    children
+  ));
+};
+export {
+  Header
+};

package/esm/Layout/LeftSider.js

@@ -0,0 +1,30 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { BiX } from "react-icons/bi";
+const LeftSider = ({ className, children, open, width, onCancel }) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        "bg-base-100 border-base-200 absolute top-0 border-r transition-all duration-150",
+        { "translate-x-0": open, "translate-x-[-100%]": !open },
+        className
+      ),
+      style: { width }
+    },
+    children,
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "btn btn-ghost btn-square absolute top-0 right-0",
+        onClick: () => {
+          onCancel();
+        }
+      },
+      /* @__PURE__ */ React.createElement(BiX, null)
+    )
+  );
+};
+export {
+  LeftSider
+};

package/esm/Layout/Navbar.js

@@ -0,0 +1,22 @@
+"use client";
+import { baseClientEnv } from "@akanjs/base";
+import { clsx, usePathCtx } from "@akanjs/client";
+import React, { useEffect, useState } from "react";
+import { BiChevronLeft } from "react-icons/bi";
+import { Link } from "../Link";
+import { Portal } from "../Portal";
+const Navbar = ({ back = false, className, height, children, title, left, right }) => {
+  const [render, setRender] = useState(false);
+  //! 이거 왜 쓰는지 모르겠음 삭제해도 될듯
+  const { location } = usePathCtx();
+  const suffix = baseClientEnv.renderMode === "csr" ? `-${location.pathRoute.path}` : "";
+  useEffect(() => {
+    setRender(true);
+  }, []);
+  if (!render)
+    return null;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Portal, { id: `topInsetContent${suffix}` }, /* @__PURE__ */ React.createElement("div", { className: clsx("size-full", className) }, children)), back ? /* @__PURE__ */ React.createElement(Portal, { id: `topLeftActionContent${suffix}` }, typeof back === "boolean" ? /* @__PURE__ */ React.createElement(Link.Back, { className: "text-4xl" }, /* @__PURE__ */ React.createElement(BiChevronLeft, null)) : back) : null);
+};
+export {
+  Navbar
+};

package/esm/Layout/RightSider.js

@@ -0,0 +1,33 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { AiOutlineClose } from "react-icons/ai";
+const RightSider = ({ className, children, open, title, width, onCancel }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(
+        "bg-base-100 border-base-200 group absolute top-0 right-0 overflow-y-auto border-l pt-14 transition-all duration-150",
+        { "translate-x-0": open, "translate-x-[100%]": !open },
+        className
+      ),
+      style: { width }
+    },
+    children,
+    /* @__PURE__ */ React.createElement("div", { className: "absolute top-2 left-4 flex items-center gap-4 pt-2 text-xl" }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx("bg-base-100 border-base-200 cursor-pointer transition-all duration-150", {
+          "opacity-100": open,
+          "opacity-0": !open
+        }),
+        onClick: () => {
+          onCancel();
+        }
+      },
+      /* @__PURE__ */ React.createElement(AiOutlineClose, null)
+    ), title ? /* @__PURE__ */ React.createElement("div", { className: "whitespace-nowrap" }, title) : null)
+  ));
+};
+export {
+  RightSider
+};

package/esm/Layout/Sider.js

@@ -0,0 +1,20 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { AiOutlineMenu } from "react-icons/ai";
+import { BiX } from "react-icons/bi";
+const Sider = ({ className, bgClassName, children }) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "drawer-content" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "sider", className: "btn btn-ghost" }, /* @__PURE__ */ React.createElement(AiOutlineMenu, null))), /* @__PURE__ */ React.createElement("div", { className: "drawer drawer-start fixed" }, /* @__PURE__ */ React.createElement("input", { id: "sider", type: "checkbox", className: "drawer-toggle" }), /* @__PURE__ */ React.createElement("div", { className: "drawer-side" }, /* @__PURE__ */ React.createElement("label", { htmlFor: "sider", className: clsx("drawer-overlay", bgClassName) }), /* @__PURE__ */ React.createElement("div", { className: clsx("bg-base-200 text-base-content h-full w-3/4 p-4 md:w-80", className) }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "absolute top-4 left-4 text-lg",
+      onClick: (e) => {
+        e.preventDefault();
+        document.getElementById("sider")?.click();
+      }
+    },
+    /* @__PURE__ */ React.createElement(BiX, null)
+  ), children))));
+};
+export {
+  Sider
+};

package/esm/Layout/Template.js

@@ -0,0 +1,7 @@
+import { clsx } from "@akanjs/client";
+const Template = ({ className, children }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex w-full max-w-[100vw] flex-col gap-6 p-2 lg:max-w-screen-md", className) }, children);
+};
+export {
+  Template
+};

package/esm/Layout/TopLeftAction.js

@@ -0,0 +1,20 @@
+"use client";
+import { baseClientEnv } from "@akanjs/base";
+import { usePathCtx } from "@akanjs/client";
+import { useEffect, useState } from "react";
+import { Portal } from "../Portal";
+const TopLeftAction = ({ className, children }) => {
+  const [render, setRender] = useState(false);
+  //! 이거 왜 쓰는지 모르겠음 삭제해도 될듯
+  const { location } = usePathCtx();
+  const suffix = baseClientEnv.renderMode === "csr" ? `-${location.pathRoute.path}` : "";
+  useEffect(() => {
+    setRender(true);
+  }, []);
+  if (!render)
+    return null;
+  return /* @__PURE__ */ React.createElement(Portal, { id: `topLeftActionContent${suffix}` }, /* @__PURE__ */ React.createElement("div", { className }, children));
+};
+export {
+  TopLeftAction
+};

package/esm/Layout/Unit.js

@@ -0,0 +1,8 @@
+import { clsx } from "@akanjs/client";
+import { Link } from "../Link";
+const Unit = ({ className, children, href }) => {
+  return /* @__PURE__ */ React.createElement(Link, { href }, /* @__PURE__ */ React.createElement("div", { className: clsx("flex w-full flex-col gap-2 p-4", { "cursor-pointer": !!href }, className) }, children));
+};
+export {
+  Unit
+};

package/esm/Layout/View.js

@@ -0,0 +1,7 @@
+import { clsx } from "@akanjs/client";
+const View = ({ className, children }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex size-full max-w-screen-lg flex-col gap-6 px-2", className) }, children);
+};
+export {
+  View
+};

package/esm/Layout/Zone.js

@@ -0,0 +1,7 @@
+import { clsx } from "@akanjs/client";
+const Zone = ({ className, children }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex size-full max-w-screen-lg flex-col gap-6 px-2", className) }, children);
+};
+export {
+  Zone
+};

package/esm/Layout/index.js

@@ -0,0 +1,29 @@
+import { BottomInset } from "./BottomInset";
+import { BottomTab } from "./BottomTab";
+import { Header } from "./Header";
+import { LeftSider } from "./LeftSider";
+import { Navbar } from "./Navbar";
+import { RightSider } from "./RightSider";
+import { Sider } from "./Sider";
+import { Template } from "./Template";
+import { TopLeftAction } from "./TopLeftAction";
+import { Unit } from "./Unit";
+import { View } from "./View";
+import { Zone } from "./Zone";
+const Layout = {
+  Header,
+  Sider,
+  Navbar,
+  BottomTab,
+  BottomInset,
+  Template,
+  Unit,
+  View,
+  Zone,
+  TopLeftAction,
+  LeftSider,
+  RightSider
+};
+export {
+  Layout
+};

package/esm/Link/Back.js

@@ -0,0 +1,8 @@
+"use client";
+import { clsx, router } from "@akanjs/client";
+function Back({ className, children }) {
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("cursor-pointer", className), onClick: () => router.back() }, children);
+}
+export {
+  Back as default
+};

package/esm/Link/Close.js

@@ -0,0 +1,17 @@
+"use client";
+import { clsx } from "@akanjs/client";
+function Close({ className, children }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx("cursor-pointer", className),
+      onClick: () => {
+        window.close();
+      }
+    },
+    children
+  );
+}
+export {
+  Close as default
+};

package/esm/Link/CsrLink.js

@@ -0,0 +1,30 @@
+"use client";
+import { clsx, getPathInfo, router } from "@akanjs/client";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import { Browser } from "@capacitor/browser";
+function CsrLink({ className, children, href, replace, activeClassName, ...props }) {
+  const prefix = st.use.prefix();
+  const currentPath = st.use.path();
+  const { lang } = usePage();
+  const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
+  const { path } = getPathInfo(href, lang, prefix ?? "");
+  return /* @__PURE__ */ React.createElement(
+    "a",
+    {
+      className: clsx("cursor-pointer", className, { [activeClassName ?? ""]: currentPath === path }),
+      onClick: () => {
+        if (isExternal)
+          void Browser.open({ url: href, presentationStyle: "popover" });
+        else if (replace)
+          router.replace(href);
+        else
+          router.push(href);
+      }
+    },
+    children
+  );
+}
+export {
+  CsrLink as default
+};

package/esm/Link/NextLink.js

@@ -0,0 +1,42 @@
+"use client";
+import { clsx, getPathInfo } from "@akanjs/client";
+import { Logger } from "@akanjs/common";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import NextjsLink from "next/link";
+function NextLink({
+  className,
+  children,
+  disabled,
+  href,
+  scrollToTop,
+  replace,
+  activeClassName,
+  ...props
+}) {
+  const prefix = st.use.prefix();
+  const { lang } = usePage();
+  const isExternal = href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:");
+  const { path, pathname } = getPathInfo(href, lang, prefix ?? "");
+  const currentPath = st.use.path();
+  return /* @__PURE__ */ React.createElement(
+    NextjsLink,
+    {
+      className: clsx(className, { [activeClassName ?? ""]: currentPath === path }),
+      href: isExternal ? href : pathname,
+      passHref: true,
+      replace,
+      onClick: () => {
+        Logger.log(`pathChange-start:${path}`);
+        window.parent.postMessage({ type: "pathChange", path, pathname }, "*");
+        if (scrollToTop)
+          window.scrollTo(0, 0);
+      },
+      ...props
+    },
+    children
+  );
+}
+export {
+  NextLink as default
+};

package/esm/Link/index.js

@@ -0,0 +1,18 @@
+import { baseClientEnv } from "@akanjs/base";
+import { lazy } from "@akanjs/next";
+import Back from "./Back";
+import Close from "./Close";
+const CsrLink = lazy(() => import("./CsrLink"));
+const NextLink = lazy(() => import("./NextLink"));
+const Link = ({ className, href, disabled = false, children, ...props }) => {
+  if (disabled || !href)
+    return /* @__PURE__ */ React.createElement("div", { className, ...props }, children);
+  if (baseClientEnv.renderMode === "csr")
+    return /* @__PURE__ */ React.createElement(CsrLink, { className, href, ...props }, children);
+  return /* @__PURE__ */ React.createElement(NextLink, { className, href, ...props }, children);
+};
+Link.Back = Back;
+Link.Close = Close;
+export {
+  Link
+};

package/esm/Load/Edit.js

@@ -0,0 +1,13 @@
+import { deepObjectify } from "@akanjs/common";
+import Edit_Client from "./Edit_Client";
+function Edit({ edit, ...props }) {
+  const getObjEdit = (edit2) => {
+    const editType = edit2.refName && edit2[`${edit2.refName}Obj`] ? "edit" : "new";
+    return editType === "edit" ? edit2 : deepObjectify(edit2, { serializable: true });
+  };
+  const objEdit = edit instanceof Promise ? edit.then(getObjEdit) : getObjEdit(edit);
+  return /* @__PURE__ */ React.createElement(Edit_Client, { edit: objEdit, ...props });
+}
+export {
+  Edit as default
+};

package/esm/Load/Edit_Client.js

@@ -0,0 +1,74 @@
+"use client";
+import { deepObjectify } from "@akanjs/common";
+import { useFetch } from "@akanjs/next";
+import { Empty } from "../Empty";
+import { Model } from "../Model";
+function Render({
+  className,
+  checkSubmit,
+  modalClassName,
+  type,
+  edit,
+  modal,
+  sliceName,
+  children,
+  onSubmit,
+  onCancel,
+  submitOption,
+  renderSubmit
+}) {
+  const editType = edit.refName && edit[`${edit.refName}Obj`] ? "edit" : "new";
+  const modelId = editType === "edit" ? edit[`${edit.refName}Obj`].id : void 0;
+  return /* @__PURE__ */ React.createElement(
+    Model.EditModal,
+    {
+      type,
+      id: modelId,
+      checkSubmit,
+      className,
+      modalClassName,
+      sliceName,
+      edit: editType === "edit" ? edit : deepObjectify(edit, { serializable: true }),
+      modal,
+      onSubmit,
+      onCancel,
+      submitOption,
+      renderSubmit
+    },
+    children
+  );
+}
+function Edit_Client({
+  className,
+  checkSubmit,
+  modalClassName,
+  type,
+  edit,
+  modal,
+  sliceName,
+  children,
+  onSubmit,
+  onCancel,
+  submitOption,
+  renderSubmit
+}) {
+  const props = {
+    className,
+    checkSubmit,
+    modalClassName,
+    type,
+    edit,
+    modal,
+    sliceName,
+    children,
+    onSubmit,
+    onCancel,
+    submitOption,
+    renderSubmit
+  };
+  const { fulfilled, value: promiseEdit } = useFetch(edit);
+  return fulfilled ? promiseEdit ? /* @__PURE__ */ React.createElement(Render, { ...props, edit: promiseEdit }) : /* @__PURE__ */ React.createElement(Empty, null) : /* @__PURE__ */ React.createElement(Empty, null);
+}
+export {
+  Edit_Client as default
+};

package/esm/Load/Page.js

@@ -0,0 +1,16 @@
+import { baseClientEnv } from "@akanjs/base";
+import { PageCSR } from "./PageCSR";
+const Page = baseClientEnv.renderMode === "csr" ? PageCSR : ({ loader, render }) => {
+  const promise = new Promise((resolve, reject) => {
+    loader().then((data) => {
+      resolve(render(data));
+    }).catch((error) => {
+      reject(error);
+    });
+  });
+  return promise;
+};
+var Page_default = Page;
+export {
+  Page_default as default
+};

package/esm/Load/PageCSR.js

@@ -0,0 +1,48 @@
+"use client";
+import { useEffect, useMemo, useState } from "react";
+const setFetchedData = (target, data) => {
+  Reflect.defineMetadata("fetchedData", data, target);
+};
+const getFetchedData = (target) => {
+  const data = Reflect.getMetadata("fetchedData", target);
+  return data ?? null;
+};
+const PageCSR = ({
+  of,
+  loader,
+  render,
+  loading,
+  noCache = false,
+  header,
+  pageContent = true
+}) => {
+  const fetchData = useMemo(() => {
+    const cachedData = getFetchedData(of);
+    if (!noCache && cachedData)
+      return cachedData;
+    else
+      return loader();
+  }, []);
+  const [fetchState, setFetchState] = useState(
+    fetchData instanceof Promise ? { fulfilled: false, value: null } : { fulfilled: true, value: fetchData }
+  );
+  useEffect(() => {
+    if (fetchState.fulfilled || !(fetchData instanceof Promise))
+      return;
+    void (async () => {
+      try {
+        const ret = await fetchData;
+        setFetchState({ fulfilled: true, value: ret });
+        setFetchedData(of, ret);
+      } catch (err) {
+      }
+    })();
+  }, []);
+  if (!fetchState.fulfilled || !fetchState.value)
+    return loading ? loading() : null;
+  else
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, render(fetchState.value));
+};
+export {
+  PageCSR
+};

package/esm/Load/Pagination.js

@@ -0,0 +1,70 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { capitalize, lowerlize } from "@akanjs/common";
+import { useFetch } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import { use, useRef } from "react";
+import { Empty } from "../Empty";
+import { Pagination as Pagn } from "../Pagination";
+function Render({ className, init, scrollToTop }) {
+  const storeUse = st.use;
+  const storeDo = st.do;
+  const storeGet = st.get;
+  const modelInit = init.then ? use(init) : init;
+  const { refName, sliceName } = modelInit;
+  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
+  const initModelInitAt = modelInit[`${modelName}InitAt`];
+  const loaded = useRef(storeGet()[`${modelInit.refName}InitAt`].getTime() >= initModelInitAt.getTime());
+  const names = {
+    model: modelName,
+    modelInsight: `${modelName}Insight`,
+    modelInitAt: `${modelName}InitAt`,
+    modelObjInsight: `${modelName}ObjInsight`,
+    pageOfModel: `pageOf${ModelName}`,
+    lastPageOfModel: `lastPageOf${ModelName}`,
+    limitOfModel: `limitOf${ModelName}`,
+    setPageOfModel: `setPageOf${ModelName}`,
+    addPageOfModel: `addPageOf${ModelName}`
+  };
+  const namesOfSlice = {
+    modelInsight: sliceName.replace(names.model, names.modelInsight),
+    limitOfModel: sliceName.replace(names.model, names.limitOfModel),
+    lastPageOfModel: sliceName.replace(names.model, names.lastPageOfModel),
+    pageOfModel: sliceName.replace(names.model, names.pageOfModel),
+    setPageOfModel: sliceName.replace(names.model, names.setPageOfModel),
+    addPageOfModel: sliceName.replace(names.model, names.addPageOfModel)
+  };
+  const modelInsight = storeUse[namesOfSlice.modelInsight]();
+  const limitOfModel = storeUse[namesOfSlice.limitOfModel]();
+  const pageOfModel = storeUse[namesOfSlice.pageOfModel]();
+  const initModelObjInsight = modelInit[names.modelObjInsight];
+  const initPageOfModel = modelInit[names.pageOfModel];
+  const initLimitOfModel = modelInit[names.limitOfModel];
+  const insight = loaded.current ? modelInsight : initModelObjInsight;
+  const page = loaded.current ? pageOfModel : initPageOfModel;
+  const limit = loaded.current ? limitOfModel : initLimitOfModel;
+  if (!loaded.current)
+    loaded.current = true;
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("mt-4 flex flex-wrap justify-center", className) }, insight.count > limit && /* @__PURE__ */ React.createElement(
+    Pagn,
+    {
+      currentPage: page,
+      total: insight.count,
+      itemsPerPage: limit || insight.count,
+      onPageSelect: (page2) => {
+        void storeDo[namesOfSlice.setPageOfModel](page2);
+        if (scrollToTop) {
+          window.parent.postMessage({ type: "pathChange", page: page2 }, "*");
+          window.scrollTo({ top: 0, behavior: "instant" });
+        }
+      }
+    }
+  ));
+}
+function Pagination({ className, init, scrollToTop }) {
+  const { fulfilled, value: promiseInit } = useFetch(init);
+  return fulfilled ? promiseInit ? /* @__PURE__ */ React.createElement(Render, { scrollToTop: true, init: promiseInit }) : /* @__PURE__ */ React.createElement(Empty, null) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+}
+export {
+  Pagination as default
+};