godown 3.0.0-canary.1 → 3.0.0-canary.11

package/src/components/router.ts

@@ -0,0 +1,281 @@
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { RouteTree } from "@godown/element/tools/route-tree.js";
+import { css, type PropertyValueMap, type TemplateResult } from "lit";
+import { property, state } from "lit/decorators.js";
+
+import { GlobalStyle } from "../core/global-style.js";
+
+const protoName = "router";
+
+/**
+ * {@linkcode Router} has basic routing control.
+ *
+ * To switch routes, use `router-link component`.
+ *
+ * It has two methods to collect routes.
+ *
+ * 1. From field `routes`, an array, each elements require "path" and "component".
+ * 2. From child elements, which have the slot attribute for matching routes.
+ *
+ * If only the method 1 is used, set `type` to `"field"`.
+ *
+ * If only the method 2 is used, set `type` to `"slotted"`.
+ *
+ * `type` defaults to `"united"`, which will try method 1, then method 2.
+ *
+ * If no routes are matched, the default value (no named slot) will be rendered.
+ *
+ * @slot - Display slot when there is no match.
+ * @slot * - Matching slot will be displayed.
+ * @category navigation
+ */
+@godown(protoName)
+@styles(css`:host{display:contents;}`)
+class Router extends GlobalStyle {
+  static routerInstances: Set<Router> = new Set<Router>();
+
+  private __fieldRouteTree: RouteTree = new RouteTree();
+  private __slottedRouteTree: RouteTree = new RouteTree();
+  private __cacheRecord = new Map<string, ReturnType<typeof this.useRouter>>();
+  private __routes: (
+    & Record<string, any>
+    & {
+      path: string;
+      component?: unknown;
+    }
+  )[];
+
+  /**
+   * Render result.
+   */
+  @state()
+  component: unknown | TemplateResult = null;
+
+  /**
+   * Dynamic parameters record.
+   */
+  @state()
+  params: Record<string, string> = {};
+
+  /**
+   * Value of matched path in routes.
+   */
+  @state()
+  path: string;
+
+  /**
+   * Current pathname (equals to location.pathname).
+   */
+  @property()
+  pathname = "";
+
+  /**
+   * Path prefix.
+   */
+  @property()
+  baseURL = "";
+
+  /**
+   * Rendered content when there is no match.
+   */
+  @state()
+  default: TemplateResult = htmlSlot();
+
+  /**
+   * The type of routing sources.
+   *
+   * If field, it won't collect the slot attribute of the child elements.
+   *
+   * This property should not be changed after the rendering is complete.
+   */
+  @property()
+  type: "united" | "slotted" | "field" = "united";
+
+  /**
+   * Cache accessed records.
+   *
+   * Emptied at each re-collection.
+   */
+  @property({ type: Boolean })
+  cache = false;
+
+  @state()
+  set routes(value) {
+    this.__routes = value;
+    this.collectFieldRoutes(value);
+  }
+
+  get routes(): (Record<string, any> & {
+    path: string;
+    component?: unknown;
+  })[] {
+    return this.__routes;
+  }
+
+  clear(): void {
+    this.__cacheRecord.clear();
+  }
+
+  protected render(): unknown {
+    this.params = {};
+    if (this.cache) {
+      const cached = this.__cacheRecord.get(this.pathname);
+      if (cached) {
+        Object.assign(this, cached);
+        return this.component;
+      }
+    }
+    switch (this.type) {
+      case "field":
+        this.component = this.fieldComponent();
+        break;
+      case "slotted":
+        this.component = this.slottedComponent();
+        break;
+      default:
+        this.component = this.fieldComponent() ?? this.slottedComponent();
+    }
+    return this.component ?? this.default ?? null;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    Router.routerInstances.add(this);
+    this.pathname ??= location.pathname;
+
+    if (this.type !== "field") {
+      const mutationObserver = new MutationObserver(this.collectSlottedRoutes);
+      mutationObserver.observe(this, {
+        attributeFilter: ["slot"],
+        attributes: true,
+        subtree: true,
+      });
+      this.collectSlottedRoutes();
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    Router.routerInstances.delete(this);
+  }
+
+  useRouter(): {
+    pathname: string;
+    params: Record<string, string>;
+    path: string;
+    component: unknown;
+  } {
+    return {
+      pathname: this.pathname,
+      params: this.params,
+      path: this.path,
+      component: this.component,
+    };
+  }
+
+  /**
+   * Callback function when the route changes.
+   */
+  routeChangeCallback: (params: {
+    pathname: string;
+    params: Record<string, string>;
+    path: string;
+    component: unknown | TemplateResult;
+  }, first: boolean) => void = null;
+
+  protected updated(changedProperties: PropertyValueMap<this>): void {
+    const shouldDispatch = changedProperties.has("pathname") || changedProperties.has("path");
+    if (shouldDispatch) {
+      const ur = this.useRouter();
+      const noRecord = !this.__cacheRecord.has(this.pathname);
+      if (noRecord) {
+        this.__cacheRecord.set(this.pathname, ur);
+      }
+      this.routeChangeCallback?.(ur, noRecord);
+      this.dispatchEvent(new CustomEvent("change", { detail: ur }));
+    }
+  }
+
+  /**
+   * Get component from {@linkcode routes} by query.
+   */
+  fieldComponent(query?: string): unknown {
+    query ||= this.useWhich(this.pathname);
+    this.path = query;
+
+    if (!query) {
+      return null;
+    }
+
+    this.params = this.parseParams(this.path, this.pathname);
+    const route = this.routes.find((r) => r.path === query);
+    if (!route) {
+      return null;
+    }
+    return route.component;
+  }
+
+  /**
+   * Get component from slotted elements by query.
+   */
+  slottedComponent(usedRouteTemplate?: string): TemplateResult<1> {
+    const slottedPaths = this._slottedNames;
+    usedRouteTemplate ||= this.__slottedRouteTree.useWhich(this.pathname);
+    this.path = usedRouteTemplate;
+
+    if (!usedRouteTemplate) {
+      return null;
+    }
+
+    this.path = slottedPaths.find((s) => s === usedRouteTemplate);
+    if (!this.path) {
+      return null;
+    }
+    this.params = this.parseParams(usedRouteTemplate, this.pathname);
+    return htmlSlot(this.path);
+  }
+
+  /**
+   * Reset the route tree, clear cache, collect routes from child elements.
+   */
+  collectSlottedRoutes(): void {
+    this.__slottedRouteTree = new RouteTree();
+    this.clear();
+    this._slottedNames.forEach(slotName => {
+      this.__slottedRouteTree.insert(slotName);
+    });
+  }
+
+  /**
+   * Reset the route tree, clear cache, collect routes from value.
+   */
+  collectFieldRoutes(value: typeof this.routes): void {
+    this.__fieldRouteTree = new RouteTree();
+    this.clear();
+    value.forEach(({ path }) => {
+      this.__fieldRouteTree.insert(path);
+    });
+  }
+
+  useWhich(path: string): string {
+    return this.__fieldRouteTree.useWhich(this.baseURL + path);
+  }
+
+  parseParams(routeTemplate: string, path: string): Record<string, string> {
+    return this.__fieldRouteTree.parseParams(path, routeTemplate);
+  }
+
+  static updateAll(): void {
+    this.routerInstances.forEach((i) => {
+      i.handlePopstate();
+    });
+  }
+
+  handlePopstate = this.events.add(window, "popstate", () => {
+    this.pathname = location.pathname;
+  }) as () => void;
+}
+
+export default Router;

package/src/components/select.ts

@@ -0,0 +1,281 @@
+import { HandlerEvent } from "@godown/element";
+import { godown } from "@godown/element/decorators/godown.js";
+import { part } from "@godown/element/decorators/part.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
+import { css, html, nothing, type TemplateResult } from "lit";
+import { property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import Input from "./input.js";
+
+function contain(a: string, b: string): boolean {
+  return a && b && a.toLowerCase().includes(b.toLowerCase());
+}
+
+function betweenAt(i: number, s: string, c: string) {
+  const start = s.slice(0, i).lastIndexOf(c) + 1 || 0;
+  const end = s.indexOf(c, i) || s.length;
+  return s.slice(start, end);
+}
+
+function updateChecked(element: HTMLElement | null, operation: 0 | 1) {
+  if (element) {
+    const name = "checked";
+    if (operation) {
+      element.setAttribute(name, "");
+    } else {
+      element.removeAttribute(name);
+    }
+  }
+}
+
+const protoName = "select";
+
+/**
+ * {@linkcode Select} is similar to `<select>`.
+ *
+ * Elements with the value attribute/property can be used as options.
+ *
+ * The checked attribute will be added to the selected element.
+ *
+ * Multi-selected state looks the same as single-selected.
+ *
+ * Input will filter the element.
+ *
+ * @slot - Options.
+ * @category input
+ */
+@godown(protoName)
+@styles(
+  css`
+    [part=input] {
+      text-overflow: ellipsis;
+    }
+
+    [part=content] {
+      position: absolute;
+      width: 100%;
+      visibility: hidden;
+    }
+
+    [direction=bottom] [part=content] {
+      top: 100%;
+    }
+
+    [direction=top] [part=content] {
+      bottom: 100%;
+    }
+
+    [visible] [part=content] {
+      visibility: visible
+    }
+  `,
+)
+class Select extends Input {
+  // @ts-ignore
+  value: string | string[];
+
+  /**
+   * Selected texts.
+   */
+  @property()
+  text: string;
+
+  @part("content")
+  protected _content: HTMLElement;
+
+  @property()
+  direction: "top" | "bottom" | undefined;
+
+  @property({ type: Boolean })
+  multiple: boolean;
+
+  @property({ type: Boolean })
+  visible: boolean;
+
+  @state()
+  protected autoDirection: "top" | "bottom" = "bottom";
+
+  protected lastChecked: HTMLElement;
+  protected defaultText: string;
+  protected defaultChecked: HTMLElement[];
+  private _store: { value: string; text: string; }[] = [];
+
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${
+      attr({
+        ...this.observedRecord,
+        direction: this.direction || this.autoDirection,
+      })
+    } class="input-field"> 
+    ${[
+      this._renderPrefix(),
+      html`<input
+        part="input"
+        dir="${ifDefined(this.dir)}"
+        id="${this.makeId}"
+        .value="${this.text}"
+        type="${this.type}"
+        placeholder="${this.placeholder || nothing}"
+        ?autofocus="${this.autofocus}"
+        autocapitalize="${this.autocapitalize || nothing}"
+        autocomplete="${this.autocomplete || nothing}"
+        ?disabled="${this.disabled}"
+        @focus="${this._handleFocus}"
+        @input="${this._handleInput}"
+      >`,
+      html`<label for="${this.makeId}" part="suffix">
+        <i part="space"></i>
+        <i part="icon">${svgCaretDown()}</i>
+        <i part="space"></i>
+      </label>`,
+      html`<label for="${this.makeId}" part="content">
+        ${htmlSlot()}
+      </label>`,
+    ]}
+    </div>`;
+  }
+
+  protected _handleFocus(): void {
+    if (!this.direction) {
+      const { top, bottom } = this.getBoundingClientRect();
+      if (window.innerHeight - bottom < this._content.clientHeight && top > this._content.clientHeight) {
+        this.autoDirection = "top";
+      } else {
+        this.autoDirection = "bottom";
+      }
+    }
+    this.visible = true;
+  }
+
+  protected firstUpdated(): void {
+    this.events.add(this._content, "click", (e: HandlerEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const { target } = e;
+      const value = this.optionValue(target);
+      if (value) {
+        const operation = this.select(value, target.textContent);
+        if (!this.multiple) {
+          updateChecked(this.lastChecked, 0);
+        }
+        updateChecked(target, operation);
+        this.lastChecked = target;
+      }
+      this._input.focus();
+    });
+    this.events.add(document, "click", (e: HandlerEvent) => {
+      // e.preventDefault();
+      e.stopPropagation();
+      const composed1 = e.composedPath()[0] as HTMLElement;
+      if (composed1 && !this.shadowRoot.contains(composed1)) {
+        this.blur();
+      }
+    });
+  }
+
+  protected _connectedInit(): void {
+    if (!this.value) {
+      const checked = [...this.querySelectorAll<HTMLElement>("[checked]")];
+      const list = this.multiple
+        ? checked
+        : checked.length
+        ? [this.lastChecked = checked[0]]
+        : [];
+      list.forEach((element: HTMLElement) => {
+        const operation = this.select(this.optionValue(element), element.textContent);
+        updateChecked(element, operation);
+      });
+
+      this.default = this.value;
+      this.defaultText = this.text;
+      this.defaultChecked = checked;
+    }
+    if (!this.text) {
+      this.text = "";
+    }
+  }
+
+  reset(): void {
+    this.value = this.default;
+    this.text = this.defaultText;
+    this.querySelectorAll<HTMLElement>("[checked]").forEach(element => updateChecked(element, 0));
+    this.defaultChecked.forEach(element => updateChecked(element, 1));
+  }
+
+  select(value: string, text?: string): 0 | 1 {
+    text ||= value;
+    let operation: 0 | 1 = 0;
+    if (this.multiple) {
+      const i = this._store.findIndex(s => s.value === value);
+      if (i > -1) {
+        this._store.splice(i, 1);
+      } else {
+        this._store.push({ value, text });
+        operation = 1;
+      }
+      this.value = this._store.map(s => s.value);
+      this.text = this._store.map(s => s.text).join(", ");
+    } else {
+      if (this.value === value) {
+        this.value = "";
+        this.text = "";
+      } else {
+        this.value = value;
+        this.text = text;
+        operation = 1;
+      }
+    }
+    this.dispatchEvent(new CustomEvent("change", { detail: this.namevalue() }));
+    this.filter();
+    return operation;
+  }
+
+  filter(query?: string): void {
+    query = query?.trim();
+    [...this.children].forEach((element: HTMLElement) => {
+      this.filterCallback(
+        element,
+        !query
+          || contain(this.optionValue(element), query)
+          || contain(element.textContent, query),
+        query,
+      );
+    });
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  filterCallback(element: HTMLElement, match: boolean, query: string): void {
+    element.style.display = match ? "" : "none";
+  }
+
+  protected _handleInput(e: HandlerEvent<HTMLInputElement>): void {
+    e.stopPropagation();
+    if (this.compositing) {
+      return;
+    }
+    const s = this._input.value;
+    this.filter(this.multiple ? betweenAt(this._input.selectionStart, s, ",") : s);
+    this.dispatchEvent(new CustomEvent("input", { detail: this.namevalue() }));
+  }
+
+  focus(options?: FocusOptions): void {
+    this._input.focus(options);
+    this.visible = true;
+  }
+
+  blur(): void {
+    this._input.blur();
+    this.visible = false;
+    super.blur();
+  }
+
+  optionValue(option: HTMLElement): string {
+    return (option as any).value || option.getAttribute("value") || "";
+  }
+}
+
+export default Select;

package/src/components/skeleton.ts

@@ -0,0 +1,119 @@
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import iconPhoto from "@godown/f7-icon/icons/photo.js";
+import { css, html, type TemplateResult } from "lit";
+import { property, state } from "lit/decorators.js";
+
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+
+const protoName = "skeleton";
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Skeleton} renders a skeleton screen.
+ *
+ * @slot loading - The content if loading is true.
+ * @slot - The content if loading is false.
+ * @category feedback
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      ${cssScope}--from: var(${cssGlobalVars._colors.darkgray[9]});
+      ${cssScope}--to: var(${cssGlobalVars._colors.darkgray[7]});
+      ${cssScope}--deg: 95deg;
+      ${cssScope}--duration: 1.5s;
+      ${cssScope}--icon-size: 5em;
+      ${cssScope}--icon-margin: .25em;
+      color: var(${cssGlobalVars._colors.darkgray[5]});
+      background: var(${cssScope}--from);
+      min-height: 1.5em;
+      width: 100%;
+      flex-shrink: 0;
+      display: block;
+      overflow: hidden;
+    }
+
+    [part=root] {
+      height: 100%;
+      min-height: inherit;
+      text-align: center;
+      animation: var(${cssScope}--duration) ease-in-out 0s infinite none running;
+    }
+
+    svg {
+      --size:var(${cssScope}--icon-size);
+      font-size: var(--size);
+      margin: calc(var(--size) * 0.05);
+    }
+
+    [animation=position] {
+      background-image: linear-gradient(
+        var(${cssScope}--deg),
+        var(${cssScope}--from) 36%,
+        var(${cssScope}--to) 50%,
+        var(${cssScope}--from) 64%
+      );
+      background-color: transparent;
+      background-size: 200% 100%;
+      animation-name: po;
+    }
+
+    @keyframes po {
+      from {
+        background-position: 150% center;
+      }
+      to {
+        background-position: -50% center;
+      }
+    }
+
+    [animation=opacity] {
+      animation-name: op;
+      animation-direction: alternate;
+    }
+
+    @keyframes op {
+      50% {
+        opacity: 0.25;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+  `,
+)
+class Skeleton extends GlobalStyle {
+  /**
+   * If "image", render a image placeholder.
+   */
+  @property()
+  type: "text" | "image";
+
+  /**
+   * Animation type.
+   * opacity animation only effect on slotted element and image icon.
+   */
+  @property()
+  animation: "position" | "opacity" = "position";
+
+  /**
+   * If false, render slot only.
+   */
+  @state()
+  loading = true;
+
+  protected render(): TemplateResult<1> {
+    if (!this.loading) {
+      return htmlSlot();
+    }
+    return html`<div part="root" ${attr(this.observedRecord)}>
+    ${this.type === "image" ? iconPhoto() : ""}
+    ${htmlSlot("loading")}</div>`;
+  }
+}
+
+export default Skeleton;