godown 3.0.0-canary.9 → 3.0.1

package/src/components/range.ts

@@ -1,10 +1,5 @@
-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 { 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 { attr, classList, godown, isNil, joinProperties, part, styles } 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";
@@ -20,44 +15,52 @@ 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)
 @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"] {
       height: 100%;
-      min-height:inherit;
+      min-height: inherit;
       display: flex;
       position: absolute;
       pointer-events: none;
@@ -79,22 +82,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 +110,7 @@ const cssScope = scopePrefix(protoName);
       top: 0;
     }
 
-    .vertical [part="handle"] {
+    [vertical] [part="handle"] {
       top: var(--handle);
       left: 0;
     }
@@ -136,7 +139,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.
@@ -161,10 +164,12 @@ class Range extends SuperInput {
   @state()
   lastFocus?: number;
 
+  protected _focusStack: number[] = [];
+
   /**
    * 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,127 +201,117 @@ 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);
     const gap = this.max - this.min;
 
-    return html`<div
-      part="root"
-      class="${
-      classList({
-        vertical: this.vertical,
-        range: this.range,
-        reverse: this.reverse,
-      })
-    }"
-      @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}%`,
-            ]),
-          )
-          : {}),
-      })
-    }"><div part="track"></div>
-      ${
-      this.range
-        ? (this.value as number[]).map((_, index) => this.renderHandle(index))
-        : this.renderHandle(0)
-    }
-    </div>`;
+    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}%`]),
+              )
+            : {}),
+        })}"
+      >
+        <div part="track"></div>
+        ${this.range ? (this.value as number[]).map((_, index) => this.renderHandle(index)) : this.renderHandle(0)}
+      </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
-      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="--handle:var(--${
-      /* In single-handle mod or end, it is max value */
-      (!range && end) ? `to` : `handle-${index}`})"
+    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}`
+        })"
       ></i>
-      `;
+    `;
   }
 
   private _keydownEvent: EventListenerOrEventListenerObject;
 
-  focusHandle(index: number) {
+  focusHandle(index: number): void {
     this.lastFocus = index;
+    const indexOfFocusStack = this._focusStack.indexOf(index);
+    if (indexOfFocusStack !== -1) {
+      this._focusStack.splice(indexOfFocusStack, 1);
+    }
+    this._focusStack.push(index);
     const handleItem = this._handles.item(index);
     handleItem?.focus();
     if (!this._keydownEvent) {
       this._keydownEvent = this.events.add(document, "keydown", this.createKeydownEvent(index));
     }
+    this.dispatchEvent(new CustomEvent("focus", { detail: index }));
   }
 
-  blurHandle() {
+  blurHandle(): void {
     this.lastFocus = undefined;
     this._keydownEvent = this.events.remove(document, "keydown", this._keydownEvent);
+    this.dispatchEvent(new CustomEvent("blur"));
   }
 
   protected createKeydownEvent(index: number) {
     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);
+        this.createSetValue(index)((old) => old - this.step);
       } else if (e.key === "ArrowRight" || e.key === "ArrowUp") {
         e.preventDefault();
-        this.createSetValue(index)(old => old + this.step);
+        this.createSetValue(index)((old) => old + this.step);
       }
     };
   }
 
   createMouseDown(index: number) {
-    return (e: MouseEvent) => {
+    return (e: MouseEvent): void => {
       this.focusHandle(index);
       this.createMousedownListener(this.createSetValue(index))(e);
     };
   }
 
-  protected _handleMousedownEnd(e: MouseEvent) {
-    this.lastFocus = 0;
-    this.createMousedownListener(this.setEnd)(e);
-    this.focusHandle(0);
-  }
-
   createSetValue(index: number) {
-    return (numberOrModifier: number | ((value: number) => number)) => {
-      const number = typeof numberOrModifier === "number"
-        ? this.normalizeValue(numberOrModifier)
-        : numberOrModifier(this.rangeValue[index]);
+    return (numberOrModifier: number | ((value: number) => number)): void => {
+      const number =
+        typeof numberOrModifier === "number"
+          ? this.normalizeValue(numberOrModifier)
+          : numberOrModifier(this.rangeValue[index]);
       let newValue: any = number;
       if (this.range) {
         newValue = [...this.rangeValue];
         newValue[index] = number;
       }
       this.value = newValue;
+      this.dispatchEvent(new CustomEvent("range", { detail: this.value }));
     };
   }
 
-  setEnd(value: number) {
-    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,20 +321,23 @@ class Range extends SuperInput {
   /**
    * Ensure that the values do not exceed the range of max and min.
    */
-  protected normalizeValue(value: number) {
-    if (value > this.max) { value -= this.step; }
-    else if (value < this.min) { value += this.step; }
+  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) => {
-        const diff = Math.abs(value - item);
-        const prevDiff = Math.abs(value - this.rangeValue[acc]);
-        return diff < prevDiff ? index : acc;
-      }, 0)
+          const diff = Math.abs(value - item);
+          const prevDiff = Math.abs(value - this.rangeValue[acc]);
+          return diff < prevDiff ? index : acc;
+        }, 0)
       : 0;
 
     const set = this.createSetValue(index);
@@ -349,7 +347,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 +361,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 +370,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,20 +383,21 @@ class Range extends SuperInput {
     this.default ??= this.value;
   }
 
-  reset() {
+  reset(): void {
     this.value = this.default;
   }
 
-  sort() {
-    return this.value = this.toSorted();
+  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);
+      return [...(this.value as number[])].sort((a, b) => a - b);
     }
     return this.value;
   }
 }
 
 export default Range;
+export { Range };

package/src/components/rotate.ts

@@ -1,8 +1,5 @@
-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 { godown, htmlSlot, part, styles } from "@godown/element";
+import { type TemplateResult, css, html } from "lit";
 
 import { GlobalStyle, scopePrefix } from "../core/global-style.js";
 
@@ -15,8 +12,7 @@ const cssScope = scopePrefix(protoName);
  * @category wrapper
  */
 @godown(protoName)
-@styles(
-  css`
+@styles(css`
   :host {
     display: block;
     width: -moz-fit-content;
@@ -42,28 +38,34 @@ const cssScope = scopePrefix(protoName);
     margin: calc(-1 * var(${cssScope}--offset));
   }
 
-  [part="slot"]{
+  [part="slot"] {
     z-index: 2;
   }
-`,
-)
+`)
 class Rotate extends GlobalStyle {
   @part("root")
   protected _root: HTMLElement;
 
-  protected render() {
-    return html`<div part="root">
-      <div part="slot" @mousemove="${this._handleRotate}">${htmlSlot()}</div>
-      <i @mouseleave="${this.reset}"></i>
-    </div>`;
+  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 +79,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;
@@ -90,3 +95,4 @@ class Rotate extends GlobalStyle {
 }
 
 export default Rotate;
+export { Rotate };