godown 3.0.0-canary.14 → 3.0.0-canary.16

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";
@@ -18,7 +18,7 @@ const cssScope = scopePrefix(protoName);
  *
  * @slot summary - Details summary if no `summary` is provided.
  * @slot - Details content.
- * @fires change - Fired when the details is toggled.
+ * @fires change - Fired when the open changes.
  * @category display
  */
 @godown(protoName)
@@ -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>
@@ -119,3 +110,4 @@ class Details extends SuperOpenable {
 }
 
 export default Details;
+export { Details };

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";
@@ -19,6 +19,7 @@ const cssScope = scopePrefix(protoName);
  *
  * It listens for the keydown event and also closes itself when the {@linkcode key} contained in the key is pressed.
  *
+ * @fires change - Fires when the open changes.
  * @category feedback
  */
 @godown(protoName)
@@ -164,3 +165,4 @@ class Dialog extends SuperOpenable {
 }
 
 export default Dialog;
+export { Dialog };

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 {
   /**
@@ -54,3 +54,4 @@ class Divider extends GlobalStyle {
 }
 
 export default Divider;
+export { Divider };

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>`;
   }
@@ -132,3 +133,4 @@ class Dragbox extends GlobalStyle {
 }
 
 export default Dragbox;
+export { Dragbox };

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`).
@@ -80,3 +82,4 @@ class Flex extends GlobalStyle {
 }
 
 export default Flex;
+export { Flex };

package/src/components/form.ts

@@ -80,3 +80,4 @@ class Form<T = object> extends GlobalStyle {
 }
 
 export default Form;
+export { Form };

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({
@@ -85,3 +87,4 @@ class Grid extends GlobalStyle {
 }
 
 export default Grid;
+export { Grid };

package/src/components/input.ts

@@ -14,6 +14,8 @@ const protoName = "input";
 /**
  * {@linkcode Input} renders a text input.
  *
+ * @fires input - Fires when the input value changes.
+ * @fires change - Fires when the input value changes.
  * @category input
  */
 @godown(protoName)
@@ -45,20 +47,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>`;
@@ -71,3 +73,4 @@ class Input extends SuperInput {
 }
 
 export default Input;
+export { Input };

package/src/components/layout.ts

@@ -10,7 +10,7 @@ import { GlobalStyle } from "../core/global-style.js";
 const protoName = "layout";
 
 /**
- * {@linkcode NavLayout} renders slot and optional top header, bottom footer.
+ * {@linkcode Layout} renders slot and optional top header, bottom footer.
  *
  * @slot - The main content of the layout.
  * @slot header - The header of the layout.
@@ -50,7 +50,7 @@ const protoName = "layout";
     }
   `,
 )
-class NavLayout extends GlobalStyle {
+class Layout extends GlobalStyle {
   /**
    * If true, remove the header slot.
    */
@@ -71,19 +71,12 @@ 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>`;
   }
 }
 
-export default NavLayout;
+export default Layout;
+export { Layout };

package/src/components/link.ts

@@ -44,3 +44,4 @@ class Link extends SuperAnchor {
 }
 
 export default Link;
+export { Link };

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;
@@ -98,3 +100,4 @@ class Progress extends GlobalStyle {
 }
 
 export default Progress;
+export { Progress };

package/src/components/range.ts

@@ -21,6 +21,11 @@ const cssScope = scopePrefix(protoName);
  *
  * Number has 1 handle, the array has the number of its elements and the minimum is 2.
  *
+ * @fires input - Fires when the input value changes.
+ * @fires change - Fires when the input value changes.
+ * @fires range - Fires when the value changes.
+ * @fires focus - Fires when the handle is focused.
+ * @fires blur - Fires when the handle is blurred.
  * @category input
  */
 @godown(protoName)
@@ -218,19 +223,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 +246,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>
       `;
   }
@@ -265,11 +265,13 @@ class Range extends SuperInput {
     if (!this._keydownEvent) {
       this._keydownEvent = this.events.add(document, "keydown", this.createKeydownEvent(index));
     }
+    this.dispatchEvent(new CustomEvent("focus", { detail: index }));
   }
 
   blurHandle(): void {
     this.lastFocus = undefined;
     this._keydownEvent = this.events.remove(document, "keydown", this._keydownEvent);
+    this.dispatchEvent(new CustomEvent("blur"));
   }
 
   protected createKeydownEvent(index: number) {
@@ -294,12 +296,6 @@ class Range extends SuperInput {
     };
   }
 
-  protected _handleMousedownEnd(e: MouseEvent): void {
-    this.lastFocus = 0;
-    this.createMousedownListener(this.setEnd)(e);
-    this.focusHandle(0);
-  }
-
   createSetValue(index: number) {
     return (numberOrModifier: number | ((value: number) => number)): void => {
       const number = typeof numberOrModifier === "number"
@@ -311,13 +307,10 @@ class Range extends SuperInput {
         newValue[index] = number;
       }
       this.value = newValue;
+      this.dispatchEvent(new CustomEvent("range", { detail: this.value }));
     };
   }
 
-  setEnd(value: number): void {
-    this.createSetValue((this.value as any)?.length - 1 || 0)(value);
-  }
-
   /**
    * Compute value from event.
    */
@@ -407,3 +400,4 @@ class Range extends SuperInput {
 }
 
 export default Range;
+export { Range };

package/src/components/rotate.ts

@@ -93,3 +93,4 @@ class Rotate extends GlobalStyle {
 }
 
 export default Rotate;
+export { Rotate };

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);
   }
 
@@ -275,3 +275,4 @@ class Router extends GlobalStyle {
 }
 
 export default Router;
+export { Router };