chore: generated + manually added missing doc assets
This commit is contained in:
parent
a92622f753
commit
93ed57c552
28 changed files with 813 additions and 18 deletions
|
|
@ -7,7 +7,7 @@ import { LitElement, html, css, nothing } from 'lit';
|
|||
*/
|
||||
|
||||
/**
|
||||
* @typedef {import('./LionCombobox.js.js.js.js').LionCombobox} LionCombobox
|
||||
* @typedef {import('../src/LionCombobox.js').LionCombobox} LionCombobox
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -36,4 +36,22 @@ export const demoStyle = css`
|
|||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.demo-dialog-content {
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
background-color: black;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.demo-dialog-content__close-button {
|
||||
color: black;
|
||||
font-size: 28px;
|
||||
line-height: 28px;
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -15,22 +15,6 @@ class DemoElUsingOverlayMixin extends OverlayMixin(LitElement) {
|
|||
});
|
||||
}
|
||||
|
||||
_setupOpenCloseListeners() {
|
||||
super._setupOpenCloseListeners();
|
||||
|
||||
if (this._overlayInvokerNode) {
|
||||
this._overlayInvokerNode.addEventListener('click', this.toggle);
|
||||
}
|
||||
}
|
||||
|
||||
_teardownOpenCloseListeners() {
|
||||
super._teardownOpenCloseListeners();
|
||||
|
||||
if (this._overlayInvokerNode) {
|
||||
this._overlayInvokerNode.removeEventListener('click', this.toggle);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<slot name="invoker"></slot>
|
||||
|
|
|
|||
1
packages/ui/docs/fundamentals/tools/singleton-manager/.gitignore
vendored
Normal file
1
packages/ui/docs/fundamentals/tools/singleton-manager/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
!**/*
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
import { LitElement, css, html } from 'lit';
|
||||
|
||||
import './overlayCompatibility.js';
|
||||
|
||||
import 'page-a/page-a.js';
|
||||
import 'page-b/page-b.js';
|
||||
|
||||
class DemoApp extends LitElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.page = 'A';
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
page: { type: String },
|
||||
};
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
background: #0069ed;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: background 250ms ease-in-out, transform 150ms ease;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:focus {
|
||||
background: #0053ba;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px solid #fff;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
button.active {
|
||||
background: #33a43f;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h1>Demo App</h1>
|
||||
<nav>
|
||||
<button
|
||||
class=${this.page === 'A' ? 'active' : ''}
|
||||
@click=${() => {
|
||||
this.page = 'A';
|
||||
}}
|
||||
>
|
||||
Page A
|
||||
</button>
|
||||
<button
|
||||
class=${this.page === 'B' ? 'active' : ''}
|
||||
@click=${() => {
|
||||
this.page = 'B';
|
||||
}}
|
||||
>
|
||||
Page B
|
||||
</button>
|
||||
</nav>
|
||||
${this.page === 'A' ? html` <page-a></page-a> ` : html` <page-b></page-b> `}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('demo-app', DemoApp);
|
||||
30
packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/overlays/index.js
generated
vendored
Normal file
30
packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/overlays/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
export class OverlaysManager {
|
||||
name = 'OverlayManager 1.x';
|
||||
|
||||
blockBody = false;
|
||||
|
||||
constructor() {
|
||||
this._setupBlocker();
|
||||
}
|
||||
|
||||
_setupBlocker() {
|
||||
const blocker = document.createElement('div');
|
||||
blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;');
|
||||
blocker.innerText = `Blocker for ${this.name}`;
|
||||
|
||||
const target = document.getElementById('overlay-target');
|
||||
target.appendChild(blocker);
|
||||
|
||||
this.blocker = blocker;
|
||||
}
|
||||
|
||||
block() {
|
||||
this.blockBody = true;
|
||||
this.blocker.style.backgroundColor = '#ff6161';
|
||||
}
|
||||
|
||||
unBlock() {
|
||||
this.blockBody = false;
|
||||
this.blocker.style.backgroundColor = 'transparent';
|
||||
}
|
||||
}
|
||||
4
packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/overlays/instance.js
generated
vendored
Normal file
4
packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/overlays/instance.js
generated
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import { OverlaysManager } from './index.js';
|
||||
import { singletonManager } from 'singleton-manager';
|
||||
|
||||
export const overlays = singletonManager.get('overlays::overlays::1.x') || new OverlaysManager();
|
||||
35
packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-a/page-a.js
generated
vendored
Normal file
35
packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-a/page-a.js
generated
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { LitElement, html, css } from 'lit-element';
|
||||
import { overlays } from 'overlays/instance.js';
|
||||
|
||||
export class PageA extends LitElement {
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h3>I am page A</h3>
|
||||
<p>Overlays Status:</p>
|
||||
<p>Name: ${overlays.name}</p>
|
||||
<p>Blocked: ${overlays.blockBody}</p>
|
||||
<button @click=${() => {
|
||||
overlays.block(); this.requestUpdate();
|
||||
}}>block</button>
|
||||
<button @click=${() => {
|
||||
overlays.unBlock(); this.requestUpdate();
|
||||
}}>un-block</button>
|
||||
<button @click=${() => {
|
||||
this.requestUpdate();
|
||||
}}>refresh</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
customElements.define('page-a', PageA);
|
||||
30
packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/index.js
generated
vendored
Normal file
30
packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
export class OverlaysManager {
|
||||
name = 'OverlayManager 2.x';
|
||||
|
||||
_blockBody = false;
|
||||
|
||||
constructor() {
|
||||
this._setupBlocker();
|
||||
}
|
||||
|
||||
_setupBlocker() {
|
||||
const blocker = document.createElement('div');
|
||||
blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;');
|
||||
blocker.innerText = `Blocker for ${this.name}`;
|
||||
|
||||
const target = document.getElementById('overlay-target');
|
||||
target.appendChild(blocker);
|
||||
|
||||
this.blocker = blocker;
|
||||
}
|
||||
|
||||
blockBody() {
|
||||
this._blockBody = true;
|
||||
this.blocker.style.backgroundColor = '#ff6161';
|
||||
}
|
||||
|
||||
unBlockBody() {
|
||||
this._blockBody = false;
|
||||
this.blocker.style.backgroundColor = 'transparent';
|
||||
}
|
||||
}
|
||||
4
packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/instance.js
generated
vendored
Normal file
4
packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/node_modules/overlays/instance.js
generated
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import { OverlaysManager } from './index.js';
|
||||
import { singletonManager } from 'singleton-manager';
|
||||
|
||||
export const overlays = singletonManager.get('overlays::overlays::2.x') || new OverlaysManager();
|
||||
49
packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/page-b.js
generated
vendored
Normal file
49
packages/ui/docs/fundamentals/tools/singleton-manager/example-complex/node_modules/page-b/page-b.js
generated
vendored
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import { LitElement, html, css } from 'lit-element';
|
||||
import { overlays } from 'overlays/instance.js';
|
||||
|
||||
export class PageB extends LitElement {
|
||||
getInstance(sym, fallback) {
|
||||
const ev = new CustomEvent('request-instance', {
|
||||
detail: { key: sym },
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
composed: true,
|
||||
});
|
||||
this.dispatchEvent(ev);
|
||||
return ev.detail.instance || fallback();
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h3>I am page B</h3>
|
||||
<p>Overlays Status:</p>
|
||||
<p>Name: ${overlays.name}</p>
|
||||
<p>Blocked: ${overlays._blockBody}</p>
|
||||
<button @click=${() => {
|
||||
overlays.blockBody(); this.requestUpdate();
|
||||
}}>block</button>
|
||||
<button @click=${() => {
|
||||
overlays.unBlockBody(); this.requestUpdate();
|
||||
}}>un-block</button>
|
||||
<button @click=${() => {
|
||||
this.requestUpdate();
|
||||
}}>refresh</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('page-b', PageB);
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
import { OverlaysManager } from 'overlays';
|
||||
import { singletonManager } from 'singleton-manager';
|
||||
import { OverlaysManager as OverlaysManager2 } from './node_modules/page-b/node_modules/overlays/index.js';
|
||||
|
||||
let compatibleManager1;
|
||||
let compatibleManager2;
|
||||
|
||||
const blocker = document.createElement('div');
|
||||
blocker.setAttribute(
|
||||
'style',
|
||||
'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;',
|
||||
);
|
||||
blocker.innerText = `Shared Blocker for App`;
|
||||
document.body.appendChild(blocker);
|
||||
|
||||
class CompatibleManager1 extends OverlaysManager {
|
||||
constructor() {
|
||||
super();
|
||||
this.name = 'Compatible1 from App';
|
||||
}
|
||||
|
||||
block(sync = true) {
|
||||
super.block();
|
||||
if (sync) {
|
||||
compatibleManager2.blockBody(false);
|
||||
}
|
||||
}
|
||||
|
||||
unBlock(sync = true) {
|
||||
super.unBlock();
|
||||
if (sync) {
|
||||
compatibleManager2.unBlockBody(false);
|
||||
}
|
||||
}
|
||||
|
||||
_setupBlocker() {
|
||||
this.blocker = blocker;
|
||||
}
|
||||
}
|
||||
|
||||
class CompatibleManager2 extends OverlaysManager2 {
|
||||
constructor() {
|
||||
super();
|
||||
this.name = 'Compatible2 from App';
|
||||
}
|
||||
|
||||
blockBody(sync = true) {
|
||||
super.blockBody();
|
||||
if (sync) {
|
||||
compatibleManager1.block();
|
||||
}
|
||||
}
|
||||
|
||||
unBlockBody(sync = true) {
|
||||
super.unBlockBody();
|
||||
if (sync) {
|
||||
compatibleManager1.unBlock();
|
||||
}
|
||||
}
|
||||
|
||||
_setupBlocker() {
|
||||
this.blocker = blocker;
|
||||
}
|
||||
}
|
||||
|
||||
compatibleManager1 = new CompatibleManager1();
|
||||
compatibleManager2 = new CompatibleManager2();
|
||||
|
||||
singletonManager.set('overlays::overlays::1.x', compatibleManager1);
|
||||
singletonManager.set('overlays::overlays::2.x', compatibleManager2);
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
import { LitElement, css, html } from 'lit';
|
||||
|
||||
import 'page-a/page-a.js';
|
||||
import 'page-b/page-b.js';
|
||||
|
||||
class DemoApp extends LitElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.page = 'A';
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
page: { type: String },
|
||||
};
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
background: #0069ed;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: background 250ms ease-in-out, transform 150ms ease;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:focus {
|
||||
background: #0053ba;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px solid #fff;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
button.active {
|
||||
background: #33a43f;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h1>Demo App</h1>
|
||||
<nav>
|
||||
<button
|
||||
class=${this.page === 'A' ? 'active' : ''}
|
||||
@click=${() => {
|
||||
this.page = 'A';
|
||||
}}
|
||||
>
|
||||
Page A
|
||||
</button>
|
||||
<button
|
||||
class=${this.page === 'B' ? 'active' : ''}
|
||||
@click=${() => {
|
||||
this.page = 'B';
|
||||
}}
|
||||
>
|
||||
Page B
|
||||
</button>
|
||||
</nav>
|
||||
${this.page === 'A' ? html` <page-a></page-a> ` : html` <page-b></page-b> `}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('demo-app', DemoApp);
|
||||
30
packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/overlays/index.js
generated
vendored
Normal file
30
packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/overlays/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
export class OverlaysManager {
|
||||
name = 'OverlayManager 1.x';
|
||||
|
||||
blockBody = false;
|
||||
|
||||
constructor() {
|
||||
this._setupBlocker();
|
||||
}
|
||||
|
||||
_setupBlocker() {
|
||||
const blocker = document.createElement('div');
|
||||
blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 180px; text-align: center;');
|
||||
blocker.innerText = `Blocker for ${this.name}`;
|
||||
|
||||
const target = document.getElementById('overlay-target');
|
||||
target.appendChild(blocker);
|
||||
|
||||
this.blocker = blocker;
|
||||
}
|
||||
|
||||
block() {
|
||||
this.blockBody = true;
|
||||
this.blocker.style.backgroundColor = '#ff6161';
|
||||
}
|
||||
|
||||
unBlock() {
|
||||
this.blockBody = false;
|
||||
this.blocker.style.backgroundColor = 'transparent';
|
||||
}
|
||||
}
|
||||
3
packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/overlays/instance.js
generated
vendored
Normal file
3
packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/overlays/instance.js
generated
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import { OverlaysManager } from './index.js';
|
||||
|
||||
export const overlays = new OverlaysManager();
|
||||
34
packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-a/page-a.js
generated
vendored
Normal file
34
packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-a/page-a.js
generated
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { LitElement, html, css } from 'lit-element';
|
||||
import { overlays } from 'overlays/instance.js';
|
||||
|
||||
export class PageA extends LitElement {
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h3>I am page A</h3>
|
||||
<p>Overlays Status:</p>
|
||||
<p>Name: ${overlays.name}</p>
|
||||
<p>Blocked: ${overlays.blockBody}</p>
|
||||
<button @click=${() => {
|
||||
overlays.block(); this.requestUpdate();
|
||||
}}>block</button>
|
||||
<button @click=${() => {
|
||||
overlays.unBlock(); this.requestUpdate();
|
||||
}}>un-block</button>
|
||||
<button @click=${() => {
|
||||
this.requestUpdate();
|
||||
}}>refresh</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('page-a', PageA);
|
||||
30
packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js
generated
vendored
Normal file
30
packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
export class OverlaysManager {
|
||||
name = 'OverlayManager 2.x';
|
||||
|
||||
_blockBody = false;
|
||||
|
||||
constructor() {
|
||||
this._setupBlocker();
|
||||
}
|
||||
|
||||
_setupBlocker() {
|
||||
const blocker = document.createElement('div');
|
||||
blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 180px; text-align: center;');
|
||||
blocker.innerText = `Blocker for ${this.name}`;
|
||||
|
||||
const target = document.getElementById('overlay-target');
|
||||
target.appendChild(blocker);
|
||||
|
||||
this.blocker = blocker;
|
||||
}
|
||||
|
||||
blockBody() {
|
||||
this._blockBody = true;
|
||||
this.blocker.style.backgroundColor = '#ff6161';
|
||||
}
|
||||
|
||||
unBlockBody() {
|
||||
this._blockBody = false;
|
||||
this.blocker.style.backgroundColor = 'transparent';
|
||||
}
|
||||
}
|
||||
3
packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js
generated
vendored
Normal file
3
packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/node_modules/overlays/instance.js
generated
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import { OverlaysManager } from './index.js';
|
||||
|
||||
export const overlays = new OverlaysManager();
|
||||
34
packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js
generated
vendored
Normal file
34
packages/ui/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/page-b/page-b.js
generated
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { LitElement, html, css } from 'lit-element';
|
||||
import { overlays } from 'overlays/instance.js';
|
||||
|
||||
export class PageB extends LitElement {
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h3>I am page B</h3>
|
||||
<p>Overlays Status:</p>
|
||||
<p>Name: ${overlays.name}</p>
|
||||
<p>Blocked: ${overlays._blockBody}</p>
|
||||
<button @click=${() => {
|
||||
overlays.blockBody(); this.requestUpdate();
|
||||
}}>block</button>
|
||||
<button @click=${() => {
|
||||
overlays.unBlockBody(); this.requestUpdate();
|
||||
}}>un-block</button>
|
||||
<button @click=${() => {
|
||||
this.requestUpdate();
|
||||
}}>refresh</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('page-b', PageB);
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
import { LitElement, css, html } from 'lit';
|
||||
|
||||
import './overlayCompatibility.js';
|
||||
|
||||
import 'page-a/page-a.js';
|
||||
import 'page-b/page-b.js';
|
||||
|
||||
class DemoApp extends LitElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.page = 'A';
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
page: { type: String },
|
||||
};
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
max-width: 680px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
padding: 1rem 2rem;
|
||||
background: #0069ed;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
transition: background 250ms ease-in-out, transform 150ms ease;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:focus {
|
||||
background: #0053ba;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px solid #fff;
|
||||
outline-offset: -4px;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.99);
|
||||
}
|
||||
|
||||
button.active {
|
||||
background: #33a43f;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h1>Demo App</h1>
|
||||
<nav>
|
||||
<button
|
||||
class=${this.page === 'A' ? 'active' : ''}
|
||||
@click=${() => {
|
||||
this.page = 'A';
|
||||
}}
|
||||
>
|
||||
Page A
|
||||
</button>
|
||||
<button
|
||||
class=${this.page === 'B' ? 'active' : ''}
|
||||
@click=${() => {
|
||||
this.page = 'B';
|
||||
}}
|
||||
>
|
||||
Page B
|
||||
</button>
|
||||
</nav>
|
||||
${this.page === 'A' ? html` <page-a></page-a> ` : html` <page-b></page-b> `}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('demo-app', DemoApp);
|
||||
30
packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/overlays/index.js
generated
vendored
Normal file
30
packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/overlays/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
export class OverlaysManager {
|
||||
name = 'OverlayManager 1.x';
|
||||
|
||||
blockBody = false;
|
||||
|
||||
constructor() {
|
||||
this._setupBlocker();
|
||||
}
|
||||
|
||||
_setupBlocker() {
|
||||
const blocker = document.createElement('div');
|
||||
blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;');
|
||||
blocker.innerText = `Blocker for ${this.name}`;
|
||||
|
||||
const target = document.getElementById('overlay-target');
|
||||
target.appendChild(blocker);
|
||||
|
||||
this.blocker = blocker;
|
||||
}
|
||||
|
||||
block() {
|
||||
this.blockBody = true;
|
||||
this.blocker.style.backgroundColor = '#ff6161';
|
||||
}
|
||||
|
||||
unBlock() {
|
||||
this.blockBody = false;
|
||||
this.blocker.style.backgroundColor = 'transparent';
|
||||
}
|
||||
}
|
||||
4
packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/overlays/instance.js
generated
vendored
Normal file
4
packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/overlays/instance.js
generated
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import { OverlaysManager } from './index.js';
|
||||
import { singletonManager } from 'singleton-manager';
|
||||
|
||||
export const overlays = singletonManager.get('overlays::overlays::1.x') || new OverlaysManager();
|
||||
34
packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-a/page-a.js
generated
vendored
Normal file
34
packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-a/page-a.js
generated
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { LitElement, html, css } from 'lit-element';
|
||||
import { overlays } from 'overlays/instance.js';
|
||||
|
||||
export class PageA extends LitElement {
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h3>I am page A</h3>
|
||||
<p>Overlays Status:</p>
|
||||
<p>Name: ${overlays.name}</p>
|
||||
<p>Blocked: ${overlays.blockBody}</p>
|
||||
<button @click=${() => {
|
||||
overlays.block(); this.requestUpdate();
|
||||
}}>block</button>
|
||||
<button @click=${() => {
|
||||
overlays.unBlock(); this.requestUpdate();
|
||||
}}>un-block</button>
|
||||
<button @click=${() => {
|
||||
this.requestUpdate();
|
||||
}}>refresh</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('page-a', PageA);
|
||||
30
packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js
generated
vendored
Normal file
30
packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
export class OverlaysManager {
|
||||
name = 'OverlayManager 2.x';
|
||||
|
||||
blockBody = false;
|
||||
|
||||
constructor() {
|
||||
this._setupBlocker();
|
||||
}
|
||||
|
||||
_setupBlocker() {
|
||||
const blocker = document.createElement('div');
|
||||
blocker.setAttribute('style', 'border: 2px solid #8d0606; margin: 10px; padding: 10px; width: 140px; text-align: center;');
|
||||
blocker.innerText = `Blocker for ${this.name}`;
|
||||
|
||||
const target = document.getElementById('overlay-target');
|
||||
target.appendChild(blocker);
|
||||
|
||||
this.blocker = blocker;
|
||||
}
|
||||
|
||||
blockingBody() {
|
||||
this.blockBody = true;
|
||||
this.blocker.style.backgroundColor = '#ff6161';
|
||||
}
|
||||
|
||||
unBlockingBody() {
|
||||
this.blockBody = false;
|
||||
this.blocker.style.backgroundColor = 'transparent';
|
||||
}
|
||||
}
|
||||
4
packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js
generated
vendored
Normal file
4
packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/node_modules/overlays/instance.js
generated
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
import { OverlaysManager } from './index.js';
|
||||
import { singletonManager } from 'singleton-manager';
|
||||
|
||||
export const overlays = singletonManager.get('overlays::overlays::2.x') || new OverlaysManager();
|
||||
34
packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js
generated
vendored
Normal file
34
packages/ui/docs/fundamentals/tools/singleton-manager/example-success/node_modules/page-b/page-b.js
generated
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { LitElement, html, css } from 'lit-element';
|
||||
import { overlays } from 'overlays/instance.js';
|
||||
|
||||
export class PageB extends LitElement {
|
||||
static get styles() {
|
||||
return css`
|
||||
:host {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<h3>I am page B</h3>
|
||||
<p>Overlays Status:</p>
|
||||
<p>Name: ${overlays.name}</p>
|
||||
<p>Blocked: ${overlays.blockBody}</p>
|
||||
<button @click=${() => {
|
||||
overlays.blockingBody(); this.requestUpdate();
|
||||
}}>block</button>
|
||||
<button @click=${() => {
|
||||
overlays.unBlockingBody(); this.requestUpdate();
|
||||
}}>un-block</button>
|
||||
<button @click=${() => {
|
||||
this.requestUpdate();
|
||||
}}>refresh</button>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('page-b', PageB);
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { OverlaysManager } from 'overlays';
|
||||
import { singletonManager } from 'singleton-manager';
|
||||
|
||||
class CompatibleManager extends OverlaysManager {
|
||||
constructor() {
|
||||
super();
|
||||
this.name = 'Compatible from App';
|
||||
this.blocker.innerText = `Blocker for ${this.name}`;
|
||||
}
|
||||
|
||||
blockingBody() {
|
||||
this.block();
|
||||
}
|
||||
|
||||
unBlockingBody() {
|
||||
this.unBlock();
|
||||
}
|
||||
}
|
||||
|
||||
const compatibleManager = new CompatibleManager();
|
||||
|
||||
singletonManager.set('overlays::overlays::1.x', compatibleManager);
|
||||
singletonManager.set('overlays::overlays::2.x', compatibleManager);
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
"debug:firefox": "cd ../../ && npm run debug:firefox",
|
||||
"debug:webkit": "cd ../../ && npm run debug:webkit",
|
||||
"publish-docs": "node ../../packages-node/publish-docs/src/cli.js --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../",
|
||||
"prepublishOnly": "npm run types && npm run publish-docs && npm run custom-elements-manifest",
|
||||
"prepublishOnly": "npm run types && node ./scripts/copy-doc-assets.js && npm run publish-docs && npm run custom-elements-manifest",
|
||||
"test": "cd ../../ && npm run test:browser",
|
||||
"types": "wireit",
|
||||
"types-check-only": "tsc --project tsconfig-check-only.json",
|
||||
|
|
|
|||
Loading…
Reference in a new issue