@mantou/gem 1.6.3 → 1.6.9

package/src/examples/elements/nav.ts

@@ -1,71 +0,0 @@
-import { GemElement, html, customElement, version } from '../..';
-import { MATADATA, EXAMPLES, EXAMPLE } from './env';
-
-const getGitPageUrl = (name: string) => `../${name}/`;
-
-const getName = (name: string) => (MATADATA[name].name || name).replace('-', ' ');
-
-@customElement('gem-examples-nav')
-export class Nav extends GemElement {
-  render() {
-    return html`
-      <style>
-        :host {
-          grid-area: nav;
-          padding: 2em 0;
-          overflow: auto;
-          background: #666;
-          color: white;
-        }
-        .header {
-          margin-bottom: 1em;
-          padding: 0 2em;
-        }
-        .name {
-          font-size: 1.2em;
-        }
-        .version {
-          font-family: monospace;
-        }
-        ol {
-          margin: 0;
-          padding: 0;
-        }
-        li {
-          display: contents;
-        }
-        a {
-          padding: 0.5em 2em;
-          display: block;
-          color: inherit;
-          opacity: 0.8;
-          line-height: 1.5;
-          text-decoration: none;
-          text-transform: capitalize;
-        }
-        a:hover {
-          opacity: 1;
-        }
-        a.active {
-          opacity: 1;
-          background: #444;
-        }
-      </style>
-      <a class="header" href="https://github.com/mantou132/gem" target="_blank">
-        <div class="name">Gem Examples</div>
-        <div class="version">version: ${version}</div>
-      </a>
-      <ol>
-        ${EXAMPLES.sort((a, b) => ((MATADATA[a].order || 0) > (MATADATA[b].order || 0) ? 1 : -1)).map(
-          (name) =>
-            html`<li>
-              <a class=${EXAMPLE === name ? 'active' : ''} href=${getGitPageUrl(name)}>
-                <div>${getName(name)}</div>
-                <div>${MATADATA[name].desc}</div>
-              </a>
-            </li>`,
-        )}
-      </ol>
-    `;
-  }
-}

package/src/examples/elements/source.ts

@@ -1,68 +0,0 @@
-import { GemElement, html, customElement } from '../..';
-import { EXAMPLE, FILES } from './env';
-
-@customElement('gem-examples-source')
-export class Source extends GemElement {
-  state = {
-    files: FILES.map((file) => ({ file: file, content: '' })),
-    current: FILES[0],
-  };
-  render() {
-    const { files, current } = this.state;
-    return html`
-      <style>
-        :host {
-          border-top: 1px solid #666;
-          overflow: auto;
-          grid-area: source;
-          background: #eee5;
-        }
-        ul {
-          margin: 0;
-          padding: 0 1em;
-          display: flex;
-          gap: 1em 2em;
-          border-bottom: 1px solid #eee;
-          position: sticky;
-          top: 0;
-          background: white;
-        }
-        li {
-          cursor: pointer;
-          line-height: 2;
-          list-style: none;
-          border-bottom: 2px solid transparent;
-        }
-        li.current {
-          border-color: #1ecfe3;
-        }
-        pre {
-          margin: 0;
-          padding: 1em;
-        }
-      </style>
-      <ul>
-        ${FILES.map(
-          (file) =>
-            html`
-              <li class=${current === file ? 'current' : ''} @click=${() => this.setState({ current: file })}>
-                ${file}
-              </li>
-            `,
-        )}
-      </ul>
-      <pre>${files.find((e) => e.file === current)?.content}</pre>
-    `;
-  }
-  mounted() {
-    FILES.forEach(async (file) => {
-      const { files } = this.state;
-      const item = files.find((e) => e.file === file);
-      if (!item) return;
-      item.content = await (
-        await fetch(`https://raw.githubusercontent.com/mantou132/gem/master/src/examples/${EXAMPLE}/${file}`)
-      ).text();
-      this.update();
-    });
-  }
-}

package/src/examples/gesture/canvas.ts

@@ -1,69 +0,0 @@
-import { GemElement, html, customElement, property, refobject, RefObject } from '../..';
-import { PanEventDetail } from '../../elements/gesture';
-
-@customElement('app-canvas')
-export class AppCanvas extends GemElement {
-  @property data: PanEventDetail[];
-
-  @refobject canvasRef: RefObject<HTMLCanvasElement>;
-  @refobject canvasRef1: RefObject<HTMLCanvasElement>;
-  render() {
-    return html`
-      <br />
-      <canvas ref=${this.canvasRef.ref} style="border: 1px solid"></canvas>
-      <canvas ref=${this.canvasRef1.ref} style="border: 1px solid"></canvas>
-    `;
-  }
-
-  mounted() {
-    const canvas = this.canvasRef.element!;
-    const canvas1 = this.canvasRef1.element!;
-    const ctx = canvas.getContext('2d')!;
-    const ctx1 = canvas1.getContext('2d')!;
-    canvas.height = 150;
-    canvas1.height = 150;
-    this.effect(() => {
-      canvas.width = 0;
-      canvas.width = 300;
-      canvas1.width = 0;
-      canvas1.width = 300;
-      const maxX = [...this.data].sort(({ x }, { x: x1 }) => {
-        if (x > x1) return -1;
-        return 1;
-      })[0]?.x;
-      ctx.fillText(String(maxX), 0, 8);
-      const maxY = [...this.data].sort(({ y }, { y: y1 }) => {
-        if (y > y1) return -1;
-        return 1;
-      })[0]?.y;
-      ctx1.fillText(String(maxY), 0, 8);
-      console.log('x:', this.data.map(({ x }) => x).join());
-      console.log('y:', this.data.map(({ y }) => y).join());
-      console.log(
-        'timeStamp interval:',
-        this.data.reduce(
-          (p, c, index) => (index ? `${p}, ${(c.timeStamp - this.data[index - 1].timeStamp).toFixed()}` : ''),
-          '',
-        ),
-      );
-      this.data.forEach((data, index) => {
-        const y = 150 - data.x * (150 / maxX);
-        const y1 = 150 - data.y * (150 / maxY);
-        const x = index * (300 / this.data.length);
-        if (index === 0) {
-          ctx.beginPath();
-          ctx.moveTo(x, y);
-          ctx1.beginPath();
-          ctx1.moveTo(x, y1);
-        } else {
-          ctx.lineTo(x, y);
-          ctx1.lineTo(x, y1);
-        }
-        if (index === this.data.length - 1) {
-          ctx.stroke();
-          ctx1.stroke();
-        }
-      });
-    });
-  }
-}

package/src/examples/gesture/index.ts

@@ -1,97 +0,0 @@
-import { render, GemElement, html, customElement, refobject, RefObject } from '../..';
-
-import '../../elements/gesture';
-import { PanEventDetail, PinchEventDetail, RotateEventDetail, SwipeEventDetail } from '../../elements/gesture';
-import '../elements/layout';
-import './canvas';
-
-@customElement('app-root')
-export class AppRoot extends GemElement {
-  @refobject gestureRef: RefObject<any>;
-  state = {
-    x: 0,
-    y: 0,
-    duration: 0,
-    scale: 1,
-    rotate: 0,
-    swipe: '',
-    moves: [],
-  };
-  onPan = (evt: CustomEvent<PanEventDetail>) => {
-    const { detail } = evt;
-    const { x, y } = this.state;
-    this.setState({ x: detail.x + x, y: detail.y + y, duration: 0 });
-  };
-  onPinch = (evt: CustomEvent<PinchEventDetail>) => {
-    this.setState({ scale: evt.detail.scale * this.state.scale });
-  };
-  onRotate = (evt: CustomEvent<RotateEventDetail>) => {
-    this.setState({ rotate: evt.detail.rotate + this.state.rotate });
-  };
-  onSwipe = (e: CustomEvent<SwipeEventDetail>) => {
-    this.setState({ swipe: `${e.detail.direction}, speed: ${e.detail.speed}` });
-  };
-  onEnd = () => {
-    this.setState({
-      x: 0,
-      y: 0,
-      duration: 0.5,
-      scale: 1,
-      rotate: 0,
-      swipe: '',
-      moves: [...this.gestureRef.element.movesMap.values().next().value],
-    });
-  };
-  render() {
-    const { x, y, scale, rotate, duration, swipe, moves } = this.state;
-    return html`
-      <style>
-        img {
-          translate: ${x}px ${y}px;
-          scale: ${scale};
-          rotate: ${rotate}deg;
-          transition: all ${duration}s;
-        }
-      </style>
-      <gem-gesture
-        ref=${this.gestureRef.ref}
-        @pan=${this.onPan}
-        @end=${this.onEnd}
-        @pinch=${this.onPinch}
-        @rotate=${this.onRotate}
-        @press=${console.log}
-        @swipe=${this.onSwipe}
-        touch-action="pan-y"
-      >
-        <gem-gesture
-          @pan=${console.log}
-          @end=${console.log}
-          @pinch=${console.log}
-          @rotate=${console.log}
-          @press=${console.log}
-          @swipe=${console.log}
-          touch-action="pan-y"
-        >
-          <img src="https://gem-book.js.org/logo.png" width="200" />
-        </gem-gesture>
-        <div>${moves[moves.length - 1] ? `${JSON.stringify(moves[moves.length - 1])}` : ''}</div>
-        <div>${swipe}</div>
-        <app-canvas .data=${moves}></app-canvas>
-      </gem-gesture>
-    `;
-  }
-}
-
-render(
-  html`
-    <style>
-      body {
-        overscroll-behavior: contain;
-      }
-    </style>
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/gesture/manifest.json

@@ -1,3 +0,0 @@
-{
-  "desc": ""
-}

package/src/examples/hash/index.ts

@@ -1,55 +0,0 @@
-import { GemElement, render, html } from '../../';
-import '../../elements/link';
-
-import '../elements/layout';
-
-class Article extends GemElement {
-  constructor() {
-    super();
-    window.addEventListener('hashchange', this.checkHash);
-  }
-
-  mounted = () => {
-    // 在当前页面刷新浏览器会保留滚动位置
-    // 开新窗口测试带 hash 链接
-    this.checkHash();
-  };
-
-  unmounted = () => {
-    window.removeEventListener('hashchange', this.checkHash);
-  };
-
-  checkHash = () => {
-    if (this.id === location.hash.substr(1)) {
-      this.scrollIntoView();
-    }
-  };
-
-  render() {
-    return html`<div style="height: 1000px"><slot></slot></div>`;
-  }
-}
-customElements.define('app-article', Article);
-
-class App extends GemElement {
-  render() {
-    return html`
-      <a href="#article-1">${'<a href="#article-1">'}</a>
-      <a href="#article-2">${'<a href="#article-2">'}</a>
-      <gem-link path="/" hash="#article-1"><button>go #article-1</button></gem-link>
-      <gem-link path="/" hash="#article-2"><button>go #article-2</button></gem-link>
-      <app-article id="article-1" style="display: block; margin-top: 100px;">article-1</app-article>
-      <app-article id="article-2" style="display: block; margin-top: 100px;">article-2</app-article>
-    `;
-  }
-}
-customElements.define('app-root', App);
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/i18n/index.ts

@@ -1,63 +0,0 @@
-import { GemElement, html, connectStore, customElement, render } from '../../';
-
-import '../elements/layout';
-
-import { I18n } from '../../helper/i18n';
-
-const en = {
-  title: 'This is I18n',
-  hello: 'Hello, $1! $2=> $1, Hello!',
-  detail: 'See $1<detail>, $1<detail2>',
-};
-const i18n = new I18n<typeof en>({
-  cache: true,
-  fallbackLanguage: 'en',
-  resources: {
-    en,
-    de: {
-      title: 'Das ist I18n',
-    },
-    zh: 'data:text/plain;base64,eyJ0aXRsZSI6Iui/meaYr0kxOG4ifQ==',
-  },
-  onChange: console.log,
-});
-
-const i18nModule = i18n.createSubModule<typeof en>('test', {
-  en,
-  de: {
-    title: 'Das ist I18n',
-  },
-  zh: 'data:text/plain;base64,eyJ0aXRsZSI6Iui/meaYr0kxOG4ifQ==',
-});
-
-@connectStore(i18n.store)
-@connectStore(i18nModule.store)
-@customElement('app-root')
-export class App extends GemElement {
-  render() {
-    return html`
-      <button @click=${() => i18n.setLanguage('de')}>de</button>
-      <button @click=${() => i18n.setLanguage('zh')}>zh</button>
-      <button @click=${() => i18n.setLanguage('en')}>en</button>
-      <button @click=${() => i18n.resetLanguage()}>reset</button>
-      <p>Current language: ${i18n.currentLanguage}</p>
-      <p>${i18n.get('title')}</p>
-      <p>${i18n.get('hello', 'World', 'reverse')}</p>
-      <p>${i18n.get('detail', (s) => html`<a href="#">${s}</a>`)}</p>
-
-      <h2>sub module</h2>
-      <p>${i18nModule.get('title')}</p>
-      <p>${i18nModule.get('hello', 'World', 'reverse')}</p>
-      <p>${i18nModule.get('detail', (s) => html`<a href="#">${s}</a>`)}</p>
-    `;
-  }
-}
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/index/index.ts

@@ -1,33 +0,0 @@
-import { render, GemElement, createStore, updateStore, html } from '../../';
-import { connectStore, customElement } from '../../lib/decorators';
-
-import '../elements/layout';
-
-// 新建全局数据对象
-const store = createStore({
-  a: 1,
-});
-
-// 定义自定义元素
-@customElement('app-root')
-@connectStore(store)
-export class HelloWorld extends GemElement {
-  clickHandle = () => {
-    updateStore(store, { a: ++store.a });
-  };
-  render() {
-    return html`
-      <button @click="${this.clickHandle}">Hello, World</button>
-      <div>store.a: ${store.a}</div>
-    `;
-  }
-}
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/index/manifest.json

@@ -1,5 +0,0 @@
-{
-  "order": -1,
-  "name": "hello world",
-  "desc": ""
-}

package/src/examples/light-dom/index.ts

@@ -1,31 +0,0 @@
-import { GemElement, html, render } from '../../';
-
-import '../elements/layout';
-
-export class App extends GemElement {
-  state = { now: 0 };
-  constructor() {
-    super({ isLight: true });
-    setInterval(() => {
-      this.setState({ now: Date.now() });
-    }, 1000);
-  }
-
-  render() {
-    return html`
-      <div>hello world!</div>
-      <time>${this.state.now}</time>
-    `;
-  }
-}
-
-customElements.define('app-root', App);
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/multi-page/api.ts

@@ -1,9 +0,0 @@
-import { updateStore } from '../../';
-import store from './store';
-
-export default {
-  async getData() {
-    const text = await new Promise<string>((res) => setTimeout(() => res('pageA async data'), 1000));
-    updateStore(store.pageA, { text });
-  },
-};

package/src/examples/multi-page/index.ts

@@ -1,78 +0,0 @@
-import { GemElement, html, render } from '../../';
-import { GemTitleElement } from '../../elements/title';
-import '../../elements/route';
-import '../../elements/link';
-
-import '../elements/layout';
-
-import './page-b';
-import './page-c';
-
-const routes = [
-  {
-    pattern: '/',
-    redirect: '/c/e',
-  },
-  {
-    title: 'Page A Title',
-    pattern: '/a',
-    get content() {
-      import('./page-a');
-      return html`<app-page-a>A: </app-page-a>`;
-    },
-  },
-  {
-    title: 'Page B Title',
-    pattern: '/B',
-    content: html` <app-page-b>B: </app-page-b> `,
-  },
-  {
-    title: 'Page C Title',
-    pattern: '/c/*',
-    content: html`<app-page-c>C: </app-page-c>`,
-  },
-  {
-    pattern: '/',
-    content: html`<div>hello</div>`,
-  },
-];
-
-class App extends GemElement {
-  render() {
-    return html`
-      <style>
-        :host {
-          text-align: center;
-        }
-        gem-link {
-          cursor: pointer;
-        }
-        gem-link + gem-link {
-          margin-left: 0.5em;
-        }
-        gem-link:hover {
-          text-decoration: underline;
-        }
-      </style>
-      <header><gem-title suffix=${GemTitleElement.defaultSuffix}>AppName</gem-title></header>
-      <nav>
-        <gem-link path="/">Home</gem-link>
-        <gem-link path="/A">PageA</gem-link>
-        <gem-link path="/b">PageB</gem-link>
-        <gem-link path="/c/e" pattern="/c/*">PageC</gem-link>
-      </nav>
-      <main><gem-light-route .routes=${routes}></gem-light-route></main>
-    `;
-  }
-}
-
-customElements.define('app-root', App);
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/multi-page/page-a.ts

@@ -1,16 +0,0 @@
-import { GemElement, html } from '../../';
-import storeSet from './store';
-import api from './api';
-
-customElements.define(
-  'app-page-a',
-  class extends GemElement {
-    static observedStores = [storeSet.pageA];
-    mounted() {
-      api.getData();
-    }
-    render() {
-      return html`<slot></slot> ${storeSet.pageA.text}`;
-    }
-  },
-);

package/src/examples/multi-page/page-b.ts

@@ -1,12 +0,0 @@
-import { GemElement, html } from '../../';
-import storeSet from './store';
-
-customElements.define(
-  'app-page-b',
-  class extends GemElement {
-    static observedStores = [storeSet.pageB];
-    render() {
-      return html`<slot></slot> ${storeSet.pageB.text}`;
-    }
-  },
-);

package/src/examples/multi-page/page-c.ts

@@ -1,40 +0,0 @@
-import { GemElement, html } from '../../';
-import '../../elements/route';
-import '../../elements/link';
-
-const routes = [
-  {
-    title: 'ccccccd',
-    pattern: '/c/d',
-    content: html`<div>C/D</div>`,
-  },
-  {
-    // `title` 未设置会使用父路由标题
-    pattern: '/c/e',
-    content: html`<div>C/E</div>`,
-  },
-  {
-    pattern: '/c/*',
-    content: html`<div>C/E</div>`,
-  },
-];
-
-customElements.define(
-  'app-page-c',
-  class extends GemElement {
-    render() {
-      return html`
-        <style>
-          gem-link + gem-link {
-            margin-left: 0.5em;
-          }
-        </style>
-        <gem-link path="./d">Page c/d</gem-link>
-        <gem-link path="./e">Page c/e</gem-link>
-        <gem-route .routes=${routes}></gem-route>
-        inert route:
-        <gem-route ?inert=${true} .routes=${routes}></gem-route>
-      `;
-    }
-  },
-);

package/src/examples/multi-page/store.ts

@@ -1,10 +0,0 @@
-import { createStoreSet } from '../../';
-
-export default createStoreSet({
-  pageA: {
-    text: 'this is page A',
-  },
-  pageB: {
-    text: 'this is page B',
-  },
-});