godown 3.0.0 → 3.0.2

package/src/components/range.ts

@@ -1,5 +1,5 @@
 import { attr, classList, godown, isNil, joinProperties, part, styles } from "@godown/element";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property, queryAll, state } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -34,7 +34,7 @@ const cssScope = scopePrefix(protoName);
       display: block;
     }
 
-    :host([contents]) [part=root] {
+    :host([contents]) [part="root"] {
       width: inherit;
     }
 
@@ -48,7 +48,7 @@ const cssScope = scopePrefix(protoName);
       background: var(${cssScope}--handle-active);
     }
 
-    [part=root] {
+    [part="root"] {
       min-height: inherit;
       position: relative;
       border-radius: inherit;
@@ -58,9 +58,9 @@ const cssScope = scopePrefix(protoName);
       height: var(${cssScope}--track-width);
     }
 
-    [part=track] {
+    [part="track"] {
       height: 100%;
-      min-height:inherit;
+      min-height: inherit;
       display: flex;
       position: absolute;
       pointer-events: none;
@@ -71,7 +71,7 @@ const cssScope = scopePrefix(protoName);
       width: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));
     }
 
-    [part=handle] {
+    [part="handle"] {
       width: 1em;
       height: 1em;
       display: flex;
@@ -97,7 +97,7 @@ const cssScope = scopePrefix(protoName);
       transform: translate(-25%, -50%);
     }
 
-    [vertical] [part=track] {
+    [vertical] [part="track"] {
       width: 100%;
       height: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));
       top: min(var(--from), var(--to));
@@ -105,12 +105,12 @@ const cssScope = scopePrefix(protoName);
     }
   `,
   css`
-    [part=handle] {
+    [part="handle"] {
       left: var(--handle);
       top: 0;
     }
 
-    [vertical] [part=handle] {
+    [vertical] [part="handle"] {
       top: var(--handle);
       left: 0;
     }
@@ -207,42 +207,44 @@ class Range extends SuperInput {
     const to = Math.max(...rangeValue);
     const gap = this.max - this.min;
 
-    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}%`]),
-          )
-          : {}),
-      })
-    }"
-    >
-      <div part="track"></div>
-      ${this.range ? (this.value as number[]).map((_, index) => this.renderHandle(index)) : this.renderHandle(0)}
-    </div>`;
+    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}%`]),
+              )
+            : {}),
+        })}"
+      >
+        <div part="track"></div>
+        ${this.range ? (this.value as number[]).map((_, index) => this.renderHandle(index)) : this.renderHandle(0)}
+      </div>
+    `;
   }
 
   protected renderHandle(index: number): TemplateResult<1> {
     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="z-index:${this._focusStack.indexOf(index) + 1};--handle:var(--${
-      /* In single-handle mod or end, it is max value */
-      (!range && end) ? "to" : `handle-${index}`})"
+    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}`
+        })"
       ></i>
-      `;
+    `;
   }
 
   private _keydownEvent: EventListenerOrEventListenerObject;
@@ -275,10 +277,10 @@ class Range extends SuperInput {
     return (e: KeyboardEvent): void => {
       if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
         e.preventDefault();
-        this.createSetValue(index)(old => old - this.step);
+        this.createSetValue(index)((old) => old - this.step);
       } else if (e.key === "ArrowRight" || e.key === "ArrowUp") {
         e.preventDefault();
-        this.createSetValue(index)(old => old + this.step);
+        this.createSetValue(index)((old) => old + this.step);
       }
     };
   }
@@ -292,9 +294,10 @@ class Range extends SuperInput {
 
   createSetValue(index: number) {
     return (numberOrModifier: number | ((value: number) => number)): void => {
-      const number = typeof numberOrModifier === "number"
-        ? this.normalizeValue(numberOrModifier)
-        : numberOrModifier(this.rangeValue[index]);
+      const number =
+        typeof numberOrModifier === "number"
+          ? this.normalizeValue(numberOrModifier)
+          : numberOrModifier(this.rangeValue[index]);
       let newValue: any = number;
       if (this.range) {
         newValue = [...this.rangeValue];
@@ -319,8 +322,11 @@ class Range extends SuperInput {
    * Ensure that the values do not exceed the range of max and min.
    */
   protected normalizeValue(value: number): number {
-    if (value > this.max) { value -= this.step; }
-    else if (value < this.min) { value += this.step; }
+    if (value > this.max) {
+      value -= this.step;
+    } else if (value < this.min) {
+      value += this.step;
+    }
     return value;
   }
 
@@ -328,10 +334,10 @@ class Range extends SuperInput {
     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)
+          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);
@@ -382,12 +388,12 @@ class Range extends SuperInput {
   }
 
   sort(): number | number[] {
-    return this.value = this.toSorted();
+    return (this.value = this.toSorted());
   }
 
   toSorted(): number | number[] {
     if (this.range) {
-      return [...this.value as number[]].sort((a, b) => a - b);
+      return [...(this.value as number[])].sort((a, b) => a - b);
     }
     return this.value;
   }

package/src/components/rotate.ts

@@ -1,5 +1,5 @@
 import { godown, htmlSlot, part, styles } from "@godown/element";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 
 import { GlobalStyle, scopePrefix } from "../core/global-style.js";
 
@@ -12,8 +12,7 @@ const cssScope = scopePrefix(protoName);
  * @category wrapper
  */
 @godown(protoName)
-@styles(
-  css`
+@styles(css`
   :host {
     display: block;
     width: -moz-fit-content;
@@ -39,20 +38,26 @@ const cssScope = scopePrefix(protoName);
     margin: calc(-1 * var(${cssScope}--offset));
   }
 
-  [part=slot] {
+  [part="slot"] {
     z-index: 2;
   }
-`,
-)
+`)
 class Rotate extends GlobalStyle {
   @part("root")
   protected _root: HTMLElement;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root">
-      <div part="slot" @mousemove="${this._handleRotate}">${htmlSlot()}</div>
-      <i @mouseleave="${this.reset}"></i>
-    </div>`;
+    return html`
+      <div part="root">
+        <div
+          part="slot"
+          @mousemove="${this._handleRotate}"
+        >
+          ${htmlSlot()}
+        </div>
+        <i @mouseleave="${this.reset}"></i>
+      </div>
+    `;
   }
 
   reset(): void {

package/src/components/router.ts

@@ -1,9 +1,26 @@
-import { godown, htmlSlot, RouteTree, styles } from "@godown/element";
-import { css, type PropertyValueMap, type TemplateResult } from "lit";
+import { RouteTree, godown, htmlSlot, omit, styles } from "@godown/element";
+import { type PropertyValueMap, type TemplateResult, css } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
 
+interface RouteState {
+  pathname: string;
+  params: Record<string, string>;
+  path: string;
+}
+
+interface RouteResult extends RouteState {
+  component: unknown;
+}
+
+interface RouteItem {
+  [key: PropertyKey]: unknown;
+  path: string;
+  render?: (state?: RouteState) => unknown;
+  component?: unknown;
+}
+
 const protoName = "router";
 
 /**
@@ -13,7 +30,7 @@ const protoName = "router";
  *
  * It has two methods to collect routes.
  *
- * 1. From field `routes`, an array, each elements require "path" and "component".
+ * 1. From field `routes`, an array, each elements require "path".
  * 2. From child elements, which have the slot attribute for matching routes.
  *
  * If only the method 1 is used, set `type` to `"field"`.
@@ -29,20 +46,18 @@ const protoName = "router";
  * @category navigation
  */
 @godown(protoName)
-@styles(css`:host{display:contents;}`)
+@styles(css`
+  :host {
+    display: contents;
+  }
+`)
 class Router extends GlobalStyle {
   static routerInstances: Set<Router> = 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?: unknown;
-    }
-  )[];
+  private __cacheRecord = new Map<string, RouteResult>();
+  private __routes: RouteItem[];
 
   /**
    * Render result.
@@ -53,20 +68,24 @@ class Router extends GlobalStyle {
   /**
    * Dynamic parameters record.
    */
-  @state()
-  params: Record<string, string> = {};
+  get params(): Record<string, string> {
+    if (!this.path) {
+      return {};
+    }
+    return RouteTree.parseParams(this.pathname, this.path);
+  }
 
   /**
    * Value of matched path in routes.
    */
   @state()
-  path: string;
+  path?: string;
 
   /**
    * Current pathname (equals to location.pathname).
    */
   @property()
-  pathname: string;
+  pathname: string = location.pathname;
 
   /**
    * Rendered content when there is no match.
@@ -98,11 +117,7 @@ class Router extends GlobalStyle {
     this.collectFieldRoutes(value);
   }
 
-  get routes(): (Record<string, any> & {
-    path: string;
-    render?: (ur: ReturnType<Router["useRouter"]>) => unknown;
-    component?: unknown;
-  })[] {
+  get routes(): RouteItem[] {
     return this.__routes;
   }
 
@@ -111,7 +126,6 @@ class Router extends GlobalStyle {
   }
 
   protected render(): unknown {
-    this.params = {};
     if (this.cache) {
       const cached = this.__cacheRecord.get(this.pathname);
       if (cached) {
@@ -129,13 +143,12 @@ class Router extends GlobalStyle {
       default:
         this.component = this.fieldComponent() ?? this.slottedComponent();
     }
-    return this.component ?? this.default ?? null;
+    return this.component ?? this.default;
   }
 
   connectedCallback(): void {
     super.connectedCallback();
     Router.routerInstances.add(this);
-    this.pathname ??= location.pathname;
 
     if (this.type !== "field") {
       const mutationObserver = new MutationObserver(this.collectSlottedRoutes);
@@ -153,12 +166,7 @@ class Router extends GlobalStyle {
     Router.routerInstances.delete(this);
   }
 
-  useRouter(): {
-    pathname: string;
-    params: Record<string, string>;
-    path: string;
-    component: unknown;
-  } {
+  useRouter(): RouteResult {
     return {
       pathname: this.pathname,
       params: this.params,
@@ -170,12 +178,7 @@ class Router extends GlobalStyle {
   /**
    * Callback function when the route changes.
    */
-  routeChangeCallback: (params: {
-    pathname: string;
-    params: Record<string, string>;
-    path: string;
-    component: unknown | TemplateResult;
-  }, first: boolean) => void = null;
+  routeChangeCallback: (params: RouteResult, first: boolean) => void = null;
 
   protected updated(changedProperties: PropertyValueMap<this>): void {
     const shouldDispatch = changedProperties.has("pathname") || changedProperties.has("path");
@@ -201,14 +204,15 @@ class Router extends GlobalStyle {
       return null;
     }
 
-    this.params = this.parseParams(this.path, this.pathname);
     const route = this.routes.find((r) => r.path === query);
     if (!route) {
       return null;
     }
 
+    console.log(this.path);
+
     if ("render" in route) {
-      return route.render?.(this.useRouter()) || null;
+      return route.render?.(omit(this.useRouter(), "component")) || null;
     }
 
     return route.component;
@@ -230,7 +234,7 @@ class Router extends GlobalStyle {
     if (!this.path) {
       return null;
     }
-    this.params = this.parseParams(query, this.pathname);
+
     return htmlSlot(this.path);
   }
 
@@ -240,7 +244,7 @@ class Router extends GlobalStyle {
   collectSlottedRoutes(): void {
     this.__slottedRouteTree = new RouteTree();
     this.clear();
-    this._slottedNames.forEach(slotName => {
+    this._slottedNames.forEach((slotName) => {
       this.__slottedRouteTree.insert(slotName);
     });
   }
@@ -256,19 +260,15 @@ class Router extends GlobalStyle {
     });
   }
 
-  parseParams(routeTemplate: string, path: string = this.pathname): Record<string, string> {
-    return RouteTree.parseParams(path, routeTemplate);
-  }
-
   static updateAll(): void {
     this.routerInstances.forEach((i) => {
       i.handlePopstate();
     });
   }
 
-  handlePopstate = this.events.add(window, "popstate", () => {
+  handlePopstate: () => void = this.events.add(window, "popstate", () => {
     this.pathname = location.pathname;
-  }) as () => void;
+  });
 }
 
 export default Router;

package/src/components/select.ts

@@ -1,6 +1,6 @@
-import { attr, godown, type HandlerEvent, htmlSlot, part, styles } from "@godown/element";
+import { type HandlerEvent, attr, godown, htmlSlot, part, styles } from "@godown/element";
 import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
-import { css, html, nothing, type TemplateResult } from "lit";
+import { type TemplateResult, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import Input from "./input.js";
@@ -46,31 +46,29 @@ const protoName = "select";
  * @category input
  */
 @godown(protoName)
-@styles(
-  css`
-    [part=input] {
-      text-overflow: ellipsis;
-    }
+@styles(css`
+  [part="input"] {
+    text-overflow: ellipsis;
+  }
 
-    [part=content] {
-      position: absolute;
-      width: 100%;
-      visibility: hidden;
-    }
+  [part="content"] {
+    position: absolute;
+    width: 100%;
+    visibility: hidden;
+  }
 
-    [direction=bottom] [part=content] {
-      top: 100%;
-    }
+  [direction="bottom"] [part="content"] {
+    top: 100%;
+  }
 
-    [direction=top] [part=content] {
-      bottom: 100%;
-    }
+  [direction="top"] [part="content"] {
+    bottom: 100%;
+  }
 
-    [visible] [part=content] {
-      visibility: visible
-    }
-  `,
-)
+  [visible] [part="content"] {
+    visibility: visible;
+  }
+`)
 class Select extends Input {
   // @ts-ignore
   value: string | string[];
@@ -99,41 +97,54 @@ class Select extends Input {
   protected lastChecked: HTMLElement;
   protected defaultText: string;
   protected defaultChecked: HTMLElement[];
-  private _store: { value: string; text: string; }[] = [];
+  private _store: { value: string; text: string }[] = [];
 
   protected render(): TemplateResult<1> {
-    return html`<div
-      part="root"
-      ${
-      attr({
-        ...this.observedRecord,
-        direction: this.direction || this.autoDirection,
-      })
-    }
-      class="input-field"
-    >
-      ${[
-      this._renderPrefix(),
-      html`<input
-          part="input"
-          dir="${this.dir || nothing}"
-          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>`,
-    ]}
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr({
+          ...this.observedRecord,
+          direction: this.direction || this.autoDirection,
+        })}
+        class="input-field"
+      >
+        ${[
+          this._renderPrefix(),
+          html`
+            <input
+              part="input"
+              type="${this.type}"
+              .value="${this.text}"
+              ?autofocus="${this.autofocus}"
+              ?disabled="${this.disabled}"
+              autocapitalize="${this.autocapitalize || nothing}"
+              autocomplete="${this.autocomplete || nothing}"
+              placeholder="${this.placeholder || nothing}"
+              id="${this.makeId}"
+              @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>
+          `,
+        ]}
+      </div>
+    `;
   }
 
   protected _handleFocus(): void {
@@ -177,11 +188,7 @@ class Select extends Input {
   protected _connectedInit(): void {
     if (!this.value) {
       const checked = [...this.querySelectorAll<HTMLElement>("[checked]")];
-      const list = this.multiple
-        ? checked
-        : checked.length
-        ? [this.lastChecked = checked[0]]
-        : [];
+      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);
@@ -199,23 +206,23 @@ class Select extends Input {
   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));
+    this.querySelectorAll<HTMLElement>("[checked]").forEach((element) => updateChecked(element, 0));
+    this.defaultChecked.forEach((element) => updateChecked(element, 1));
   }
 
   select(value: string, text?: string): 0 | 1 {
     text ||= value;
     let operation: 0 | 1 = 0;
     if (this.multiple) {
-      const i = this._store.findIndex(s => s.value === value);
+      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(", ");
+      this.value = this._store.map((s) => s.value);
+      this.text = this._store.map((s) => s.text).join(", ");
     } else {
       if (this.value === value) {
         this.value = "";
@@ -236,15 +243,12 @@ class Select extends Input {
     [...this.children].forEach((element: HTMLElement) => {
       this.filterCallback(
         element,
-        !query
-          || contain(this.optionValue(element), query)
-          || contain(element.textContent, query),
+        !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): void {
     element.style.display = match ? "" : "none";
   }