@rvx/ui 0.1.27 → 0.1.29
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 -1
- package/dist/common/theme.d.ts.map +1 -1
- package/dist/components/scroll-view.d.ts +1 -0
- package/dist/components/scroll-view.d.ts.map +1 -1
- package/dist/components/scroll-view.js +14 -10
- package/dist/components/scroll-view.js.map +1 -1
- package/dist/components/tabs.d.ts +25 -1
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +32 -16
- package/dist/components/tabs.js.map +1 -1
- package/dist/theme.module.css +21 -7
- package/dist/theme.module.css.map +1 -1
- package/package.json +1 -1
- package/src/common/theme.tsx +1 -1
- package/src/components/scroll-view.tsx +16 -10
- package/src/components/tabs.tsx +76 -41
- package/src/theme/base.scss +1 -1
- package/src/theme/components/page.scss +2 -2
- package/src/theme/components/separated.scss +8 -4
- package/src/theme/components/tabs.scss +12 -0
package/dist/common/theme.d.ts
CHANGED
|
@@ -113,13 +113,13 @@ export interface Theme {
|
|
|
113
113
|
scroll_view_indicator_visible?: string;
|
|
114
114
|
separated_column?: string;
|
|
115
115
|
separated_row?: string;
|
|
116
|
+
has_separator?: string;
|
|
116
117
|
slider_host?: string;
|
|
117
118
|
tab_handle?: string;
|
|
118
119
|
tab_handle_current?: string;
|
|
119
120
|
tab_list?: string;
|
|
120
121
|
tab_list_padded?: string;
|
|
121
122
|
tab_panel?: string;
|
|
122
|
-
tab_panel_padded?: string;
|
|
123
123
|
text_input?: string;
|
|
124
124
|
text?: string;
|
|
125
125
|
validation_message?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/common/theme.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/common/theme.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-view.d.ts","sourceRoot":"","sources":["../../src/components/scroll-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,UAAU,EAAE,UAAU,EAAY,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"scroll-view.d.ts","sourceRoot":"","sources":["../../src/components/scroll-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,UAAU,EAAE,UAAU,EAAY,MAAM,KAAK,CAAC;AAO1D,wBAAgB,UAAU,CAAC,KAAK,EAAE;IACjC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB,GAAG,OAAO,CA+FV"}
|
|
@@ -3,10 +3,11 @@ import { $, teardown } from "rvx";
|
|
|
3
3
|
import { debounceEvent } from "../common/events.js";
|
|
4
4
|
import { THEME } from "../common/theme.js";
|
|
5
5
|
import { axisEquals, DOWN, getBlockStart, getSize, RIGHT, UP } from "../common/writing-mode.js";
|
|
6
|
+
const DEBOUNCE_DELAY = 100;
|
|
6
7
|
export function ScrollView(props) {
|
|
7
8
|
const theme = THEME.current;
|
|
8
9
|
const vertical = $(undefined);
|
|
9
|
-
const scrollbarComp = $(0);
|
|
10
|
+
const scrollbarComp = props.scrollbarComp ? $(0) : undefined;
|
|
10
11
|
const startIndicator = $(false);
|
|
11
12
|
const endIndicator = $(false);
|
|
12
13
|
const content = _jsx("div", { class: theme?.scroll_view_content, children: props.children });
|
|
@@ -37,14 +38,14 @@ export function ScrollView(props) {
|
|
|
37
38
|
{
|
|
38
39
|
overflow: () => vertical.value ? "hidden auto" : "auto hidden",
|
|
39
40
|
}
|
|
40
|
-
], "on:scroll": [debounceEvent(
|
|
41
|
+
], "on:scroll": [debounceEvent(DEBOUNCE_DELAY, () => updateIndicators()), { passive: true }], tabindex: "0", children: content });
|
|
41
42
|
const root = _jsxs("div", { class: [
|
|
42
43
|
props.class,
|
|
43
44
|
theme?.scroll_view,
|
|
44
45
|
], style: [
|
|
45
46
|
props.style,
|
|
46
47
|
{
|
|
47
|
-
"--scrollbar-comp": () => `${scrollbarComp.value}px
|
|
48
|
+
"--scrollbar-comp": scrollbarComp ? (() => `${scrollbarComp.value}px`) : "initial",
|
|
48
49
|
},
|
|
49
50
|
], children: [area, _jsx("div", { class: [
|
|
50
51
|
theme?.scroll_view_indicator_start,
|
|
@@ -53,22 +54,25 @@ export function ScrollView(props) {
|
|
|
53
54
|
theme?.scroll_view_indicator_end,
|
|
54
55
|
() => endIndicator.value && theme?.scroll_view_indicator_visible,
|
|
55
56
|
] })] });
|
|
56
|
-
const rootObserver = new ResizeObserver(() => {
|
|
57
|
+
const rootObserver = new ResizeObserver(debounceEvent(DEBOUNCE_DELAY, () => {
|
|
57
58
|
const blockStart = getBlockStart(getComputedStyle(root).writingMode || "horizontal-tb");
|
|
58
59
|
vertical.value ??= axisEquals(blockStart, UP);
|
|
59
60
|
updateIndicators(blockStart);
|
|
60
|
-
});
|
|
61
|
+
}));
|
|
61
62
|
rootObserver.observe(root);
|
|
62
63
|
teardown(() => rootObserver.disconnect());
|
|
64
|
+
const intersectUpdateIndicators = debounceEvent(DEBOUNCE_DELAY, updateIndicators);
|
|
63
65
|
const contentObserver = new IntersectionObserver(() => {
|
|
64
|
-
const rootRect = root.getBoundingClientRect();
|
|
65
|
-
const contentRect = content.getBoundingClientRect();
|
|
66
66
|
const blockStart = getBlockStart(getComputedStyle(root).writingMode || "horizontal-tb");
|
|
67
67
|
const isVertical = axisEquals(blockStart, UP);
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
if (scrollbarComp) {
|
|
69
|
+
const contentRect = content.getBoundingClientRect();
|
|
70
|
+
const rootRect = root.getBoundingClientRect();
|
|
71
|
+
const dir = isVertical ? RIGHT : UP;
|
|
72
|
+
scrollbarComp.value = Math.max(0, getSize(rootRect, dir) - getSize(contentRect, dir));
|
|
73
|
+
}
|
|
70
74
|
vertical.value ??= isVertical;
|
|
71
|
-
|
|
75
|
+
intersectUpdateIndicators(blockStart);
|
|
72
76
|
}, { root, rootMargin: "0px 0px 0px 0px", threshold: 1 });
|
|
73
77
|
contentObserver.observe(content);
|
|
74
78
|
teardown(() => contentObserver.disconnect());
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-view.js","sourceRoot":"","sources":["../../src/components/scroll-view.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAA0B,QAAQ,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAe,MAAM,2BAA2B,CAAC;AAE7G,MAAM,UAAU,UAAU,CAAC,
|
|
1
|
+
{"version":3,"file":"scroll-view.js","sourceRoot":"","sources":["../../src/components/scroll-view.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, Expression, Signal } from "rvx";
|
|
1
|
+
import { ClassValue, Component, Expression, Signal, StyleValue } from "rvx";
|
|
2
2
|
export interface Tab {
|
|
3
3
|
label: Component;
|
|
4
4
|
content: Component;
|
|
@@ -6,6 +6,30 @@ export interface Tab {
|
|
|
6
6
|
export declare function Tabs(props: {
|
|
7
7
|
tabs: Expression<Iterable<Tab>>;
|
|
8
8
|
selected?: Signal<Tab | undefined>;
|
|
9
|
+
class?: ClassValue;
|
|
10
|
+
style?: StyleValue;
|
|
11
|
+
list?: Component<{
|
|
12
|
+
tabs: Expression<Iterable<Tab>>;
|
|
13
|
+
selected: Signal<Tab | undefined>;
|
|
14
|
+
}>;
|
|
15
|
+
panel?: Component<{
|
|
16
|
+
tab: Expression<Tab | undefined>;
|
|
17
|
+
content?: Component<Component>;
|
|
18
|
+
}>;
|
|
19
|
+
content?: Component<Component>;
|
|
20
|
+
}): unknown;
|
|
21
|
+
export declare function selectFallbackTab(tabs: Expression<Iterable<Tab>>, selected: Signal<Tab | undefined>): void;
|
|
22
|
+
export declare function TabList(props: {
|
|
23
|
+
tabs: Expression<Iterable<Tab>>;
|
|
24
|
+
selected: Signal<Tab | undefined>;
|
|
9
25
|
padded?: Expression<boolean | undefined>;
|
|
26
|
+
class?: ClassValue;
|
|
27
|
+
style?: StyleValue;
|
|
28
|
+
}): unknown;
|
|
29
|
+
export declare function TabPanel(props: {
|
|
30
|
+
tab?: Expression<Tab | undefined>;
|
|
31
|
+
class?: ClassValue;
|
|
32
|
+
style?: StyleValue;
|
|
33
|
+
content?: Component<Component>;
|
|
10
34
|
}): unknown;
|
|
11
35
|
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,SAAS,EAAE,UAAU,EAAuB,MAAM,EAAsB,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAK,UAAU,EAAE,SAAS,EAAE,UAAU,EAAuB,MAAM,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIxH,MAAM,WAAW,GAAG;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,SAAS,CAAC;CACnB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE;IAC3B,IAAI,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;QAAE,IAAI,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,CAAA;KAAE,CAAC,CAAC;IACzF,KAAK,CAAC,EAAE,SAAS,CAAC;QAAE,GAAG,EAAE,UAAU,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;QAAC,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;KAAE,CAAC,CAAC;IACxF,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC/B,WASA;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,QASnG;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE;IAC9B,IAAI,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;IAChC,QAAQ,EAAE,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,UAAU,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACzC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;CACnB,WA+BA;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC/B,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC/B,WAkBA"}
|
package/dist/components/tabs.js
CHANGED
|
@@ -3,29 +3,45 @@ import { $, For, get, map, Show, uniqueIdFor, watch } from "rvx";
|
|
|
3
3
|
import { string } from "rvx/convert";
|
|
4
4
|
import { THEME } from "../common/theme.js";
|
|
5
5
|
export function Tabs(props) {
|
|
6
|
-
const theme = THEME.current;
|
|
7
6
|
const selected = props.selected ?? $(undefined);
|
|
7
|
+
const List = props.list ?? TabList;
|
|
8
|
+
const Panel = props.panel ?? TabPanel;
|
|
9
|
+
selectFallbackTab(props.tabs, selected);
|
|
10
|
+
return _jsxs(_Fragment, { children: [_jsx(List, { tabs: props.tabs, selected: selected }), _jsx(Panel, { tab: selected, content: props.content })] });
|
|
11
|
+
}
|
|
12
|
+
export function selectFallbackTab(tabs, selected) {
|
|
8
13
|
watch(selected, current => {
|
|
9
14
|
if (current === undefined) {
|
|
10
|
-
for (const tab of get(
|
|
15
|
+
for (const tab of get(tabs)) {
|
|
11
16
|
selected.value = tab;
|
|
12
17
|
break;
|
|
13
18
|
}
|
|
14
19
|
}
|
|
15
20
|
});
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
21
|
+
}
|
|
22
|
+
export function TabList(props) {
|
|
23
|
+
const theme = THEME.current;
|
|
24
|
+
return _jsx("div", { role: "tablist", class: [
|
|
25
|
+
theme?.tab_list,
|
|
26
|
+
theme?.has_separator,
|
|
27
|
+
map(props.padded, padded => padded ? theme?.tab_list_padded : undefined),
|
|
28
|
+
props.class,
|
|
29
|
+
], style: props.style, children: _jsx(For, { each: props.tabs, children: tab => _jsx("button", { role: "tab", class: [
|
|
30
|
+
theme?.tab_handle,
|
|
31
|
+
() => props.selected.value === tab ? theme?.tab_handle_current : undefined,
|
|
32
|
+
], "aria-selected": string(() => props.selected.value === tab), "aria-controls": uniqueIdFor(tab), "on:click": event => {
|
|
33
|
+
event.stopImmediatePropagation();
|
|
34
|
+
event.preventDefault();
|
|
35
|
+
props.selected.value = tab;
|
|
36
|
+
}, children: tab.label() }) }) });
|
|
37
|
+
}
|
|
38
|
+
export function TabPanel(props) {
|
|
39
|
+
const theme = THEME.current;
|
|
40
|
+
return _jsx(Show, { when: props.tab, children: tab => _jsx("div", { role: "tabpanel", id: uniqueIdFor(tab), class: [
|
|
41
|
+
theme?.tab_panel,
|
|
42
|
+
props.class,
|
|
43
|
+
], style: props.style, children: props.content
|
|
44
|
+
? props.content(tab.content)
|
|
45
|
+
: tab.content() }) });
|
|
30
46
|
}
|
|
31
47
|
//# sourceMappingURL=tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,CAAC,EAAqC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAsB,WAAW,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AACxH,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAO3C,MAAM,UAAU,IAAI,CAAC,KAQpB;IACA,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,OAAO,CAAC;IACnC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC;IACtC,iBAAiB,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IACxC,OAAO,8BACN,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,EAC9C,KAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,GAAI,IAC9C,CAAC;AACL,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,IAA+B,EAAE,QAAiC;IACnG,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE;QACzB,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;YAC3B,KAAK,MAAM,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;gBAC7B,QAAQ,CAAC,KAAK,GAAG,GAAG,CAAC;gBACrB,MAAM;YACP,CAAC;QACF,CAAC;IACF,CAAC,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,KAMvB;IACA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,OAAO,cACN,IAAI,EAAC,SAAS,EACd,KAAK,EAAE;YACN,KAAK,EAAE,QAAQ;YACf,KAAK,EAAE,aAAa;YACpB,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC;YACxE,KAAK,CAAC,KAAK;SACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,YAElB,KAAC,GAAG,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,YACnB,GAAG,CAAC,EAAE,CAAC,iBACP,IAAI,EAAC,KAAK,EACV,KAAK,EAAE;oBACN,KAAK,EAAE,UAAU;oBACjB,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,SAAS;iBAC1E,mBACc,MAAM,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,KAAK,GAAG,CAAC,mBAC1C,WAAW,CAAC,GAAG,CAAC,cACrB,KAAK,CAAC,EAAE;oBACjB,KAAK,CAAC,wBAAwB,EAAE,CAAC;oBACjC,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,KAAK,CAAC,QAAQ,CAAC,KAAK,GAAG,GAAG,CAAC;gBAC5B,CAAC,YAEA,GAAG,CAAC,KAAK,EAAE,GACJ,GACJ,GACD,CAAC;AACR,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,KAKxB;IACA,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC;IAC5B,OAAO,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,GAAG,YAC1B,GAAG,CAAC,EAAE,CAAC,cACP,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,WAAW,CAAC,GAAG,CAAC,EACpB,KAAK,EAAE;gBACN,KAAK,EAAE,SAAS;gBAChB,KAAK,CAAC,KAAK;aACX,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,YAEjB,KAAK,CAAC,OAAO;gBACb,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;gBAC5B,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,GAEX,GACA,CAAC;AACT,CAAC"}
|
package/dist/theme.module.css
CHANGED
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
--accent: rgb(64, 160, 255);
|
|
64
64
|
--fg: white;
|
|
65
65
|
--focus-outline: var(--control-border) dashed var(--accent);
|
|
66
|
-
--separator-color: rgb(
|
|
66
|
+
--separator-color: rgb(42, 42, 42);
|
|
67
67
|
--selection-bg: rgba(64, 160, 255, 0.5);
|
|
68
68
|
--overlay-backdrop: rgba(24, 24, 24, 0.8);
|
|
69
69
|
--overlay-bg: var(--bg);
|
|
@@ -873,8 +873,8 @@ h6.heading {
|
|
|
873
873
|
}
|
|
874
874
|
|
|
875
875
|
.page_content {
|
|
876
|
-
--scrollbar-comp:
|
|
877
|
-
--page-inline-size:
|
|
876
|
+
--scrollbar-comp: initial;
|
|
877
|
+
--page-inline-size: initial;
|
|
878
878
|
}
|
|
879
879
|
|
|
880
880
|
.popover {
|
|
@@ -1059,20 +1059,24 @@ h6.heading {
|
|
|
1059
1059
|
}
|
|
1060
1060
|
|
|
1061
1061
|
.separated_column {
|
|
1062
|
-
overflow: hidden;
|
|
1063
1062
|
display: flex;
|
|
1064
1063
|
flex-direction: column;
|
|
1065
1064
|
}
|
|
1066
|
-
.separated_column > *
|
|
1065
|
+
.separated_column > * {
|
|
1066
|
+
overflow: hidden;
|
|
1067
|
+
}
|
|
1068
|
+
.separated_column > :not(.has_separator) + :not(.has_separator) {
|
|
1067
1069
|
border-block-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
|
|
1068
1070
|
}
|
|
1069
1071
|
|
|
1070
1072
|
.separated_row {
|
|
1071
|
-
overflow: hidden;
|
|
1072
1073
|
display: flex;
|
|
1073
1074
|
flex-direction: row;
|
|
1074
1075
|
}
|
|
1075
|
-
.separated_row > *
|
|
1076
|
+
.separated_row > * {
|
|
1077
|
+
overflow: hidden;
|
|
1078
|
+
}
|
|
1079
|
+
.separated_row > :not(.has_separator) + :not(.has_separator) {
|
|
1076
1080
|
border-inline-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
|
|
1077
1081
|
}
|
|
1078
1082
|
|
|
@@ -1114,6 +1118,10 @@ h6.heading {
|
|
|
1114
1118
|
border-bottom: var(--separator) solid var(--separator-color);
|
|
1115
1119
|
}
|
|
1116
1120
|
|
|
1121
|
+
.tab_list_padded {
|
|
1122
|
+
padding-inline: calc(var(--content-pad-inline-start) - var(--control-pad-inline-start)) calc(var(--content-pad-inline-end) - var(--control-pad-inline-end));
|
|
1123
|
+
}
|
|
1124
|
+
|
|
1117
1125
|
.tab_handle {
|
|
1118
1126
|
font-family: inherit;
|
|
1119
1127
|
font-size: inherit;
|
|
@@ -1143,6 +1151,12 @@ h6.heading {
|
|
|
1143
1151
|
color: var(--tab-handle-fg-current);
|
|
1144
1152
|
}
|
|
1145
1153
|
|
|
1154
|
+
.tab_panel {
|
|
1155
|
+
flex-grow: 1;
|
|
1156
|
+
display: flex;
|
|
1157
|
+
flex-direction: column;
|
|
1158
|
+
}
|
|
1159
|
+
|
|
1146
1160
|
.tab_panel_padded {
|
|
1147
1161
|
padding-block: var(--content-pad-block-start) var(--content-pad-block-end);
|
|
1148
1162
|
padding-inline: var(--content-pad-inline-start) var(--content-pad-inline-end);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/breadcrumbs.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/separated.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;ECcA;EACA;EACA;EACA;EDbA;EACA;EACA;EACA;ECOA;EACA;EACA;EACA;EDPA;EACA;ECGA;EACA;EACA;EACA;EDHA;EACA;EACA;EACA;EACA;ECJA;EACA;EACA;EACA;EDIA;EAEA;EAEA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;;ACtCA;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AD4FH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AClHA;EANE;;AAQD;EAFD;IANE;IAUA;;;ACNH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;ADzBA;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;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;IAUA;;;AE2GH;EACC;EACA;EACA;EACA;EAEA;EAEA;EF/FA,eACC;EAED,gBACC;EE8FD;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;;;AF7JA;EANE;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AGUH;EACC;EACA;EACA;;AAEA;EHKA,eACC;EAED,gBACC;;;AGHD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACpCF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AC3BD;EACC;EACA;EACA;EACA;;;AAGD;EACC,YACC;;;AAKF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC9DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;AAGD;ENDD,eACC;EAED,gBACC;;;AMTD;EACC;;AACA;EACC;;AAGD;ENDD,eACC;EAED,gBACC;;;AMTD;EACC;;AACA;EACC;;AAGD;ENDD,eACC;EAED,gBACC;;;AOtCF;EACC;EACA;EAEA;;AACA;EACC;;AAGD;EACC;EACA;;AAED;EACC;EACA;;;ACdF;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;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;ERxBC,eACC;EAED,gBACC;;;AA5BD;EANE;;AAQD;EAFD;IANE;IAUA;;;ASNH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;ETAA,eACC;EAED,gBACC;ESFD;;AAEA;EACC;;;ACvCF;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;;;AX1BA;EANE;;AAQD;EAFD;IANE;IAUA;;;AYNH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;ACpBF;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AbLD;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;Ac0BH;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;Ed3BA,eACC;EAED,gBACC;Ec0BD;;AAGA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;;Ad9EA;EANE;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AeWH;EACC;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EfhBA,eACC;EAED,gBACC;;;AekBD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACzDF;EACC,eACC;EAED,gBACC;EAGD;EACA;EACA;;;AAGD;EACC;;AAEA;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;ACvCD;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;;AAEA;EjBVA,eACC;EAED,gBACC;;;AkBtCF;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AChCD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;AAGD;EnBkBD,eACC;EAED,gBACC;;;AmB9BD;EACC;EACA;;AACA;EACC;EACA;;AAGD;EnBkBD,eACC;EAED,gBACC;;;AmB9BD;EACC;EACA;;AACA;EACC;EACA;;AAGD;EnBkBD,eACC;EAED,gBACC;;;AA5BD;EANE;EAAA;;AAQD;EAFD;IANE;IAAA;IAUA;;;AoBFH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACvDD;EACC;EACA
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/theme/base.scss","../src/theme/common.scss","../src/theme/components/breadcrumbs.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/separated.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;ECcA;EACA;EACA;EACA;EDbA;EACA;EACA;EACA;ECOA;EACA;EACA;EACA;EDPA;EACA;ECGA;EACA;EACA;EACA;EDHA;EACA;EACA;EACA;EACA;ECJA;EACA;EACA;EACA;EDIA;EAEA;EAEA;EAEA;EAEA;EACA;EAEA;EACA;EAEA;;;ACtCA;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AD4FH;EACC;EACA;EAEA;;AACA;EALD;IAME;;;;AAIF;EACC;EACA;EACA;EACA;;;AAGD;EACC;;;AClHA;EANE;;AAQD;EAFD;IANE;IAUA;;;ACNH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;ADzBA;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;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;IAUA;;;AE2GH;EACC;EACA;EACA;EACA;EAEA;EAEA;EF/FA,eACC;EAED,gBACC;EE8FD;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;;;AF7JA;EANE;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AGUH;EACC;EACA;EACA;;AAEA;EHKA,eACC;EAED,gBACC;;;AGHD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACpCF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AC3BD;EACC;EACA;EACA;EACA;;;AAGD;EACC,YACC;;;AAKF;EACC;IAAO;;EACP;IAAM;;EACN;IAAM;;EACN;IAAK;;;AAGN;EACC;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;;AAEA;EACC,YACC;;AAIF;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC,YACC;;AAKF;EACC;EACA;EACA;;;AC9DF;EACC;EACA;;AAEA;EACC;;AAMD;EACC;;AAGD;EACC;;AAMD;EACC;;;AAKD;EACC;;AACA;EACC;;AAGD;ENDD,eACC;EAED,gBACC;;;AMTD;EACC;;AACA;EACC;;AAGD;ENDD,eACC;EAED,gBACC;;;AMTD;EACC;;AACA;EACC;;AAGD;ENDD,eACC;EAED,gBACC;;;AOtCF;EACC;EACA;EAEA;;AACA;EACC;;AAGD;EACC;EACA;;AAED;EACC;EACA;;;ACdF;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;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;ERxBC,eACC;EAED,gBACC;;;AA5BD;EANE;;AAQD;EAFD;IANE;IAUA;;;ASNH;EACC;EACA;;AAEA;EACC;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;EACC;ETAA,eACC;EAED,gBACC;ESFD;;AAEA;EACC;;;ACvCF;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;;;AX1BA;EANE;;AAQD;EAFD;IANE;IAUA;;;AYNH;EACC;EACA;EAEA;EACA;EACA;;AAEA;EAEC;EACA;EACA;EACA;;;ACpBF;EACC;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AbLD;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;Ac0BH;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAEA;Ed3BA,eACC;EAED,gBACC;Ec0BD;;AAGA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EACC;EACA;;;AAIF;EACC;EACA;EACA;EACA;;;Ad9EA;EANE;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAUA;;;AeWH;EACC;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EfhBA,eACC;EAED,gBACC;;;AekBD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;AADD;EACC;;;ACzDF;EACC,eACC;EAED,gBACC;EAGD;EACA;EACA;;;AAGD;EACC;;AAEA;EACC;EACA;;AAEA;EACC;;;AAKH;EACC;EACA;EACA;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;ACvCD;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;;AAEA;EjBVA,eACC;EAED,gBACC;;;AkBtCF;EACC;EACA;EACA;;AAEA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;AAEA;EACC;;AAGD;EACC;;;AAIF;EACC;EACA;;;AAGD;EACC;EACA;EACA;;;AChCD;EACC;EACA;EACA;;;AAIA;EACC;EACA;;AACA;EACC;EACA;;AAGD;EnBkBD,eACC;EAED,gBACC;;;AmB9BD;EACC;EACA;;AACA;EACC;EACA;;AAGD;EnBkBD,eACC;EAED,gBACC;;;AmB9BD;EACC;EACA;;AACA;EACC;EACA;;AAGD;EnBkBD,eACC;EAED,gBACC;;;AA5BD;EANE;EAAA;;AAQD;EAFD;IANE;IAAA;IAUA;;;AoBFH;EACC;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAGD;AAAA;EAEC;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;EACC;;;ACvDD;EACC;EACA;;AAEA;EACC;;AAED;EACC;;;AAIF;EACC;EACA;;AAEA;EACC;;AAED;EACC;;;ACpBF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;;;AtBAF;EANE;EAAA;EAAA;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAAA;IAAA;IAUA;;;AuBcH;EACC;EACA;EACA;;;AAGD;EACC,gBACC;;;AAIF;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;EACC;EACA;EACA;;;AAGD;EvBpDC,eACC;EAED,gBACC;;;AA5BD;EANE;EAAA;EAAA;EAAA;;AAQD;EAFD;IANE;IAAA;IAAA;IAAA;IAUA;;;AwBMH;EACC;EACA;EACA;EAEA;EAEA;ExBOA,eACC;EAED,gBACC;EwBTD;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EACC;EACA;;;AAIF;EACC;;;AC/CD;EACC;;AAEA;EAEC;EACA;EACA;EACA;;;AzBED;EANE;;AAQD;EAFD;IANE;IAUA;;;A0BNH;EACC;;;AAGD;EACC;;;ACbD;EACC","file":"theme.module.css"}
|
package/package.json
CHANGED
package/src/common/theme.tsx
CHANGED
|
@@ -135,6 +135,7 @@ export interface Theme {
|
|
|
135
135
|
|
|
136
136
|
separated_column?: string;
|
|
137
137
|
separated_row?: string;
|
|
138
|
+
has_separator?: string;
|
|
138
139
|
|
|
139
140
|
slider_host?: string;
|
|
140
141
|
|
|
@@ -143,7 +144,6 @@ export interface Theme {
|
|
|
143
144
|
tab_list?: string;
|
|
144
145
|
tab_list_padded?: string;
|
|
145
146
|
tab_panel?: string;
|
|
146
|
-
tab_panel_padded?: string;
|
|
147
147
|
|
|
148
148
|
text_input?: string;
|
|
149
149
|
|
|
@@ -3,16 +3,19 @@ import { debounceEvent } from "../common/events.js";
|
|
|
3
3
|
import { THEME } from "../common/theme.js";
|
|
4
4
|
import { axisEquals, DOWN, getBlockStart, getSize, RIGHT, UP, WritingMode } from "../common/writing-mode.js";
|
|
5
5
|
|
|
6
|
+
const DEBOUNCE_DELAY = 100;
|
|
7
|
+
|
|
6
8
|
export function ScrollView(props: {
|
|
7
9
|
class?: ClassValue;
|
|
8
10
|
style?: StyleValue;
|
|
9
11
|
contentClass?: ClassValue;
|
|
10
12
|
contentStyle?: StyleValue;
|
|
11
13
|
children?: unknown;
|
|
14
|
+
scrollbarComp?: boolean;
|
|
12
15
|
}): unknown {
|
|
13
16
|
const theme = THEME.current;
|
|
14
17
|
const vertical = $<boolean | undefined>(undefined);
|
|
15
|
-
const scrollbarComp = $(0);
|
|
18
|
+
const scrollbarComp = props.scrollbarComp ? $(0) : undefined;
|
|
16
19
|
const startIndicator = $(false);
|
|
17
20
|
const endIndicator = $(false);
|
|
18
21
|
|
|
@@ -50,7 +53,7 @@ export function ScrollView(props: {
|
|
|
50
53
|
overflow: () => vertical.value ? "hidden auto" : "auto hidden",
|
|
51
54
|
}
|
|
52
55
|
]}
|
|
53
|
-
on:scroll={[debounceEvent(
|
|
56
|
+
on:scroll={[debounceEvent(DEBOUNCE_DELAY, () => updateIndicators()), { passive: true }]}
|
|
54
57
|
tabindex="0"
|
|
55
58
|
>
|
|
56
59
|
{content}
|
|
@@ -64,7 +67,7 @@ export function ScrollView(props: {
|
|
|
64
67
|
style={[
|
|
65
68
|
props.style,
|
|
66
69
|
{
|
|
67
|
-
"--scrollbar-comp": () => `${scrollbarComp.value}px
|
|
70
|
+
"--scrollbar-comp": scrollbarComp ? (() => `${scrollbarComp.value}px`) : "initial",
|
|
68
71
|
},
|
|
69
72
|
]}
|
|
70
73
|
>
|
|
@@ -79,23 +82,26 @@ export function ScrollView(props: {
|
|
|
79
82
|
]} />
|
|
80
83
|
</div> as HTMLElement;
|
|
81
84
|
|
|
82
|
-
const rootObserver = new ResizeObserver(() => {
|
|
85
|
+
const rootObserver = new ResizeObserver(debounceEvent(DEBOUNCE_DELAY, () => {
|
|
83
86
|
const blockStart = getBlockStart(getComputedStyle(root).writingMode as WritingMode || "horizontal-tb");
|
|
84
87
|
vertical.value ??= axisEquals(blockStart, UP);
|
|
85
88
|
updateIndicators(blockStart);
|
|
86
|
-
});
|
|
89
|
+
}));
|
|
87
90
|
rootObserver.observe(root);
|
|
88
91
|
teardown(() => rootObserver.disconnect());
|
|
89
92
|
|
|
93
|
+
const intersectUpdateIndicators = debounceEvent(DEBOUNCE_DELAY, updateIndicators);
|
|
90
94
|
const contentObserver = new IntersectionObserver(() => {
|
|
91
|
-
const rootRect = root.getBoundingClientRect();
|
|
92
|
-
const contentRect = content.getBoundingClientRect();
|
|
93
95
|
const blockStart = getBlockStart(getComputedStyle(root).writingMode as WritingMode || "horizontal-tb");
|
|
94
96
|
const isVertical = axisEquals(blockStart, UP);
|
|
95
|
-
|
|
96
|
-
|
|
97
|
+
if (scrollbarComp) {
|
|
98
|
+
const contentRect = content.getBoundingClientRect();
|
|
99
|
+
const rootRect = root.getBoundingClientRect();
|
|
100
|
+
const dir = isVertical ? RIGHT : UP;
|
|
101
|
+
scrollbarComp.value = Math.max(0, getSize(rootRect, dir) - getSize(contentRect, dir));
|
|
102
|
+
}
|
|
97
103
|
vertical.value ??= isVertical;
|
|
98
|
-
|
|
104
|
+
intersectUpdateIndicators(blockStart);
|
|
99
105
|
}, { root, rootMargin: "0px 0px 0px 0px", threshold: 1 });
|
|
100
106
|
contentObserver.observe(content);
|
|
101
107
|
teardown(() => contentObserver.disconnect());
|
package/src/components/tabs.tsx
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { $, Component, Expression, For, get, map, Show, Signal, uniqueIdFor, watch } from "rvx";
|
|
1
|
+
import { $, ClassValue, Component, Expression, For, get, map, Show, Signal, StyleValue, uniqueIdFor, watch } from "rvx";
|
|
2
2
|
import { string } from "rvx/convert";
|
|
3
3
|
import { THEME } from "../common/theme.js";
|
|
4
4
|
|
|
@@ -10,58 +10,93 @@ export interface Tab {
|
|
|
10
10
|
export function Tabs(props: {
|
|
11
11
|
tabs: Expression<Iterable<Tab>>;
|
|
12
12
|
selected?: Signal<Tab | undefined>;
|
|
13
|
-
|
|
13
|
+
class?: ClassValue;
|
|
14
|
+
style?: StyleValue;
|
|
15
|
+
list?: Component<{ tabs: Expression<Iterable<Tab>>, selected: Signal<Tab | undefined> }>;
|
|
16
|
+
panel?: Component<{ tab: Expression<Tab | undefined>, content?: Component<Component> }>;
|
|
17
|
+
content?: Component<Component>;
|
|
14
18
|
}) {
|
|
15
|
-
const theme = THEME.current;
|
|
16
19
|
const selected = props.selected ?? $(undefined);
|
|
20
|
+
const List = props.list ?? TabList;
|
|
21
|
+
const Panel = props.panel ?? TabPanel;
|
|
22
|
+
selectFallbackTab(props.tabs, selected);
|
|
23
|
+
return <>
|
|
24
|
+
<List tabs={props.tabs} selected={selected} />
|
|
25
|
+
<Panel tab={selected} content={props.content} />
|
|
26
|
+
</>;
|
|
27
|
+
}
|
|
17
28
|
|
|
29
|
+
export function selectFallbackTab(tabs: Expression<Iterable<Tab>>, selected: Signal<Tab | undefined>) {
|
|
18
30
|
watch(selected, current => {
|
|
19
31
|
if (current === undefined) {
|
|
20
|
-
for (const tab of get(
|
|
32
|
+
for (const tab of get(tabs)) {
|
|
21
33
|
selected.value = tab;
|
|
22
34
|
break;
|
|
23
35
|
}
|
|
24
36
|
}
|
|
25
37
|
});
|
|
38
|
+
}
|
|
26
39
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}}
|
|
49
|
-
>
|
|
50
|
-
{tab.label()}
|
|
51
|
-
</button>}
|
|
52
|
-
</For>
|
|
53
|
-
</div>
|
|
54
|
-
<Show when={selected}>
|
|
55
|
-
{tab => <div
|
|
56
|
-
role="tabpanel"
|
|
57
|
-
id={uniqueIdFor(tab)}
|
|
40
|
+
export function TabList(props: {
|
|
41
|
+
tabs: Expression<Iterable<Tab>>;
|
|
42
|
+
selected: Signal<Tab | undefined>;
|
|
43
|
+
padded?: Expression<boolean | undefined>;
|
|
44
|
+
class?: ClassValue;
|
|
45
|
+
style?: StyleValue;
|
|
46
|
+
}) {
|
|
47
|
+
const theme = THEME.current;
|
|
48
|
+
return <div
|
|
49
|
+
role="tablist"
|
|
50
|
+
class={[
|
|
51
|
+
theme?.tab_list,
|
|
52
|
+
theme?.has_separator,
|
|
53
|
+
map(props.padded, padded => padded ? theme?.tab_list_padded : undefined),
|
|
54
|
+
props.class,
|
|
55
|
+
]}
|
|
56
|
+
style={props.style}
|
|
57
|
+
>
|
|
58
|
+
<For each={props.tabs}>
|
|
59
|
+
{tab => <button
|
|
60
|
+
role="tab"
|
|
58
61
|
class={[
|
|
59
|
-
theme?.
|
|
60
|
-
|
|
62
|
+
theme?.tab_handle,
|
|
63
|
+
() => props.selected.value === tab ? theme?.tab_handle_current : undefined,
|
|
61
64
|
]}
|
|
65
|
+
aria-selected={string(() => props.selected.value === tab)}
|
|
66
|
+
aria-controls={uniqueIdFor(tab)}
|
|
67
|
+
on:click={event => {
|
|
68
|
+
event.stopImmediatePropagation();
|
|
69
|
+
event.preventDefault();
|
|
70
|
+
props.selected.value = tab;
|
|
71
|
+
}}
|
|
62
72
|
>
|
|
63
|
-
{tab.
|
|
64
|
-
</
|
|
65
|
-
</
|
|
66
|
-
|
|
73
|
+
{tab.label()}
|
|
74
|
+
</button>}
|
|
75
|
+
</For>
|
|
76
|
+
</div>;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
export function TabPanel(props: {
|
|
80
|
+
tab?: Expression<Tab | undefined>;
|
|
81
|
+
class?: ClassValue;
|
|
82
|
+
style?: StyleValue;
|
|
83
|
+
content?: Component<Component>;
|
|
84
|
+
}) {
|
|
85
|
+
const theme = THEME.current;
|
|
86
|
+
return <Show when={props.tab}>
|
|
87
|
+
{tab => <div
|
|
88
|
+
role="tabpanel"
|
|
89
|
+
id={uniqueIdFor(tab)}
|
|
90
|
+
class={[
|
|
91
|
+
theme?.tab_panel,
|
|
92
|
+
props.class,
|
|
93
|
+
]}
|
|
94
|
+
style={props.style}
|
|
95
|
+
>
|
|
96
|
+
{props.content
|
|
97
|
+
? props.content(tab.content)
|
|
98
|
+
: tab.content()
|
|
99
|
+
}
|
|
100
|
+
</div>}
|
|
101
|
+
</Show>;
|
|
67
102
|
}
|
package/src/theme/base.scss
CHANGED
|
@@ -1,20 +1,24 @@
|
|
|
1
1
|
|
|
2
2
|
.separated_column {
|
|
3
|
-
overflow: hidden;
|
|
4
3
|
display: flex;
|
|
5
4
|
flex-direction: column;
|
|
6
5
|
|
|
7
|
-
& > *
|
|
6
|
+
& > * {
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
}
|
|
9
|
+
& > :not(.has_separator) + :not(.has_separator) {
|
|
8
10
|
border-block-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
|
|
9
11
|
}
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
.separated_row {
|
|
13
|
-
overflow: hidden;
|
|
14
15
|
display: flex;
|
|
15
16
|
flex-direction: row;
|
|
16
17
|
|
|
17
|
-
& > *
|
|
18
|
+
& > * {
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
}
|
|
21
|
+
& > :not(.has_separator) + :not(.has_separator) {
|
|
18
22
|
border-inline-start: calc(var(--separator) * var(--space-scale)) solid var(--separator-color);
|
|
19
23
|
}
|
|
20
24
|
}
|
|
@@ -33,6 +33,12 @@
|
|
|
33
33
|
border-bottom: var(--separator) solid var(--separator-color);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
.tab_list_padded {
|
|
37
|
+
padding-inline:
|
|
38
|
+
calc(var(--content-pad-inline-start) - var(--control-pad-inline-start))
|
|
39
|
+
calc(var(--content-pad-inline-end) - var(--control-pad-inline-end));
|
|
40
|
+
}
|
|
41
|
+
|
|
36
42
|
.tab_handle {
|
|
37
43
|
font-family: inherit;
|
|
38
44
|
font-size: inherit;
|
|
@@ -73,6 +79,12 @@
|
|
|
73
79
|
color: var(--tab-handle-fg-current);
|
|
74
80
|
}
|
|
75
81
|
|
|
82
|
+
.tab_panel {
|
|
83
|
+
flex-grow: 1;
|
|
84
|
+
display: flex;
|
|
85
|
+
flex-direction: column;
|
|
86
|
+
}
|
|
87
|
+
|
|
76
88
|
.tab_panel_padded {
|
|
77
89
|
@include common.padding(content-pad);
|
|
78
90
|
}
|