godown 3.0.0-canary.8 → 3.0.0

package/src/components/split.ts

@@ -1,8 +1,5 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { styles } from "@godown/element/decorators/styles.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 { attr, classList, godown, type HandlerEvent, styles } from "@godown/element";
+import { css, html, nothing, type TemplateResult } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -26,6 +23,10 @@ const loop = <T>(len: number, fn: (index?: number) => T) => {
  *
  * Delete: will move the focus box forward until the first and no inputs for each.
  *
+ * @fires input - Fires when the input value changes.
+ * @fires change - Fires when the input value changes.
+ * @fires focus - Fires when the input is focused.
+ * @fires blur - Fires when the input is blurred.
  * @category input
  */
 @godown(protoName)
@@ -40,17 +41,21 @@ const loop = <T>(len: number, fn: (index?: number) => T) => {
       ${cssScope}--gap: .25em;
     }
 
-    [part="root"] {
+    :host([contents]) [part=root] {
+      width: fit-content;
+    }
+
+    [part=root] {
       gap: var(${cssScope}--gap);
       width: 100%;
       position: relative;
       vertical-align: top;
-      display: inline-flex;
+      display: flex;
       justify-content: space-between;
       border-radius: inherit;
     }
 
-    [part="input-box"] {
+    [part=input-box] {
       width: var(${cssScope}--size);
       height: var(${cssScope}--size);
       vertical-align: top;
@@ -59,7 +64,7 @@ const loop = <T>(len: number, fn: (index?: number) => T) => {
       border-radius: inherit;
     }
 
-    [part="input"] {
+    [part=input] {
       width: 100%;
       height: 100%;
       opacity: 0;
@@ -79,6 +84,7 @@ class Split extends SuperInput {
    */
   @property({ type: Number })
   len = 6;
+
   /**
    * Focus index.
    */
@@ -87,30 +93,34 @@ class Split extends SuperInput {
 
   @state()
   current = -1;
+
   @state()
   currentValue: (string | void)[] = [];
 
-  protected render() {
-    return html`
-      <div part="root">
-    ${
-      loop(this.len, (index: number) =>
-        html`<span part="input-box"
-          @click="${this.disabled ? null : () => this.focusAt(index)}"
-          class="${classList({ focus: this.current === index }) || nothing}"
-        >${this.currentValue[index]}</span>`)
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+      ${
+      loop(
+        this.len,
+        (index: number) =>
+          html`<span
+            part="input-box"
+            @click="${this.disabled ? null : () => this.focusAt(index)}"
+            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> `;
   }
 
   connectedCallback(): void {
@@ -118,12 +128,36 @@ 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;
     }
-    if (e.data === null) {
+
+    this.fillInput(e.data);
+    this.value = this.currentValue.join("");
+
+    this.dispatchEvent(new CustomEvent("input", { detail: this.value, composed: true, bubbles: true }));
+  }
+
+  /**
+   * Fill input with data.
+   *
+   * If data is null
+   *  - If current value is null, move to before.
+   *  - If current value is not null, delete it.
+   *
+   * If data is not null
+   *  - If current value is null, input data.
+   *  - If current value is not null, input data and move to after.
+   *
+   * If data is multiple characters,
+   *   Fill input with data[0] and call fillInput with data.slice(1).
+   *
+   * @param data Input event data.
+   */
+  protected fillInput(data: string | null): void {
+    if (data === null) {
       // delete
 
       if (this.currentValue[this.current] !== null) {
@@ -137,47 +171,53 @@ class Split extends SuperInput {
         const lastNotNull = this.currentValue.findLastIndex(a => a !== null);
         this.current = this.current - 1 < 0 ? lastNotNull < 0 ? 0 : lastNotNull : this.current - 1;
       }
-    } else {
-      // input
+      return;
+    }
 
-      this.currentValue[this.current] = e.data;
-      if (this.current + 1 >= this.len) {
-        // index overflow
+    const multiple = data.length > 1;
 
-        this.current = this.currentValue.indexOf(null);
-        if (this.current === -1) {
-          this.blur();
-        }
-      } else {
-        // go to after
+    // input
+    this.currentValue[this.current] = data[0];
+    if (this.current + 1 >= this.len) {
+      // index overflow
 
-        this.current += 1;
+      this.current = this.currentValue.indexOf(null);
+      if (this.current === -1) {
+        this.blur();
       }
-    }
+    } else {
+      // go to after
 
-    this.value = this.currentValue.join("");
+      this.current += 1;
+    }
 
-    this.dispatchEvent(new CustomEvent("input", { detail: this.value, bubbles: true, composed: true }));
-    this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
+    if (multiple) {
+      const after = data.slice(1);
+      if (after) {
+        this.fillInput(after);
+      }
+    }
   }
 
-  focus() {
+  focus(): void {
     this.focusAt(this.current);
     super.focus();
   }
 
-  focusAt(i: number) {
+  focusAt(i: number): void {
     this.current = i;
     this._input.focus();
+    this.dispatchEvent(new CustomEvent("focus", { detail: i, bubbles: true, composed: true }));
   }
 
-  blur() {
+  blur(): void {
     this._input.blur();
     this.current = -1;
     super.blur();
+    this.dispatchEvent(new CustomEvent("blur", { bubbles: true, composed: true }));
   }
 
-  reset() {
+  reset(): void {
     this.current = -1;
     this.value = this.default;
     this.currentValue = this.value.split("").concat(Array(this.len - this.value.length).fill(null));
@@ -188,3 +228,4 @@ class Split extends SuperInput {
 }
 
 export default Split;
+export { Split };

package/src/components/switch.ts

@@ -1,6 +1,5 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { css, html } from "lit";
+import { attr, godown, styles } from "@godown/element";
+import { css, html, type TemplateResult } from "lit";
 import { property, query } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -15,47 +14,49 @@ const cssScope = scopePrefix(protoName);
  * The switch is rectangular by default,
  * set the round property to rounded switch.
  *
+ * @fires change - Fires when the switch is switched.
  * @category input
  */
 @godown(protoName)
 @styles(
   css`
+    :host,
+    :host([contents]) [part=root] {
+      width: var(${cssScope}-width);
+      height: var(${cssScope}-height);
+      display: inline-block;
+    }
+
     :host {
       ${cssScope}-width: 3em;
       ${cssScope}-height: calc(var(${cssScope}-width) / 2);
       ${cssScope}-handle-size: 1.25em;
+      ${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;
     }
 
-    [part="root"],
-    span {
+    [part=root],
+    [part=handle] {
       transition: var(${cssScope}-transition);
     }
 
-    [part="root"] {
+    [part=root] {
       border-radius: inherit;
       position: relative;
       height: inherit;
     }
-
-    [part="root"],
-    input {
-      width: 100%;
-    }
-
-    input {
+    
+    [part=input] {
       opacity: 0;
+      width: 100%;
       height: 100%;
       appearance: none;
     }
 
-    span {
+    [part=handle] {
       height: 100%;
       display: inline-flex;
       align-items: center;
@@ -69,10 +70,11 @@ const cssScope = scopePrefix(protoName);
 
     :host([round]) {
       border-radius: calc(var(${cssScope}-height) / 2);
+      background: var(${cssGlobalVars.passive});
     }
 
-    :host([checked]) span {
-      transform: translateX(100%);
+    :host([checked]) [part=handle] {
+      left: 50%;
     }
 
     .rect .true {
@@ -83,17 +85,13 @@ const cssScope = scopePrefix(protoName);
       background: var(${cssGlobalVars.passive});
     }
 
-    .round span::after{
+    .round [part=handle] {
       --size: var(${cssScope}-handle-size);
-      content:"";
       border-radius: 100%;
       background: var(--godown--input-control);
       width: var(--size);
       height: var(--size);
-    }
-
-    .round {
-      background: var(${cssGlobalVars.passive});
+      margin: var(${cssScope}-handle-space);
     }
 
     :host([checked]) .round {
@@ -103,25 +101,29 @@ const cssScope = scopePrefix(protoName);
 )
 class Switch extends SuperInput {
   /**
-   * Border style.
+   * Display rounded.
    */
   @property({ type: Boolean, reflect: true })
   round = false;
+
   /**
    * Whether this element is selected or not.
    */
   @property({ type: Boolean, reflect: true })
   checked = false;
+
   /**
-   * Whether this element is disabled or not.
+   * Disable this element.
    */
   @property({ type: Boolean, reflect: true })
   disabled = false;
+
   /**
-   * Parsed by JSON.parse to checked.
+   * Default checked state.
    */
   @property()
   default = "false";
+
   /**
    * Input value.
    */
@@ -129,10 +131,10 @@ class Switch extends SuperInput {
   value = "on";
 
   @query("input")
-  _input: HTMLInputElement;
+  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}"
@@ -142,17 +144,16 @@ class Switch extends SuperInput {
         id="${this.makeId}"
         type="checkbox"
       >
-      <span class="${this.checked}">
-      </span>
+      <span part="handle" class="${this.checked}"></span>
     </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";
@@ -162,9 +163,8 @@ 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 }));
   }
 
@@ -174,3 +174,4 @@ class Switch extends SuperInput {
 }
 
 export default Switch;
+export { Switch };

package/src/components/text.ts

@@ -1,8 +1,5 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { styles } from "@godown/element/decorators/styles.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 { attr, classList, godown, htmlSlot, styles } from "@godown/element";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -17,7 +14,8 @@ const cssScope = scopePrefix(protoName);
  * @category display
  */
 @godown(protoName)
-@styles(css`
+@styles(
+  css`
     :host {
       ${cssScope}--color: currentColor;
       ${cssScope}--color-hover: currentColor;
@@ -27,7 +25,7 @@ const cssScope = scopePrefix(protoName);
       overflow-wrap: break-word;
     }
 
-    [part="root"] {
+    [part=root] {
       white-space: nowrap;
       width: 100%;
       vertical-align: bottom;
@@ -38,11 +36,11 @@ const cssScope = scopePrefix(protoName);
       color: var(${cssScope}--color);
     }
 
-    [part="root"]:hover {
+    [part=root]:hover {
       color: var(${cssScope}--color-hover, var(${cssScope}--color));
     }
 
-    [part="root"]:active {
+    [part=root]:active {
       color: var(${cssScope}--color-active, var(${cssScope}--color));
     }
 
@@ -56,7 +54,7 @@ const cssScope = scopePrefix(protoName);
       text-decoration: none;
     }
 
-    .clip{
+    [clip] {
       background: var(${cssGlobalVars.clipBackground});
       display: inline-block;
       color: transparent;
@@ -64,7 +62,8 @@ const cssScope = scopePrefix(protoName);
       background-clip: text;
       -webkit-background-clip: text;
     }
-`)
+  `,
+)
 class Text extends GlobalStyle {
   /**
    * Underline behavior.
@@ -76,20 +75,14 @@ class Text extends GlobalStyle {
    * Set background-clip to text.
    */
   @property({ type: Boolean })
-  clip: boolean;
+  clip = false;
 
-  protected render() {
-    return html`<span
-      part="root"
-      class="${
-      classList(this.underline, {
-        clip: this.clip,
-      })
-    }"
-    >
+  protected render(): TemplateResult<1> {
+    return html`<span part="root" ${attr(this.observedRecord)} class="${classList(this.underline)}">
       ${htmlSlot()}
     </span>`;
   }
 }
 
 export default Text;
+export { Text };

package/src/components/time.ts

@@ -1,7 +1,6 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { styles } from "@godown/element/decorators/styles.js";
+import { attr, godown, styles } from "@godown/element";
 import fmtime from "fmtime";
-import { css, type PropertyValues } from "lit";
+import { css, html, type PropertyValues, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -11,44 +10,49 @@ const protoName = "time";
 /**
  * {@linkcode Time} renders a formatting time.
  *
+ * @fires time - Fires when the time changes.
  * @category display
  */
 @godown(protoName)
 @styles(css`:host{text-align: center;}`)
 class Time extends GlobalStyle {
   /**
-   * Cancels the next character formatting.
+   * Escape symbol.
    */
   @property()
   escape = "%";
+
   /**
    * Format strings.
    */
   @property()
   format = "YYYY-MM-DD hh:mm:ss UTFZ";
+
   /**
    * 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 = 0;
+  timeout: any;
+
   /**
    * The number of milliseconds that change with each update.
    */
   @property({ type: Number })
-  gap = 0;
+  gap: any;
 
-  timeoutId: number;
+  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();
     }
@@ -63,15 +67,17 @@ class Time extends GlobalStyle {
     }
   }
 
-  disconnectedCallback() {
+  disconnectedCallback(): void {
     clearInterval(this.timeoutId);
   }
 
-  startTimeout() {
-    return window.setInterval(() => {
+  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;
+export { Time };