@rvx/ui 0.1.10 → 0.1.11

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 (12) hide show
  1. package/dist/common/theme.d.ts +2 -61
  2. package/dist/components/dialog.d.ts +3 -1
  3. package/dist/components/dialog.js +55 -22
  4. package/dist/components/dialog.js.map +1 -1
  5. package/dist/theme.module.css +29 -4
  6. package/dist/theme.module.css.map +1 -1
  7. package/package.json +2 -2
  8. package/src/common/theme.tsx +2 -61
  9. package/src/components/dialog.tsx +61 -26
  10. package/src/theme/base.scss +2 -0
  11. package/src/theme/components/card.scss +4 -4
  12. package/src/theme/components/dialog.scss +27 -0
package/dist/common/theme.d.ts CHANGED
@@ -21,21 +21,13 @@ export declare const THEME: Context<Theme | undefined>;
21
21
  * ```
22
22
  */
23
23
  export interface Theme {
24
- /** Class for all buttons */
25
24
  button?: string;
26
- /** Additional class for buttons with the "default" variant */
27
25
  button_default?: string;
28
- /** Additional class for buttons with the "primary" variant */
29
26
  button_primary?: string;
30
- /** Additional class for buttons with the "success" variant */
31
27
  button_success?: string;
32
- /** Additional class for buttons with the "danger" variant */
33
28
  button_danger?: string;
34
- /** Additional class for buttons with the "warning" variant */
35
29
  button_warning?: string;
36
- /** Additional class for buttons with the "input" variant */
37
30
  button_input?: string;
38
- /** Additional class for buttons with the "text" variant */
39
31
  button_text?: string;
40
32
  card?: string;
41
33
  card_content?: string;
@@ -44,110 +36,59 @@ export interface Theme {
44
36
  card_success?: string;
45
37
  card_warning?: string;
46
38
  card_danger?: string;
47
- /** Class for all checkbox containing labels */
48
39
  checkbox_label?: string;
49
- /** Class for all checkbox inputs */
50
40
  checkbox_input?: string;
51
- /** Class for checkbox text content. This element may also be a text block. */
52
41
  checkbox_content?: string;
53
- /** Class for collapses */
54
42
  collapse?: string;
55
- /** Class for collapses that is when it's size has been measured. */
56
43
  collapse_sized?: string;
57
- /** Class for an additional element between the collapse container and the content. If this is undefined, the element is omitted. */
58
44
  collapse_view?: string;
59
- /** Class that is added to collapses to play an alert animation. */
60
45
  collapse_alert?: string;
61
- /** Additional class for visible collapses */
62
46
  collapse_visible?: string;
63
- /** Class for collapse content */
64
47
  collapse_content?: string;
65
- /** Class for all columns */
66
48
  column?: string;
67
- /** Additional class for columns of content */
68
49
  column_content?: string;
69
- /** Additional class for columns of controls */
70
50
  column_control?: string;
71
- /** Class for all inline control groups */
72
51
  control_group?: string;
73
- /** Class for all dialog containers */
74
52
  dialog_container?: string;
75
- /** Class for all dialog bodies */
76
53
  dialog_body?: string;
77
- /** Class for all dialog footers */
78
54
  dialog_footer?: string;
79
- /** Class for all dropdown roots. */
55
+ dialog_fadein?: string;
56
+ dialog_fadeout?: string;
80
57
  dropdown?: string;
81
- /** Additional class for nested dropdowns. */
82
58
  dropdown_expansion?: string;
83
- /** Class for the dropdown scroll area. */
84
59
  dropdown_scroll_area?: string;
85
- /** Class for the dropdown content. */
86
60
  dropdown_content?: string;
87
- /** Class for all dropdown items. */
88
61
  dropdown_item?: string;
89
- /** Class for the currently active dropdown item. */
90
62
  dropdown_item_active?: string;
91
- /** Class for growing flex space */
92
63
  flex_space?: string;
93
- /** Class for all headings which are also semantic elements like h1, h2 etc. */
94
64
  heading?: string;
95
- /** Class for all labels */
96
65
  label?: string;
97
- /** Class for all links */
98
66
  link?: string;
99
- /** Class for all page roots. */
100
67
  page?: string;
101
- /** Class for page scrollbar size compensation elements. */
102
68
  page_scrollbar_comp?: string;
103
- /** Class for the page content column besides the scrollbar size compensation element. */
104
69
  page_content_col?: string;
105
- /** Class for page content roots. */
106
70
  page_content?: string;
107
- /** Class for all popover roots. */
108
71
  popover?: string;
109
- /** Class for the spike container area. */
110
72
  popover_spike_area?: string;
111
- /** Class for the popover scrollable area. */
112
73
  popover_scroll_area?: string;
113
- /** Class for the spike root. */
114
74
  popover_spike?: string;
115
- /** Class for the popover content. */
116
75
  popover_content?: string;
117
- /** Class for all radio button columns */
118
76
  radio_buttons?: string;
119
- /** Class for all radio button containing labels */
120
77
  radio_button_label?: string;
121
- /** Class for all radio button inputs */
122
78
  radio_button_input?: string;
123
- /** Class for radio button text content. This element may also be a text block. */
124
79
  radio_button_content?: string;
125
- /** Class for all rows */
126
80
  row?: string;
127
- /** Additional class for rows of content */
128
81
  row_content?: string;
129
- /** Additional class for rows of controls */
130
82
  row_control?: string;
131
- /** Class for all scroll view roots */
132
83
  scroll_view?: string;
133
- /** Class for the scrolling area. */
134
84
  scroll_view_area?: string;
135
- /** Class for scroll view content root. */
136
85
  scroll_view_content?: string;
137
- /** Class for scroll view start overflow indicators. */
138
86
  scroll_view_indicator_start?: string;
139
- /** Class for scroll view end overflow indicators. */
140
87
  scroll_view_indicator_end?: string;
141
- /** Class for visible overflow indicators. */
142
88
  scroll_view_indicator_visible?: string;
143
- /** Class for all text inputs */
144
89
  text_input?: string;
145
- /** Class for all text blocks */
146
90
  text?: string;
147
- /** Class for all validation messages */
148
91
  validation_message?: string;
149
- /** Class for all validation message containers. */
150
92
  validation_message_container?: string;
151
- /** Class for all text values */
152
93
  value?: string;
153
94
  }
package/dist/components/dialog.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import { ClassValue, Expression, StyleValue } from "rvx";
1
+ import { ClassValue, Context, Expression, StyleValue } from "rvx";
2
+ import { Event } from "rvx/event";
2
3
  export declare class DialogAbortError extends Error {
3
4
  }
4
5
  export interface Dialog<T> {
@@ -9,6 +10,7 @@ export type DialogInit<T> = (dialog: Dialog<T>) => unknown;
9
10
  export interface DialogOptions {
10
11
  cancellable?: boolean;
11
12
  }
13
+ export declare const DIALOG_FADEOUT: Context<Event<[tasks: Promise<void>[]]> | undefined>;
12
14
  export declare function showDialog<T = void>(init: DialogInit<T>, options?: DialogOptions): Promise<T>;
13
15
  export type DialogRole = "dialog" | "alertdialog";
14
16
  export declare function DialogBody(props: {
package/dist/components/dialog.js CHANGED
@@ -1,34 +1,51 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "rvx/jsx-runtime";
2
- import { captureSelf, map, mount } from "rvx";
2
+ import { captureSelf, Context, created, map, render, sig, teardown } from "rvx";
3
3
  import { TASKS, Tasks } from "rvx/async";
4
+ import { Emitter } from "rvx/event";
4
5
  import { uniqueId } from "rvx/id";
5
6
  import { FlexSpace, Heading, Row, Text, THEME } from "../index.js";
6
7
  import { LAYER, Layer } from "./layer.js";
7
8
  export class DialogAbortError extends Error {
8
9
  }
10
+ export const DIALOG_FADEOUT = new Context();
9
11
  export function showDialog(init, options) {
10
12
  return new Promise((resolve, reject) => {
11
13
  captureSelf(dispose => {
12
- mount(document.body, _jsx(Layer, { modal: true, children: () => {
13
- return TASKS.inject(new Tasks(), () => {
14
- const dialog = {
15
- resolve(value) {
16
- dispose();
17
- resolve(value);
18
- },
19
- reject(reason) {
20
- dispose();
21
- reject(reason);
22
- },
23
- };
24
- if (options?.cancellable ?? true) {
25
- LAYER.current.useHotkey("escape", () => {
26
- dialog.reject(new DialogAbortError());
27
- });
28
- }
29
- return init(dialog);
30
- });
31
- } }));
14
+ const enabled = sig(true);
15
+ const fadeout = new Emitter();
16
+ const view = render(_jsx(Layer, { modal: true, enabled: enabled, children: () => Context.inject([
17
+ TASKS.with(new Tasks()),
18
+ DIALOG_FADEOUT.with(fadeout.event),
19
+ ], () => {
20
+ const dialog = {
21
+ resolve(value) {
22
+ dispose();
23
+ resolve(value);
24
+ },
25
+ reject(reason) {
26
+ dispose();
27
+ reject(reason);
28
+ },
29
+ };
30
+ if (options?.cancellable ?? true) {
31
+ LAYER.current.useHotkey("escape", () => {
32
+ dialog.reject(new DialogAbortError());
33
+ });
34
+ }
35
+ return init(dialog);
36
+ }) }));
37
+ view.appendTo(document.body);
38
+ teardown(async () => {
39
+ try {
40
+ enabled.value = false;
41
+ const tasks = [];
42
+ fadeout.emit(tasks);
43
+ await Promise.all(tasks);
44
+ }
45
+ finally {
46
+ view.detach();
47
+ }
48
+ });
32
49
  });
33
50
  });
34
51
  }
@@ -45,7 +62,7 @@ export function DialogBody(props) {
45
62
  descriptionId = uniqueId();
46
63
  head.push(_jsx(Text, { id: descriptionId, children: props.description }));
47
64
  }
48
- return _jsx("div", { class: [
65
+ const body = _jsx("div", { class: [
49
66
  theme?.dialog_container,
50
67
  props.class,
51
68
  ], style: props.style, 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("div", { class: [
@@ -58,6 +75,22 @@ export function DialogBody(props) {
58
75
  "block-size": props.blockSize,
59
76
  "max-block-size": props.maxBlockSize,
60
77
  }, children: [head, props.children] }) });
78
+ created(() => {
79
+ if (theme?.dialog_fadein) {
80
+ body.offsetParent;
81
+ body.classList.add(theme.dialog_fadein);
82
+ }
83
+ });
84
+ DIALOG_FADEOUT.current?.(tasks => {
85
+ if (theme?.dialog_fadeout) {
86
+ body.classList.add(theme.dialog_fadeout);
87
+ }
88
+ const duration = parseInt(getComputedStyle(body).getPropertyValue("--dialog-fadeout-ms"));
89
+ if (Number.isSafeInteger(duration)) {
90
+ tasks.push(new Promise(resolve => setTimeout(resolve, duration)));
91
+ }
92
+ });
93
+ return body;
61
94
  }
62
95
  export function DialogFooter(props) {
63
96
  const theme = THEME.current;
package/dist/components/dialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/components/dialog.tsx"],"names":[],"mappings":"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"}
package/dist/theme.module.css CHANGED
@@ -29,6 +29,7 @@
29
29
  --space-gap: 0.4285714286rem;
30
30
  --layout-transition: .15s ease;
31
31
  --color-transition: .1s ease;
32
+ --dialog-fadeout-ms: 150;
32
33
  }
33
34
 
34
35
  @media (prefers-color-scheme: dark) {
@@ -226,10 +227,10 @@ body {
226
227
  @media (prefers-color-scheme: dark) {
227
228
  :root {
228
229
  --card-default-border: rgb(72, 72, 72);
229
- --card-info-border: rgb(0, 96, 128);
230
- --card-success-border: rgb(0, 128, 64);
231
- --card-warning-border: rgb(150, 117, 0);
232
- --card-danger-border: rgb(160, 0, 40);
230
+ --card-info-border: rgb(0, 192, 255);
231
+ --card-success-border: rgb(0, 255, 128);
232
+ --card-warning-border: rgb(255, 200, 0);
233
+ --card-danger-border: rgb(255, 0, 64);
233
234
  color-scheme: dark;
234
235
  }
235
236
  }
@@ -407,11 +408,35 @@ body {
407
408
  grid-template-columns: 1fr auto 1fr;
408
409
  grid-template-rows: 3fr auto 4fr;
409
410
  overflow: auto;
411
+ transition: opacity var(--layout-transition);
412
+ opacity: 0;
410
413
  }
411
414
 
415
+ .dialog_fadein {
416
+ opacity: 1;
417
+ }
418
+ .dialog_fadein .dialog_body {
419
+ transform: scale(1);
420
+ }
421
+
422
+ .dialog_fadeout {
423
+ pointer-events: none;
424
+ opacity: 0;
425
+ }
426
+ .dialog_fadeout .dialog_body {
427
+ transform: scale(0.9);
428
+ }
429
+
430
+ @media (prefers-reduced-motion) {
431
+ .dialog_body.dialog_body {
432
+ transform: unset;
433
+ }
434
+ }
412
435
  .dialog_body {
413
436
  grid-row: 2/3;
414
437
  grid-column: 2/3;
438
+ transform: scale(0.9);
439
+ transition: transform var(--layout-transition);
415
440
  background-color: var(--dialog-bg);
416
441
  box-shadow: var(--dialog-shadow);
417
442
  border-radius: var(--content-radius);
package/dist/theme.module.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/button.scss","../src/theme/components/card.scss","../src/theme/components/checkbox.scss","../src/theme/components/collapse.scss","../src/theme/components/column.scss","../src/theme/components/control-group.scss","../src/theme/components/dialog.scss","../src/theme/components/dropdown.scss","../src/theme/components/flex-space.scss","../src/theme/components/heading.scss","../src/theme/components/label.scss","../src/theme/components/link.scss","../src/theme/components/page.scss","../src/theme/components/popover.scss","../src/theme/components/radio-buttons.scss","../src/theme/components/row.scss","../src/theme/components/scroll-view.scss","../src/theme/components/text-input.scss","../src/theme/components/text.scss","../src/theme/components/validation.scss","../src/theme/components/value.scss"],"names":[],"mappings":"AASA;EACC;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;ECOA;EACA;EACA;EACA;EDPA;EACA;EACA;EACA;EACA;EACA;ECDA;EACA;EACA;EACA;EDCA;EAEA;EAEA;EACA;EAEA;EACA;;;AC3BC;EAFD;IANE;IAAA;IAAA;IAUA;;;ADwCH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AC5DC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;ACgFH;EACC;EACA;EACA;EACA;EAEA;EAEA;EDnEC,eACC;EAED,gBACC;ECkEF;EACA;;AAGA;EACC;;AAGD;EACC;EACA;;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKH;EACC;;;ADhIC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AEKH;EACC;EACA;EFcC,eACC;EAED,gBACC;;;AEbF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AC3BF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;;;ACtBD;EACC;EACA;EACA;;;AAGD;EACC,YACC;;;AAIF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC5DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;;AAHF;EACC;;AACA;EACC;;;AC/BH;EACC;EACA;EAEA;;AACA;EACC;;AAGD;EACC;EACA;;AAED;EACC;EACA;;;ANHA;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AOEH;EACC;EACA;EAEA;EAEA;EACA;EACA;EAEA;;;AAGD;EACC;EACA;EAEA;EACA;EACA;EACA;EPDC,eACC;EAED,gBACC;;;AOCH;EACC;;;AP7BC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AQEH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;ERPC,eACC;EAED,gBACC;;AQMF;EACC;;;AC9CF;EACC;EACA;EACA;;;ACHD;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;;AVxBC;EAFD;IANE;IAUA;;;AWPH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AXRA;EAFD;IANE;IAUA;;;AYPH;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;ACrBF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AbPC;EAFD;IANE;IAAA;IAAA;IAUA;;;AcDH;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EdnBC,eACC;EAED,gBACC;;;AevCH;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AC5BD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AhBAD;EAFD;IANE;IAAA;IAUA;;;AiBJH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AjBpCC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AkBEH;EACC;EACA;EACA;EAEA;EAEA;ElBmBC,eACC;EAED,gBACC;EkBrBF;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC1CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AnBIA;EAFD;IANE;IAUA;;;AoBPH;EACC;;;AAGD;EACC;;;ACZD;EACC","file":"theme.module.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/button.scss","../src/theme/components/card.scss","../src/theme/components/checkbox.scss","../src/theme/components/collapse.scss","../src/theme/components/column.scss","../src/theme/components/control-group.scss","../src/theme/components/dialog.scss","../src/theme/components/dropdown.scss","../src/theme/components/flex-space.scss","../src/theme/components/heading.scss","../src/theme/components/label.scss","../src/theme/components/link.scss","../src/theme/components/page.scss","../src/theme/components/popover.scss","../src/theme/components/radio-buttons.scss","../src/theme/components/row.scss","../src/theme/components/scroll-view.scss","../src/theme/components/text-input.scss","../src/theme/components/text.scss","../src/theme/components/validation.scss","../src/theme/components/value.scss"],"names":[],"mappings":"AASA;EACC;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;ECOA;EACA;EACA;EACA;EDPA;EACA;EACA;EACA;EACA;EACA;ECDA;EACA;EACA;EACA;EDCA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;;AC7BC;EAFD;IANE;IAAA;IAAA;IAUA;;;AD0CH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AC9DC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;ACgFH;EACC;EACA;EACA;EACA;EAEA;EAEA;EDnEC,eACC;EAED,gBACC;ECkEF;EACA;;AAGA;EACC;;AAGD;EACC;EACA;;;AAKD;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAdF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;;;AAKH;EACC;;;ADhIC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AEKH;EACC;EACA;EFcC,eACC;EAED,gBACC;;;AEbF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AC3BF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;;;ACtBD;EACC;EACA;EACA;;;AAGD;EACC,YACC;;;AAIF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC5DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;;AAHF;EACC;;AACA;EACC;;;AC/BH;EACC;EACA;EAEA;;AACA;EACC;;AAGD;EACC;EACA;;AAED;EACC;EACA;;;ANHA;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AOEH;EACC;EACA;EAEA;EAEA;EACA;EACA;EAEA;EAEA;EACA;;;AAGD;EACC;;AACA;EACC;;;AAIF;EACC;EACA;;AACA;EACC;;;AAIF;EACC;IACC;;;AAIF;EACC;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EP5BC,eACC;EAED,gBACC;;;AO4BH;EACC;;;APxDC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AQEH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;ERPC,eACC;EAED,gBACC;;AQMF;EACC;;;AC9CF;EACC;EACA;EACA;;;ACHD;EACC;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;EACA;;;AVxBC;EAFD;IANE;IAUA;;;AWPH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;AXRA;EAFD;IANE;IAUA;;;AYPH;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;ACrBF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AbPC;EAFD;IANE;IAAA;IAAA;IAUA;;;AcDH;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EdnBC,eACC;EAED,gBACC;;;AevCH;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;EACA;;;AC5BD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AhBAD;EAFD;IANE;IAAA;IAUA;;;AiBJH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;AjBpCC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AkBEH;EACC;EACA;EACA;EAEA;EAEA;ElBmBC,eACC;EAED,gBACC;EkBrBF;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC1CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AnBIA;EAFD;IANE;IAUA;;;AoBPH;EACC;;;AAGD;EACC;;;ACZD;EACC","file":"theme.module.css"}
package/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "rvx"
13
13
  ],
14
14
  "license": "MIT",
15
- "version": "0.1.10",
15
+ "version": "0.1.11",
16
16
  "type": "module",
17
17
  "main": "./dist/index.js",
18
18
  "sideEffects": false,
@@ -28,6 +28,6 @@
28
28
  "./dist/": "./dist/"
29
29
  },
30
30
  "dependencies": {
31
- "rvx": "^18.8.1"
31
+ "rvx": "^18.10.1"
32
32
  }
33
33
  }
package/src/common/theme.tsx CHANGED
@@ -23,21 +23,13 @@ export const THEME = new Context<Theme | undefined>(undefined);
23
23
  * ```
24
24
  */
25
25
  export interface Theme {
26
- /** Class for all buttons */
27
26
  button?: string;
28
- /** Additional class for buttons with the "default" variant */
29
27
  button_default?: string;
30
- /** Additional class for buttons with the "primary" variant */
31
28
  button_primary?: string;
32
- /** Additional class for buttons with the "success" variant */
33
29
  button_success?: string;
34
- /** Additional class for buttons with the "danger" variant */
35
30
  button_danger?: string;
36
- /** Additional class for buttons with the "warning" variant */
37
31
  button_warning?: string;
38
- /** Additional class for buttons with the "input" variant */
39
32
  button_input?: string;
40
- /** Additional class for buttons with the "text" variant */
41
33
  button_text?: string;
42
34
 
43
35
  card?: string;
@@ -48,128 +40,77 @@ export interface Theme {
48
40
  card_warning?: string;
49
41
  card_danger?: string;
50
42
 
51
- /** Class for all checkbox containing labels */
52
43
  checkbox_label?: string;
53
- /** Class for all checkbox inputs */
54
44
  checkbox_input?: string;
55
- /** Class for checkbox text content. This element may also be a text block. */
56
45
  checkbox_content?: string;
57
46
 
58
- /** Class for collapses */
59
47
  collapse?: string;
60
- /** Class for collapses that is when it's size has been measured. */
61
48
  collapse_sized?: string;
62
- /** Class for an additional element between the collapse container and the content. If this is undefined, the element is omitted. */
63
49
  collapse_view?: string;
64
- /** Class that is added to collapses to play an alert animation. */
65
50
  collapse_alert?: string;
66
- /** Additional class for visible collapses */
67
51
  collapse_visible?: string;
68
- /** Class for collapse content */
69
52
  collapse_content?: string;
70
53
 
71
- /** Class for all columns */
72
54
  column?: string;
73
- /** Additional class for columns of content */
74
55
  column_content?: string;
75
- /** Additional class for columns of controls */
76
56
  column_control?: string;
77
57
 
78
- /** Class for all inline control groups */
79
58
  control_group?: string;
80
59
 
81
- /** Class for all dialog containers */
82
60
  dialog_container?: string;
83
- /** Class for all dialog bodies */
84
61
  dialog_body?: string;
85
- /** Class for all dialog footers */
86
62
  dialog_footer?: string;
63
+ dialog_fadein?: string;
64
+ dialog_fadeout?: string;
87
65
 
88
- /** Class for all dropdown roots. */
89
66
  dropdown?: string;
90
- /** Additional class for nested dropdowns. */
91
67
  dropdown_expansion?: string;
92
- /** Class for the dropdown scroll area. */
93
68
  dropdown_scroll_area?: string;
94
- /** Class for the dropdown content. */
95
69
  dropdown_content?: string;
96
- /** Class for all dropdown items. */
97
70
  dropdown_item?: string;
98
- /** Class for the currently active dropdown item. */
99
71
  dropdown_item_active?: string;
100
72
 
101
- /** Class for growing flex space */
102
73
  flex_space?: string;
103
74
 
104
- /** Class for all headings which are also semantic elements like h1, h2 etc. */
105
75
  heading?: string;
106
76
 
107
- /** Class for all labels */
108
77
  label?: string;
109
78
 
110
- /** Class for all links */
111
79
  link?: string;
112
80
 
113
- /** Class for all page roots. */
114
81
  page?: string;
115
- /** Class for page scrollbar size compensation elements. */
116
82
  page_scrollbar_comp?: string;
117
- /** Class for the page content column besides the scrollbar size compensation element. */
118
83
  page_content_col?: string;
119
- /** Class for page content roots. */
120
84
  page_content?: string;
121
85
 
122
- /** Class for all popover roots. */
123
86
  popover?: string;
124
- /** Class for the spike container area. */
125
87
  popover_spike_area?: string;
126
- /** Class for the popover scrollable area. */
127
88
  popover_scroll_area?: string;
128
- /** Class for the spike root. */
129
89
  popover_spike?: string;
130
- /** Class for the popover content. */
131
90
  popover_content?: string;
132
91
 
133
- /** Class for all radio button columns */
134
92
  radio_buttons?: string;
135
- /** Class for all radio button containing labels */
136
93
  radio_button_label?: string;
137
- /** Class for all radio button inputs */
138
94
  radio_button_input?: string;
139
- /** Class for radio button text content. This element may also be a text block. */
140
95
  radio_button_content?: string;
141
96
 
142
- /** Class for all rows */
143
97
  row?: string;
144
- /** Additional class for rows of content */
145
98
  row_content?: string;
146
- /** Additional class for rows of controls */
147
99
  row_control?: string;
148
100
 
149
- /** Class for all scroll view roots */
150
101
  scroll_view?: string;
151
- /** Class for the scrolling area. */
152
102
  scroll_view_area?: string;
153
- /** Class for scroll view content root. */
154
103
  scroll_view_content?: string;
155
- /** Class for scroll view start overflow indicators. */
156
104
  scroll_view_indicator_start?: string;
157
- /** Class for scroll view end overflow indicators. */
158
105
  scroll_view_indicator_end?: string;
159
- /** Class for visible overflow indicators. */
160
106
  scroll_view_indicator_visible?: string;
161
107
 
162
- /** Class for all text inputs */
163
108
  text_input?: string;
164
109
 
165
- /** Class for all text blocks */
166
110
  text?: string;
167
111
 
168
- /** Class for all validation messages */
169
112
  validation_message?: string;
170
- /** Class for all validation message containers. */
171
113
  validation_message_container?: string;
172
114
 
173
- /** Class for all text values */
174
115
  value?: string;
175
116
  }
package/src/components/dialog.tsx CHANGED
@@ -1,5 +1,6 @@
1
- import { captureSelf, ClassValue, Expression, map, mount, StyleValue } from "rvx";
1
+ import { captureSelf, ClassValue, Context, created, Expression, map, render, sig, StyleValue, teardown } from "rvx";
2
2
  import { TASKS, Tasks } from "rvx/async";
3
+ import { Emitter, Event } from "rvx/event";
3
4
  import { uniqueId } from "rvx/id";
4
5
  import { FlexSpace, Heading, Row, Text, THEME } from "../index.js";
5
6
  import { LAYER, Layer } from "./layer.js";
@@ -17,34 +18,49 @@ export interface DialogOptions {
17
18
  cancellable?: boolean;
18
19
  }
19
20
 
21
+ export const DIALOG_FADEOUT = new Context<Event<[tasks: Promise<void>[]]> | undefined>();
22
+
20
23
  export function showDialog<T = void>(init: DialogInit<T>, options?: DialogOptions): Promise<T> {
21
24
  return new Promise<T>((resolve, reject) => {
22
25
  captureSelf(dispose => {
23
- mount(
24
- document.body,
25
- <Layer modal>
26
- {() => {
27
- return TASKS.inject(new Tasks(), () => {
28
- const dialog: Dialog<T> = {
29
- resolve(value) {
30
- dispose();
31
- resolve(value);
32
- },
33
- reject(reason) {
34
- dispose();
35
- reject(reason);
36
- },
37
- };
38
- if (options?.cancellable ?? true) {
39
- LAYER.current!.useHotkey("escape", () => {
40
- dialog.reject(new DialogAbortError());
41
- });
42
- }
43
- return init(dialog);
44
- });
45
- }}
26
+ const enabled = sig(true);
27
+ const fadeout = new Emitter<[tasks: Promise<void>[]]>();
28
+ const view = render(
29
+ <Layer modal enabled={enabled}>
30
+ {() => Context.inject([
31
+ TASKS.with(new Tasks()),
32
+ DIALOG_FADEOUT.with(fadeout.event),
33
+ ], () => {
34
+ const dialog: Dialog<T> = {
35
+ resolve(value) {
36
+ dispose();
37
+ resolve(value);
38
+ },
39
+ reject(reason) {
40
+ dispose();
41
+ reject(reason);
42
+ },
43
+ };
44
+ if (options?.cancellable ?? true) {
45
+ LAYER.current!.useHotkey("escape", () => {
46
+ dialog.reject(new DialogAbortError());
47
+ });
48
+ }
49
+ return init(dialog);
50
+ })}
46
51
  </Layer>
47
52
  );
53
+ view.appendTo(document.body);
54
+ teardown(async () => {
55
+ try {
56
+ enabled.value = false;
57
+ const tasks: Promise<void>[] = [];
58
+ fadeout.emit(tasks);
59
+ await Promise.all(tasks);
60
+ } finally {
61
+ view.detach();
62
+ }
63
+ });
48
64
  });
49
65
  });
50
66
  }
@@ -82,7 +98,7 @@ export function DialogBody(props: {
82
98
  head.push(<Text id={descriptionId}>{props.description}</Text>);
83
99
  }
84
100
 
85
- return <div
101
+ const body = <div
86
102
  class={[
87
103
  theme?.dialog_container,
88
104
  props.class,
@@ -108,7 +124,26 @@ export function DialogBody(props: {
108
124
  {head}
109
125
  {props.children}
110
126
  </div>
111
- </div>;
127
+ </div> as HTMLElement;
128
+
129
+ created(() => {
130
+ if (theme?.dialog_fadein) {
131
+ body.offsetParent;
132
+ body.classList.add(theme.dialog_fadein);
133
+ }
134
+ });
135
+
136
+ DIALOG_FADEOUT.current?.(tasks => {
137
+ if (theme?.dialog_fadeout) {
138
+ body.classList.add(theme.dialog_fadeout);
139
+ }
140
+ const duration = parseInt(getComputedStyle(body).getPropertyValue("--dialog-fadeout-ms"));
141
+ if (Number.isSafeInteger(duration)) {
142
+ tasks.push(new Promise(resolve => setTimeout(resolve, duration)));
143
+ }
144
+ });
145
+
146
+ return body;
112
147
  }
113
148
 
114
149
  export function DialogFooter(props: {
package/src/theme/base.scss CHANGED
@@ -39,6 +39,8 @@ $root-size: 14px;
39
39
 
40
40
  --layout-transition: .15s ease;
41
41
  --color-transition: .1s ease;
42
+
43
+ --dialog-fadeout-ms: 150;
42
44
  }
43
45
 
44
46
  @include common.theme((
package/src/theme/components/card.scss CHANGED
@@ -5,16 +5,16 @@
5
5
  dark: rgb(72, 72, 72),
6
6
  ),
7
7
  card-info-border: (
8
- dark: rgb(0, 96, 128),
8
+ dark: rgb(0, 192, 255),
9
9
  ),
10
10
  card-success-border: (
11
- dark: rgb(0, 128, 64),
11
+ dark: rgb(0, 255, 128),
12
12
  ),
13
13
  card-warning-border: (
14
- dark: rgb(150, 117, 0),
14
+ dark: rgb(255, 200, 0),
15
15
  ),
16
16
  card-danger-border: (
17
- dark: rgb(160, 0, 40),
17
+ dark: rgb(255, 0, 64),
18
18
  ),
19
19
  ));
20
20
 
package/src/theme/components/dialog.scss CHANGED
@@ -26,12 +26,39 @@
26
26
  grid-template-rows: 3fr auto 4fr;
27
27
 
28
28
  overflow: auto;
29
+
30
+ transition: opacity var(--layout-transition);
31
+ opacity: 0;
32
+ }
33
+
34
+ .dialog_fadein {
35
+ opacity: 1;
36
+ .dialog_body {
37
+ transform: scale(1);
38
+ }
39
+ }
40
+
41
+ .dialog_fadeout {
42
+ pointer-events: none;
43
+ opacity: 0;
44
+ .dialog_body {
45
+ transform: scale(.9);
46
+ }
47
+ }
48
+
49
+ @media (prefers-reduced-motion) {
50
+ .dialog_body.dialog_body {
51
+ transform: unset;
52
+ }
29
53
  }
30
54
 
31
55
  .dialog_body {
32
56
  grid-row: 2 / 3;
33
57
  grid-column: 2 / 3;
34
58
 
59
+ transform: scale(.9);
60
+ transition: transform var(--layout-transition);
61
+
35
62
  background-color: var(--dialog-bg);
36
63
  box-shadow: var(--dialog-shadow);
37
64
  border-radius: var(--content-radius);