@furystack/shades-common-components 3.6.1 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/app-bar-link.js +18 -20
- package/dist/components/app-bar-link.js.map +1 -1
- package/dist/components/app-bar.js +7 -6
- package/dist/components/app-bar.js.map +1 -1
- package/dist/components/avatar.js +20 -18
- package/dist/components/avatar.js.map +1 -1
- package/dist/components/button.js +32 -28
- package/dist/components/button.js.map +1 -1
- package/dist/components/command-palette/command-palette-input.js +24 -29
- package/dist/components/command-palette/command-palette-input.js.map +1 -1
- package/dist/components/command-palette/command-palette-suggestion-list.js +38 -47
- package/dist/components/command-palette/command-palette-suggestion-list.js.map +1 -1
- package/dist/components/command-palette/index.js +34 -40
- package/dist/components/command-palette/index.js.map +1 -1
- package/dist/components/data-grid/body.js +6 -13
- package/dist/components/data-grid/body.js.map +1 -1
- package/dist/components/data-grid/data-grid-row.js +29 -31
- package/dist/components/data-grid/data-grid-row.js.map +1 -1
- package/dist/components/data-grid/data-grid.js +4 -8
- package/dist/components/data-grid/data-grid.js.map +1 -1
- package/dist/components/data-grid/footer.js +8 -13
- package/dist/components/data-grid/footer.js.map +1 -1
- package/dist/components/data-grid/header.js +19 -18
- package/dist/components/data-grid/header.js.map +1 -1
- package/dist/components/data-grid/selection-cell.js +9 -23
- package/dist/components/data-grid/selection-cell.js.map +1 -1
- package/dist/components/fab.js +10 -5
- package/dist/components/fab.js.map +1 -1
- package/dist/components/grid.js.map +1 -1
- package/dist/components/inputs/autocomplete.js +3 -13
- package/dist/components/inputs/autocomplete.js.map +1 -1
- package/dist/components/inputs/input.js +22 -26
- package/dist/components/inputs/input.js.map +1 -1
- package/dist/components/inputs/text-area.js +2 -6
- package/dist/components/inputs/text-area.js.map +1 -1
- package/dist/components/loader.js +9 -5
- package/dist/components/loader.js.map +1 -1
- package/dist/components/modal.js +7 -17
- package/dist/components/modal.js.map +1 -1
- package/dist/components/noty-list.js +26 -28
- package/dist/components/noty-list.js.map +1 -1
- package/dist/components/paper.js +11 -5
- package/dist/components/paper.js.map +1 -1
- package/dist/components/suggest/index.js +14 -20
- package/dist/components/suggest/index.js.map +1 -1
- package/dist/components/suggest/suggest-input.js +9 -10
- package/dist/components/suggest/suggest-input.js.map +1 -1
- package/dist/components/suggest/suggest-manager.js +8 -2
- package/dist/components/suggest/suggest-manager.js.map +1 -1
- package/dist/components/suggest/suggestion-list.js +27 -30
- package/dist/components/suggest/suggestion-list.js.map +1 -1
- package/dist/components/tabs.js +32 -36
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/wizard/index.js +4 -7
- package/dist/components/wizard/index.js.map +1 -1
- package/dist/services/collection-service.js +10 -0
- package/dist/services/collection-service.js.map +1 -1
- package/package.json +6 -6
- package/src/components/app-bar-link.tsx +27 -30
- package/src/components/app-bar.tsx +21 -26
- package/src/components/avatar.tsx +40 -36
- package/src/components/button.tsx +85 -88
- package/src/components/command-palette/command-palette-input.tsx +15 -13
- package/src/components/command-palette/command-palette-suggestion-list.tsx +50 -58
- package/src/components/command-palette/index.tsx +54 -52
- package/src/components/data-grid/body.tsx +10 -22
- package/src/components/data-grid/data-grid-row.tsx +64 -63
- package/src/components/data-grid/data-grid.tsx +11 -11
- package/src/components/data-grid/footer.tsx +13 -16
- package/src/components/data-grid/header.tsx +34 -30
- package/src/components/data-grid/selection-cell.tsx +9 -19
- package/src/components/fab.tsx +21 -23
- package/src/components/grid.tsx +1 -1
- package/src/components/inputs/autocomplete.tsx +10 -16
- package/src/components/inputs/input.tsx +27 -27
- package/src/components/inputs/text-area.tsx +3 -11
- package/src/components/loader.tsx +20 -5
- package/src/components/modal.tsx +9 -17
- package/src/components/noty-list.tsx +54 -53
- package/src/components/paper.tsx +18 -17
- package/src/components/suggest/index.tsx +19 -30
- package/src/components/suggest/suggest-input.tsx +22 -15
- package/src/components/suggest/suggest-manager.ts +15 -3
- package/src/components/suggest/suggestion-list.tsx +90 -85
- package/src/components/tabs.tsx +50 -62
- package/src/components/wizard/index.tsx +6 -13
- package/src/services/collection-service.ts +14 -0
- package/tsconfig.json +1 -1
- package/tsconfig.tsbuildinfo +1 -1
- package/types/components/app-bar-link.d.ts +1 -1
- package/types/components/app-bar-link.d.ts.map +1 -1
- package/types/components/app-bar.d.ts +1 -1
- package/types/components/app-bar.d.ts.map +1 -1
- package/types/components/avatar.d.ts +2 -1
- package/types/components/avatar.d.ts.map +1 -1
- package/types/components/button.d.ts +1 -1
- package/types/components/button.d.ts.map +1 -1
- package/types/components/command-palette/command-palette-input.d.ts +1 -1
- package/types/components/command-palette/command-palette-input.d.ts.map +1 -1
- package/types/components/command-palette/command-palette-suggestion-list.d.ts +1 -1
- package/types/components/command-palette/command-palette-suggestion-list.d.ts.map +1 -1
- package/types/components/command-palette/index.d.ts +1 -5
- package/types/components/command-palette/index.d.ts.map +1 -1
- package/types/components/data-grid/body.d.ts +1 -5
- package/types/components/data-grid/body.d.ts.map +1 -1
- package/types/components/data-grid/data-grid-row.d.ts +1 -5
- package/types/components/data-grid/data-grid-row.d.ts.map +1 -1
- package/types/components/data-grid/data-grid.d.ts +5 -3
- package/types/components/data-grid/data-grid.d.ts.map +1 -1
- package/types/components/data-grid/footer.d.ts +1 -1
- package/types/components/data-grid/footer.d.ts.map +1 -1
- package/types/components/data-grid/header.d.ts +1 -1
- package/types/components/data-grid/header.d.ts.map +1 -1
- package/types/components/data-grid/selection-cell.d.ts +1 -1
- package/types/components/data-grid/selection-cell.d.ts.map +1 -1
- package/types/components/fab.d.ts +1 -1
- package/types/components/fab.d.ts.map +1 -1
- package/types/components/grid.d.ts +1 -1
- package/types/components/grid.d.ts.map +1 -1
- package/types/components/inputs/autocomplete.d.ts +1 -1
- package/types/components/inputs/autocomplete.d.ts.map +1 -1
- package/types/components/inputs/input.d.ts +1 -1
- package/types/components/inputs/input.d.ts.map +1 -1
- package/types/components/inputs/text-area.d.ts +1 -4
- package/types/components/inputs/text-area.d.ts.map +1 -1
- package/types/components/loader.d.ts +9 -1
- package/types/components/loader.d.ts.map +1 -1
- package/types/components/modal.d.ts +1 -1
- package/types/components/modal.d.ts.map +1 -1
- package/types/components/noty-list.d.ts +2 -2
- package/types/components/noty-list.d.ts.map +1 -1
- package/types/components/paper.d.ts +1 -1
- package/types/components/paper.d.ts.map +1 -1
- package/types/components/skeleton.d.ts +1 -1
- package/types/components/skeleton.d.ts.map +1 -1
- package/types/components/suggest/index.d.ts +1 -5
- package/types/components/suggest/index.d.ts.map +1 -1
- package/types/components/suggest/suggest-input.d.ts +1 -1
- package/types/components/suggest/suggest-input.d.ts.map +1 -1
- package/types/components/suggest/suggest-manager.d.ts +2 -1
- package/types/components/suggest/suggest-manager.d.ts.map +1 -1
- package/types/components/suggest/suggestion-list.d.ts +1 -1
- package/types/components/suggest/suggestion-list.d.ts.map +1 -1
- package/types/components/tabs.d.ts +2 -2
- package/types/components/tabs.d.ts.map +1 -1
- package/types/components/wizard/index.d.ts +2 -2
- package/types/components/wizard/index.d.ts.map +1 -1
- package/types/services/collection-service.d.ts +4 -0
- package/types/services/collection-service.d.ts.map +1 -1
|
@@ -16,6 +16,12 @@ let SuggestManager = class SuggestManager {
|
|
|
16
16
|
dispose() {
|
|
17
17
|
window.removeEventListener('keyup', this.keyPressListener);
|
|
18
18
|
window.removeEventListener('click', this.clickOutsideListener);
|
|
19
|
+
this.isOpened.dispose();
|
|
20
|
+
this.isLoading.dispose();
|
|
21
|
+
this.term.dispose();
|
|
22
|
+
this.selectedIndex.dispose();
|
|
23
|
+
this.currentSuggestions.dispose();
|
|
24
|
+
this.onSelectSuggestion.dispose();
|
|
19
25
|
}
|
|
20
26
|
selectSuggestion(index = this.selectedIndex.getValue()) {
|
|
21
27
|
const selectedSuggestion = this.currentSuggestions.getValue()[index];
|
|
@@ -48,13 +54,13 @@ let SuggestManager = class SuggestManager {
|
|
|
48
54
|
if (this.lastGetSuggestionOptions?.term === options.term) {
|
|
49
55
|
return;
|
|
50
56
|
}
|
|
57
|
+
const lastSelectedSuggestion = JSON.stringify(this.currentSuggestions.getValue()[this.selectedIndex.getValue()]);
|
|
51
58
|
this.isLoading.setValue(true);
|
|
52
59
|
this.lastGetSuggestionOptions = options;
|
|
53
|
-
this.currentSuggestions.setValue([]);
|
|
54
|
-
this.selectedIndex.setValue(0);
|
|
55
60
|
const newEntries = await this.getEntries(options.term);
|
|
56
61
|
this.isOpened.setValue(true);
|
|
57
62
|
this.currentSuggestions.setValue(newEntries.map((e) => ({ entry: e, suggestion: this.getSuggestionEntry(e) })));
|
|
63
|
+
this.selectedIndex.setValue(Math.max(0, this.currentSuggestions.getValue().findIndex((e) => JSON.stringify(e) === lastSelectedSuggestion)));
|
|
58
64
|
}
|
|
59
65
|
finally {
|
|
60
66
|
this.isLoading.setValue(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"suggest-manager.js","sourceRoot":"","sources":["../../../src/components/suggest/suggest-manager.ts"],"names":[],"mappings":";;;;;;;;;;;;AACA,8CAA8C;
|
|
1
|
+
{"version":3,"file":"suggest-manager.js","sourceRoot":"","sources":["../../../src/components/suggest/suggest-manager.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,16 +3,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.SuggestionList = void 0;
|
|
4
4
|
const shades_1 = require("@furystack/shades");
|
|
5
5
|
const promisify_animation_1 = require("../../utils/promisify-animation");
|
|
6
|
+
const services_1 = require("../../services");
|
|
6
7
|
exports.SuggestionList = (0, shades_1.Shade)({
|
|
7
8
|
shadowDomName: 'shade-suggest-suggestion-list',
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
9
|
+
render: ({ element, props, injector, useObservable }) => {
|
|
10
|
+
const { manager } = props;
|
|
11
|
+
const { theme } = injector.getInstance(services_1.ThemeProviderService);
|
|
12
|
+
const [suggestions] = useObservable('suggestions', manager.currentSuggestions);
|
|
13
|
+
const [selectedIndex] = useObservable('selectedIndex', manager.selectedIndex, (idx) => {
|
|
14
|
+
;
|
|
15
|
+
[...element.querySelectorAll('.suggestion-item')].map((s, i) => {
|
|
16
|
+
if (i === idx) {
|
|
17
|
+
s.style.background = theme.background.paper;
|
|
18
|
+
s.style.fontWeight = 'bolder';
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
s.style.background = theme.background.default;
|
|
22
|
+
s.style.fontWeight = 'normal';
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
}, true);
|
|
26
|
+
const [isListOpened] = useObservable('isOpened', manager.isOpened, async (isOpened) => {
|
|
16
27
|
const container = element.firstElementChild;
|
|
17
28
|
if (isOpened) {
|
|
18
29
|
container.style.zIndex = '1';
|
|
@@ -29,23 +40,7 @@ exports.SuggestionList = (0, shades_1.Shade)({
|
|
|
29
40
|
], { fill: 'forwards', duration: 200 });
|
|
30
41
|
container.style.zIndex = '-1';
|
|
31
42
|
}
|
|
32
|
-
}
|
|
33
|
-
props.manager.selectedIndex.subscribe((idx) => {
|
|
34
|
-
;
|
|
35
|
-
[...element.querySelectorAll('.suggestion-item')].map((s, i) => {
|
|
36
|
-
if (i === idx) {
|
|
37
|
-
;
|
|
38
|
-
s.style.background = 'rgba(128,128,128,0.2)';
|
|
39
|
-
}
|
|
40
|
-
else {
|
|
41
|
-
;
|
|
42
|
-
s.style.background = 'rgba(96,96,96,0.2)';
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
}),
|
|
46
|
-
],
|
|
47
|
-
render: ({ element, getState, props }) => {
|
|
48
|
-
const { manager } = props;
|
|
43
|
+
});
|
|
49
44
|
return ((0, shades_1.createComponent)("div", { className: "suggestion-items-container", style: {
|
|
50
45
|
borderTop: 'none',
|
|
51
46
|
position: 'absolute',
|
|
@@ -54,17 +49,19 @@ exports.SuggestionList = (0, shades_1.Shade)({
|
|
|
54
49
|
overflow: 'hidden',
|
|
55
50
|
zIndex: '1',
|
|
56
51
|
left: 'auto',
|
|
57
|
-
backgroundColor:
|
|
52
|
+
backgroundColor: theme.background.paper,
|
|
53
|
+
color: theme.text.secondary,
|
|
58
54
|
boxShadow: '3px 3px 5px rgba(0,0,0,0.3)',
|
|
59
55
|
backdropFilter: 'blur(15px)',
|
|
60
56
|
width: `calc(${Math.round(element.parentElement?.getBoundingClientRect().width || 200)}px - 3em)`,
|
|
61
|
-
} },
|
|
62
|
-
|
|
57
|
+
} }, suggestions.map((s, i) => ((0, shades_1.createComponent)("div", { className: "suggestion-item", onclick: () => {
|
|
58
|
+
isListOpened && manager.selectSuggestion(i);
|
|
63
59
|
}, style: {
|
|
64
60
|
padding: '1em',
|
|
65
61
|
cursor: 'default',
|
|
66
|
-
background: i ===
|
|
67
|
-
|
|
62
|
+
background: i === selectedIndex ? theme.background.paper : theme.background.default,
|
|
63
|
+
fontWeight: i === selectedIndex ? 'bolder' : 'normal',
|
|
64
|
+
} }, s.suggestion.element)))));
|
|
68
65
|
},
|
|
69
66
|
});
|
|
70
67
|
//# sourceMappingURL=suggestion-list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"suggestion-list.js","sourceRoot":"","sources":["../../../src/components/suggest/suggestion-list.tsx"],"names":[],"mappings":";;;AACA,8CAA0D;AAC1D,yEAAoE;
|
|
1
|
+
{"version":3,"file":"suggestion-list.js","sourceRoot":"","sources":["../../../src/components/suggest/suggestion-list.tsx"],"names":[],"mappings":"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"}
|
package/dist/components/tabs.js
CHANGED
|
@@ -3,46 +3,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.Tabs = void 0;
|
|
4
4
|
const shades_1 = require("@furystack/shades");
|
|
5
5
|
const services_1 = require("../services");
|
|
6
|
-
const
|
|
6
|
+
const TabHeader = (0, shades_1.Shade)({
|
|
7
|
+
shadowDomName: 'shade-tab-header',
|
|
8
|
+
render: ({ children, element, injector, props }) => {
|
|
9
|
+
const { theme } = injector.getInstance(services_1.ThemeProviderService);
|
|
10
|
+
const { isActive } = props;
|
|
11
|
+
(0, shades_1.attachProps)(element, {
|
|
12
|
+
style: {
|
|
13
|
+
padding: '1em 2.5em',
|
|
14
|
+
cursor: 'pointer',
|
|
15
|
+
transition: 'box-shadow 1s linear',
|
|
16
|
+
fontWeight: isActive ? 'bolder' : 'inherit',
|
|
17
|
+
background: isActive ? theme.background.paper : theme.background.default,
|
|
18
|
+
color: isActive ? theme.text.primary : theme.text.secondary,
|
|
19
|
+
boxShadow: isActive ? `inset 0 -2px 0 ${theme.palette.primary.main}` : 'none',
|
|
20
|
+
},
|
|
21
|
+
onclick: props.onActivate,
|
|
22
|
+
});
|
|
23
|
+
return (0, shades_1.createComponent)(shades_1.createComponent, null, children);
|
|
24
|
+
},
|
|
25
|
+
});
|
|
7
26
|
exports.Tabs = (0, shades_1.Shade)({
|
|
8
27
|
shadowDomName: 'shade-tabs',
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
return () => subscriptions.forEach((s) => s.dispose());
|
|
21
|
-
},
|
|
22
|
-
render: ({ props, getState, updateState, injector }) => {
|
|
23
|
-
const themeProvider = injector.getInstance(services_1.ThemeProviderService);
|
|
24
|
-
const { theme } = themeProvider;
|
|
25
|
-
return ((0, shades_1.createComponent)("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', ...props.containerStyle } },
|
|
26
|
-
(0, shades_1.createComponent)("div", { className: "shade-tabs-header-container", style: { display: 'inline-flex', borderRadius: '5px 5px 0 0', overflow: 'hidden', flexShrink: '0' } }, props.tabs.map((tab, index) => {
|
|
27
|
-
const isActive = index === getState().activeIndex;
|
|
28
|
-
const jsxElement = ((0, shades_1.createComponent)("div", { className: `shade-tabs-headers${isActive ? 'active' : ''}`, style: {
|
|
29
|
-
padding: '1em 2.5em',
|
|
30
|
-
cursor: 'pointer',
|
|
31
|
-
transition: 'box-shadow 1s linear',
|
|
32
|
-
fontWeight: isActive ? 'bolder' : 'inherit',
|
|
33
|
-
background: isActive ? theme.background.paper : theme.background.default,
|
|
34
|
-
color: isActive ? theme.text.primary : theme.text.secondary,
|
|
35
|
-
}, onclick: () => {
|
|
36
|
-
props.onChange && props.onChange(index);
|
|
37
|
-
window.history.pushState({}, '', `#tab-${index}`);
|
|
38
|
-
updateState({ activeIndex: index });
|
|
28
|
+
render: ({ props, element, useObservable, injector }) => {
|
|
29
|
+
(0, shades_1.attachProps)(element, {
|
|
30
|
+
style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'column', ...props.containerStyle },
|
|
31
|
+
});
|
|
32
|
+
const [hash] = useObservable('updateLocation', injector.getInstance(shades_1.LocationService).onLocationHashChanged);
|
|
33
|
+
const activeTab = props.tabs.find((t) => t.hash === hash.replace('#', ''));
|
|
34
|
+
return ((0, shades_1.createComponent)(shades_1.createComponent, null,
|
|
35
|
+
(0, shades_1.createComponent)("div", { className: "shade-tabs-header-container", style: { display: 'inline-flex', borderRadius: '5px 5px 0 0', overflow: 'hidden', flexShrink: '0' } }, props.tabs.map((tab) => {
|
|
36
|
+
const isActive = tab === activeTab;
|
|
37
|
+
return ((0, shades_1.createComponent)(TabHeader, { isActive: isActive, onActivate: () => {
|
|
38
|
+
window.history.pushState({}, '', `#${tab.hash}`);
|
|
39
39
|
} }, tab.header));
|
|
40
|
-
if (isActive) {
|
|
41
|
-
setTimeout(() => (0, promisify_animation_1.promisifyAnimation)(jsxElement, [{ boxShadow: 'none' }, { boxShadow: 'inset 0 -2px 0 rgba(128,128,192,0.9)' }], { duration: 500, fill: 'forwards', easing: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)' }));
|
|
42
|
-
}
|
|
43
|
-
return jsxElement;
|
|
44
40
|
})),
|
|
45
|
-
|
|
41
|
+
activeTab?.component));
|
|
46
42
|
},
|
|
47
43
|
});
|
|
48
44
|
//# sourceMappingURL=tabs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":";;;AAAA,
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":";;;AAAA,8CAAwF;AACxF,0CAAkD;AAQlD,MAAM,SAAS,GAAG,IAAA,cAAK,EAAiD;IACtE,aAAa,EAAE,kBAAkB;IACjC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;QACjD,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,WAAW,CAAC,+BAAoB,CAAC,CAAA;QAC5D,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;QAE1B,IAAA,oBAAW,EAAC,OAAO,EAAE;YACnB,KAAK,EAAE;gBACL,OAAO,EAAE,WAAW;gBACpB,MAAM,EAAE,SAAS;gBACjB,UAAU,EAAE,sBAAsB;gBAClC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBAC3C,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO;gBACxE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS;gBAC3D,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,kBAAkB,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM;aAC9E;YACD,OAAO,EAAE,KAAK,CAAC,UAAU;SAC1B,CAAC,CAAA;QACF,OAAO,8DAAG,QAAQ,CAAI,CAAA;IACxB,CAAC;CACF,CAAC,CAAA;AAEW,QAAA,IAAI,GAAG,IAAA,cAAK,EAKtB;IACD,aAAa,EAAE,YAAY;IAC3B,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE;QACtD,IAAA,oBAAW,EAAC,OAAO,EAAE;YACnB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,cAAc,EAAE;SAC5G,CAAC,CAAA;QAEF,MAAM,CAAC,IAAI,CAAC,GAAG,aAAa,CAAC,gBAAgB,EAAE,QAAQ,CAAC,WAAW,CAAC,wBAAe,CAAC,CAAC,qBAAqB,CAAC,CAAA;QAE3G,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAA;QAE1E,OAAO,CACL;YACE,uCACE,SAAS,EAAC,6BAA6B,EACvC,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,IAElG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;gBACtB,MAAM,QAAQ,GAAG,GAAG,KAAK,SAAS,CAAA;gBAElC,OAAO,CACL,8BAAC,SAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,GAAG,EAAE;wBACf,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,GAAG,CAAC,IAAI,EAAE,CAAC,CAAA;oBAClD,CAAC,IAEA,GAAG,CAAC,MAAM,CACD,CACb,CAAA;YACH,CAAC,CAAC,CACE;YACL,SAAS,EAAE,SAAS,CACpB,CACJ,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}
|
|
@@ -5,11 +5,8 @@ const shades_1 = require("@furystack/shades");
|
|
|
5
5
|
const paper_1 = require("../paper");
|
|
6
6
|
exports.Wizard = (0, shades_1.Shade)({
|
|
7
7
|
shadowDomName: 'shades-wizard',
|
|
8
|
-
|
|
9
|
-
currentPage
|
|
10
|
-
}),
|
|
11
|
-
render: ({ props, getState, updateState }) => {
|
|
12
|
-
const { currentPage } = getState();
|
|
8
|
+
render: ({ props, useState }) => {
|
|
9
|
+
const [currentPage, setCurrentPage] = useState('currentPage', 0);
|
|
13
10
|
const CurrentPage = props.steps[currentPage];
|
|
14
11
|
return ((0, shades_1.createComponent)("div", { style: {
|
|
15
12
|
display: 'flex',
|
|
@@ -21,14 +18,14 @@ exports.Wizard = (0, shades_1.Shade)({
|
|
|
21
18
|
(0, shades_1.createComponent)(paper_1.Paper, { style: { maxWidth: '100%', maxHeight: '100%' }, elevation: 3, onclick: (ev) => ev.stopPropagation() },
|
|
22
19
|
(0, shades_1.createComponent)(CurrentPage, { currentPage: currentPage, maxPages: props.steps.length, onNext: () => {
|
|
23
20
|
if (currentPage < props.steps.length - 1) {
|
|
24
|
-
|
|
21
|
+
setCurrentPage(currentPage + 1);
|
|
25
22
|
}
|
|
26
23
|
else {
|
|
27
24
|
props.onFinish?.();
|
|
28
25
|
}
|
|
29
26
|
}, onPrev: () => {
|
|
30
27
|
if (currentPage > 0) {
|
|
31
|
-
|
|
28
|
+
setCurrentPage(currentPage - 1);
|
|
32
29
|
}
|
|
33
30
|
} }))));
|
|
34
31
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/wizard/index.tsx"],"names":[],"mappings":";;;AACA,8CAA0D;AAC1D,oCAAgC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/wizard/index.tsx"],"names":[],"mappings":";;;AACA,8CAA0D;AAC1D,oCAAgC;AAgCnB,QAAA,MAAM,GAAG,IAAA,cAAK,EAAc;IACvC,aAAa,EAAE,eAAe;IAC9B,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC9B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC,CAAA;QAEhE,MAAM,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QAE5C,OAAO,CACL,uCACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf;YAED,8BAAC,aAAK,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,eAAe,EAAE;gBACxG,8BAAC,WAAW,IACV,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,EAC5B,MAAM,EAAE,GAAG,EAAE;wBACX,IAAI,WAAW,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;4BACxC,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;yBAChC;6BAAM;4BACL,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAA;yBACnB;oBACH,CAAC,EACD,MAAM,EAAE,GAAG,EAAE;wBACX,IAAI,WAAW,GAAG,CAAC,EAAE;4BACnB,cAAc,CAAC,WAAW,GAAG,CAAC,CAAC,CAAA;yBAChC;oBACH,CAAC,GACD,CACI,CACJ,CACP,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}
|
|
@@ -110,6 +110,16 @@ class CollectionService {
|
|
|
110
110
|
}
|
|
111
111
|
constructor(options) {
|
|
112
112
|
this.options = options;
|
|
113
|
+
this.isSelected = (entry) => this.selection.getValue().includes(entry);
|
|
114
|
+
this.addToSelection = (entry) => {
|
|
115
|
+
this.selection.setValue([...this.selection.getValue(), entry]);
|
|
116
|
+
};
|
|
117
|
+
this.removeFromSelection = (entry) => {
|
|
118
|
+
this.selection.setValue(this.selection.getValue().filter((e) => e !== entry));
|
|
119
|
+
};
|
|
120
|
+
this.toggleSelection = (entry) => {
|
|
121
|
+
this.isSelected(entry) ? this.removeFromSelection(entry) : this.addToSelection(entry);
|
|
122
|
+
};
|
|
113
123
|
this.loadLock = new semaphore_async_await_1.default(1);
|
|
114
124
|
this.data = new utils_1.ObservableValue({ count: 0, entries: [] });
|
|
115
125
|
this.error = new utils_1.ObservableValue(undefined);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collection-service.js","sourceRoot":"","sources":["../../src/services/collection-service.ts"],"names":[],"mappings":";;;;;;AACA,kFAA6C;AAE7C,4CAA4D;AA6C5D,MAAa,iBAAiB;IACrB,OAAO;QACZ,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAA;QAC5B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;QACpB,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAA;IAC1B,CAAC;
|
|
1
|
+
{"version":3,"file":"collection-service.js","sourceRoot":"","sources":["../../src/services/collection-service.ts"],"names":[],"mappings":";;;;;;AACA,kFAA6C;AAE7C,4CAA4D;AA6C5D,MAAa,iBAAiB;IACrB,OAAO;QACZ,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAA;QAC5B,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;QACpB,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAA;IAC1B,CAAC;IAoCM,aAAa,CAAC,EAAiB;QACpC,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAA;QACxC,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAA;QACzC,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAA;QACjD,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAA;QACjD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,CAAA;QAE7C,QAAQ,EAAE,CAAC,GAAG,EAAE;YACd,KAAK,GAAG;gBACN,EAAE,CAAC,cAAc,EAAE,CAAA;gBACnB,YAAY;oBACV,IAAI,CAAC,SAAS,CAAC,QAAQ,CACrB,eAAe,CAAC,QAAQ,CAAC,YAAY,CAAC;wBACpC,CAAC,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC;wBACnD,CAAC,CAAC,CAAC,GAAG,eAAe,EAAE,YAAY,CAAC,CACvC,CAAA;gBACH,MAAK;YACP,KAAK,GAAG;gBACN,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;gBAC5E,MAAK;YACP,KAAK,GAAG;gBACN,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;gBAChC,MAAK;YACP,KAAK,GAAG;gBACN,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;gBAC3B,MAAK;YACP,KAAK,QAAQ;gBACX,YAAY;oBACV,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC;wBAC/C,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC;wBAC3F,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;gBAC5E,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;gBAErG,MAAK;YACP,KAAK,SAAS;gBACZ,EAAE,CAAC,cAAc,EAAE,CAAA;gBACnB,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;gBAClG,MAAK;YACP,KAAK,WAAW;gBACd,EAAE,CAAC,cAAc,EAAE,CAAA;gBACnB,IAAI,CAAC,YAAY,CAAC,QAAQ,CACxB,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CACxF,CAAA;gBACD,MAAK;YACP,KAAK,MAAM,CAAC,CAAC;gBACX,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;gBACtC,MAAK;aACN;YACD,KAAK,KAAK,CAAC,CAAC;gBACV,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAA;gBACvD,MAAK;aACN;YACD,KAAK,KAAK,CAAC,CAAC;gBACV,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;gBACjC,MAAK;aACN;YACD,KAAK,QAAQ,CAAC,CAAC;gBACb,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;gBAC5B,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;gBAC3B,MAAK;aACN;YACD;gBACE,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE;oBACnD,MAAM,mBAAmB,GAAG,UAAU,GAAG,EAAE,CAAC,GAAG,CAAA;oBAC/C,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAClC,CAAC,CAAC,EAAE,EAAE,CACJ,IAAI,CAAC,OAAO,CAAC,WAAW;wBACvB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAS,EAAE,QAAQ,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,CACnF,CAAA;oBACD,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAA;oBAC3C,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAA;iBAC9C;SACJ;IACH,CAAC;IAEM,cAAc,CAAC,KAAQ,EAAE,EAAc;QAC5C,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,KAAK,CAAC,CAAA;QAChC,MAAM,qBAAqB,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAA;QACvD,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAA;QAChD,IAAI,EAAE,CAAC,OAAO,EAAE;YACd,IAAI,qBAAqB,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;gBACzC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAA;aAC1E;iBAAM;gBACL,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,qBAAqB,EAAE,KAAK,CAAC,CAAC,CAAA;aAC3D;SACF;QACD,IAAI,EAAE,CAAC,QAAQ,EAAE;YACf,MAAM,gBAAgB,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,WAAW,CAAC,CAAA;YACzF,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAA;YAC7E,MAAM,SAAS,GAAG,CAAC,GAAG,qBAAqB,CAAC,CAAA;YAC5C,IAAI,gBAAgB,GAAG,UAAU,EAAE;gBACjC,KAAK,IAAI,CAAC,GAAG,UAAU,EAAE,CAAC,IAAI,gBAAgB,EAAE,CAAC,EAAE,EAAE;oBACnD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;iBAChD;aACF;iBAAM;gBACL,KAAK,IAAI,CAAC,GAAG,gBAAgB,EAAE,CAAC,IAAI,UAAU,EAAE,CAAC,EAAE,EAAE;oBACnD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;iBAChD;aACF;YACD,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;SACnC;QACD,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACnC,CAAC;IAED,YAAoB,OAAoC;QAApC,YAAO,GAAP,OAAO,CAA6B;QA1IjD,eAAU,GAAG,CAAC,KAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QAEpE,mBAAc,GAAG,CAAC,KAAQ,EAAE,EAAE;YACnC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,CAAC,CAAA;QAChE,CAAC,CAAA;QAEM,wBAAmB,GAAG,CAAC,KAAQ,EAAE,EAAE;YACxC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAA;QAC/E,CAAC,CAAA;QAEM,oBAAe,GAAG,CAAC,KAAQ,EAAE,EAAE;YACpC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;QACvF,CAAC,CAAA;QAEgB,aAAQ,GAAG,IAAI,+BAAS,CAAC,CAAC,CAAC,CAAA;QAIrC,SAAI,GAAG,IAAI,uBAAe,CAAoB,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAA;QAExE,UAAK,GAAG,IAAI,uBAAe,CAAsB,SAAS,CAAC,CAAA;QAE3D,cAAS,GAAG,IAAI,uBAAe,CAAU,KAAK,CAAC,CAAA;QAI/C,iBAAY,GAAG,IAAI,uBAAe,EAAiB,CAAA;QAEnD,cAAS,GAAG,IAAI,uBAAe,CAAM,EAAE,CAAC,CAAA;QAExC,eAAU,GAAG,IAAI,uBAAe,CAAC,EAAE,CAAC,CAAA;QAEpC,aAAQ,GAAG,IAAI,uBAAe,CAAC,KAAK,CAAC,CAAA;QA2G1C,IAAI,CAAC,aAAa,GAAG,IAAI,uBAAe,CAAiC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAA;QAEtG,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU;YACpC,CAAC,CAAC,IAAA,gBAAQ,EAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;YACxD,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAA;QAEvB,IAAI,CAAC,UAAU,GAAG,KAAK,EAAE,GAAG,EAAE,EAAE;YAC9B,MAAM,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;YAC7B,IAAI;gBACF,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;gBAC9B,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;gBAC7B,MAAM,MAAM,GAAG,MAAM,MAAM,CAAC,GAAG,CAAC,CAAA;gBAChC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;gBAC1B,OAAO,MAAM,CAAA;aACd;YAAC,OAAO,KAAK,EAAE;gBACd,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;gBAC1B,MAAM,KAAK,CAAA;aACZ;oBAAS;gBACR,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAA;gBACvB,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;aAC/B;QACH,CAAC,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,CAAA;IACnE,CAAC;IAEM,KAAK,CAAC,oBAAoB,CAAC,KAAQ;QACxC,IAAI,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,KAAK,CAAC,CAAA;IACxC,CAAC;CACF;AAhLD,8CAgLC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@furystack/shades-common-components",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"FuryStack",
|
|
@@ -17,14 +17,14 @@
|
|
|
17
17
|
"author": "gallay.lajos@gmail.com",
|
|
18
18
|
"license": "GPL-2.0",
|
|
19
19
|
"devDependencies": {
|
|
20
|
-
"@types/jest": "^29.2.
|
|
20
|
+
"@types/jest": "^29.2.6",
|
|
21
21
|
"typescript": "4.9.4"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@furystack/core": "^11.2.
|
|
25
|
-
"@furystack/inject": "^7.1.
|
|
26
|
-
"@furystack/shades": "^
|
|
27
|
-
"@furystack/utils": "^3.1.
|
|
24
|
+
"@furystack/core": "^11.2.3",
|
|
25
|
+
"@furystack/inject": "^7.1.5",
|
|
26
|
+
"@furystack/shades": "^7.0.0",
|
|
27
|
+
"@furystack/utils": "^3.1.5",
|
|
28
28
|
"path-to-regexp": "^6.2.1",
|
|
29
29
|
"semaphore-async-await": "^1.5.1"
|
|
30
30
|
},
|
|
@@ -1,42 +1,39 @@
|
|
|
1
1
|
import type { RouteLinkProps } from '@furystack/shades'
|
|
2
|
+
import { attachProps } from '@furystack/shades'
|
|
2
3
|
import { createComponent, LocationService, RouteLink, Shade } from '@furystack/shades'
|
|
3
4
|
import { match } from 'path-to-regexp'
|
|
4
5
|
import { ThemeProviderService } from '../services'
|
|
5
6
|
|
|
6
7
|
export const AppBarLink = Shade<RouteLinkProps>({
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
shadowDomName: 'shade-app-bar-link',
|
|
9
|
+
render: ({ children, props, useObservable, injector, element }) => {
|
|
10
|
+
const getAnchorStyle = (currentUrl: string) => {
|
|
11
|
+
const isActive = !!match(props.href as string)(currentUrl)
|
|
9
12
|
const themeProviderService = injector.getInstance(ThemeProviderService)
|
|
10
13
|
const { theme } = themeProviderService
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
return {
|
|
15
|
+
display: 'flex',
|
|
16
|
+
height: '100%',
|
|
17
|
+
textDecoration: 'none',
|
|
18
|
+
alignItems: 'center',
|
|
19
|
+
padding: '0 8px',
|
|
20
|
+
transition: 'color .2s ease-in-out, transform .2s ease-in-out',
|
|
21
|
+
color: isActive ? theme.text.primary : theme.text.secondary,
|
|
22
|
+
opacity: isActive ? '1' : '0.8',
|
|
23
|
+
transform: isActive ? 'scale(1)' : 'scale(0.9)',
|
|
24
|
+
cursor: 'pointer',
|
|
25
|
+
}
|
|
15
26
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
},
|
|
23
|
-
shadowDomName: 'shade-app-bar-link',
|
|
24
|
-
render: ({ children, props }) => {
|
|
25
|
-
return (
|
|
26
|
-
<RouteLink
|
|
27
|
-
style={{
|
|
28
|
-
display: 'flex',
|
|
29
|
-
height: '100%',
|
|
30
|
-
textDecoration: 'none',
|
|
31
|
-
alignItems: 'center',
|
|
32
|
-
padding: '0 8px',
|
|
33
|
-
transition: 'color .2s ease-in-out, transform .2s ease-in-out',
|
|
34
|
-
...props.style,
|
|
35
|
-
}}
|
|
36
|
-
{...props}
|
|
37
|
-
>
|
|
38
|
-
{children}
|
|
39
|
-
</RouteLink>
|
|
27
|
+
|
|
28
|
+
const [currentUrl] = useObservable(
|
|
29
|
+
'locationChange',
|
|
30
|
+
injector.getInstance(LocationService).onLocationPathChanged /*, (newUrl) => {
|
|
31
|
+
attachProps(element as HTMLElement, { style: getAnchorStyle(newUrl) })
|
|
32
|
+
}*/,
|
|
40
33
|
)
|
|
34
|
+
|
|
35
|
+
attachProps(element as HTMLElement, { style: getAnchorStyle(currentUrl) })
|
|
36
|
+
|
|
37
|
+
return <RouteLink {...props}>{children}</RouteLink>
|
|
41
38
|
},
|
|
42
39
|
})
|
|
@@ -1,37 +1,32 @@
|
|
|
1
|
-
import { Shade, createComponent } from '@furystack/shades'
|
|
1
|
+
import { Shade, createComponent, attachProps } from '@furystack/shades'
|
|
2
2
|
import { ThemeProviderService } from '../services/theme-provider-service'
|
|
3
3
|
|
|
4
4
|
export const AppBar = Shade({
|
|
5
5
|
shadowDomName: 'shade-app-bar',
|
|
6
6
|
constructed: ({ element }) => {
|
|
7
|
-
const container = element.children[0] as HTMLElement
|
|
8
7
|
requestAnimationFrame(() => {
|
|
9
|
-
|
|
10
|
-
container.style.opacity = '1'
|
|
8
|
+
element.style.opacity = '1'
|
|
11
9
|
})
|
|
12
10
|
},
|
|
13
|
-
render: ({ children, injector }) => {
|
|
11
|
+
render: ({ children, injector, element }) => {
|
|
14
12
|
const { theme } = injector.getInstance(ThemeProviderService)
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
{children}
|
|
34
|
-
</div>
|
|
35
|
-
)
|
|
13
|
+
attachProps(element, {
|
|
14
|
+
style: {
|
|
15
|
+
width: '100%',
|
|
16
|
+
background: 'rgba(128,128,128,0.2)',
|
|
17
|
+
backdropFilter: 'blur(15px)',
|
|
18
|
+
display: 'flex',
|
|
19
|
+
justifyContent: 'flex-start',
|
|
20
|
+
alignItems: 'center',
|
|
21
|
+
boxShadow: '0 0 12px rgba(0,0,0,0.6)',
|
|
22
|
+
transition:
|
|
23
|
+
'opacity .35s cubic-bezier(0.550, 0.085, 0.680, 0.530), padding .2s cubic-bezier(0.550, 0.085, 0.680, 0.530)',
|
|
24
|
+
opacity: '0',
|
|
25
|
+
position: 'fixed',
|
|
26
|
+
zIndex: '1',
|
|
27
|
+
color: theme.text.secondary,
|
|
28
|
+
},
|
|
29
|
+
})
|
|
30
|
+
return <>{children}</>
|
|
36
31
|
},
|
|
37
32
|
})
|
|
@@ -1,46 +1,50 @@
|
|
|
1
1
|
import type { PartialElement } from '@furystack/shades'
|
|
2
|
-
import { Shade, createComponent } from '@furystack/shades'
|
|
2
|
+
import { Shade, createComponent, attachProps } from '@furystack/shades'
|
|
3
3
|
|
|
4
|
-
export type AvatarProps = { avatarUrl: string } & PartialElement<HTMLDivElement>
|
|
4
|
+
export type AvatarProps = { avatarUrl: string; fallback?: JSX.Element } & PartialElement<HTMLDivElement>
|
|
5
5
|
|
|
6
6
|
export const Avatar = Shade<AvatarProps>({
|
|
7
7
|
shadowDomName: 'shade-avatar',
|
|
8
|
-
render: ({ props }) => {
|
|
9
|
-
const { ...
|
|
8
|
+
render: ({ props, element }) => {
|
|
9
|
+
const { avatarUrl, ...containerProps } = props
|
|
10
|
+
|
|
11
|
+
attachProps(element, {
|
|
12
|
+
...containerProps,
|
|
13
|
+
style: {
|
|
14
|
+
width: '128px',
|
|
15
|
+
height: '128px',
|
|
16
|
+
overflow: 'hidden',
|
|
17
|
+
borderRadius: '50%',
|
|
18
|
+
boxShadow: '0px 0px 8px 3px rgba(128,128,128,0.2)',
|
|
19
|
+
backgroundColor: 'rgba(128,128,128,0.3)',
|
|
20
|
+
display: 'flex',
|
|
21
|
+
...containerProps?.style,
|
|
22
|
+
},
|
|
23
|
+
})
|
|
24
|
+
|
|
10
25
|
return (
|
|
11
|
-
<
|
|
12
|
-
{
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
26
|
+
<img
|
|
27
|
+
style={{ width: '100%', height: '100%', objectFit: 'cover', backgroundPosition: 'center' }}
|
|
28
|
+
alt={'avatar image'}
|
|
29
|
+
src={props.avatarUrl}
|
|
30
|
+
onerror={(ev) => {
|
|
31
|
+
;((ev as Event).target as HTMLImageElement).replaceWith(
|
|
32
|
+
<div
|
|
33
|
+
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', width: '100%' }}
|
|
34
|
+
>
|
|
35
|
+
<div
|
|
36
|
+
style={{
|
|
37
|
+
textAlign: 'center',
|
|
38
|
+
userSelect: 'none',
|
|
39
|
+
fontSize: '32px',
|
|
40
|
+
}}
|
|
41
|
+
>
|
|
42
|
+
{props.fallback || '🛑'}
|
|
43
|
+
</div>
|
|
44
|
+
</div>,
|
|
45
|
+
)
|
|
21
46
|
}}
|
|
22
|
-
|
|
23
|
-
<img
|
|
24
|
-
style={{ width: '100%', height: '100%' }}
|
|
25
|
-
alt={'avatar image'}
|
|
26
|
-
src={props.avatarUrl}
|
|
27
|
-
onerror={(ev) => {
|
|
28
|
-
;((ev as Event).target as HTMLImageElement).replaceWith(
|
|
29
|
-
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
|
|
30
|
-
<div
|
|
31
|
-
style={{
|
|
32
|
-
fontVariant: 'all-petite-caps',
|
|
33
|
-
fontSize: '2em',
|
|
34
|
-
height: 'calc(100% + 7px)',
|
|
35
|
-
cursor: 'default',
|
|
36
|
-
userSelect: 'none',
|
|
37
|
-
}}
|
|
38
|
-
/>
|
|
39
|
-
</div>,
|
|
40
|
-
)
|
|
41
|
-
}}
|
|
42
|
-
/>
|
|
43
|
-
</div>
|
|
47
|
+
/>
|
|
44
48
|
)
|
|
45
49
|
},
|
|
46
50
|
})
|