godown 3.2.0 → 3.3.0

package/src/components/alert.ts

@@ -40,32 +40,6 @@ const darkStyles = constructCSSObject(
   (prop) => toVar(prop),
 );
 
-const genLight = (key: string) => {
-  return [cssGlobalVars._colors[key][6], cssGlobalVars._colors[key][0]];
-};
-
-/**
- * @deprecated
- */
-const lightStyles = constructCSSObject(
-  vars,
-  {
-    green: genLight("green"),
-    blue: genLight("blue"),
-    orange: genLight("orange"),
-    red: genLight("red"),
-    yellow: genLight("yellow"),
-    purple: genLight("purple"),
-    teal: genLight("teal"),
-    pink: genLight("pink"),
-    gray: [cssGlobalVars._colors.darkgray[5], cssGlobalVars._colors.lightgray[7]],
-    white: [cssGlobalVars._colors.lightgray[0], cssGlobalVars._colors.darkgray[0]],
-    black: [cssGlobalVars._colors.darkgray[7], cssGlobalVars._colors.lightgray[3]],
-  },
-  () => ":host",
-  (prop) => toVar(prop),
-);
-
 const calls = {
   tip: {
     color: "teal",
@@ -116,67 +90,58 @@ const calls = {
 @styles(css`
   :host,
   :where(:host([contents]) [part="root"]) {
-    border-radius: var(${cssScope}--border-radius);
     ${cssScope}--border-radius: .25em;
     ${cssScope}--border-width: .075em;
     ${cssScope}--blockquote-width: .2em;
-    ${cssScope}--padding: .5em;
+    ${cssScope}--blockquote-background: transparent;
+    ${cssScope}--gap: .5em;
+    border-radius: var(${cssScope}--border-radius);
     display: block;
     width: 100%;
   }
 
   [part="root"] {
-    --color: var(${cssScope}--color);
-    color: var(--color);
-    width: 100%;
-    transition: 0.25s;
-    display: flex;
-    justify-content: space-between;
-    padding: var(${cssScope}--padding);
+    color: var(${cssScope}--color, currentColor);
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto 1fr;
+    border-color: currentColor;
     border-radius: inherit;
-    border: var(${cssScope}--border-width) solid var(--color);
+    border-style: solid;
+    border-width: var(${cssScope}--border-width);
+    padding: var(${cssScope}--gap);
     background: var(${cssScope}--background);
   }
 
   [variant="blockquote"] {
     border-radius: 0;
-    border-left: var(${cssScope}--blockquote-width) solid var(--color);
-    border-bottom: none;
-    border-right: none;
-    border-top: none;
-    background: transparent;
+    border-width: 0;
+    border-left-width: var(${cssScope}--blockquote-width);
+    background: var(${cssScope}--blockquote-background);
   }
 
-  [part="content"] {
-    color: var(--color);
-  }
-
-  [part="root"] {
+  [part~="icon"] {
     display: grid;
     align-items: center;
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: auto 1fr;
+    height: 2em;
   }
 
-  [part="title"] {
-    line-height: 2em;
+  .start svg {
+    margin-inline-end: var(${cssScope}--gap);
   }
 
-  [part="icon"] {
-    display: inline-grid;
-    align-items: center;
-    height: 2em;
+  .end svg {
+    margin-inline-start: var(${cssScope}--gap);
   }
 
-  [part="icon"] svg {
-    margin-right: 0.5em;
+  svg {
     width: 1.25em;
     height: 1.25em;
   }
 
   [part="content"] {
     grid-row: span 2 / span 2;
-    line-height: 1.5em;
   }
 `)
 class Alert extends GlobalStyle {
@@ -235,11 +200,9 @@ class Alert extends GlobalStyle {
    * Alert variant, if set to `blockquote`, the alert will be rendered as a blockquote.
    *
    * If variant is `"blockquote"`, hide the close button.
-   *
-   * ! __"light" will be deprecated__ in the future.
    */
   @property()
-  variant: "blockquote" | "dark" | "light" = "dark";
+  variant: "blockquote" | "dark" = "dark";
 
   protected render(): TemplateResult<1> {
     const color = calls[this.call]?.color || this.color;
@@ -249,7 +212,12 @@ class Alert extends GlobalStyle {
         part="root"
         ${attr(this.observedRecord)}
       >
-        <div part="icon">${icon}</div>
+        <div
+          part="icon"
+          class="start"
+        >
+          ${icon}
+        </div>
         <div part="content">
           <strong part="title">${this.title || htmlSlot("title")}</strong>
           ${this.content || htmlSlot()}
@@ -258,14 +226,15 @@ class Alert extends GlobalStyle {
           ? ""
           : html`
               <div
-                part="close"
+                part="icon close"
+                class="end"
                 tabindex="0"
                 @click="${this.close}"
               >
                 ${iconXmark()}
               </div>
             `}
-        ${htmlStyle(this.variant === "dark" ? darkStyles[color] : lightStyles[color])}
+        ${htmlStyle(darkStyles[color])}
       </div>
     `;
   }
@@ -277,7 +246,7 @@ class Alert extends GlobalStyle {
 
   protected firstUpdated(): void {
     if (this.autoclose) {
-      setTimeout(() => this.close(), this.autoclose);
+      this.timeouts.add(setTimeout(() => this.close(), this.autoclose));
     }
   }
 

package/src/components/button.ts

@@ -249,7 +249,7 @@ class Button extends GlobalStyle {
     super.blur();
   }
 
-  firstUpdated(): void {
+  protected firstUpdated(): void {
     this.events.add(this, "click", this._handelClick, true);
   }
 

package/src/components/carousel.ts

@@ -1,4 +1,4 @@
-import { attr, godown, htmlSlot, htmlStyle, part, styles } from "@godown/element";
+import { attr, godown, htmlSlot, part, styles } from "@godown/element";
 import iconChevronLeft from "@godown/f7-icon/icons/chevron-left.js";
 import iconChevronRight from "@godown/f7-icon/icons/chevron-right.js";
 import { type TemplateResult, css, html } from "lit";
@@ -8,16 +8,16 @@ import { GlobalStyle } from "../core/global-style.js";
 
 const protoName = "carousel";
 
+function getWidth(e) {
+  return e.getBoundingClientRect().width;
+}
+
 /**
  * {@linkcode Carousel} make the content display as a carousel.
  *
  * When this component is `firstUpdated`,
  * clone the first and last element and make the matching element visible when switching index.
  *
- * Child elements should maintain the same size.
- *
- * If no width, it will be the width of the first element.
- *
  * @slot - Carousel items, should maintain the same size.
  * @fires change - Fires when the index changes.
  * @category display
@@ -80,12 +80,6 @@ class Carousel extends GlobalStyle {
   @property({ type: Number })
   autoChange = 0;
 
-  /**
-   * Element width.
-   */
-  @property()
-  width: string;
-
   @part("move-root")
   protected _moveRoot: HTMLElement;
 
@@ -95,6 +89,8 @@ class Carousel extends GlobalStyle {
 
   private __cloneLast: HTMLElement | undefined;
 
+  protected _offset: number;
+
   protected render(): TemplateResult<1> {
     return html`
       <div
@@ -107,47 +103,59 @@ class Carousel extends GlobalStyle {
         >
           ${iconChevronLeft()}
         </i>
-        <div
-          part="move-root"
-          style="transform:${`translateX(-${this.index + 1}00%)`}"
-        >
-          ${htmlSlot()}
-        </div>
+        <div part="move-root">${htmlSlot()}</div>
         <i
           part="next"
           @click="${this.next}"
         >
           ${iconChevronRight()}
         </i>
-        ${htmlStyle(`:host,:host([contents]) [part=root]{width:${this.width};}`)}
       </div>
     `;
   }
 
-  protected async firstUpdated(): Promise<void> {
-    await this.updateComplete;
-
+  connectedCallback(): void {
+    super.connectedCallback();
     if (this.children.length) {
-      this.width ||= `${(this.firstElementChild as HTMLElement).offsetWidth}px`;
-
       this.__cloneFirst?.remove();
       this.__cloneLast?.remove();
       this.__cloneLast = this.firstElementChild.cloneNode(true) as HTMLElement;
       this.__cloneFirst = this.lastElementChild.cloneNode(true) as HTMLElement;
       this.appendChild(this.__cloneLast);
       this.insertBefore(this.__cloneFirst, this.firstElementChild);
-      this.show(this.index);
     }
-    this.checkInterval();
   }
 
-  disconnectedCallback(): void {
-    clearInterval(this.intervalID);
+  protected async firstUpdated(): Promise<void> {
+    await this.updateComplete;
+    this.show(this.index, true);
   }
 
-  show(i: number): void {
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+    super.attributeChangedCallback(name, _old, value);
+    if (name === "index" && this.isConnected) {
+      this.show(this.index);
+    }
+  }
+
+  show(i: number, n?: boolean): void {
+    i = this.normalizeIndex(i);
     this.index = i;
+    this._offset = 0;
+    for (let childIndex = 0; childIndex <= i; childIndex++) {
+      this._offset -= getWidth(this.children[childIndex]);
+    }
+    this._offset += (getWidth(this) - getWidth(this.children[i + 1])) / 2;
     this.dispatchEvent(new CustomEvent("change", { detail: i, composed: true }));
+    this._doTranslateX(`${this._offset}px`, n);
+    this.timeouts.remove(this.intervalID);
+    if (this.autoChange > 0) {
+      this.intervalID = this.timeouts.add(
+        setInterval(() => {
+          this.next();
+        }, this.autoChange),
+      );
+    }
   }
 
   next(): void {
@@ -157,7 +165,6 @@ class Carousel extends GlobalStyle {
     } else {
       this.show(this.index + 1);
     }
-    this.checkInterval();
   }
 
   prev(): void {
@@ -167,26 +174,20 @@ class Carousel extends GlobalStyle {
     } else {
       this.show(this.index - 1);
     }
-    this.checkInterval();
   }
 
   protected _doTranslateX(xValue: string, noTransition?: boolean): void {
     this._moveRoot.style.transform = `translateX(${xValue})`;
-    if (noTransition) {
-      this._moveRoot.style.transition = "none";
-    }
-    this._moveRoot.getBoundingClientRect();
+    this._moveRoot.style.transition = noTransition ? "none" : "";
   }
 
-  checkInterval(): void {
-    if (this.autoChange) {
-      if (this.intervalID) {
-        clearInterval(this.intervalID);
-      }
-      this.intervalID = setInterval(() => {
-        this.next();
-      }, this.autoChange);
+  normalizeIndex(i: number): number {
+    if (i < 0) {
+      return 0;
+    } else if (i > this.children.length - 3) {
+      return this.children.length - 3;
     }
+    return i;
   }
 }
 

package/src/components/input.ts

@@ -1,4 +1,4 @@
-import { attr, classList, godown, part, styles } from "@godown/element";
+import { attr, tokenList, godown, part, styles } from "@godown/element";
 import { type TemplateResult, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -44,7 +44,7 @@ class Input extends SuperInput {
       <div
         part="root"
         ${attr(this.observedRecord)}
-        class="${classList("input-field", this.variant)}"
+        class="${tokenList("input-field", this.variant)}"
       >
         ${[
           this._renderPrefix(),

package/src/components/range.ts

@@ -1,4 +1,4 @@
-import { attr, classList, godown, isNil, joinProperties, loop, part, styles } from "@godown/element";
+import { attr, tokenList, godown, isNil, joinProperties, loop, part, styles, Ranger } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property, queryAll, state } from "lit/decorators.js";
 
@@ -164,15 +164,9 @@ class Range extends SuperInput {
   @state()
   lastFocus?: number;
 
+  protected _ranger: Ranger;
   private __focusStack: number[] = [];
 
-  /**
-   * Returns true when the second number is greater than the first number.
-   */
-  get reverse(): boolean {
-    return this.range ? this.value[0] > this.value[1] : false;
-  }
-
   /**
    * If value is array.
    */
@@ -201,26 +195,31 @@ class Range extends SuperInput {
     return rangeValue;
   }
 
+  attributeChangedCallback(name: string, _old: string | null, value: string | null): void {
+    super.attributeChangedCallback(name, _old, value);
+    if (name === "max" || name === "min" || name === "step") {
+      this._ranger = new Ranger(this.min, this.max, this.step);
+    }
+  }
+
   protected render(): TemplateResult<1> {
     const rangeValue = this.padValue(2);
     const from = Math.min(...rangeValue);
     const to = Math.max(...rangeValue);
-    const gap = this.max - this.min;
+    const gap = this._ranger.diff;
 
     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}%`]),
-              )
-            : {}),
-        })}"
+        style="${joinProperties([
+          ["--from", `${((from - this.min) / gap) * 100}%`],
+          ["--to", `${((to - this.min) / gap) * 100}%`],
+          ...rangeValue.map(
+            (value, index) => [`--handle-${index}`, `${((value - this.min) / gap) * 100}%`] as [string, string],
+          ),
+        ])}"
       >
         <div part="track"></div>
         ${loop(this.rangeValue.length, (index) => this._renderHandle(index))}
@@ -229,20 +228,22 @@ class Range extends SuperInput {
   }
 
   protected _renderHandle(index: number): TemplateResult<1> {
-    const { range } = this;
-    const end = !range || index === (this.value as number[]).length - 1;
+    const { rangeValue, disabled } = this;
+
+    // in single-handle mod or last handle.
+    const end = index === rangeValue.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}`
-        })"
+        class="${tokenList({ "last-focus": this.lastFocus === index })}"
+        @mousedown="${disabled ? null : this.createMouseDown(index)}"
+        @focus="${disabled ? null : () => this.focusHandle(index)}"
+        @blur="${disabled ? null : this.blurHandle}"
+        style="${joinProperties({
+          "z-index": this.__focusStack.indexOf(index) + 1,
+          "--handle": `var(--${end ? "to" : `handle-${index}`})`,
+        })}"
       ></i>
     `;
   }
@@ -271,37 +272,36 @@ class Range extends SuperInput {
   }
 
   protected createKeydownEvent(index: number) {
-    if (!this.range) {
+    const { rangeValue, step } = this;
+    if (rangeValue.length < 2) {
       index = 0;
     }
     return (e: KeyboardEvent): void => {
+      const old = rangeValue[index];
       if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
         e.preventDefault();
-        this.createSetValue(index)((old) => old - this.step);
+        this.createSetValue(index)(old - step);
       } else if (e.key === "ArrowRight" || e.key === "ArrowUp") {
         e.preventDefault();
-        this.createSetValue(index)((old) => old + this.step);
+        this.createSetValue(index)(old + step);
       }
     };
   }
 
-  createMouseDown(index: number) {
+  protected createMouseDown(index: number) {
     return (e: MouseEvent): void => {
       this.focusHandle(index);
       this.createMousedownListener(this.createSetValue(index))(e);
     };
   }
 
-  createSetValue(index: number) {
-    return (numberOrModifier: number | ((value: number) => number)): void => {
-      const number =
-        typeof numberOrModifier === "number"
-          ? this.normalizeValue(numberOrModifier)
-          : numberOrModifier(this.rangeValue[index]);
-      let newValue: any = number;
+  protected createSetValue(index: number) {
+    return (value: number): void => {
+      const normalizeValue = this._ranger.normalize(value);
+      let newValue: number | number[] = normalizeValue;
       if (this.range) {
-        newValue = [...this.rangeValue];
-        newValue[index] = number;
+        newValue = [...(this.value as number[])];
+        newValue[index] = normalizeValue;
       }
       this.value = newValue;
       this.dispatchEvent(new CustomEvent("range", { detail: this.value }));
@@ -311,23 +311,9 @@ class Range extends SuperInput {
   /**
    * Compute value from event.
    */
-  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;
-    return this.normalizeValue(value);
-  }
-
-  /**
-   * Ensure that the values do not exceed the range of max and min.
-   */
-  normalizeValue(value: number): number {
-    if (value > this.max) {
-      value -= this.step;
-    } else if (value < this.min) {
-      value += this.step;
-    }
-    return value;
+  protected _computeValue({ clientX, clientY }: MouseEvent): number {
+    const { top, left, height, width } = this._root.getBoundingClientRect();
+    return this._ranger.present(this.vertical ? (clientY - top) / height : (clientX - left) / width);
   }
 
   protected _handleMousedownRoot(e: MouseEvent): void {
@@ -360,10 +346,10 @@ class Range extends SuperInput {
     };
   }
 
-  protected createMousemoveListener(callback: (arg0: number) => void) {
+  protected createMousemoveListener(callback: (newValue: number) => void) {
     return (e: MouseEvent): void => {
       const value = this._computeValue(e);
-      if (value > this.max || value < this.min) {
+      if (value !== this._ranger.restrict(value)) {
         return;
       }
       callback?.call(this, value);
@@ -371,7 +357,7 @@ class Range extends SuperInput {
   }
 
   protected _connectedInit(): void {
-    const gap = this.max - this.min;
+    const gap = this._ranger.diff;
     this.step ||= gap / 100;
     if (isNil(this.value)) {
       if (!isNil(this.default)) {

package/src/components/router.ts

@@ -160,10 +160,9 @@ class Router extends GlobalStyle {
     Router.routerInstances.add(this);
 
     if (this.type !== "field") {
-      const mutationObserver = new MutationObserver(this.collectSlottedRoutes);
-      mutationObserver.observe(this, {
-        attributeFilter: ["slot"],
+      this.observers.add(this, MutationObserver, this.collectSlottedRoutes, {
         attributes: true,
+        attributeFilter: ["slot"],
         subtree: true,
       });
       this.collectSlottedRoutes();

package/src/components/split.ts

@@ -1,4 +1,4 @@
-import { type HandlerEvent, attr, classList, godown, styles, loop } from "@godown/element";
+import { type HandlerEvent, attr, tokenList, godown, styles, loop } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 
@@ -98,7 +98,7 @@ class Split extends SuperInput {
           (index: number) => html`
             <span
               part="input-box"
-              class="${classList({ focus: this.current === index })}"
+              class="${tokenList({ focus: this.current === index })}"
               @click="${this.disabled ? null : () => this.focusAt(index)}"
             >
               ${this.currentValue[index]}

package/src/components/text.ts

@@ -1,4 +1,4 @@
-import { attr, classList, godown, htmlSlot, styles } from "@godown/element";
+import { attr, tokenList, godown, htmlSlot, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -80,7 +80,7 @@ class Text extends GlobalStyle {
       <span
         part="root"
         ${attr(this.observedRecord)}
-        class="${classList(this.underline)}"
+        class="${tokenList(this.underline)}"
       >
         ${htmlSlot()}
       </span>

package/src/components/time.ts

@@ -63,32 +63,17 @@ class Time extends GlobalStyle {
     `;
   }
 
-  protected firstUpdated(): void {
-    if (this.timeout) {
-      this.timeoutId = this.startTimeout();
-    }
-  }
-
   protected updated(changedProperties: PropertyValues): void {
-    if (changedProperties.has("timeout")) {
-      if (this.timeout) {
-        clearInterval(this.timeoutId);
-        this.timeoutId = this.startTimeout();
-      }
+    if (changedProperties.has("timeout") && this.timeout) {
+      this.timeouts.remove(this.timeoutId);
+      this.timeoutId = this.timeouts.add(
+        setInterval(() => {
+          this.dispatchEvent(new CustomEvent("time", { detail: this.time, composed: true }));
+          this.time = new Date(this.time.getTime() + (this.gap || this.timeout));
+        }, Math.abs(this.timeout)),
+      );
     }
   }
-
-  disconnectedCallback(): void {
-    clearInterval(this.timeoutId);
-    this.timeoutId = undefined;
-  }
-
-  startTimeout(): number {
-    return setInterval(() => {
-      this.dispatchEvent(new CustomEvent("time", { detail: this.time, composed: true }));
-      this.time = new Date(this.time.getTime() + (this.gap || this.timeout));
-    }, Math.abs(this.timeout));
-  }
 }
 
 export default Time;

package/src/components/typewriter.ts

@@ -125,13 +125,15 @@ class Typewriter extends GlobalStyle {
   write(at: number = this.index): void {
     this.contentInternal = this.content.slice(0, at + 1);
     const timeout = this.delay || random(this.max, this.min);
-    this.timeoutID = setTimeout(() => {
-      const nx = at + 1;
-      if (nx <= this.len) {
-        this.index = nx;
-        this.write();
-      }
-    }, timeout);
+    this.timeoutID = this.timeouts.add(
+      setTimeout(() => {
+        const nx = at + 1;
+        if (nx <= this.len) {
+          this.index = nx;
+          this.write();
+        }
+      }, timeout),
+    );
   }
 
   stop(): void {