godown 3.0.0-canary.13 → 3.0.0-canary.15

package/src/components/divider.ts

@@ -15,31 +15,31 @@ const protoName = "divider";
 @godown(protoName)
 @styles(
   css`
-  :host {
-    width: 100%;
-    height: .05em;
-    margin: auto;
-    display: block;
-    background: currentColor;
-  }
-
-  :host([vertical]) {
-    width: .05em;
-    height: max(1em, 100%);
-  }
-
-  :host([contents]) [part=root] {
-    width: 100%;
-    height: .05em;
-    margin: auto;
-    display: block;
-    background: currentColor;
-  }
-
-  [part=root] { 
-    display: contents;
-  }
-`,
+    :host {
+      width: 100%;
+      height: .05em;
+      margin: auto;
+      display: block;
+      background: currentColor;
+    }
+
+    :host([vertical]) {
+      width: .05em;
+      height: max(1em, 100%);
+    }
+
+    :host([contents]) [part=root] {
+      width: 100%;
+      height: .05em;
+      margin: auto;
+      display: block;
+      background: currentColor;
+    }
+
+    [part=root] { 
+      display: contents;
+    }
+  `,
 )
 class Divider extends GlobalStyle {
   /**

package/src/components/dragbox.ts

@@ -2,7 +2,7 @@ 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 { EventListenerFunc } from "@godown/element/tools/events.js";
+import type { EventListenerFunc } from "@godown/element/tools/events.js";
 import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -67,7 +67,8 @@ class Dragbox extends GlobalStyle {
       part="root"
       ${attr(this.observedRecord)}
       @mousedown="${this._handleDragStart}"
-      @mouseup="${this._handleDragEnd}">
+      @mouseup="${this._handleDragEnd}"
+    >
       ${htmlSlot()}
     </div>`;
   }

package/src/components/flex.ts

@@ -18,7 +18,8 @@ const protoName = "flex";
  * @category layout
  */
 @godown(protoName)
-@styles(css`
+@styles(
+  css`
     :host,
     :host([contents]) [part=root] {
       display: flex;
@@ -27,7 +28,8 @@ const protoName = "flex";
     [part=root] {
       display: contents;
     }
-`)
+  `,
+)
 class Flex extends GlobalStyle {
   /**
    * CSS property `flex-flow` (`flex-direction flex-wrap`).

package/src/components/grid.ts

@@ -19,7 +19,8 @@ const protoName = "grid";
  * @category layout
  */
 @godown(protoName)
-@styles(css`
+@styles(
+  css`
     :host,
     :host([contents]) [part=root] {
       display: grid;
@@ -28,7 +29,8 @@ const protoName = "grid";
     [part=root] {
       display: contents;
     }
-`)
+  `,
+)
 class Grid extends GlobalStyle {
   /**
    * CSS property `gap`.
@@ -66,7 +68,7 @@ class Grid extends GlobalStyle {
 
   protected render(): TemplateResult<1> {
     return html`<div part="root" ${attr(this.observedRecord)}>
-    ${[
+      ${[
       htmlSlot(),
       htmlStyle(
         joinRules({

package/src/components/input.ts

@@ -45,20 +45,20 @@ class Input extends SuperInput {
 
   protected render(): TemplateResult<1> {
     return html`<div part="root" ${attr(this.observedRecord)} 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}"
-      >`,
+          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>`;

package/src/components/layout.ts

@@ -71,17 +71,9 @@ class NavLayout extends GlobalStyle {
 
   protected render(): TemplateResult<1> {
     return html`<div part="root" ${attr(this.observedRecord)}>
-    ${
-      !this.noHeader
-        ? html`<header part="header">${htmlSlot("header")}</header>`
-        : ""
-    }
-    <main part="main">${htmlSlot()}</main>
-    ${
-      !this.noFooter
-        ? html`<footer part="footer">${htmlSlot("footer")}</footer>`
-        : ""
-    }
+      ${!this.noHeader ? html`<header part="header">${htmlSlot("header")}</header>` : ""}
+      <main part="main">${htmlSlot()}</main>
+      ${!this.noFooter ? html`<footer part="footer">${htmlSlot("footer")}</footer>` : ""}
     </div>`;
   }
 }

package/src/components/progress.ts

@@ -15,52 +15,54 @@ const protoName = "progress";
  * @category feedback
  */
 @godown(protoName)
-@styles(css`
-  :host {
-    width: 100%;
-    height: 0.5em;
-    border-radius: 0.25em;
-    background: var(${cssGlobalVars.passive});
-    color: var(${cssGlobalVars.active});
-  }
-
-  :host,
-  [part=root] {
-    display: block;
-  }
+@styles(
+  css`
+    :host {
+      width: 100%;
+      height: 0.5em;
+      border-radius: 0.25em;
+      background: var(${cssGlobalVars.passive});
+      color: var(${cssGlobalVars.active});
+    }
 
-  [part=root] {
-    height: inherit;
-    z-index: 1;
-    position: relative;
-    border-radius: inherit;
-  }
+    :host,
+    [part=root] {
+      display: block;
+    }
 
-  [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;
-  }
+    [part=root] {
+      height: inherit;
+      z-index: 1;
+      position: relative;
+      border-radius: inherit;
+    }
 
-  @keyframes progress {
-    from {
+    [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;
     }
-    to {
-      left: 80%;
+
+    @keyframes progress {
+      from {
+        left: 0;
+      }
+      to {
+        left: 80%;
+      }
     }
-  }
 
-  .static [part=value] {
-    animation: none;
-  }
-`)
+    .static [part=value] {
+      animation: none;
+    }
+  `,
+)
 class Progress extends GlobalStyle {
   @property({ type: Number })
   max = 1;

package/src/components/range.ts

@@ -45,8 +45,7 @@ const cssScope = scopePrefix(protoName);
     }
 
     :host(:not([disabled])) .last-focus {
-      z-index: 1;
-      ${cssScope}--handle-scale:1.05;
+      ${cssScope}--handle-scale: 1.05;
       background: var(${cssScope}--handle-active);
     }
 
@@ -166,6 +165,8 @@ class Range extends SuperInput {
   @state()
   lastFocus?: number;
 
+  protected _focusStack: number[] = [];
+
   /**
    * Returns true when the second number is greater than the first number.
    */
@@ -217,19 +218,14 @@ class Range extends SuperInput {
         "--to": `${((to - this.min) / gap) * 100}%`,
         ...(this.range
           ? Object.fromEntries(
-            rangeValue.map((value, index) => [
-              `--handle-${index}`,
-              `${((value - this.min) / gap) * 100}%`,
-            ]),
+            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 part="track"></div>
+      ${this.range ? (this.value as number[]).map((_, index) => this.renderHandle(index)) : this.renderHandle(0)}
     </div>`;
   }
 
@@ -243,9 +239,9 @@ class Range extends SuperInput {
       @mousedown="${this.disabled ? null : this.createMouseDown(index)}"
       @focus="${this.disabled ? null : () => this.focusHandle(index)}"
       @blur="${this.disabled ? null : this.blurHandle}"
-      style="--handle:var(--${
+      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}`})"
+      (!range && end) ? "to" : `handle-${index}`})"
       ></i>
       `;
   }
@@ -254,6 +250,11 @@ class Range extends SuperInput {
 
   focusHandle(index: number): void {
     this.lastFocus = index;
+    const indexOfFocusStack = this._focusStack.indexOf(index);
+    if (indexOfFocusStack !== -1) {
+      this._focusStack.splice(indexOfFocusStack, 1);
+    }
+    this._focusStack.push(index);
     const handleItem = this._handles.item(index);
     handleItem?.focus();
     if (!this._keydownEvent) {

package/src/components/router.ts

@@ -69,13 +69,7 @@ class Router extends GlobalStyle {
    * Current pathname (equals to location.pathname).
    */
   @property()
-  pathname = "";
-
-  /**
-   * Path prefix.
-   */
-  @property()
-  baseURL = "";
+  pathname: string;
 
   /**
    * Rendered content when there is no match.
@@ -109,6 +103,7 @@ class Router extends GlobalStyle {
 
   get routes(): (Record<string, any> & {
     path: string;
+    render?: (ur: ReturnType<Router["useRouter"]>) => unknown;
     component?: unknown;
   })[] {
     return this.__routes;
@@ -202,7 +197,7 @@ class Router extends GlobalStyle {
    * Get component from {@linkcode routes} by query.
    */
   fieldComponent(query?: string): unknown {
-    query ||= this.__fieldRouteTree.search(RouteTree.split(this.pathname)).pattern || null;
+    query ||= this.__fieldRouteTree.search(this.pathname)?.pattern;
     this.path = query;
 
     if (!query) {
@@ -214,26 +209,31 @@ class Router extends GlobalStyle {
     if (!route) {
       return null;
     }
+
+    if ("render" in route) {
+      return route.render?.(this.useRouter()) || null;
+    }
+
     return route.component;
   }
 
   /**
    * Get component from slotted elements by query.
    */
-  slottedComponent(usedRouteTemplate?: string): TemplateResult<1> {
+  slottedComponent(query?: string): TemplateResult<1> {
     const slottedPaths = this._slottedNames;
-    usedRouteTemplate ||= this.__slottedRouteTree.search(RouteTree.split(this.pathname)).pattern || null;
-    this.path = usedRouteTemplate;
+    query ||= this.__slottedRouteTree.search(this.pathname)?.pattern;
+    this.path = query;
 
-    if (!usedRouteTemplate) {
+    if (!query) {
       return null;
     }
 
-    this.path = slottedPaths.find((s) => s === usedRouteTemplate);
+    this.path = slottedPaths.find((s) => s === query);
     if (!this.path) {
       return null;
     }
-    this.params = this.parseParams(usedRouteTemplate, this.pathname);
+    this.params = this.parseParams(query, this.pathname);
     return htmlSlot(this.path);
   }
 

package/src/components/select.ts

@@ -1,4 +1,4 @@
-import { HandlerEvent } from "@godown/element";
+import type { 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";
@@ -105,34 +105,36 @@ class Select extends Input {
   private _store: { value: string; text: string; }[] = [];
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${
+    return html`<div
+      part="root"
+      ${
       attr({
         ...this.observedRecord,
         direction: this.direction || this.autoDirection,
       })
-    } class="input-field"> 
-    ${[
+    }
+      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}"
-      >`,
+          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="icon">${svgCaretDown()}</i>
-      </label>`,
-      html`<label for="${this.makeId}" part="content">
-        ${htmlSlot()}
-      </label>`,
+          <i part="icon">${svgCaretDown()}</i>
+        </label>`,
+      html`<label for="${this.makeId}" part="content"> ${htmlSlot()} </label>`,
     ]}
     </div>`;
   }

package/src/components/skeleton.ts

@@ -111,8 +111,9 @@ class Skeleton extends GlobalStyle {
       return htmlSlot();
     }
     return html`<div part="root" ${attr(this.observedRecord)}>
-    ${this.type === "image" ? iconPhoto() : ""}
-    ${htmlSlot("loading")}</div>`;
+      ${this.type === "image" ? iconPhoto() : ""}
+      ${htmlSlot("loading")}
+    </div>`;
   }
 }
 

package/src/components/split.ts

@@ -99,12 +99,17 @@ class Split extends SuperInput {
 
   protected render(): TemplateResult<1> {
     return html`<div part="root" ${attr(this.observedRecord)}>
-    ${
-      loop(this.len, (index: number) =>
-        html`<span part="input-box"
-          @click="${this.disabled ? null : () => this.focusAt(index)}"
-          class="${classList({ focus: this.current === index }) || nothing}"
-        >${this.currentValue[index]}</span>`)
+      ${
+      loop(
+        this.len,
+        (index: number) =>
+          html`<span
+            part="input-box"
+            @click="${this.disabled ? null : () => this.focusAt(index)}"
+            class="${classList({ focus: this.current === index }) || nothing}"
+            >${this.currentValue[index]}</span
+          >`,
+      )
     }
       <input
         part="input"
@@ -115,8 +120,7 @@ class Split extends SuperInput {
       /* Ensure that input always has a value of length this.len */
       this.value.padStart(this.len, " ")}"
       >
-    </div>
-    `;
+    </div> `;
   }
 
   connectedCallback(): void {

package/src/components/switch.ts

@@ -40,7 +40,7 @@ const cssScope = scopePrefix(protoName);
     }
 
     [part=root],
-    span {
+    [part=handle] {
       transition: var(${cssScope}-transition);
     }
 
@@ -50,14 +50,14 @@ const cssScope = scopePrefix(protoName);
       height: inherit;
     }
     
-    input {
+    [part=input] {
       opacity: 0;
       width: 100%;
       height: 100%;
       appearance: none;
     }
 
-    span {
+    [part=handle] {
       height: 100%;
       display: inline-flex;
       align-items: center;
@@ -74,7 +74,7 @@ const cssScope = scopePrefix(protoName);
       background: var(${cssGlobalVars.passive});
     }
 
-    :host([checked]) span {
+    :host([checked]) [part=handle] {
       left: 50%;
     }
 
@@ -86,7 +86,7 @@ const cssScope = scopePrefix(protoName);
       background: var(${cssGlobalVars.passive});
     }
 
-    .round span{
+    .round [part=handle] {
       --size: var(${cssScope}-handle-size);
       border-radius: 100%;
       background: var(--godown--input-control);
@@ -135,10 +135,7 @@ class Switch extends SuperInput {
   protected _input: HTMLInputElement;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root"
-      ${attr(this.observedRecord)}
-      class="${this.round ? "round" : "rect"}"
-    >
+    return html`<div part="root" ${attr(this.observedRecord)} class="${this.round ? "round" : "rect"}">
       <input
         part="input"
         @change="${this._handleChange}"

package/src/components/text.ts

@@ -18,7 +18,8 @@ const cssScope = scopePrefix(protoName);
  * @category display
  */
 @godown(protoName)
-@styles(css`
+@styles(
+  css`
     :host {
       ${cssScope}--color: currentColor;
       ${cssScope}--color-hover: currentColor;
@@ -65,7 +66,8 @@ const cssScope = scopePrefix(protoName);
       background-clip: text;
       -webkit-background-clip: text;
     }
-`)
+  `,
+)
 class Text extends GlobalStyle {
   /**
    * Underline behavior.
@@ -80,11 +82,7 @@ class Text extends GlobalStyle {
   clip = false;
 
   protected render(): TemplateResult<1> {
-    return html`<span
-      part="root"
-      ${attr(this.observedRecord)}
-      class="${classList(this.underline)}"
-    >
+    return html`<span part="root" ${attr(this.observedRecord)} class="${classList(this.underline)}">
       ${htmlSlot()}
     </span>`;
   }

package/src/components/time.ts

@@ -2,7 +2,7 @@ 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 fmtime from "fmtime";
-import { css, html, type PropertyValues, TemplateResult } from "lit";
+import { css, html, type PropertyValues, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -50,9 +50,7 @@ class Time extends GlobalStyle {
   protected timeoutId: number;
 
   protected render(): TemplateResult<1> {
-    return html`<span part="root" ${attr(this.observedRecord)}>
-      ${fmtime(this.format, this.time, this.escape)}
-    </span>`;
+    return html`<span part="root" ${attr(this.observedRecord)}> ${fmtime(this.format, this.time, this.escape)} </span>`;
   }
 
   protected firstUpdated(): void {

package/src/components/tooltip.ts

@@ -126,23 +126,18 @@ class Tooltip extends SuperOpenable {
   protected render(): TemplateResult<1> {
     const align = Tooltip.aligns[this.align] || "inherit";
     const isFocusable = this.type === "focus";
-    return html`<div 
+    return html`<div
       part="root"
       ${attr(this.observedRecord)}
       tabindex="${isFocusable ? 0 : -1}"
-      @focus="${isFocusable ? () => this.open = true : null}"
-      @blur="${isFocusable ? () => this.open = false : null}"
-      @mouseenter="${isFocusable ? null : () => this.open = true}"
-      @mouseleave="${isFocusable ? null : () => this.open = false}"
-      style="justify-content:${align};align-items:${align}">
+      @focus="${isFocusable ? () => (this.open = true) : null}"
+      @blur="${isFocusable ? () => (this.open = false) : null}"
+      @mouseenter="${isFocusable ? null : () => (this.open = true)}"
+      @mouseleave="${isFocusable ? null : () => (this.open = false)}"
+      style="justify-content:${align};align-items:${align}"
+    >
       ${htmlSlot()}
-      <div part="tip">
-      ${
-      this.tip
-        ? html`<span class="passive">${this.tip}</span>`
-        : htmlSlot("tip")
-    }
-      </div>
+      <div part="tip">${this.tip ? html`<span class="passive">${this.tip}</span>` : htmlSlot("tip")}</div>
     </div>`;
   }
 }