godown 3.0.0 → 3.0.1

package/src/components/select.ts

@@ -1,6 +1,6 @@
-import { attr, godown, type HandlerEvent, htmlSlot, part, styles } from "@godown/element";
+import { type HandlerEvent, attr, godown, htmlSlot, part, styles } from "@godown/element";
 import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
-import { css, html, nothing, type TemplateResult } from "lit";
+import { type TemplateResult, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 
 import Input from "./input.js";
@@ -46,31 +46,29 @@ const protoName = "select";
  * @category input
  */
 @godown(protoName)
-@styles(
-  css`
-    [part=input] {
-      text-overflow: ellipsis;
-    }
+@styles(css`
+  [part="input"] {
+    text-overflow: ellipsis;
+  }
 
-    [part=content] {
-      position: absolute;
-      width: 100%;
-      visibility: hidden;
-    }
+  [part="content"] {
+    position: absolute;
+    width: 100%;
+    visibility: hidden;
+  }
 
-    [direction=bottom] [part=content] {
-      top: 100%;
-    }
+  [direction="bottom"] [part="content"] {
+    top: 100%;
+  }
 
-    [direction=top] [part=content] {
-      bottom: 100%;
-    }
+  [direction="top"] [part="content"] {
+    bottom: 100%;
+  }
 
-    [visible] [part=content] {
-      visibility: visible
-    }
-  `,
-)
+  [visible] [part="content"] {
+    visibility: visible;
+  }
+`)
 class Select extends Input {
   // @ts-ignore
   value: string | string[];
@@ -99,41 +97,54 @@ class Select extends Input {
   protected lastChecked: HTMLElement;
   protected defaultText: string;
   protected defaultChecked: HTMLElement[];
-  private _store: { value: string; text: string; }[] = [];
+  private _store: { value: string; text: string }[] = [];
 
   protected render(): TemplateResult<1> {
-    return html`<div
-      part="root"
-      ${
-      attr({
-        ...this.observedRecord,
-        direction: this.direction || this.autoDirection,
-      })
-    }
-      class="input-field"
-    >
-      ${[
-      this._renderPrefix(),
-      html`<input
-          part="input"
-          dir="${this.dir || nothing}"
-          id="${this.makeId}"
-          .value="${this.text}"
-          type="${this.type}"
-          placeholder="${this.placeholder || nothing}"
-          ?autofocus="${this.autofocus}"
-          autocapitalize="${this.autocapitalize || nothing}"
-          autocomplete="${this.autocomplete || nothing}"
-          ?disabled="${this.disabled}"
-          @focus="${this._handleFocus}"
-          @input="${this._handleInput}"
-        >`,
-      html`<label for="${this.makeId}" part="suffix">
-          <i part="icon">${svgCaretDown()}</i>
-        </label>`,
-      html`<label for="${this.makeId}" part="content"> ${htmlSlot()} </label>`,
-    ]}
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr({
+          ...this.observedRecord,
+          direction: this.direction || this.autoDirection,
+        })}
+        class="input-field"
+      >
+        ${[
+          this._renderPrefix(),
+          html`
+            <input
+              part="input"
+              type="${this.type}"
+              .value="${this.text}"
+              ?autofocus="${this.autofocus}"
+              ?disabled="${this.disabled}"
+              autocapitalize="${this.autocapitalize || nothing}"
+              autocomplete="${this.autocomplete || nothing}"
+              placeholder="${this.placeholder || nothing}"
+              id="${this.makeId}"
+              @focus="${this._handleFocus}"
+              @input="${this._handleInput}"
+            />
+          `,
+          html`
+            <label
+              for="${this.makeId}"
+              part="suffix"
+            >
+              <i part="icon">${svgCaretDown()}</i>
+            </label>
+          `,
+          html`
+            <label
+              for="${this.makeId}"
+              part="content"
+            >
+              ${htmlSlot()}
+            </label>
+          `,
+        ]}
+      </div>
+    `;
   }
 
   protected _handleFocus(): void {
@@ -177,11 +188,7 @@ class Select extends Input {
   protected _connectedInit(): void {
     if (!this.value) {
       const checked = [...this.querySelectorAll<HTMLElement>("[checked]")];
-      const list = this.multiple
-        ? checked
-        : checked.length
-        ? [this.lastChecked = checked[0]]
-        : [];
+      const list = this.multiple ? checked : checked.length ? [(this.lastChecked = checked[0])] : [];
       list.forEach((element: HTMLElement) => {
         const operation = this.select(this.optionValue(element), element.textContent);
         updateChecked(element, operation);
@@ -199,23 +206,23 @@ class Select extends Input {
   reset(): void {
     this.value = this.default;
     this.text = this.defaultText;
-    this.querySelectorAll<HTMLElement>("[checked]").forEach(element => updateChecked(element, 0));
-    this.defaultChecked.forEach(element => updateChecked(element, 1));
+    this.querySelectorAll<HTMLElement>("[checked]").forEach((element) => updateChecked(element, 0));
+    this.defaultChecked.forEach((element) => updateChecked(element, 1));
   }
 
   select(value: string, text?: string): 0 | 1 {
     text ||= value;
     let operation: 0 | 1 = 0;
     if (this.multiple) {
-      const i = this._store.findIndex(s => s.value === value);
+      const i = this._store.findIndex((s) => s.value === value);
       if (i > -1) {
         this._store.splice(i, 1);
       } else {
         this._store.push({ value, text });
         operation = 1;
       }
-      this.value = this._store.map(s => s.value);
-      this.text = this._store.map(s => s.text).join(", ");
+      this.value = this._store.map((s) => s.value);
+      this.text = this._store.map((s) => s.text).join(", ");
     } else {
       if (this.value === value) {
         this.value = "";
@@ -236,15 +243,12 @@ class Select extends Input {
     [...this.children].forEach((element: HTMLElement) => {
       this.filterCallback(
         element,
-        !query
-          || contain(this.optionValue(element), query)
-          || contain(element.textContent, query),
+        !query || contain(this.optionValue(element), query) || contain(element.textContent, query),
         query,
       );
     });
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   filterCallback(element: HTMLElement, match: boolean, query: string): void {
     element.style.display = match ? "" : "none";
   }

package/src/components/skeleton.ts

@@ -1,9 +1,9 @@
 import { attr, godown, htmlSlot, styles } from "@godown/element";
 import iconPhoto from "@godown/f7-icon/icons/photo.js";
-import { css, html, type TemplateResult } 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);
@@ -16,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);
+  }
 
-    [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;
-    }
+  [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;
     }
-
-    [animation=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.
@@ -107,10 +105,14 @@ class Skeleton extends GlobalStyle {
     if (!this.loading) {
       return htmlSlot();
     }
-    return html`<div part="root" ${attr(this.observedRecord)}>
-      ${this.type === "image" ? iconPhoto() : ""}
-      ${htmlSlot("loading")}
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${this.type === "image" ? iconPhoto() : ""} ${htmlSlot("loading")}
+      </div>
+    `;
   }
 }
 

package/src/components/split.ts

@@ -1,5 +1,5 @@
-import { attr, classList, godown, type HandlerEvent, styles } from "@godown/element";
-import { css, html, nothing, type TemplateResult } 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";
@@ -30,54 +30,52 @@ const loop = <T>(len: number, fn: (index?: number) => T) => {
  * @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;
+  }
 
-    :host([contents]) [part=root] {
-      width: fit-content;
-    }
+  :host([contents]) [part="root"] {
+    width: fit-content;
+  }
 
-    [part=root] {
-      gap: var(${cssScope}--gap);
-      width: 100%;
-      position: relative;
-      vertical-align: top;
-      display: flex;
-      justify-content: space-between;
-      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-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="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=input] {
-      width: 100%;
-      height: 100%;
-      opacity: 0;
-      background: none;
-      position: absolute;
-      z-index: -1;
-    }
+  [part="input"] {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    background: none;
+    position: absolute;
+    z-index: -1;
+  }
 
-    .focus {
-      box-shadow: var(${cssGlobalVars.input}-box-shadow);
-    }
-  `,
-)
+  .focus {
+    box-shadow: var(${cssGlobalVars.input}-box-shadow);
+  }
+`)
 class Split extends SuperInput {
   /**
    * The number of input boxes.
@@ -98,29 +96,35 @@ class Split extends SuperInput {
   currentValue: (string | void)[] = [];
 
   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="${
-      /* Ensure that input always has a value of length this.len */
-      this.value.padStart(this.len, " ")}"
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
       >
-    </div> `;
+        ${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, " ")
+          }"
+        />
+      </div>
+    `;
   }
 
   connectedCallback(): void {
@@ -168,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;
     }