godown 3.0.0-canary.9 → 3.0.1

package/src/components/skeleton.ts

@@ -1,11 +1,9 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { attr, godown, htmlSlot, styles } from "@godown/element";
 import iconPhoto from "@godown/f7-icon/icons/photo.js";
-import { css, html } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 
-import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
 
 const protoName = "skeleton";
 const cssScope = scopePrefix(protoName);
@@ -18,73 +16,71 @@ const cssScope = scopePrefix(protoName);
  * @category feedback
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      ${cssScope}--from: var(${cssGlobalVars._colors.darkgray[9]});
-      ${cssScope}--to: var(${cssGlobalVars._colors.darkgray[7]});
-      ${cssScope}--deg: 95deg;
-      ${cssScope}--duration: 1.5s;
-      ${cssScope}--icon-size: 5em;
-      ${cssScope}--icon-margin: .25em;
-      color: var(${cssGlobalVars._colors.darkgray[5]});
-      background: var(${cssScope}--from);
-      min-height: 1.5em;
-      width: 100%;
-      flex-shrink: 0;
-      display: block;
-      overflow: hidden;
-    }
+@styles(css`
+  :host {
+    ${cssScope}--from: var(${cssGlobalVars._colors.darkgray[9]});
+    ${cssScope}--to: var(${cssGlobalVars._colors.darkgray[7]});
+    ${cssScope}--deg: 95deg;
+    ${cssScope}--duration: 1.5s;
+    ${cssScope}--icon-size: 5em;
+    ${cssScope}--icon-margin: .25em;
+    color: var(${cssGlobalVars._colors.darkgray[5]});
+    background: var(${cssScope}--from);
+    min-height: 1.5em;
+    width: 100%;
+    flex-shrink: 0;
+    display: block;
+    overflow: hidden;
+  }
 
-    [part="root"] {
-      height: 100%;
-      min-height: inherit;
-      text-align: center;
-      animation: var(${cssScope}--duration) ease-in-out 0s infinite none running;
-    }
+  [part="root"] {
+    height: 100%;
+    min-height: inherit;
+    text-align: center;
+    animation: var(${cssScope}--duration) ease-in-out 0s infinite none running;
+  }
 
-    svg {
-      --size:var(${cssScope}--icon-size);
-      font-size: var(--size);
-      margin: calc(var(--size) * 0.05);
-    }
+  svg {
+    --size: var(${cssScope}--icon-size);
+    font-size: var(--size);
+    margin: calc(var(--size) * 0.05);
+  }
 
-    .position {
-      background-image: linear-gradient(
-        var(${cssScope}--deg),
-        var(${cssScope}--from) 36%,
-        var(${cssScope}--to) 50%,
-        var(${cssScope}--from) 64%
-      );
-      background-color: transparent;
-      background-size: 200% 100%;
-      animation-name: po;
-    }
+  [animation="position"] {
+    background-image: linear-gradient(
+      var(${cssScope}--deg),
+      var(${cssScope}--from) 36%,
+      var(${cssScope}--to) 50%,
+      var(${cssScope}--from) 64%
+    );
+    background-color: transparent;
+    background-size: 200% 100%;
+    animation-name: po;
+  }
 
-    @keyframes po {
-      from {
-        background-position: 150% center;
-      }
-      to {
-        background-position: -50% center;
-      }
+  @keyframes po {
+    from {
+      background-position: 150% center;
     }
-
-    .opacity {
-      animation-name: op;
-      animation-direction: alternate;
+    to {
+      background-position: -50% center;
     }
+  }
 
-    @keyframes op {
-      50% {
-        opacity: 0.25;
-      }
-      to {
-        opacity: 1;
-      }
+  [animation="opacity"] {
+    animation-name: op;
+    animation-direction: alternate;
+  }
+
+  @keyframes op {
+    50% {
+      opacity: 0.25;
+    }
+    to {
+      opacity: 1;
     }
-  `,
-)
+  }
+`)
 class Skeleton extends GlobalStyle {
   /**
    * If "image", render a image placeholder.
@@ -105,14 +101,20 @@ class Skeleton extends GlobalStyle {
   @state()
   loading = true;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     if (!this.loading) {
       return htmlSlot();
     }
-    return html`<div part="root" class="${this.animation}">
-    ${this.type === "image" ? iconPhoto() : ""}
-    ${htmlSlot("loading")}</div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${this.type === "image" ? iconPhoto() : ""} ${htmlSlot("loading")}
+      </div>
+    `;
   }
 }
 
 export default Skeleton;
+export { Skeleton };

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 { type HandlerEvent, attr, classList, godown, styles } from "@godown/element";
+import { type TemplateResult, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -26,53 +23,59 @@ 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)
-@styles(
-  css`
-    :host {
-      color: var(${cssGlobalVars.foreground});
-      display: block;
-      border-radius: 1px;
-      width: fit-content;
-      ${cssScope}--size: 1.45em;
-      ${cssScope}--gap: .25em;
-    }
+@styles(css`
+  :host {
+    color: var(${cssGlobalVars.foreground});
+    display: block;
+    border-radius: 1px;
+    width: fit-content;
+    ${cssScope}--size: 1.45em;
+    ${cssScope}--gap: .25em;
+  }
 
-    [part="root"] {
-      gap: var(${cssScope}--gap);
-      width: 100%;
-      position: relative;
-      vertical-align: top;
-      display: inline-flex;
-      justify-content: space-between;
-      border-radius: inherit;
-    }
+  :host([contents]) [part="root"] {
+    width: fit-content;
+  }
 
-    [part="input-box"] {
-      width: var(${cssScope}--size);
-      height: var(${cssScope}--size);
-      vertical-align: top;
-      text-align: center;
-      background-color: var(${cssGlobalVars.input}-background);
-      border-radius: inherit;
-    }
+  [part="root"] {
+    gap: var(${cssScope}--gap);
+    width: 100%;
+    position: relative;
+    vertical-align: top;
+    display: flex;
+    justify-content: space-between;
+    border-radius: inherit;
+  }
 
-    [part="input"] {
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      background: none;
-      position: absolute;
-      z-index: -1;
-    }
+  [part="input-box"] {
+    width: var(${cssScope}--size);
+    height: var(${cssScope}--size);
+    vertical-align: top;
+    text-align: center;
+    background-color: var(${cssGlobalVars.input}-background);
+    border-radius: inherit;
+  }
 
-    .focus {
-      box-shadow: var(${cssGlobalVars.input}-box-shadow);
-    }
-  `,
-)
+  [part="input"] {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    background: none;
+    position: absolute;
+    z-index: -1;
+  }
+
+  .focus {
+    box-shadow: var(${cssGlobalVars.input}-box-shadow);
+  }
+`)
 class Split extends SuperInput {
   /**
    * The number of input boxes.
@@ -92,25 +95,34 @@ class Split extends SuperInput {
   @state()
   currentValue: (string | void)[] = [];
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     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>`)
-    }
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${loop(
+          this.len,
+          (index: number) => html`
+            <span
+              part="input-box"
+              class="${classList({ focus: this.current === index })}"
+              @click="${this.disabled ? null : () => this.focusAt(index)}"
+            >
+              ${this.currentValue[index]}
+            </span>
+          `,
+        )}
         <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, " ")}"
-        >
+            /* Ensure that input always has a value of length this.len */
+            this.value.padStart(this.len, " ")
+          }"
+        />
       </div>
     `;
   }
@@ -120,7 +132,7 @@ 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;
@@ -129,8 +141,7 @@ class Split extends SuperInput {
     this.fillInput(e.data);
     this.value = this.currentValue.join("");
 
-    this.dispatchEvent(new CustomEvent("input", { detail: this.value, bubbles: true, composed: true }));
-    this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
+    this.dispatchEvent(new CustomEvent("input", { detail: this.value, composed: true, bubbles: true }));
   }
 
   /**
@@ -149,7 +160,7 @@ class Split extends SuperInput {
    *
    * @param data Input event data.
    */
-  protected fillInput(data: string | null) {
+  protected fillInput(data: string | null): void {
     if (data === null) {
       // delete
 
@@ -161,8 +172,8 @@ class Split extends SuperInput {
         // go to before
 
         this.currentValue[this.current - 1] = null;
-        const lastNotNull = this.currentValue.findLastIndex(a => a !== null);
-        this.current = this.current - 1 < 0 ? lastNotNull < 0 ? 0 : lastNotNull : this.current - 1;
+        const lastNotNull = this.currentValue.findLastIndex((a) => a !== null);
+        this.current = this.current - 1 < 0 ? (lastNotNull < 0 ? 0 : lastNotNull) : this.current - 1;
       }
       return;
     }
@@ -192,23 +203,25 @@ class Split extends SuperInput {
     }
   }
 
-  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));
@@ -219,3 +232,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 { type TemplateResult, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
@@ -15,96 +14,92 @@ 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 {
-      ${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 {
-      transition: var(${cssScope}-transition);
-    }
+@styles(css`
+  :host,
+  :host([contents]) [part="root"] {
+    width: var(${cssScope}-width);
+    height: var(${cssScope}-height);
+    display: inline-block;
+  }
 
-    [part="root"] {
-      border-radius: inherit;
-      position: relative;
-      height: inherit;
-    }
+  :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);
+    vertical-align: bottom;
+    border-radius: 0;
+  }
 
-    [part="root"],
-    input {
-      width: 100%;
-    }
+  [part="root"],
+  [part="handle"] {
+    transition: var(${cssScope}-transition);
+  }
 
-    input {
-      opacity: 0;
-      height: 100%;
-      appearance: none;
-    }
+  [part="root"] {
+    border-radius: inherit;
+    position: relative;
+    height: inherit;
+  }
 
-    span {
-      height: 100%;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      left: 0;
-      width: 50%;
-      pointer-events: none;
-      border-radius: inherit;
-    }
+  [part="input"] {
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    appearance: none;
+  }
 
-    :host([round]) {
-      border-radius: calc(var(${cssScope}-height) / 2);
-    }
+  [part="handle"] {
+    height: 100%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    left: 0;
+    width: 50%;
+    pointer-events: none;
+    border-radius: inherit;
+  }
 
-    :host([checked]) span {
-      left: 50%;
-    }
+  :host([round]) {
+    border-radius: calc(var(${cssScope}-height) / 2);
+    background: var(${cssGlobalVars.passive});
+  }
 
-    .rect .true {
-      background: var(${cssGlobalVars.active});
-    }
+  :host([checked]) [part="handle"] {
+    left: 50%;
+  }
 
-    .rect .false {
-      background: var(${cssGlobalVars.passive});
-    }
+  .rect .true {
+    background: var(${cssGlobalVars.active});
+  }
 
-    .round span{
-      --size: var(${cssScope}-handle-size);
-      border-radius: 100%;
-      background: var(--godown--input-control);
-      width: var(--size);
-      height: var(--size);
-      margin: var(${cssScope}-handle-space);
-    }
+  .rect .false {
+    background: var(${cssGlobalVars.passive});
+  }
 
-    .round {
-      background: var(${cssGlobalVars.passive});
-    }
+  .round [part="handle"] {
+    --size: var(${cssScope}-handle-size);
+    border-radius: 100%;
+    background: var(--godown--input-control);
+    width: var(--size);
+    height: var(--size);
+    margin: var(${cssScope}-handle-space);
+  }
 
-    :host([checked]) .round {
-      background: var(${cssGlobalVars.active});
-    }
-  `,
-)
+  :host([checked]) .round {
+    background: var(${cssGlobalVars.active});
+  }
+`)
 class Switch extends SuperInput {
   /**
-   * Border style.
+   * Display rounded.
    */
   @property({ type: Boolean, reflect: true })
   round = false;
@@ -136,27 +131,36 @@ class Switch extends SuperInput {
   @query("input")
   protected _input: HTMLInputElement;
 
-  protected render() {
-    return html`<div part="root" class="${this.round ? "round" : "rect"}">
-      <input
-        part="input"
-        @change="${this._handleChange}"
-        ?disabled="${this.disabled}"
-        ?checked="${this.checked}"
-        name="${this.name}"
-        id="${this.makeId}"
-        type="checkbox"
+  protected render(): TemplateResult<1> {
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+        class="${this.round ? "round" : "rect"}"
       >
-      <span part="handle" class="${this.checked}"></span>
-    </div>`;
+        <input
+          part="input"
+          type="checkbox"
+          ?disabled="${this.disabled}"
+          ?checked="${this.checked}"
+          name="${this.name}"
+          id="${this.makeId}"
+          @change="${this._handleChange}"
+        />
+        <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";
@@ -166,9 +170,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 }));
   }
 
@@ -178,3 +181,4 @@ class Switch extends SuperInput {
 }
 
 export default Switch;
+export { Switch };