@tker-react/layout 0.2.0 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.mjs +89 -66
  2. package/dist/layout.css +6 -1
  3. package/package.json +5 -12
package/dist/index.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  import "./layout.css";
2
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
3
  import { createContext, useContext, useRef, useCallback, useState, useMemo, useEffect } from 'react';
3
4
 
4
5
  function findMenuItemByPath(menuData, path) {
@@ -192,7 +193,7 @@ function LayoutProvider({ children }) {
192
193
  setMaxTabs
193
194
  ]
194
195
  );
195
- return /* @__PURE__ */ React.createElement(LayoutContext.Provider, { value }, children);
196
+ return /* @__PURE__ */ jsx(LayoutContext.Provider, { value, children });
196
197
  }
197
198
 
198
199
  function LayoutAside() {
@@ -220,36 +221,39 @@ function LayoutAside() {
220
221
  const MenuAdapter = adapters.menu;
221
222
  if (!MenuAdapter) return null;
222
223
  const asideWidth = collapsed ? collapsedWidth : expandedWidth;
223
- return /* @__PURE__ */ React.createElement("aside", { className: "tker-layout-aside", style: { width: asideWidth } }, /* @__PURE__ */ React.createElement(
224
- MenuAdapter,
225
- {
226
- menuData,
227
- activePath,
228
- collapsed,
229
- mode: menuMode,
230
- width: asideWidth,
231
- onSelect: handleMenuSelect
232
- }
233
- ), /* @__PURE__ */ React.createElement(
234
- "div",
235
- {
236
- className: "tker-layout-aside__toggle-btn",
237
- onClick: toggleCollapse
238
- },
239
- collapsed ? /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 16 16", fill: "none", width: "16", height: "16" }, /* @__PURE__ */ React.createElement(
240
- "path",
224
+ return /* @__PURE__ */ jsxs("aside", { className: "tker-layout-aside", style: { width: asideWidth }, children: [
225
+ /* @__PURE__ */ jsx(
226
+ MenuAdapter,
241
227
  {
242
- 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",
243
- fill: "currentColor"
228
+ menuData,
229
+ activePath,
230
+ collapsed,
231
+ mode: menuMode,
232
+ width: asideWidth,
233
+ onSelect: handleMenuSelect
244
234
  }
245
- )) : /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 16 16", fill: "none", width: "16", height: "16" }, /* @__PURE__ */ React.createElement(
246
- "path",
235
+ ),
236
+ /* @__PURE__ */ jsx(
237
+ "div",
247
238
  {
248
- 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",
249
- fill: "currentColor"
239
+ className: "tker-layout-aside__toggle-btn",
240
+ onClick: toggleCollapse,
241
+ children: collapsed ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", width: "16", height: "16", children: /* @__PURE__ */ jsx(
242
+ "path",
243
+ {
244
+ 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",
245
+ fill: "currentColor"
246
+ }
247
+ ) }) : /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", width: "16", height: "16", children: /* @__PURE__ */ jsx(
248
+ "path",
249
+ {
250
+ 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",
251
+ fill: "currentColor"
252
+ }
253
+ ) })
250
254
  }
251
- ))
252
- ));
255
+ )
256
+ ] });
253
257
  }
254
258
 
255
259
  function LayoutContent({ children }) {
@@ -354,19 +358,22 @@ function LayoutContent({ children }) {
354
358
  setRefreshKey((k) => k + 1);
355
359
  }, []);
356
360
  const TabAdapter = adapters.tab;
357
- return /* @__PURE__ */ React.createElement("main", { className: "tker-layout-content" }, !isTopMenu && TabAdapter && /* @__PURE__ */ React.createElement(
358
- TabAdapter,
359
- {
360
- tabData,
361
- activeTab,
362
- onSelect: handleTabSelect,
363
- onClose: handleTabClose,
364
- onCloseOther: handleCloseOtherTabs,
365
- onCloseAll: handleCloseAllTabs,
366
- onRefresh: handleRefresh,
367
- onSetFixed: handleSetFixed
368
- }
369
- ), /* @__PURE__ */ React.createElement("div", { className: "tker-layout-content__body", key: refreshKey }, children));
361
+ return /* @__PURE__ */ jsxs("main", { className: "tker-layout-content", children: [
362
+ !isTopMenu && TabAdapter && /* @__PURE__ */ jsx(
363
+ TabAdapter,
364
+ {
365
+ tabData,
366
+ activeTab,
367
+ onSelect: handleTabSelect,
368
+ onClose: handleTabClose,
369
+ onCloseOther: handleCloseOtherTabs,
370
+ onCloseAll: handleCloseAllTabs,
371
+ onRefresh: handleRefresh,
372
+ onSetFixed: handleSetFixed
373
+ }
374
+ ),
375
+ /* @__PURE__ */ jsx("div", { className: "tker-layout-content__body", children }, refreshKey)
376
+ ] });
370
377
  }
371
378
  function openTabInData(tabData, path, config) {
372
379
  const { homePath, maxTabs, menuData } = config;
@@ -454,39 +461,55 @@ function LayoutHeader() {
454
461
  const BreadcrumbAdapter = adapters.breadcrumb;
455
462
  const ToolbarAdapter = adapters.toolbar;
456
463
  const UserAvatarAdapter = adapters.userAvatar;
457
- 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(
458
- "div",
459
- {
460
- className: "tker-layout-header__left-logo",
461
- style: { width: logoWidth }
462
- },
463
- /* @__PURE__ */ React.createElement(LogoAdapter, { collapsed, width: logoWidth })
464
- ), MenuAdapter && isTopMenu && /* @__PURE__ */ React.createElement(
465
- MenuAdapter,
466
- {
467
- menuData,
468
- activePath,
469
- collapsed: false,
470
- mode: "top",
471
- width: logoWidth,
472
- onSelect: handleMenuSelect
473
- }
474
- ), BreadcrumbAdapter && isSideMenu && /* @__PURE__ */ React.createElement(
475
- BreadcrumbAdapter,
476
- {
477
- breadcrumbData,
478
- onSelect: handleBreadcrumbSelect
479
- }
480
- )), /* @__PURE__ */ React.createElement("div", { className: "tker-layout-header__right" }, ToolbarAdapter && /* @__PURE__ */ React.createElement(ToolbarAdapter, null), UserAvatarAdapter && /* @__PURE__ */ React.createElement(UserAvatarAdapter, null)));
464
+ return /* @__PURE__ */ jsxs("header", { className: "tker-layout-header", children: [
465
+ /* @__PURE__ */ jsxs("div", { className: "tker-layout-header__left", children: [
466
+ LogoAdapter && leftContent.includes("logo") && /* @__PURE__ */ jsx(
467
+ "div",
468
+ {
469
+ className: "tker-layout-header__left-logo",
470
+ style: { width: logoWidth },
471
+ children: /* @__PURE__ */ jsx(LogoAdapter, { collapsed, width: logoWidth })
472
+ }
473
+ ),
474
+ MenuAdapter && isTopMenu && /* @__PURE__ */ jsx(
475
+ MenuAdapter,
476
+ {
477
+ menuData,
478
+ activePath,
479
+ collapsed: false,
480
+ mode: "top",
481
+ width: logoWidth,
482
+ onSelect: handleMenuSelect
483
+ }
484
+ ),
485
+ BreadcrumbAdapter && isSideMenu && /* @__PURE__ */ jsx(
486
+ BreadcrumbAdapter,
487
+ {
488
+ breadcrumbData,
489
+ onSelect: handleBreadcrumbSelect
490
+ }
491
+ )
492
+ ] }),
493
+ /* @__PURE__ */ jsxs("div", { className: "tker-layout-header__right", children: [
494
+ ToolbarAdapter && /* @__PURE__ */ jsx(ToolbarAdapter, {}),
495
+ UserAvatarAdapter && /* @__PURE__ */ jsx(UserAvatarAdapter, {})
496
+ ] })
497
+ ] });
481
498
  }
482
499
 
483
500
  function LayoutInner({ children }) {
484
501
  const { layoutMode } = useLayoutContext();
485
502
  const isSideMenu = layoutMode === "side-menu";
486
- 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)));
503
+ return /* @__PURE__ */ jsxs("div", { className: "tker-layout", children: [
504
+ /* @__PURE__ */ jsx(LayoutHeader, {}),
505
+ /* @__PURE__ */ jsxs("div", { className: "tker-layout__body", children: [
506
+ isSideMenu && /* @__PURE__ */ jsx(LayoutAside, {}),
507
+ /* @__PURE__ */ jsx(LayoutContent, { children })
508
+ ] })
509
+ ] });
487
510
  }
488
511
  function Layout({ children }) {
489
- return /* @__PURE__ */ React.createElement(LayoutProvider, null, /* @__PURE__ */ React.createElement(LayoutInner, null, children));
512
+ return /* @__PURE__ */ jsx(LayoutProvider, { children: /* @__PURE__ */ jsx(LayoutInner, { children }) });
490
513
  }
491
514
 
492
515
  export { Layout, LayoutProvider, useLayoutContext as useLayout, useLayoutContext };
package/dist/layout.css CHANGED
@@ -32,8 +32,14 @@
32
32
  gap: 12px;
33
33
  }
34
34
 
35
+ .tker-layout-header__left{
36
+ height: 100%;
37
+ }
38
+
35
39
  .tker-layout-header__left-logo {
40
+ height: 100%;
36
41
  border-right: 1px solid #e8e8e8;
42
+ transition: width 0.3s;
37
43
  }
38
44
 
39
45
  /* === Aside === */
@@ -47,7 +53,6 @@
47
53
  position: relative;
48
54
  display: flex;
49
55
  flex-direction: column;
50
- overflow: hidden;
51
56
  }
52
57
 
53
58
  .tker-layout-aside__toggle-btn {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tker-react/layout",
3
- "version": "0.2.0",
3
+ "version": "0.2.2",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -18,10 +18,6 @@
18
18
  "types": "./dist/index.d.ts",
19
19
  "development": "./src/index.ts",
20
20
  "default": "./dist/index.mjs"
21
- },
22
- "./layout.css": {
23
- "development": "./src/styles/layout.css",
24
- "default": "./dist/layout.css"
25
21
  }
26
22
  },
27
23
  "publishConfig": {
@@ -30,9 +26,6 @@
30
26
  ".": {
31
27
  "types": "./dist/index.d.ts",
32
28
  "default": "./dist/index.mjs"
33
- },
34
- "./layout.css": {
35
- "default": "./dist/layout.css"
36
29
  }
37
30
  }
38
31
  },
@@ -42,9 +35,9 @@
42
35
  },
43
36
  "devDependencies": {
44
37
  "@tker-react/tsconfig": "workspace:*",
45
- "@types/react": "^19.0.0",
46
- "@types/react-dom": "^19.0.0",
47
- "react": "^19.0.0",
48
- "react-dom": "^19.0.0"
38
+ "@types/react": "catalog:",
39
+ "@types/react-dom": "catalog:",
40
+ "react": "catalog:",
41
+ "react-dom": "catalog:"
49
42
  }
50
43
  }