godown 3.0.0-canary.14 → 3.0.0-canary.15

package/src/components/avatar.ts

@@ -23,7 +23,7 @@ const cssScope = scopePrefix(protoName);
 @godown(protoName)
 @styles(
   css`
-    :host{
+    :host {
       ${cssScope}--size: 2em;
       width: var(${cssScope}--size);
       height: var(${cssScope}--size);
@@ -82,14 +82,12 @@ class Avatar extends GlobalStyle {
   round = false;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(omit(this.observedRecord, "src"))}>
-      ${this._renderAvatar()}
-    </div>`;
+    return html`<div part="root" ${attr(omit(this.observedRecord, "src"))}>${this._renderAvatar()}</div>`;
   }
 
   private _renderAvatar() {
     if (this.src) {
-      return html`<img part="image" src="${this.src}" @error=${this._handleError} alt="${this.name}">`;
+      return html`<img part="image" src="${this.src}" @error=${this._handleError} alt="${this.name}" />`;
     }
     if (this.name) {
       return html`<span part="name">${this.format()}</span>`;

package/src/components/breath.ts

@@ -112,10 +112,7 @@ class Breath extends GlobalStyle {
   protected render(): TemplateResult<1> {
     const texts = this.getTexts();
     return html`<div part="root" ${attr(this.observedRecord)}>
-    ${[
-      texts.map(this.renderText),
-      htmlStyle(this.computeStyle(texts.length)),
-    ]}
+    ${[texts.map(this.renderText), htmlStyle(this._computeStyle(texts.length))]}
     </div>`;
   }
 
@@ -130,33 +127,31 @@ class Breath extends GlobalStyle {
     return Array.isArray(this.text) ? this.text : (this.text || this.textContent).split(/\s+/).filter((x) => x);
   }
 
-  protected computeStyle(len: number): string {
+  protected _computeStyle(len: number): string {
     const gap = 100 / 2 / len;
     const duration = this.parseDuration() || len * 2 + 2;
-
+    let style1 = "";
+    for (let number = 1; number <= len; number++) {
+      const delay = -duration / len * (len - number + 1);
+      const defaultNumber = ((number - 1) % 3) + 1;
+      style1 +=
+        `.rel:nth-child(${number}) .colorful{animation-delay:${delay}s;background:var(${cssScope}--${number},var(${cssScope}--${defaultNumber}));}`;
+    }
     return (
-      `.colorful{animation-duration:${duration}s;}`
-      + `@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${gap * 2}%{opacity:1;}}`
-      + (() => {
-        let style1 = "";
-        for (let number = 1; number <= len; number++) {
-          const delay = -duration / len * (len - number + 1);
-          const defaultNumber = ((number - 1) % 3) + 1;
-          style1 +=
-            `.rel:nth-child(${number}) .colorful{animation-delay:${delay}s;background:var(${cssScope}--${number},var(${cssScope}--${defaultNumber}));}`;
-        }
-        return style1;
-      })()
+      `.colorful{animation-duration:${duration}s;}@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${
+        gap * 2
+      }%{opacity:1;}}${style1}`
     );
   }
 
-  protected parseDuration(): number {
+  protected parseDuration(): number | undefined {
     const { duration } = this;
     if (duration) {
       if (duration.endsWith("s")) {
-        return parseFloat(duration.slice(0, -1));
-      } else if (duration.endsWith("ms")) {
-        return parseFloat(duration.slice(0, -2)) / 1000;
+        return Number.parseFloat(duration.slice(0, -1));
+      }
+      if (duration.endsWith("ms")) {
+        return Number.parseFloat(duration.slice(0, -2)) / 1000;
       }
     }
   }

package/src/components/button.ts

@@ -5,7 +5,7 @@ import { attr } from "@godown/element/directives/attr.js";
 import { htmlSlot } from "@godown/element/directives/html-slot.js";
 import { htmlStyle } from "@godown/element/directives/html-style.js";
 import { constructCSSObject, toVar } from "@godown/element/tools/css.js";
-import { css, html, TemplateResult } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -76,7 +76,7 @@ const colors: Record<Colors, string> = constructCSSObject(
       cssGlobalVars._colors.teal[4], // gradients
     ],
   },
-  () => `:host`,
+  () => ":host",
   (prop) => toVar(prop),
 );
 

package/src/components/card.ts

@@ -71,11 +71,7 @@ class Card extends GlobalStyle {
 
   protected render(): TemplateResult<1> {
     return html`<div part="root" ${attr(this.observedRecord)}>
-    ${[
-      this.header ? htmlSlot("header") : "",
-      htmlSlot(),
-      this.footer ? htmlSlot("footer") : "",
-    ]}
+      ${[this.header ? htmlSlot("header") : "", htmlSlot(), this.footer ? htmlSlot("footer") : ""]}
     </div>`;
   }
 }

package/src/components/carousel.ts

@@ -103,15 +103,9 @@ class Carousel extends GlobalStyle {
 
   protected render(): TemplateResult<1> {
     return html`<div part="root" ${attr(this.observedRecord)}>
-      <i part="prev" @click="${this.prev}">
-        ${iconChevronLeft()}
-      </i>
-      <div part="move-root" style="transform:${`translateX(-${this.index + 1}00%)`}">
-        ${htmlSlot()}
-      </div>
-      <i part="next" @click="${this.next}">
-        ${iconChevronRight()}
-      </i>
+      <i part="prev" @click="${this.prev}"> ${iconChevronLeft()} </i>
+      <div part="move-root" style="transform:${`translateX(-${this.index + 1}00%)`}">${htmlSlot()}</div>
+      <i part="next" @click="${this.next}"> ${iconChevronRight()} </i>
       ${htmlStyle(`:host,:host([contents]) [part=root]{width:${this.width};}`)}
     </div>`;
   }
@@ -164,7 +158,7 @@ class Carousel extends GlobalStyle {
   protected _doTranslateX(xValue: string, noTransition?: boolean): void {
     this._moveRoot.style.transform = `translateX(${xValue})`;
     if (noTransition) {
-      this._moveRoot.style.transition = `none`;
+      this._moveRoot.style.transition = "none";
     }
     this._moveRoot.getBoundingClientRect();
   }

package/src/components/details.ts

@@ -4,7 +4,7 @@ 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, type TemplateResult } from "lit";
-import { property, query } from "lit/decorators.js";
+import { property } from "lit/decorators.js";
 
 import { scopePrefix } from "../core/global-style.js";
 import SuperOpenable from "../core/super-openable.js";
@@ -27,7 +27,6 @@ const cssScope = scopePrefix(protoName);
     :host {
       ${cssScope}--icon-deg-open: 0deg;
       ${cssScope}--icon-deg-close: 90deg;
-      ${cssScope}--icon-deg: 0deg;
       ${cssScope}--icon-space: 0.3em;
       ${cssScope}--summary-direction: row;
       ${cssScope}--transition: .3s;
@@ -36,13 +35,13 @@ const cssScope = scopePrefix(protoName);
       transition: var(${cssScope}--transition);
     }
 
-    dl {
+    [part=root] {
       height: 100%;
       position: relative;
       overflow: hidden;
     }
 
-    dt {
+    [part=title] {
       height: 100%;
       display: flex;
       flex-wrap: nowrap;
@@ -52,7 +51,7 @@ const cssScope = scopePrefix(protoName);
       flex-direction: var(${cssScope}--summary-direction);
     }
 
-    dd {
+    [part=details] {
       display: grid;
       overflow: hidden;
       grid-template-rows: 0fr;
@@ -60,27 +59,24 @@ const cssScope = scopePrefix(protoName);
       transition-property: grid-template-rows;
     }
 
-    i {
-      display: flex;
-      backface-visibility: hidden;
-      padding: var(${cssScope}--icon-space);
-      transition: var(${cssScope}--transition);
-      transform: rotate(var(${cssScope}--icon-deg));
-    }
-
-    :host([open]) dd {
+    :host([open]) [part=details] {
       grid-template-rows: 1fr;
     }
 
-    :host([float]) dd {
+    :host([float]) [part=details] {
       top: 100%;
       position: absolute;
     }
 
-    i {
+    [part=icon] {
+      display: flex;
+      backface-visibility: hidden;
+      padding: var(${cssScope}--icon-space);
+      transition: var(${cssScope}--transition);
       transform: rotate(var(${cssScope}--icon-deg-close));
     }
-    :host([open]) i {
+
+    :host([open]) [part=icon] {
       transform: rotate(var(${cssScope}--icon-deg-open));
     }
   `,
@@ -98,15 +94,10 @@ class Details extends SuperOpenable {
   @property()
   summary = "";
 
-  @query("dd")
-  protected _dd: HTMLDataListElement;
-
   protected render(): TemplateResult<1> {
     return html`<dl part="root" ${attr(this.observedRecord)}>
       <dt part="title" @click="${this._handelClick}">
-        <span part="summary">
-          ${this.summary || htmlSlot("summary")}
-        </span>
+        <span part="summary">${this.summary || htmlSlot("summary")}</span>
         <span>
           <i part="icon">${svgCaretDown()}</i>
         </span>

package/src/components/dialog.ts

@@ -1,4 +1,4 @@
-import { type HandlerEvent } from "@godown/element";
+import type { HandlerEvent } from "@godown/element";
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
 import { attr } from "@godown/element/directives/attr.js";

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

@@ -218,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>`;
   }
 
@@ -246,7 +241,7 @@ class Range extends SuperInput {
       @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}`})"
+      (!range && end) ? "to" : `handle-${index}`})"
       ></i>
       `;
   }

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);
   }