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.
Files changed (121) hide show
  1. package/README.md +5 -5
  2. package/dist/data/book-entry/base-book-entry.d.ts +20 -0
  3. package/dist/data/book-entry/book-element-example/book-element-example.d.ts +32 -0
  4. package/dist/data/book-entry/book-entry-type.d.ts +9 -0
  5. package/dist/data/book-entry/book-entry-type.js +9 -0
  6. package/dist/data/book-entry/book-entry.d.ts +8 -0
  7. package/dist/data/book-entry/book-entry.js +4 -0
  8. package/dist/data/book-entry/book-page/book-page-controls.d.ts +41 -0
  9. package/dist/data/book-entry/book-page/book-page-controls.js +49 -0
  10. package/dist/data/book-entry/book-page/book-page.d.ts +12 -0
  11. package/dist/data/book-entry/book-page/book-page.js +1 -0
  12. package/dist/data/book-entry/book-page/current-controls.d.ts +12 -0
  13. package/dist/data/book-entry/book-page/current-controls.js +62 -0
  14. package/dist/data/book-entry/book-page/define-book-page.d.ts +18 -0
  15. package/dist/data/book-entry/book-page/define-book-page.js +34 -0
  16. package/dist/data/book-entry/book-root.d.ts +7 -0
  17. package/dist/data/book-entry/book-root.js +1 -0
  18. package/dist/data/book-entry/url-breadcrumbs.d.ts +7 -0
  19. package/dist/data/book-entry/url-breadcrumbs.js +24 -0
  20. package/dist/data/book-entry/verify-book-entry.d.ts +6 -0
  21. package/dist/data/book-entry/verify-book-entry.js +18 -0
  22. package/dist/data/book-tree/book-tree-node.d.ts +27 -0
  23. package/dist/data/book-tree/book-tree-node.js +1 -0
  24. package/dist/data/book-tree/book-tree.d.ts +16 -0
  25. package/dist/data/book-tree/book-tree.js +148 -0
  26. package/dist/data/book-tree/search-nodes.d.ts +5 -0
  27. package/dist/data/book-tree/search-nodes.js +56 -0
  28. package/dist/data/book-tree/tree-cache.d.ts +4 -0
  29. package/dist/data/book-tree/tree-cache.js +8 -0
  30. package/dist/index.d.ts +5 -6
  31. package/dist/index.js +5 -6
  32. package/dist/routing/book-routing.d.ts +10 -0
  33. package/dist/routing/book-routing.js +18 -0
  34. package/dist/routing/create-book-router.d.ts +2 -0
  35. package/dist/routing/{create-element-book-router.js → create-book-router.js} +8 -8
  36. package/dist/ui/elements/book-breadcrumbs.element.d.ts +5 -0
  37. package/dist/ui/elements/{element-book-breadcrumbs.element.js → book-breadcrumbs.element.js} +9 -9
  38. package/dist/ui/elements/book-nav.element.d.ts +7 -0
  39. package/dist/ui/elements/book-nav.element.js +114 -0
  40. package/dist/ui/elements/common/book-error.element.d.ts +3 -0
  41. package/dist/ui/elements/common/book-error.element.js +27 -0
  42. package/dist/ui/elements/common/book-route-link.element.d.ts +5 -0
  43. package/dist/ui/elements/common/{element-book-route-link.element.js → book-route-link.element.js} +5 -5
  44. package/dist/ui/elements/define-book-element.d.ts +2 -2
  45. package/dist/ui/elements/define-book-element.js +1 -1
  46. package/dist/ui/elements/element-book-app/element-book-app-slots.d.ts +2 -2
  47. package/dist/ui/elements/element-book-app/element-book-app-slots.js +2 -2
  48. package/dist/ui/elements/element-book-app/element-book-app.element.d.ts +7 -2
  49. package/dist/ui/elements/element-book-app/element-book-app.element.js +76 -29
  50. package/dist/ui/elements/element-book-app/element-book-config.d.ts +4 -2
  51. package/dist/ui/elements/element-book-app/get-current-nodes.d.ts +3 -0
  52. package/dist/ui/elements/element-book-app/get-current-nodes.js +23 -0
  53. package/dist/ui/elements/entry-display/book-breadcrumbs-bar.element.d.ts +6 -0
  54. package/dist/ui/elements/entry-display/book-breadcrumbs-bar.element.js +65 -0
  55. package/dist/ui/elements/entry-display/book-entry-description.element.d.ts +3 -0
  56. package/dist/ui/elements/entry-display/book-entry-description.element.js +34 -0
  57. package/dist/ui/elements/entry-display/book-entry-display.element.d.ts +12 -0
  58. package/dist/ui/elements/entry-display/book-entry-display.element.js +173 -0
  59. package/dist/ui/elements/entry-display/book-page/book-page-controls.element.d.ts +17 -0
  60. package/dist/ui/elements/entry-display/book-page/book-page-controls.element.js +147 -0
  61. package/dist/ui/elements/entry-display/book-page/book-page-wrapper.element.d.ts +10 -0
  62. package/dist/ui/elements/entry-display/book-page/book-page-wrapper.element.js +92 -0
  63. package/dist/ui/elements/entry-display/element-example/book-element-example-controls.element.d.ts +7 -0
  64. package/dist/ui/elements/entry-display/element-example/book-element-example-controls.element.js +36 -0
  65. package/dist/ui/elements/entry-display/element-example/book-element-example-viewer.element.d.ts +9 -0
  66. package/dist/ui/elements/entry-display/element-example/book-element-example-viewer.element.js +57 -0
  67. package/dist/ui/elements/entry-display/element-example/book-element-example-wrapper.element.d.ts +9 -0
  68. package/dist/ui/elements/entry-display/element-example/book-element-example-wrapper.element.js +49 -0
  69. package/dist/ui/events/change-route.event.d.ts +1 -1
  70. package/dist/util/type.d.ts +40 -0
  71. package/dist/util/type.js +1 -0
  72. package/package.json +15 -11
  73. package/dist/data/element-book-entry/element-book-chapter/element-book-chapter.d.ts +0 -22
  74. package/dist/data/element-book-entry/element-book-chapter/element-book-chapter.js +0 -16
  75. package/dist/data/element-book-entry/element-book-entry-type.d.ts +0 -8
  76. package/dist/data/element-book-entry/element-book-entry-type.js +0 -9
  77. package/dist/data/element-book-entry/element-book-entry.d.ts +0 -14
  78. package/dist/data/element-book-entry/element-book-entry.js +0 -22
  79. package/dist/data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control-type.d.ts +0 -13
  80. package/dist/data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control-type.js +0 -7
  81. package/dist/data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control.d.ts +0 -13
  82. package/dist/data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control.js +0 -4
  83. package/dist/data/element-book-entry/element-book-page/element-book-page-example.d.ts +0 -22
  84. package/dist/data/element-book-entry/element-book-page/element-book-page.d.ts +0 -23
  85. package/dist/data/element-book-entry/element-book-page/element-book-page.js +0 -41
  86. package/dist/data/element-book-entry/entry-tree/entry-tree-search.d.ts +0 -8
  87. package/dist/data/element-book-entry/entry-tree/entry-tree-search.js +0 -66
  88. package/dist/data/element-book-entry/entry-tree/entry-tree.d.ts +0 -18
  89. package/dist/data/element-book-entry/entry-tree/entry-tree.js +0 -87
  90. package/dist/data/element-book-entry/entry-tree/tree-cache.d.ts +0 -5
  91. package/dist/data/element-book-entry/entry-tree/tree-cache.js +0 -8
  92. package/dist/data/element-book-entry/entry-tree/walk-entry-tree.d.ts +0 -8
  93. package/dist/data/element-book-entry/entry-tree/walk-entry-tree.js +0 -85
  94. package/dist/routing/create-element-book-router.d.ts +0 -2
  95. package/dist/routing/element-book-routing.d.ts +0 -10
  96. package/dist/routing/element-book-routing.js +0 -18
  97. package/dist/ui/elements/common/element-book-route-link.element.d.ts +0 -5
  98. package/dist/ui/elements/element-book-app/get-current-entry.d.ts +0 -4
  99. package/dist/ui/elements/element-book-app/get-current-entry.js +0 -17
  100. package/dist/ui/elements/element-book-breadcrumbs.element.d.ts +0 -5
  101. package/dist/ui/elements/element-book-nav.element.d.ts +0 -7
  102. package/dist/ui/elements/element-book-nav.element.js +0 -129
  103. package/dist/ui/elements/entry-display/element-book-entry-display.element.d.ts +0 -7
  104. package/dist/ui/elements/entry-display/element-book-entry-display.element.js +0 -280
  105. package/dist/ui/elements/entry-display/element-book-example-controls.element.d.ts +0 -4
  106. package/dist/ui/elements/entry-display/element-book-example-controls.element.js +0 -26
  107. package/dist/ui/elements/entry-display/element-book-example-viewer.element.d.ts +0 -6
  108. package/dist/ui/elements/entry-display/element-book-example-viewer.element.js +0 -43
  109. package/dist/ui/elements/entry-display/element-book-page-controls.element.d.ts +0 -11
  110. package/dist/ui/elements/entry-display/element-book-page-controls.element.js +0 -65
  111. package/dist/ui/elements/entry-display/element-book-page-examples.element.d.ts +0 -7
  112. package/dist/ui/elements/entry-display/element-book-page-examples.element.js +0 -102
  113. package/dist/ui/icons/element-16.icon.d.ts +0 -1
  114. package/dist/ui/icons/element-16.icon.js +0 -18
  115. package/dist/ui/icons/element-24.icon.d.ts +0 -1
  116. package/dist/ui/icons/element-24.icon.js +0 -18
  117. package/dist/utilities/type.d.ts +0 -3
  118. /package/dist/data/{element-book-entry/element-book-page/element-book-page-example.js → book-entry/base-book-entry.js} +0 -0
  119. /package/dist/{utilities/type.js → data/book-entry/book-element-example/book-element-example.js} +0 -0
  120. /package/dist/{utilities/search.d.ts → util/fuzzy-search.d.ts} +0 -0
  121. /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
+ });
@@ -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>;
@@ -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
+ });
@@ -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
+ });
@@ -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>;
@@ -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/element-book-routing").ValidElementBookPaths, Record<string, string> | undefined, undefined>>>>>;
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": "6.0.3",
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/common": "^14.2.2",
42
- "@electrovir/icon-element": "^1.0.0",
42
+ "@augment-vir/browser": "^15.1.0",
43
+ "@augment-vir/common": "^15.1.0",
43
44
  "colorjs.io": "0.4.3",
44
- "element-vir": "^13.0.1",
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": "^14.2.2",
51
- "@open-wc/testing": "^3.1.8",
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.0",
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.11.1",
60
- "typescript": "^5.0.4"
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,8 +0,0 @@
1
- export declare enum ElementBookEntryTypeEnum {
2
- /** A group of pages or sub-chapters. */
3
- Chapter = "chapter",
4
- /** An individual book page full of element examples. */
5
- Page = "page",
6
- /** Tree root. Not for external use. */
7
- Root = "root"
8
- }
@@ -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 = {}));