godown 3.0.0-canary.9 → 3.0.1

package/src/components/details.ts

@@ -1,9 +1,7 @@
-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 svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
-import { css, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { type TemplateResult, css, html } from "lit";
+import { property } from "lit/decorators.js";
 
 import { scopePrefix } from "../core/global-style.js";
 import SuperOpenable from "../core/super-openable.js";
@@ -17,73 +15,68 @@ const cssScope = scopePrefix(protoName);
  *
  * @slot summary - Details summary if no `summary` is provided.
  * @slot - Details content.
- * @fires change - Fired when the details is toggled.
+ * @fires change - Fired when the open changes.
  * @category display
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      ${cssScope}--icon-deg-open: 0deg;
-      ${cssScope}--icon-deg-close: 90deg;
-      ${cssScope}--icon-deg: 0deg;
-      ${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);
+  }
 
-    dl {
-      height: 100%;
-      position: relative;
-      overflow: hidden;
-    }
+  [part="root"] {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
 
-    dt {
-      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);
+  }
 
-    dd {
-      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;
+  }
 
-    i {
-      display: flex;
-      backface-visibility: hidden;
-      padding: var(${cssScope}--icon-space);
-      transition: var(${cssScope}--transition);
-      transform: rotate(var(${cssScope}--icon-deg));
-    }
+  :host([open]) [part="details"] {
+    grid-template-rows: 1fr;
+  }
 
-    :host([open]) dd {
-      grid-template-rows: 1fr;
-    }
+  :host([float]) [part="details"] {
+    top: 100%;
+    position: absolute;
+  }
 
-    :host([float]) dd {
-      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));
+  }
 
-    i {
-      transform: rotate(var(${cssScope}--icon-deg-close));
-    }
-    :host([open]) i {
-      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.
@@ -97,20 +90,31 @@ class Details extends SuperOpenable {
   @property()
   summary = "";
 
-  @query("dd")
-  protected _dd: HTMLDataListElement;
-
-  protected render() {
-    return html`<dl part="root">
-      <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>`;
+  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>
+    `;
   }
 }
 
 export default Details;
+export { Details };

package/src/components/dialog.ts

@@ -1,8 +1,5 @@
-import { type HandlerEvent } from "@godown/element";
-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 { css, html, type PropertyValues } 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";
@@ -18,74 +15,72 @@ const cssScope = scopePrefix(protoName);
  *
  * It listens for the keydown event and also closes itself when the {@linkcode key} contained in the key is pressed.
  *
+ * @fires change - Fires when the open changes.
  * @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;
+  }
 
-    [direction] {
-      pointer-events: all;
-      position: absolute;
-    }
+  [part="container"] {
+    pointer-events: all;
+    position: absolute;
+  }
 
-    [direction^="top"] {
-      top: 0;
-    }
+  [direction^="top"] [part="container"] {
+    top: 0;
+  }
 
-    [direction^="bottom"] {
-      bottom: 0;
-    }
+  [direction^="bottom"] [part="container"] {
+    bottom: 0;
+  }
 
-    [direction$="right"] {
-      right: 0%;
-    }
+  [direction$="right"] [part="container"] {
+    right: 0;
+  }
 
-    [direction$="left"] {
-      left: 0%;
-    }
-  `,
-)
+  [direction$="left"] [part="container"] {
+    left: 0;
+  }
+`)
 class Dialog extends SuperOpenable {
   /**
    * Direction of the opening animation.
@@ -105,16 +100,21 @@ class Dialog extends SuperOpenable {
   @property()
   key = "Escape";
 
-  private _modalInvoke: boolean;
-
-  protected render() {
-    return html`<div part="root">
-      <div part="modal"></div>
-      <div part="container" direction="${this.direction}">${htmlSlot()}</div>
-    </div>`;
+  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>
+    `;
   }
 
-  showModal() {
+  showModal(): void {
     if (!this.modal) {
       this.modal = true;
       this._modalInvoke = true;
@@ -125,7 +125,7 @@ class Dialog extends SuperOpenable {
   private _submitEvent: EventListenerOrEventListenerObject;
   private _keydownEvent: EventListenerOrEventListenerObject;
 
-  protected updated(changedProperties: PropertyValues) {
+  protected updated(changedProperties: PropertyValues): void {
     if (changedProperties.has("open")) {
       if (this.open) {
         this._submitEvent = this.events.add(this, "submit", this._handelSubmit);
@@ -139,7 +139,7 @@ class Dialog extends SuperOpenable {
     }
   }
 
-  protected _handleKeydown(e: KeyboardEvent) {
+  protected _handleKeydown(e: KeyboardEvent): void {
     e.preventDefault();
     const keys = this.key.split(/[\s,]/);
     if (keys.includes(e.key) || keys.includes(e.code)) {
@@ -147,13 +147,13 @@ class Dialog extends SuperOpenable {
     }
   }
 
-  protected _handelSubmit(e: HandlerEvent<HTMLFormElement>) {
+  protected _handelSubmit(e: HandlerEvent<HTMLFormElement>): void {
     if (e.target.method === "dialog") {
       this.close();
     }
   }
 
-  close() {
+  close(): void {
     if (this._modalInvoke) {
       this.modal = false;
       this._modalInvoke = false;
@@ -163,3 +163,4 @@ class Dialog extends SuperOpenable {
 }
 
 export default Dialog;
+export { Dialog };

package/src/components/divider.ts

@@ -1,5 +1,5 @@
-import { godown, styles } from "@godown/element/decorators/index.js";
-import { css } from "lit";
+import { attr, godown, styles } from "@godown/element";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -9,26 +9,35 @@ const protoName = "divider";
 /**
  * {@linkcode Divider} similar to `<hr>`.
  *
- * This component does not render content.
- *
  * @category layout
  */
 @godown(protoName)
-@styles(
-  css`
-  :host{
+@styles(css`
+  :host {
     width: 100%;
-    height: .05em;
+    height: 0.05em;
     margin: auto;
     display: block;
     background: currentColor;
   }
+
   :host([vertical]) {
-    width: .05em;
+    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.
@@ -36,9 +45,15 @@ class Divider extends GlobalStyle {
   @property({ type: Boolean, reflect: true })
   vertical = false;
 
-  connectedCallback() {
-    this.createRenderRoot();
+  protected render(): TemplateResult<1> {
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      ></div>
+    `;
   }
 }
 
 export default Divider;
+export { Divider };

package/src/components/dragbox.ts

@@ -1,8 +1,5 @@
-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 { EventListenerFunc } from "@godown/element/tools/events.js";
-import { css, html } 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";
@@ -15,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`).
@@ -43,7 +38,7 @@ class Dragbox extends GlobalStyle {
     return this.offsetParent?.clientHeight ?? document.body.offsetHeight;
   }
 
-  private drag: boolean;
+  private drag = false;
   private t: number;
   private l: number;
   private cx: number;
@@ -61,15 +56,24 @@ class Dragbox extends GlobalStyle {
   @property()
   y = "auto";
 
-  protected render() {
-    return html`<div @mousedown="${this._handleDragStart}" @mouseup="${this._handleDragEnd}">${htmlSlot()}</div>`;
+  protected render(): TemplateResult<1> {
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+        @mousedown="${this._handleDragStart}"
+        @mouseup="${this._handleDragEnd}"
+      >
+        ${htmlSlot()}
+      </div>
+    `;
   }
 
-  protected firstUpdated() {
+  protected firstUpdated(): void {
     this.reset();
   }
 
-  protected _handleDragStart(e: MouseEvent) {
+  protected _handleDragStart(e: MouseEvent): void {
     this.cx = e.clientX;
     this.cy = e.clientY;
     this.t = this.offsetTop;
@@ -82,13 +86,13 @@ class Dragbox extends GlobalStyle {
   protected _handleMouseMove: EventListenerFunc;
   protected _handleMouseLeave: EventListenerFunc;
 
-  protected _handleDragEnd() {
+  protected _handleDragEnd(): void {
     this.drag = false;
     this.events.remove(document, "mousemove", this._handleMouseMove);
     this.events.remove(document, "mouseleave", this._handleMouseLeave);
   }
 
-  protected _handleDrag(e: MouseEvent) {
+  protected _handleDrag(e: MouseEvent): void {
     if (!this.drag) {
       return;
     }
@@ -111,7 +115,7 @@ class Dragbox extends GlobalStyle {
     }
   }
 
-  reset() {
+  reset(): void {
     const { x, y, style, offsetsWidth, offsetsHeight, offsetWidth, offsetHeight, offsetLeft, offsetTop } = this;
     style.left = x || "0";
     style.top = y || "0";
@@ -125,3 +129,4 @@ class Dragbox extends GlobalStyle {
 }
 
 export default Dragbox;
+export { Dragbox };

package/src/components/flex.ts

@@ -1,9 +1,5 @@
-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 { htmlStyle } from "@godown/element/directives/html-style.js";
-import { joinRules } from "@godown/element/tools/css.js";
-import { css } from "lit";
+import { attr, godown, htmlSlot, htmlStyle, joinRules, styles } from "@godown/element";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -17,7 +13,16 @@ const protoName = "flex";
  * @category layout
  */
 @godown(protoName)
-@styles(css`:host {display:flex;}`)
+@styles(css`
+  :host,
+  :host([contents]) [part="root"] {
+    display: flex;
+  }
+
+  [part="root"] {
+    display: contents;
+  }
+`)
 class Flex extends GlobalStyle {
   /**
    * CSS property `flex-flow` (`flex-direction flex-wrap`).
@@ -49,22 +54,30 @@ class Flex extends GlobalStyle {
   @property({ type: Boolean })
   vertical = false;
 
-  protected render() {
-    return [
-      htmlSlot(),
-      htmlStyle(
-        joinRules({
-          ":host": {
-            gap: this.gap,
-            "flex-flow": this.flexFlow,
-            "flex-direction": this.vertical && "column",
-            "align-items": this.items,
-            "justify-content": this.content,
-          },
-        }),
-      ),
-    ];
+  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>
+    `;
   }
 }
 
 export default Flex;
+export { Flex };