godown 3.0.0 → 3.0.2

package/src/components/details.ts

@@ -1,6 +1,6 @@
 import { attr, godown, htmlSlot, styles } from "@godown/element";
 import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { scopePrefix } from "../core/global-style.js";
@@ -19,66 +19,64 @@ const cssScope = scopePrefix(protoName);
  * @category display
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      ${cssScope}--icon-deg-open: 0deg;
-      ${cssScope}--icon-deg-close: 90deg;
-      ${cssScope}--icon-space: 0.3em;
-      ${cssScope}--summary-direction: row;
-      ${cssScope}--transition: .3s;
-      height: fit-content;
-      display: block;
-      transition: var(${cssScope}--transition);
-    }
+@styles(css`
+  :host {
+    ${cssScope}--icon-deg-open: 0deg;
+    ${cssScope}--icon-deg-close: 90deg;
+    ${cssScope}--icon-space: 0.3em;
+    ${cssScope}--summary-direction: row;
+    ${cssScope}--transition: .3s;
+    height: fit-content;
+    display: block;
+    transition: var(${cssScope}--transition);
+  }
 
-    [part=root] {
-      height: 100%;
-      position: relative;
-      overflow: hidden;
-    }
+  [part="root"] {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
 
-    [part=title] {
-      direction: ltr;
-      height: 100%;
-      display: flex;
-      flex-wrap: nowrap;
-      justify-content: space-between;
-      background: inherit;
-      align-items: center;
-      flex-direction: var(${cssScope}--summary-direction);
-    }
+  [part="title"] {
+    direction: ltr;
+    height: 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    background: inherit;
+    align-items: center;
+    flex-direction: var(${cssScope}--summary-direction);
+  }
 
-    [part=details] {
-      display: grid;
-      overflow: hidden;
-      grid-template-rows: 0fr;
-      transition: var(${cssScope}--transition);
-      transition-property: grid-template-rows;
-    }
+  [part="details"] {
+    display: grid;
+    overflow: hidden;
+    grid-template-rows: 0fr;
+    transition: var(${cssScope}--transition);
+    transition-property: grid-template-rows;
+  }
 
-    :host([open]) [part=details] {
-      grid-template-rows: 1fr;
-    }
+  :host([open]) [part="details"] {
+    grid-template-rows: 1fr;
+  }
 
-    :host([float]) [part=details] {
-      top: 100%;
-      position: absolute;
-    }
+  :host([float]) [part="details"] {
+    top: 100%;
+    position: absolute;
+  }
 
-    [part=icon] {
-      display: flex;
-      backface-visibility: hidden;
-      padding: var(${cssScope}--icon-space);
-      transition: var(${cssScope}--transition);
-      transform: rotate(var(${cssScope}--icon-deg-close));
-    }
+  [part="icon"] {
+    display: flex;
+    backface-visibility: hidden;
+    padding: var(${cssScope}--icon-space);
+    transition: var(${cssScope}--transition);
+    transform: rotate(var(${cssScope}--icon-deg-close));
+  }
 
-    :host([open]) [part=icon] {
-      transform: rotate(var(${cssScope}--icon-deg-open));
-    }
-  `,
-)
+  :host([open]) [part="icon"] {
+    transform: rotate(var(${cssScope}--icon-deg-open));
+  }
+`)
 class Details extends SuperOpenable {
   /**
    * If it is true, the summary event scope will fill the element.
@@ -93,17 +91,28 @@ class Details extends SuperOpenable {
   summary = "";
 
   protected render(): TemplateResult<1> {
-    return html`<dl part="root" ${attr(this.observedRecord)}>
-      <dt part="title" @click="${this._handelClick}">
-        <span part="summary">${this.summary || htmlSlot("summary")}</span>
-        <span>
-          <i part="icon">${svgCaretDown()}</i>
-        </span>
-      </dt>
-      <dd part="details" @click=${this.fill ? () => this.toggle() : null}>
-        <div style="min-height: 0;">${htmlSlot()}</div>
-      </dd>
-    </dl>`;
+    return html`
+      <dl
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        <dt
+          part="title"
+          @click="${this._handelClick}"
+        >
+          <span part="summary">${this.summary || htmlSlot("summary")}</span>
+          <span>
+            <i part="icon">${svgCaretDown()}</i>
+          </span>
+        </dt>
+        <dd
+          part="details"
+          @click=${this.fill ? () => this.toggle() : null}
+        >
+          <div style="min-height: 0;">${htmlSlot()}</div>
+        </dd>
+      </dl>
+    `;
   }
 }
 

package/src/components/dialog.ts

@@ -1,9 +1,9 @@
-import { attr, godown, type HandlerEvent, htmlSlot, styles } from "@godown/element";
-import { css, html, type PropertyValues, type TemplateResult } from "lit";
+import { type HandlerEvent, attr, godown, htmlSlot, styles } from "@godown/element";
+import { type PropertyValues, type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
-import SuperOpenable, { type Direction9 } from "../core/super-openable.js";
+import SuperOpenable from "../core/super-openable.js";
 
 const protoName = "dialog";
 const cssScope = scopePrefix(protoName);
@@ -19,77 +19,74 @@ const cssScope = scopePrefix(protoName);
  * @category feedback
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      ${cssScope}--background: none;
-      ${cssScope}--background-modal: var(${cssGlobalVars.background});
-      ${cssScope}--opacity-modal: 0.2;
-      background: var(${cssScope}--background);
-      pointer-events: none;
-      visibility: hidden;
-      position: fixed;
-      z-index: 1;
-      inset: 0;
-    }
-
-    :host([open]) {
-      visibility: visible;
-    }
+@styles(css`
+  :host {
+    ${cssScope}--background: none;
+    ${cssScope}--background-modal: var(${cssGlobalVars.background});
+    ${cssScope}--opacity-modal: 0.2;
+    background: var(${cssScope}--background);
+    pointer-events: none;
+    visibility: hidden;
+    position: fixed;
+    z-index: 1;
+    inset: 0;
+  }
 
-    :host([open][modal]) [part=modal] {
-      pointer-events: all;
-      visibility: visible;
-      opacity: var(${cssScope}--opacity-modal);
+  :host([open]) {
+    visibility: visible;
+  }
 
-    }
+  :host([open][modal]) [part="modal"] {
+    pointer-events: all;
+    visibility: visible;
+    opacity: var(${cssScope}--opacity-modal);
+  }
 
-    [part=modal] {
-      visibility: hidden;
-      opacity: 0;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      background: var(${cssScope}--background-modal);
-    }
+  [part="modal"] {
+    visibility: hidden;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: var(${cssScope}--background-modal);
+  }
 
-    [part=root] {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      position: relative;
-      align-items: center;
-      justify-content: center;
-    }
+  [part="root"] {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+  }
 
-    [part=container] {
-      pointer-events: all;
-      position: absolute;
-    }
+  [part="container"] {
+    pointer-events: all;
+    position: absolute;
+  }
 
-    [direction^=top] [part=container] {
-      top: 0;
-    }
+  [direction^="top"] [part="container"] {
+    top: 0;
+  }
 
-    [direction^=bottom] [part=container] {
-      bottom: 0;
-    }
+  [direction^="bottom"] [part="container"] {
+    bottom: 0;
+  }
 
-    [direction$=right] [part=container] {
-      right: 0;
-    }
+  [direction$="right"] [part="container"] {
+    right: 0;
+  }
 
-    [direction$=left] [part=container] {
-      left: 0;
-    }
-  `,
-)
+  [direction$="left"] [part="container"] {
+    left: 0;
+  }
+`)
 class Dialog extends SuperOpenable {
   /**
    * Direction of the opening animation.
+   * @deprecated
    */
-  @property()
-  direction: Direction9 = "center";
+  direction: string;
 
   /**
    * Enable modal, blocking event penetration.
@@ -106,10 +103,15 @@ class Dialog extends SuperOpenable {
   private _modalInvoke = false;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(this.observedRecord)}>
-      <div part="modal"></div>
-      <div part="container">${htmlSlot()}</div>
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        <div part="modal"></div>
+        <div part="container">${htmlSlot()}</div>
+      </div>
+    `;
   }
 
   showModal(): void {
@@ -138,15 +140,16 @@ class Dialog extends SuperOpenable {
   }
 
   protected _handleKeydown(e: KeyboardEvent): void {
-    e.preventDefault();
     const keys = this.key.split(/[\s,]/);
     if (keys.includes(e.key) || keys.includes(e.code)) {
+      e.preventDefault();
       this.close();
     }
   }
 
   protected _handelSubmit(e: HandlerEvent<HTMLFormElement>): void {
     if (e.target.method === "dialog") {
+      e.preventDefault();
       this.close();
     }
   }

package/src/components/divider.ts

@@ -1,5 +1,5 @@
 import { attr, godown, styles } from "@godown/element";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -12,34 +12,32 @@ const protoName = "divider";
  * @category layout
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      width: 100%;
-      height: .05em;
-      margin: auto;
-      display: block;
-      background: currentColor;
-    }
-
-    :host([vertical]) {
-      width: .05em;
-      height: max(1em, 100%);
-    }
-
-    :host([contents]) [part=root] {
-      width: 100%;
-      height: .05em;
-      margin: auto;
-      display: block;
-      background: currentColor;
-    }
-
-    [part=root] { 
-      display: contents;
-    }
-  `,
-)
+@styles(css`
+  :host {
+    width: 100%;
+    height: 0.05em;
+    margin: auto;
+    display: block;
+    background: currentColor;
+  }
+
+  :host([vertical]) {
+    width: 0.05em;
+    height: max(1em, 100%);
+  }
+
+  :host([contents]) [part="root"] {
+    width: 100%;
+    height: 0.05em;
+    margin: auto;
+    display: block;
+    background: currentColor;
+  }
+
+  [part="root"] {
+    display: contents;
+  }
+`)
 class Divider extends GlobalStyle {
   /**
    * Vertical display.
@@ -48,7 +46,12 @@ class Divider extends GlobalStyle {
   vertical = false;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(this.observedRecord)}></div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      ></div>
+    `;
   }
 }
 

package/src/components/dragbox.ts

@@ -1,5 +1,5 @@
-import { attr, type EventListenerFunc, godown, htmlSlot, styles } from "@godown/element";
-import { css, html, type TemplateResult } from "lit";
+import { type EventListenerFunc, attr, godown, htmlSlot, styles } from "@godown/element";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -12,19 +12,17 @@ const protoName = "dragbox";
  * @category wrapper
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      position: absolute;
-      display: block;
-    }
+@styles(css`
+  :host {
+    position: absolute;
+    display: block;
+  }
 
-    :host(:active) {
-      -webkit-user-select: none;
-      user-select: none;
-    }
-  `,
-)
+  :host(:active) {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+`)
 class Dragbox extends GlobalStyle {
   /**
    * Width of (`this.offsetParent` or `document.body`).
@@ -59,14 +57,16 @@ class Dragbox extends GlobalStyle {
   y = "auto";
 
   protected render(): TemplateResult<1> {
-    return html`<div
-      part="root"
-      ${attr(this.observedRecord)}
-      @mousedown="${this._handleDragStart}"
-      @mouseup="${this._handleDragEnd}"
-    >
-      ${htmlSlot()}
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+        @mousedown="${this._handleDragStart}"
+        @mouseup="${this._handleDragEnd}"
+      >
+        ${htmlSlot()}
+      </div>
+    `;
   }
 
   protected firstUpdated(): void {

package/src/components/flex.ts

@@ -1,5 +1,5 @@
 import { attr, godown, htmlSlot, htmlStyle, joinRules, styles } from "@godown/element";
-import { css, html, type TemplateResult } from "lit";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -13,18 +13,16 @@ const protoName = "flex";
  * @category layout
  */
 @godown(protoName)
-@styles(
-  css`
-    :host,
-    :host([contents]) [part=root] {
-      display: flex;
-    }
+@styles(css`
+  :host,
+  :host([contents]) [part="root"] {
+    display: flex;
+  }
 
-    [part=root] {
-      display: contents;
-    }
-  `,
-)
+  [part="root"] {
+    display: contents;
+  }
+`)
 class Flex extends GlobalStyle {
   /**
    * CSS property `flex-flow` (`flex-direction flex-wrap`).
@@ -57,22 +55,27 @@ class Flex extends GlobalStyle {
   vertical = false;
 
   protected render(): TemplateResult<1> {
-    return html`<div part="root" ${attr(this.observedRecord)}>
-    ${[
-      htmlSlot(),
-      htmlStyle(
-        joinRules({
-          ":host": {
-            gap: this.gap,
-            "flex-flow": this.flexFlow,
-            "flex-direction": this.vertical && "column",
-            "align-items": this.items,
-            "justify-content": this.content,
-          },
-        }),
-      ),
-    ]}
-    </div>`;
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${[
+          htmlSlot(),
+          htmlStyle(
+            joinRules({
+              ":host": {
+                gap: this.gap,
+                "flex-flow": this.flexFlow,
+                "flex-direction": this.vertical && "column",
+                "align-items": this.items,
+                "justify-content": this.content,
+              },
+            }),
+          ),
+        ]}
+      </div>
+    `;
   }
 }
 

package/src/components/form.ts

@@ -1,5 +1,5 @@
 import { godown, htmlSlot, styles } from "@godown/element";
-import { css, type TemplateResult } from "lit";
+import { type TemplateResult, css } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -13,13 +13,11 @@ const protoName = "form";
  * @category form
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      display: block;
-    }
-  `,
-)
+@styles(css`
+  :host {
+    display: block;
+  }
+`)
 class Form<T = object> extends GlobalStyle {
   @property()
   name = "";
@@ -35,7 +33,7 @@ class Form<T = object> extends GlobalStyle {
   }
 
   reset(): void {
-    this.deepQuerySelectorAll<HTMLElement & { reset?: () => void; }>("*").forEach((el) => {
+    this.deepQuerySelectorAll<HTMLElement & { reset?: () => void }>("*").forEach((el) => {
       if (el.tagName === this.tagName) {
         return;
       }