@rvx/ui 0.1.15 → 0.1.16
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 +9 -0
- package/dist/components/card.js +1 -1
- package/dist/components/card.js.map +1 -1
- package/dist/components/layer.d.ts +11 -3
- package/dist/components/layer.js +17 -3
- package/dist/components/layer.js.map +1 -1
- package/dist/components/notifications.d.ts +11 -0
- package/dist/components/notifications.js +46 -0
- package/dist/components/notifications.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/theme.module.css +59 -0
- package/dist/theme.module.css.map +1 -1
- package/package.json +1 -1
- package/src/common/theme.tsx +10 -0
- package/src/components/card.tsx +1 -1
- package/src/components/layer.tsx +35 -11
- package/src/components/notifications.tsx +79 -0
- package/src/index.tsx +1 -0
- package/src/theme/components/notifications.scss +59 -0
- package/src/theme/theme.scss +1 -0
package/dist/common/theme.d.ts
CHANGED
|
@@ -70,6 +70,15 @@ export interface Theme {
|
|
|
70
70
|
nav_list?: string;
|
|
71
71
|
nav_list_item?: string;
|
|
72
72
|
nav_list_item_current?: string;
|
|
73
|
+
notification_host?: string;
|
|
74
|
+
notification_area?: string;
|
|
75
|
+
notification?: string;
|
|
76
|
+
notification_raw?: string;
|
|
77
|
+
notification_default?: string;
|
|
78
|
+
notification_info?: string;
|
|
79
|
+
notification_success?: string;
|
|
80
|
+
notification_warning?: string;
|
|
81
|
+
notification_danger?: string;
|
|
73
82
|
page?: string;
|
|
74
83
|
page_scrollbar_comp?: string;
|
|
75
84
|
page_content_col?: string;
|
package/dist/components/card.js
CHANGED
|
@@ -6,8 +6,8 @@ export function Card(props) {
|
|
|
6
6
|
const theme = THEME.current;
|
|
7
7
|
return _jsx("div", { class: [
|
|
8
8
|
theme?.card,
|
|
9
|
+
props.raw ? theme?.card_raw : undefined,
|
|
9
10
|
map(props.variant, variant => theme?.[`card_${variant ?? "default"}`]),
|
|
10
|
-
map(props.raw, unpadded => unpadded ? theme?.card_raw : undefined),
|
|
11
11
|
], children: props.raw
|
|
12
12
|
? props.children
|
|
13
13
|
: _jsx(Column, { class: theme?.card_content, children: props.children }) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,GAAG,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC,MAAM,UAAU,IAAI,CAAC,KAIpB;IACA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,OAAO,cACN,KAAK,EAAE;YACN,KAAK,EAAE,IAAI;YACX,
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,GAAG,EAAE,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC,MAAM,UAAU,IAAI,CAAC,KAIpB;IACA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,OAAO,cACN,KAAK,EAAE;YACN,KAAK,EAAE,IAAI;YACX,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS;YACvC,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,QAAQ,OAAO,IAAI,SAAS,EAAE,CAAC,CAAC;SACtE,YAEA,KAAK,CAAC,GAAG;YACT,CAAC,CAAC,KAAK,CAAC,QAAQ;YAChB,CAAC,CAAC,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,YAClC,KAAK,CAAC,QAAQ,GACP,GAEL,CAAC;AACR,CAAC"}
|
|
@@ -1,11 +1,19 @@
|
|
|
1
|
-
import { Context, Expression } from "rvx";
|
|
1
|
+
import { Component, Context, Expression } from "rvx";
|
|
2
2
|
import { Action } from "../common/events.js";
|
|
3
3
|
export declare const LAYER: Context<LayerHandle | undefined>;
|
|
4
4
|
/**
|
|
5
5
|
* Render content inside the root layer.
|
|
6
6
|
*/
|
|
7
7
|
export declare function RootLayer(props: {
|
|
8
|
-
children:
|
|
8
|
+
children: Component;
|
|
9
|
+
}): unknown;
|
|
10
|
+
/**
|
|
11
|
+
* Render content inside the top layer.
|
|
12
|
+
*
|
|
13
|
+
* This layer is not affected by other modal layers.
|
|
14
|
+
*/
|
|
15
|
+
export declare function TopLayer(props: {
|
|
16
|
+
children: Component;
|
|
9
17
|
}): unknown;
|
|
10
18
|
/**
|
|
11
19
|
* An input layer that is inert while there are other modal layers on top of it.
|
|
@@ -15,7 +23,7 @@ export declare function RootLayer(props: {
|
|
|
15
23
|
* When disposed, focus is moved back to the previously focused element.
|
|
16
24
|
*/
|
|
17
25
|
export declare function Layer(props: {
|
|
18
|
-
children:
|
|
26
|
+
children: Component;
|
|
19
27
|
/**
|
|
20
28
|
* If true, all layers below this one are marked as inert until the current context is disposed.
|
|
21
29
|
*/
|
package/dist/components/layer.js
CHANGED
|
@@ -10,15 +10,20 @@ const LAYERS = $([
|
|
|
10
10
|
autoFocusFallback: undefined,
|
|
11
11
|
},
|
|
12
12
|
]);
|
|
13
|
+
const TOP_LAYER = {
|
|
14
|
+
roots: [],
|
|
15
|
+
modal: false,
|
|
16
|
+
inert: $(false),
|
|
17
|
+
autoFocusFallback: undefined,
|
|
18
|
+
};
|
|
13
19
|
uncapture(() => watch(LAYERS, layers => {
|
|
14
20
|
const modal = layers.findLastIndex(l => l.modal);
|
|
15
21
|
for (let i = 0; i < layers.length; i++) {
|
|
16
22
|
layers[i].inert.value = i < modal;
|
|
17
23
|
}
|
|
18
24
|
}));
|
|
19
|
-
|
|
20
|
-
const
|
|
21
|
-
const root = _jsx("div", { style: { display: "contents" }, inert: layer.inert, children: _jsx(Inject, { context: LAYER, value: new Handle(layer), children: props.children }) });
|
|
25
|
+
function staticLayer(layer, content) {
|
|
26
|
+
const root = _jsx("div", { style: { display: "contents" }, inert: layer.inert, children: _jsx(Inject, { context: LAYER, value: new Handle(layer), children: content }) });
|
|
22
27
|
layer.roots.push(root);
|
|
23
28
|
teardown(() => {
|
|
24
29
|
const index = layer.roots.indexOf(root);
|
|
@@ -28,6 +33,12 @@ export function RootLayer(props) {
|
|
|
28
33
|
});
|
|
29
34
|
return root;
|
|
30
35
|
}
|
|
36
|
+
export function RootLayer(props) {
|
|
37
|
+
return staticLayer(untrack(() => LAYERS.value[0]), props.children);
|
|
38
|
+
}
|
|
39
|
+
export function TopLayer(props) {
|
|
40
|
+
return staticLayer(TOP_LAYER, props.children);
|
|
41
|
+
}
|
|
31
42
|
export function Layer(props) {
|
|
32
43
|
const layer = {
|
|
33
44
|
roots: [],
|
|
@@ -111,6 +122,9 @@ class Handle {
|
|
|
111
122
|
return this.#instance.inert.value;
|
|
112
123
|
}
|
|
113
124
|
get top() {
|
|
125
|
+
if (this.#instance === TOP_LAYER) {
|
|
126
|
+
return true;
|
|
127
|
+
}
|
|
114
128
|
const layers = LAYERS.value;
|
|
115
129
|
return layers[layers.length - 1] === this.#instance;
|
|
116
130
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layer.js","sourceRoot":"","sources":["../../src/components/layer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"layer.js","sourceRoot":"","sources":["../../src/components/layer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Component } from "rvx";
|
|
2
|
+
export type NotificationVariant = "default" | "info" | "success" | "warning" | "danger";
|
|
3
|
+
export interface Notification {
|
|
4
|
+
dispose(): void;
|
|
5
|
+
}
|
|
6
|
+
export interface NotificationOptions {
|
|
7
|
+
variant?: NotificationVariant;
|
|
8
|
+
timeout?: number;
|
|
9
|
+
raw?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export declare function showNotification(content: Component<Notification>, options?: NotificationOptions): Notification;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsx as _jsx } from "rvx/jsx-runtime";
|
|
2
|
+
import { $, captureSelf, For, movable, render, teardown } from "rvx";
|
|
3
|
+
import { useTimeout } from "rvx/async";
|
|
4
|
+
import { THEME } from "../common/theme.js";
|
|
5
|
+
import { Collapse } from "./collapse.js";
|
|
6
|
+
import { Column } from "./column.js";
|
|
7
|
+
let host;
|
|
8
|
+
const instances = $([]);
|
|
9
|
+
export function showNotification(content, options) {
|
|
10
|
+
const theme = THEME.current;
|
|
11
|
+
if (!host) {
|
|
12
|
+
host = render(_jsx("div", { class: theme?.notification_host, children: _jsx(Column, { class: theme?.notification_area, children: _jsx(For, { each: instances, children: instance => instance() }) }) }));
|
|
13
|
+
}
|
|
14
|
+
host.appendTo(document.body);
|
|
15
|
+
let handle;
|
|
16
|
+
captureSelf(dispose => {
|
|
17
|
+
handle = { dispose };
|
|
18
|
+
const visible = $(true);
|
|
19
|
+
const instance = movable(_jsx(Collapse, { fadein: true, visible: visible, children: _jsx("div", { class: [
|
|
20
|
+
theme?.notification,
|
|
21
|
+
options?.raw ? theme?.notification_raw : undefined,
|
|
22
|
+
theme?.[`notification_${options?.variant ?? "default"}`],
|
|
23
|
+
], children: options?.raw
|
|
24
|
+
? content(handle)
|
|
25
|
+
: _jsx(Column, { children: content(handle) }) }) })).move;
|
|
26
|
+
instances.update(instances => {
|
|
27
|
+
instances.push(instance);
|
|
28
|
+
});
|
|
29
|
+
if (options?.timeout !== undefined) {
|
|
30
|
+
useTimeout(dispose, options.timeout);
|
|
31
|
+
}
|
|
32
|
+
teardown(() => {
|
|
33
|
+
visible.value = false;
|
|
34
|
+
setTimeout(() => {
|
|
35
|
+
instances.update(instances => {
|
|
36
|
+
const index = instances.indexOf(instance);
|
|
37
|
+
if (index >= 0) {
|
|
38
|
+
instances.splice(index, 1);
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
}, 1000);
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
return handle;
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=notifications.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"notifications.js","sourceRoot":"","sources":["../../src/components/notifications.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAE,WAAW,EAAa,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAQ,MAAM,KAAK,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAcrC,IAAI,IAAsB,CAAC;AAC3B,MAAM,SAAS,GAAG,CAAC,CAAc,EAAE,CAAC,CAAC;AAErC,MAAM,UAAU,gBAAgB,CAAC,OAAgC,EAAE,OAA6B;IAC/F,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;QACX,IAAI,GAAG,MAAM,CAAC,cAAK,KAAK,EAAE,KAAK,EAAE,iBAAiB,YACjD,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,iBAAiB,YACtC,KAAC,GAAG,IAAC,IAAI,EAAE,SAAS,YAClB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,GAClB,GACE,GACJ,CAAC,CAAC;IACT,CAAC;IACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAE7B,IAAI,MAAqB,CAAC;IAC1B,WAAW,CAAC,OAAO,CAAC,EAAE;QACrB,MAAM,GAAG,EAAE,OAAO,EAAE,CAAC;QACrB,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;QAExB,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAC,QAAQ,IAAC,MAAM,QAAC,OAAO,EAAE,OAAO,YACzD,cAAK,KAAK,EAAE;oBACX,KAAK,EAAE,YAAY;oBACnB,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS;oBAClD,KAAK,EAAE,CAAC,gBAAgB,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,CAAC;iBACxD,YACC,OAAO,EAAE,GAAG;oBACZ,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC;oBACjB,CAAC,CAAC,KAAC,MAAM,cACP,OAAO,CAAC,MAAM,CAAC,GACR,GAEL,GACI,CAAC,CAAC,IAAI,CAAC;QAElB,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE;YAC5B,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;QAGH,IAAI,OAAO,EAAE,OAAO,KAAK,SAAS,EAAE,CAAC;YAEpC,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;QACtC,CAAC;QAED,QAAQ,CAAC,GAAG,EAAE;YACb,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;YACtB,UAAU,CAAC,GAAG,EAAE;gBACf,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,EAAE;oBAC5B,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;oBAC1C,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;wBAChB,SAAS,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;oBAC5B,CAAC;gBACF,CAAC,CAAC,CAAC;YACJ,CAAC,EAAE,IAAI,CAAC,CAAC;QACV,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AACf,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -18,6 +18,7 @@ export * from "./components/label.js";
|
|
|
18
18
|
export * from "./components/layer.js";
|
|
19
19
|
export * from "./components/link.js";
|
|
20
20
|
export * from "./components/nav-list.js";
|
|
21
|
+
export * from "./components/notifications.js";
|
|
21
22
|
export * from "./components/page.js";
|
|
22
23
|
export * from "./components/popout.js";
|
|
23
24
|
export * from "./components/popover.js";
|
package/dist/index.js
CHANGED
|
@@ -18,6 +18,7 @@ export * from "./components/label.js";
|
|
|
18
18
|
export * from "./components/layer.js";
|
|
19
19
|
export * from "./components/link.js";
|
|
20
20
|
export * from "./components/nav-list.js";
|
|
21
|
+
export * from "./components/notifications.js";
|
|
21
22
|
export * from "./components/page.js";
|
|
22
23
|
export * from "./components/popout.js";
|
|
23
24
|
export * from "./components/popover.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kCAAkC,CAAC;AACjD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}
|
package/dist/theme.module.css
CHANGED
|
@@ -650,6 +650,65 @@ h6.heading {
|
|
|
650
650
|
z-index: 1;
|
|
651
651
|
}
|
|
652
652
|
|
|
653
|
+
@media (prefers-color-scheme: dark) {
|
|
654
|
+
:root {
|
|
655
|
+
--notification-default-border: rgb(72, 72, 72);
|
|
656
|
+
--notification-info-border: rgb(0, 192, 255);
|
|
657
|
+
--notification-success-border: rgb(0, 255, 128);
|
|
658
|
+
--notification-warning-border: rgb(255, 200, 0);
|
|
659
|
+
--notification-danger-border: rgb(255, 0, 64);
|
|
660
|
+
--notification-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
|
|
661
|
+
color-scheme: dark;
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
.notification_host {
|
|
665
|
+
--overflow-safe-area: .5rem;
|
|
666
|
+
display: grid;
|
|
667
|
+
grid-template-columns: 1fr minmax(auto, 32rem) 0;
|
|
668
|
+
grid-template-rows: 1fr auto 0;
|
|
669
|
+
overflow: auto;
|
|
670
|
+
position: fixed;
|
|
671
|
+
inset: 0;
|
|
672
|
+
pointer-events: none;
|
|
673
|
+
z-index: 2;
|
|
674
|
+
padding: 1rem;
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
.notification_area {
|
|
678
|
+
grid-area: 2/2;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
.notification {
|
|
682
|
+
pointer-events: all;
|
|
683
|
+
box-shadow: var(--notification-shadow);
|
|
684
|
+
border-radius: var(--content-radius);
|
|
685
|
+
background-color: var(--bg);
|
|
686
|
+
}
|
|
687
|
+
.notification:not(.notification_raw) {
|
|
688
|
+
padding-block: calc(var(--content-pad-block-start) - var(--content-border)) calc(var(--content-pad-block-end) - var(--content-border));
|
|
689
|
+
padding-inline: calc(var(--content-pad-inline-start) - var(--content-border)) calc(var(--content-pad-inline-end) - var(--content-border));
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
.notification_default {
|
|
693
|
+
border: var(--content-border) solid var(--notification-default-border);
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
.notification_info {
|
|
697
|
+
border: var(--content-border) solid var(--notification-info-border);
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
.notification_success {
|
|
701
|
+
border: var(--content-border) solid var(--notification-success-border);
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
.notification_warning {
|
|
705
|
+
border: var(--content-border) solid var(--notification-warning-border);
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
.notification_danger {
|
|
709
|
+
border: var(--content-border) solid var(--notification-danger-border);
|
|
710
|
+
}
|
|
711
|
+
|
|
653
712
|
.page {
|
|
654
713
|
margin: 2rem;
|
|
655
714
|
display: flex;
|
|
@@ -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/nav-list.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/slider.scss","../src/theme/components/tabs.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;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;;ACjCC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;ADiDH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;ACrEC;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;;AAEA;EFYC,eACC;EAED,gBACC;;;AEVF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AC9BF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AC3BD;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;;;AC3DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;AAGD;ELAA,eACC;EAED,gBACC;;;AKVF;EACC;;AACA;EACC;;AAGD;ELAA,eACC;EAED,gBACC;;;AMvCH;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;;;AZTA;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AaiBH;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EbhBC,eACC;EAED,gBACC;EaeF;EACA;;AAGA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;;
|
|
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/nav-list.scss","../src/theme/components/notifications.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/slider.scss","../src/theme/components/tabs.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;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;;ACjCC;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;ADiDH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;ACrEC;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;;AAEA;EFYC,eACC;EAED,gBACC;;;AEVF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AC9BF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AC3BD;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;;;AC3DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;AAGD;ELAA,eACC;EAED,gBACC;;;AKVF;EACC;;AACA;EACC;;AAGD;ELAA,eACC;EAED,gBACC;;;AMvCH;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;;;AZTA;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AaiBH;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EbhBC,eACC;EAED,gBACC;EaeF;EACA;;AAGA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;;AbnEC;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AcSH;EACC;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EdbC,eACC;EAED,gBACC;;;AceF;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACvDF;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AfPC;EAFD;IANE;IAAA;IAAA;IAUA;;;AgBDH;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;EhBnBC,eACC;EAED,gBACC;;;AiBvCH;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;ACjCD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;;AALF;EACC;EACA;;AACA;EACC;EACA;;;AlBAD;EAFD;IANE;IAAA;IAUA;;;AmBJH;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;;;AChDD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;;ApBED;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AqBQH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EAEA;EACA;EAEA,eACC;EAED,gBACC;EAGD;EACA;EACA;EACA;EAEA;EACA;;AAGA;EAEC;EACA;;AAED;EACC;;;AAIF;EACC;EACA;;;AAGD;ErBjCE,eACC;EAED,gBACC;;;AA3BD;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AsBEH;EACC;EACA;EACA;EAEA;EAEA;EtBmBC,eACC;EAED,gBACC;EsBrBF;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC1CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AvBIA;EAFD;IANE;IAUA;;;AwBPH;EACC;;;AAGD;EACC;;;ACZD;EACC","file":"theme.module.css"}
|
package/package.json
CHANGED
package/src/common/theme.tsx
CHANGED
|
@@ -85,6 +85,16 @@ export interface Theme {
|
|
|
85
85
|
nav_list_item?: string;
|
|
86
86
|
nav_list_item_current?: string;
|
|
87
87
|
|
|
88
|
+
notification_host?: string;
|
|
89
|
+
notification_area?: string;
|
|
90
|
+
notification?: string;
|
|
91
|
+
notification_raw?: string;
|
|
92
|
+
notification_default?: string;
|
|
93
|
+
notification_info?: string;
|
|
94
|
+
notification_success?: string;
|
|
95
|
+
notification_warning?: string;
|
|
96
|
+
notification_danger?: string;
|
|
97
|
+
|
|
88
98
|
page?: string;
|
|
89
99
|
page_scrollbar_comp?: string;
|
|
90
100
|
page_content_col?: string;
|
package/src/components/card.tsx
CHANGED
|
@@ -13,8 +13,8 @@ export function Card(props: {
|
|
|
13
13
|
return <div
|
|
14
14
|
class={[
|
|
15
15
|
theme?.card,
|
|
16
|
+
props.raw ? theme?.card_raw : undefined,
|
|
16
17
|
map(props.variant, variant => theme?.[`card_${variant ?? "default"}`]),
|
|
17
|
-
map(props.raw, unpadded => unpadded ? theme?.card_raw : undefined),
|
|
18
18
|
]}
|
|
19
19
|
>
|
|
20
20
|
{props.raw
|
package/src/components/layer.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { $, Context, Expression, get, Inject, memo, Signal, teardown, uncapture, untrack, watch } from "rvx";
|
|
1
|
+
import { $, Component, Context, Expression, get, Inject, memo, Signal, teardown, uncapture, untrack, watch } from "rvx";
|
|
2
2
|
|
|
3
3
|
import { Action, handleActionEvent, keyFor } from "../common/events.js";
|
|
4
4
|
|
|
@@ -24,6 +24,13 @@ const LAYERS = $<LayerInstance[]>([
|
|
|
24
24
|
},
|
|
25
25
|
]);
|
|
26
26
|
|
|
27
|
+
const TOP_LAYER: LayerInstance = {
|
|
28
|
+
roots: [],
|
|
29
|
+
modal: false,
|
|
30
|
+
inert: $(false),
|
|
31
|
+
autoFocusFallback: undefined,
|
|
32
|
+
};
|
|
33
|
+
|
|
27
34
|
uncapture(() => watch(LAYERS, layers => {
|
|
28
35
|
const modal = layers.findLastIndex(l => l.modal);
|
|
29
36
|
for (let i = 0; i < layers.length; i++) {
|
|
@@ -31,19 +38,13 @@ uncapture(() => watch(LAYERS, layers => {
|
|
|
31
38
|
}
|
|
32
39
|
}));
|
|
33
40
|
|
|
34
|
-
|
|
35
|
-
* Render content inside the root layer.
|
|
36
|
-
*/
|
|
37
|
-
export function RootLayer(props: {
|
|
38
|
-
children: () => unknown;
|
|
39
|
-
}): unknown {
|
|
40
|
-
const layer = LAYERS.value[0];
|
|
41
|
+
function staticLayer(layer: LayerInstance, content: Component): unknown {
|
|
41
42
|
const root = <div
|
|
42
43
|
style={{ display: "contents" }}
|
|
43
44
|
inert={layer.inert}
|
|
44
45
|
>
|
|
45
46
|
<Inject context={LAYER} value={new Handle(layer)}>
|
|
46
|
-
{
|
|
47
|
+
{content}
|
|
47
48
|
</Inject>
|
|
48
49
|
</div> as HTMLDivElement;
|
|
49
50
|
layer.roots.push(root);
|
|
@@ -56,6 +57,26 @@ export function RootLayer(props: {
|
|
|
56
57
|
return root;
|
|
57
58
|
}
|
|
58
59
|
|
|
60
|
+
/**
|
|
61
|
+
* Render content inside the root layer.
|
|
62
|
+
*/
|
|
63
|
+
export function RootLayer(props: {
|
|
64
|
+
children: Component;
|
|
65
|
+
}): unknown {
|
|
66
|
+
return staticLayer(untrack(() => LAYERS.value[0]), props.children);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Render content inside the top layer.
|
|
71
|
+
*
|
|
72
|
+
* This layer is not affected by other modal layers.
|
|
73
|
+
*/
|
|
74
|
+
export function TopLayer(props: {
|
|
75
|
+
children: Component;
|
|
76
|
+
}): unknown {
|
|
77
|
+
return staticLayer(TOP_LAYER, props.children);
|
|
78
|
+
}
|
|
79
|
+
|
|
59
80
|
/**
|
|
60
81
|
* An input layer that is inert while there are other modal layers on top of it.
|
|
61
82
|
*
|
|
@@ -64,7 +85,7 @@ export function RootLayer(props: {
|
|
|
64
85
|
* When disposed, focus is moved back to the previously focused element.
|
|
65
86
|
*/
|
|
66
87
|
export function Layer(props: {
|
|
67
|
-
children:
|
|
88
|
+
children: Component;
|
|
68
89
|
|
|
69
90
|
/**
|
|
70
91
|
* If true, all layers below this one are marked as inert until the current context is disposed.
|
|
@@ -240,6 +261,9 @@ class Handle implements LayerHandle {
|
|
|
240
261
|
}
|
|
241
262
|
|
|
242
263
|
get top(): boolean {
|
|
264
|
+
if (this.#instance === TOP_LAYER) {
|
|
265
|
+
return true;
|
|
266
|
+
}
|
|
243
267
|
const layers = LAYERS.value;
|
|
244
268
|
return layers[layers.length - 1] === this.#instance;
|
|
245
269
|
}
|
|
@@ -276,7 +300,7 @@ class Handle implements LayerHandle {
|
|
|
276
300
|
if (i < 0) {
|
|
277
301
|
return this.contains(node);
|
|
278
302
|
}
|
|
279
|
-
for (
|
|
303
|
+
for (; ;) {
|
|
280
304
|
if (instanceContains(layers[i], node)) {
|
|
281
305
|
return true;
|
|
282
306
|
}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { $, captureSelf, Component, For, movable, render, teardown, View } from "rvx";
|
|
2
|
+
import { useTimeout } from "rvx/async";
|
|
3
|
+
import { THEME } from "../common/theme.js";
|
|
4
|
+
import { Collapse } from "./collapse.js";
|
|
5
|
+
import { Column } from "./column.js";
|
|
6
|
+
|
|
7
|
+
export type NotificationVariant = "default" | "info" | "success" | "warning" | "danger";
|
|
8
|
+
|
|
9
|
+
export interface Notification {
|
|
10
|
+
dispose(): void;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export interface NotificationOptions {
|
|
14
|
+
variant?: NotificationVariant;
|
|
15
|
+
timeout?: number;
|
|
16
|
+
raw?: boolean;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
let host: View | undefined;
|
|
20
|
+
const instances = $<Component[]>([]);
|
|
21
|
+
|
|
22
|
+
export function showNotification(content: Component<Notification>, options?: NotificationOptions): Notification {
|
|
23
|
+
const theme = THEME.current;
|
|
24
|
+
if (!host) {
|
|
25
|
+
host = render(<div class={theme?.notification_host}>
|
|
26
|
+
<Column class={theme?.notification_area}>
|
|
27
|
+
<For each={instances}>
|
|
28
|
+
{instance => instance()}
|
|
29
|
+
</For>
|
|
30
|
+
</Column>
|
|
31
|
+
</div>);
|
|
32
|
+
}
|
|
33
|
+
host.appendTo(document.body);
|
|
34
|
+
|
|
35
|
+
let handle!: Notification;
|
|
36
|
+
captureSelf(dispose => {
|
|
37
|
+
handle = { dispose };
|
|
38
|
+
const visible = $(true);
|
|
39
|
+
|
|
40
|
+
const instance = movable(<Collapse fadein visible={visible}>
|
|
41
|
+
<div class={[
|
|
42
|
+
theme?.notification,
|
|
43
|
+
options?.raw ? theme?.notification_raw : undefined,
|
|
44
|
+
theme?.[`notification_${options?.variant ?? "default"}`],
|
|
45
|
+
]}>
|
|
46
|
+
{options?.raw
|
|
47
|
+
? content(handle)
|
|
48
|
+
: <Column>
|
|
49
|
+
{content(handle)}
|
|
50
|
+
</Column>
|
|
51
|
+
}
|
|
52
|
+
</div>
|
|
53
|
+
</Collapse>).move;
|
|
54
|
+
|
|
55
|
+
instances.update(instances => {
|
|
56
|
+
instances.push(instance);
|
|
57
|
+
});
|
|
58
|
+
// TODO: Scroll notification into view.
|
|
59
|
+
|
|
60
|
+
if (options?.timeout !== undefined) {
|
|
61
|
+
// TODO: Pause & reset on notification area hover.
|
|
62
|
+
useTimeout(dispose, options.timeout);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
teardown(() => {
|
|
66
|
+
visible.value = false;
|
|
67
|
+
setTimeout(() => {
|
|
68
|
+
instances.update(instances => {
|
|
69
|
+
const index = instances.indexOf(instance);
|
|
70
|
+
if (index >= 0) {
|
|
71
|
+
instances.splice(index, 1);
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
}, 1000);
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
return handle;
|
|
79
|
+
}
|
package/src/index.tsx
CHANGED
|
@@ -18,6 +18,7 @@ export * from "./components/label.js";
|
|
|
18
18
|
export * from "./components/layer.js";
|
|
19
19
|
export * from "./components/link.js";
|
|
20
20
|
export * from "./components/nav-list.js";
|
|
21
|
+
export * from "./components/notifications.js";
|
|
21
22
|
export * from "./components/page.js";
|
|
22
23
|
export * from "./components/popout.js";
|
|
23
24
|
export * from "./components/popover.js";
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
@use "../common";
|
|
2
|
+
|
|
3
|
+
// TODO: Maybe just use cards with extra marker class for optional style distinction.
|
|
4
|
+
@include common.theme((
|
|
5
|
+
notification-default-border: (
|
|
6
|
+
dark: rgb(72, 72, 72),
|
|
7
|
+
),
|
|
8
|
+
notification-info-border: (
|
|
9
|
+
dark: rgb(0, 192, 255),
|
|
10
|
+
),
|
|
11
|
+
notification-success-border: (
|
|
12
|
+
dark: rgb(0, 255, 128),
|
|
13
|
+
),
|
|
14
|
+
notification-warning-border: (
|
|
15
|
+
dark: rgb(255, 200, 0),
|
|
16
|
+
),
|
|
17
|
+
notification-danger-border: (
|
|
18
|
+
dark: rgb(255, 0, 64),
|
|
19
|
+
),
|
|
20
|
+
notification-shadow: (
|
|
21
|
+
dark: 0 0 .5rem rgba(0, 0, 0, .5),
|
|
22
|
+
),
|
|
23
|
+
));
|
|
24
|
+
|
|
25
|
+
.notification_host {
|
|
26
|
+
--overflow-safe-area: .5rem;
|
|
27
|
+
display: grid;
|
|
28
|
+
// TODO: Globally configurable position & inline size.
|
|
29
|
+
grid-template-columns: 1fr minmax(auto, 32rem) 0;
|
|
30
|
+
grid-template-rows: 1fr auto 0;
|
|
31
|
+
overflow: auto;
|
|
32
|
+
|
|
33
|
+
position: fixed;
|
|
34
|
+
inset: 0;
|
|
35
|
+
pointer-events: none;
|
|
36
|
+
z-index: 2;
|
|
37
|
+
padding: 1rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.notification_area {
|
|
41
|
+
grid-area: 2 / 2;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.notification {
|
|
45
|
+
pointer-events: all;
|
|
46
|
+
box-shadow: var(--notification-shadow);
|
|
47
|
+
border-radius: var(--content-radius);
|
|
48
|
+
background-color: var(--bg);
|
|
49
|
+
|
|
50
|
+
&:not(.notification_raw) {
|
|
51
|
+
@include common.padding(content-pad, var(--content-border));
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@each $name in (default, info, success, warning, danger) {
|
|
56
|
+
.notification_#{$name} {
|
|
57
|
+
border: var(--content-border) solid var(--notification-#{$name}-border);
|
|
58
|
+
}
|
|
59
|
+
}
|
package/src/theme/theme.scss
CHANGED