godown 3.0.0-canary.9 → 3.0.1

package/src/components/router.ts

@@ -1,12 +1,26 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { RouteTree } from "@godown/element/tools/route-tree.js";
-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";
 
 /**
@@ -32,50 +46,43 @@ const protoName = "router";
  * @category navigation
  */
 @godown(protoName)
-@styles(css`:host{display:contents;}`)
-class Router<C = unknown> extends GlobalStyle {
-  static routerInstances = new Set<Router>();
+@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?: C;
-    }
-  )[];
+  private __cacheRecord = new Map<string, RouteResult>();
+  private __routes: RouteItem[];
 
   /**
    * Render result.
    */
   @state()
-  component: C | TemplateResult = null;
+  component: unknown | TemplateResult = null;
 
   /**
    * Dynamic parameters record.
    */
-  @state()
-  params: Record<string, string> = {};
+  get params(): Record<string, string> {
+    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 = "";
-
-  /**
-   * Path prefix.
-   */
-  @property()
-  baseURL = "";
+  pathname: string = location.pathname;
 
   /**
    * Rendered content when there is no match.
@@ -107,16 +114,15 @@ class Router<C = unknown> extends GlobalStyle {
     this.collectFieldRoutes(value);
   }
 
-  get routes() {
+  get routes(): RouteItem[] {
     return this.__routes;
   }
 
-  clear() {
+  clear(): void {
     this.__cacheRecord.clear();
   }
 
-  protected render() {
-    this.params = {};
+  protected render(): unknown {
     if (this.cache) {
       const cached = this.__cacheRecord.get(this.pathname);
       if (cached) {
@@ -134,13 +140,12 @@ class Router<C = unknown> extends GlobalStyle {
       default:
         this.component = this.fieldComponent() ?? this.slottedComponent();
     }
-    return this.component ?? this.default ?? null;
+    return this.component ?? this.default;
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     super.connectedCallback();
     Router.routerInstances.add(this);
-    this.pathname ??= location.pathname;
 
     if (this.type !== "field") {
       const mutationObserver = new MutationObserver(this.collectSlottedRoutes);
@@ -153,12 +158,12 @@ class Router<C = unknown> extends GlobalStyle {
     }
   }
 
-  disconnectedCallback() {
+  disconnectedCallback(): void {
     super.disconnectedCallback();
     Router.routerInstances.delete(this);
   }
 
-  useRouter() {
+  useRouter(): RouteResult {
     return {
       pathname: this.pathname,
       params: this.params,
@@ -170,14 +175,9 @@ class Router<C = unknown> extends GlobalStyle {
   /**
    * Callback function when the route changes.
    */
-  routeChangeCallback: (params: {
-    pathname: string;
-    params: Record<string, string>;
-    path: string;
-    component: C | TemplateResult;
-  }, first: boolean) => void = null;
-
-  protected updated(changedProperties: PropertyValueMap<this>) {
+  routeChangeCallback: (params: RouteResult, first: boolean) => void = null;
+
+  protected updated(changedProperties: PropertyValueMap<this>): void {
     const shouldDispatch = changedProperties.has("pathname") || changedProperties.has("path");
     if (shouldDispatch) {
       const ur = this.useRouter();
@@ -193,49 +193,53 @@ class Router<C = unknown> extends GlobalStyle {
   /**
    * Get component from {@linkcode routes} by query.
    */
-  fieldComponent(query?: string) {
-    query ||= this.useWhich(this.pathname);
+  fieldComponent(query?: string): unknown {
+    query ||= this.__fieldRouteTree.search(this.pathname)?.pattern;
     this.path = query;
 
     if (!query) {
       return null;
     }
 
-    this.params = this.parseParams(this.path, this.pathname);
     const route = this.routes.find((r) => r.path === query);
     if (!route) {
       return null;
     }
+
+    if ("render" in route) {
+      return route.render?.(omit(this.useRouter(), "component")) || null;
+    }
+
     return route.component;
   }
 
   /**
    * Get component from slotted elements by query.
    */
-  slottedComponent(usedRouteTemplate?: string) {
+  slottedComponent(query?: string): TemplateResult<1> {
     const slottedPaths = this._slottedNames;
-    usedRouteTemplate ||= this.__slottedRouteTree.useWhich(this.pathname);
-    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);
+
     return htmlSlot(this.path);
   }
 
   /**
    * Reset the route tree, clear cache, collect routes from child elements.
    */
-  collectSlottedRoutes() {
+  collectSlottedRoutes(): void {
     this.__slottedRouteTree = new RouteTree();
     this.clear();
-    this._slottedNames.forEach(slotName => {
+    this._slottedNames.forEach((slotName) => {
       this.__slottedRouteTree.insert(slotName);
     });
   }
@@ -243,7 +247,7 @@ class Router<C = unknown> extends GlobalStyle {
   /**
    * Reset the route tree, clear cache, collect routes from value.
    */
-  collectFieldRoutes(value: typeof this.routes) {
+  collectFieldRoutes(value: typeof this.routes): void {
     this.__fieldRouteTree = new RouteTree();
     this.clear();
     value.forEach(({ path }) => {
@@ -251,23 +255,16 @@ class Router<C = unknown> extends GlobalStyle {
     });
   }
 
-  useWhich(path: string) {
-    return this.__fieldRouteTree.useWhich(this.baseURL + path);
-  }
-
-  parseParams(routeTemplate: string, path: string) {
-    return this.__fieldRouteTree.parseParams(path, routeTemplate);
-  }
-
-  static updateAll() {
+  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;
+export { Router };

package/src/components/select.ts

@@ -1,12 +1,7 @@
-import { 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";
-import { htmlSlot } from "@godown/element/directives/html-slot.js";
+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 } from "lit";
+import { type TemplateResult, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
 
 import Input from "./input.js";
 
@@ -44,30 +39,36 @@ const protoName = "select";
  *
  * Input will filter the element.
  *
+ * @fires input - Fires when the input value changes.
+ * @fires change - Fires when the input value changes.
+ * @fires select - Fires when select an option.
  * @slot - Options.
  * @category input
  */
 @godown(protoName)
-@styles(
-  css`
-    [part="input"] {
-      text-overflow: ellipsis;
-    }
+@styles(css`
+  [part="input"] {
+    text-overflow: ellipsis;
+  }
 
-    [part="content"] {
-      position: absolute;
-      width: 100%;
-    }
+  [part="content"] {
+    position: absolute;
+    width: 100%;
+    visibility: hidden;
+  }
 
-    [direction="bottom"] {
-      top: 100%;
-    }
+  [direction="bottom"] [part="content"] {
+    top: 100%;
+  }
 
-    [direction="top"] {
-      bottom: 100%;
-    }
-  `,
-)
+  [direction="top"] [part="content"] {
+    bottom: 100%;
+  }
+
+  [visible] [part="content"] {
+    visibility: visible;
+  }
+`)
 class Select extends Input {
   // @ts-ignore
   value: string | string[];
@@ -85,10 +86,10 @@ class Select extends Input {
   direction: "top" | "bottom" | undefined;
 
   @property({ type: Boolean })
-  multiple: boolean;
+  multiple = false;
 
   @property({ type: Boolean })
-  visible: boolean;
+  visible = false;
 
   @state()
   protected autoDirection: "top" | "bottom" = "bottom";
@@ -96,37 +97,57 @@ 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() {
-    return html`<div part="root" 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}"
-      >`,
-      html`<label for="${this.makeId}" part="suffix">
-        <i part="space"></i><i part="icon">${svgCaretDown()}</i><i part="space"></i>
-      </label>`,
-      html`<label for="${this.makeId}" part="content" 
-      style="visibility:${this.visible ? "visible" : "hidden"}"
-      direction="${this.direction || this.autoDirection}">${htmlSlot()}</label>`,
-    ]}
-    </div>`;
+  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"
+              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() {
+  protected _handleFocus(): void {
     if (!this.direction) {
       const { top, bottom } = this.getBoundingClientRect();
       if (window.innerHeight - bottom < this._content.clientHeight && top > this._content.clientHeight) {
@@ -138,7 +159,7 @@ class Select extends Input {
     this.visible = true;
   }
 
-  protected firstUpdated() {
+  protected firstUpdated(): void {
     this.events.add(this._content, "click", (e: HandlerEvent) => {
       e.preventDefault();
       e.stopPropagation();
@@ -164,14 +185,10 @@ class Select extends Input {
     });
   }
 
-  protected _connectedInit() {
+  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);
@@ -189,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) {
+  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 = "";
@@ -216,45 +233,43 @@ class Select extends Input {
         operation = 1;
       }
     }
-    this.dispatchEvent(new CustomEvent("change", { detail: this.namevalue() }));
+    this.dispatchEvent(new CustomEvent("select", { detail: this.value, composed: true }));
     this.filter();
     return operation;
   }
 
-  filter(query?: string) {
+  filter(query?: string): void {
     query = query?.trim();
     [...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) {
+  filterCallback(element: HTMLElement, match: boolean, query: string): void {
     element.style.display = match ? "" : "none";
   }
 
-  protected _handleInput(e: HandlerEvent<HTMLInputElement>) {
+  protected _handleInput(e: HandlerEvent<HTMLInputElement>): void {
     e.stopPropagation();
     if (this.compositing) {
       return;
     }
     const s = this._input.value;
     this.filter(this.multiple ? betweenAt(this._input.selectionStart, s, ",") : s);
-    this.dispatchEvent(new CustomEvent("input", { detail: this.namevalue() }));
+    this.dispatchEvent(new CustomEvent("input", { detail: this.value, composed: true, bubbles: true }));
+    this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
   }
 
-  focus(options?: FocusOptions) {
+  focus(options?: FocusOptions): void {
     this._input.focus(options);
     this.visible = true;
   }
 
-  blur() {
+  blur(): void {
     this._input.blur();
     this.visible = false;
     super.blur();
@@ -266,3 +281,4 @@ class Select extends Input {
 }
 
 export default Select;
+export { Select };