@wisdomgarden/torque 0.2.3 → 0.3.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/components/modal/index.d.ts +12 -1
- package/dist/components/modal/index.js +22 -2
- package/dist/components/modal/modal-context.d.ts +22 -0
- package/dist/components/modal/modal-context.js +15 -0
- package/dist/components/modal/modal-events.d.ts +24 -0
- package/dist/components/modal/modal-events.js +24 -0
- package/dist/components/modal/modal-manager.d.ts +11 -0
- package/dist/components/modal/modal-manager.js +139 -0
- package/dist/components/modal/modal-root.d.ts +13 -0
- package/dist/components/modal/modal-root.js +159 -0
- package/dist/components/modal/modal.d.ts +33 -7
- package/dist/components/modal/modal.js +38 -193
- package/dist/components/modal/modal.module.css.js +18 -16
- package/dist/components/modal/modal.types.d.ts +59 -3
- package/dist/components/modal/subs/modal-body.d.ts +6 -0
- package/dist/components/modal/subs/modal-body.js +24 -0
- package/dist/components/modal/subs/modal-close-button.d.ts +7 -0
- package/dist/components/modal/subs/modal-close-button.js +38 -0
- package/dist/components/modal/subs/modal-content.d.ts +9 -0
- package/dist/components/modal/subs/modal-content.js +60 -0
- package/dist/components/modal/subs/modal-header.d.ts +6 -0
- package/dist/components/modal/subs/modal-header.js +24 -0
- package/dist/components/modal/subs/modal-overlay.d.ts +6 -0
- package/dist/components/modal/subs/modal-overlay.js +25 -0
- package/dist/components/modal/subs/modal-title.d.ts +8 -0
- package/dist/components/modal/subs/modal-title.js +28 -0
- package/dist/components/overlay-layer/constants.d.ts +8 -7
- package/dist/components/overlay-layer/constants.js +2 -2
- package/dist/components/overlay-layer/index.d.ts +1 -1
- package/dist/components/overlay-layer/index.js +8 -7
- package/dist/components/overlay-layer/overlay-stack.d.ts +2 -2
- package/dist/components/overlay-layer/overlay-stack.js +4 -4
- package/dist/components/overlay-layer/types.d.ts +3 -3
- package/dist/index.css +1 -1
- package/dist/index.js +209 -188
- package/package.json +3 -3
|
@@ -1,198 +1,43 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import "
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
md: "440px",
|
|
19
|
-
lg: "620px",
|
|
20
|
-
xl: "780px"
|
|
21
|
-
}, vt = {
|
|
22
|
-
xs: "var(--t-space-mini)",
|
|
23
|
-
sm: "var(--t-space-xs)",
|
|
24
|
-
md: "var(--t-space-lg)",
|
|
25
|
-
lg: "var(--t-space-xl)",
|
|
26
|
-
xl: "var(--t-space-xxl)"
|
|
27
|
-
}, gt = {
|
|
28
|
-
xs: "2px",
|
|
29
|
-
sm: "var(--t-radius-xs)",
|
|
30
|
-
md: "var(--t-radius-sm)",
|
|
31
|
-
lg: "var(--t-radius-lg)",
|
|
32
|
-
xl: "var(--t-radius-lg)"
|
|
33
|
-
}, ht = /^\d+(\.\d+)?$/, b = (t) => typeof t == "number" || ht.test(t) ? `${t}px` : t, E = (t, o) => typeof o == "string" && o in t ? t[o] : b(o), Lt = ({
|
|
34
|
-
opened: t,
|
|
35
|
-
onClose: o,
|
|
36
|
-
title: s,
|
|
37
|
-
children: D,
|
|
38
|
-
centered: U = !0,
|
|
39
|
-
size: I = "md",
|
|
40
|
-
classNames: d,
|
|
41
|
-
className: _,
|
|
42
|
-
zIndex: $,
|
|
43
|
-
padding: j = "xl",
|
|
44
|
-
radius: P = "lg",
|
|
45
|
-
withCloseButton: T = !0,
|
|
46
|
-
closeOnClickOutside: q = !1,
|
|
47
|
-
closeOnEscape: G = !0,
|
|
48
|
-
closeButtonProps: x,
|
|
49
|
-
onExitTransitionEnd: R,
|
|
50
|
-
transitionProps: N,
|
|
51
|
-
overlayProps: S,
|
|
52
|
-
onClick: H,
|
|
53
|
-
keepMounted: K = !1,
|
|
54
|
-
yOffset: X = "5dvh",
|
|
55
|
-
xOffset: Y = "5vw",
|
|
56
|
-
"aria-label": A
|
|
2
|
+
import { jsxs as a, jsx as r } from "react/jsx-runtime";
|
|
3
|
+
import { ModalRoot as d } from "./modal-root.js";
|
|
4
|
+
import { ModalBody as t } from "./subs/modal-body.js";
|
|
5
|
+
import { ModalCloseButton as n } from "./subs/modal-close-button.js";
|
|
6
|
+
import { ModalContent as m } from "./subs/modal-content.js";
|
|
7
|
+
import { ModalHeader as i } from "./subs/modal-header.js";
|
|
8
|
+
import { ModalOverlay as s } from "./subs/modal-overlay.js";
|
|
9
|
+
import { ModalTitle as p } from "./subs/modal-title.js";
|
|
10
|
+
const c = ({
|
|
11
|
+
title: o,
|
|
12
|
+
children: M,
|
|
13
|
+
withCloseButton: e = !0,
|
|
14
|
+
closeButtonProps: f,
|
|
15
|
+
onClick: h,
|
|
16
|
+
"aria-label": u,
|
|
17
|
+
...y
|
|
57
18
|
}) => {
|
|
58
|
-
const
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
})
|
|
69
|
-
handleTransitionEnd: w,
|
|
70
|
-
onExitTransitionEnd: R,
|
|
71
|
-
onExited: N?.onExited
|
|
72
|
-
});
|
|
73
|
-
f(() => {
|
|
74
|
-
L.current = {
|
|
75
|
-
handleTransitionEnd: w,
|
|
76
|
-
onExitTransitionEnd: R,
|
|
77
|
-
onExited: N?.onExited
|
|
78
|
-
};
|
|
79
|
-
});
|
|
80
|
-
const y = st(() => {
|
|
81
|
-
if (!u.current) return;
|
|
82
|
-
u.current = !1;
|
|
83
|
-
const e = L.current;
|
|
84
|
-
e.onExitTransitionEnd?.(), e.onExited?.(), e.handleTransitionEnd();
|
|
85
|
-
}, []);
|
|
86
|
-
f(() => {
|
|
87
|
-
if (t) {
|
|
88
|
-
h.current = !0, u.current = !1;
|
|
89
|
-
return;
|
|
90
|
-
}
|
|
91
|
-
if (!h.current) return;
|
|
92
|
-
h.current = !1, u.current = !0;
|
|
93
|
-
const e = window.setTimeout(y, ft);
|
|
94
|
-
return () => window.clearTimeout(e);
|
|
95
|
-
}, [t, y]);
|
|
96
|
-
const Q = (e) => {
|
|
97
|
-
e.target === e.currentTarget && O === "closing" && y();
|
|
98
|
-
}, m = l(null);
|
|
99
|
-
at(() => {
|
|
100
|
-
t && !m.current && (m.current = document.activeElement);
|
|
101
|
-
}, [t]), f(() => {
|
|
102
|
-
if (!t || !v) return;
|
|
103
|
-
const e = c.current;
|
|
104
|
-
if (!e || e.contains(document.activeElement)) return;
|
|
105
|
-
(e.querySelector("[data-autofocus]") ?? M([e])[0] ?? e).focus();
|
|
106
|
-
}, [t, v]), f(() => {
|
|
107
|
-
if (t) return;
|
|
108
|
-
const e = m.current;
|
|
109
|
-
if (m.current = null, !e?.isConnected) return;
|
|
110
|
-
const a = document.activeElement;
|
|
111
|
-
(!a || a === document.body || c.current?.contains(a)) && e.focus();
|
|
112
|
-
}, [t]);
|
|
113
|
-
const k = (e) => /* @__PURE__ */ r(
|
|
114
|
-
"span",
|
|
115
|
-
{
|
|
116
|
-
tabIndex: 0,
|
|
117
|
-
"data-focus-sentinel": e,
|
|
118
|
-
"aria-hidden": "true",
|
|
119
|
-
className: n.sentinel,
|
|
120
|
-
onFocus: () => {
|
|
121
|
-
const a = M([c.current]);
|
|
122
|
-
((e === "start" ? a[a.length - 1] : a[0]) ?? c.current)?.focus();
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
);
|
|
126
|
-
if (!v) return null;
|
|
127
|
-
const F = s != null && s !== !1, V = F || T, W = S?.backgroundOpacity ?? S?.opacity ?? 0.6, B = typeof s == "string" ? "h2" : "div", tt = {
|
|
128
|
-
zIndex: g.zIndex,
|
|
129
|
-
"--modal-size": I === "auto" ? "auto" : E(xt, I),
|
|
130
|
-
"--modal-padding": E(vt, j),
|
|
131
|
-
"--modal-radius": E(gt, P),
|
|
132
|
-
"--modal-y-offset": b(X),
|
|
133
|
-
"--modal-x-offset": b(Y),
|
|
134
|
-
"--modal-overlay-opacity": W,
|
|
135
|
-
"--modal-duration": `${z}ms`
|
|
136
|
-
};
|
|
137
|
-
return /* @__PURE__ */ r(it, { children: /* @__PURE__ */ r(rt, { enabled: t, children: /* @__PURE__ */ p(
|
|
138
|
-
"div",
|
|
139
|
-
{
|
|
140
|
-
className: i(n.root, _),
|
|
141
|
-
style: tt,
|
|
142
|
-
"data-state": O,
|
|
143
|
-
"data-centered": U || void 0,
|
|
144
|
-
"aria-hidden": t ? void 0 : !0,
|
|
145
|
-
inert: t ? void 0 : !0,
|
|
146
|
-
children: [
|
|
147
|
-
/* @__PURE__ */ r("div", { className: n.overlay, "aria-hidden": "true" }),
|
|
148
|
-
/* @__PURE__ */ r("div", { className: n.inner, children: /* @__PURE__ */ p(
|
|
149
|
-
"div",
|
|
150
|
-
{
|
|
151
|
-
ref: J,
|
|
152
|
-
role: "dialog",
|
|
153
|
-
"aria-modal": "true",
|
|
154
|
-
"aria-label": A,
|
|
155
|
-
"aria-labelledby": !A && F ? C : void 0,
|
|
156
|
-
tabIndex: -1,
|
|
157
|
-
className: i(n.content, d?.content),
|
|
158
|
-
onClick: H,
|
|
159
|
-
onTransitionEnd: Q,
|
|
160
|
-
children: [
|
|
161
|
-
k("start"),
|
|
162
|
-
V && /* @__PURE__ */ p("div", { className: i(n.header, d?.header), children: [
|
|
163
|
-
/* @__PURE__ */ r(
|
|
164
|
-
B,
|
|
165
|
-
{
|
|
166
|
-
id: C,
|
|
167
|
-
className: i(n.title, d?.title),
|
|
168
|
-
children: s
|
|
169
|
-
}
|
|
170
|
-
),
|
|
171
|
-
T && /* @__PURE__ */ r(
|
|
172
|
-
lt,
|
|
173
|
-
{
|
|
174
|
-
variant: "text",
|
|
175
|
-
color: "regular",
|
|
176
|
-
size: "lg",
|
|
177
|
-
iconName: "close",
|
|
178
|
-
className: n.close,
|
|
179
|
-
disabled: x?.disabled,
|
|
180
|
-
"aria-label": x?.["aria-label"] ?? Z.close,
|
|
181
|
-
onClick: (e) => {
|
|
182
|
-
x?.onClick?.(e), o();
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
)
|
|
186
|
-
] }),
|
|
187
|
-
/* @__PURE__ */ r("div", { className: i(n.body, d?.body), children: /* @__PURE__ */ r(dt, { id: g.id, children: D }) }),
|
|
188
|
-
k("end")
|
|
189
|
-
]
|
|
190
|
-
}
|
|
191
|
-
) })
|
|
192
|
-
]
|
|
193
|
-
}
|
|
194
|
-
) }) });
|
|
19
|
+
const l = o != null && o !== !1;
|
|
20
|
+
return /* @__PURE__ */ a(d, { ...y, children: [
|
|
21
|
+
/* @__PURE__ */ r(s, {}),
|
|
22
|
+
/* @__PURE__ */ a(m, { onClick: h, "aria-label": u, children: [
|
|
23
|
+
(l || e) && /* @__PURE__ */ a(i, { children: [
|
|
24
|
+
l && /* @__PURE__ */ r(p, { children: o }),
|
|
25
|
+
e && /* @__PURE__ */ r(n, { ...f })
|
|
26
|
+
] }),
|
|
27
|
+
/* @__PURE__ */ r(t, { children: M })
|
|
28
|
+
] })
|
|
29
|
+
] });
|
|
195
30
|
};
|
|
31
|
+
c.displayName = "Modal";
|
|
32
|
+
const R = Object.assign(c, {
|
|
33
|
+
Root: d,
|
|
34
|
+
Overlay: s,
|
|
35
|
+
Content: m,
|
|
36
|
+
Header: i,
|
|
37
|
+
Title: p,
|
|
38
|
+
Body: t,
|
|
39
|
+
CloseButton: n
|
|
40
|
+
});
|
|
196
41
|
export {
|
|
197
|
-
|
|
42
|
+
R as Modal
|
|
198
43
|
};
|
|
@@ -1,24 +1,26 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const
|
|
3
|
-
root:
|
|
4
|
-
overlay:
|
|
5
|
-
inner:
|
|
6
|
-
content:
|
|
2
|
+
const o = "_root_17o6n_3", n = "_overlay_17o6n_12", e = "_inner_17o6n_13", t = "_content_17o6n_42", _ = "_header_17o6n_67", c = "_title_17o6n_81", s = "_close_17o6n_92", r = "_body_17o6n_97", l = "_sentinel_17o6n_105", i = "_confirmFooter_17o6n_128", a = {
|
|
3
|
+
root: o,
|
|
4
|
+
overlay: n,
|
|
5
|
+
inner: e,
|
|
6
|
+
content: t,
|
|
7
7
|
header: _,
|
|
8
|
-
title:
|
|
8
|
+
title: c,
|
|
9
9
|
close: s,
|
|
10
|
-
body:
|
|
11
|
-
sentinel:
|
|
10
|
+
body: r,
|
|
11
|
+
sentinel: l,
|
|
12
|
+
confirmFooter: i
|
|
12
13
|
};
|
|
13
14
|
export {
|
|
14
|
-
|
|
15
|
+
r as body,
|
|
15
16
|
s as close,
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
i as confirmFooter,
|
|
18
|
+
t as content,
|
|
19
|
+
a as default,
|
|
18
20
|
_ as header,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
e as inner,
|
|
22
|
+
n as overlay,
|
|
23
|
+
o as root,
|
|
24
|
+
l as sentinel,
|
|
25
|
+
c as title
|
|
24
26
|
};
|
|
@@ -1,8 +1,16 @@
|
|
|
1
|
+
import type { ButtonProps } from '../button';
|
|
1
2
|
import type React from 'react';
|
|
2
3
|
export type ModalSizePreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
3
4
|
export type ModalSpacingPreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* 槽位名,`classNames` 与 `styles` 共用。
|
|
7
|
+
* `inner` 是面板外那层负责定位与内边距的容器,只开放槽位、不提供子组件
|
|
8
|
+
* (与 Mantine 一致:它也没有 `Modal.Inner`)。
|
|
9
|
+
*/
|
|
10
|
+
export type ModalStylesName = 'root' | 'overlay' | 'inner' | 'content' | 'header' | 'title' | 'body' | 'close';
|
|
11
|
+
export type ModalClassNames = Partial<Record<ModalStylesName, string>>;
|
|
12
|
+
export type ModalStyles = Partial<Record<ModalStylesName, React.CSSProperties>>;
|
|
13
|
+
export interface ModalCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
6
14
|
/** 覆盖关闭按钮默认的可访问名(默认取 locale 的「关闭」) */
|
|
7
15
|
'aria-label'?: string;
|
|
8
16
|
disabled?: boolean;
|
|
@@ -28,15 +36,24 @@ export interface ModalProps {
|
|
|
28
36
|
* @default true
|
|
29
37
|
*/
|
|
30
38
|
centered?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* 铺满视口:去掉四周边距与圆角。只改几何,层级照常进栈
|
|
41
|
+
* @default false
|
|
42
|
+
*/
|
|
43
|
+
fullScreen?: boolean;
|
|
31
44
|
/**
|
|
32
45
|
* 宽度:预设名、数字(px)、纯数字字符串(当 px,如 `"800"`)、`'auto'` 或带单位的 CSS 值(`'30rem'`、`'50%'`)
|
|
33
46
|
* @default 'md'
|
|
34
47
|
*/
|
|
35
48
|
size?: ModalSizePreset | number | string;
|
|
36
|
-
/**
|
|
49
|
+
/** 槽位类名 */
|
|
37
50
|
classNames?: ModalClassNames;
|
|
51
|
+
/** 槽位内联样式,与 `classNames` 共用同一组键 */
|
|
52
|
+
styles?: ModalStyles;
|
|
38
53
|
/** 根节点类名 */
|
|
39
54
|
className?: string;
|
|
55
|
+
/** 根节点内联样式(层级与 CSS 变量由组件自己写,同名属性以组件的为准) */
|
|
56
|
+
style?: React.CSSProperties;
|
|
40
57
|
/** 显式层级。不传则由层级模块按打开顺序计算(普通层从 200 起) */
|
|
41
58
|
zIndex?: number;
|
|
42
59
|
/**
|
|
@@ -94,3 +111,42 @@ export interface ModalProps {
|
|
|
94
111
|
/** 对话框的可访问名;不传时用 `title` */
|
|
95
112
|
'aria-label'?: string;
|
|
96
113
|
}
|
|
114
|
+
/**
|
|
115
|
+
* `Modal.Root` 的属性:单件属性里去掉只属于头部与面板的那几个。
|
|
116
|
+
* 层级、动画、滚动锁、几何与槽位都在 Root 上,子组件从 context 读。
|
|
117
|
+
*/
|
|
118
|
+
export type ModalRootProps = Omit<ModalProps, 'title' | 'withCloseButton' | 'closeButtonProps' | 'onClick' | 'aria-label'>;
|
|
119
|
+
/** 命令式 `modals.open` 的属性:`opened` 由管理器接管,其余与 `<Modal>` 一致 */
|
|
120
|
+
export type ModalEventProps = Omit<ModalProps, 'opened' | 'onClose'> & {
|
|
121
|
+
onClose?: ModalProps['onClose'];
|
|
122
|
+
};
|
|
123
|
+
/** 兼容 Mantine 确认框的 `color: 'red'`,渲染时映射为 torque 的危险色。 */
|
|
124
|
+
export type ModalConfirmButtonProps = Omit<ButtonProps, 'color'> & {
|
|
125
|
+
color?: ButtonProps['color'] | 'red';
|
|
126
|
+
};
|
|
127
|
+
export interface ModalConfirmLabels {
|
|
128
|
+
/** 确认按钮文案,缺省取 locale 的「确认」 */
|
|
129
|
+
confirm?: React.ReactNode;
|
|
130
|
+
/** 取消按钮文案,缺省取 locale 的「取消」 */
|
|
131
|
+
cancel?: React.ReactNode;
|
|
132
|
+
}
|
|
133
|
+
/** 命令式 `modals.openConfirmModal` 的属性:在 `modals.open` 之上多一个页脚 */
|
|
134
|
+
export interface ConfirmModalEventProps extends ModalEventProps {
|
|
135
|
+
labels?: ModalConfirmLabels;
|
|
136
|
+
/** 确认框关闭后调用;允许异步业务操作 */
|
|
137
|
+
onConfirm?: () => void | Promise<void>;
|
|
138
|
+
/** 只有点取消按钮才调用;Escape / 关闭按钮 / 点遮罩关闭时不调用 */
|
|
139
|
+
onCancel?: () => void;
|
|
140
|
+
confirmProps?: ModalConfirmButtonProps;
|
|
141
|
+
cancelProps?: ModalConfirmButtonProps;
|
|
142
|
+
}
|
|
143
|
+
/** 事件载荷:id 在指令层生成,管理器只负责渲染与移除 */
|
|
144
|
+
export type ModalEventPayload = {
|
|
145
|
+
id: string;
|
|
146
|
+
kind: 'content';
|
|
147
|
+
props: ModalEventProps;
|
|
148
|
+
} | {
|
|
149
|
+
id: string;
|
|
150
|
+
kind: 'confirm';
|
|
151
|
+
props: ConfirmModalEventProps;
|
|
152
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
3
|
+
import { clsx as m } from "clsx";
|
|
4
|
+
import { useModalContext as r, slotStyle as a } from "../modal-context.js";
|
|
5
|
+
import d from "../modal.module.css.js";
|
|
6
|
+
const y = ({
|
|
7
|
+
className: s,
|
|
8
|
+
style: t,
|
|
9
|
+
...e
|
|
10
|
+
}) => {
|
|
11
|
+
const o = r();
|
|
12
|
+
return /* @__PURE__ */ l(
|
|
13
|
+
"div",
|
|
14
|
+
{
|
|
15
|
+
...e,
|
|
16
|
+
className: m(d.body, o.classNames?.body, s),
|
|
17
|
+
style: a(o.styles?.body, t)
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
};
|
|
21
|
+
y.displayName = "Modal.Body";
|
|
22
|
+
export {
|
|
23
|
+
y as ModalBody
|
|
24
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ModalCloseButtonProps } from '../modal.types';
|
|
3
|
+
/** 右上角关闭按钮:先调自己的 `onClick`,再关闭弹窗 */
|
|
4
|
+
export declare const ModalCloseButton: {
|
|
5
|
+
({ className, style, onClick, "aria-label": ariaLabel, ...rest }: ModalCloseButtonProps): React.JSX.Element;
|
|
6
|
+
displayName: string;
|
|
7
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
3
|
+
import { clsx as i } from "clsx";
|
|
4
|
+
import "../../../provider/ui-context.js";
|
|
5
|
+
import "react";
|
|
6
|
+
import { useLocale as n } from "../../../provider/hooks.js";
|
|
7
|
+
import { IconButton as p } from "../../icon-button/icon-button.js";
|
|
8
|
+
import { useModalContext as u, slotStyle as f } from "../modal-context.js";
|
|
9
|
+
import x from "../modal.module.css.js";
|
|
10
|
+
const d = ({
|
|
11
|
+
className: l,
|
|
12
|
+
style: e,
|
|
13
|
+
onClick: s,
|
|
14
|
+
"aria-label": t,
|
|
15
|
+
...r
|
|
16
|
+
}) => {
|
|
17
|
+
const o = u(), a = n();
|
|
18
|
+
return /* @__PURE__ */ m(
|
|
19
|
+
p,
|
|
20
|
+
{
|
|
21
|
+
...r,
|
|
22
|
+
variant: "text",
|
|
23
|
+
color: "regular",
|
|
24
|
+
size: "lg",
|
|
25
|
+
iconName: "close",
|
|
26
|
+
className: i(x.close, o.classNames?.close, l),
|
|
27
|
+
style: f(o.styles?.close, e),
|
|
28
|
+
"aria-label": t ?? a.close,
|
|
29
|
+
onClick: (c) => {
|
|
30
|
+
s?.(c), o.close();
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
};
|
|
35
|
+
d.displayName = "Modal.CloseButton";
|
|
36
|
+
export {
|
|
37
|
+
d as ModalCloseButton
|
|
38
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* 面板:`role="dialog"` 那一层,外面还包一层负责定位与内边距的 `inner`
|
|
4
|
+
* (与 Mantine 一致,`inner` 只开放槽位、不单独成子组件)。
|
|
5
|
+
*/
|
|
6
|
+
export declare const ModalContent: {
|
|
7
|
+
({ "aria-label": ariaLabel, className, style, children, ref, ...rest }: React.ComponentProps<"div">): React.JSX.Element;
|
|
8
|
+
displayName: string;
|
|
9
|
+
};
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as r, jsxs as x } from "react/jsx-runtime";
|
|
3
|
+
import { useMergedRef as y } from "@mantine/hooks";
|
|
4
|
+
import { clsx as l } from "clsx";
|
|
5
|
+
import { getFocusableElements as b } from "../../popover/hooks.js";
|
|
6
|
+
import { useModalContext as g, slotStyle as c } from "../modal-context.js";
|
|
7
|
+
import n from "../modal.module.css.js";
|
|
8
|
+
const N = ({
|
|
9
|
+
"aria-label": s,
|
|
10
|
+
className: i,
|
|
11
|
+
style: d,
|
|
12
|
+
children: m,
|
|
13
|
+
ref: f,
|
|
14
|
+
...u
|
|
15
|
+
}) => {
|
|
16
|
+
const e = g(), p = y(e.contentRef, e.layerRef, f), o = (a) => /* @__PURE__ */ r(
|
|
17
|
+
"span",
|
|
18
|
+
{
|
|
19
|
+
tabIndex: 0,
|
|
20
|
+
"data-focus-sentinel": a,
|
|
21
|
+
"aria-hidden": "true",
|
|
22
|
+
className: n.sentinel,
|
|
23
|
+
onFocus: () => {
|
|
24
|
+
const t = b([e.contentRef.current]);
|
|
25
|
+
((a === "start" ? t[t.length - 1] : t[0]) ?? e.contentRef.current)?.focus();
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
);
|
|
29
|
+
return /* @__PURE__ */ r(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
className: l(n.inner, e.classNames?.inner),
|
|
33
|
+
style: c(e.styles?.inner),
|
|
34
|
+
children: /* @__PURE__ */ x(
|
|
35
|
+
"div",
|
|
36
|
+
{
|
|
37
|
+
...u,
|
|
38
|
+
ref: p,
|
|
39
|
+
role: "dialog",
|
|
40
|
+
"aria-modal": "true",
|
|
41
|
+
"aria-label": s,
|
|
42
|
+
"aria-labelledby": !s && e.titleMounted ? e.titleId : void 0,
|
|
43
|
+
tabIndex: -1,
|
|
44
|
+
className: l(n.content, e.classNames?.content, i),
|
|
45
|
+
style: c(e.styles?.content, d),
|
|
46
|
+
onTransitionEnd: e.onContentTransitionEnd,
|
|
47
|
+
children: [
|
|
48
|
+
o("start"),
|
|
49
|
+
m,
|
|
50
|
+
o("end")
|
|
51
|
+
]
|
|
52
|
+
}
|
|
53
|
+
)
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
N.displayName = "Modal.Content";
|
|
58
|
+
export {
|
|
59
|
+
N as ModalContent
|
|
60
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
3
|
+
import { clsx as a } from "clsx";
|
|
4
|
+
import { useModalContext as l, slotStyle as m } from "../modal-context.js";
|
|
5
|
+
import d from "../modal.module.css.js";
|
|
6
|
+
const c = ({
|
|
7
|
+
className: s,
|
|
8
|
+
style: o,
|
|
9
|
+
...r
|
|
10
|
+
}) => {
|
|
11
|
+
const e = l();
|
|
12
|
+
return /* @__PURE__ */ t(
|
|
13
|
+
"div",
|
|
14
|
+
{
|
|
15
|
+
...r,
|
|
16
|
+
className: a(d.header, e.classNames?.header, s),
|
|
17
|
+
style: m(e.styles?.header, o)
|
|
18
|
+
}
|
|
19
|
+
);
|
|
20
|
+
};
|
|
21
|
+
c.displayName = "Modal.Header";
|
|
22
|
+
export {
|
|
23
|
+
c as ModalHeader
|
|
24
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
3
|
+
import { clsx as a } from "clsx";
|
|
4
|
+
import { useModalContext as t, slotStyle as m } from "../modal-context.js";
|
|
5
|
+
import i from "../modal.module.css.js";
|
|
6
|
+
const y = ({
|
|
7
|
+
className: o,
|
|
8
|
+
style: s,
|
|
9
|
+
...l
|
|
10
|
+
}) => {
|
|
11
|
+
const e = t();
|
|
12
|
+
return /* @__PURE__ */ r(
|
|
13
|
+
"div",
|
|
14
|
+
{
|
|
15
|
+
...l,
|
|
16
|
+
"aria-hidden": "true",
|
|
17
|
+
className: a(i.overlay, e.classNames?.overlay, o),
|
|
18
|
+
style: m(e.styles?.overlay, s)
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
};
|
|
22
|
+
y.displayName = "Modal.Overlay";
|
|
23
|
+
export {
|
|
24
|
+
y as ModalOverlay
|
|
25
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
3
|
+
import { useIsomorphicEffect as m } from "@mantine/hooks";
|
|
4
|
+
import { clsx as a } from "clsx";
|
|
5
|
+
import { useModalContext as c, slotStyle as f } from "../modal-context.js";
|
|
6
|
+
import n from "../modal.module.css.js";
|
|
7
|
+
const p = ({
|
|
8
|
+
className: o,
|
|
9
|
+
style: l,
|
|
10
|
+
children: s,
|
|
11
|
+
...i
|
|
12
|
+
}) => {
|
|
13
|
+
const t = c(), { setTitleMounted: e } = t;
|
|
14
|
+
return m(() => (e(!0), () => e(!1)), [e]), /* @__PURE__ */ r(
|
|
15
|
+
typeof s == "string" ? "h2" : "div",
|
|
16
|
+
{
|
|
17
|
+
...i,
|
|
18
|
+
id: t.titleId,
|
|
19
|
+
className: a(n.title, t.classNames?.title, o),
|
|
20
|
+
style: f(t.styles?.title, l),
|
|
21
|
+
children: s
|
|
22
|
+
}
|
|
23
|
+
);
|
|
24
|
+
};
|
|
25
|
+
p.displayName = "Modal.Title";
|
|
26
|
+
export {
|
|
27
|
+
p as ModalTitle
|
|
28
|
+
};
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
/** 普通层的基准层级:所有普通浮层(弹窗、下拉、抽屉、提示)都从这里起算。 */
|
|
2
2
|
export declare const OVERLAY_BASE = 200;
|
|
3
3
|
/**
|
|
4
|
-
* 顶层档位的下限。小于它的层级都归普通层;
|
|
4
|
+
* 顶层档位的下限。小于它的层级都归普通层;1000 – 1499 按百分位分档,
|
|
5
5
|
* 由业务在自己的档位表里声明(悬浮按钮、AI 侧边栏、引导层……)。
|
|
6
6
|
*/
|
|
7
|
-
export declare const OVERLAY_TOP_MIN =
|
|
7
|
+
export declare const OVERLAY_TOP_MIN = 1000;
|
|
8
8
|
/**
|
|
9
|
-
* 组件库保留给通知 /
|
|
10
|
-
*
|
|
9
|
+
* 组件库保留给通知 / 消息的一档,也是最高档:通知盖住包括引导层在内的一切浮层。
|
|
10
|
+
* 由 `NotificationsContainer` 直接用作显式层级,不进栈。
|
|
11
|
+
* 对外导出供业务档位表对照,业务不要占用这一档。
|
|
11
12
|
*/
|
|
12
|
-
export declare const OVERLAY_TIER_NOTIFICATION =
|
|
13
|
-
/**
|
|
14
|
-
export declare const OVERLAY_TOP_MAX =
|
|
13
|
+
export declare const OVERLAY_TIER_NOTIFICATION = 1500;
|
|
14
|
+
/** 业务顶层档位的上限(不含),只用于开发环境校验 */
|
|
15
|
+
export declare const OVERLAY_TOP_MAX = 1500;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { useOverlayLayer } from './use-overlay-layer';
|
|
2
2
|
export { OverlayTierScope } from './overlay-tier-scope';
|
|
3
3
|
export type { OverlayTierScopeProps } from './overlay-tier-scope';
|
|
4
|
-
export { OVERLAY_BASE, OVERLAY_TOP_MIN } from './constants';
|
|
4
|
+
export { OVERLAY_BASE, OVERLAY_TIER_NOTIFICATION, OVERLAY_TOP_MIN, } from './constants';
|
|
5
5
|
export type { OverlayCloseReason, OverlayLayerOptions, OverlayLayerResult, } from './types';
|