godown 3.0.0 → 3.0.1

package/src/core/super-anchor.ts

@@ -1,30 +1,28 @@
 import { attr, htmlSlot, styles } from "@godown/element";
-import { css, html, nothing, type TemplateResult } from "lit";
+import { type TemplateResult, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "./global-style.js";
 
-@styles(
-  css`
-    :host {
-      display: inline-block;
-      color: currentColor;
-      text-decoration: none;
-      cursor: default;
-    }
+@styles(css`
+  :host {
+    display: inline-block;
+    color: currentColor;
+    text-decoration: none;
+    cursor: default;
+  }
 
-    :host([href]) {
-      cursor: pointer;
-    }
+  :host([href]) {
+    cursor: pointer;
+  }
 
-    [part=root] {
-      width: 100%;
-      color: inherit;
-      display: inline-block;
-      text-decoration: inherit;
-    }
-  `,
-)
+  [part="root"] {
+    width: 100%;
+    color: inherit;
+    display: inline-block;
+    text-decoration: inherit;
+  }
+`)
 class SuperAnchor extends GlobalStyle {
   /**
    * A element href.
@@ -38,18 +36,19 @@ class SuperAnchor extends GlobalStyle {
   target: "_blank" | "_self" | "_parent" | "_top" = "_self";
 
   protected render(): TemplateResult<1> {
-    return html`<a
-      part="root"
-      ${attr(this.observedRecord)}
-      href="${this.href || nothing}"
-      target="${this.target}"
-      @click=${this._handleClick}
-    >
-      ${htmlSlot()}
-    </a>`;
+    return html`
+      <a
+        part="root"
+        ${attr(this.observedRecord)}
+        href="${this.href || nothing}"
+        target="${this.target}"
+        @click=${this._handleClick}
+      >
+        ${htmlSlot()}
+      </a>
+    `;
   }
 
-  // eslint-disable-next-line
   protected _handleClick(_: MouseEvent): void {}
 }
 

package/src/core/super-input.ts

@@ -1,79 +1,79 @@
 import { type HandlerEvent, htmlSlot, part, styles } from "@godown/element";
 import iconEyeSlashFill from "@godown/f7-icon/icons/eye-slash-fill.js";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { cssGlobalVars, GlobalStyle } from "./global-style.js";
+import { GlobalStyle, cssGlobalVars } from "./global-style.js";
 
 const fieldStyle = css`
-.input-field {
-  display: flex;
-  position: relative;
-  align-items: center;
-  border-radius: inherit;
-  height: inherit;
-}
+  .input-field {
+    display: flex;
+    position: relative;
+    align-items: center;
+    border-radius: inherit;
+    height: inherit;
+  }
 
-.input-field [part=input] {
-  background: transparent;
-  height: 100%;
-  width: 100%;
-  color: inherit;
-  padding: 0 var(${cssGlobalVars.input}-space);
-}
+  .input-field [part="input"] {
+    background: transparent;
+    height: 100%;
+    width: 100%;
+    color: inherit;
+    padding: 0 var(${cssGlobalVars.input}-space);
+  }
 
-.input-field:focus-within,
-.input-field.outline {
-  box-shadow: var(${cssGlobalVars.input}-box-shadow);
-}
+  .input-field:focus-within,
+  .input-field.outline {
+    box-shadow: var(${cssGlobalVars.input}-box-shadow);
+  }
 
-.input-field [part=icon] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .input-field [part="icon"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-.input-field [part=prefix],
-.input-field [part=suffix] {
-  height: 100%;
-  display: flex;
-}
+  .input-field [part="prefix"],
+  .input-field [part="suffix"] {
+    height: 100%;
+    display: flex;
+  }
 
-.input-field [part=suffix] [part=icon] {
-  padding-inline-end: var(${cssGlobalVars.input}-space);
-}
+  .input-field [part="suffix"] [part="icon"] {
+    padding-inline-end: var(${cssGlobalVars.input}-space);
+  }
 
-.input-field [part=prefix] [part=icon] {
-  padding-inline-start: var(${cssGlobalVars.input}-space);
-}
+  .input-field [part="prefix"] [part="icon"] {
+    padding-inline-start: var(${cssGlobalVars.input}-space);
+  }
 `;
 
 const inputStyle = css`
-:host {
-  ${cssGlobalVars.input}-width: 10em;
-  ${cssGlobalVars.input}-height: 1.6em;
-  ${cssGlobalVars.input}-space: 0.2em;
-  ${cssGlobalVars.input}-background: var(${cssGlobalVars.background});
-  ${cssGlobalVars.input}-control: var(${cssGlobalVars.foreground});
-  ${cssGlobalVars.input}-control-edge: var(${cssGlobalVars.active});
-  ${cssGlobalVars.input}-radius: 0.2em;
-  ${cssGlobalVars.input}-box-shadow: 0px 0px 0px .1em var(${cssGlobalVars.active});
-  border-radius: var(${cssGlobalVars.input}-radius);
-}
+  :host {
+    ${cssGlobalVars.input}-width: 10em;
+    ${cssGlobalVars.input}-height: 1.6em;
+    ${cssGlobalVars.input}-space: 0.2em;
+    ${cssGlobalVars.input}-background: var(${cssGlobalVars.background});
+    ${cssGlobalVars.input}-control: var(${cssGlobalVars.foreground});
+    ${cssGlobalVars.input}-control-edge: var(${cssGlobalVars.active});
+    ${cssGlobalVars.input}-radius: 0.2em;
+    ${cssGlobalVars.input}-box-shadow: 0px 0px 0px .1em var(${cssGlobalVars.active});
+    border-radius: var(${cssGlobalVars.input}-radius);
+  }
 
-:host([disabled]) {
-  cursor: not-allowed;
-  filter: brightness(0.85);
-}
+  :host([disabled]) {
+    cursor: not-allowed;
+    filter: brightness(0.85);
+  }
 
-input:disabled {
-  cursor: inherit;
-}
+  input:disabled {
+    cursor: inherit;
+  }
 
-input::-ms-reveal,
-input::-ms-clear {
-  display: none;
-}
+  input::-ms-reveal,
+  input::-ms-clear {
+    display: none;
+  }
 `;
 
 @styles(fieldStyle, inputStyle)
@@ -161,7 +161,7 @@ class SuperInput extends GlobalStyle {
 
   protected _compositionInit(): void {
     if (this._input) {
-      this.events.add(this._input, "compositionstart", () => this.compositing = true);
+      this.events.add(this._input, "compositionstart", () => (this.compositing = true));
       this.events.add(this._input, "compositionend", (e: HandlerEvent<HTMLInputElement>) => {
         this.compositing = false;
         this._handleInput(e);
@@ -184,24 +184,37 @@ class SuperInput extends GlobalStyle {
   }
 
   protected _renderPrefix(): TemplateResult<1> {
-    return html`<label for=${this.makeId} part="prefix">
-    ${htmlSlot("prefix")}</label>`;
+    return html`
+      <label
+        for=${this.makeId}
+        part="prefix"
+      >
+        ${htmlSlot("prefix")}
+      </label>
+    `;
   }
 
   protected _renderSuffix(): TemplateResult<1> {
     const PASSWORD = "password";
-    return html`<label for=${this.makeId} part="suffix">${
-      this.type === "password"
-        ? html`
-        <i
-          part="icon"
-          @mousedown="${() => this._changeInputType("text")}"
-          @mouseup="${() => this._changeInputType(PASSWORD)}"
-          @mouseleave="${() => this._changeInputType(PASSWORD)}"
-        >${iconEyeSlashFill()}</i>`
-        : htmlSlot("suffix")
-    }
-  </label>`;
+    return html`
+      <label
+        for=${this.makeId}
+        part="suffix"
+      >
+        ${this.type === "password"
+          ? html`
+              <i
+                part="icon"
+                @mousedown="${() => this._changeInputType("text")}"
+                @mouseup="${() => this._changeInputType(PASSWORD)}"
+                @mouseleave="${() => this._changeInputType(PASSWORD)}"
+              >
+                ${iconEyeSlashFill()}
+              </i>
+            `
+          : htmlSlot("suffix")}
+      </label>
+    `;
   }
 }
 

package/src/core/super-openable.ts

@@ -10,7 +10,7 @@ class SuperOpenable extends GlobalStyle {
   @property({ type: Boolean, reflect: true })
   open = false;
 
-  toggle(to: boolean = (!this.open) satisfies boolean): void {
+  toggle(to: boolean = !this.open satisfies boolean): void {
     this.open = to;
   }
 
@@ -29,7 +29,6 @@ class SuperOpenable extends GlobalStyle {
     }
   }
 
-  // eslint-disable-next-line
   protected _handelClick(_: MouseEvent): void {
     this.toggle();
   }
@@ -41,11 +40,6 @@ export type Direction4 = "left" | "right" | "top" | "bottom";
 
 export type Direction5 = Direction4 | "center";
 
-export type Direction8 =
-  | Direction4
-  | "top-left"
-  | "top-right"
-  | "bottom-left"
-  | "bottom-right";
+export type Direction8 = Direction4 | "top-left" | "top-right" | "bottom-left" | "bottom-right";
 
 export type Direction9 = Direction8 | Direction5;