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

package/src/components/input.ts

@@ -0,0 +1,72 @@
+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 { classList } from "@godown/element/directives/class-list.js";
+import { css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+
+import { cssGlobalVars } from "../core/global-style.js";
+import SuperInput from "../core/super-input.js";
+
+const protoName = "input";
+
+/**
+ * {@linkcode Input} renders a text input.
+ *
+ * @category input
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      width: var(${cssGlobalVars.input}-width);
+      height: var(${cssGlobalVars.input}-height);
+      color: var(${cssGlobalVars.foreground});
+      background: var(${cssGlobalVars.input}-background);
+      border-radius: var(${cssGlobalVars.input}-radius);
+      display: block;
+    }
+  `,
+)
+class Input extends SuperInput {
+  type: "text" | "search" | "tel" | "url" | "email" | "password" = "text";
+
+  value: string;
+
+  /**
+   * If outline, the outline is always present.
+   */
+  @property()
+  variant: "default" | "outline" = "default";
+
+  @part("input")
+  protected _input: HTMLInputElement;
+
+  protected render() {
+    return html`<div part="root" class="${classList("input-field", this.variant)}">
+    ${[
+      this._renderPrefix(),
+      html`<input
+        part="input"
+        type="${this.type}"
+        id="${this.makeId}"
+        .value="${this.value}"
+        placeholder="${this.placeholder || nothing}"
+        ?autofocus="${this.autofocus}"
+        autocapitalize="${this.autocapitalize || nothing}"
+        autocomplete="${this.autocomplete || nothing}"
+        ?disabled="${this.disabled}"
+        @input="${this._handleInput}"
+      >`,
+      this._renderSuffix(),
+    ]}
+    </div>`;
+  }
+
+  reset() {
+    this._input.value = this.default;
+    this.value = this.default;
+  }
+}
+
+export default Input;

package/src/components/layout.ts

@@ -0,0 +1,82 @@
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { classList } from "@godown/element/directives/class-list.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle } from "../core/global-style.js";
+
+const protoName = "layout";
+
+/**
+ * {@linkcode NavLayout} renders slot and optional top header, bottom footer.
+ *
+ * @slot - The main content of the layout.
+ * @slot header - The header of the layout.
+ * @slot footer - The footer of the layout.
+ * @category layout
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .sticky {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    [part=main] {
+      position: relative;
+      flex: 1;
+      width: 100%;
+    }
+
+    header,
+    main,
+    footer {
+      width: 100%;
+    }
+  `,
+)
+class NavLayout extends GlobalStyle {
+  /**
+   * If true, remove the header slot.
+   */
+  @property({ type: Boolean })
+  noHeader = false;
+
+  /**
+   * If true, remove the footer slot.
+   */
+  @property({ type: Boolean })
+  noFooter = false;
+
+  /**
+   * If true, header will sticky.
+   */
+  @property({ type: Boolean })
+  sticky = false;
+
+  protected render() {
+    return html`${
+      !this.noHeader
+        ? html`<header part="header" class="${classList({ sticky: this.sticky })}">${htmlSlot("header")}</header>`
+        : ""
+    }
+    <main part="main">${htmlSlot()}</main>
+    ${
+      !this.noFooter
+        ? html`<footer part="footer">${htmlSlot("footer")}</footer>`
+        : ""
+    }`;
+  }
+}
+
+export default NavLayout;

package/src/components/link.ts

@@ -0,0 +1,38 @@
+import { godown } from "@godown/element/decorators/godown.js";
+import { property } from "lit/decorators.js";
+
+import SuperAnchor from "../core/super-anchor.js";
+import Router from "./router.js";
+
+const protoName = "link";
+
+/**
+ * {@linkcode Link} is used for link jumping.
+ *
+ * Set `type` to `"push" `or `"replace"`,
+ * will invoke the history api and trigger the {@linkcode Router.updateAll}.
+ *
+ * @category navigation
+ */
+@godown(protoName)
+class Link extends SuperAnchor {
+  /**
+   * If "push", call `history.pushState`.
+   *
+   * If "replace", call `history.replaceState`.
+   *
+   * If "normal", behave like a normal anchor.
+   */
+  @property()
+  type: "push" | "replace" | "normal" = "normal";
+
+  protected _handleClick(e: MouseEvent) {
+    if (this.type === "push" || this.type === "replace") {
+      e.preventDefault();
+      (history[`${this.type}State`])(null, "", this.href);
+      Router.updateAll();
+    }
+  }
+}
+
+export default Link;

package/src/components/progress.ts

@@ -0,0 +1,95 @@
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { isNil } from "@godown/element/tools/lib.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+
+import { cssGlobalVars, GlobalStyle } from "../core/global-style.js";
+
+const protoName = "progress";
+
+/**
+ * {@linkcode Progress} similar to `<progress>`.
+ *
+ * @category feedback
+ */
+@godown(protoName)
+@styles(css`
+  :host {
+    width: 100%;
+    height: 0.5em;
+    display: inline-block;
+    border-radius: 0.25em;
+    background: var(${cssGlobalVars.passive});
+    color: var(${cssGlobalVars.active});
+  }
+
+  [part=root] {
+    height: inherit;
+    z-index: 1;
+    position: relative;
+    border-radius: inherit;
+  }
+
+  [part=value] {
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: inherit;
+    transition: all 0.3s;
+    animation: progress 1.8s ease-in-out infinite alternate;
+    background: currentColor;
+  }
+
+  @keyframes progress {
+    from {
+      left: 0;
+    }
+    to {
+      left: 80%;
+    }
+  }
+
+  .static [part=value] {
+    animation: none;
+  }
+`)
+class Progress extends GlobalStyle {
+  @property({ type: Number })
+  max = 1;
+
+  @property({ type: Number })
+  min = 0;
+
+  @property({ type: Number })
+  value: number;
+
+  protected render() {
+    let width = 20;
+    let className: string;
+    if (!isNil(this.value)) {
+      width = this.parsePercent(this.value);
+      className = "static";
+    }
+    return html`<div part="root" class="${className}">
+      <i part="value" style="width:${width}%;"></i>
+    </div>`;
+  }
+
+  /**
+   * Convert s to a percentage without a percent sign.
+   *
+   * @param s String or number to convert.
+   * @returns Percentage without a percent sign.
+   */
+  parsePercent(s: string | number = "0"): number {
+    if (String(s).includes("%")) {
+      return parseFloat(String(s));
+    }
+    return (parseFloat(String(s)) / (this.max - this.min)) * 100;
+  }
+}
+
+export default Progress;

package/src/components/range.ts

@@ -0,0 +1,404 @@
+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 { classList } from "@godown/element/directives/class-list.js";
+import { joinProperties } from "@godown/element/tools/css.js";
+import { isNil } from "@godown/element/tools/lib.js";
+import { css, html } from "lit";
+import { property, queryAll, state } from "lit/decorators.js";
+
+import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
+import SuperInput from "../core/super-input.js";
+
+const protoName = "range";
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Range} is similar to `<input type="range">`.
+ *
+ * Value accepts number, or array.
+ *
+ * Number has 1 handle, the array has the number of its elements and the minimum is 2.
+ *
+ * @category input
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      ${cssScope}-handle-active: var(${cssGlobalVars._colors.blue[7]});
+      ${cssScope}-track-width: .5em;
+      background: var(${cssGlobalVars.input}-background);
+      width: var(${cssGlobalVars.input}-width);
+      display: inline-block;
+      margin: 0.25em 0;
+    }
+
+    :host([vertical]) {
+      height: var(${cssGlobalVars.input}-width);
+      width: fit-content;
+    }
+
+    :host(:not([disabled])) .last-focus {
+      z-index: 1;
+      ${cssScope}-handle-scale:1.05;
+      background: var(${cssScope}-handle-active);
+    }
+
+    [part=root] {
+      min-height:inherit;
+      position: relative;
+      border-radius: inherit;
+      width: 100%;
+      --from: 0%;
+      --to: 50%;
+      height: var(${cssScope}-track-width);
+    }
+
+    [part=track] {
+      height: 100%;
+      min-height:inherit;
+      display: flex;
+      position: absolute;
+      pointer-events: none;
+      border-radius: inherit;
+      justify-content: space-between;
+      left: min(var(--from), var(--to));
+      background: var(${cssGlobalVars.active});
+      width: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));
+    }
+
+    [part=handle] {
+      width: 1em;
+      height: 1em;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      user-select: none;
+      position: absolute;
+      border: 0.1em solid;
+      border-radius: 50%;
+      transform-origin: 0% 25%;
+      transform: scale(var(${cssScope}-handle-scale, 1)) translate(-50%, -25%);
+      background: var(${cssGlobalVars.active});
+      border-color: var(${cssGlobalVars.input}-control);
+    }
+  `,
+  css`
+    .vertical {
+      height: 100%;
+      width: var(${cssScope}-track-width);
+    }
+
+    .vertical i {
+      transform: translate(-25%, -50%);
+    }
+
+    .vertical [part=track] {
+      width: 100%;
+      height: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));
+      top: min(var(--from), var(--to));
+      left: 0;
+    }
+  `,
+  css`
+    [part=handle] {
+      left: var(--handle);
+      top: 0;
+    }
+
+    .vertical [part=handle] {
+      top: var(--handle);
+      left: 0;
+    }
+  `,
+)
+class Range extends SuperInput {
+  /**
+   * Minimum value.
+   */
+  @property({ type: Number })
+  min = 0;
+
+  /**
+   * Maximum value.
+   */
+  @property({ type: Number })
+  max = 100;
+
+  /**
+   * Sliding step length.
+   */
+  @property({ type: Number })
+  step: number;
+
+  /**
+   * Display vertically.
+   */
+  @property({ type: Boolean, reflect: true })
+  vertical: boolean;
+
+  /**
+   * Value, or each of values, will render a handle.
+   *
+   * Accepts number or array of numbers.
+   */
+  @property({ type: Array })
+  value: number | number[];
+
+  /**
+   * The default of `{@linkcode this.value}`.
+   */
+  @property({ type: Array })
+  default: typeof this.value;
+
+  @part("root")
+  protected _root: HTMLElement;
+
+  @queryAll("[part=handle]")
+  protected _handles: NodeListOf<HTMLElement>;
+
+  @state()
+  lastFocus?: number;
+
+  /**
+   * Returns true when the second number is greater than the first number.
+   */
+  get reverse() {
+    return this.range ? this.value[0] > this.value[1] : false;
+  }
+
+  /**
+   * If value is array.
+   */
+  get range(): boolean {
+    return Array.isArray(this.value);
+  }
+
+  /**
+   * Return values in the form of an array.
+   */
+  get rangeValue(): number[] {
+    return (this.range ? this.value : [this.value]) as number[];
+  }
+
+  /**
+   * @param len Minimum result length.
+   * @param value Fill value.
+   * @returns Array with length of len.
+   */
+  padValue(len: number, value = 0): number[] {
+    const { rangeValue } = this;
+    const miss = len - rangeValue.length;
+    if (miss > 0) {
+      return new Array(miss).fill(value).concat(rangeValue);
+    }
+    return rangeValue;
+  }
+
+  protected render() {
+    const rangeValue = this.padValue(2);
+    const from = Math.min(...rangeValue);
+    const to = Math.max(...rangeValue);
+    const gap = this.max - this.min;
+
+    return html`<div
+      part="root"
+      class="${
+      classList({
+        vertical: this.vertical,
+        range: this.range,
+        reverse: this.reverse,
+      })
+    }"
+      @mousedown="${this.disabled ? null : this._handleMousedownRoot}"
+      style="${
+      joinProperties({
+        "--from": `${((from - this.min) / gap) * 100}%`,
+        "--to": `${((to - this.min) / gap) * 100}%`,
+        ...(this.range
+          ? Object.fromEntries(
+            rangeValue.map((value, index) => [
+              `--handle-${index}`,
+              `${((value - this.min) / gap) * 100}%`,
+            ]),
+          )
+          : {}),
+      })
+    }"><div part="track"></div>
+      ${
+      this.range
+        ? (this.value as number[]).map((_, index) => this.renderHandle(index))
+        : this.renderHandle(0)
+    }
+    </div>`;
+  }
+
+  protected renderHandle(index: number) {
+    const { range } = this;
+    const end = !range || index === (this.value as number[]).length - 1;
+    return html`<i
+      tabindex="0"
+      part="handle"
+      class="${classList({ "last-focus": this.lastFocus === index })}"
+      @mousedown="${this.disabled ? null : this.createMouseDown(index)}"
+      @focus="${this.disabled ? null : () => this.focusHandle(index)}"
+      @blur="${this.disabled ? null : this.blurHandle}"
+      style="--handle:var(--${
+      /* In single-handle mod or end, it is max value */
+      (!range && end) ? `to` : `handle-${index}`})"
+      ></i>
+      `;
+  }
+
+  private _keydownEvent: EventListenerOrEventListenerObject;
+
+  focusHandle(index: number) {
+    this.lastFocus = index;
+    const handleItem = this._handles.item(index);
+    handleItem?.focus();
+    if (!this._keydownEvent) {
+      this._keydownEvent = this.events.add(document, "keydown", this.createKeydownEvent(index));
+    }
+  }
+
+  blurHandle() {
+    this.lastFocus = undefined;
+    this._keydownEvent = this.events.remove(document, "keydown", this._keydownEvent);
+  }
+
+  protected createKeydownEvent(index: number) {
+    if (!this.range) {
+      index = 0;
+    }
+    return (e: KeyboardEvent) => {
+      if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+        e.preventDefault();
+        this.createSetValue(index)(old => old - this.step);
+      } else if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+        e.preventDefault();
+        this.createSetValue(index)(old => old + this.step);
+      }
+    };
+  }
+
+  createMouseDown(index: number) {
+    return (e: MouseEvent) => {
+      this.focusHandle(index);
+      this.createMousedownListener(this.createSetValue(index))(e);
+    };
+  }
+
+  protected _handleMousedownEnd(e: MouseEvent) {
+    this.lastFocus = 0;
+    this.createMousedownListener(this.setEnd)(e);
+    this.focusHandle(0);
+  }
+
+  createSetValue(index: number) {
+    return (numberOrModifier: number | ((value: number) => number)) => {
+      const number = typeof numberOrModifier === "number"
+        ? this.normalizeValue(numberOrModifier)
+        : numberOrModifier(this.rangeValue[index]);
+      let newValue: any = number;
+      if (this.range) {
+        newValue = [...this.rangeValue];
+        newValue[index] = number;
+      }
+      this.value = newValue;
+    };
+  }
+
+  setEnd(value: number) {
+    this.createSetValue((this.value as any)?.length - 1 || 0)(value);
+  }
+
+  /**
+   * Compute value from event.
+   */
+  protected _computeValue(e: MouseEvent) {
+    const rect = this._root.getBoundingClientRect();
+    const div = this.vertical ? (e.clientY - rect.top) / rect.height : (e.clientX - rect.left) / rect.width;
+    const value = Math.round((div * (this.max - this.min)) / this.step) * this.step;
+    return this.normalizeValue(value);
+  }
+
+  /**
+   * Ensure that the values do not exceed the range of max and min.
+   */
+  protected normalizeValue(value: number) {
+    if (value > this.max) { value -= this.step; }
+    else if (value < this.min) { value += this.step; }
+    return value;
+  }
+
+  protected _handleMousedownRoot(e: MouseEvent) {
+    const value = this._computeValue(e);
+    const index = this.range
+      ? this.rangeValue.reduce((acc, item, index) => {
+        const diff = Math.abs(value - item);
+        const prevDiff = Math.abs(value - this.rangeValue[acc]);
+        return diff < prevDiff ? index : acc;
+      }, 0)
+      : 0;
+
+    const set = this.createSetValue(index);
+    set(value);
+    this.createMousedownListener(set)(e);
+    this.focusHandle(index);
+  }
+
+  protected createMousedownListener(mouseMoveCallback: (arg0: number) => void) {
+    return (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const move = this.createMousemoveListener(mouseMoveCallback);
+      this.events.add(document, "mousemove", move);
+      const stop = () => {
+        this.events.remove(document, "mousemove", move);
+        this.events.remove(document, "mouseup", stop);
+      };
+      this.events.add(document, "mouseup", stop);
+    };
+  }
+
+  protected createMousemoveListener(callback: (arg0: number) => void) {
+    return (e: MouseEvent) => {
+      const value = this._computeValue(e);
+      if (value > this.max || value < this.min) {
+        return;
+      }
+      callback?.call(this, value);
+    };
+  }
+
+  protected _connectedInit() {
+    const gap = this.max - this.min;
+    this.step ||= gap / 100;
+    if (isNil(this.value)) {
+      if (!isNil(this.default)) {
+        this.value = this.default;
+      } else {
+        this.value = Math.round(gap / 2 / this.step) * this.step;
+      }
+    }
+    this.default ??= this.value;
+  }
+
+  reset() {
+    this.value = this.default;
+  }
+
+  sort() {
+    return this.value = this.toSorted();
+  }
+
+  toSorted() {
+    if (this.range) {
+      return [...this.value as number[]].sort((a, b) => a - b);
+    }
+    return this.value;
+  }
+}
+
+export default Range;