chore: add releases for docs
This commit is contained in:
Thomas Allmer
Thomas Allmer
parent
fe47ee948c
commit
4708fe9462
47 changed files with 26 additions and 933 deletions
5
.changeset/hungry-starfishes-dress.md
Normal file
5
.changeset/hungry-starfishes-dress.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'@lion/ui': patch
|
||||
---
|
||||
|
||||
Include documentation in the npm package so it can be reused
|
||||
15
.changeset/plenty-tigers-turn.md
Normal file
15
.changeset/plenty-tigers-turn.md
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
---
|
||||
'rocket-preset-extend-lion-docs': minor
|
||||
---
|
||||
|
||||
BREAKING CHANGE: lion is moving to a single pkg with multiple entrypoints
|
||||
Packages are now differently imported and therefore are also differently extended.
|
||||
|
||||
```js
|
||||
import { LionButton } from '@lion/button';
|
||||
// became
|
||||
import { LionButton } from '@lion/ui/button.js';
|
||||
|
||||
// extending now convert it to something like this
|
||||
import { IngButton } from 'ing-web/button.js';
|
||||
```
|
||||
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -23340,11 +23340,11 @@
|
|||
"dependencies": {
|
||||
"@babel/core": "^7.10.1",
|
||||
"@babel/plugin-syntax-import-assertions": "^7.14.5",
|
||||
"babel-plugin-extend-docs": "0.5.3",
|
||||
"babel-plugin-extend-docs": "^0.5.3",
|
||||
"es-module-lexer": "^0.3.6",
|
||||
"glob": "^7.1.6",
|
||||
"plugins-manager": "^0.3.0",
|
||||
"remark-extend": "0.5.1",
|
||||
"remark-extend": "^0.5.1",
|
||||
"unist-util-visit": "^2.0.2"
|
||||
}
|
||||
},
|
||||
|
|
@ -39134,11 +39134,11 @@
|
|||
"requires": {
|
||||
"@babel/core": "^7.10.1",
|
||||
"@babel/plugin-syntax-import-assertions": "^7.14.5",
|
||||
"babel-plugin-extend-docs": "0.5.3",
|
||||
"babel-plugin-extend-docs": "^0.5.3",
|
||||
"es-module-lexer": "^0.3.6",
|
||||
"glob": "^7.1.6",
|
||||
"plugins-manager": "^0.3.0",
|
||||
"remark-extend": "0.5.1",
|
||||
"remark-extend": "^0.5.1",
|
||||
"unist-util-visit": "^2.0.2"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -32,11 +32,11 @@
|
|||
"dependencies": {
|
||||
"@babel/core": "^7.10.1",
|
||||
"@babel/plugin-syntax-import-assertions": "^7.14.5",
|
||||
"babel-plugin-extend-docs": "0.5.3",
|
||||
"babel-plugin-extend-docs": "^0.5.3",
|
||||
"es-module-lexer": "^0.3.6",
|
||||
"glob": "^7.1.6",
|
||||
"plugins-manager": "^0.3.0",
|
||||
"remark-extend": "0.5.1",
|
||||
"remark-extend": "^0.5.1",
|
||||
"unist-util-visit": "^2.0.2"
|
||||
},
|
||||
"keywords": [
|
||||
|
|
|
|||
|
|
@ -1,38 +0,0 @@
|
|||
import { directive } from 'lit/directive.js';
|
||||
|
||||
/**
|
||||
* @typedef {import('@lion/ui/core.js').PropertyPart} PropertyPart
|
||||
*/
|
||||
|
||||
/** @type {WeakSet<Element>} */
|
||||
const cache = new WeakSet();
|
||||
|
||||
/**
|
||||
* @desc Allows to have references to different parts of your lit template.
|
||||
* Without it, seperate renders to different nodes would have been needed, leading to more verbose,
|
||||
* less readable and less performant code.
|
||||
* Inspired by Angular template refeference variables:
|
||||
* https://angular.io/guide/template-syntax#ref-vars
|
||||
*
|
||||
* @example
|
||||
* ```js
|
||||
* const refObj = {};
|
||||
* ```
|
||||
* ```html
|
||||
* <my-element #myElement=${ref(refObj)}>
|
||||
* <button @click=${() => refObj.myElement.publicMethod()}>click</button>
|
||||
* </my-element>
|
||||
*```
|
||||
*
|
||||
* @param {object} refObj will be used to store reference to attribute names like #myElement
|
||||
*/
|
||||
export const ref = directive(refObj => (/** @type {PropertyPart} */ part) => {
|
||||
if (cache.has(part.committer.element)) {
|
||||
return;
|
||||
}
|
||||
cache.add(part.committer.element);
|
||||
const attrName = part.committer.name;
|
||||
const key = attrName.replace(/^#/, '');
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
refObj[key] = part.committer.element;
|
||||
});
|
||||
|
|
@ -1 +0,0 @@
|
|||
!**/*
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
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);
|
||||
|
|
@ -1 +0,0 @@
|
|||
[=> See Source <=](../../../../../../../docs/fundamentals/tools/singleton-manager/example-complex/index.md)
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
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';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
import { OverlaysManager } from './index.js';
|
||||
import { singletonManager } from 'singleton-manager';
|
||||
|
||||
export const overlays = singletonManager.get('overlays::overlays::1.x') || new OverlaysManager();
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"name": "overlays",
|
||||
"version": "1.0.0"
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"name": "page-a",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"overlays": "^1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
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);
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
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';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
import { OverlaysManager } from './index.js';
|
||||
import { singletonManager } from 'singleton-manager';
|
||||
|
||||
export const overlays = singletonManager.get('overlays::overlays::2.x') || new OverlaysManager();
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"name": "overlays",
|
||||
"version": "2.0.0"
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"name": "page-b",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"overlays": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
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);
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
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);
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"name": "fail-demo-app",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@lion/core": "0.13.6",
|
||||
"page-a": "^1.0.0",
|
||||
"page-b": "^1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
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);
|
||||
|
|
@ -1 +0,0 @@
|
|||
[=> See Source <=](../../../../../../../docs/fundamentals/tools/singleton-manager/example-fail/index.md)
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
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';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import { OverlaysManager } from './index.js';
|
||||
|
||||
export const overlays = new OverlaysManager();
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"name": "overlays",
|
||||
"version": "1.0.0"
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"name": "page-a",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"overlays": "^1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
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);
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
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';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import { OverlaysManager } from './index.js';
|
||||
|
||||
export const overlays = new OverlaysManager();
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"name": "overlays",
|
||||
"version": "2.0.0"
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"name": "page-b",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"overlays": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
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);
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"name": "fail-demo-app",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@lion/core": "0.13.6",
|
||||
"page-a": "^1.0.0",
|
||||
"page-b": "^1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
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);
|
||||
|
|
@ -1 +0,0 @@
|
|||
[=> See Source <=](../../../../../../../docs/fundamentals/tools/singleton-manager/example-success/index.md)
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
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';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
import { OverlaysManager } from './index.js';
|
||||
import { singletonManager } from 'singleton-manager';
|
||||
|
||||
export const overlays = singletonManager.get('overlays::overlays::1.x') || new OverlaysManager();
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"name": "overlays",
|
||||
"version": "1.0.0"
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"name": "page-a",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"overlays": "^1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
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);
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
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';
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
import { OverlaysManager } from './index.js';
|
||||
import { singletonManager } from 'singleton-manager';
|
||||
|
||||
export const overlays = singletonManager.get('overlays::overlays::2.x') || new OverlaysManager();
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"name": "overlays",
|
||||
"version": "2.0.0"
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
{
|
||||
"name": "page-b",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"overlays": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
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);
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
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);
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
{
|
||||
"name": "fail-demo-app",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@lion/core": "0.13.6",
|
||||
"page-a": "^1.0.0",
|
||||
"page-b": "^1.0.0"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue