@tker-react/layout 0.2.1 → 0.2.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Joey
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.mjs

@@ -1,4 +1,5 @@
 import "./layout.css";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { createContext, useContext, useRef, useCallback, useState, useMemo, useEffect } from 'react';
 
 function findMenuItemByPath(menuData, path) {
@@ -192,7 +193,7 @@ function LayoutProvider({ children }) {
       setMaxTabs
     ]
   );
-  return /* @__PURE__ */ React.createElement(LayoutContext.Provider, { value }, children);
+  return /* @__PURE__ */ jsx(LayoutContext.Provider, { value, children });
 }
 
 function LayoutAside() {
@@ -220,36 +221,39 @@ function LayoutAside() {
   const MenuAdapter = adapters.menu;
   if (!MenuAdapter) return null;
   const asideWidth = collapsed ? collapsedWidth : expandedWidth;
-  return /* @__PURE__ */ React.createElement("aside", { className: "tker-layout-aside", style: { width: asideWidth } }, /* @__PURE__ */ React.createElement(
-    MenuAdapter,
-    {
-      menuData,
-      activePath,
-      collapsed,
-      mode: menuMode,
-      width: asideWidth,
-      onSelect: handleMenuSelect
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "tker-layout-aside__toggle-btn",
-      onClick: toggleCollapse
-    },
-    collapsed ? /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 16 16", fill: "none", width: "16", height: "16" }, /* @__PURE__ */ React.createElement(
-      "path",
+  return /* @__PURE__ */ jsxs("aside", { className: "tker-layout-aside", style: { width: asideWidth }, children: [
+    /* @__PURE__ */ jsx(
+      MenuAdapter,
       {
-        d: "M5.64645 3.14645C5.45118 3.34171 5.45118 3.65829 5.64645 3.85355L9.79289 8L5.64645 12.1464C5.45118 12.3417 5.45118 12.6583 5.64645 12.8536C5.84171 13.0488 6.15829 13.0488 6.35355 12.8536L10.8536 8.35355C11.0488 8.15829 11.0488 7.84171 10.8536 7.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645Z",
-        fill: "currentColor"
+        menuData,
+        activePath,
+        collapsed,
+        mode: menuMode,
+        width: asideWidth,
+        onSelect: handleMenuSelect
       }
-    )) : /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 16 16", fill: "none", width: "16", height: "16" }, /* @__PURE__ */ React.createElement(
-      "path",
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
       {
-        d: "M10.3536 3.14645C10.5488 3.34171 10.5488 3.65829 10.3536 3.85355L6.20711 8L10.3536 12.1464C10.5488 12.3417 10.5488 12.6583 10.3536 12.8536C10.1583 13.0488 9.84171 13.0488 9.64645 12.8536L5.14645 8.35355C4.95118 8.15829 4.95118 7.84171 5.14645 7.64645L9.64645 3.14645C9.84171 2.95118 10.1583 2.95118 10.3536 3.14645Z",
-        fill: "currentColor"
+        className: "tker-layout-aside__toggle-btn",
+        onClick: toggleCollapse,
+        children: collapsed ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", width: "16", height: "16", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M5.64645 3.14645C5.45118 3.34171 5.45118 3.65829 5.64645 3.85355L9.79289 8L5.64645 12.1464C5.45118 12.3417 5.45118 12.6583 5.64645 12.8536C5.84171 13.0488 6.15829 13.0488 6.35355 12.8536L10.8536 8.35355C11.0488 8.15829 11.0488 7.84171 10.8536 7.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645Z",
+            fill: "currentColor"
+          }
+        ) }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", width: "16", height: "16", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10.3536 3.14645C10.5488 3.34171 10.5488 3.65829 10.3536 3.85355L6.20711 8L10.3536 12.1464C10.5488 12.3417 10.5488 12.6583 10.3536 12.8536C10.1583 13.0488 9.84171 13.0488 9.64645 12.8536L5.14645 8.35355C4.95118 8.15829 4.95118 7.84171 5.14645 7.64645L9.64645 3.14645C9.84171 2.95118 10.1583 2.95118 10.3536 3.14645Z",
+            fill: "currentColor"
+          }
+        ) })
       }
-    ))
-  ));
+    )
+  ] });
 }
 
 function LayoutContent({ children }) {
@@ -354,19 +358,22 @@ function LayoutContent({ children }) {
     setRefreshKey((k) => k + 1);
   }, []);
   const TabAdapter = adapters.tab;
-  return /* @__PURE__ */ React.createElement("main", { className: "tker-layout-content" }, !isTopMenu && TabAdapter && /* @__PURE__ */ React.createElement(
-    TabAdapter,
-    {
-      tabData,
-      activeTab,
-      onSelect: handleTabSelect,
-      onClose: handleTabClose,
-      onCloseOther: handleCloseOtherTabs,
-      onCloseAll: handleCloseAllTabs,
-      onRefresh: handleRefresh,
-      onSetFixed: handleSetFixed
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "tker-layout-content__body", key: refreshKey }, children));
+  return /* @__PURE__ */ jsxs("main", { className: "tker-layout-content", children: [
+    !isTopMenu && TabAdapter && /* @__PURE__ */ jsx(
+      TabAdapter,
+      {
+        tabData,
+        activeTab,
+        onSelect: handleTabSelect,
+        onClose: handleTabClose,
+        onCloseOther: handleCloseOtherTabs,
+        onCloseAll: handleCloseAllTabs,
+        onRefresh: handleRefresh,
+        onSetFixed: handleSetFixed
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "tker-layout-content__body", children }, refreshKey)
+  ] });
 }
 function openTabInData(tabData, path, config) {
   const { homePath, maxTabs, menuData } = config;
@@ -454,39 +461,55 @@ function LayoutHeader() {
   const BreadcrumbAdapter = adapters.breadcrumb;
   const ToolbarAdapter = adapters.toolbar;
   const UserAvatarAdapter = adapters.userAvatar;
-  return /* @__PURE__ */ React.createElement("header", { className: "tker-layout-header" }, /* @__PURE__ */ React.createElement("div", { className: "tker-layout-header__left" }, LogoAdapter && leftContent.includes("logo") && /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: "tker-layout-header__left-logo",
-      style: { width: logoWidth }
-    },
-    /* @__PURE__ */ React.createElement(LogoAdapter, { collapsed, width: logoWidth })
-  ), MenuAdapter && isTopMenu && /* @__PURE__ */ React.createElement(
-    MenuAdapter,
-    {
-      menuData,
-      activePath,
-      collapsed: false,
-      mode: "top",
-      width: logoWidth,
-      onSelect: handleMenuSelect
-    }
-  ), BreadcrumbAdapter && isSideMenu && /* @__PURE__ */ React.createElement(
-    BreadcrumbAdapter,
-    {
-      breadcrumbData,
-      onSelect: handleBreadcrumbSelect
-    }
-  )), /* @__PURE__ */ React.createElement("div", { className: "tker-layout-header__right" }, ToolbarAdapter && /* @__PURE__ */ React.createElement(ToolbarAdapter, null), UserAvatarAdapter && /* @__PURE__ */ React.createElement(UserAvatarAdapter, null)));
+  return /* @__PURE__ */ jsxs("header", { className: "tker-layout-header", children: [
+    /* @__PURE__ */ jsxs("div", { className: "tker-layout-header__left", children: [
+      LogoAdapter && leftContent.includes("logo") && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "tker-layout-header__left-logo",
+          style: { width: logoWidth },
+          children: /* @__PURE__ */ jsx(LogoAdapter, { collapsed, width: logoWidth })
+        }
+      ),
+      MenuAdapter && isTopMenu && /* @__PURE__ */ jsx(
+        MenuAdapter,
+        {
+          menuData,
+          activePath,
+          collapsed: false,
+          mode: "top",
+          width: logoWidth,
+          onSelect: handleMenuSelect
+        }
+      ),
+      BreadcrumbAdapter && isSideMenu && /* @__PURE__ */ jsx(
+        BreadcrumbAdapter,
+        {
+          breadcrumbData,
+          onSelect: handleBreadcrumbSelect
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "tker-layout-header__right", children: [
+      ToolbarAdapter && /* @__PURE__ */ jsx(ToolbarAdapter, {}),
+      UserAvatarAdapter && /* @__PURE__ */ jsx(UserAvatarAdapter, {})
+    ] })
+  ] });
 }
 
 function LayoutInner({ children }) {
   const { layoutMode } = useLayoutContext();
   const isSideMenu = layoutMode === "side-menu";
-  return /* @__PURE__ */ React.createElement("div", { className: "tker-layout" }, /* @__PURE__ */ React.createElement(LayoutHeader, null), /* @__PURE__ */ React.createElement("div", { className: "tker-layout__body" }, isSideMenu && /* @__PURE__ */ React.createElement(LayoutAside, null), /* @__PURE__ */ React.createElement(LayoutContent, null, children)));
+  return /* @__PURE__ */ jsxs("div", { className: "tker-layout", children: [
+    /* @__PURE__ */ jsx(LayoutHeader, {}),
+    /* @__PURE__ */ jsxs("div", { className: "tker-layout__body", children: [
+      isSideMenu && /* @__PURE__ */ jsx(LayoutAside, {}),
+      /* @__PURE__ */ jsx(LayoutContent, { children })
+    ] })
+  ] });
 }
 function Layout({ children }) {
-  return /* @__PURE__ */ React.createElement(LayoutProvider, null, /* @__PURE__ */ React.createElement(LayoutInner, null, children));
+  return /* @__PURE__ */ jsx(LayoutProvider, { children: /* @__PURE__ */ jsx(LayoutInner, { children }) });
 }
 
 export { Layout, LayoutProvider, useLayoutContext as useLayout, useLayoutContext };

package/dist/layout.css

@@ -32,9 +32,14 @@
     gap: 12px;
 }
 
+.tker-layout-header__left{
+    height: 100%;
+}
+
 .tker-layout-header__left-logo {
     height: 100%;
     border-right: 1px solid #e8e8e8;
+    transition: width 0.3s;
 }
 
 /* === Aside === */
@@ -48,7 +53,6 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    overflow: hidden;
 }
 
 .tker-layout-aside__toggle-btn {

package/package.json

@@ -1,43 +1,36 @@
 {
-    "name": "@tker-react/layout",
-    "version": "0.2.1",
-    "private": false,
-    "license": "MIT",
-    "type": "module",
-    "scripts": {
-        "build": "pnpm unbuild"
-    },
-    "files": [
-        "dist"
-    ],
-    "sideEffects": [
-        "**/*.css"
-    ],
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "development": "./src/index.ts",
-            "default": "./dist/index.mjs"
-        }
-    },
-    "publishConfig": {
-        "access": "public",
-        "exports": {
-            ".": {
-                "types": "./dist/index.d.ts",
-                "default": "./dist/index.mjs"
-            }
-        }
-    },
-    "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
-    },
-    "devDependencies": {
-        "@tker-react/tsconfig": "workspace:*",
-        "@types/react": "catalog:",
-        "@types/react-dom": "catalog:",
-        "react": "catalog:",
-        "react-dom": "catalog:"
+  "name": "@tker-react/layout",
+  "version": "0.2.3",
+  "private": false,
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
     }
-}
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "@tker-react/tsconfig": "0.0.1"
+  },
+  "scripts": {
+    "build": "pnpm unbuild"
+  }
+}