@akanjs/ui 0.0.149 → 0.0.151

package/cjs/index.js

@@ -2,6 +2,10 @@ 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))
@@ -10,8 +14,90 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ui_exports = {};
+__export(ui_exports, {
+  BottomSheet: () => import_BottomSheet.BottomSheet,
+  Button: () => import_Button.Button,
+  ClientSide: () => import_ClientSide.ClientSide,
+  Copy: () => import_Copy.Copy,
+  CsrImage: () => import_CsrImage.CsrImage,
+  Data: () => import_Data.Data,
+  DatePicker: () => import_DatePicker.DatePicker,
+  Dialog: () => import_Dialog.Dialog,
+  DragAction: () => import_DragAction.DragAction,
+  DraggableList: () => import_DraggableList.DraggableList,
+  Dropdown: () => import_Dropdown.Dropdown,
+  Empty: () => import_Empty.Empty,
+  Field: () => import_Field.Field,
+  FontFace: () => import_FontFace.FontFace,
+  Image: () => import_Image.Image,
+  InfiniteScroll: () => import_InfiniteScroll.InfiniteScroll,
+  Input: () => import_Input.Input,
+  KeyboardAvoiding: () => import_KeyboardAvoiding.KeyboardAvoiding,
+  Layout: () => import_Layout.Layout,
+  Link: () => import_Link.Link,
+  Load: () => import_Load.Load,
+  Loading: () => import_Loading.Loading,
+  Menu: () => import_Menu.Menu,
+  Modal: () => import_Modal.Modal,
+  Model: () => import_Model.Model,
+  More: () => import_More.More,
+  ObjectId: () => import_ObjectId.ObjectId,
+  Pagination: () => import_Pagination.Pagination,
+  Popconfirm: () => import_Popconfirm.Popconfirm,
+  Portal: () => import_Portal.Portal,
+  Radio: () => import_Radio.Radio,
+  RecentTime: () => import_RecentTime.RecentTime,
+  Refresh: () => import_Refresh.Refresh,
+  ScreenNavigator: () => import_ScreenNavigator.ScreenNavigator,
+  Select: () => import_Select.Select,
+  Signal: () => import_Signal.Signal,
+  System: () => import_System.System,
+  Tab: () => import_Tab.Tab,
+  Table: () => import_Table.Table,
+  ToggleSelect: () => import_ToggleSelect.ToggleSelect,
+  Unauthorized: () => import_Unauthorized.Unauthorized
+});
 module.exports = __toCommonJS(ui_exports);
-__reExport(ui_exports, require("./src"), module.exports);
+var import_Data = require("./Data");
+var import_Dialog = require("./Dialog");
+var import_Layout = require("./Layout");
+var import_Link = require("./Link");
+var import_Load = require("./Load");
+var import_Loading = require("./Loading");
+var import_Model = require("./Model");
+var import_Signal = require("./Signal");
+var import_System = require("./System");
+var import_Tab = require("./Tab");
+var import_BottomSheet = require("./BottomSheet");
+var import_Button = require("./Button");
+var import_ClientSide = require("./ClientSide");
+var import_Copy = require("./Copy");
+var import_CsrImage = require("./CsrImage");
+var import_DatePicker = require("./DatePicker");
+var import_DragAction = require("./DragAction");
+var import_DraggableList = require("./DraggableList");
+var import_Dropdown = require("./Dropdown");
+var import_Empty = require("./Empty");
+var import_Field = require("./Field");
+var import_FontFace = require("./FontFace");
+var import_Image = require("./Image");
+var import_InfiniteScroll = require("./InfiniteScroll");
+var import_Input = require("./Input");
+var import_KeyboardAvoiding = require("./KeyboardAvoiding");
+var import_Menu = require("./Menu");
+var import_Modal = require("./Modal");
+var import_More = require("./More");
+var import_ObjectId = require("./ObjectId");
+var import_Pagination = require("./Pagination");
+var import_Popconfirm = require("./Popconfirm");
+var import_Portal = require("./Portal");
+var import_Radio = require("./Radio");
+var import_RecentTime = require("./RecentTime");
+var import_Refresh = require("./Refresh");
+var import_ScreenNavigator = require("./ScreenNavigator");
+var import_Select = require("./Select");
+var import_Table = require("./Table");
+var import_ToggleSelect = require("./ToggleSelect");
+var import_Unauthorized = require("./Unauthorized");

package/esm/BottomSheet.js

@@ -0,0 +1,84 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { st } from "@akanjs/store";
+import { useDrag } from "@use-gesture/react";
+import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { BiX } from "react-icons/bi";
+import { a, config, useSpring } from "react-spring";
+const BottomSheet = forwardRef(
+  ({ open, onCancel, type = "half", children }, bottomSheetRef) => {
+    const ref = useRef(null);
+    const pageState = st.use.pageState();
+    const [{ y, opacity }, api] = useSpring(() => ({ y: window.innerHeight, opacity: 0 }));
+    const openModal = async () => {
+      await Promise.all(api.start({ y: 0, opacity: 100, immediate: false, config: config.default }));
+    };
+    const closeModal = async () => {
+      await Promise.all(
+        api.start({ y: window.innerHeight, opacity: 0, immediate: false, config: { ...config.stiff, velocity: 0 } })
+      );
+      onCancel();
+    };
+    const bind = useDrag(
+      ({ down, velocity: [, vy], direction: [, dy], offset: [, oy], movement: [, my], xy, initial }) => {
+        if (down) {
+          if (my < 0)
+            void api.start({ y: 0, immediate: true });
+          else
+            void api.start({ y: my, immediate: true });
+        } else {
+          if (my > window.innerHeight / 3)
+            void closeModal();
+          else
+            void openModal();
+        }
+      }
+    );
+    useImperativeHandle(bottomSheetRef, () => ({
+      open: openModal,
+      close: closeModal
+    }));
+    useEffect(() => {
+      if (open)
+        void openModal();
+      else
+        void closeModal();
+    }, [open]);
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      a.div,
+      {
+        style: {
+          opacity
+        },
+        onClick: () => void closeModal(),
+        className: clsx("fixed top-0 left-0 size-full bg-gray-500/50", {
+          "z-50": open,
+          "-z-[1]": !open
+        })
+      }
+    ), /* @__PURE__ */ React.createElement(
+      a.div,
+      {
+        ref,
+        style: { y, paddingTop: type === "full" ? pageState.topSafeArea : 0 },
+        className: clsx("bg-base-100 fixed bottom-0 left-0 z-[101] w-full", {
+          "h-[90%] rounded-t-3xl": type === "half",
+          "h-[100vh]": type === "full"
+        })
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex h-8 w-full items-start justify-center pt-2" }, type === "half" ? /* @__PURE__ */ React.createElement(a.div, { ...bind(), className: "flex h-8 w-full items-start justify-center pt-2" }, /* @__PURE__ */ React.createElement("div", { className: "h-2 w-32 rounded-full bg-gray-300" })) : /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          onClick: () => void closeModal(),
+          className: "absolute top-2 right-2 text-4xl",
+          style: { paddingTop: pageState.topSafeArea }
+        },
+        /* @__PURE__ */ React.createElement(BiX, null)
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "relative size-full pt-5" }, children)
+    ));
+  }
+);
+export {
+  BottomSheet
+};

package/esm/Button.js

@@ -0,0 +1,40 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { usePage } from "@akanjs/next";
+import React, { useState } from "react";
+import { AiOutlineCheckCircle } from "react-icons/ai";
+const Button = ({ className, children, onClick, onSuccess, ...rest }) => {
+  const { l } = usePage();
+  const [state, setState] = useState({
+    mode: "idle",
+    error: null,
+    times: 0
+  });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: clsx("btn", className),
+      ...rest,
+      disabled: !!rest.disabled || ["loading", "success"].includes(state.mode),
+      onClick: (e) => {
+        setState({ mode: "loading", error: null, times: state.times + 1 });
+        void (async () => {
+          const result = await onClick(e, {
+            onError: (error) => {
+              setState({ mode: "error", error, times: state.times + 1 });
+            }
+          });
+          setState({ mode: "success", error: null, times: state.times + 1 });
+          setTimeout(() => {
+            setState({ mode: "idle", error: null, times: state.times + 1 });
+            onSuccess?.(result);
+          }, 300);
+        })();
+      }
+    },
+    state.mode === "loading" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "loading loading-bars loading-md" }), " ", l("util.processing")) : state.mode === "success" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AiOutlineCheckCircle, null), " ", l("util.processed")) : children
+  ), state.error ? /* @__PURE__ */ React.createElement("div", { className: "text-error h-10 w-full p-2 text-center text-sm" }, state.error ? l(state.error) : "  ") : null);
+};
+export {
+  Button
+};

package/esm/ClientSide.js

@@ -0,0 +1,7 @@
+import { Suspense } from "react";
+const ClientSide = ({ children, loading }) => {
+  return /* @__PURE__ */ React.createElement(Suspense, { fallback: loading }, children);
+};
+export {
+  ClientSide
+};

package/esm/Copy.js

@@ -0,0 +1,18 @@
+"use client";
+import { st } from "@akanjs/store";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+const Copy = ({ text, copyMessage, children }) => {
+  return /* @__PURE__ */ React.createElement(
+    CopyToClipboard,
+    {
+      text: text ?? "",
+      onCopy: () => {
+        st.do.showMessage({ content: copyMessage ?? "Copied", type: "success" });
+      }
+    },
+    children
+  );
+};
+export {
+  Copy
+};

package/esm/CsrImage.js

@@ -0,0 +1,31 @@
+"use client";
+const getNewImage = () => new Image();
+const CsrImage = ({
+  src,
+  file,
+  className,
+  abstractData,
+  ...props
+}) => {
+  const url = src ?? file?.url ?? "/empty.png";
+  const [width, height] = [props.width ?? file?.imageSize[0], props.height ?? file?.imageSize[1]];
+  const defaultAbstractData = "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAFklEQVR42mN8//HLfwYiAOOoQvoqBABbWyZJf74GZgAAAABJRU5ErkJggg==";
+  const blurDataURL = abstractData ?? file?.abstractData ?? defaultAbstractData;
+  const { priority, ...csrProps } = props;
+  return /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src: url,
+      "data-src": blurDataURL,
+      width,
+      height,
+      className,
+      alt: "image",
+      placeholder: "blur",
+      ...csrProps
+    }
+  );
+};
+export {
+  CsrImage
+};

package/esm/Data/CardList.js

@@ -0,0 +1,90 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { capitalize } from "@akanjs/common";
+import { st } from "@akanjs/store";
+import { useEffect } from "react";
+import { Loading } from "../Loading";
+import { Model } from "../Model";
+import DataItem from "./Item";
+import DataPagination from "./Pagination";
+function CardList({
+  className,
+  cardListClassName = "",
+  init,
+  sliceName,
+  actions,
+  columns,
+  renderItem,
+  renderLoading,
+  renderTemplate,
+  renderView,
+  renderTitle
+}) {
+  const storeUse = st.use;
+  const storeDo = st.do;
+  const storeGet = st.get;
+  const refName = st.slice[sliceName].refName;
+  const [modelName, modelClassName] = [refName, capitalize(refName)];
+  const names = {
+    model: modelName,
+    modelId: `${modelName}Id`,
+    modelList: `${modelName}List`,
+    modelListLoading: `${modelName}ListLoading`,
+    limitOfModel: `limitOf${modelClassName}`,
+    initModel: `init${modelClassName}`
+  };
+  const namesOfSlice = {
+    modelList: sliceName.replace(names.model, names.modelList),
+    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
+    limitOfModel: sliceName.replace(names.model, names.limitOfModel),
+    initModel: sliceName.replace(names.model, names.initModel)
+  };
+  const modelList = storeUse[namesOfSlice.modelList]();
+  const modelListLoading = storeUse[namesOfSlice.modelListLoading]();
+  const limitOfModel = storeUse[namesOfSlice.limitOfModel]();
+  const RenderItem = renderItem;
+  useEffect(() => {
+    if (init)
+      void storeDo[namesOfSlice.initModel](init);
+  }, []);
+  const RenderTemplate = ({ id }) => {
+    const Edit = renderTemplate;
+    return Edit ? /* @__PURE__ */ React.createElement(Edit, { ...{ [names.modelId]: id } }) : null;
+  };
+  return /* @__PURE__ */ React.createElement("div", { className }, modelListLoading ? /* @__PURE__ */ React.createElement("div", { className: clsx("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5", cardListClassName) }, new Array(limitOfModel || 20).fill(0).map((_, idx) => renderLoading ? renderLoading() : /* @__PURE__ */ React.createElement(Loading.Skeleton, { key: idx, active: true }))) : /* @__PURE__ */ React.createElement("div", { className: clsx("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5", cardListClassName) }, modelList.map((model, idx) => {
+    return /* @__PURE__ */ React.createElement(
+      DataItem,
+      {
+        key: model.id,
+        model,
+        sliceName,
+        actions: typeof actions === "function" ? actions(model, idx) : actions,
+        columns
+      },
+      /* @__PURE__ */ React.createElement(
+        RenderItem,
+        {
+          ...{
+            [sliceName]: model,
+            sliceName,
+            actions: typeof actions === "function" ? actions(model, idx) : actions,
+            columns,
+            idx
+          }
+        }
+      )
+    );
+  })), /* @__PURE__ */ React.createElement(DataPagination, { sliceName }), !modelListLoading ? modelList.map((model) => /* @__PURE__ */ React.createElement("div", { key: model.id }, /* @__PURE__ */ React.createElement(Model.EditModal, { key: model.id, id: model.id, sliceName, renderTitle }, /* @__PURE__ */ React.createElement(RenderTemplate, { id: model.id })), renderView ? /* @__PURE__ */ React.createElement(
+    Model.ViewModal,
+    {
+      key: `${model.id}-view`,
+      id: model.id,
+      sliceName,
+      renderTitle,
+      renderView
+    }
+  ) : null)) : null);
+}
+export {
+  CardList as default
+};

package/esm/Data/Dashboard.js

@@ -0,0 +1,35 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { capitalize } from "@akanjs/common";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import { Link } from "../Link";
+function Dashboard({
+  className,
+  summary,
+  sliceName,
+  queryMap,
+  columns,
+  presents,
+  hidePresents
+}) {
+  const { l } = usePage();
+  const { filter } = st.use.searchParams();
+  const refName = st.slice[sliceName].refName;
+  const [modelName, modelClassName] = [refName, capitalize(refName)];
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("stats my-2 flex w-full flex-wrap justify-center py-0 shadow-sm", className) }, /* @__PURE__ */ React.createElement("div", { className: "stats" }, columns?.map(
+    (column) => summary[column] !== void 0 && queryMap[column] !== void 0 && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        key: column,
+        className: `btn btn-ghost mx-1 h-32 w-48 rounded-none pt-3 hover:border ${filter === column ? "border" : "border-0"}`
+      },
+      /* @__PURE__ */ React.createElement(Link, { key: column, className: "stat", href: `/admin?topMenu=data&subMenu=${modelName}&filter=${column}` }, /* @__PURE__ */ React.createElement("div", { className: "stat-title" }, l(`summary.${column}`)), /* @__PURE__ */ React.createElement("div", { className: "stat-value text-primary" }, summary[column].toLocaleString()))
+    )
+  ), !hidePresents ? presents?.map(
+    (column) => summary[column] !== void 0 && queryMap[column] !== void 0 && /* @__PURE__ */ React.createElement("button", { key: column, className: `btn btn-ghost mx-1 h-32 w-48 rounded-none border-none pt-3` }, /* @__PURE__ */ React.createElement("div", { className: "stat" }, /* @__PURE__ */ React.createElement("div", { className: "stat-title" }, l(`summary.${column}`)), /* @__PURE__ */ React.createElement("div", { className: "stat-value text-primary" }, summary[column])))
+  ) : null));
+}
+export {
+  Dashboard as default
+};

package/esm/Data/Insight.js

@@ -0,0 +1,19 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+function Insight({
+  className,
+  insight,
+  sliceName,
+  columns
+}) {
+  const { l } = usePage();
+  const refName = st.slice[sliceName].refName;
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("stats my-2 flex w-full flex-wrap justify-center py-2 shadow-sm", className) }, /* @__PURE__ */ React.createElement("div", { className: "stats" }, columns?.map(
+    (column, idx) => insight[column] !== void 0 && /* @__PURE__ */ React.createElement("div", { key: idx, className: "stat mx-1 flex items-center rounded-none" }, /* @__PURE__ */ React.createElement("div", { className: "stat-title" }, l.field(refName, column)), /* @__PURE__ */ React.createElement("div", { className: "stat-value text-xl" }, insight[column].toLocaleString()))
+  )));
+}
+export {
+  Insight as default
+};

package/esm/Data/Item.js

@@ -0,0 +1,175 @@
+"use client";
+import { clsx } from "@akanjs/client";
+import { capitalize } from "@akanjs/common";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import React from "react";
+import { AiOutlineDelete, AiOutlineEdit, AiOutlineEye, AiOutlineMore } from "react-icons/ai";
+import { Dropdown } from "../Dropdown";
+import { ObjectId } from "../ObjectId";
+import { Popconfirm } from "../Popconfirm";
+import { RecentTime } from "../RecentTime";
+const convToAntdColumn = (column) => {
+  if (typeof column !== "string")
+    return {
+      key: column.key,
+      dataIndex: column.key,
+      title: capitalize(column.key),
+      responsive: column.responsive ? ["xs", "sm", "md", "xl"] : void 0,
+      render: column.render
+    };
+  else if ([
+    "createdAt",
+    "updatedAt",
+    "at",
+    "At",
+    "lastLoginAt",
+    "openAt",
+    "closeAt",
+    "announceAt",
+    "startAt",
+    "logtime"
+  ].includes(column))
+    return {
+      key: column,
+      dataIndex: column,
+      title: capitalize(column),
+      render: (date) => /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(RecentTime, { date }))
+    };
+  else if (column.includes("status") || column.includes("Status"))
+    return {
+      key: column,
+      dataIndex: column,
+      title: capitalize(column),
+      render: (status) => /* @__PURE__ */ React.createElement(StatusTag, { status })
+    };
+  else if (column.includes("role") || column.includes("Role"))
+    return {
+      key: column,
+      dataIndex: column,
+      title: capitalize(column),
+      render: (role) => /* @__PURE__ */ React.createElement(RoleTags, { role })
+    };
+  else
+    return { key: column, dataIndex: column, title: capitalize(column) };
+};
+function Item({
+  className,
+  model,
+  sliceName,
+  onClick,
+  title,
+  actions = [],
+  columns = [],
+  children
+}) {
+  const { l } = usePage();
+  const strActions = actions.filter((action) => typeof action === "string").map((action, idx) => /* @__PURE__ */ React.createElement(Action, { key: idx, action, outline: false, model, sliceName }));
+  const customActions = actions.filter((action) => typeof action !== "string").map((action, idx) => ({
+    key: idx,
+    label: typeof action !== "string" ? action.render() : null
+  }));
+  const extraCols = columns.filter((column) => {
+    const key = typeof column === "string" ? column : column.key;
+    return !["id", "status", "createdAt"].includes(key);
+  }).map((column, idx) => {
+    const key = typeof column === "string" ? column : column.key;
+    const title2 = typeof column !== "string" && column.title ? column.title : l.field(sliceName, key);
+    const render = convToAntdColumn(column).render ?? ((v, m, i) => JSON.stringify(v, null, 2));
+    const modelKeyLength = model[key]?.length;
+    if (convToAntdColumn(column).render) {
+      return /* @__PURE__ */ React.createElement("div", { key: idx, className: "flex-wrap overflow-hidden text-xs" }, !!modelKeyLength && /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement("span", { className: "font-semibold whitespace-nowrap" }, title2), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, render(model[key], model, idx))));
+    }
+    return /* @__PURE__ */ React.createElement("div", { key: idx, className: "flex-wrap overflow-hidden text-xs" }, !!modelKeyLength && /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-3" }, /* @__PURE__ */ React.createElement("span", { className: "font-semibold whitespace-nowrap" }, title2), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, model[key])));
+  });
+  return /* @__PURE__ */ React.createElement("div", { className: clsx("flex flex-col", className) }, children ? /* @__PURE__ */ React.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React.createElement("div", { className: "relative size-full", onClick }, children, /* @__PURE__ */ React.createElement("div", { className: "absolute inset-0" }))) : title ? /* @__PURE__ */ React.createElement("div", { className: "font-bold" }, title) : null, /* @__PURE__ */ React.createElement("div", { className: "bg-primary/5 mt-2 h-full rounded-lg p-2" }, /* @__PURE__ */ React.createElement("div", { className: "mb-2 flex justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "[&_.badge]:badge-xs [&_.badge]:p-2" }, columns.find((c) => c === "id") && /* @__PURE__ */ React.createElement(ObjectId, { id: model.id })), /* @__PURE__ */ React.createElement("div", { className: "flex items-end justify-center gap-2" }, columns.find((c) => c === "createdAt") && /* @__PURE__ */ React.createElement(RecentTime, { date: model.createdAt, className: "text-xs opacity-60" }), columns.find((c) => c === "status") && /* @__PURE__ */ React.createElement(StatusTag, { status: model.status, className: "badge-xs mr-0 p-2" }))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1" }, extraCols), /* @__PURE__ */ React.createElement("div", { className: "flex w-full justify-around" }, strActions.map((action, idx) => /* @__PURE__ */ React.createElement("div", { className: "", key: idx }, action)), customActions.length ? /* @__PURE__ */ React.createElement(
+    Dropdown,
+    {
+      buttonClassName: "m-1 text-center btn btn-square btn-ghost btn-sm ",
+      value: /* @__PURE__ */ React.createElement(AiOutlineMore, null),
+      content: customActions.map((action) => /* @__PURE__ */ React.createElement("div", { key: action.key }, action.label))
+    }
+  ) : null)));
+}
+const Action = ({
+  action,
+  model,
+  sliceName,
+  outline = true
+}) => {
+  const { l } = usePage();
+  const storeDo = st.do;
+  const storeGet = st.get;
+  const refName = st.slice[sliceName].refName;
+  const [modelName, modelClassName] = [refName, capitalize(refName)];
+  const names = {
+    model: modelName,
+    editModel: `edit${modelClassName}`,
+    viewModel: `view${modelClassName}`,
+    removeModel: `remove${modelClassName}`
+  };
+  const namesOfSlice = {
+    editModel: sliceName.replace(names.model, names.editModel),
+    viewModel: sliceName.replace(names.model, names.viewModel),
+    removeModel: sliceName.replace(names.model, names.removeModel)
+  };
+  return action === "edit" ? /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: `btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}`,
+      onClick: () => void storeDo[namesOfSlice.editModel](model.id)
+    },
+    /* @__PURE__ */ React.createElement(AiOutlineEdit, { key: action })
+  ) : action === "view" ? /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: `btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}`,
+      onClick: () => void storeDo[namesOfSlice.viewModel](model.id)
+    },
+    /* @__PURE__ */ React.createElement(AiOutlineEye, { key: action })
+  ) : action === "remove" ? /* @__PURE__ */ React.createElement(
+    Popconfirm,
+    {
+      key: action,
+      title: l("shared.removeMsg"),
+      onConfirm: () => void storeDo[namesOfSlice.removeModel](model.id)
+    },
+    /* @__PURE__ */ React.createElement("button", { className: `btn btn-square btn-ghost btn-sm m-1 text-center ${outline && "btn-outline border-dashed"}` }, /* @__PURE__ */ React.createElement(AiOutlineDelete, null))
+  ) : action.render();
+};
+const statusColors = {
+  active: "badge-info badge-outline",
+  applied: "badge-warning",
+  approved: "badge-success",
+  denied: "badge-error badge-outline",
+  failed: "badge-error badge-outline",
+  restricted: "badge-error",
+  paused: "badge-outline",
+  running: "badge-warning badge-outline",
+  break: "badge-accent badge-outline",
+  rejected: "badge-error badge-outline",
+  hidden: "badge-outline",
+  inProgress: "badge-accent",
+  resolved: "badge-success badge-outline",
+  finished: "badge-secondary"
+};
+const StatusTag = ({ status, className }) => {
+  return /* @__PURE__ */ React.createElement("div", { className: clsx(`badge mr-1 p-3 ${statusColors[status] ?? "badge-outline"}`, className) }, status);
+};
+Item.StatusTag = StatusTag;
+const roleColors = {
+  user: "badge-success",
+  business: "badge-warning",
+  admin: "badge-error badge-outline",
+  superAdmin: "badge-error",
+  root: "badge-primary"
+};
+const RoleTags = ({ role }) => {
+  return Array.isArray(role) ? /* @__PURE__ */ React.createElement(React.Fragment, null, role.map((role2) => /* @__PURE__ */ React.createElement("div", { className: `badge mr-1 ${roleColors[role2]}`, key: role2 }, role2))) : /* @__PURE__ */ React.createElement("div", { className: "badge mr-1", style: { backgroundColor: roleColors[role] } }, role);
+};
+Item.RoleTags = RoleTags;
+export {
+  Action,
+  convToAntdColumn,
+  Item as default
+};