godown 3.2.0 → 3.4.0

package/src/components/range.ts

@@ -1,9 +1,9 @@
-import { attr, classList, godown, isNil, joinProperties, loop, part, styles } from "@godown/element";
+import { attr, tokenList, godown, isNil, joinProperties, loop, part, styles, Ranger, omit } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property, queryAll, state } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
-import SuperInput from "../core/super-input.js";
+import { SuperInput } from "../core/super-input.js";
 
 const protoName = "range";
 const cssScope = scopePrefix(protoName);
@@ -13,7 +13,7 @@ const cssScope = scopePrefix(protoName);
  *
  * Value accepts number, or array.
  *
- * Number has 1 handle, the array has the number of its elements and the minimum is 2.
+ * Number has 1 handle, the array has the number of its elements.
  *
  * @fires input - Fires when the input value changes.
  * @fires change - Fires when the input value changes.
@@ -29,7 +29,7 @@ const cssScope = scopePrefix(protoName);
       ${cssScope}--handle-active: var(${cssGlobalVars.active});
       ${cssScope}--track-width: .5em;
       ${cssScope}--length: var(${cssGlobalVars.input}-width);
-      background: var(${cssGlobalVars.input}-background);
+      background: var(${cssGlobalVars.passive});
       width: var(${cssScope}--length);
       display: block;
     }
@@ -136,7 +136,7 @@ class Range extends SuperInput {
   step: number;
 
   /**
-   * Display vertically.
+   * Whether to display the range vertically.
    */
   @property({ type: Boolean, reflect: true })
   vertical = false;
@@ -164,18 +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.
-   */
   get range(): boolean {
     return Array.isArray(this.value);
   }
@@ -188,9 +179,7 @@ class Range extends SuperInput {
   }
 
   /**
-   * @param len Minimum result length.
-   * @param value Fill value.
-   * @returns Array with length of len.
+   * Pad the value to the specified length.
    */
   padValue(len: number, value = 0): number[] {
     const { rangeValue } = this;
@@ -201,26 +190,35 @@ 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);
+    }
+  }
+
+  get observedRecord(): Record<string, any> {
+    return omit(super.observedRecord, "outline-type");
+  }
+
   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,26 +227,32 @@ class Range extends SuperInput {
   }
 
   protected _renderHandle(index: number): TemplateResult<1> {
-    const { range } = this;
-    const end = !range || index === (this.value as number[]).length - 1;
+    const { disabled, range, rangeValue } = this;
+
+    // in single-handle mod (value is a number or an array with length 1),
+    const end = !range || (range && index === rangeValue.length - 1 && 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>
     `;
   }
 
   private __keydownEvent: EventListenerOrEventListenerObject;
 
+  /**
+   * Focuses the handle at the given index, updates the focus stack, and dispatches a "focus" event.
+   * @param index - The index of the handle to focus.
+   */
   focusHandle(index: number): void {
     this.lastFocus = index;
     const indexOfFocusStack = this.__focusStack.indexOf(index);
@@ -264,44 +268,61 @@ class Range extends SuperInput {
     this.dispatchEvent(new CustomEvent("focus", { detail: index }));
   }
 
+  /**
+   * Removes the focus from the currently focused handle and dispatches a "blur" event.
+   */
   blurHandle(): void {
     this.lastFocus = undefined;
     this.__keydownEvent = this.events.remove(document, "keydown", this.__keydownEvent);
     this.dispatchEvent(new CustomEvent("blur"));
   }
 
+  /**
+   * Creates a keydown event handler that updates the value of the range based on arrow key presses.
+   * @param index - The index of the handle to update.
+   * @returns A function that handles the keydown event and updates the range value.
+   */
   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) {
+  /**
+   * Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.
+   * @param index - The index of the handle to focus.
+   * @returns A function that handles the mouse down event and updates the range value.
+   */
+  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;
+  /**
+   * Creates a function that sets the value of the range at the given index.
+   * @param index - The index of the value to set.
+   * @returns A function that sets the value of the range.
+   */
+  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 }));
@@ -310,26 +331,18 @@ class Range extends SuperInput {
 
   /**
    * Compute value from event.
+   * @returns The value closest to the event client position.
    */
-  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);
+  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);
   }
 
   /**
-   * Ensure that the values do not exceed the range of max and min.
+   * Handles the mouse down event on the root element of the range component.
+   * Computes the closest value to the mouse position, sets the value, and focuses the corresponding handle.
+   * @param e - The mouse down event object.
    */
-  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): void {
     const value = this._computeValue(e);
     const index = this.range
@@ -345,7 +358,11 @@ class Range extends SuperInput {
     this.createMousedownListener(set)(e);
     this.focusHandle(index);
   }
-
+  /**
+   * Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.
+   * @param index - The index of the handle to focus.
+   * @returns A function that handles the mouse down event and updates the range value.
+   */
   protected createMousedownListener(mouseMoveCallback: (arg0: number) => void) {
     return (e: MouseEvent): void => {
       e.preventDefault();
@@ -360,10 +377,15 @@ class Range extends SuperInput {
     };
   }
 
-  protected createMousemoveListener(callback: (arg0: number) => void) {
+  /**
+   * Creates a mouse move event handler that updates the range value based on the mouse position.
+   * @param callback - A function to call with the new value when the mouse is moved.
+   * @returns A function that handles the mouse move event and updates the range value.
+   */
+  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 +393,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/rotate.ts

@@ -73,11 +73,13 @@ class Rotate extends GlobalStyle {
 
   /**
    * Compute offset.
-   * ```
-   * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`
-   * ```
-   * @param e Mouse move event.
+   *
    * @returns rotateX, rotateY
+   * @example
+   * ```ts
+   * const { rotateX, rotateY } = this._computeOffset(e);
+   * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`;
+   * ```
    */
   protected _computeOffset(e: MouseEvent): {
     rotateX: number;

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/select.ts

@@ -4,6 +4,8 @@ import { type TemplateResult, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import Input from "./input.js";
+import { cssGlobalVars } from "../core/global-style.js";
+import { type DirectionCardinalY, directionOutsetPlace } from "../core/direction.js";
 
 function contain(a: string, b: string): boolean {
   return a && b && a.toLowerCase().includes(b.toLowerCase());
@@ -46,29 +48,29 @@ const protoName = "select";
  * @category input
  */
 @godown(protoName)
-@styles(css`
-  [part="input"] {
-    text-overflow: ellipsis;
-  }
-
-  [part="content"] {
-    position: absolute;
-    width: 100%;
-    visibility: hidden;
-  }
+@styles(
+  directionOutsetPlace,
+  css`
+    :host(:focus-within),
+    .outline {
+      ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.active});
+    }
 
-  [direction="bottom"] [part="content"] {
-    top: 100%;
-  }
+    [part="input"] {
+      text-overflow: ellipsis;
+    }
 
-  [direction="top"] [part="content"] {
-    bottom: 100%;
-  }
+    [part="content"] {
+      position: absolute;
+      width: 100%;
+      visibility: hidden;
+    }
 
-  [visible] [part="content"] {
-    visibility: visible;
-  }
-`)
+    [visible] [part="content"] {
+      visibility: visible;
+    }
+  `,
+)
 class Select extends Input {
   // @ts-ignore
   value: string | string[];
@@ -83,7 +85,7 @@ class Select extends Input {
   protected _content: HTMLElement;
 
   @property()
-  direction: "top" | "bottom" | undefined;
+  direction: DirectionCardinalY;
 
   @property({ type: Boolean })
   multiple = false;
@@ -92,21 +94,25 @@ class Select extends Input {
   visible = false;
 
   @state()
-  protected autoDirection: "top" | "bottom" = "bottom";
+  protected autoDirection: DirectionCardinalY = "bottom";
 
   protected lastChecked: HTMLElement;
   protected defaultText: string;
   protected defaultChecked: HTMLElement[];
   private __store: { value: string; text: string }[] = [];
 
+  get observedRecord(): Record<string, any> {
+    return {
+      ...super.observedRecord,
+      direction: this.direction || this.autoDirection,
+    };
+  }
+
   protected render(): TemplateResult<1> {
     return html`
       <div
         part="root"
-        ${attr({
-          ...this.observedRecord,
-          direction: this.direction || this.autoDirection,
-        })}
+        ${attr(this.observedRecord)}
         class="input-field"
       >
         ${[
@@ -138,6 +144,7 @@ class Select extends Input {
             <label
               for="${this.makeId}"
               part="content"
+              direction-outset-place
             >
               ${htmlSlot()}
             </label>

package/src/components/split.ts

@@ -1,9 +1,9 @@
-import { type HandlerEvent, attr, classList, godown, styles, loop } from "@godown/element";
+import { type HandlerEvent, attr, tokenList, godown, styles, loop, omit } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
-import SuperInput from "../core/super-input.js";
+import { SuperInput } from "../core/super-input.js";
 
 const protoName = "split";
 const cssScope = scopePrefix(protoName);
@@ -24,7 +24,6 @@ const cssScope = scopePrefix(protoName);
 @godown(protoName)
 @styles(css`
   :host {
-    color: var(${cssGlobalVars.foreground});
     display: block;
     border-radius: 1px;
     width: fit-content;
@@ -50,9 +49,10 @@ const cssScope = scopePrefix(protoName);
     width: var(${cssScope}--size);
     height: var(${cssScope}--size);
     vertical-align: top;
-    text-align: center;
-    background-color: var(${cssGlobalVars.input}-background);
     border-radius: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
 
   [part="input"] {
@@ -65,7 +65,7 @@ const cssScope = scopePrefix(protoName);
   }
 
   .focus {
-    box-shadow: var(${cssGlobalVars.input}-box-shadow);
+    ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.active});
   }
 `)
 class Split extends SuperInput {
@@ -87,6 +87,10 @@ class Split extends SuperInput {
   @state()
   currentValue: (string | void)[] = [];
 
+  get observedRecord(): Record<string, any> {
+    return omit(super.observedRecord, "outline-type");
+  }
+
   protected render(): TemplateResult<1> {
     return html`
       <div
@@ -98,7 +102,8 @@ class Split extends SuperInput {
           (index: number) => html`
             <span
               part="input-box"
-              class="${classList({ focus: this.current === index })}"
+              outline-type="${this.outlineType}"
+              class="${tokenList({ focus: this.current === index })}"
               @click="${this.disabled ? null : () => this.focusAt(index)}"
             >
               ${this.currentValue[index]}

package/src/components/switch.ts

@@ -1,9 +1,9 @@
-import { attr, godown, styles } from "@godown/element";
+import { attr, godown, omit, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
-import SuperInput from "../core/super-input.js";
+import { SuperInput } from "../core/super-input.js";
 
 const protoName = "switch";
 const cssScope = scopePrefix(protoName);
@@ -11,9 +11,6 @@ const cssScope = scopePrefix(protoName);
 /**
  * {@linkcode Switch} renders a switch.
  *
- * The switch is rectangular by default,
- * set the round property to rounded switch.
- *
  * @fires change - Fires when the switch is switched.
  * @category input
  */
@@ -32,18 +29,23 @@ const cssScope = scopePrefix(protoName);
     ${cssScope}-handle-size: 1.25em;
     ${cssScope}-handle-space: .125em;
     ${cssScope}-transition: .2s ease-in-out;
-    background: var(${cssGlobalVars.input}-background);
+    border-radius: calc(var(${cssScope}-height) / 2);
+    background: var(${cssGlobalVars.passive});
     vertical-align: bottom;
-    border-radius: 0;
+    transition: 0.2s ease-in-out;
+    transition-property: background, left;
+  }
+
+  :host([checked]) {
+    background: var(${cssGlobalVars.active});
   }
 
   [part="root"],
   [part="handle"] {
-    transition: var(${cssScope}-transition);
+    transition: inherit;
   }
 
   [part="root"] {
-    border-radius: inherit;
     position: relative;
     height: inherit;
   }
@@ -52,7 +54,6 @@ const cssScope = scopePrefix(protoName);
     opacity: 0;
     width: 100%;
     height: 100%;
-    appearance: none;
   }
 
   [part="handle"] {
@@ -64,45 +65,26 @@ const cssScope = scopePrefix(protoName);
     left: 0;
     width: 50%;
     pointer-events: none;
-    border-radius: inherit;
-  }
-
-  :host([round]) {
-    border-radius: calc(var(${cssScope}-height) / 2);
-    background: var(${cssGlobalVars.passive});
   }
 
   :host([checked]) [part="handle"] {
     left: 50%;
   }
 
-  .rect .true {
-    background: var(${cssGlobalVars.active});
-  }
-
-  .rect .false {
-    background: var(${cssGlobalVars.passive});
-  }
-
-  .round [part="handle"] {
+  [part="handle"] {
     --size: var(${cssScope}-handle-size);
     border-radius: 100%;
-    background: var(--godown--input-control);
+    background: currentColor;
     width: var(--size);
     height: var(--size);
     margin: var(${cssScope}-handle-space);
   }
-
-  :host([checked]) .round {
-    background: var(${cssGlobalVars.active});
-  }
 `)
 class Switch extends SuperInput {
   /**
-   * Display rounded.
+   * @deprecated
    */
-  @property({ type: Boolean, reflect: true })
-  round = false;
+  round: boolean;
 
   /**
    * Whether this element is selected or not.
@@ -119,8 +101,8 @@ class Switch extends SuperInput {
   /**
    * Default checked state.
    */
-  @property()
-  default = "false";
+  @property({ type: Boolean })
+  default = false;
 
   /**
    * Input value.
@@ -131,12 +113,16 @@ class Switch extends SuperInput {
   @query("input")
   protected _input: HTMLInputElement;
 
+  get observedRecord(): Record<string, any> {
+    return omit(super.observedRecord, "outline-type");
+  }
+
   protected render(): TemplateResult<1> {
     return html`
       <div
         part="root"
         ${attr(this.observedRecord)}
-        class="${this.round ? "round" : "rect"}"
+        class="round"
       >
         <input
           part="input"
@@ -156,16 +142,15 @@ class Switch extends SuperInput {
   }
 
   reset(): void {
-    this.checked = this.default === "true";
+    this.checked = this.default;
     this._input.checked = this.checked;
   }
 
-  connectedCallback(): void {
-    super.connectedCallback();
+  protected _connectedInit(): void {
     if (this.checked) {
-      this.default = "true";
+      this.default = true;
     }
-    if (this.default === "true") {
+    if (this.default === true) {
       this.checked = true;
     }
   }

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>