godown 3.0.0-canary.0 → 3.0.0-canary.10

package/src/components/rotate.ts

@@ -0,0 +1,92 @@
+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 { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { css, html } from "lit";
+
+import { GlobalStyle, scopePrefix } from "../core/global-style.js";
+
+const protoName = "rotate";
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Rotate} Make child elements rotate.
+ *
+ * @category wrapper
+ */
+@godown(protoName)
+@styles(
+  css`
+  :host {
+    display: block;
+    width: -moz-fit-content;
+    width: fit-content;
+    transition: all 0.5s ease-in-out;
+    ${cssScope}--padding: .75em;
+    ${cssScope}--offset: .5em;
+  }
+
+  div {
+    position: relative;
+    transition: inherit;
+    transition-property: transform;
+  }
+
+  i {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    box-sizing: content-box;
+    padding: var(${cssScope}--offset);
+    margin: calc(-1 * var(${cssScope}--offset));
+  }
+
+  [part=slot]{
+    z-index: 2;
+  }
+`,
+)
+class Rotate extends GlobalStyle {
+  @part("root")
+  protected _root: HTMLElement;
+
+  protected render() {
+    return html`<div part="root">
+      <div part="slot" @mousemove="${this._handleRotate}">${htmlSlot()}</div>
+      <i @mouseleave="${this.reset}"></i>
+    </div>`;
+  }
+
+  reset() {
+    this._root.style.removeProperty("transform");
+    this._root.style.removeProperty("transition");
+  }
+
+  protected _handleRotate(e: MouseEvent) {
+    const { rotateX, rotateY } = this._computeOffset(e);
+    this._root.style.setProperty("transform", `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`);
+    this._root.style.setProperty("transition", "0s");
+  }
+
+  /**
+   * Compute offset.
+   * ```
+   * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`
+   * ```
+   * @param e Mouse move event.
+   * @returns rotateX, rotateY
+   */
+  _computeOffset(e: MouseEvent) {
+    const { left, top, width, height } = this._root.getBoundingClientRect();
+    const { clientX, clientY } = e;
+    const offsetX = clientX - left;
+    const offsetY = clientY - top;
+
+    const rotateX = -(offsetY - height / 2) / height / 2;
+    const rotateY = (offsetX - width / 2) / width / 2;
+    return { rotateX, rotateY };
+  }
+}
+
+export default Rotate;

package/src/components/router.ts

@@ -0,0 +1,273 @@
+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<C = unknown> extends GlobalStyle {
+  static routerInstances = 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?: C;
+    }
+  )[];
+
+  /**
+   * Render result.
+   */
+  @state()
+  component: C | 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() {
+    return this.__routes;
+  }
+
+  clear() {
+    this.__cacheRecord.clear();
+  }
+
+  protected render() {
+    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() {
+    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() {
+    super.disconnectedCallback();
+    Router.routerInstances.delete(this);
+  }
+
+  useRouter() {
+    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: C | TemplateResult;
+  }, first: boolean) => void = null;
+
+  protected updated(changedProperties: PropertyValueMap<this>) {
+    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) {
+    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) {
+    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() {
+    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) {
+    this.__fieldRouteTree = new RouteTree();
+    this.clear();
+    value.forEach(({ path }) => {
+      this.__fieldRouteTree.insert(path);
+    });
+  }
+
+  useWhich(path: string) {
+    return this.__fieldRouteTree.useWhich(this.baseURL + path);
+  }
+
+  parseParams(routeTemplate: string, path: string) {
+    return this.__fieldRouteTree.parseParams(path, routeTemplate);
+  }
+
+  static updateAll() {
+    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,268 @@
+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 { htmlSlot } from "@godown/element/directives/html-slot.js";
+import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
+import { css, html, nothing } 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%;
+    }
+
+    [direction=bottom] {
+      top: 100%;
+    }
+
+    [direction=top] {
+      bottom: 100%;
+    }
+  `,
+)
+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() {
+    return html`<div part="root" 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" 
+      style="visibility:${this.visible ? "visible" : "hidden"}"
+      direction="${this.direction || this.autoDirection}">${htmlSlot()}</label>`,
+    ]}
+    </div>`;
+  }
+
+  protected _handleFocus() {
+    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() {
+    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() {
+    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) {
+    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) {
+    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) {
+    element.style.display = match ? "" : "none";
+  }
+
+  protected _handleInput(e: HandlerEvent<HTMLInputElement>) {
+    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) {
+    this._input.focus(options);
+    this.visible = true;
+  }
+
+  blur() {
+    this._input.blur();
+    this.visible = false;
+    super.blur();
+  }
+
+  optionValue(option: HTMLElement): string {
+    return (option as any).value || option.getAttribute("value") || "";
+  }
+}
+
+export default Select;