godown 3.1.0 → 3.3.0

package/src/components/link.ts

@@ -6,41 +6,104 @@ import Router from "./router.js";
 
 const protoName = "link";
 
+const linkTypes = {
+  push: "push",
+  replace: "replace",
+  normal: "normal",
+  auto: "auto",
+} as const;
+
+type LinkType = keyof typeof linkTypes;
+
 /**
- * {@linkcode Link} is used for link jumping.
+ * {@linkcode Link} is used for link jumping, works standalone or in {@linkcode Router}.
+ *
+ * Set `type` to `"normal"`,
+ * behave like a normal anchor.
  *
  * Set `type` to `"push" `or `"replace"`,
- * will invoke the history api and trigger the {@linkcode Router.updateAll}.
+ * update history state by `history.pushState` or `history.replaceState`,
+ * update all routers whether current pathname is registered or not.
+ *
+ * Set `type` to `"auto"`,
+ * only update the routers if the current pathname is registered,
+ * if not registered, behave like `"normal"`.
  *
+ * `replace` property will enforce `history.replaceState`.
+ *
+ * @fires navigate - Fires when the link is clicked.
  * @category navigation
  */
 @godown(protoName)
 class Link extends SuperAnchor {
   /**
-   * If "push", call `history.pushState`.
+   * If `"normal"`, behave like a normal anchor.
    *
-   * If "replace", call `history.replaceState`.
+   * If `"auto"` or `"push"`, call `history.pushState` if `replace` is false,
    *
-   * If "normal", behave like a normal anchor.
+   * If `"replace"`, call `history.replaceState`.
    */
   @property()
-  type: "push" | "replace" | "normal" = "normal";
+  type: LinkType = linkTypes.auto;
 
   /**
-   * Suppress the update of the {@linkcode Router}.
+   * If `true`, the {@linkcode Router} will not be updated.
    */
   @property({ type: Boolean })
   suppress = false;
 
+  /**
+   * Use `replaceState` instead of `pushState`.
+   */
+  @property({ type: Boolean })
+  replace = false;
+
+  /**
+   * Location state object.
+   */
+  state = {};
+
   protected _handleClick(e: MouseEvent): void {
-    if (this.type === "push" || this.type === "replace") {
+    const { state, type, href, pathname, suppress } = this;
+    this.dispatchCustomEvent("navigate", {
+      ...this.observedRecord,
+      pathname,
+      state,
+    });
+    if (href.startsWith("#") || type === linkTypes.normal) {
+      return;
+    }
+    this.handleState();
+    const routers = [...Router.routerInstances];
+    if (
+      // only runs when suppress is false
+      !suppress &&
+      (type !== linkTypes.auto ||
+        // in auto mode, only update the routers if the current pathname is registered
+        routers.some((i) => i.search(location.pathname)))
+    ) {
       e.preventDefault();
-      history[`${this.type}State`](null, "", this.href);
-      if (!this.suppress) {
-        Router.updateAll();
-      }
+      Router.routerInstances.forEach((i) => {
+        i.handlePopstate();
+      });
     }
   }
+
+  handleState: () => void = () => {
+    switch (this.type) {
+      case linkTypes.auto:
+      // biome-ignore lint: if replace is true, fallthrough to replace case
+      case linkTypes.push:
+        if (!this.replace) {
+          // type is auto or push and replace is false
+          history.pushState(this.state, "", this.href);
+          break;
+        }
+      case linkTypes.replace:
+        history.replaceState(this.state, "", this.href);
+        break;
+    }
+  };
 }
 
 export default Link;

package/src/components/range.ts

@@ -1,4 +1,4 @@
-import { attr, classList, godown, isNil, joinProperties, part, styles } from "@godown/element";
+import { attr, tokenList, godown, isNil, joinProperties, loop, part, styles, Ranger } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property, queryAll, state } from "lit/decorators.js";
 
@@ -164,15 +164,9 @@ class Range extends SuperInput {
   @state()
   lastFocus?: number;
 
+  protected _ranger: Ranger;
   private __focusStack: number[] = [];
 
-  /**
-   * Returns true when the second number is greater than the first number.
-   */
-  get reverse(): boolean {
-    return this.range ? this.value[0] > this.value[1] : false;
-  }
-
   /**
    * If value is array.
    */
@@ -201,48 +195,55 @@ class Range extends SuperInput {
     return rangeValue;
   }
 
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+    super.attributeChangedCallback(name, _old, value);
+    if (name === "max" || name === "min" || name === "step") {
+      this._ranger = new Ranger(this.min, this.max, this.step);
+    }
+  }
+
   protected render(): TemplateResult<1> {
     const rangeValue = this.padValue(2);
     const from = Math.min(...rangeValue);
     const to = Math.max(...rangeValue);
-    const gap = this.max - this.min;
+    const gap = this._ranger.diff;
 
     return html`
       <div
         part="root"
         ${attr(this.observedRecord)}
         @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}%`]),
-              )
-            : {}),
-        })}"
+        style="${joinProperties([
+          ["--from", `${((from - this.min) / gap) * 100}%`],
+          ["--to", `${((to - this.min) / gap) * 100}%`],
+          ...rangeValue.map(
+            (value, index) => [`--handle-${index}`, `${((value - this.min) / gap) * 100}%`] as [string, string],
+          ),
+        ])}"
       >
         <div part="track"></div>
-        ${this.range ? (this.value as number[]).map((_, index) => this._renderHandle(index)) : this._renderHandle(0)}
+        ${loop(this.rangeValue.length, (index) => this._renderHandle(index))}
       </div>
     `;
   }
 
   protected _renderHandle(index: number): TemplateResult<1> {
-    const { range } = this;
-    const end = !range || index === (this.value as number[]).length - 1;
+    const { rangeValue, disabled } = this;
+
+    // in single-handle mod or last handle.
+    const end = index === rangeValue.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="z-index:${this.__focusStack.indexOf(index) + 1};--handle:var(--${
-          /* In single-handle mod or end, it is max value */
-          !range && end ? "to" : `handle-${index}`
-        })"
+        class="${tokenList({ "last-focus": this.lastFocus === index })}"
+        @mousedown="${disabled ? null : this.createMouseDown(index)}"
+        @focus="${disabled ? null : () => this.focusHandle(index)}"
+        @blur="${disabled ? null : this.blurHandle}"
+        style="${joinProperties({
+          "z-index": this.__focusStack.indexOf(index) + 1,
+          "--handle": `var(--${end ? "to" : `handle-${index}`})`,
+        })}"
       ></i>
     `;
   }
@@ -271,37 +272,36 @@ class Range extends SuperInput {
   }
 
   protected createKeydownEvent(index: number) {
-    if (!this.range) {
+    const { rangeValue, step } = this;
+    if (rangeValue.length < 2) {
       index = 0;
     }
     return (e: KeyboardEvent): void => {
+      const old = rangeValue[index];
       if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
         e.preventDefault();
-        this.createSetValue(index)((old) => old - this.step);
+        this.createSetValue(index)(old - step);
       } else if (e.key === "ArrowRight" || e.key === "ArrowUp") {
         e.preventDefault();
-        this.createSetValue(index)((old) => old + this.step);
+        this.createSetValue(index)(old + step);
       }
     };
   }
 
-  createMouseDown(index: number) {
+  protected createMouseDown(index: number) {
     return (e: MouseEvent): void => {
       this.focusHandle(index);
       this.createMousedownListener(this.createSetValue(index))(e);
     };
   }
 
-  createSetValue(index: number) {
-    return (numberOrModifier: number | ((value: number) => number)): void => {
-      const number =
-        typeof numberOrModifier === "number"
-          ? this.normalizeValue(numberOrModifier)
-          : numberOrModifier(this.rangeValue[index]);
-      let newValue: any = number;
+  protected createSetValue(index: number) {
+    return (value: number): void => {
+      const normalizeValue = this._ranger.normalize(value);
+      let newValue: number | number[] = normalizeValue;
       if (this.range) {
-        newValue = [...this.rangeValue];
-        newValue[index] = number;
+        newValue = [...(this.value as number[])];
+        newValue[index] = normalizeValue;
       }
       this.value = newValue;
       this.dispatchEvent(new CustomEvent("range", { detail: this.value }));
@@ -311,23 +311,9 @@ class Range extends SuperInput {
   /**
    * Compute value from event.
    */
-  protected _computeValue(e: MouseEvent): number {
-    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.
-   */
-  normalizeValue(value: number): number {
-    if (value > this.max) {
-      value -= this.step;
-    } else if (value < this.min) {
-      value += this.step;
-    }
-    return value;
+  protected _computeValue({ clientX, clientY }: MouseEvent): number {
+    const { top, left, height, width } = this._root.getBoundingClientRect();
+    return this._ranger.present(this.vertical ? (clientY - top) / height : (clientX - left) / width);
   }
 
   protected _handleMousedownRoot(e: MouseEvent): void {
@@ -360,10 +346,10 @@ class Range extends SuperInput {
     };
   }
 
-  protected createMousemoveListener(callback: (arg0: number) => void) {
+  protected createMousemoveListener(callback: (newValue: number) => void) {
     return (e: MouseEvent): void => {
       const value = this._computeValue(e);
-      if (value > this.max || value < this.min) {
+      if (value !== this._ranger.restrict(value)) {
         return;
       }
       callback?.call(this, value);
@@ -371,7 +357,7 @@ class Range extends SuperInput {
   }
 
   protected _connectedInit(): void {
-    const gap = this.max - this.min;
+    const gap = this._ranger.diff;
     this.step ||= gap / 100;
     if (isNil(this.value)) {
       if (!isNil(this.default)) {

package/src/components/router.ts

@@ -21,6 +21,14 @@ interface RouteItem {
   component?: unknown;
 }
 
+const routerTypes = {
+  field: "field",
+  slotted: "slotted",
+  united: "united",
+} as const;
+
+type RouterType = keyof typeof routerTypes;
+
 const protoName = "router";
 
 /**
@@ -101,7 +109,7 @@ class Router extends GlobalStyle {
    * This property should not be changed after the rendering is complete.
    */
   @property()
-  type: "united" | "slotted" | "field" = "united";
+  type: RouterType = routerTypes.united;
 
   /**
    * Cache accessed records.
@@ -126,22 +134,23 @@ class Router extends GlobalStyle {
   }
 
   protected render(): unknown {
-    if (this.cache) {
-      const cached = this.__cacheRecord.get(this.pathname);
-      if (cached) {
-        Object.assign(this, cached);
-        return this.component;
-      }
+    let cached: RouteResult | undefined;
+    if (this.cache && (cached = this.__cacheRecord.get(this.pathname))) {
+      this.component = cached.component;
+      this.path = cached.path;
+      this.pathname = cached.pathname;
     }
-    switch (this.type) {
-      case "field":
-        this.component = this.fieldComponent();
-        break;
-      case "slotted":
-        this.component = this.slottedComponent();
-        break;
-      default:
-        this.component = this.fieldComponent() ?? this.slottedComponent();
+    if (!cached) {
+      switch (this.type) {
+        case routerTypes.field:
+          this.component = this.fieldComponent();
+          break;
+        case routerTypes.slotted:
+          this.component = this.slottedComponent();
+          break;
+        default:
+          this.component = this.fieldComponent() ?? this.slottedComponent();
+      }
     }
     return this.component ?? this.default;
   }
@@ -151,10 +160,9 @@ class Router extends GlobalStyle {
     Router.routerInstances.add(this);
 
     if (this.type !== "field") {
-      const mutationObserver = new MutationObserver(this.collectSlottedRoutes);
-      mutationObserver.observe(this, {
-        attributeFilter: ["slot"],
+      this.observers.add(this, MutationObserver, this.collectSlottedRoutes, {
         attributes: true,
+        attributeFilter: ["slot"],
         subtree: true,
       });
       this.collectSlottedRoutes();
@@ -179,8 +187,7 @@ class Router extends GlobalStyle {
     const shouldDispatch = changedProperties.has("pathname") || changedProperties.has("path");
     if (shouldDispatch) {
       const ur = this.useRouter();
-      const noRecord = !this.__cacheRecord.has(this.pathname);
-      if (noRecord) {
+      if (!this.__cacheRecord.has(this.pathname) && this.path) {
         this.__cacheRecord.set(this.pathname, ur);
       }
       this.dispatchEvent(new CustomEvent("change", { detail: ur }));
@@ -258,6 +265,10 @@ class Router extends GlobalStyle {
     });
   }
 
+  search(pathname: string): RouteTree {
+    return this.__fieldRouteTree.search(pathname) || this.__slottedRouteTree.search(pathname);
+  }
+
   handlePopstate: () => void = this.events.add(window, "popstate", () => {
     this.pathname = location.pathname;
   });

package/src/components/split.ts

@@ -1,4 +1,4 @@
-import { type HandlerEvent, attr, classList, godown, styles } from "@godown/element";
+import { type HandlerEvent, attr, tokenList, godown, styles, loop } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 
@@ -8,14 +8,6 @@ import SuperInput from "../core/super-input.js";
 const protoName = "split";
 const cssScope = scopePrefix(protoName);
 
-const loop = <T>(len: number, fn: (index?: number) => T) => {
-  const result: T[] = new Array(len);
-  for (let index = 0; index < len; index++) {
-    result[index] = fn(index);
-  }
-  return result;
-};
-
 /**
  * {@linkcode Split} renders multiple input boxes.
  *
@@ -106,7 +98,7 @@ class Split extends SuperInput {
           (index: number) => html`
             <span
               part="input-box"
-              class="${classList({ focus: this.current === index })}"
+              class="${tokenList({ focus: this.current === index })}"
               @click="${this.disabled ? null : () => this.focusAt(index)}"
             >
               ${this.currentValue[index]}

package/src/components/text.ts

@@ -1,4 +1,4 @@
-import { attr, classList, godown, htmlSlot, styles } from "@godown/element";
+import { attr, tokenList, godown, htmlSlot, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -80,7 +80,7 @@ class Text extends GlobalStyle {
       <span
         part="root"
         ${attr(this.observedRecord)}
-        class="${classList(this.underline)}"
+        class="${tokenList(this.underline)}"
       >
         ${htmlSlot()}
       </span>

package/src/components/time.ts

@@ -63,32 +63,17 @@ class Time extends GlobalStyle {
     `;
   }
 
-  protected firstUpdated(): void {
-    if (this.timeout) {
-      this.timeoutId = this.startTimeout();
-    }
-  }
-
   protected updated(changedProperties: PropertyValues): void {
-    if (changedProperties.has("timeout")) {
-      if (this.timeout) {
-        clearInterval(this.timeoutId);
-        this.timeoutId = this.startTimeout();
-      }
+    if (changedProperties.has("timeout") && this.timeout) {
+      this.timeouts.remove(this.timeoutId);
+      this.timeoutId = this.timeouts.add(
+        setInterval(() => {
+          this.dispatchEvent(new CustomEvent("time", { detail: this.time, composed: true }));
+          this.time = new Date(this.time.getTime() + (this.gap || this.timeout));
+        }, Math.abs(this.timeout)),
+      );
     }
   }
-
-  disconnectedCallback(): void {
-    clearInterval(this.timeoutId);
-    this.timeoutId = undefined;
-  }
-
-  startTimeout(): number {
-    return setInterval(() => {
-      this.dispatchEvent(new CustomEvent("time", { detail: this.time, composed: true }));
-      this.time = new Date(this.time.getTime() + (this.gap || this.timeout));
-    }, Math.abs(this.timeout));
-  }
 }
 
 export default Time;

package/src/components/typewriter.ts

@@ -125,13 +125,15 @@ class Typewriter extends GlobalStyle {
   write(at: number = this.index): void {
     this.contentInternal = this.content.slice(0, at + 1);
     const timeout = this.delay || random(this.max, this.min);
-    this.timeoutID = setTimeout(() => {
-      const nx = at + 1;
-      if (nx <= this.len) {
-        this.index = nx;
-        this.write();
-      }
-    }, timeout);
+    this.timeoutID = this.timeouts.add(
+      setTimeout(() => {
+        const nx = at + 1;
+        if (nx <= this.len) {
+          this.index = nx;
+          this.write();
+        }
+      }, timeout),
+    );
   }
 
   stop(): void {

package/src/core/global-style.ts

@@ -26,6 +26,7 @@ export const cssGlobalVars: {
   input: CSSResult;
   white: CSSResult;
   black: CSSResult;
+  color: CSSResult;
 } = {
   foreground: scopePrefix("foreground", 2),
   background: scopePrefix("background", 2),
@@ -36,6 +37,7 @@ export const cssGlobalVars: {
   input: scopePrefix("input", 2),
   white: scopePrefix("color-white", 2),
   black: scopePrefix("color-black", 2),
+  color: scopePrefix("color", 2),
 };
 
 type PresetsGradientsCSSResult = Record<keyof typeof presetsRGB, Gradients<CSSResult>>;
@@ -46,19 +48,21 @@ GlobalStyle.styles = [
       `${cssGlobalVars.white}:rgb(255 255 255);` +
       travel((key, gradient, rgb) => {
         cssGlobalVars._colors[key] ||= [] as any;
-        cssGlobalVars._colors[key].push(unsafeCSS(scopePrefix("color", 2) + "-" + key + "-" + gradient));
+        cssGlobalVars._colors[key].push(unsafeCSS(cssGlobalVars.color + "-" + key + "-" + gradient));
         const endKey = `-${key}-${gradient}`;
-        const colorKey = scopePrefix("color", 2) + endKey;
+        const colorKey = cssGlobalVars.color + endKey;
         return `${colorKey}:rgb(${rgb});`;
       }, presetsRGB).join("") +
-      joinProperties({
-        [cssGlobalVars.background + ""]: `var(${cssGlobalVars._colors.darkgray[9]})`,
-        [cssGlobalVars.foreground + ""]: `var(${cssGlobalVars._colors.lightgray[0]})`,
-        [cssGlobalVars.active + ""]: `var(${cssGlobalVars._colors.blue[6]})`,
-        [cssGlobalVars.passive + ""]: `var(${cssGlobalVars._colors.darkgray[6]})`,
-        [cssGlobalVars.clipBackground + ""]:
+      joinProperties([
+        [cssGlobalVars.background, `var(${cssGlobalVars._colors.darkgray[9]})`],
+        [cssGlobalVars.foreground, `var(${cssGlobalVars._colors.lightgray[0]})`],
+        [cssGlobalVars.active, `var(${cssGlobalVars._colors.blue[6]})`],
+        [cssGlobalVars.passive, `var(${cssGlobalVars._colors.darkgray[6]})`],
+        [
+          cssGlobalVars.clipBackground,
           `linear-gradient(to bottom, var(${cssGlobalVars.foreground}), var(${cssGlobalVars.passive}))`,
-      }) +
+        ],
+      ]) +
       "}",
   ),
   css`

package/src/core/super-anchor.ts

@@ -28,13 +28,17 @@ class SuperAnchor extends GlobalStyle {
    * A element href.
    */
   @property()
-  href: string = undefined;
+  href: string;
   /**
    * A element target.
    */
   @property()
   target: "_blank" | "_self" | "_parent" | "_top" = "_self";
 
+  get pathname(): string {
+    return new URL(this.href, location.href).pathname;
+  }
+
   protected render(): TemplateResult<1> {
     return html`
       <a