element-book 6.0.3 → 7.0.1
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/README.md +5 -5
- package/dist/data/book-entry/base-book-entry.d.ts +20 -0
- package/dist/data/book-entry/book-element-example/book-element-example.d.ts +32 -0
- package/dist/data/book-entry/book-entry-type.d.ts +9 -0
- package/dist/data/book-entry/book-entry-type.js +9 -0
- package/dist/data/book-entry/book-entry.d.ts +8 -0
- package/dist/data/book-entry/book-entry.js +4 -0
- package/dist/data/book-entry/book-page/book-page-controls.d.ts +41 -0
- package/dist/data/book-entry/book-page/book-page-controls.js +49 -0
- package/dist/data/book-entry/book-page/book-page.d.ts +12 -0
- package/dist/data/book-entry/book-page/book-page.js +1 -0
- package/dist/data/book-entry/book-page/current-controls.d.ts +12 -0
- package/dist/data/book-entry/book-page/current-controls.js +62 -0
- package/dist/data/book-entry/book-page/define-book-page.d.ts +18 -0
- package/dist/data/book-entry/book-page/define-book-page.js +34 -0
- package/dist/data/book-entry/book-root.d.ts +7 -0
- package/dist/data/book-entry/book-root.js +1 -0
- package/dist/data/book-entry/url-breadcrumbs.d.ts +7 -0
- package/dist/data/book-entry/url-breadcrumbs.js +24 -0
- package/dist/data/book-entry/verify-book-entry.d.ts +6 -0
- package/dist/data/book-entry/verify-book-entry.js +18 -0
- package/dist/data/book-tree/book-tree-node.d.ts +27 -0
- package/dist/data/book-tree/book-tree-node.js +1 -0
- package/dist/data/book-tree/book-tree.d.ts +16 -0
- package/dist/data/book-tree/book-tree.js +148 -0
- package/dist/data/book-tree/search-nodes.d.ts +5 -0
- package/dist/data/book-tree/search-nodes.js +56 -0
- package/dist/data/book-tree/tree-cache.d.ts +4 -0
- package/dist/data/book-tree/tree-cache.js +8 -0
- package/dist/index.d.ts +5 -6
- package/dist/index.js +5 -6
- package/dist/routing/book-routing.d.ts +10 -0
- package/dist/routing/book-routing.js +18 -0
- package/dist/routing/create-book-router.d.ts +2 -0
- package/dist/routing/{create-element-book-router.js → create-book-router.js} +8 -8
- package/dist/ui/elements/book-breadcrumbs.element.d.ts +5 -0
- package/dist/ui/elements/{element-book-breadcrumbs.element.js → book-breadcrumbs.element.js} +9 -9
- package/dist/ui/elements/book-nav.element.d.ts +7 -0
- package/dist/ui/elements/book-nav.element.js +114 -0
- package/dist/ui/elements/common/book-error.element.d.ts +3 -0
- package/dist/ui/elements/common/book-error.element.js +27 -0
- package/dist/ui/elements/common/book-route-link.element.d.ts +5 -0
- package/dist/ui/elements/common/{element-book-route-link.element.js → book-route-link.element.js} +5 -5
- package/dist/ui/elements/define-book-element.d.ts +2 -2
- package/dist/ui/elements/define-book-element.js +1 -1
- package/dist/ui/elements/element-book-app/element-book-app-slots.d.ts +2 -2
- package/dist/ui/elements/element-book-app/element-book-app-slots.js +2 -2
- package/dist/ui/elements/element-book-app/element-book-app.element.d.ts +7 -2
- package/dist/ui/elements/element-book-app/element-book-app.element.js +76 -29
- package/dist/ui/elements/element-book-app/element-book-config.d.ts +4 -2
- package/dist/ui/elements/element-book-app/get-current-nodes.d.ts +3 -0
- package/dist/ui/elements/element-book-app/get-current-nodes.js +23 -0
- package/dist/ui/elements/entry-display/book-breadcrumbs-bar.element.d.ts +6 -0
- package/dist/ui/elements/entry-display/book-breadcrumbs-bar.element.js +65 -0
- package/dist/ui/elements/entry-display/book-entry-description.element.d.ts +3 -0
- package/dist/ui/elements/entry-display/book-entry-description.element.js +34 -0
- package/dist/ui/elements/entry-display/book-entry-display.element.d.ts +12 -0
- package/dist/ui/elements/entry-display/book-entry-display.element.js +173 -0
- package/dist/ui/elements/entry-display/book-page/book-page-controls.element.d.ts +17 -0
- package/dist/ui/elements/entry-display/book-page/book-page-controls.element.js +147 -0
- package/dist/ui/elements/entry-display/book-page/book-page-wrapper.element.d.ts +10 -0
- package/dist/ui/elements/entry-display/book-page/book-page-wrapper.element.js +92 -0
- package/dist/ui/elements/entry-display/element-example/book-element-example-controls.element.d.ts +7 -0
- package/dist/ui/elements/entry-display/element-example/book-element-example-controls.element.js +36 -0
- package/dist/ui/elements/entry-display/element-example/book-element-example-viewer.element.d.ts +9 -0
- package/dist/ui/elements/entry-display/element-example/book-element-example-viewer.element.js +57 -0
- package/dist/ui/elements/entry-display/element-example/book-element-example-wrapper.element.d.ts +9 -0
- package/dist/ui/elements/entry-display/element-example/book-element-example-wrapper.element.js +49 -0
- package/dist/ui/events/change-route.event.d.ts +1 -1
- package/dist/util/type.d.ts +40 -0
- package/dist/util/type.js +1 -0
- package/package.json +15 -11
- package/dist/data/element-book-entry/element-book-chapter/element-book-chapter.d.ts +0 -22
- package/dist/data/element-book-entry/element-book-chapter/element-book-chapter.js +0 -16
- package/dist/data/element-book-entry/element-book-entry-type.d.ts +0 -8
- package/dist/data/element-book-entry/element-book-entry-type.js +0 -9
- package/dist/data/element-book-entry/element-book-entry.d.ts +0 -14
- package/dist/data/element-book-entry/element-book-entry.js +0 -22
- package/dist/data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control-type.d.ts +0 -13
- package/dist/data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control-type.js +0 -7
- package/dist/data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control.d.ts +0 -13
- package/dist/data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control.js +0 -4
- package/dist/data/element-book-entry/element-book-page/element-book-page-example.d.ts +0 -22
- package/dist/data/element-book-entry/element-book-page/element-book-page.d.ts +0 -23
- package/dist/data/element-book-entry/element-book-page/element-book-page.js +0 -41
- package/dist/data/element-book-entry/entry-tree/entry-tree-search.d.ts +0 -8
- package/dist/data/element-book-entry/entry-tree/entry-tree-search.js +0 -66
- package/dist/data/element-book-entry/entry-tree/entry-tree.d.ts +0 -18
- package/dist/data/element-book-entry/entry-tree/entry-tree.js +0 -87
- package/dist/data/element-book-entry/entry-tree/tree-cache.d.ts +0 -5
- package/dist/data/element-book-entry/entry-tree/tree-cache.js +0 -8
- package/dist/data/element-book-entry/entry-tree/walk-entry-tree.d.ts +0 -8
- package/dist/data/element-book-entry/entry-tree/walk-entry-tree.js +0 -85
- package/dist/routing/create-element-book-router.d.ts +0 -2
- package/dist/routing/element-book-routing.d.ts +0 -10
- package/dist/routing/element-book-routing.js +0 -18
- package/dist/ui/elements/common/element-book-route-link.element.d.ts +0 -5
- package/dist/ui/elements/element-book-app/get-current-entry.d.ts +0 -4
- package/dist/ui/elements/element-book-app/get-current-entry.js +0 -17
- package/dist/ui/elements/element-book-breadcrumbs.element.d.ts +0 -5
- package/dist/ui/elements/element-book-nav.element.d.ts +0 -7
- package/dist/ui/elements/element-book-nav.element.js +0 -129
- package/dist/ui/elements/entry-display/element-book-entry-display.element.d.ts +0 -7
- package/dist/ui/elements/entry-display/element-book-entry-display.element.js +0 -280
- package/dist/ui/elements/entry-display/element-book-example-controls.element.d.ts +0 -4
- package/dist/ui/elements/entry-display/element-book-example-controls.element.js +0 -26
- package/dist/ui/elements/entry-display/element-book-example-viewer.element.d.ts +0 -6
- package/dist/ui/elements/entry-display/element-book-example-viewer.element.js +0 -43
- package/dist/ui/elements/entry-display/element-book-page-controls.element.d.ts +0 -11
- package/dist/ui/elements/entry-display/element-book-page-controls.element.js +0 -65
- package/dist/ui/elements/entry-display/element-book-page-examples.element.d.ts +0 -7
- package/dist/ui/elements/entry-display/element-book-page-examples.element.js +0 -102
- package/dist/ui/icons/element-16.icon.d.ts +0 -1
- package/dist/ui/icons/element-16.icon.js +0 -18
- package/dist/ui/icons/element-24.icon.d.ts +0 -1
- package/dist/ui/icons/element-24.icon.js +0 -18
- package/dist/utilities/type.d.ts +0 -3
- /package/dist/data/{element-book-entry/element-book-page/element-book-page-example.js → book-entry/base-book-entry.js} +0 -0
- /package/dist/{utilities/type.js → data/book-entry/book-element-example/book-element-example.js} +0 -0
- /package/dist/{utilities/search.d.ts → util/fuzzy-search.d.ts} +0 -0
- /package/dist/{utilities/search.js → util/fuzzy-search.js} +0 -0
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
import { extractEventTarget } from '@augment-vir/browser';
|
|
2
|
+
import { isRuntimeTypeOf } from '@augment-vir/common';
|
|
3
|
+
import { css, defineElementEvent, html, listen } from 'element-vir';
|
|
4
|
+
import { BookPageControlTypeEnum, isControlInitType, } from '../../../../data/book-entry/book-page/book-page-controls';
|
|
5
|
+
import { colorThemeCssVars } from '../../../color-theme/color-theme';
|
|
6
|
+
import { defineBookElement } from '../../define-book-element';
|
|
7
|
+
export const BookPageControls = defineBookElement()({
|
|
8
|
+
tagName: 'book-page-controls',
|
|
9
|
+
events: {
|
|
10
|
+
controlValueChange: defineElementEvent(),
|
|
11
|
+
},
|
|
12
|
+
hostClasses: {
|
|
13
|
+
'book-page-controls-has-controls': ({ inputs }) => !!Object.keys(inputs.config).length,
|
|
14
|
+
},
|
|
15
|
+
styles: ({ hostClasses }) => css `
|
|
16
|
+
:host {
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-wrap: wrap;
|
|
19
|
+
opacity: 0.7;
|
|
20
|
+
gap: 16px;
|
|
21
|
+
color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
${hostClasses['book-page-controls-has-controls'].selector} {
|
|
25
|
+
margin-top: 8px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.control-wrapper {
|
|
29
|
+
display: flex;
|
|
30
|
+
gap: 4px;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.error {
|
|
35
|
+
font-weight: bold;
|
|
36
|
+
color: red;
|
|
37
|
+
}
|
|
38
|
+
`,
|
|
39
|
+
renderCallback({ inputs, dispatch, events }) {
|
|
40
|
+
if (!Object.entries(inputs.config).length) {
|
|
41
|
+
return '';
|
|
42
|
+
}
|
|
43
|
+
return Object.entries(inputs.config).map(([controlName, controlInit,]) => {
|
|
44
|
+
if (controlInit.controlType === BookPageControlTypeEnum.Hidden) {
|
|
45
|
+
return '';
|
|
46
|
+
}
|
|
47
|
+
const controlInputTemplate = createControlInput(inputs.currentValues[controlName], controlInit, (newValue) => {
|
|
48
|
+
const fullUrlBreadcrumbs = isRuntimeTypeOf(inputs.fullUrlBreadcrumbs, 'array')
|
|
49
|
+
? inputs.fullUrlBreadcrumbs
|
|
50
|
+
: inputs.fullUrlBreadcrumbs[controlName];
|
|
51
|
+
if (!fullUrlBreadcrumbs) {
|
|
52
|
+
throw new Error(`Failed to find breadcrumbs from given control name: '${controlName}'`);
|
|
53
|
+
}
|
|
54
|
+
dispatch(new events.controlValueChange({
|
|
55
|
+
fullUrlBreadcrumbs,
|
|
56
|
+
newValues: {
|
|
57
|
+
...inputs.currentValues,
|
|
58
|
+
[controlName]: newValue,
|
|
59
|
+
},
|
|
60
|
+
}));
|
|
61
|
+
});
|
|
62
|
+
return html `
|
|
63
|
+
<label class="control-wrapper">
|
|
64
|
+
<span>${controlName}</span>
|
|
65
|
+
${controlInputTemplate}
|
|
66
|
+
</label>
|
|
67
|
+
`;
|
|
68
|
+
});
|
|
69
|
+
},
|
|
70
|
+
});
|
|
71
|
+
function createControlInput(value, controlInit, valueChange) {
|
|
72
|
+
if (isControlInitType(controlInit, BookPageControlTypeEnum.Hidden)) {
|
|
73
|
+
return '';
|
|
74
|
+
}
|
|
75
|
+
else if (isControlInitType(controlInit, BookPageControlTypeEnum.Checkbox)) {
|
|
76
|
+
return html `
|
|
77
|
+
<input
|
|
78
|
+
type="checkbox"
|
|
79
|
+
.value=${value}
|
|
80
|
+
${listen('input', (event) => {
|
|
81
|
+
const inputElement = extractEventTarget(event, HTMLInputElement);
|
|
82
|
+
valueChange(inputElement.checked);
|
|
83
|
+
})}
|
|
84
|
+
/>
|
|
85
|
+
`;
|
|
86
|
+
}
|
|
87
|
+
else if (isControlInitType(controlInit, BookPageControlTypeEnum.Color)) {
|
|
88
|
+
return html `
|
|
89
|
+
<input
|
|
90
|
+
type="color"
|
|
91
|
+
.value=${value}
|
|
92
|
+
${listen('input', (event) => {
|
|
93
|
+
const inputElement = extractEventTarget(event, HTMLInputElement);
|
|
94
|
+
valueChange(inputElement.value);
|
|
95
|
+
})}
|
|
96
|
+
/>
|
|
97
|
+
`;
|
|
98
|
+
}
|
|
99
|
+
else if (isControlInitType(controlInit, BookPageControlTypeEnum.Text)) {
|
|
100
|
+
return html `
|
|
101
|
+
<input
|
|
102
|
+
type="text"
|
|
103
|
+
.value=${value}
|
|
104
|
+
${listen('input', (event) => {
|
|
105
|
+
const inputElement = extractEventTarget(event, HTMLInputElement);
|
|
106
|
+
valueChange(inputElement.value);
|
|
107
|
+
})}
|
|
108
|
+
/>
|
|
109
|
+
`;
|
|
110
|
+
}
|
|
111
|
+
else if (isControlInitType(controlInit, BookPageControlTypeEnum.Number)) {
|
|
112
|
+
return html `
|
|
113
|
+
<input
|
|
114
|
+
type="number"
|
|
115
|
+
.value=${value}
|
|
116
|
+
${listen('input', (event) => {
|
|
117
|
+
const inputElement = extractEventTarget(event, HTMLInputElement);
|
|
118
|
+
valueChange(inputElement.value);
|
|
119
|
+
})}
|
|
120
|
+
/>
|
|
121
|
+
`;
|
|
122
|
+
}
|
|
123
|
+
else if (isControlInitType(controlInit, BookPageControlTypeEnum.Dropdown)) {
|
|
124
|
+
return html `
|
|
125
|
+
<select
|
|
126
|
+
.value=${value}
|
|
127
|
+
${listen('input', (event) => {
|
|
128
|
+
const selectElement = extractEventTarget(event, HTMLSelectElement);
|
|
129
|
+
valueChange(selectElement.value);
|
|
130
|
+
})}
|
|
131
|
+
>
|
|
132
|
+
${controlInit.options.map((optionLabel, optionIndex) => {
|
|
133
|
+
return html `
|
|
134
|
+
<option ?selected=${optionIndex === value} value=${optionIndex}>
|
|
135
|
+
${optionLabel}
|
|
136
|
+
</option>
|
|
137
|
+
`;
|
|
138
|
+
})}
|
|
139
|
+
</select>
|
|
140
|
+
`;
|
|
141
|
+
}
|
|
142
|
+
else {
|
|
143
|
+
return html `
|
|
144
|
+
<p class="error">${controlInit.controlType} controls are not implemented yet.</p>
|
|
145
|
+
`;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { BookEntryTypeEnum } from '../../../../data/book-entry/book-entry-type';
|
|
2
|
+
import { CurrentControls } from '../../../../data/book-entry/book-page/current-controls';
|
|
3
|
+
import { BookTreeNode } from '../../../../data/book-tree/book-tree-node';
|
|
4
|
+
import { BookRouter } from '../../../../routing/book-routing';
|
|
5
|
+
export declare const BookPageWrapper: import("element-vir").DeclarativeElementDefinition<"book-page-wrapper", {
|
|
6
|
+
isTopLevel: boolean;
|
|
7
|
+
pageNode: BookTreeNode<BookEntryTypeEnum.Page>;
|
|
8
|
+
router: BookRouter;
|
|
9
|
+
currentControls: CurrentControls;
|
|
10
|
+
}, {}, {}, `book-page-wrapper-${string}`, `book-page-wrapper-${string}`, import("lit-html").HTMLTemplateResult>;
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { combineErrors } from '@augment-vir/common';
|
|
2
|
+
import { assign, css, html } from 'element-vir';
|
|
3
|
+
import { traverseCurrentControls, } from '../../../../data/book-entry/book-page/current-controls';
|
|
4
|
+
import { BookMainRoute } from '../../../../routing/book-routing';
|
|
5
|
+
import { BookError } from '../../common/book-error.element';
|
|
6
|
+
import { BookRouteLink } from '../../common/book-route-link.element';
|
|
7
|
+
import { defineBookElement } from '../../define-book-element';
|
|
8
|
+
import { BookEntryDescription } from '../book-entry-description.element';
|
|
9
|
+
import { BookPageControls } from './book-page-controls.element';
|
|
10
|
+
export const BookPageWrapper = defineBookElement()({
|
|
11
|
+
tagName: 'book-page-wrapper',
|
|
12
|
+
styles: css `
|
|
13
|
+
:host {
|
|
14
|
+
display: block;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
h2,
|
|
18
|
+
h3 {
|
|
19
|
+
margin: 0;
|
|
20
|
+
padding: 0;
|
|
21
|
+
font-size: 1.5em;
|
|
22
|
+
display: flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
gap: 8px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.page-header .title-group {
|
|
28
|
+
align-items: flex-start;
|
|
29
|
+
display: flex;
|
|
30
|
+
flex-direction: column;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
${BookRouteLink} {
|
|
34
|
+
display: inline-block;
|
|
35
|
+
}
|
|
36
|
+
`,
|
|
37
|
+
renderCallback({ inputs }) {
|
|
38
|
+
const titleTemplate = inputs.isTopLevel
|
|
39
|
+
? html `
|
|
40
|
+
<h2 class="header-with-icon">${inputs.pageNode.entry.title}</h2>
|
|
41
|
+
`
|
|
42
|
+
: html `
|
|
43
|
+
<h3 class="header-with-icon">${inputs.pageNode.entry.title}</h3>
|
|
44
|
+
`;
|
|
45
|
+
const linkPaths = [
|
|
46
|
+
BookMainRoute.Book,
|
|
47
|
+
...inputs.pageNode.fullUrlBreadcrumbs,
|
|
48
|
+
];
|
|
49
|
+
const error = combineErrors(inputs.pageNode.entry.errors);
|
|
50
|
+
if (error) {
|
|
51
|
+
console.error(error);
|
|
52
|
+
}
|
|
53
|
+
return html `
|
|
54
|
+
<div class="page-header block-entry">
|
|
55
|
+
<div class="title-group">
|
|
56
|
+
<${BookRouteLink}
|
|
57
|
+
${assign(BookRouteLink, {
|
|
58
|
+
route: {
|
|
59
|
+
paths: linkPaths,
|
|
60
|
+
hash: undefined,
|
|
61
|
+
search: undefined,
|
|
62
|
+
},
|
|
63
|
+
router: inputs.router,
|
|
64
|
+
})}
|
|
65
|
+
>
|
|
66
|
+
${titleTemplate}
|
|
67
|
+
</${BookRouteLink}>
|
|
68
|
+
${!!error
|
|
69
|
+
? html `
|
|
70
|
+
<${BookError}
|
|
71
|
+
${assign(BookError, { message: error.message })}
|
|
72
|
+
></${BookError}>
|
|
73
|
+
`
|
|
74
|
+
: html `
|
|
75
|
+
<${BookEntryDescription}
|
|
76
|
+
${assign(BookEntryDescription, {
|
|
77
|
+
descriptionParagraphs: inputs.pageNode.entry.descriptionParagraphs ?? [],
|
|
78
|
+
})}
|
|
79
|
+
></${BookEntryDescription}>
|
|
80
|
+
<${BookPageControls}
|
|
81
|
+
${assign(BookPageControls, {
|
|
82
|
+
config: inputs.pageNode.entry.controls,
|
|
83
|
+
currentValues: traverseCurrentControls(inputs.currentControls, inputs.pageNode.fullUrlBreadcrumbs),
|
|
84
|
+
fullUrlBreadcrumbs: inputs.pageNode.fullUrlBreadcrumbs,
|
|
85
|
+
})}
|
|
86
|
+
></${BookPageControls}>
|
|
87
|
+
`}
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
`;
|
|
91
|
+
},
|
|
92
|
+
});
|
package/dist/ui/elements/entry-display/element-example/book-element-example-controls.element.d.ts
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { BookEntryTypeEnum } from '../../../../data/book-entry/book-entry-type';
|
|
2
|
+
import { BookTreeNode } from '../../../../data/book-tree/book-tree-node';
|
|
3
|
+
import { BookRouter } from '../../../../routing/book-routing';
|
|
4
|
+
export declare const BookElementExampleControls: import("element-vir").DeclarativeElementDefinition<"book-element-example-controls", {
|
|
5
|
+
elementExampleNode: BookTreeNode<BookEntryTypeEnum.ElementExample>;
|
|
6
|
+
router: BookRouter;
|
|
7
|
+
}, {}, {}, `book-element-example-controls-${string}`, `book-element-example-controls-${string}`, import("lit-html").HTMLTemplateResult>;
|
package/dist/ui/elements/entry-display/element-example/book-element-example-controls.element.js
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { assign, css, html } from 'element-vir';
|
|
2
|
+
import { BookMainRoute } from '../../../../routing/book-routing';
|
|
3
|
+
import { colorThemeCssVars } from '../../../color-theme/color-theme';
|
|
4
|
+
import { BookRouteLink } from '../../common/book-route-link.element';
|
|
5
|
+
import { defineBookElement } from '../../define-book-element';
|
|
6
|
+
export const BookElementExampleControls = defineBookElement()({
|
|
7
|
+
tagName: 'book-element-example-controls',
|
|
8
|
+
styles: css `
|
|
9
|
+
:host {
|
|
10
|
+
display: flex;
|
|
11
|
+
color: ${colorThemeCssVars['element-book-page-foreground-faint-level-1-color'].value};
|
|
12
|
+
border-bottom: 1px solid currentColor;
|
|
13
|
+
padding: 0 8px 4px;
|
|
14
|
+
}
|
|
15
|
+
`,
|
|
16
|
+
renderCallback({ inputs }) {
|
|
17
|
+
const linkPaths = [
|
|
18
|
+
BookMainRoute.Book,
|
|
19
|
+
...inputs.elementExampleNode.fullUrlBreadcrumbs,
|
|
20
|
+
];
|
|
21
|
+
return html `
|
|
22
|
+
<${BookRouteLink}
|
|
23
|
+
${assign(BookRouteLink, {
|
|
24
|
+
route: {
|
|
25
|
+
paths: linkPaths,
|
|
26
|
+
hash: undefined,
|
|
27
|
+
search: undefined,
|
|
28
|
+
},
|
|
29
|
+
router: inputs.router,
|
|
30
|
+
})}
|
|
31
|
+
>
|
|
32
|
+
${inputs.elementExampleNode.entry.title}
|
|
33
|
+
</${BookRouteLink}>
|
|
34
|
+
`;
|
|
35
|
+
},
|
|
36
|
+
});
|
package/dist/ui/elements/entry-display/element-example/book-element-example-viewer.element.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { BookEntryTypeEnum } from '../../../../data/book-entry/book-entry-type';
|
|
2
|
+
import { BookPageControlsValues } from '../../../../data/book-entry/book-page/book-page-controls';
|
|
3
|
+
import { BookTreeNode } from '../../../../data/book-tree/book-tree-node';
|
|
4
|
+
import { BookRouter } from '../../../../routing/book-routing';
|
|
5
|
+
export declare const BookElementExampleViewer: import("element-vir").DeclarativeElementDefinition<"book-element-example-viewer", {
|
|
6
|
+
elementExampleNode: BookTreeNode<BookEntryTypeEnum.ElementExample>;
|
|
7
|
+
currentPageControls: BookPageControlsValues;
|
|
8
|
+
router: BookRouter;
|
|
9
|
+
}, any, {}, `book-element-example-viewer-${string}`, `book-element-example-viewer-${string}`, import("lit-html").HTMLTemplateResult>;
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { combineErrors, extractErrorMessage } from '@augment-vir/common';
|
|
2
|
+
import { assign, html, renderIf } from 'element-vir';
|
|
3
|
+
import { unsetInternalState } from '../../../../data/unset';
|
|
4
|
+
import { BookError } from '../../common/book-error.element';
|
|
5
|
+
import { defineBookElement } from '../../define-book-element';
|
|
6
|
+
export const BookElementExampleViewer = defineBookElement()({
|
|
7
|
+
tagName: 'book-element-example-viewer',
|
|
8
|
+
stateInitStatic: {
|
|
9
|
+
isUnset: unsetInternalState,
|
|
10
|
+
},
|
|
11
|
+
renderCallback({ state, inputs, updateState }) {
|
|
12
|
+
try {
|
|
13
|
+
if (inputs.elementExampleNode.entry.errors.length) {
|
|
14
|
+
throw combineErrors(inputs.elementExampleNode.entry.errors);
|
|
15
|
+
}
|
|
16
|
+
if (!inputs.elementExampleNode.entry.renderCallback ||
|
|
17
|
+
typeof inputs.elementExampleNode.entry.renderCallback === 'string') {
|
|
18
|
+
throw new Error(`Failed to render example '${inputs.elementExampleNode.entry.title}': renderCallback is not a function`);
|
|
19
|
+
}
|
|
20
|
+
if (state.isUnset === unsetInternalState) {
|
|
21
|
+
updateState({
|
|
22
|
+
isUnset: undefined,
|
|
23
|
+
...inputs.elementExampleNode.entry.stateInitStatic,
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
const output = inputs.elementExampleNode.entry.renderCallback({
|
|
27
|
+
state,
|
|
28
|
+
updateState,
|
|
29
|
+
controls: inputs.currentPageControls,
|
|
30
|
+
});
|
|
31
|
+
if (output instanceof Promise) {
|
|
32
|
+
throw new Error('renderCallback output cannot be a promise');
|
|
33
|
+
}
|
|
34
|
+
return html `
|
|
35
|
+
${renderIf(!!inputs.elementExampleNode.entry.styles, html `
|
|
36
|
+
<style>
|
|
37
|
+
${inputs.elementExampleNode.entry.styles}
|
|
38
|
+
</style>
|
|
39
|
+
`)}
|
|
40
|
+
${output}
|
|
41
|
+
`;
|
|
42
|
+
}
|
|
43
|
+
catch (error) {
|
|
44
|
+
console.error(error);
|
|
45
|
+
return html `
|
|
46
|
+
<${BookError}
|
|
47
|
+
${assign(BookError, {
|
|
48
|
+
message: `${inputs.elementExampleNode.entry.title} failed: ${extractErrorMessage(error)}`,
|
|
49
|
+
})}
|
|
50
|
+
></${BookError}>
|
|
51
|
+
`;
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
options: {
|
|
55
|
+
allowPolymorphicState: true,
|
|
56
|
+
},
|
|
57
|
+
});
|
package/dist/ui/elements/entry-display/element-example/book-element-example-wrapper.element.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { BookEntryTypeEnum } from '../../../../data/book-entry/book-entry-type';
|
|
2
|
+
import { BookPageControlsValues } from '../../../../data/book-entry/book-page/book-page-controls';
|
|
3
|
+
import { BookTreeNode } from '../../../../data/book-tree/book-tree-node';
|
|
4
|
+
import { BookRouter } from '../../../../routing/book-routing';
|
|
5
|
+
export declare const BookElementExampleWrapper: import("element-vir").DeclarativeElementDefinition<"book-element-example-wrapper", {
|
|
6
|
+
elementExampleNode: BookTreeNode<BookEntryTypeEnum.ElementExample>;
|
|
7
|
+
currentPageControls: BookPageControlsValues;
|
|
8
|
+
router: BookRouter;
|
|
9
|
+
}, {}, {}, `book-element-example-wrapper-${string}`, `book-element-example-wrapper-${string}`, import("lit-html").HTMLTemplateResult>;
|
package/dist/ui/elements/entry-display/element-example/book-element-example-wrapper.element.js
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { assign, css, html } from 'element-vir';
|
|
2
|
+
import { colorThemeCssVars } from '../../../color-theme/color-theme';
|
|
3
|
+
import { defineBookElement } from '../../define-book-element';
|
|
4
|
+
import { BookElementExampleControls } from './book-element-example-controls.element';
|
|
5
|
+
import { BookElementExampleViewer } from './book-element-example-viewer.element';
|
|
6
|
+
export const BookElementExampleWrapper = defineBookElement()({
|
|
7
|
+
tagName: 'book-element-example-wrapper',
|
|
8
|
+
styles: css `
|
|
9
|
+
:host {
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
flex-direction: column;
|
|
12
|
+
gap: 24px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.examples-wrapper {
|
|
16
|
+
display: flex;
|
|
17
|
+
gap: 32px;
|
|
18
|
+
flex-wrap: wrap;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.error {
|
|
22
|
+
color: red;
|
|
23
|
+
font-weight: bold;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.individual-example-wrapper {
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
gap: 24px;
|
|
30
|
+
max-width: 100%;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
${BookElementExampleControls} {
|
|
34
|
+
color: ${colorThemeCssVars['element-book-accent-icon-color'].value};
|
|
35
|
+
}
|
|
36
|
+
`,
|
|
37
|
+
renderCallback({ inputs }) {
|
|
38
|
+
return html `
|
|
39
|
+
<div class="individual-example-wrapper">
|
|
40
|
+
<${BookElementExampleControls}
|
|
41
|
+
${assign(BookElementExampleControls, inputs)}
|
|
42
|
+
></${BookElementExampleControls}>
|
|
43
|
+
<${BookElementExampleViewer}
|
|
44
|
+
${assign(BookElementExampleViewer, inputs)}
|
|
45
|
+
></${BookElementExampleViewer}>
|
|
46
|
+
</div>
|
|
47
|
+
`;
|
|
48
|
+
},
|
|
49
|
+
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const ChangeRouteEvent: import("element-vir").DefinedTypedEvent<"element-book-change-route", Partial<Required<Readonly<import("spa-router-vir").FullRoute<import("../../routing/
|
|
1
|
+
export declare const ChangeRouteEvent: import("element-vir").DefinedTypedEvent<"element-book-change-route", Partial<Required<Readonly<import("spa-router-vir").FullRoute<import("../../routing/book-routing").ValidBookPaths, Record<string, string> | undefined, undefined>>>>>;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
export type NestedType<SubType> = {
|
|
2
|
+
[prop: PropertyKey]: SubType | NestedType<SubType>;
|
|
3
|
+
};
|
|
4
|
+
/**
|
|
5
|
+
* The TypeScript compiler is hard-coded to prevent recursion deeper than 50, so this helps us make
|
|
6
|
+
* sure we stay below that limit.
|
|
7
|
+
*/
|
|
8
|
+
export type InfiniteRecursionLimiter = [
|
|
9
|
+
30,
|
|
10
|
+
29,
|
|
11
|
+
28,
|
|
12
|
+
27,
|
|
13
|
+
26,
|
|
14
|
+
25,
|
|
15
|
+
24,
|
|
16
|
+
23,
|
|
17
|
+
22,
|
|
18
|
+
21,
|
|
19
|
+
20,
|
|
20
|
+
19,
|
|
21
|
+
18,
|
|
22
|
+
17,
|
|
23
|
+
16,
|
|
24
|
+
15,
|
|
25
|
+
14,
|
|
26
|
+
13,
|
|
27
|
+
12,
|
|
28
|
+
11,
|
|
29
|
+
10,
|
|
30
|
+
9,
|
|
31
|
+
8,
|
|
32
|
+
7,
|
|
33
|
+
6,
|
|
34
|
+
5,
|
|
35
|
+
4,
|
|
36
|
+
3,
|
|
37
|
+
2,
|
|
38
|
+
1,
|
|
39
|
+
0
|
|
40
|
+
];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "element-book",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.0.1",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"book",
|
|
6
6
|
"design system",
|
|
@@ -35,28 +35,32 @@
|
|
|
35
35
|
"compile:clean": "rm -rf dist && npm run compile",
|
|
36
36
|
"test": "virmator test-web",
|
|
37
37
|
"test:coverage": "npm run test coverage",
|
|
38
|
-
"test:types": "tsc --noEmit"
|
|
38
|
+
"test:types": "tsc --noEmit",
|
|
39
|
+
"test:watch": "web-test-runner --color --watch --config configs/web-test-runner.config.mjs"
|
|
39
40
|
},
|
|
40
41
|
"dependencies": {
|
|
41
|
-
"@augment-vir/
|
|
42
|
-
"@
|
|
42
|
+
"@augment-vir/browser": "^15.1.0",
|
|
43
|
+
"@augment-vir/common": "^15.1.0",
|
|
43
44
|
"colorjs.io": "0.4.3",
|
|
44
|
-
"element-vir": "^
|
|
45
|
+
"element-vir": "^14.0.0",
|
|
45
46
|
"lit-css-vars": "^2.0.3",
|
|
47
|
+
"object-shape-tester": "^0.3.0",
|
|
46
48
|
"spa-router-vir": "^2.1.0",
|
|
47
|
-
"typed-event-target": "^1.2.1"
|
|
49
|
+
"typed-event-target": "^1.2.1",
|
|
50
|
+
"vira": "^0.4.0"
|
|
48
51
|
},
|
|
49
52
|
"devDependencies": {
|
|
50
|
-
"@augment-vir/browser-testing": "^
|
|
51
|
-
"@open-wc/testing": "^3.
|
|
53
|
+
"@augment-vir/browser-testing": "^15.1.0",
|
|
54
|
+
"@open-wc/testing": "^3.2.0",
|
|
55
|
+
"@types/chai": "^4.3.5",
|
|
52
56
|
"@types/mocha": "^10.0.1",
|
|
53
57
|
"@web/dev-server-esbuild": "^0.4.1",
|
|
54
58
|
"@web/test-runner": "^0.16.1",
|
|
55
59
|
"@web/test-runner-commands": "^0.7.0",
|
|
56
|
-
"@web/test-runner-playwright": "^0.10.
|
|
60
|
+
"@web/test-runner-playwright": "^0.10.1",
|
|
57
61
|
"@web/test-runner-visual-regression": "^0.8.0",
|
|
58
62
|
"istanbul-smart-text-reporter": "^1.1.2",
|
|
59
|
-
"type-fest": "^3.
|
|
60
|
-
"typescript": "^5.
|
|
63
|
+
"type-fest": "^3.12.0",
|
|
64
|
+
"typescript": "^5.1.3"
|
|
61
65
|
}
|
|
62
66
|
}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { Overwrite } from '@augment-vir/common';
|
|
2
|
-
import { ElementBookEntryTypeEnum } from '../element-book-entry-type';
|
|
3
|
-
export type ElementBookChapter = Overwrite<BaseElementBookEntry, {
|
|
4
|
-
entryType: ElementBookEntryTypeEnum.Chapter;
|
|
5
|
-
}>;
|
|
6
|
-
/** This is in the ElementBookChapter file so that they don't circularly depend on each other. */
|
|
7
|
-
export type BaseElementBookEntry = {
|
|
8
|
-
/** Display name for the chapter or page. This is also used to create breadcrumbs and URL paths. */
|
|
9
|
-
title: string;
|
|
10
|
-
entryType: ElementBookEntryTypeEnum;
|
|
11
|
-
/**
|
|
12
|
-
* The parent chapter. A value of undefined here indicates that the chapter or page should be at
|
|
13
|
-
* the top level.
|
|
14
|
-
*/
|
|
15
|
-
parent: ElementBookChapter | undefined;
|
|
16
|
-
/**
|
|
17
|
-
* A description for the chapter or page that will be displayed below the title. Each entry in
|
|
18
|
-
* the array will be a separate paragraph.
|
|
19
|
-
*/
|
|
20
|
-
descriptionParagraphs?: ReadonlyArray<string> | undefined;
|
|
21
|
-
};
|
|
22
|
-
export declare function defineElementBookChapter(chapterSetup: Omit<ElementBookChapter, 'entryType'>): ElementBookChapter;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { ElementBookEntryTypeEnum } from '../element-book-entry-type';
|
|
2
|
-
export function defineElementBookChapter(chapterSetup) {
|
|
3
|
-
if (!chapterSetup.title) {
|
|
4
|
-
/**
|
|
5
|
-
* We don't want the Error type to actually be a part of this function's return type, cause
|
|
6
|
-
* users shouldn't actually return errors, but we still want to pass errors to element-book
|
|
7
|
-
* so element-book can handle them.
|
|
8
|
-
*/
|
|
9
|
-
return new Error(`Cannot have an element-book chapter with an empty title.`);
|
|
10
|
-
}
|
|
11
|
-
const chapter = {
|
|
12
|
-
entryType: ElementBookEntryTypeEnum.Chapter,
|
|
13
|
-
...chapterSetup,
|
|
14
|
-
};
|
|
15
|
-
return chapter;
|
|
16
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export var ElementBookEntryTypeEnum;
|
|
2
|
-
(function (ElementBookEntryTypeEnum) {
|
|
3
|
-
/** A group of pages or sub-chapters. */
|
|
4
|
-
ElementBookEntryTypeEnum["Chapter"] = "chapter";
|
|
5
|
-
/** An individual book page full of element examples. */
|
|
6
|
-
ElementBookEntryTypeEnum["Page"] = "page";
|
|
7
|
-
/** Tree root. Not for external use. */
|
|
8
|
-
ElementBookEntryTypeEnum["Root"] = "root";
|
|
9
|
-
})(ElementBookEntryTypeEnum || (ElementBookEntryTypeEnum = {}));
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { ElementBookChapter } from './element-book-chapter/element-book-chapter';
|
|
2
|
-
import { ElementBookEntryTypeEnum } from './element-book-entry-type';
|
|
3
|
-
import { ElementBookPage } from './element-book-page/element-book-page';
|
|
4
|
-
export type ElementBookRoot = {
|
|
5
|
-
entryType: ElementBookEntryTypeEnum.Root;
|
|
6
|
-
title: string;
|
|
7
|
-
parent: undefined;
|
|
8
|
-
};
|
|
9
|
-
export type ElementBookEntry = ElementBookChapter | ElementBookPage | ElementBookRoot;
|
|
10
|
-
export declare function isElementBookEntry<SpecificType extends ElementBookEntryTypeEnum>(entry: unknown, entryType: SpecificType): entry is Extract<ElementBookEntry, {
|
|
11
|
-
entryType: SpecificType;
|
|
12
|
-
}>;
|
|
13
|
-
export declare function listBreadcrumbs(entry: ElementBookEntry, includeSelf?: boolean): string[];
|
|
14
|
-
export declare function titleToBreadcrumb(title: string): string;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { collapseWhiteSpace, typedHasProperty } from '@augment-vir/common';
|
|
2
|
-
export function isElementBookEntry(entry, entryType) {
|
|
3
|
-
return typedHasProperty(entry, 'entryType') && entry.entryType === entryType;
|
|
4
|
-
}
|
|
5
|
-
export function listBreadcrumbs(entry, includeSelf) {
|
|
6
|
-
const entryBreadcrumb = titleToBreadcrumb(entry.title);
|
|
7
|
-
if (entry.parent) {
|
|
8
|
-
return [
|
|
9
|
-
titleToBreadcrumb(entry.parent.title),
|
|
10
|
-
...listBreadcrumbs(entry.parent, false),
|
|
11
|
-
].concat(includeSelf ? [entryBreadcrumb] : []);
|
|
12
|
-
}
|
|
13
|
-
else if (includeSelf) {
|
|
14
|
-
return [entryBreadcrumb];
|
|
15
|
-
}
|
|
16
|
-
else {
|
|
17
|
-
return [];
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
export function titleToBreadcrumb(title) {
|
|
21
|
-
return collapseWhiteSpace(title).toLowerCase().replaceAll(/\s/g, '-');
|
|
22
|
-
}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export declare enum ElementBookPageControlTypeEnum {
|
|
2
|
-
Checkbox = "checkbox",
|
|
3
|
-
Color = "color",
|
|
4
|
-
Dropdown = "dropdown",
|
|
5
|
-
Text = "text"
|
|
6
|
-
}
|
|
7
|
-
export type ElementBookPageControlValueType = {
|
|
8
|
-
[ElementBookPageControlTypeEnum.Checkbox]: boolean;
|
|
9
|
-
[ElementBookPageControlTypeEnum.Color]: string;
|
|
10
|
-
/** Value type corresponds to which option in the dropdown is selected. */
|
|
11
|
-
[ElementBookPageControlTypeEnum.Dropdown]: string;
|
|
12
|
-
[ElementBookPageControlTypeEnum.Text]: string;
|
|
13
|
-
};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export var ElementBookPageControlTypeEnum;
|
|
2
|
-
(function (ElementBookPageControlTypeEnum) {
|
|
3
|
-
ElementBookPageControlTypeEnum["Checkbox"] = "checkbox";
|
|
4
|
-
ElementBookPageControlTypeEnum["Color"] = "color";
|
|
5
|
-
ElementBookPageControlTypeEnum["Dropdown"] = "dropdown";
|
|
6
|
-
ElementBookPageControlTypeEnum["Text"] = "text";
|
|
7
|
-
})(ElementBookPageControlTypeEnum || (ElementBookPageControlTypeEnum = {}));
|