@mantou/gem 1.6.2 → 1.6.8

package/src/examples/decorator/chidren.ts

@@ -1,77 +0,0 @@
-import {
-  GemElement,
-  html,
-  property,
-  attribute,
-  slot,
-  part,
-  state,
-  emitter,
-  Emitter,
-  customElement,
-  numattribute,
-  boolattribute,
-  rootElement,
-} from '../../';
-
-export type Message = number[];
-
-/**
- * @attr first-name
- * @attr last-name
- * @attr count
- * @attr disabled
- * @fires say-hi
- * @fires load
- * @state odd
- * @slot light
- * @part paragraph
- */
-@customElement('app-children')
-@rootElement('app-root')
-export class Children extends GemElement {
-  @slot static light: string;
-  @part static paragraph: string;
-
-  @attribute firstName: string;
-  @attribute lastName: string;
-  @numattribute count: number;
-  @boolattribute disabled: boolean;
-  @property message: Message | undefined;
-  @emitter sayHi: Emitter;
-  @emitter load: Emitter;
-  @state odd: boolean;
-
-  constructor() {
-    super();
-    console.log('child cons');
-  }
-
-  mounted = () => {
-    console.log('child mounted');
-    setTimeout(() => this.load(new Date()), 1000);
-    this.addEventListener('click', () => {
-      this.odd = !this.odd;
-    });
-  };
-
-  updated = () => {
-    console.log('child updated');
-  };
-
-  render() {
-    console.log('child render');
-    return html`
-      <p>
-        attributes:
-        <span>${this.firstName},</span>
-        <span>${this.lastName},</span>
-        <span>${this.disabled},</span>
-        <span>${this.count}.</span>
-      </p>
-      <p part=${Children.paragraph}>properties: ${JSON.stringify(this.message)}</p>
-      <slot name=${Children.light}></slot>
-      <button @click=${() => this.sayHi({}, { bubbles: true, composed: true })}>say hi</button>
-    `;
-  }
-}

package/src/examples/decorator/index.ts

@@ -1,110 +0,0 @@
-import {
-  createStore,
-  updateStore,
-  createCSSSheet,
-  GemElement,
-  html,
-  refobject,
-  RefObject,
-  attribute,
-  connectStore,
-  customElement,
-  adoptedStyle,
-  css,
-  render,
-} from '../../';
-
-import '../elements/layout';
-
-import { Message, Children } from './chidren';
-import './chidren';
-
-interface GlobalState {
-  msg: Message;
-  now: Date;
-}
-
-const store = createStore<GlobalState>({
-  msg: [1, 2],
-  now: new Date(),
-});
-
-const styles = createCSSSheet(css`
-  h1 {
-    text-decoration: underline;
-  }
-`);
-
-@connectStore(store)
-@adoptedStyle(styles)
-@customElement('app-root')
-export class App extends GemElement {
-  @refobject childRef: RefObject<Children>;
-  @attribute appTitle: string;
-
-  constructor(title: string) {
-    super();
-    this.appTitle = title;
-    console.log('parent cons');
-  }
-
-  mounted = () => {
-    console.log('parent mounted');
-  };
-
-  updated = () => {
-    console.log('parent updated');
-  };
-
-  onSayHi = () => {
-    const [foo, bar] = store.msg;
-    updateStore(store, {
-      msg: [bar, foo],
-      now: new Date(),
-    });
-  };
-
-  loadHandle = () => {
-    const { element } = this.childRef;
-    if (!element) return;
-    const { firstName, lastName, disabled, count } = element;
-    console.log({ firstName, lastName, disabled, count });
-  };
-
-  render() {
-    console.log('parent render');
-    return html`
-      <style>
-        app-children:where(:--odd, [data-odd])::part(${Children.paragraph}) {
-          color: red;
-        }
-      </style>
-      <h1>${this.appTitle}</h1>
-      <app-children
-        ref=${this.childRef.ref}
-        @load=${this.loadHandle}
-        @say-hi=${this.onSayHi}
-        .message=${store.msg}
-        first-name="hello"
-        last-name="world"
-        count=${1}
-        disabled
-      >
-        <p slot=${Children.light}>now: ${store.now}</p>
-      </app-children>
-    `;
-  }
-}
-
-document.addEventListener('say-hi', (e: CustomEvent) => {
-  console.log('`sayhi` target', e.composedPath()[0]);
-});
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root app-title="I'm Title" slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/dialog/index.ts

@@ -1,148 +0,0 @@
-import { GemElement, html, customElement, refobject, RefObject, render } from '../../';
-import { createModalClass } from '../../elements/modal-base';
-import { DialogBaseElement } from '../../elements/dialog-base';
-import '../../elements/link';
-
-import '../elements/layout';
-
-@customElement('app-confirm')
-class Confirm extends createModalClass({
-  content: html``,
-  confirmHandle: () => {
-    /** */
-  },
-}) {
-  label = 'confirm title';
-
-  confirm = () => {
-    Confirm.close();
-    Confirm.store.confirmHandle();
-  };
-
-  render() {
-    return html`
-      <style>
-        .root {
-          position: fixed;
-          z-index: 3;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: rgba(0, 0, 0, 0.5);
-        }
-        .body {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          width: 200px;
-          height: 100px;
-          background: white;
-        }
-      </style>
-      <div class="root" ?hidden=${!Confirm.isOpen}>
-        <div class="body">
-          <h2>${Confirm.store.content}</h2>
-          <button @click=${this.confirm}>close dialog</button>
-        </div>
-      </div>
-    `;
-  }
-}
-
-@customElement('app-dialog')
-class Dialog extends DialogBaseElement {
-  shouldClose = () => {
-    if (this.opened) {
-      Confirm.open({
-        content: html`Confirm?`,
-        confirmHandle: this.forceClose, // 不能使用 `close` 方法
-      });
-      return false;
-    } else {
-      return true;
-    }
-  };
-
-  render() {
-    return html`
-      <style>
-        :host {
-          display: none;
-        }
-        :host(:where(:--opened, [data-opened])) {
-          display: block;
-        }
-        .root {
-          position: fixed;
-          z-index: 2;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background: rgba(0, 0, 0, 0.5);
-          backdrop-filter: blur(5px);
-        }
-        .body {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          width: 300px;
-          height: 200px;
-          background: white;
-        }
-      </style>
-      <div class="root">
-        <div class="body">
-          <h2>Dialog Title</h2>
-          <slot></slot>
-          <button @click=${this.close}>x</button>
-        </div>
-      </div>
-    `;
-  }
-}
-
-@customElement('app-root')
-export class Root extends GemElement {
-  @refobject dialog: RefObject<Dialog>;
-
-  state = {
-    modal: false,
-  };
-
-  clickHandle = () => {
-    this.dialog.element?.open();
-  };
-
-  render() {
-    return html`
-      <style>
-        :host {
-          font-size: x-large;
-        }
-      </style>
-      <button ?inert=${this.state.modal} @click="${this.clickHandle}">open dialog</button>
-      <app-dialog
-        label="dialog title"
-        ref=${this.dialog.ref}
-        @open=${() => this.setState({ modal: true })}
-        @close=${() => this.setState({ modal: false })}
-      >
-        <div>dialog body</div>
-        <gem-link path="/hi" style="cursor: pointer; color: blue">replace route</gem-link>
-      </app-dialog>
-    `;
-  }
-}
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/effect/index.ts

@@ -1,45 +0,0 @@
-import { GemElement, html, customElement, RefObject, refobject, render } from '../../';
-
-import '../elements/layout';
-
-function effect([textareaElement, callback]: [HTMLTextAreaElement | undefined, (height: number) => void]) {
-  if (!textareaElement) return callback(0);
-  const ro = new ResizeObserver(([entry]: [any]) => {
-    callback(entry.contentRect.height);
-  });
-  ro.observe(textareaElement, {});
-  return () => ro.disconnect();
-}
-
-@customElement('app-root')
-export class App extends GemElement {
-  @refobject textAreaRef: RefObject<HTMLTextAreaElement>;
-  state = {
-    height: 0,
-    hidden: false,
-  };
-
-  #updateHeight = (height: number) => {
-    this.setState({ height });
-  };
-
-  render() {
-    return html`
-      <div><button @click=${() => this.setState({ hidden: !this.state.hidden })}>switch</button></div>
-      ${this.state.hidden ? null : html`<textarea ref=${this.textAreaRef.ref}></textarea>`}
-      <div>${this.state.height}</div>
-    `;
-  }
-  mounted() {
-    this.effect(effect, () => [this.textAreaRef.element, this.#updateHeight]);
-  }
-}
-
-render(
-  html`
-    <gem-examples-layout>
-      <app-root slot="main"></app-root>
-    </gem-examples-layout>
-  `,
-  document.body,
-);

package/src/examples/elements/env.ts

@@ -1,7 +0,0 @@
-type Manifest = typeof import('../index/manifest.json');
-
-export const MATADATA = process.env.METADATA as unknown as Record<string, Partial<Manifest>>;
-export const EXAMPLES = process.env.EXAMPLES as unknown as string[];
-export const EXAMPLE = process.env.EXAMPLE as string;
-export const FILES = process.env.FILES as unknown as string[];
-export const PATH = process.env.TAEGET === 'pages' && EXAMPLE !== 'index' ? EXAMPLE : '';

package/src/examples/elements/layout.ts

@@ -1,53 +0,0 @@
-import { GemElement, html } from '../../lib/element';
-import { customElement, slot } from '../../lib/decorators';
-import '../../elements/reflect';
-import '../../elements/title';
-
-import { MATADATA, EXAMPLE } from './env';
-import './nav';
-import './source';
-
-@customElement('gem-examples-layout')
-export class Layout extends GemElement {
-  @slot main: string;
-
-  render() {
-    return html`
-      <gem-title suffix=" - Gem Examples" hidden>${MATADATA[EXAMPLE].name || EXAMPLE}</gem-title>
-      <gem-reflect>
-        <style>
-          body {
-            margin: 0;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
-              sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-          }
-        </style>
-      </gem-reflect>
-      <style>
-        :host {
-          display: grid;
-          grid-template-areas: 'nav main' 'nav source';
-          grid-template-columns: 260px 1fr;
-          grid-template-rows: 1fr 400px;
-          height: 100vh;
-        }
-        ::slotted(*) {
-          overflow: auto;
-          padding: 2em;
-        }
-        @media (max-width: 480px) {
-          :host {
-            display: block;
-          }
-          gem-examples-nav,
-          gem-examples-source {
-            display: none;
-          }
-        }
-      </style>
-      <gem-examples-nav></gem-examples-nav>
-      <slot name=${this.main}></slot>
-      <gem-examples-source></gem-examples-source>
-    `;
-  }
-}

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();
-        }
-      });
-    });
-  }
-}