@teipublisher/pb-components 2.26.1-next.3 → 3.0.0-next-4.1

package/src/docs/pb-components-list.js

@@ -1,64 +1,128 @@
-import { LitElement, html, css } from 'lit-element';
-import '@polymer/paper-item';
+import { LitElement, html, css, nothing } from 'lit';
 
 /**
  * Displays a list of components to view.
- * 
+ *
  * @fires pb-api-component if a component name is clicked
  */
 export class PbComponentsList extends LitElement {
-    static get properties() {
-        return {
-            json: {
-                type: Object
-            },
-            withDemo: {
-                type: Boolean,
-                attribute: 'with-demo'
-            },
-            _demos: {
-                type: Object
-            }
-        };
-    }
+  static get properties() {
+    return {
+      json: {
+        type: Object,
+      },
+      withDemo: {
+        type: Boolean,
+        attribute: 'with-demo',
+      },
+      _demos: {
+        type: Object,
+      },
+    };
+  }
 
-    constructor() {
-        super();
-        this.json = null;
-        this.withDemo = false;
-    }
+  constructor() {
+    super();
+    this.json = null;
+    this.withDemo = false;
+  }
 
-    connectedCallback() {
-        super.connectedCallback();
-    }
+  connectedCallback() {
+    super.connectedCallback();
+  }
 
-    render() {
-        if (this.json) {
-            const { tags } = this.json;
-            tags.sort((a, b) => a.name.localeCompare(b.name));
-            let elements = tags;
-            if (this.withDemo) {
-                elements = tags.filter((tag) => tag.demo);
-            }
-            return html`
-                ${elements.map((tag) => html`<paper-item @click="${() => PbComponentsList._viewComponent(tag)}">${tag.name}</paper-item>`)}
-            `;
-        }
-        return html`<div>Loading ...</div>`;
+  render() {
+    if (this.json) {
+      const { tags } = this.json;
+      tags.sort((a, b) => a.name.localeCompare(b.name));
+      let elements = tags;
+      if (this.withDemo) {
+        elements = tags.filter(tag => tag.demo);
+      }
+      return html`
+        <ul class="component-list">
+          ${elements.map(
+            tag => html` <li>
+              <button
+                type="button"
+                class="component-item"
+                @click="${() => PbComponentsList._viewComponent(tag)}"
+              >
+                <span class="component-name">${tag.name}</span>
+                ${tag.demo ? html`<span class="badge">demo</span>` : nothing}
+              </button>
+            </li>`,
+          )}
+        </ul>
+      `;
     }
+    return html`<div>Loading ...</div>`;
+  }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-            }
-        `;
-    }
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
 
-    static _viewComponent(component, tab = 0) {
-        document.dispatchEvent(new CustomEvent('pb-api-component', {
-            detail: { component, tab }
-        }));
-    }
+      .component-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      li + li {
+        margin-top: 4px;
+      }
+
+      .component-item {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        border: none;
+        border-radius: 6px;
+        background: transparent;
+        font: inherit;
+        text-align: left;
+        cursor: pointer;
+        transition: background-color 120ms ease, color 120ms ease;
+      }
+
+      .component-item:hover,
+      .component-item:focus-visible {
+        background-color: rgba(33, 150, 243, 0.12);
+        outline: none;
+      }
+
+      .component-name {
+        flex: 1 1 auto;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .badge {
+        flex: none;
+        font-size: 0.75rem;
+        line-height: 1;
+        text-transform: uppercase;
+        padding: 0.125rem 0.375rem;
+        border-radius: 999px;
+        background-color: rgba(33, 150, 243, 0.16);
+        color: #1565c0;
+      }
+    `;
+  }
+
+  static _viewComponent(component, tab = 0) {
+    document.dispatchEvent(
+      new CustomEvent('pb-api-component', {
+        detail: { component, tab },
+      }),
+    );
+  }
 }
-customElements.define('pb-components-list', PbComponentsList);
+customElements.define('pb-components-list', PbComponentsList);

package/src/docs/pb-demo-snippet.js

@@ -1,204 +1,229 @@
-import { LitElement, html, css } from 'lit-element';
-import { translate } from "../pb-i18n.js";
+import { LitElement, html, css, nothing } from 'lit';
+import { translate } from '../pb-i18n.js';
+import { ready, firePageReady, syncPbSelect, autoWireForms } from './demo-utils.js';
 import '../pb-code-highlight.js';
 
-const codePenEndpoint = "https://teipublisher.com/exist/apps/tei-publisher";
+const codePenEndpoint = 'https://teipublisher.com/exist/apps/tei-publisher';
 
 /**
  * Viewer for demo code.
- * 
- * @customElement  pb-demo-snippet
- * @polymer
- * @appliesMixin pbMixin
+ *
+ * @customElement pb-demo-snippet
  */
 export class PbDemoSnippet extends LitElement {
-    static get properties() {
-        return {
-            title: {
-                type: String
-            },
-            code: {
-                type: String
-            },
-            _editorLoaded: {
-                type: Boolean
-            },
-            _showCodeLabel: {
-                type: String
-            },
-            _editCodeLabel: {
-                type: String
-            }
-        };
-    }
-
-    constructor() {
-        super();
-        this.title = 'TEI Publisher Webcomponents Example';
-        this.code = 'Loading ...';
-        this._showCodeLabel = 'demo.showCode.show';
+  static properties = {
+    title: { type: String },
+    code: { type: String },
+    _showCodeLabel: { type: String },
+    _requirePbTify: { type: Boolean },
+  };
+
+  constructor() {
+    super();
+    this.title = 'TEI Publisher Webcomponents Example';
+    this.code = 'Loading ...';
+    this._showCodeLabel = 'demo.showCode.show';
+    this._requirePbTify = false;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._requirePbTify = this.hasAttribute('require-pb-tify');
+
+    const template = this.querySelector('template');
+    if (!template) {
+      console.warn('<pb-demo-snippet> no <template> found inside snippet');
+      return;
     }
 
-    connectedCallback() {
-        super.connectedCallback();
-        const template = this.querySelector('template');
-        this.code = PbDemoSnippet.removeIndent(template.innerHTML);
-        this.code = this.code.replace(/\s*<style[\s\S]*>[\s\S]*?<\/style>\s*/g, '');
-        const clone = document.importNode(template.content, true);
-        this.appendChild(clone);
-    }
-
-    render() {
-        let cpCode = this.code.replace(/(endpoint="[^"]+")/,
-            `endpoint="${codePenEndpoint}"`
-        );
-        cpCode = PbDemoSnippet.indent(cpCode, 2);
-
-        const style = this.querySelector('style');
-
-        let css = '';
-        if (style) {
-            css = style.innerText;
+    this.code = PbDemoSnippet.removeIndent(template.innerHTML).replace(
+      /\s*<style[\s\S]*?>[\s\S]*?<\/style>\s*/g,
+      '',
+    );
+
+    const clone = template.content.cloneNode(true);
+    this.append(clone);
+
+    // After stamping, normalize demos:
+    // - If pb-select is present and defined, reflect initial values into the inner controls
+    // - Always fire a lightweight pb-page-ready so components can initialize
+    queueMicrotask(async () => {
+      try {
+        if (customElements.get('pb-select')) {
+          const selects = this.querySelectorAll('pb-select');
+          for (const el of selects) {
+            try {
+              await syncPbSelect(el);
+            } catch (_) {
+              /* non-fatal for demos */
+            }
+          }
         }
-        const cpCss = `
+      } catch (_) {
+        /* ignore */
+      }
+      autoWireForms(this);
+      firePageReady({ endpoint: '.', apiVersion: '1.0.0' });
+    });
+  }
+
+  render() {
+    const style = this.querySelector('style');
+    const css = style ? style.innerText : '';
+
+    const cpCode = PbDemoSnippet.indent(
+      this.code.replace(/(endpoint="[^"]+")/, `endpoint="${codePenEndpoint}"`),
+      2,
+    );
+
+    const cpCss = `
 @import url('https://fonts.googleapis.com/css?family=Oswald|Roboto&display=swap');
 
 body {
-    margin: 10px 20px;
-    font-size: 16px;
-    font-family: 'Roboto', 'Noto', sans - serif;
-    line-height: 1.42857;
-    font-weight: 300;
-    color: #333333;
-
-    --paper-tooltip-delay-in: 200;
+  margin: 10px 20px;
+  font-size: 16px;
+  font-family: 'Roboto', 'Noto', sans-serif;
+  line-height: 1.42857;
+  font-weight: 300;
+  color: #333;
 }
 
-${PbDemoSnippet.removeIndent(css)}`;
-        const cpHtml = `
+${PbDemoSnippet.removeIndent(css)}
+`;
+
+    const cpHtml = `
 <html>
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <meta http-equiv="X-UA-Compatible" content="ie=edge">
-
-        <title>${ this.title}</title>
-        <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/webcomponents-loader.js"></script>
-        <script type="module" src="https://unpkg.com/@teipublisher/pb-components@latest/dist/pb-components-bundle.js"></script>
-        <script type="module" src="https://unpkg.com/@teipublisher/pb-components@latest/dist/pb-leaflet-map.js"></script>
-    </head>
-
-    <body>
-    ${ cpCode}
-    </body>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>${this.title}</title>
+    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.3/webcomponents-loader.js"></script>
+    <script type="module" src="https://unpkg.com/@teipublisher/pb-components@latest/dist/pb-components-bundle.js"></script>
+    <script type="module" src="https://unpkg.com/@teipublisher/pb-components@latest/dist/pb-leaflet-map.js"></script>
+  </head>
+  <body>
+${cpCode}
+  </body>
+  ${
+    this._requirePbTify
+      ? '<script type="module" src="https://unpkg.com/@teipublisher/pb-components@latest/dist/pb-tify.js"></script>'
+      : ''
+  }
 </html>`;
 
-        const cpOptions = {
-            title: this.title,
-            html: cpHtml,
-            html_pre_processor: "none",
-            css: cpCss,
-            css_starter: "normalize",
-            template: false,
-            editors: 110
-        };
-
-        return html`
-            <div class="snippet"><slot></slot></div>
-            <pb-code-highlight id="source" theme="coy" language="html" line-numbers .code="${this.code}"></pb-code-highlight>
-            <div id="container"></div>
-            <div class="buttons">
-                <button class="pretty-button" @click="${this._showCode}">${translate(this._showCodeLabel)}</button>
-                <form action="https://codepen.io/pen/define" method="POST" target="_blank">
-                    <input type="hidden" name="data" .value="${JSON.stringify(cpOptions)}">
-                    <button class="pretty-button" type="submit">${translate('demo.editCode.show')}</button>
-                </form>
-            </div>
-        `;
+    const cpOptions = {
+      title: this.title,
+      html: cpHtml,
+      html_pre_processor: 'none',
+      css: cpCss,
+      css_starter: 'normalize',
+      template: false,
+      editors: 110,
+    };
+
+    return html`
+      <div class="snippet"><slot></slot></div>
+      <pb-code-highlight
+        id="source"
+        theme="coy"
+        language="html"
+        line-numbers
+        .code=${this.code}
+      ></pb-code-highlight>
+      <div class="buttons">
+        <button class="pretty-button" @click=${this._toggleSource} type="button">
+          ${translate(this._showCodeLabel)}
+        </button>
+        <form action="https://codepen.io/pen/define" method="POST" target="_blank">
+          <input type="hidden" name="data" .value=${JSON.stringify(cpOptions)} />
+          <button class="pretty-button" type="submit">${translate('demo.editCode.show')}</button>
+        </form>
+      </div>
+    `;
+  }
+
+  _toggleSource() {
+    const source = this.renderRoot.querySelector('#source');
+    if (!source) return;
+    if (source.classList.contains('open')) {
+      source.classList.remove('open');
+      this._showCodeLabel = 'demo.showCode.show';
+    } else {
+      source.classList.add('open');
+      this._showCodeLabel = 'demo.showCode.hide';
     }
-
-    _showCode() {
-        const source = this.shadowRoot.getElementById('source');
-        if (source.classList.contains('open')) {
-            source.classList.remove('open');
-            this._showCodeLabel = 'demo.showCode.show';
-        } else {
-            source.classList.add('open');
-            this._showCodeLabel = 'demo.showCode.hide';
-        }
+  }
+
+  static removeIndent(input = '') {
+    const indents = input.match(/^[^\S\n]*(?=\S)/gm);
+    if (!indents || !indents[0]) return input;
+    const min = indents.reduce((acc, indent) => Math.min(acc, indent.length), indents[0].length);
+    if (!min) return input;
+    return input.replace(new RegExp(`^${' '.repeat(min)}`, 'gm'), '');
+  }
+
+  static indent(input, tabs) {
+    const indent = '\t'.repeat(tabs);
+    return input.replace(/^[^\S\n]*(?=\S)/gm, indent + '$&');
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.14), 0 1px 5px rgba(0, 0, 0, 0.12),
+        0 3px 1px -2px rgba(0, 0, 0, 0.2);
+      padding: 20px;
+      background: #fff;
     }
 
-    static removeIndent(input) {
-        const indents = input.match(/^[^\S]*(?=\S)/gm);
-
-        if (!indents || !indents[0].length)
-            return input;
+    pb-code-highlight {
+      display: none;
+      margin-top: 30px;
+    }
 
-        indents.sort((a, b) => a.length - b.length);
+    pb-code-highlight.open {
+      display: block;
+    }
 
-        if (!indents[0].length)
-            return input;
+    .buttons {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 20px;
+      padding-top: 10px;
+      border-top: 1px solid var(--google-grey-400, #999);
+    }
 
-        return input.replace(RegExp('^' + indents[0], 'gm'), '');
+    .pretty-button {
+      cursor: pointer;
+      display: inline-block;
+      box-sizing: border-box;
+      margin: 12px 0;
+      padding: 13px 44px;
+      border: 2px solid #2196f3;
+      background-color: transparent;
+      font-size: 14px;
+      font-weight: 500;
+      color: #2196f3;
+      text-align: center;
+      text-decoration: none;
+      text-transform: uppercase;
+      border-radius: 0;
+      appearance: none;
     }
 
-    static indent(input, tabs) {
-        return input.replace(/^[^\S\n\r]*(?=\S)/gm, new Array(++tabs).join('\t') + '$&');
+    .pretty-button:hover,
+    .pretty-button:active {
+      background-color: #2196f3;
+      color: #fff;
     }
 
-    static get styles() {
-        return css`
-            :host {
-                display: block;
-                box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
-                padding: 20px;
-            }
-            pb-code-highlight {
-                display: none;
-                margin-top: 30px;
-            }
-            pb-code-highlight.open {
-                display: block;
-            }
-            #container {
-                margin-top: 20px;
-            }
-            .buttons {
-                display: flex;
-                justify-content: space-between;
-                margin-top: 20px;
-                padding-top: 10px;
-                border-top: 1px solid var(--google-grey-400, #999);
-            }
-            .pretty-button {
-                cursor: pointer;
-                display: inline-block;
-                box-sizing: border-box;
-                margin: 12px 0;
-                padding: 13px 44px;
-                border: 2px solid #2196F3;
-                background-color: transparent;
-                font-size: 14px;
-                font-weight: 500;
-                color: #2196F3;
-                text-align: center;
-                text-decoration: none;
-                text-transform: uppercase;
-                border-radius: 0;
-                -webkit-appearance: none;
-                appearance: none;
-            }
-            .pretty-button:hover,
-            .pretty-button:active {
-                background-color: #2196F3;
-                color: #FFF;
-            }
-            .pretty-button:disabled {
-                background-color: transparent;
-                border-color: #999;
-                color: #999;
-            }
-        `;
+    .pretty-button:disabled {
+      background-color: transparent;
+      border-color: #999;
+      color: #999;
     }
+  `;
 }
-customElements.define('pb-demo-snippet', PbDemoSnippet);
+
+customElements.define('pb-demo-snippet', PbDemoSnippet);