godown 3.0.0-canary.10 → 3.0.0-canary.12

package/src/components/progress.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 { isNil } from "@godown/element/tools/lib.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle } from "../core/global-style.js";
@@ -18,12 +19,16 @@ const protoName = "progress";
   :host {
     width: 100%;
     height: 0.5em;
-    display: inline-block;
     border-radius: 0.25em;
     background: var(${cssGlobalVars.passive});
     color: var(${cssGlobalVars.active});
   }
 
+  :host,
+  [part=root] {
+    display: block;
+  }
+
   [part=root] {
     height: inherit;
     z-index: 1;
@@ -66,14 +71,14 @@ class Progress extends GlobalStyle {
   @property({ type: Number })
   value: number;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     let width = 20;
     let className: string;
     if (!isNil(this.value)) {
       width = this.parsePercent(this.value);
       className = "static";
     }
-    return html`<div part="root" class="${className}">
+    return html`<div part="root" ${attr(this.observedRecord)} class="${className}">
       <i part="value" style="width:${width}%;"></i>
     </div>`;
   }

package/src/components/range.ts

@@ -1,10 +1,11 @@
 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 { classList } from "@godown/element/directives/class-list.js";
 import { joinProperties } from "@godown/element/tools/css.js";
 import { isNil } from "@godown/element/tools/lib.js";
-import { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 import { property, queryAll, state } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -26,33 +27,37 @@ const cssScope = scopePrefix(protoName);
 @styles(
   css`
     :host {
-      ${cssScope}-handle-active: var(${cssGlobalVars._colors.blue[7]});
-      ${cssScope}-track-width: .5em;
+      ${cssScope}--handle-active: var(${cssGlobalVars.active});
+      ${cssScope}--track-width: .5em;
+      ${cssScope}--length: var(${cssGlobalVars.input}-width);
       background: var(${cssGlobalVars.input}-background);
-      width: var(${cssGlobalVars.input}-width);
-      display: inline-block;
-      margin: 0.25em 0;
+      width: var(${cssScope}--length);
+      display: block;
+    }
+
+    :host([contents]) [part=root] {
+      width: inherit;
     }
 
     :host([vertical]) {
-      height: var(${cssGlobalVars.input}-width);
+      height: var(${cssScope}--length);
       width: fit-content;
     }
 
     :host(:not([disabled])) .last-focus {
       z-index: 1;
-      ${cssScope}-handle-scale:1.05;
-      background: var(${cssScope}-handle-active);
+      ${cssScope}--handle-scale:1.05;
+      background: var(${cssScope}--handle-active);
     }
 
     [part=root] {
-      min-height:inherit;
+      min-height: inherit;
       position: relative;
       border-radius: inherit;
       width: 100%;
       --from: 0%;
       --to: 50%;
-      height: var(${cssScope}-track-width);
+      height: var(${cssScope}--track-width);
     }
 
     [part=track] {
@@ -79,22 +84,22 @@ const cssScope = scopePrefix(protoName);
       border: 0.1em solid;
       border-radius: 50%;
       transform-origin: 0% 25%;
-      transform: scale(var(${cssScope}-handle-scale, 1)) translate(-50%, -25%);
+      transform: scale(var(${cssScope}--handle-scale, 1)) translate(-50%, -25%);
       background: var(${cssGlobalVars.active});
       border-color: var(${cssGlobalVars.input}-control);
     }
   `,
   css`
-    .vertical {
-      height: 100%;
-      width: var(${cssScope}-track-width);
+    [vertical] {
+      height: inherit;
+      width: var(${cssScope}--track-width);
     }
 
-    .vertical i {
+    [vertical] i {
       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));
@@ -107,7 +112,7 @@ const cssScope = scopePrefix(protoName);
       top: 0;
     }
 
-    .vertical [part=handle] {
+    [vertical] [part=handle] {
       top: var(--handle);
       left: 0;
     }
@@ -136,7 +141,7 @@ class Range extends SuperInput {
    * Display vertically.
    */
   @property({ type: Boolean, reflect: true })
-  vertical: boolean;
+  vertical = false;
 
   /**
    * Value, or each of values, will render a handle.
@@ -164,7 +169,7 @@ class Range extends SuperInput {
   /**
    * Returns true when the second number is greater than the first number.
    */
-  get reverse() {
+  get reverse(): boolean {
     return this.range ? this.value[0] > this.value[1] : false;
   }
 
@@ -196,7 +201,7 @@ class Range extends SuperInput {
     return rangeValue;
   }
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     const rangeValue = this.padValue(2);
     const from = Math.min(...rangeValue);
     const to = Math.max(...rangeValue);
@@ -204,13 +209,7 @@ class Range extends SuperInput {
 
     return html`<div
       part="root"
-      class="${
-      classList({
-        vertical: this.vertical,
-        range: this.range,
-        reverse: this.reverse,
-      })
-    }"
+      ${attr(this.observedRecord)}
       @mousedown="${this.disabled ? null : this._handleMousedownRoot}"
       style="${
       joinProperties({
@@ -234,7 +233,7 @@ class Range extends SuperInput {
     </div>`;
   }
 
-  protected renderHandle(index: number) {
+  protected renderHandle(index: number): TemplateResult<1> {
     const { range } = this;
     const end = !range || index === (this.value as number[]).length - 1;
     return html`<i
@@ -253,7 +252,7 @@ class Range extends SuperInput {
 
   private _keydownEvent: EventListenerOrEventListenerObject;
 
-  focusHandle(index: number) {
+  focusHandle(index: number): void {
     this.lastFocus = index;
     const handleItem = this._handles.item(index);
     handleItem?.focus();
@@ -262,7 +261,7 @@ class Range extends SuperInput {
     }
   }
 
-  blurHandle() {
+  blurHandle(): void {
     this.lastFocus = undefined;
     this._keydownEvent = this.events.remove(document, "keydown", this._keydownEvent);
   }
@@ -271,7 +270,7 @@ class Range extends SuperInput {
     if (!this.range) {
       index = 0;
     }
-    return (e: KeyboardEvent) => {
+    return (e: KeyboardEvent): void => {
       if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
         e.preventDefault();
         this.createSetValue(index)(old => old - this.step);
@@ -283,20 +282,20 @@ class Range extends SuperInput {
   }
 
   createMouseDown(index: number) {
-    return (e: MouseEvent) => {
+    return (e: MouseEvent): void => {
       this.focusHandle(index);
       this.createMousedownListener(this.createSetValue(index))(e);
     };
   }
 
-  protected _handleMousedownEnd(e: MouseEvent) {
+  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)) => {
+    return (numberOrModifier: number | ((value: number) => number)): void => {
       const number = typeof numberOrModifier === "number"
         ? this.normalizeValue(numberOrModifier)
         : numberOrModifier(this.rangeValue[index]);
@@ -309,14 +308,14 @@ class Range extends SuperInput {
     };
   }
 
-  setEnd(value: number) {
+  setEnd(value: number): void {
     this.createSetValue((this.value as any)?.length - 1 || 0)(value);
   }
 
   /**
    * Compute value from event.
    */
-  protected _computeValue(e: MouseEvent) {
+  protected _computeValue(e: MouseEvent): number {
     const rect = this._root.getBoundingClientRect();
     const div = this.vertical ? (e.clientY - rect.top) / rect.height : (e.clientX - rect.left) / rect.width;
     const value = Math.round((div * (this.max - this.min)) / this.step) * this.step;
@@ -326,13 +325,13 @@ class Range extends SuperInput {
   /**
    * Ensure that the values do not exceed the range of max and min.
    */
-  protected normalizeValue(value: number) {
+  protected normalizeValue(value: number): number {
     if (value > this.max) { value -= this.step; }
     else if (value < this.min) { value += this.step; }
     return value;
   }
 
-  protected _handleMousedownRoot(e: MouseEvent) {
+  protected _handleMousedownRoot(e: MouseEvent): void {
     const value = this._computeValue(e);
     const index = this.range
       ? this.rangeValue.reduce((acc, item, index) => {
@@ -349,7 +348,7 @@ class Range extends SuperInput {
   }
 
   protected createMousedownListener(mouseMoveCallback: (arg0: number) => void) {
-    return (e: MouseEvent) => {
+    return (e: MouseEvent): void => {
       e.preventDefault();
       e.stopPropagation();
       const move = this.createMousemoveListener(mouseMoveCallback);
@@ -363,7 +362,7 @@ class Range extends SuperInput {
   }
 
   protected createMousemoveListener(callback: (arg0: number) => void) {
-    return (e: MouseEvent) => {
+    return (e: MouseEvent): void => {
       const value = this._computeValue(e);
       if (value > this.max || value < this.min) {
         return;
@@ -372,7 +371,7 @@ class Range extends SuperInput {
     };
   }
 
-  protected _connectedInit() {
+  protected _connectedInit(): void {
     const gap = this.max - this.min;
     this.step ||= gap / 100;
     if (isNil(this.value)) {
@@ -385,15 +384,15 @@ class Range extends SuperInput {
     this.default ??= this.value;
   }
 
-  reset() {
+  reset(): void {
     this.value = this.default;
   }
 
-  sort() {
+  sort(): number | number[] {
     return this.value = this.toSorted();
   }
 
-  toSorted() {
+  toSorted(): number | number[] {
     if (this.range) {
       return [...this.value as number[]].sort((a, b) => a - b);
     }

package/src/components/rotate.ts

@@ -2,7 +2,7 @@ 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 { css, html } from "lit";
+import { css, html, type TemplateResult } from "lit";
 
 import { GlobalStyle, scopePrefix } from "../core/global-style.js";
 
@@ -42,7 +42,7 @@ const cssScope = scopePrefix(protoName);
     margin: calc(-1 * var(${cssScope}--offset));
   }
 
-  [part=slot]{
+  [part=slot] {
     z-index: 2;
   }
 `,
@@ -51,19 +51,19 @@ class Rotate extends GlobalStyle {
   @part("root")
   protected _root: HTMLElement;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     return html`<div part="root">
       <div part="slot" @mousemove="${this._handleRotate}">${htmlSlot()}</div>
       <i @mouseleave="${this.reset}"></i>
     </div>`;
   }
 
-  reset() {
+  reset(): void {
     this._root.style.removeProperty("transform");
     this._root.style.removeProperty("transition");
   }
 
-  protected _handleRotate(e: MouseEvent) {
+  protected _handleRotate(e: MouseEvent): void {
     const { rotateX, rotateY } = this._computeOffset(e);
     this._root.style.setProperty("transform", `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`);
     this._root.style.setProperty("transition", "0s");
@@ -77,7 +77,10 @@ class Rotate extends GlobalStyle {
    * @param e Mouse move event.
    * @returns rotateX, rotateY
    */
-  _computeOffset(e: MouseEvent) {
+  _computeOffset(e: MouseEvent): {
+    rotateX: number;
+    rotateY: number;
+  } {
     const { left, top, width, height } = this._root.getBoundingClientRect();
     const { clientX, clientY } = e;
     const offsetX = clientX - left;

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 {
@@ -85,10 +91,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";
@@ -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,16 @@ 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="icon">${svgCaretDown()}</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 +149,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 +175,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 +204,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 +232,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 +246,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 +260,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();