@compill/admin 1.0.61 → 1.0.63

package/index.cjs.js

@@ -23,11 +23,13 @@ var hooks = require('@compill/hooks');
 var env = require('@compill/env');
 var router = require('next/router');
 var reactQuery = require('@tanstack/react-query');
+var Image = require('next/image');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2891,52 +2893,56 @@ function MenuItem(_a) {
       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"
-    })]
+  const location = reactRouterDom.useLocation();
+  const selected = location.pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
+  // const match = useMatch("/" + path)// + "/*")
+  // const selected = match != null
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [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"
+        }), children]
+      })), selected && jsxRuntime.jsx("div", {
+        position: "absolute",
+        bgColor: darkMode ? "white" : "black",
+        bgOpacity: "90",
+        w: "0.5",
+        h: "6",
+        top: "1.5",
+        start: "-4"
+      })]
+    }), 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))]
   });
 }
 
@@ -2964,9 +2970,13 @@ function Sidebar(_a) {
       borderB: "px",
       borderBColor: "slate-900",
       borderOpacity: "5",
-      children: [logo, jsxRuntime.jsx("h1", {
+      children: [logo !== null && logo !== void 0 ? logo : jsxRuntime.jsx(Logo, {
+        width: 40,
+        height: 40,
+        darkMode: darkMode
+      }), jsxRuntime.jsx("h1", {
         textSize: "md",
-        children: title
+        children: title !== null && title !== void 0 ? title : env.Env.appName()
       })]
     }), jsxRuntime.jsx(Menu, {
       overflowY: "auto",
@@ -2977,6 +2987,24 @@ function Sidebar(_a) {
     })]
   }));
 }
+function Logo(_a) {
+  var {
+      width,
+      height,
+      darkMode
+    } = _a,
+    props = __rest$1(_a, ["width", "height", "darkMode"]);
+  return jsxRuntime.jsx("div", Object.assign({}, props, {
+    children: jsxRuntime.jsx(Image__default["default"], {
+      src: `/logo_${darkMode ? "light" : "dark"}.png`,
+      alt: env.Env.appName(),
+      width: width,
+      height: height,
+      priority: true,
+      unoptimized: true
+    })
+  }));
+}
 
 function AdminLayout(_a) {
   var {

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, Outlet, useMatch, Link as Link$1 } from 'react-router-dom';
+import { useNavigate, useParams, Outlet, useLocation, 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';
@@ -19,6 +19,7 @@ import { useOpenLink, useBoolean } from '@compill/hooks';
 import { Env } from '@compill/env';
 import { useRouter } from 'next/router';
 import { useQueryClient } from '@tanstack/react-query';
+import Image from 'next/image';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -2882,52 +2883,56 @@ function MenuItem(_a) {
       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"
-    })]
+  const location = useLocation();
+  const selected = location.pathname.startsWith(path.startsWith("/") ? path : `/${path}`);
+  // const match = useMatch("/" + path)// + "/*")
+  // const selected = match != null
+  return jsxs(Fragment, {
+    children: [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"
+        }), children]
+      })), selected && jsx("div", {
+        position: "absolute",
+        bgColor: darkMode ? "white" : "black",
+        bgOpacity: "90",
+        w: "0.5",
+        h: "6",
+        top: "1.5",
+        start: "-4"
+      })]
+    }), 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))]
   });
 }
 
@@ -2955,9 +2960,13 @@ function Sidebar(_a) {
       borderB: "px",
       borderBColor: "slate-900",
       borderOpacity: "5",
-      children: [logo, jsx("h1", {
+      children: [logo !== null && logo !== void 0 ? logo : jsx(Logo, {
+        width: 40,
+        height: 40,
+        darkMode: darkMode
+      }), jsx("h1", {
         textSize: "md",
-        children: title
+        children: title !== null && title !== void 0 ? title : Env.appName()
       })]
     }), jsx(Menu, {
       overflowY: "auto",
@@ -2968,6 +2977,24 @@ function Sidebar(_a) {
     })]
   }));
 }
+function Logo(_a) {
+  var {
+      width,
+      height,
+      darkMode
+    } = _a,
+    props = __rest$1(_a, ["width", "height", "darkMode"]);
+  return jsx("div", Object.assign({}, props, {
+    children: jsx(Image, {
+      src: `/logo_${darkMode ? "light" : "dark"}.png`,
+      alt: Env.appName(),
+      width: width,
+      height: height,
+      priority: true,
+      unoptimized: true
+    })
+  }));
+}
 
 function AdminLayout(_a) {
   var {

package/package.json

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

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

@@ -4,8 +4,8 @@ import { MenuConfig } from "./Menu";
 interface LayoutProps extends SoperioComponent, ParentComponent {
     color: Color;
     darkMode?: boolean;
-    logo: React.ReactNode;
-    title: string;
+    logo?: React.ReactNode;
+    title?: string;
     menuConfig: MenuConfig;
 }
 export declare function AdminLayout({ color, darkMode, logo, title, menuConfig, ...props }: LayoutProps): JSX.Element;

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

@@ -5,9 +5,15 @@ interface SidebarProps extends SoperioComponent, ParentComponent {
     show?: boolean;
     color: Color;
     darkMode?: boolean;
-    logo: React.ReactNode;
-    title: string;
+    logo?: React.ReactNode;
+    title?: string;
     menuConfig: MenuConfig;
 }
 export declare function Sidebar({ show, logo, title, menuConfig, color, darkMode, ...props }: SidebarProps): JSX.Element;
+interface LogoProps extends SoperioComponent, ParentComponent {
+    width: number;
+    height: number;
+    darkMode?: boolean;
+}
+export default function Logo({ width, height, darkMode, ...props }: LogoProps): JSX.Element;
 export {};