@kopexa/split-page-layout 17.0.89 → 17.1.0
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.
- package/dist/{chunk-DVM5IUMK.mjs → chunk-BVXLTQNV.mjs} +31 -44
- package/dist/index.d.mts +1 -2
- package/dist/index.d.ts +1 -2
- package/dist/index.js +33 -43
- package/dist/index.mjs +5 -3
- package/dist/split-page-layout.d.mts +38 -8
- package/dist/split-page-layout.d.ts +38 -8
- package/dist/split-page-layout.js +34 -43
- package/dist/split-page-layout.mjs +6 -3
- package/package.json +9 -9
|
@@ -5,22 +5,19 @@ import { IconButton } from "@kopexa/button";
|
|
|
5
5
|
import { Drawer } from "@kopexa/drawer";
|
|
6
6
|
import { PanelLeftIcon } from "@kopexa/icons";
|
|
7
7
|
import { createContext } from "@kopexa/react-utils";
|
|
8
|
-
import {
|
|
9
|
-
Resizable
|
|
10
|
-
} from "@kopexa/resizable";
|
|
11
8
|
import {
|
|
12
9
|
splitPageLayout
|
|
13
10
|
} from "@kopexa/theme";
|
|
14
11
|
import { useIsMobile } from "@kopexa/use-is-mobile";
|
|
15
12
|
import { useCallback, useMemo, useState } from "react";
|
|
16
|
-
import {
|
|
13
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
17
14
|
var [Provider, useProvider] = createContext();
|
|
18
15
|
var SplitPageLayoutRoot = (props) => {
|
|
19
16
|
const {
|
|
20
17
|
className,
|
|
21
18
|
children,
|
|
22
19
|
inset,
|
|
23
|
-
defaultOpen =
|
|
20
|
+
defaultOpen = true,
|
|
24
21
|
open: openProp,
|
|
25
22
|
onOpenChange: setOpenProp,
|
|
26
23
|
...rest
|
|
@@ -56,41 +53,45 @@ var SplitPageLayoutRoot = (props) => {
|
|
|
56
53
|
}),
|
|
57
54
|
[styles, open, setOpen, isMobile, openMobile, toggleSidebar]
|
|
58
55
|
);
|
|
59
|
-
return /* @__PURE__ */ jsx(Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
|
|
60
|
-
Resizable,
|
|
61
|
-
{
|
|
62
|
-
className: styles.root({
|
|
63
|
-
className
|
|
64
|
-
}),
|
|
65
|
-
...rest,
|
|
66
|
-
direction: "horizontal",
|
|
67
|
-
children
|
|
68
|
-
}
|
|
69
|
-
) });
|
|
56
|
+
return /* @__PURE__ */ jsx(Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: styles.root({ className }), ...rest, children }) });
|
|
70
57
|
};
|
|
71
58
|
var SplitPageLayoutContent = ({
|
|
72
59
|
className,
|
|
73
60
|
children,
|
|
61
|
+
// legacy resize props — ignored
|
|
62
|
+
defaultSize: _defaultSize,
|
|
63
|
+
minSize: _minSize,
|
|
64
|
+
maxSize: _maxSize,
|
|
65
|
+
order: _order,
|
|
66
|
+
collapsible: _collapsible,
|
|
67
|
+
collapsedSize: _collapsedSize,
|
|
74
68
|
...props
|
|
75
69
|
}) => {
|
|
76
|
-
const { styles } = useProvider();
|
|
77
|
-
|
|
70
|
+
const { styles, open, isMobile } = useProvider();
|
|
71
|
+
const elevated = open && !isMobile;
|
|
72
|
+
return /* @__PURE__ */ jsx("div", { className: styles.content({ elevated, className }), ...props, children: /* @__PURE__ */ jsx("div", { className: styles.contentBody(), children }) });
|
|
78
73
|
};
|
|
79
74
|
var SplitPageLayoutPanel = ({
|
|
80
75
|
className,
|
|
81
76
|
children,
|
|
77
|
+
defaultSize: _defaultSize,
|
|
78
|
+
minSize: _minSize,
|
|
79
|
+
maxSize: _maxSize,
|
|
80
|
+
order: _order,
|
|
81
|
+
collapsible: _collapsible,
|
|
82
|
+
collapsedSize: _collapsedSize,
|
|
82
83
|
...props
|
|
83
84
|
}) => {
|
|
84
|
-
const { styles, isMobile, openMobile, setOpenMobile } = useProvider();
|
|
85
|
+
const { styles, isMobile, open, openMobile, setOpenMobile } = useProvider();
|
|
85
86
|
if (isMobile) {
|
|
86
87
|
return /* @__PURE__ */ jsxs("div", { className: styles.mobileWrapper(), children: [
|
|
87
88
|
/* @__PURE__ */ jsx("div", { className: styles.mobileContainer(), children: /* @__PURE__ */ jsx(
|
|
88
89
|
IconButton,
|
|
89
90
|
{
|
|
90
|
-
variant: "
|
|
91
|
-
|
|
92
|
-
"aria-label": "Toggle panel",
|
|
91
|
+
variant: "solid",
|
|
92
|
+
"aria-label": "Details anzeigen",
|
|
93
93
|
onClick: () => setOpenMobile(true),
|
|
94
|
+
className: "size-12 rounded-full shadow-lg",
|
|
94
95
|
children: /* @__PURE__ */ jsx(PanelLeftIcon, {})
|
|
95
96
|
}
|
|
96
97
|
) }),
|
|
@@ -101,44 +102,30 @@ var SplitPageLayoutPanel = ({
|
|
|
101
102
|
onOpenChange: setOpenMobile,
|
|
102
103
|
placement: "right",
|
|
103
104
|
size: "full",
|
|
104
|
-
...props,
|
|
105
105
|
children: /* @__PURE__ */ jsxs(Drawer.Content, { showCloseButton: true, children: [
|
|
106
106
|
/* @__PURE__ */ jsxs(Drawer.Header, { className: "sr-only", children: [
|
|
107
107
|
/* @__PURE__ */ jsx(Drawer.Title, { children: "Panel" }),
|
|
108
108
|
/* @__PURE__ */ jsx(Drawer.Description, { children: "Displays the mobile panel." })
|
|
109
109
|
] }),
|
|
110
|
-
/* @__PURE__ */ jsx("div", { className: styles.
|
|
110
|
+
/* @__PURE__ */ jsx("div", { className: styles.panel(), children: /* @__PURE__ */ jsx("div", { className: styles.panelBody(), children }) })
|
|
111
111
|
] })
|
|
112
112
|
}
|
|
113
113
|
)
|
|
114
114
|
] });
|
|
115
115
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
/* @__PURE__ */ jsx(
|
|
119
|
-
Resizable.Panel,
|
|
120
|
-
{
|
|
121
|
-
className: styles.panelContainer({ className }),
|
|
122
|
-
defaultSize: 33,
|
|
123
|
-
minSize: 30,
|
|
124
|
-
maxSize: 50,
|
|
125
|
-
order: 2,
|
|
126
|
-
...props,
|
|
127
|
-
children: /* @__PURE__ */ jsx("div", { className: styles.panel(), children: /* @__PURE__ */ jsx("div", { className: styles.panelBody(), children }) })
|
|
128
|
-
}
|
|
129
|
-
)
|
|
130
|
-
] });
|
|
116
|
+
if (!open) return null;
|
|
117
|
+
return /* @__PURE__ */ jsx("aside", { className: styles.panelContainer({ className }), ...props, children: /* @__PURE__ */ jsx("div", { className: styles.panel(), children: /* @__PURE__ */ jsx("div", { className: styles.panelBody(), children }) }) });
|
|
131
118
|
};
|
|
132
119
|
var PageLayoutBleed = ({ className, ...props }) => {
|
|
133
120
|
const { styles } = useProvider();
|
|
134
121
|
return /* @__PURE__ */ jsx("div", { className: styles.bleed({ className }), ...props });
|
|
135
122
|
};
|
|
136
|
-
var SplitPageLayout =
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
});
|
|
123
|
+
var SplitPageLayout = SplitPageLayoutRoot;
|
|
124
|
+
SplitPageLayout.Content = SplitPageLayoutContent;
|
|
125
|
+
SplitPageLayout.Panel = SplitPageLayoutPanel;
|
|
126
|
+
SplitPageLayout.Bleed = PageLayoutBleed;
|
|
141
127
|
|
|
142
128
|
export {
|
|
129
|
+
useProvider,
|
|
143
130
|
SplitPageLayout
|
|
144
131
|
};
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
export { SplitPageLayout, SplitPageLayoutProps } from './split-page-layout.mjs';
|
|
1
|
+
export { SplitPageLayout, SplitPageLayoutProps, useSplitPageLayout } from './split-page-layout.mjs';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
|
-
import '@kopexa/resizable';
|
|
4
3
|
import '@kopexa/theme';
|
|
5
4
|
import 'react';
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
export { SplitPageLayout, SplitPageLayoutProps } from './split-page-layout.js';
|
|
1
|
+
export { SplitPageLayout, SplitPageLayoutProps, useSplitPageLayout } from './split-page-layout.js';
|
|
2
2
|
import 'react/jsx-runtime';
|
|
3
|
-
import '@kopexa/resizable';
|
|
4
3
|
import '@kopexa/theme';
|
|
5
4
|
import 'react';
|
package/dist/index.js
CHANGED
|
@@ -21,7 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
// src/index.ts
|
|
22
22
|
var index_exports = {};
|
|
23
23
|
__export(index_exports, {
|
|
24
|
-
SplitPageLayout: () => SplitPageLayout
|
|
24
|
+
SplitPageLayout: () => SplitPageLayout,
|
|
25
|
+
useSplitPageLayout: () => useProvider
|
|
25
26
|
});
|
|
26
27
|
module.exports = __toCommonJS(index_exports);
|
|
27
28
|
|
|
@@ -30,7 +31,6 @@ var import_button = require("@kopexa/button");
|
|
|
30
31
|
var import_drawer = require("@kopexa/drawer");
|
|
31
32
|
var import_icons = require("@kopexa/icons");
|
|
32
33
|
var import_react_utils = require("@kopexa/react-utils");
|
|
33
|
-
var import_resizable = require("@kopexa/resizable");
|
|
34
34
|
var import_theme = require("@kopexa/theme");
|
|
35
35
|
var import_use_is_mobile = require("@kopexa/use-is-mobile");
|
|
36
36
|
var import_react = require("react");
|
|
@@ -41,7 +41,7 @@ var SplitPageLayoutRoot = (props) => {
|
|
|
41
41
|
className,
|
|
42
42
|
children,
|
|
43
43
|
inset,
|
|
44
|
-
defaultOpen =
|
|
44
|
+
defaultOpen = true,
|
|
45
45
|
open: openProp,
|
|
46
46
|
onOpenChange: setOpenProp,
|
|
47
47
|
...rest
|
|
@@ -77,41 +77,45 @@ var SplitPageLayoutRoot = (props) => {
|
|
|
77
77
|
}),
|
|
78
78
|
[styles, open, setOpen, isMobile, openMobile, toggleSidebar]
|
|
79
79
|
);
|
|
80
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
81
|
-
import_resizable.Resizable,
|
|
82
|
-
{
|
|
83
|
-
className: styles.root({
|
|
84
|
-
className
|
|
85
|
-
}),
|
|
86
|
-
...rest,
|
|
87
|
-
direction: "horizontal",
|
|
88
|
-
children
|
|
89
|
-
}
|
|
90
|
-
) });
|
|
80
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.root({ className }), ...rest, children }) });
|
|
91
81
|
};
|
|
92
82
|
var SplitPageLayoutContent = ({
|
|
93
83
|
className,
|
|
94
84
|
children,
|
|
85
|
+
// legacy resize props — ignored
|
|
86
|
+
defaultSize: _defaultSize,
|
|
87
|
+
minSize: _minSize,
|
|
88
|
+
maxSize: _maxSize,
|
|
89
|
+
order: _order,
|
|
90
|
+
collapsible: _collapsible,
|
|
91
|
+
collapsedSize: _collapsedSize,
|
|
95
92
|
...props
|
|
96
93
|
}) => {
|
|
97
|
-
const { styles } = useProvider();
|
|
98
|
-
|
|
94
|
+
const { styles, open, isMobile } = useProvider();
|
|
95
|
+
const elevated = open && !isMobile;
|
|
96
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content({ elevated, className }), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.contentBody(), children }) });
|
|
99
97
|
};
|
|
100
98
|
var SplitPageLayoutPanel = ({
|
|
101
99
|
className,
|
|
102
100
|
children,
|
|
101
|
+
defaultSize: _defaultSize,
|
|
102
|
+
minSize: _minSize,
|
|
103
|
+
maxSize: _maxSize,
|
|
104
|
+
order: _order,
|
|
105
|
+
collapsible: _collapsible,
|
|
106
|
+
collapsedSize: _collapsedSize,
|
|
103
107
|
...props
|
|
104
108
|
}) => {
|
|
105
|
-
const { styles, isMobile, openMobile, setOpenMobile } = useProvider();
|
|
109
|
+
const { styles, isMobile, open, openMobile, setOpenMobile } = useProvider();
|
|
106
110
|
if (isMobile) {
|
|
107
111
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.mobileWrapper(), children: [
|
|
108
112
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.mobileContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
109
113
|
import_button.IconButton,
|
|
110
114
|
{
|
|
111
|
-
variant: "
|
|
112
|
-
|
|
113
|
-
"aria-label": "Toggle panel",
|
|
115
|
+
variant: "solid",
|
|
116
|
+
"aria-label": "Details anzeigen",
|
|
114
117
|
onClick: () => setOpenMobile(true),
|
|
118
|
+
className: "size-12 rounded-full shadow-lg",
|
|
115
119
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PanelLeftIcon, {})
|
|
116
120
|
}
|
|
117
121
|
) }),
|
|
@@ -122,44 +126,30 @@ var SplitPageLayoutPanel = ({
|
|
|
122
126
|
onOpenChange: setOpenMobile,
|
|
123
127
|
placement: "right",
|
|
124
128
|
size: "full",
|
|
125
|
-
...props,
|
|
126
129
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.Drawer.Content, { showCloseButton: true, children: [
|
|
127
130
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.Drawer.Header, { className: "sr-only", children: [
|
|
128
131
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.Drawer.Title, { children: "Panel" }),
|
|
129
132
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.Drawer.Description, { children: "Displays the mobile panel." })
|
|
130
133
|
] }),
|
|
131
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.
|
|
134
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) })
|
|
132
135
|
] })
|
|
133
136
|
}
|
|
134
137
|
)
|
|
135
138
|
] });
|
|
136
139
|
}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
140
|
-
import_resizable.Resizable.Panel,
|
|
141
|
-
{
|
|
142
|
-
className: styles.panelContainer({ className }),
|
|
143
|
-
defaultSize: 33,
|
|
144
|
-
minSize: 30,
|
|
145
|
-
maxSize: 50,
|
|
146
|
-
order: 2,
|
|
147
|
-
...props,
|
|
148
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) })
|
|
149
|
-
}
|
|
150
|
-
)
|
|
151
|
-
] });
|
|
140
|
+
if (!open) return null;
|
|
141
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: styles.panelContainer({ className }), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) }) });
|
|
152
142
|
};
|
|
153
143
|
var PageLayoutBleed = ({ className, ...props }) => {
|
|
154
144
|
const { styles } = useProvider();
|
|
155
145
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.bleed({ className }), ...props });
|
|
156
146
|
};
|
|
157
|
-
var SplitPageLayout =
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
});
|
|
147
|
+
var SplitPageLayout = SplitPageLayoutRoot;
|
|
148
|
+
SplitPageLayout.Content = SplitPageLayoutContent;
|
|
149
|
+
SplitPageLayout.Panel = SplitPageLayoutPanel;
|
|
150
|
+
SplitPageLayout.Bleed = PageLayoutBleed;
|
|
162
151
|
// Annotate the CommonJS export names for ESM import in node:
|
|
163
152
|
0 && (module.exports = {
|
|
164
|
-
SplitPageLayout
|
|
153
|
+
SplitPageLayout,
|
|
154
|
+
useSplitPageLayout
|
|
165
155
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,18 +1,48 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
3
|
-
import { SplitPageLayoutVariantProps } from '@kopexa/theme';
|
|
2
|
+
import { SplitPageLayoutVariantProps, splitPageLayout } from '@kopexa/theme';
|
|
4
3
|
import { ComponentProps } from 'react';
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Split page layout: a main content area + a fixed-width side panel.
|
|
7
|
+
* - Desktop/tablet: content (flex-1) + panel (fixed width). When the panel is
|
|
8
|
+
* visible the content sits "elevated" (rounded top-right + shadow) above the
|
|
9
|
+
* recessed surround.
|
|
10
|
+
* - Mobile: the panel collapses into a right-side drawer toggled by a button.
|
|
11
|
+
*/
|
|
12
|
+
type SplitPageLayoutContext = {
|
|
13
|
+
styles: ReturnType<typeof splitPageLayout>;
|
|
14
|
+
open: boolean;
|
|
15
|
+
setOpen: (open: boolean) => void;
|
|
16
|
+
isMobile: boolean;
|
|
17
|
+
openMobile: boolean;
|
|
18
|
+
setOpenMobile: (open: boolean) => void;
|
|
19
|
+
toggleSidebar: () => void;
|
|
20
|
+
};
|
|
21
|
+
declare const useProvider: () => SplitPageLayoutContext;
|
|
22
|
+
type SplitPageLayoutProps = ComponentProps<"div"> & SplitPageLayoutVariantProps & {
|
|
23
|
+
/** Whether the side panel is visible by default (desktop). */
|
|
7
24
|
defaultOpen?: boolean;
|
|
8
25
|
open?: boolean;
|
|
9
26
|
onOpenChange?: (open: boolean) => void;
|
|
10
27
|
};
|
|
28
|
+
declare const SplitPageLayoutRoot: (props: SplitPageLayoutProps) => react_jsx_runtime.JSX.Element;
|
|
29
|
+
/** Props accepted on Content/Panel. Legacy resize props are tolerated + ignored. */
|
|
30
|
+
type SplitPanelProps = ComponentProps<"div"> & {
|
|
31
|
+
defaultSize?: number;
|
|
32
|
+
minSize?: number;
|
|
33
|
+
maxSize?: number;
|
|
34
|
+
order?: number;
|
|
35
|
+
collapsible?: boolean;
|
|
36
|
+
collapsedSize?: number;
|
|
37
|
+
};
|
|
38
|
+
declare const SplitPageLayoutContent: ({ className, children, defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, order: _order, collapsible: _collapsible, collapsedSize: _collapsedSize, ...props }: SplitPanelProps) => react_jsx_runtime.JSX.Element;
|
|
39
|
+
declare const SplitPageLayoutPanel: ({ className, children, defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, order: _order, collapsible: _collapsible, collapsedSize: _collapsedSize, ...props }: SplitPanelProps) => react_jsx_runtime.JSX.Element | null;
|
|
11
40
|
type PageLayoutBleedProps = ComponentProps<"div">;
|
|
12
|
-
declare const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
41
|
+
declare const PageLayoutBleed: ({ className, ...props }: PageLayoutBleedProps) => react_jsx_runtime.JSX.Element;
|
|
42
|
+
declare const SplitPageLayout: typeof SplitPageLayoutRoot & {
|
|
43
|
+
Content: typeof SplitPageLayoutContent;
|
|
44
|
+
Panel: typeof SplitPageLayoutPanel;
|
|
45
|
+
Bleed: typeof PageLayoutBleed;
|
|
16
46
|
};
|
|
17
47
|
|
|
18
|
-
export { SplitPageLayout, type SplitPageLayoutProps };
|
|
48
|
+
export { SplitPageLayout, type SplitPageLayoutProps, useProvider as useSplitPageLayout };
|
|
@@ -1,18 +1,48 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
3
|
-
import { SplitPageLayoutVariantProps } from '@kopexa/theme';
|
|
2
|
+
import { SplitPageLayoutVariantProps, splitPageLayout } from '@kopexa/theme';
|
|
4
3
|
import { ComponentProps } from 'react';
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
/**
|
|
6
|
+
* Split page layout: a main content area + a fixed-width side panel.
|
|
7
|
+
* - Desktop/tablet: content (flex-1) + panel (fixed width). When the panel is
|
|
8
|
+
* visible the content sits "elevated" (rounded top-right + shadow) above the
|
|
9
|
+
* recessed surround.
|
|
10
|
+
* - Mobile: the panel collapses into a right-side drawer toggled by a button.
|
|
11
|
+
*/
|
|
12
|
+
type SplitPageLayoutContext = {
|
|
13
|
+
styles: ReturnType<typeof splitPageLayout>;
|
|
14
|
+
open: boolean;
|
|
15
|
+
setOpen: (open: boolean) => void;
|
|
16
|
+
isMobile: boolean;
|
|
17
|
+
openMobile: boolean;
|
|
18
|
+
setOpenMobile: (open: boolean) => void;
|
|
19
|
+
toggleSidebar: () => void;
|
|
20
|
+
};
|
|
21
|
+
declare const useProvider: () => SplitPageLayoutContext;
|
|
22
|
+
type SplitPageLayoutProps = ComponentProps<"div"> & SplitPageLayoutVariantProps & {
|
|
23
|
+
/** Whether the side panel is visible by default (desktop). */
|
|
7
24
|
defaultOpen?: boolean;
|
|
8
25
|
open?: boolean;
|
|
9
26
|
onOpenChange?: (open: boolean) => void;
|
|
10
27
|
};
|
|
28
|
+
declare const SplitPageLayoutRoot: (props: SplitPageLayoutProps) => react_jsx_runtime.JSX.Element;
|
|
29
|
+
/** Props accepted on Content/Panel. Legacy resize props are tolerated + ignored. */
|
|
30
|
+
type SplitPanelProps = ComponentProps<"div"> & {
|
|
31
|
+
defaultSize?: number;
|
|
32
|
+
minSize?: number;
|
|
33
|
+
maxSize?: number;
|
|
34
|
+
order?: number;
|
|
35
|
+
collapsible?: boolean;
|
|
36
|
+
collapsedSize?: number;
|
|
37
|
+
};
|
|
38
|
+
declare const SplitPageLayoutContent: ({ className, children, defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, order: _order, collapsible: _collapsible, collapsedSize: _collapsedSize, ...props }: SplitPanelProps) => react_jsx_runtime.JSX.Element;
|
|
39
|
+
declare const SplitPageLayoutPanel: ({ className, children, defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, order: _order, collapsible: _collapsible, collapsedSize: _collapsedSize, ...props }: SplitPanelProps) => react_jsx_runtime.JSX.Element | null;
|
|
11
40
|
type PageLayoutBleedProps = ComponentProps<"div">;
|
|
12
|
-
declare const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
41
|
+
declare const PageLayoutBleed: ({ className, ...props }: PageLayoutBleedProps) => react_jsx_runtime.JSX.Element;
|
|
42
|
+
declare const SplitPageLayout: typeof SplitPageLayoutRoot & {
|
|
43
|
+
Content: typeof SplitPageLayoutContent;
|
|
44
|
+
Panel: typeof SplitPageLayoutPanel;
|
|
45
|
+
Bleed: typeof PageLayoutBleed;
|
|
16
46
|
};
|
|
17
47
|
|
|
18
|
-
export { SplitPageLayout, type SplitPageLayoutProps };
|
|
48
|
+
export { SplitPageLayout, type SplitPageLayoutProps, useProvider as useSplitPageLayout };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
"use strict";
|
|
3
|
+
"use client";
|
|
3
4
|
var __defProp = Object.defineProperty;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
6
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
@@ -21,14 +22,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
22
|
// src/split-page-layout.tsx
|
|
22
23
|
var split_page_layout_exports = {};
|
|
23
24
|
__export(split_page_layout_exports, {
|
|
24
|
-
SplitPageLayout: () => SplitPageLayout
|
|
25
|
+
SplitPageLayout: () => SplitPageLayout,
|
|
26
|
+
useSplitPageLayout: () => useProvider
|
|
25
27
|
});
|
|
26
28
|
module.exports = __toCommonJS(split_page_layout_exports);
|
|
27
29
|
var import_button = require("@kopexa/button");
|
|
28
30
|
var import_drawer = require("@kopexa/drawer");
|
|
29
31
|
var import_icons = require("@kopexa/icons");
|
|
30
32
|
var import_react_utils = require("@kopexa/react-utils");
|
|
31
|
-
var import_resizable = require("@kopexa/resizable");
|
|
32
33
|
var import_theme = require("@kopexa/theme");
|
|
33
34
|
var import_use_is_mobile = require("@kopexa/use-is-mobile");
|
|
34
35
|
var import_react = require("react");
|
|
@@ -39,7 +40,7 @@ var SplitPageLayoutRoot = (props) => {
|
|
|
39
40
|
className,
|
|
40
41
|
children,
|
|
41
42
|
inset,
|
|
42
|
-
defaultOpen =
|
|
43
|
+
defaultOpen = true,
|
|
43
44
|
open: openProp,
|
|
44
45
|
onOpenChange: setOpenProp,
|
|
45
46
|
...rest
|
|
@@ -75,41 +76,45 @@ var SplitPageLayoutRoot = (props) => {
|
|
|
75
76
|
}),
|
|
76
77
|
[styles, open, setOpen, isMobile, openMobile, toggleSidebar]
|
|
77
78
|
);
|
|
78
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
79
|
-
import_resizable.Resizable,
|
|
80
|
-
{
|
|
81
|
-
className: styles.root({
|
|
82
|
-
className
|
|
83
|
-
}),
|
|
84
|
-
...rest,
|
|
85
|
-
direction: "horizontal",
|
|
86
|
-
children
|
|
87
|
-
}
|
|
88
|
-
) });
|
|
79
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.root({ className }), ...rest, children }) });
|
|
89
80
|
};
|
|
90
81
|
var SplitPageLayoutContent = ({
|
|
91
82
|
className,
|
|
92
83
|
children,
|
|
84
|
+
// legacy resize props — ignored
|
|
85
|
+
defaultSize: _defaultSize,
|
|
86
|
+
minSize: _minSize,
|
|
87
|
+
maxSize: _maxSize,
|
|
88
|
+
order: _order,
|
|
89
|
+
collapsible: _collapsible,
|
|
90
|
+
collapsedSize: _collapsedSize,
|
|
93
91
|
...props
|
|
94
92
|
}) => {
|
|
95
|
-
const { styles } = useProvider();
|
|
96
|
-
|
|
93
|
+
const { styles, open, isMobile } = useProvider();
|
|
94
|
+
const elevated = open && !isMobile;
|
|
95
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content({ elevated, className }), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.contentBody(), children }) });
|
|
97
96
|
};
|
|
98
97
|
var SplitPageLayoutPanel = ({
|
|
99
98
|
className,
|
|
100
99
|
children,
|
|
100
|
+
defaultSize: _defaultSize,
|
|
101
|
+
minSize: _minSize,
|
|
102
|
+
maxSize: _maxSize,
|
|
103
|
+
order: _order,
|
|
104
|
+
collapsible: _collapsible,
|
|
105
|
+
collapsedSize: _collapsedSize,
|
|
101
106
|
...props
|
|
102
107
|
}) => {
|
|
103
|
-
const { styles, isMobile, openMobile, setOpenMobile } = useProvider();
|
|
108
|
+
const { styles, isMobile, open, openMobile, setOpenMobile } = useProvider();
|
|
104
109
|
if (isMobile) {
|
|
105
110
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.mobileWrapper(), children: [
|
|
106
111
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.mobileContainer(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
107
112
|
import_button.IconButton,
|
|
108
113
|
{
|
|
109
|
-
variant: "
|
|
110
|
-
|
|
111
|
-
"aria-label": "Toggle panel",
|
|
114
|
+
variant: "solid",
|
|
115
|
+
"aria-label": "Details anzeigen",
|
|
112
116
|
onClick: () => setOpenMobile(true),
|
|
117
|
+
className: "size-12 rounded-full shadow-lg",
|
|
113
118
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PanelLeftIcon, {})
|
|
114
119
|
}
|
|
115
120
|
) }),
|
|
@@ -120,44 +125,30 @@ var SplitPageLayoutPanel = ({
|
|
|
120
125
|
onOpenChange: setOpenMobile,
|
|
121
126
|
placement: "right",
|
|
122
127
|
size: "full",
|
|
123
|
-
...props,
|
|
124
128
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.Drawer.Content, { showCloseButton: true, children: [
|
|
125
129
|
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_drawer.Drawer.Header, { className: "sr-only", children: [
|
|
126
130
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.Drawer.Title, { children: "Panel" }),
|
|
127
131
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_drawer.Drawer.Description, { children: "Displays the mobile panel." })
|
|
128
132
|
] }),
|
|
129
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.
|
|
133
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) })
|
|
130
134
|
] })
|
|
131
135
|
}
|
|
132
136
|
)
|
|
133
137
|
] });
|
|
134
138
|
}
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
138
|
-
import_resizable.Resizable.Panel,
|
|
139
|
-
{
|
|
140
|
-
className: styles.panelContainer({ className }),
|
|
141
|
-
defaultSize: 33,
|
|
142
|
-
minSize: 30,
|
|
143
|
-
maxSize: 50,
|
|
144
|
-
order: 2,
|
|
145
|
-
...props,
|
|
146
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) })
|
|
147
|
-
}
|
|
148
|
-
)
|
|
149
|
-
] });
|
|
139
|
+
if (!open) return null;
|
|
140
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("aside", { className: styles.panelContainer({ className }), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panel(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.panelBody(), children }) }) });
|
|
150
141
|
};
|
|
151
142
|
var PageLayoutBleed = ({ className, ...props }) => {
|
|
152
143
|
const { styles } = useProvider();
|
|
153
144
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.bleed({ className }), ...props });
|
|
154
145
|
};
|
|
155
|
-
var SplitPageLayout =
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
});
|
|
146
|
+
var SplitPageLayout = SplitPageLayoutRoot;
|
|
147
|
+
SplitPageLayout.Content = SplitPageLayoutContent;
|
|
148
|
+
SplitPageLayout.Panel = SplitPageLayoutPanel;
|
|
149
|
+
SplitPageLayout.Bleed = PageLayoutBleed;
|
|
160
150
|
// Annotate the CommonJS export names for ESM import in node:
|
|
161
151
|
0 && (module.exports = {
|
|
162
|
-
SplitPageLayout
|
|
152
|
+
SplitPageLayout,
|
|
153
|
+
useSplitPageLayout
|
|
163
154
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kopexa/split-page-layout",
|
|
3
|
-
"version": "17.0
|
|
3
|
+
"version": "17.1.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"split-page-layout"
|
|
@@ -28,16 +28,16 @@
|
|
|
28
28
|
"react": ">=19.0.0-rc.0",
|
|
29
29
|
"react-dom": ">=19.0.0-rc.0",
|
|
30
30
|
"motion": ">=12.23.6",
|
|
31
|
-
"@kopexa/theme": "17.
|
|
31
|
+
"@kopexa/theme": "17.33.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@kopexa/
|
|
35
|
-
"@kopexa/
|
|
36
|
-
"@kopexa/use-is-mobile": "17.0.
|
|
37
|
-
"@kopexa/
|
|
38
|
-
"@kopexa/
|
|
39
|
-
"@kopexa/resizable": "17.0.
|
|
40
|
-
"@kopexa/
|
|
34
|
+
"@kopexa/shared-utils": "17.0.91",
|
|
35
|
+
"@kopexa/react-utils": "17.1.33",
|
|
36
|
+
"@kopexa/use-is-mobile": "17.0.91",
|
|
37
|
+
"@kopexa/drawer": "17.2.56",
|
|
38
|
+
"@kopexa/icons": "17.10.20",
|
|
39
|
+
"@kopexa/resizable": "17.0.91",
|
|
40
|
+
"@kopexa/button": "17.0.91"
|
|
41
41
|
},
|
|
42
42
|
"clean-package": "../../../clean-package.config.json",
|
|
43
43
|
"module": "dist/index.mjs",
|