element-book 4.0.0 → 5.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.
Files changed (10) hide show
  1. package/dist/data/element-book-entry/element-book-page/element-book-page.d.ts +5 -3
  2. package/dist/index.d.ts +1 -0
  3. package/dist/index.js +1 -0
  4. package/dist/ui/elements/element-book-app/element-book-app-slots.d.ts +4 -0
  5. package/dist/ui/elements/element-book-app/element-book-app-slots.js +5 -0
  6. package/dist/ui/elements/element-book-app/element-book-app.element.js +11 -2
  7. package/dist/ui/elements/element-book-nav.element.js +3 -2
  8. package/dist/ui/elements/entry-display/element-book-entry-display.element.js +2 -0
  9. package/dist/ui/elements/entry-display/element-book-page-examples.element.js +7 -5
  10. package/package.json +1 -1
package/dist/data/element-book-entry/element-book-page/element-book-page.d.ts CHANGED
@@ -13,9 +13,11 @@ export type ElementBookPage<Controls extends ElementBookPageControlMap = Element
13
13
  pageBreadcrumbs: ReadonlyArray<string>;
14
14
  };
15
15
  export type PageControlsFromPage<Page extends ElementBookPage<any>> = Page extends ElementBookPage<infer Controls> ? Controls : never;
16
+ export type DefinePageExamplesCallback<ParentPageControls extends ElementBookPageControlMap> = (params: {
17
+ defineExample: DefineExampleCallback<ParentPageControls>;
18
+ }) => void;
19
+ export type DefineExampleCallback<ParentPageControls extends ElementBookPageControlMap> = <StateInit extends PropertyInitMapBase = {}, RenderOutput = any>(exampleInit: ElementBookPageExampleInit<ParentPageControls, StateInit, RenderOutput>) => void;
16
20
  export type ElementBookPageInit<Controls extends ElementBookPageControlMap> = Overwrite<SetOptional<Omit<ElementBookPage<Controls>, 'entryType' | 'allExampleTitles' | 'pageBreadcrumbs' | 'examples'>, 'controls'>, {
17
- defineExamplesCallback?: (params: {
18
- defineExample: <StateInit extends PropertyInitMapBase = {}, RenderOutput = any>(exampleInit: ElementBookPageExampleInit<Controls, StateInit, RenderOutput>) => void;
19
- }) => void;
21
+ defineExamplesCallback?: DefinePageExamplesCallback<Controls>;
20
22
  }>;
21
23
  export declare function defineElementBookPage<Controls extends ElementBookPageControlMap = {}>(pageSetup: ElementBookPageInit<Controls>): ElementBookPage<Controls>;
package/dist/index.d.ts CHANGED
@@ -4,5 +4,6 @@ export * from './data/element-book-entry/element-book-page/element-book-page';
4
4
  export * from './data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control';
5
5
  export * from './data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control-type';
6
6
  export * from './data/element-book-entry/element-book-page/element-book-page-example';
7
+ export * from './ui/elements/element-book-app/element-book-app-slots';
7
8
  export * from './ui/elements/element-book-app/element-book-app.element';
8
9
  export * from './ui/elements/element-book-app/element-book-config';
package/dist/index.js CHANGED
@@ -4,5 +4,6 @@ export * from './data/element-book-entry/element-book-page/element-book-page';
4
4
  export * from './data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control';
5
5
  export * from './data/element-book-entry/element-book-page/element-book-page-controls/element-book-page-control-type';
6
6
  export * from './data/element-book-entry/element-book-page/element-book-page-example';
7
+ export * from './ui/elements/element-book-app/element-book-app-slots';
7
8
  export * from './ui/elements/element-book-app/element-book-app.element';
8
9
  export * from './ui/elements/element-book-app/element-book-config';
package/dist/ui/elements/element-book-app/element-book-app-slots.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare enum ElementBookSlotName {
2
+ Footer = "element-book-footer",
3
+ NavHeader = "element-book-nav-header"
4
+ }
package/dist/ui/elements/element-book-app/element-book-app-slots.js ADDED
@@ -0,0 +1,5 @@
1
+ export var ElementBookSlotName;
2
+ (function (ElementBookSlotName) {
3
+ ElementBookSlotName["Footer"] = "element-book-footer";
4
+ ElementBookSlotName["NavHeader"] = "element-book-nav-header";
5
+ })(ElementBookSlotName || (ElementBookSlotName = {}));
package/dist/ui/elements/element-book-app/element-book-app.element.js CHANGED
@@ -9,6 +9,7 @@ import { createTheme } from '../../color-theme/create-color-theme';
9
9
  import { ChangeRouteEvent } from '../../events/change-route.event';
10
10
  import { ElementBookNav } from '../element-book-nav.element';
11
11
  import { ElementBookEntryDisplay } from '../entry-display/element-book-entry-display.element';
12
+ import { ElementBookSlotName } from './element-book-app-slots';
12
13
  import { getCurrentTreeEntry } from './get-current-entry';
13
14
  export const ElementBookApp = defineElement()({
14
15
  tagName: 'element-book-app',
@@ -145,7 +146,10 @@ export const ElementBookApp = defineElement()({
145
146
  selectedPath: state.currentRoute.paths,
146
147
  })}
147
148
  >
148
- <slot name="nav-header"></slot>
149
+ <slot
150
+ name=${ElementBookSlotName.NavHeader}
151
+ slot=${ElementBookSlotName.NavHeader}
152
+ ></slot>
149
153
  </${ElementBookNav}>
150
154
  <${ElementBookEntryDisplay}
151
155
  ${assign(ElementBookEntryDisplay, {
@@ -153,7 +157,12 @@ export const ElementBookApp = defineElement()({
153
157
  currentNode: currentEntryTreeNode,
154
158
  router: state.router,
155
159
  })}
156
- ></${ElementBookEntryDisplay}>
160
+ >
161
+ <slot
162
+ name=${ElementBookSlotName.Footer}
163
+ slot=${ElementBookSlotName.Footer}
164
+ ></slot>
165
+ </${ElementBookEntryDisplay}>
157
166
  </div>
158
167
  `;
159
168
  }
package/dist/ui/elements/element-book-nav.element.js CHANGED
@@ -7,6 +7,7 @@ import { colorThemeCssVars } from '../color-theme/color-theme';
7
7
  import { Element16Icon } from '../icons/element-16.icon';
8
8
  import { ElementBookRouteLink } from './common/element-book-route-link.element';
9
9
  import { defineElementBookElement } from './define-book-element';
10
+ import { ElementBookSlotName } from './element-book-app/element-book-app-slots';
10
11
  export const ElementBookNav = defineElementBookElement()({
11
12
  tagName: 'element-book-nav',
12
13
  styles: css `
@@ -32,7 +33,7 @@ export const ElementBookNav = defineElementBookElement()({
32
33
  padding-right: 16px;
33
34
  display: block;
34
35
  ${ElementBookRouteLink.cssVarNames
35
- .anchorPadding}: 4px 24px 4px calc(calc(16px * var(--indent, 0)) + 8px);
36
+ .anchorPadding}: 1px 24px 1px calc(calc(16px * var(--indent, 0)) + 8px);
36
37
  }
37
38
 
38
39
  ${ElementBookRouteLink} {
@@ -98,7 +99,7 @@ function createNavigationTree({ indent, entryTreeNode, rootPath, selectedPath, r
98
99
  });
99
100
  return html `
100
101
  <div class="nav-tree-entry" style="--indent: ${indent};">
101
- <slot></slot>
102
+ <slot name=${ElementBookSlotName.NavHeader}></slot>
102
103
  <li class=${entryTreeNode.entry.entryType}>
103
104
  <${ElementBookRouteLink}
104
105
  ${assign(ElementBookRouteLink, {
package/dist/ui/elements/entry-display/element-book-entry-display.element.js CHANGED
@@ -10,6 +10,7 @@ import { ChangeRouteEvent } from '../../events/change-route.event';
10
10
  import { Element24Icon } from '../../icons/element-24.icon';
11
11
  import { ElementBookRouteLink } from '../common/element-book-route-link.element';
12
12
  import { defineElementBookElement } from '../define-book-element';
13
+ import { ElementBookSlotName } from '../element-book-app/element-book-app-slots';
13
14
  import { ElementBookBreadcrumbs } from '../element-book-breadcrumbs.element';
14
15
  import { ElementBookPageExamples } from './element-book-page-examples.element';
15
16
  export const ElementBookEntryDisplay = defineElementBookElement()({
@@ -145,6 +146,7 @@ export const ElementBookEntryDisplay = defineElementBookElement()({
145
146
  />
146
147
  </div>
147
148
  <div class="all-examples-wrapper">${exampleTemplates}</div>
149
+ <slot name=${ElementBookSlotName.Footer}></slot>
148
150
  `;
149
151
  },
150
152
  });
package/dist/ui/elements/entry-display/element-book-page-examples.element.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { mapObjectValues } from '@augment-vir/common';
2
- import { assign, css, html, listen, repeat } from 'element-vir';
2
+ import { assign, css, html, listen, renderIf, repeat } from 'element-vir';
3
3
  import { unsetInternalState } from '../../../data/unset';
4
4
  import { colorThemeCssVars } from '../../color-theme/color-theme';
5
5
  import { defineElementBookElement } from '../define-book-element';
@@ -82,15 +82,17 @@ export const ElementBookPageExamples = defineElementBookElement()({
82
82
  `;
83
83
  });
84
84
  return html `
85
- <${ElementBookPageControls}
86
- ${assign(ElementBookPageControls, {
85
+ ${renderIf(!!Object.keys(inputs.page.controls).length, html `
86
+ <${ElementBookPageControls}
87
+ ${assign(ElementBookPageControls, {
87
88
  config: inputs.page.controls,
88
89
  currentValues: state,
89
90
  })}
90
- ${listen(ElementBookPageControls.events.controlValueChange, (event) => {
91
+ ${listen(ElementBookPageControls.events.controlValueChange, (event) => {
91
92
  updateState({ [event.detail.name]: event.detail.value });
92
93
  })}
93
- ></${ElementBookPageControls}>
94
+ ></${ElementBookPageControls}>
95
+ `)}
94
96
  <section class="examples-wrapper">${examplesTemplate}</section>
95
97
  `;
96
98
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "element-book",
3
- "version": "4.0.0",
3
+ "version": "5.0.0",
4
4
  "keywords": [
5
5
  "book",
6
6
  "design system",