godown 3.0.0-canary.10 → 3.0.0-canary.11

package/src/components/router.ts

@@ -33,8 +33,8 @@ const protoName = "router";
  */
 @godown(protoName)
 @styles(css`:host{display:contents;}`)
-class Router<C = unknown> extends GlobalStyle {
-  static routerInstances = new Set<Router>();
+class Router extends GlobalStyle {
+  static routerInstances: Set<Router> = new Set<Router>();
 
   private __fieldRouteTree: RouteTree = new RouteTree();
   private __slottedRouteTree: RouteTree = new RouteTree();
@@ -43,7 +43,7 @@ class Router<C = unknown> extends GlobalStyle {
     & Record<string, any>
     & {
       path: string;
-      component?: C;
+      component?: unknown;
     }
   )[];
 
@@ -51,7 +51,7 @@ class Router<C = unknown> extends GlobalStyle {
    * Render result.
    */
   @state()
-  component: C | TemplateResult = null;
+  component: unknown | TemplateResult = null;
 
   /**
    * Dynamic parameters record.
@@ -107,15 +107,18 @@ class Router<C = unknown> extends GlobalStyle {
     this.collectFieldRoutes(value);
   }
 
-  get routes() {
+  get routes(): (Record<string, any> & {
+    path: string;
+    component?: unknown;
+  })[] {
     return this.__routes;
   }
 
-  clear() {
+  clear(): void {
     this.__cacheRecord.clear();
   }
 
-  protected render() {
+  protected render(): unknown {
     this.params = {};
     if (this.cache) {
       const cached = this.__cacheRecord.get(this.pathname);
@@ -137,7 +140,7 @@ class Router<C = unknown> extends GlobalStyle {
     return this.component ?? this.default ?? null;
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     super.connectedCallback();
     Router.routerInstances.add(this);
     this.pathname ??= location.pathname;
@@ -153,12 +156,17 @@ class Router<C = unknown> extends GlobalStyle {
     }
   }
 
-  disconnectedCallback() {
+  disconnectedCallback(): void {
     super.disconnectedCallback();
     Router.routerInstances.delete(this);
   }
 
-  useRouter() {
+  useRouter(): {
+    pathname: string;
+    params: Record<string, string>;
+    path: string;
+    component: unknown;
+  } {
     return {
       pathname: this.pathname,
       params: this.params,
@@ -174,10 +182,10 @@ class Router<C = unknown> extends GlobalStyle {
     pathname: string;
     params: Record<string, string>;
     path: string;
-    component: C | TemplateResult;
+    component: unknown | TemplateResult;
   }, first: boolean) => void = null;
 
-  protected updated(changedProperties: PropertyValueMap<this>) {
+  protected updated(changedProperties: PropertyValueMap<this>): void {
     const shouldDispatch = changedProperties.has("pathname") || changedProperties.has("path");
     if (shouldDispatch) {
       const ur = this.useRouter();
@@ -193,7 +201,7 @@ class Router<C = unknown> extends GlobalStyle {
   /**
    * Get component from {@linkcode routes} by query.
    */
-  fieldComponent(query?: string) {
+  fieldComponent(query?: string): unknown {
     query ||= this.useWhich(this.pathname);
     this.path = query;
 
@@ -212,7 +220,7 @@ class Router<C = unknown> extends GlobalStyle {
   /**
    * Get component from slotted elements by query.
    */
-  slottedComponent(usedRouteTemplate?: string) {
+  slottedComponent(usedRouteTemplate?: string): TemplateResult<1> {
     const slottedPaths = this._slottedNames;
     usedRouteTemplate ||= this.__slottedRouteTree.useWhich(this.pathname);
     this.path = usedRouteTemplate;
@@ -232,7 +240,7 @@ class Router<C = unknown> extends GlobalStyle {
   /**
    * Reset the route tree, clear cache, collect routes from child elements.
    */
-  collectSlottedRoutes() {
+  collectSlottedRoutes(): void {
     this.__slottedRouteTree = new RouteTree();
     this.clear();
     this._slottedNames.forEach(slotName => {
@@ -243,7 +251,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,15 +259,15 @@ class Router<C = unknown> extends GlobalStyle {
     });
   }
 
-  useWhich(path: string) {
+  useWhich(path: string): string {
     return this.__fieldRouteTree.useWhich(this.baseURL + path);
   }
 
-  parseParams(routeTemplate: string, path: string) {
+  parseParams(routeTemplate: string, path: string): Record<string, string> {
     return this.__fieldRouteTree.parseParams(path, routeTemplate);
   }
 
-  static updateAll() {
+  static updateAll(): void {
     this.routerInstances.forEach((i) => {
       i.handlePopstate();
     });

package/src/components/select.ts

@@ -2,9 +2,10 @@ 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 { 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, nothing } from "lit";
+import { css, html, nothing, type TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -57,15 +58,20 @@ const protoName = "select";
     [part=content] {
       position: absolute;
       width: 100%;
+      visibility: hidden;
     }
 
-    [direction=bottom] {
+    [direction=bottom] [part=content] {
       top: 100%;
     }
 
-    [direction=top] {
+    [direction=top] [part=content] {
       bottom: 100%;
     }
+
+    [visible] [part=content] {
+      visibility: visible
+    }
   `,
 )
 class Select extends Input {
@@ -98,8 +104,13 @@ class Select extends Input {
   protected defaultChecked: HTMLElement[];
   private _store: { value: string; text: string; }[] = [];
 
-  protected render() {
-    return html`<div part="root" class="input-field"> 
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${
+      attr({
+        ...this.observedRecord,
+        direction: this.direction || this.autoDirection,
+      })
+    } class="input-field"> 
     ${[
       this._renderPrefix(),
       html`<input
@@ -117,16 +128,18 @@ class Select extends Input {
         @input="${this._handleInput}"
       >`,
       html`<label for="${this.makeId}" part="suffix">
-        <i part="space"></i><i part="icon">${svgCaretDown()}</i><i part="space"></i>
+        <i part="space"></i>
+        <i part="icon">${svgCaretDown()}</i>
+        <i part="space"></i>
+      </label>`,
+      html`<label for="${this.makeId}" part="content">
+        ${htmlSlot()}
       </label>`,
-      html`<label for="${this.makeId}" part="content" 
-      style="visibility:${this.visible ? "visible" : "hidden"}"
-      direction="${this.direction || this.autoDirection}">${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 +151,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,7 +177,7 @@ class Select extends Input {
     });
   }
 
-  protected _connectedInit() {
+  protected _connectedInit(): void {
     if (!this.value) {
       const checked = [...this.querySelectorAll<HTMLElement>("[checked]")];
       const list = this.multiple
@@ -193,7 +206,7 @@ class Select extends Input {
     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) {
@@ -221,7 +234,7 @@ class Select extends Input {
     return operation;
   }
 
-  filter(query?: string) {
+  filter(query?: string): void {
     query = query?.trim();
     [...this.children].forEach((element: HTMLElement) => {
       this.filterCallback(
@@ -235,11 +248,11 @@ class Select extends Input {
   }
 
   // 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;
@@ -249,12 +262,12 @@ class Select extends Input {
     this.dispatchEvent(new CustomEvent("input", { detail: this.namevalue() }));
   }
 
-  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();

package/src/components/skeleton.ts

@@ -1,8 +1,9 @@
 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 iconPhoto from "@godown/f7-icon/icons/photo.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -49,7 +50,7 @@ const cssScope = scopePrefix(protoName);
       margin: calc(var(--size) * 0.05);
     }
 
-    .position {
+    [animation=position] {
       background-image: linear-gradient(
         var(${cssScope}--deg),
         var(${cssScope}--from) 36%,
@@ -70,7 +71,7 @@ const cssScope = scopePrefix(protoName);
       }
     }
 
-    .opacity {
+    [animation=opacity] {
       animation-name: op;
       animation-direction: alternate;
     }
@@ -105,11 +106,11 @@ class Skeleton extends GlobalStyle {
   @state()
   loading = true;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     if (!this.loading) {
       return htmlSlot();
     }
-    return html`<div part="root" class="${this.animation}">
+    return html`<div part="root" ${attr(this.observedRecord)}>
     ${this.type === "image" ? iconPhoto() : ""}
     ${htmlSlot("loading")}</div>`;
   }

package/src/components/split.ts

@@ -1,8 +1,9 @@
 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 { classList } from "@godown/element/directives/class-list.js";
 import { type HandlerEvent } from "@godown/element/element.js";
-import { css, html, nothing } from "lit";
+import { css, html, nothing, type TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -40,6 +41,10 @@ const loop = <T>(len: number, fn: (index?: number) => T) => {
       ${cssScope}--gap: .25em;
     }
 
+    :host([contents]) [part=root] {
+      width: fit-content;
+    }
+
     [part=root] {
       gap: var(${cssScope}--gap);
       width: 100%;
@@ -92,9 +97,8 @@ class Split extends SuperInput {
   @state()
   currentValue: (string | void)[] = [];
 
-  protected render() {
-    return html`
-      <div part="root">
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
     ${
       loop(this.len, (index: number) =>
         html`<span part="input-box"
@@ -102,16 +106,16 @@ class Split extends SuperInput {
           class="${classList({ focus: this.current === index }) || nothing}"
         >${this.currentValue[index]}</span>`)
     }
-        <input
-          part="input"
-          id="${this.makeId}"
-          @blur=${this.blur}
-          @input="${this._handleInput}"
-          .value="${
+      <input
+        part="input"
+        id="${this.makeId}"
+        @blur=${this.blur}
+        @input="${this._handleInput}"
+        .value="${
       /* Ensure that input always has a value of length this.len */
       this.value.padStart(this.len, " ")}"
-        >
-      </div>
+      >
+    </div>
     `;
   }
 
@@ -120,7 +124,7 @@ class Split extends SuperInput {
     this.reset();
   }
 
-  protected _handleInput(e: HandlerEvent<HTMLInputElement, InputEvent>) {
+  protected _handleInput(e: HandlerEvent<HTMLInputElement, InputEvent>): void {
     e.stopPropagation();
     if (this.compositing) {
       return;
@@ -149,7 +153,7 @@ class Split extends SuperInput {
    *
    * @param data Input event data.
    */
-  protected fillInput(data: string | null) {
+  protected fillInput(data: string | null): void {
     if (data === null) {
       // delete
 
@@ -192,23 +196,23 @@ class Split extends SuperInput {
     }
   }
 
-  focus() {
+  focus(): void {
     this.focusAt(this.current);
     super.focus();
   }
 
-  focusAt(i: number) {
+  focusAt(i: number): void {
     this.current = i;
     this._input.focus();
   }
 
-  blur() {
+  blur(): void {
     this._input.blur();
     this.current = -1;
     super.blur();
   }
 
-  reset() {
+  reset(): void {
     this.current = -1;
     this.value = this.default;
     this.currentValue = this.value.split("").concat(Array(this.len - this.value.length).fill(null));

package/src/components/switch.ts

@@ -1,6 +1,7 @@
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
-import { css, html } from "lit";
+import { attr } from "@godown/element/directives/attr.js";
+import { css, html, type TemplateResult } from "lit";
 import { property, query } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -20,6 +21,12 @@ const cssScope = scopePrefix(protoName);
 @godown(protoName)
 @styles(
   css`
+    :host,
+    :host([contents]) [part=root] {
+      width: var(${cssScope}-width);
+      height: var(${cssScope}-height);
+    }
+
     :host {
       ${cssScope}-width: 3em;
       ${cssScope}-height: calc(var(${cssScope}-width) / 2);
@@ -27,8 +34,6 @@ const cssScope = scopePrefix(protoName);
       ${cssScope}-handle-space: .125em;
       ${cssScope}-transition: .2s ease-in-out;
       background: var(${cssGlobalVars.input}-background);
-      width: var(${cssScope}-width);
-      height: var(${cssScope}-height);
       display: inline-block;
       vertical-align: bottom;
       border-radius: 0;
@@ -44,14 +49,10 @@ const cssScope = scopePrefix(protoName);
       position: relative;
       height: inherit;
     }
-
-    [part=root],
-    input {
-      width: 100%;
-    }
-
+    
     input {
       opacity: 0;
+      width: 100%;
       height: 100%;
       appearance: none;
     }
@@ -136,8 +137,11 @@ class Switch extends SuperInput {
   @query("input")
   protected _input: HTMLInputElement;
 
-  protected render() {
-    return html`<div part="root" class="${this.round ? "round" : "rect"}">
+  protected render(): TemplateResult<1> {
+    return html`<div part="root"
+      ${attr(this.observedRecord)}
+      class="${this.round ? "round" : "rect"}"
+    >
       <input
         part="input"
         @change="${this._handleChange}"
@@ -151,12 +155,12 @@ class Switch extends SuperInput {
     </div>`;
   }
 
-  reset() {
+  reset(): void {
     this.checked = this.default === "true";
     this._input.checked = this.checked;
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     super.connectedCallback();
     if (this.checked) {
       this.default = "true";
@@ -166,7 +170,7 @@ class Switch extends SuperInput {
     }
   }
 
-  protected _handleChange() {
+  protected _handleChange(): void {
     this.checked = this._input.checked;
     this.dispatchEvent(new CustomEvent("input", { detail: this.checked, bubbles: true, composed: true }));
     this.dispatchEvent(new CustomEvent("change", { detail: this.checked, composed: true }));

package/src/components/text.ts

@@ -1,8 +1,9 @@
 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 { classList } from "@godown/element/directives/class-list.js";
 import { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -56,7 +57,7 @@ const cssScope = scopePrefix(protoName);
       text-decoration: none;
     }
 
-    .clip{
+    [clip] {
       background: var(${cssGlobalVars.clipBackground});
       display: inline-block;
       color: transparent;
@@ -78,14 +79,11 @@ class Text extends GlobalStyle {
   @property({ type: Boolean })
   clip: boolean;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     return html`<span
       part="root"
-      class="${
-      classList(this.underline, {
-        clip: this.clip,
-      })
-    }"
+      ${attr(this.observedRecord)}
+      class="${classList(this.underline)}"
     >
       ${htmlSlot()}
     </span>`;

package/src/components/time.ts

@@ -1,7 +1,8 @@
 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, type PropertyValues } from "lit";
+import { css, html, type PropertyValues, TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -32,27 +33,29 @@ class Time extends GlobalStyle {
    * Time.
    */
   @property({ type: Object })
-  time = new Date();
+  time: Date = new Date();
 
   /**
    * If there is a value, update every gap or timeout.
    */
   @property({ type: Number })
-  timeout;
+  timeout: any;
 
   /**
    * The number of milliseconds that change with each update.
    */
   @property({ type: Number })
-  gap;
+  gap: any;
 
   protected timeoutId: number;
 
-  protected render(): string {
-    return fmtime(this.format, this.time, this.escape);
+  protected render(): TemplateResult<1> {
+    return html`<span part="root" ${attr(this.observedRecord)}>
+      ${fmtime(this.format, this.time, this.escape)}
+    </span>`;
   }
 
-  protected firstUpdated() {
+  protected firstUpdated(): void {
     if (this.timeout) {
       this.timeoutId = this.startTimeout();
     }
@@ -67,11 +70,11 @@ class Time extends GlobalStyle {
     }
   }
 
-  disconnectedCallback() {
+  disconnectedCallback(): void {
     clearInterval(this.timeoutId);
   }
 
-  startTimeout() {
+  startTimeout(): number {
     return window.setInterval(() => {
       this.time = new Date(this.time.getTime() + (this.gap || this.timeout));
     }, Math.abs(this.timeout));