@compill/admin 1.0.47 → 1.0.48

package/index.cjs.js

@@ -85,6 +85,7 @@ function SectionTitle(_a) {
 
 // Material Design Icons v7.4.47
 var mdiArrowDownBoldBox = "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M12,17L17,12H14V8H10V12H7L12,17Z";
+var mdiArrowLeft = "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z";
 var mdiArrowUpBoldBox = "M19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21M12,7L7,12H10V16H14V12H17L12,7Z";
 var mdiCircleSmall = "M12,10A2,2 0 0,0 10,12C10,13.11 10.9,14 12,14C13.11,14 14,13.11 14,12A2,2 0 0,0 12,10Z";
 var mdiCloudUpload = "M11 20H6.5Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20H13V12.85L14.6 14.4L16 13L12 9L8 13L9.4 14.4L11 12.85Z";
@@ -2741,6 +2742,233 @@ function ScreenRenderer(_a) {
   return jsxRuntime.jsx(jsxRuntime.Fragment, {});
 }
 
+/**
+ *
+ *
+ */
+function Content(_a) {
+  var props = __rest$1(_a, []);
+  return jsxRuntime.jsx("div", Object.assign({
+    w: "100%",
+    h: "100%",
+    overflowY: "auto"
+  }, props, {
+    children: jsxRuntime.jsx(reactRouterDom.Outlet, {})
+  }));
+}
+
+/**
+ *
+ *
+ */
+function Menu(_a) {
+  var {
+      darkMode,
+      config
+    } = _a,
+    props = __rest$1(_a, ["darkMode", "config"]);
+  return jsxRuntime.jsx("ul", Object.assign({}, props, {
+    children: config.map((item, index) => {
+      if (item.type == "divider") return jsxRuntime.jsx(Divider, {
+        title: item.label
+      }, index);
+      if (item.type == "item") {
+        return jsxRuntime.jsx(MenuItem, {
+          icon: item.icon,
+          path: item.path,
+          depth: 0,
+          darkMode: darkMode,
+          subMenu: item.children,
+          children: item.label
+        }, index);
+      }
+    })
+  }));
+}
+function Divider({
+  title
+}) {
+  return jsxRuntime.jsx("div", {
+    px: "2",
+    mt: "5",
+    mb: "2",
+    opacity: "75",
+    textTransform: "capitalize",
+    letterSpacing: "widest",
+    fontWeight: "700",
+    textSize: "xs",
+    children: title
+  });
+}
+function MenuItem(_a) {
+  var {
+      icon,
+      path,
+      depth,
+      darkMode,
+      subMenu,
+      children
+    } = _a,
+    props = __rest$1(_a, ["icon", "path", "depth", "darkMode", "subMenu", "children"]);
+  const match = reactRouterDom.useMatch("/" + path); // + "/*")
+  const selected = match != null;
+  return jsxRuntime.jsxs(reactRouterDom.Link, {
+    to: path,
+    style: {
+      position: "relative"
+    },
+    children: [jsxRuntime.jsxs(ui.Button, Object.assign({
+      as: "li",
+      minH: "8",
+      ms: `${(depth !== null && depth !== void 0 ? depth : 0) * 2}`,
+      p: "2",
+      font: "title",
+      textColor: darkMode ? "white" : "black",
+      fontWeight: "600",
+      rounded: "lg",
+      textSize: "sm",
+      variant: "borderless",
+      hover_bgColor: darkMode ? "white" : "black",
+      hover_bgOpacity: "10",
+      hover_textColor: darkMode ? "white" : "zinc-800",
+      cursor: "pointer",
+      dflex: true,
+      alignItems: "center",
+      gap: "3"
+    }, props, {
+      children: [icon && jsxRuntime.jsx(ui.Icon, {
+        path: icon,
+        opacity: selected ? "100" : "60"
+      }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsxRuntime.jsx(MenuItem, {
+        icon: item.icon,
+        path: item.path,
+        depth: (depth !== null && depth !== void 0 ? depth : 0) + 1,
+        darkMode: darkMode,
+        subMenu: item.children,
+        children: item.label
+      }, index)), children]
+    })), selected && jsxRuntime.jsx("div", {
+      position: "absolute",
+      bgColor: darkMode ? "white" : "black",
+      bgOpacity: "90",
+      w: "0.5",
+      h: "6",
+      top: "1.5",
+      start: "-4"
+    })]
+  });
+}
+
+function Sidebar(_a) {
+  var {
+      show,
+      logo,
+      title,
+      menuConfig,
+      color,
+      darkMode
+    } = _a,
+    props = __rest$1(_a, ["show", "logo", "title", "menuConfig", "color", "darkMode"]);
+  return jsxRuntime.jsxs("div", Object.assign({
+    w: "64",
+    minH: "screen",
+    p: "0",
+    textColor: darkMode ? "white" : "slate-800"
+  }, props, {
+    children: [jsxRuntime.jsxs(components.FlexCenter, {
+      placeContent: "start",
+      p: "4",
+      font: "title",
+      gap: "3",
+      borderB: "px",
+      borderBColor: "slate-900",
+      borderOpacity: "5",
+      children: [logo, jsxRuntime.jsx("h1", {
+        textSize: "md",
+        children: title
+      })]
+    }), jsxRuntime.jsx(Menu, {
+      overflowY: "auto",
+      flexGrow: "1",
+      p: "4",
+      darkMode: darkMode,
+      config: menuConfig
+    })]
+  }));
+}
+
+function Layout(_a) {
+  var {
+      color,
+      darkMode,
+      logo,
+      title,
+      menuConfig
+    } = _a,
+    props = __rest$1(_a, ["color", "darkMode", "logo", "title", "menuConfig"]);
+  return jsxRuntime.jsxs("div", Object.assign({
+    w: "full",
+    h: "screen",
+    dflex: true,
+    flexRow: true,
+    bgColor: `${color}-${darkMode ? "900" : "100"}`
+  }, props, {
+    children: [jsxRuntime.jsx(LeftPanel, {
+      color: color,
+      darkMode: darkMode,
+      logo: logo,
+      title: title,
+      menuConfig: menuConfig
+    }), jsxRuntime.jsx("div", {
+      w: "screen",
+      py: "2",
+      pe: "2",
+      children: jsxRuntime.jsx(Content, {
+        bgColor: "white",
+        rounded: "lg",
+        shadow: true
+      })
+    })]
+  }));
+}
+function LeftPanel({
+  color,
+  darkMode,
+  logo,
+  title,
+  menuConfig
+}) {
+  const [isOpen, __, toggle] = hooks.useBoolean(true);
+  useHotkeys('ctrl+t', () => toggle(), [toggle]);
+  return jsxRuntime.jsxs("div", {
+    ms: isOpen ? "0" : "-64",
+    transition: "all",
+    duration: "500",
+    transform: true,
+    children: [jsxRuntime.jsx(Sidebar, {
+      flexShrink: "0",
+      color: color,
+      darkMode: darkMode,
+      logo: logo,
+      title: title,
+      menuConfig: menuConfig
+    }), jsxRuntime.jsx(ui.IconButton, {
+      icon: mdiArrowLeft,
+      transition: "all",
+      duration: "500",
+      transform: true,
+      rotate: isOpen ? "0" : "180",
+      position: "absolute",
+      bottom: "14",
+      end: "-5",
+      size: "lg",
+      corners: "pill",
+      onClick: toggle,
+      z: "100"
+    })]
+  });
+}
+
 const defaultErrorMsg$1 = "Oops, something went wrong...";
 function AttachDialog(_a) {
   var {
@@ -3368,6 +3596,7 @@ exports.DialogButton = DialogButton;
 exports.FormActionDialog = FormActionDialog;
 exports.InvalidateButton = InvalidateButton;
 exports.ItemEditDialog = ItemEditDialog;
+exports.Layout = Layout;
 exports.NavigateButton = NavigateButton;
 exports.OrderCell = OrderCell;
 exports.PageContainer = PageContainer;

package/index.esm.js

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import React, { useRef, useCallback, useContext as useContext$2, useLayoutEffect, useEffect, createContext } from 'react';
 import { INVALIDATE_API } from '@compill/admin-api';
 import { useApiMutation, useMutate, useInvalidateMutation, useApiQuery, useInvalidateQuery, useInvalidateParentMutation, useApiQueries } from '@compill/api';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, Outlet, useMatch, Link as Link$1 } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { SubmitButton, FormProvider, TextArea, FormRenderer, mergeInitialFormValues, FieldLabel } from '@compill/form';
 import { useFormikContext, Field, Formik, Form } from 'formik';
@@ -15,7 +15,7 @@ import { Editor } from '@compill/editor';
 import { PageSectionTitle as PageSectionTitle$1 } from '@compill/admin';
 import { createPortal } from 'react-dom';
 import { TableContextProvider, useTableContext, Table } from '@compill/table';
-import { useOpenLink } from '@compill/hooks';
+import { useOpenLink, useBoolean } from '@compill/hooks';
 import { useQueryClient } from '@tanstack/react-query';
 
 /******************************************************************************
@@ -76,6 +76,7 @@ function SectionTitle(_a) {
 
 // Material Design Icons v7.4.47
 var mdiArrowDownBoldBox = "M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M12,17L17,12H14V8H10V12H7L12,17Z";
+var mdiArrowLeft = "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z";
 var mdiArrowUpBoldBox = "M19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21M12,7L7,12H10V16H14V12H17L12,7Z";
 var mdiCircleSmall = "M12,10A2,2 0 0,0 10,12C10,13.11 10.9,14 12,14C13.11,14 14,13.11 14,12A2,2 0 0,0 12,10Z";
 var mdiCloudUpload = "M11 20H6.5Q4.22 20 2.61 18.43 1 16.85 1 14.58 1 12.63 2.17 11.1 3.35 9.57 5.25 9.15 5.88 6.85 7.75 5.43 9.63 4 12 4 14.93 4 16.96 6.04 19 8.07 19 11 20.73 11.2 21.86 12.5 23 13.78 23 15.5 23 17.38 21.69 18.69 20.38 20 18.5 20H13V12.85L14.6 14.4L16 13L12 9L8 13L9.4 14.4L11 12.85Z";
@@ -2732,6 +2733,233 @@ function ScreenRenderer(_a) {
   return jsx(Fragment, {});
 }
 
+/**
+ *
+ *
+ */
+function Content(_a) {
+  var props = __rest$1(_a, []);
+  return jsx("div", Object.assign({
+    w: "100%",
+    h: "100%",
+    overflowY: "auto"
+  }, props, {
+    children: jsx(Outlet, {})
+  }));
+}
+
+/**
+ *
+ *
+ */
+function Menu(_a) {
+  var {
+      darkMode,
+      config
+    } = _a,
+    props = __rest$1(_a, ["darkMode", "config"]);
+  return jsx("ul", Object.assign({}, props, {
+    children: config.map((item, index) => {
+      if (item.type == "divider") return jsx(Divider, {
+        title: item.label
+      }, index);
+      if (item.type == "item") {
+        return jsx(MenuItem, {
+          icon: item.icon,
+          path: item.path,
+          depth: 0,
+          darkMode: darkMode,
+          subMenu: item.children,
+          children: item.label
+        }, index);
+      }
+    })
+  }));
+}
+function Divider({
+  title
+}) {
+  return jsx("div", {
+    px: "2",
+    mt: "5",
+    mb: "2",
+    opacity: "75",
+    textTransform: "capitalize",
+    letterSpacing: "widest",
+    fontWeight: "700",
+    textSize: "xs",
+    children: title
+  });
+}
+function MenuItem(_a) {
+  var {
+      icon,
+      path,
+      depth,
+      darkMode,
+      subMenu,
+      children
+    } = _a,
+    props = __rest$1(_a, ["icon", "path", "depth", "darkMode", "subMenu", "children"]);
+  const match = useMatch("/" + path); // + "/*")
+  const selected = match != null;
+  return jsxs(Link$1, {
+    to: path,
+    style: {
+      position: "relative"
+    },
+    children: [jsxs(Button, Object.assign({
+      as: "li",
+      minH: "8",
+      ms: `${(depth !== null && depth !== void 0 ? depth : 0) * 2}`,
+      p: "2",
+      font: "title",
+      textColor: darkMode ? "white" : "black",
+      fontWeight: "600",
+      rounded: "lg",
+      textSize: "sm",
+      variant: "borderless",
+      hover_bgColor: darkMode ? "white" : "black",
+      hover_bgOpacity: "10",
+      hover_textColor: darkMode ? "white" : "zinc-800",
+      cursor: "pointer",
+      dflex: true,
+      alignItems: "center",
+      gap: "3"
+    }, props, {
+      children: [icon && jsx(Icon, {
+        path: icon,
+        opacity: selected ? "100" : "60"
+      }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsx(MenuItem, {
+        icon: item.icon,
+        path: item.path,
+        depth: (depth !== null && depth !== void 0 ? depth : 0) + 1,
+        darkMode: darkMode,
+        subMenu: item.children,
+        children: item.label
+      }, index)), children]
+    })), selected && jsx("div", {
+      position: "absolute",
+      bgColor: darkMode ? "white" : "black",
+      bgOpacity: "90",
+      w: "0.5",
+      h: "6",
+      top: "1.5",
+      start: "-4"
+    })]
+  });
+}
+
+function Sidebar(_a) {
+  var {
+      show,
+      logo,
+      title,
+      menuConfig,
+      color,
+      darkMode
+    } = _a,
+    props = __rest$1(_a, ["show", "logo", "title", "menuConfig", "color", "darkMode"]);
+  return jsxs("div", Object.assign({
+    w: "64",
+    minH: "screen",
+    p: "0",
+    textColor: darkMode ? "white" : "slate-800"
+  }, props, {
+    children: [jsxs(FlexCenter, {
+      placeContent: "start",
+      p: "4",
+      font: "title",
+      gap: "3",
+      borderB: "px",
+      borderBColor: "slate-900",
+      borderOpacity: "5",
+      children: [logo, jsx("h1", {
+        textSize: "md",
+        children: title
+      })]
+    }), jsx(Menu, {
+      overflowY: "auto",
+      flexGrow: "1",
+      p: "4",
+      darkMode: darkMode,
+      config: menuConfig
+    })]
+  }));
+}
+
+function Layout(_a) {
+  var {
+      color,
+      darkMode,
+      logo,
+      title,
+      menuConfig
+    } = _a,
+    props = __rest$1(_a, ["color", "darkMode", "logo", "title", "menuConfig"]);
+  return jsxs("div", Object.assign({
+    w: "full",
+    h: "screen",
+    dflex: true,
+    flexRow: true,
+    bgColor: `${color}-${darkMode ? "900" : "100"}`
+  }, props, {
+    children: [jsx(LeftPanel, {
+      color: color,
+      darkMode: darkMode,
+      logo: logo,
+      title: title,
+      menuConfig: menuConfig
+    }), jsx("div", {
+      w: "screen",
+      py: "2",
+      pe: "2",
+      children: jsx(Content, {
+        bgColor: "white",
+        rounded: "lg",
+        shadow: true
+      })
+    })]
+  }));
+}
+function LeftPanel({
+  color,
+  darkMode,
+  logo,
+  title,
+  menuConfig
+}) {
+  const [isOpen, __, toggle] = useBoolean(true);
+  useHotkeys('ctrl+t', () => toggle(), [toggle]);
+  return jsxs("div", {
+    ms: isOpen ? "0" : "-64",
+    transition: "all",
+    duration: "500",
+    transform: true,
+    children: [jsx(Sidebar, {
+      flexShrink: "0",
+      color: color,
+      darkMode: darkMode,
+      logo: logo,
+      title: title,
+      menuConfig: menuConfig
+    }), jsx(IconButton, {
+      icon: mdiArrowLeft,
+      transition: "all",
+      duration: "500",
+      transform: true,
+      rotate: isOpen ? "0" : "180",
+      position: "absolute",
+      bottom: "14",
+      end: "-5",
+      size: "lg",
+      corners: "pill",
+      onClick: toggle,
+      z: "100"
+    })]
+  });
+}
+
 const defaultErrorMsg$1 = "Oops, something went wrong...";
 function AttachDialog(_a) {
   var {
@@ -3353,4 +3581,4 @@ function TableRowPublishPostButton(_a) {
   }));
 }
 
-export { AttachDialog, Breadcrumbs, DialogButton, FormActionDialog, InvalidateButton, ItemEditDialog, NavigateButton, OrderCell, PageContainer, PageContentEditor, PageMain, PageQueryStateContainer, PageSectionTitle, PageSidebar, PageSidebarSection, PageStateContainer, PageSubSectionTitle, PageTabbedTopBar, PageTabbedTopBarProvider, PageTitle, PageTopBar, PageTopBarToolbar, PublishButton, ScreenRenderer, SectionTitle, StatusBadge, TableContainer, TableCreateButton, TableFilterButton, TableRowActionBar, TableRowDeleteButton, TableRowEditButton, TableRowNavigateButton, TableRowPublishPostButton, TableRowViewButton, TableTopBar, UpdateButton, ViewButton };
+export { AttachDialog, Breadcrumbs, DialogButton, FormActionDialog, InvalidateButton, ItemEditDialog, Layout, NavigateButton, OrderCell, PageContainer, PageContentEditor, PageMain, PageQueryStateContainer, PageSectionTitle, PageSidebar, PageSidebarSection, PageStateContainer, PageSubSectionTitle, PageTabbedTopBar, PageTabbedTopBarProvider, PageTitle, PageTopBar, PageTopBarToolbar, PublishButton, ScreenRenderer, SectionTitle, StatusBadge, TableContainer, TableCreateButton, TableFilterButton, TableRowActionBar, TableRowDeleteButton, TableRowEditButton, TableRowNavigateButton, TableRowPublishPostButton, TableRowViewButton, TableTopBar, UpdateButton, ViewButton };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@compill/admin",
-    "version": "1.0.47",
+    "version": "1.0.48",
     "module": "./index.esm.js",
     "main": "./index.cjs.js"
 }

package/src/index.d.ts

@@ -16,6 +16,7 @@ export * from "./lib/json/types/QueryWrapper";
 export * from "./lib/json/types/QueryWrapperDialog";
 export * from "./lib/json/types/MultiQueryWrapper";
 export * from "./lib/json/ScreenRenderer";
+export * from "./lib/layout/AdminLayout";
 export * from "./lib/modal/AttachDialog";
 export * from "./lib/modal/FormActionDialog";
 export * from "./lib/modal/ItemEditDialog";

package/src/lib/layout/AdminLayout.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Color, ParentComponent, SoperioComponent } from "@soperio/react";
+import { MenuConfig } from "./Menu";
+interface LayoutProps extends SoperioComponent, ParentComponent {
+    color: Color;
+    darkMode?: boolean;
+    logo: React.ReactNode;
+    title: string;
+    menuConfig: MenuConfig;
+}
+export declare function Layout({ color, darkMode, logo, title, menuConfig, ...props }: LayoutProps): JSX.Element;
+export {};

package/src/lib/layout/Content.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SoperioComponent, ParentComponent } from "@soperio/react";
+interface ContentProps extends SoperioComponent, ParentComponent {
+}
+/**
+ *
+ *
+ */
+export default function Content({ ...props }: ContentProps): JSX.Element;
+export {};

package/src/lib/layout/Menu.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { ParentComponent, SoperioComponent } from "@soperio/react";
+interface MenuProps extends SoperioComponent, ParentComponent {
+    darkMode?: boolean;
+    config: MenuConfig;
+}
+export type MenuConfig = MenuItems;
+type MenuItems = (MenuItem | MenuDivider)[];
+type MenuItem = {
+    type: "item";
+    path: string;
+    icon?: string;
+    label: string;
+    children?: MenuItem[];
+};
+type MenuDivider = {
+    type: "divider";
+    label?: string;
+};
+/**
+ *
+ *
+ */
+export default function Menu({ darkMode, config, ...props }: MenuProps): JSX.Element;
+interface MenuItemProps extends SoperioComponent, ParentComponent {
+    path: string;
+    depth?: number;
+    icon?: string;
+    darkMode?: boolean;
+    subMenu?: MenuItem[];
+}
+declare function MenuItem({ icon, path, depth, darkMode, subMenu, children, ...props }: MenuItemProps): JSX.Element;
+export {};

package/src/lib/layout/Sidebar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Color, ParentComponent, SoperioComponent } from "@soperio/react";
+import { MenuConfig } from "./Menu";
+interface SidebarProps extends SoperioComponent, ParentComponent {
+    show?: boolean;
+    color: Color;
+    darkMode?: boolean;
+    logo: React.ReactNode;
+    title: string;
+    menuConfig: MenuConfig;
+}
+export declare function Sidebar({ show, logo, title, menuConfig, color, darkMode, ...props }: SidebarProps): JSX.Element;
+export {};