@rvx/ui 0.6.1 → 0.7.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/common/theme.d.ts +1 -5
- package/dist/common/theme.d.ts.map +1 -1
- package/dist/common/theme.js +1 -4
- package/dist/common/theme.js.map +1 -1
- package/dist/components/collapse.d.ts.map +1 -1
- package/dist/components/collapse.js +19 -7
- package/dist/components/collapse.js.map +1 -1
- package/dist/components/dialog.d.ts.map +1 -1
- package/dist/components/dialog.js +19 -9
- package/dist/components/dialog.js.map +1 -1
- package/package.json +2 -2
- package/src/common/theme.tsx +1 -9
- package/src/components/collapse.tsx +22 -6
- package/src/components/dialog.tsx +22 -9
package/dist/common/theme.d.ts
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export interface ThemeConfig {
|
|
3
|
-
layoutTransitionDelay: number;
|
|
4
|
-
}
|
|
5
|
-
export declare const THEME: Context<ThemeConfig>;
|
|
1
|
+
import { Expression } from "rvx";
|
|
6
2
|
export type Theme = "dark" | "light";
|
|
7
3
|
export declare function watchTheme(value?: Expression<Theme | undefined>): void;
|
|
8
4
|
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/common/theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/common/theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAErC,wBAAgB,UAAU,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC,QAuB/D"}
|
package/dist/common/theme.js
CHANGED
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
import { $,
|
|
1
|
+
import { $, teardown, watch } from "rvx";
|
|
2
2
|
import { useAbortSignal } from "rvx/async";
|
|
3
|
-
export const THEME = new Context({
|
|
4
|
-
layoutTransitionDelay: 250,
|
|
5
|
-
});
|
|
6
3
|
export function watchTheme(value) {
|
|
7
4
|
const theme = $(undefined);
|
|
8
5
|
watch(value, expr => {
|
package/dist/common/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/common/theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/common/theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAc,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAI3C,MAAM,UAAU,UAAU,CAAC,KAAqC;IAC/D,MAAM,KAAK,GAAG,CAAC,CAAQ,SAAU,CAAC,CAAC;IAEnC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,EAAE;QACnB,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACxB,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;YAC/D,MAAM,MAAM,GAAG,GAAG,EAAE;gBACnB,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YAC/C,CAAC,CAAC;YACF,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,EAAE,CAAC,CAAC;YACtE,MAAM,EAAE,CAAC;QACV,CAAC;aAAM,CAAC;YACP,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;QACpB,CAAC;IACF,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE;QACpB,MAAM,SAAS,GAAG,OAAO,KAAK,EAAE,CAAC;QACjC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QACvC,QAAQ,CAAC,GAAG,EAAE;YACb,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../../src/components/collapse.tsx"],"names":[],"mappings":"AACA,OAAO,EAAK,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAyB,UAAU,
|
|
1
|
+
{"version":3,"file":"collapse.d.ts","sourceRoot":"","sources":["../../src/components/collapse.tsx"],"names":[],"mappings":"AACA,OAAO,EAAK,UAAU,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAyB,UAAU,EAA0C,MAAM,KAAK,CAAC;AAG7I,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG5D,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IAC1C,MAAM,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,EAAE,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,UAAU,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,UAAU,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC;IACvD,aAAa,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;CAChD,GAAG,OAAO,CAmGV;AAED,MAAM,WAAW,YAAY,CAAC,CAAC;IAC9B,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,EAAE,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,UAAU,CAAC,QAAQ,GAAG,SAAS,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,UAAU,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC;IACvD,aAAa,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;CAChD;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE;IACrC,IAAI,EAAE,UAAU,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;CACvB,GAAG,OAAO,CAsFV"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "rvx/jsx-runtime";
|
|
2
2
|
import styles from "@rvx/ui/theme/components/collapse.module.css";
|
|
3
|
-
import { $, For, get, map, teardown, watch } from "rvx";
|
|
3
|
+
import { $, For, get, map, teardown, untrack, watch, watchUpdates } from "rvx";
|
|
4
4
|
import { useMicrotask, useTimeout } from "rvx/async";
|
|
5
5
|
import { optionalString } from "rvx/convert";
|
|
6
|
-
import {
|
|
6
|
+
import { getBlockStart, getSize } from "../common/writing-mode.js";
|
|
7
7
|
export function Collapse(props) {
|
|
8
8
|
const alert = $(false);
|
|
9
9
|
const size = $(undefined);
|
|
@@ -19,6 +19,16 @@ export function Collapse(props) {
|
|
|
19
19
|
teardown(() => {
|
|
20
20
|
observer.disconnect();
|
|
21
21
|
});
|
|
22
|
+
if (untrack(props.visible)) {
|
|
23
|
+
queueMicrotask(() => {
|
|
24
|
+
const writingMode = getComputedStyle(content).writingMode || "horizontal-tb";
|
|
25
|
+
const rect = content.getBoundingClientRect();
|
|
26
|
+
const value = getSize(rect, getBlockStart(writingMode));
|
|
27
|
+
if (value > 0) {
|
|
28
|
+
size.value = value;
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
}
|
|
22
32
|
props.alert?.(() => {
|
|
23
33
|
if (get(props.visible) ?? false) {
|
|
24
34
|
alert.value = false;
|
|
@@ -46,6 +56,11 @@ export function Collapse(props) {
|
|
|
46
56
|
}
|
|
47
57
|
});
|
|
48
58
|
}
|
|
59
|
+
function clearTransition(event) {
|
|
60
|
+
if (event.target === root) {
|
|
61
|
+
transition.value = false;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
49
64
|
const root = _jsx("div", { inert: map(props.visible, v => !v), class: [
|
|
50
65
|
styles.collapse,
|
|
51
66
|
() => size.value === undefined || !transition.value ? undefined : styles.sized,
|
|
@@ -57,12 +72,9 @@ export function Collapse(props) {
|
|
|
57
72
|
"--collapse-size": () => size.value === undefined ? null : `${size.value}px`,
|
|
58
73
|
},
|
|
59
74
|
props.style,
|
|
60
|
-
], id: props.id, "aria-live": map(props["aria-live"], v => v ?? "polite"), "aria-relevant": props["aria-relevant"], "aria-atomic": optionalString(props["aria-atomic"]), children: _jsx("div", { class: styles.view, children: content }) });
|
|
61
|
-
|
|
75
|
+
], id: props.id, "aria-live": map(props["aria-live"], v => v ?? "polite"), "aria-relevant": props["aria-relevant"], "aria-atomic": optionalString(props["aria-atomic"]), "on:transitionend": clearTransition, "on:transitioncancel": clearTransition, children: _jsx("div", { class: styles.view, children: content }) });
|
|
76
|
+
watchUpdates(visible, () => {
|
|
62
77
|
transition.value = true;
|
|
63
|
-
useTimeout(() => {
|
|
64
|
-
transition.value = false;
|
|
65
|
-
}, THEME.current.layoutTransitionDelay);
|
|
66
78
|
});
|
|
67
79
|
return root;
|
|
68
80
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../src/components/collapse.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,8CAA8C,CAAC;AAClE,OAAO,EAAE,CAAC,EAA4C,GAAG,EAAE,GAAG,EAAE,GAAG,EAAsB,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"collapse.js","sourceRoot":"","sources":["../../src/components/collapse.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,UAAU,EAAE,OAAO,EAAW,KAAK,EAAE,UAAU,EAAe,UAAU,EAAsB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,UAAU,EAAE,OAAO,EAAW,KAAK,EAAE,UAAU,EAAe,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGnI,OAAO,EAAE,MAAM,EAAS,MAAM,aAAa,CAAC;AAQ5C,qBAAa,gBAAiB,SAAQ,KAAK;CAAI;AAE/C,MAAM,WAAW,MAAM,CAAC,CAAC;IACxB,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5B,MAAM,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC;AAE3D,MAAM,WAAW,aAAa;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,cAAc,sDAA6D,CAAC;AAEzF,wBAAgB,UAAU,CAAC,CAAC,GAAG,IAAI,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,CA6C7F;AAED,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,aAAa,CAAC;AAElD,wBAAgB,UAAU,CAAC,KAAK,EAAE;IACjC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,UAAU,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAE3C,iBAAiB,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACnD,kBAAkB,CAAC,EAAE,UAAU,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;CACpD,GAAG,OAAO,CAkEV;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC,WAEzF;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IACnC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,OAAO,CAmBV"}
|
|
@@ -3,7 +3,6 @@ import styles from "@rvx/ui/theme/components/dialog.module.css";
|
|
|
3
3
|
import { $, captureSelf, Context, Emitter, map, render, teardown, uniqueId } from "rvx";
|
|
4
4
|
import { TASKS, Tasks, useMicrotask } from "rvx/async";
|
|
5
5
|
import { inOverlayContext } from "../common/context.js";
|
|
6
|
-
import { THEME } from "../common/theme.js";
|
|
7
6
|
import { Column, Group } from "./column.js";
|
|
8
7
|
import { FlexSpace } from "./flex-space.js";
|
|
9
8
|
import { Heading } from "./heading.js";
|
|
@@ -69,6 +68,24 @@ export function DialogBody(props) {
|
|
|
69
68
|
descriptionId = uniqueId();
|
|
70
69
|
head.push(_jsx(Text, { id: descriptionId, children: props.description }));
|
|
71
70
|
}
|
|
71
|
+
let resolveFadeOut;
|
|
72
|
+
function fadeOutEnd(event) {
|
|
73
|
+
if (event.target === body) {
|
|
74
|
+
resolveFadeOut?.();
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
DIALOG_FADEOUT.current?.(tasks => {
|
|
78
|
+
if (styles.fadeout) {
|
|
79
|
+
body.classList.add(styles.fadeout);
|
|
80
|
+
}
|
|
81
|
+
const inner = resolveFadeOut;
|
|
82
|
+
tasks.push(new Promise(resolve => {
|
|
83
|
+
resolveFadeOut = () => {
|
|
84
|
+
inner?.();
|
|
85
|
+
resolve();
|
|
86
|
+
};
|
|
87
|
+
}));
|
|
88
|
+
});
|
|
72
89
|
const body = _jsx("div", { class: [
|
|
73
90
|
styles.container,
|
|
74
91
|
props.class,
|
|
@@ -78,20 +95,13 @@ export function DialogBody(props) {
|
|
|
78
95
|
"--dialog-inline-size": map(props.inlineSize, v => v ?? "auto"),
|
|
79
96
|
"--dialog-block-size": map(props.blockSize, v => v ?? "auto"),
|
|
80
97
|
},
|
|
81
|
-
], role: map(props.role, v => v ?? "dialog"), "aria-labelledby": map(props["aria-labelledby"], v => v ?? titleId), "aria-describedby": map(props["aria-describedby"], v => v ?? descriptionId), children: _jsxs(Separated, { class: styles.body, children: [head.length > 0 ? _jsx(Group, { padded: true, children: head }) : undefined, props.children] }) });
|
|
98
|
+
], role: map(props.role, v => v ?? "dialog"), "aria-labelledby": map(props["aria-labelledby"], v => v ?? titleId), "aria-describedby": map(props["aria-describedby"], v => v ?? descriptionId), "on:transitionend": fadeOutEnd, "on:transitioncancel": fadeOutEnd, children: _jsxs(Separated, { class: styles.body, children: [head.length > 0 ? _jsx(Group, { padded: true, children: head }) : undefined, props.children] }) });
|
|
82
99
|
useMicrotask(() => {
|
|
83
100
|
if (styles.fadein) {
|
|
84
101
|
body.offsetParent;
|
|
85
102
|
body.classList.add(styles.fadein);
|
|
86
103
|
}
|
|
87
104
|
});
|
|
88
|
-
DIALOG_FADEOUT.current?.(tasks => {
|
|
89
|
-
if (styles.fadeout) {
|
|
90
|
-
body.classList.add(styles.fadeout);
|
|
91
|
-
}
|
|
92
|
-
const delay = THEME.current.layoutTransitionDelay;
|
|
93
|
-
tasks.push(new Promise(resolve => setTimeout(resolve, delay)));
|
|
94
|
-
});
|
|
95
105
|
return body;
|
|
96
106
|
}
|
|
97
107
|
export function DialogContent(props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,4CAA4C,CAAC;AAChE,OAAO,EAAE,CAAC,EAAE,WAAW,EAAc,OAAO,EAAE,OAAO,EAAqB,GAAG,EAAE,MAAM,EAAc,QAAQ,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AACnI,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"rvx"
|
|
13
13
|
],
|
|
14
14
|
"license": "AGPL-3.0",
|
|
15
|
-
"version": "0.
|
|
15
|
+
"version": "0.7.0",
|
|
16
16
|
"type": "module",
|
|
17
17
|
"main": "./dist/index.js",
|
|
18
18
|
"sideEffects": false,
|
|
@@ -33,6 +33,6 @@
|
|
|
33
33
|
"typescript": "^6.0.3"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"rvx": "^26.0.
|
|
36
|
+
"rvx": "^26.0.5"
|
|
37
37
|
}
|
|
38
38
|
}
|
package/src/common/theme.tsx
CHANGED
|
@@ -1,14 +1,6 @@
|
|
|
1
|
-
import { $,
|
|
1
|
+
import { $, Expression, teardown, watch } from "rvx";
|
|
2
2
|
import { useAbortSignal } from "rvx/async";
|
|
3
3
|
|
|
4
|
-
export interface ThemeConfig {
|
|
5
|
-
layoutTransitionDelay: number;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export const THEME = new Context<ThemeConfig>({
|
|
9
|
-
layoutTransitionDelay: 250,
|
|
10
|
-
});
|
|
11
|
-
|
|
12
4
|
export type Theme = "dark" | "light";
|
|
13
5
|
|
|
14
6
|
export function watchTheme(value?: Expression<Theme | undefined>) {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import styles from "@rvx/ui/theme/components/collapse.module.css";
|
|
2
|
-
import { $, ClassValue, Component, Event, Expression, For, get, map, Signal, StyleValue, teardown, watch } from "rvx";
|
|
2
|
+
import { $, ClassValue, Component, Event, Expression, For, get, map, Signal, StyleValue, teardown, untrack, watch, watchUpdates } from "rvx";
|
|
3
3
|
import { useMicrotask, useTimeout } from "rvx/async";
|
|
4
4
|
import { optionalString } from "rvx/convert";
|
|
5
|
-
import { THEME } from "../common/theme.js";
|
|
6
5
|
import { AriaLive, AriaRelevant } from "../common/types.js";
|
|
6
|
+
import { getBlockStart, getSize, WritingMode } from "../common/writing-mode.js";
|
|
7
7
|
|
|
8
8
|
export function Collapse(props: {
|
|
9
9
|
visible?: Expression<boolean | undefined>;
|
|
@@ -37,6 +37,17 @@ export function Collapse(props: {
|
|
|
37
37
|
observer.disconnect();
|
|
38
38
|
});
|
|
39
39
|
|
|
40
|
+
if (untrack(props.visible)) {
|
|
41
|
+
queueMicrotask(() => {
|
|
42
|
+
const writingMode = getComputedStyle(content).writingMode as WritingMode || "horizontal-tb";
|
|
43
|
+
const rect = content.getBoundingClientRect();
|
|
44
|
+
const value = getSize(rect, getBlockStart(writingMode));
|
|
45
|
+
if (value > 0) {
|
|
46
|
+
size.value = value;
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
|
|
40
51
|
props.alert?.(() => {
|
|
41
52
|
if (get(props.visible) ?? false) {
|
|
42
53
|
alert.value = false;
|
|
@@ -66,6 +77,12 @@ export function Collapse(props: {
|
|
|
66
77
|
});
|
|
67
78
|
}
|
|
68
79
|
|
|
80
|
+
function clearTransition(event: globalThis.Event) {
|
|
81
|
+
if (event.target === root) {
|
|
82
|
+
transition.value = false;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
69
86
|
const root = <div
|
|
70
87
|
inert={map(props.visible, v => !v)}
|
|
71
88
|
class={[
|
|
@@ -85,17 +102,16 @@ export function Collapse(props: {
|
|
|
85
102
|
aria-live={map(props["aria-live"], v => v ?? "polite")}
|
|
86
103
|
aria-relevant={props["aria-relevant"]}
|
|
87
104
|
aria-atomic={optionalString(props["aria-atomic"])}
|
|
105
|
+
on:transitionend={clearTransition}
|
|
106
|
+
on:transitioncancel={clearTransition}
|
|
88
107
|
>
|
|
89
108
|
<div class={styles.view}>
|
|
90
109
|
{content}
|
|
91
110
|
</div>
|
|
92
111
|
</div> as HTMLDivElement;
|
|
93
112
|
|
|
94
|
-
|
|
113
|
+
watchUpdates(visible, () => {
|
|
95
114
|
transition.value = true;
|
|
96
|
-
useTimeout(() => {
|
|
97
|
-
transition.value = false;
|
|
98
|
-
}, THEME.current.layoutTransitionDelay);
|
|
99
115
|
});
|
|
100
116
|
|
|
101
117
|
return root;
|
|
@@ -2,7 +2,6 @@ import styles from "@rvx/ui/theme/components/dialog.module.css";
|
|
|
2
2
|
import { $, captureSelf, ClassValue, Context, Emitter, Event, Expression, map, render, StyleValue, teardown, uniqueId } from "rvx";
|
|
3
3
|
import { TASKS, Tasks, useMicrotask } from "rvx/async";
|
|
4
4
|
import { inOverlayContext } from "../common/context.js";
|
|
5
|
-
import { THEME } from "../common/theme.js";
|
|
6
5
|
import { Column, Group } from "./column.js";
|
|
7
6
|
import { FlexSpace } from "./flex-space.js";
|
|
8
7
|
import { Heading } from "./heading.js";
|
|
@@ -103,6 +102,26 @@ export function DialogBody(props: {
|
|
|
103
102
|
head.push(<Text id={descriptionId}>{props.description}</Text>);
|
|
104
103
|
}
|
|
105
104
|
|
|
105
|
+
let resolveFadeOut: (() => void) | undefined;
|
|
106
|
+
function fadeOutEnd(event: globalThis.Event) {
|
|
107
|
+
if (event.target === body) {
|
|
108
|
+
resolveFadeOut?.();
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
DIALOG_FADEOUT.current?.(tasks => {
|
|
113
|
+
if (styles.fadeout) {
|
|
114
|
+
body.classList.add(styles.fadeout);
|
|
115
|
+
}
|
|
116
|
+
const inner = resolveFadeOut;
|
|
117
|
+
tasks.push(new Promise(resolve => {
|
|
118
|
+
resolveFadeOut = () => {
|
|
119
|
+
inner?.();
|
|
120
|
+
resolve();
|
|
121
|
+
};
|
|
122
|
+
}));
|
|
123
|
+
});
|
|
124
|
+
|
|
106
125
|
const body = <div
|
|
107
126
|
class={[
|
|
108
127
|
styles.container,
|
|
@@ -118,6 +137,8 @@ export function DialogBody(props: {
|
|
|
118
137
|
role={map(props.role, v => v ?? "dialog")}
|
|
119
138
|
aria-labelledby={map(props["aria-labelledby"], v => v ?? titleId)}
|
|
120
139
|
aria-describedby={map(props["aria-describedby"], v => v ?? descriptionId)}
|
|
140
|
+
on:transitionend={fadeOutEnd}
|
|
141
|
+
on:transitioncancel={fadeOutEnd}
|
|
121
142
|
>
|
|
122
143
|
<Separated class={styles.body}>
|
|
123
144
|
{head.length > 0 ? <Group padded>{head}</Group> : undefined}
|
|
@@ -132,14 +153,6 @@ export function DialogBody(props: {
|
|
|
132
153
|
}
|
|
133
154
|
});
|
|
134
155
|
|
|
135
|
-
DIALOG_FADEOUT.current?.(tasks => {
|
|
136
|
-
if (styles.fadeout) {
|
|
137
|
-
body.classList.add(styles.fadeout);
|
|
138
|
-
}
|
|
139
|
-
const delay = THEME.current.layoutTransitionDelay;
|
|
140
|
-
tasks.push(new Promise(resolve => setTimeout(resolve, delay)));
|
|
141
|
-
});
|
|
142
|
-
|
|
143
156
|
return body;
|
|
144
157
|
}
|
|
145
158
|
|