godown 3.0.0-canary.8 → 3.0.0

package/src/components/heading.ts

@@ -0,0 +1,105 @@
+import { attr, godown, htmlSlot, styles } from "@godown/element";
+import { css, html, nothing, type TemplateResult } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle } from "../core/global-style.js";
+
+const protoName = "heading";
+
+/**
+ * {@linkcode Heading} renders a heading.
+ *
+ * If the id is provided, the anchor will be displayed.
+ *
+ * @slot - Heading content.
+ * @category layout
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      display: block;
+      text-align: start;
+    }
+
+    [part=anchor] {
+      position: absolute;
+      text-align: center;
+      min-width: 1.25em;
+      right: 100%;
+    }
+
+    [side=left] [part=anchor] {
+      right: 100%;
+    }
+    [side=right] [part=anchor] {
+      left: 100%;
+    }
+
+    a {
+      color: inherit;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      direction: ltr;
+      font-size: revert;
+      position: relative;
+      width: fit-content;
+    }
+  `,
+)
+class Heading extends GlobalStyle {
+  /**
+   * The heading level.
+   */
+  @property()
+  as: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" = "h1";
+
+  /**
+   * The anchor prefix.
+   */
+  @property()
+  anchor = "#";
+
+  /**
+   * The anchor side.
+   */
+  @property()
+  side: "left" | "right" = "left";
+
+  protected render(): TemplateResult<1> {
+    return html`<a part="root" href="${this.id ? "#" + this.id : nothing}" ${attr(this.observedRecord)}>
+      ${
+      this.wrapHeading(
+        htmlSlot(),
+        this.id ? html`<i part="anchor">${this.anchor}</i>` : "",
+      )
+    }
+    </a> `;
+  }
+
+  protected wrapHeading(...children: any[]): TemplateResult<1> {
+    switch (this.as) {
+      case "h2":
+        return html`<h2>${children}</h2>`;
+      case "h3":
+        return html`<h3>${children}</h3>`;
+      case "h4":
+        return html`<h4>${children}</h4>`;
+      case "h5":
+        return html`<h5>${children}</h5>`;
+      case "h6":
+        return html`<h6>${children}</h6>`;
+      default:
+        return html`<h1>${children}</h1>`;
+    }
+  }
+}
+
+export default Heading;
+export { Heading };

package/src/components/input.ts

@@ -1,8 +1,5 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { part } from "@godown/element/decorators/part.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { classList } from "@godown/element/directives/class-list.js";
-import { css, html, nothing } from "lit";
+import { attr, classList, godown, part, styles } from "@godown/element";
+import { css, html, nothing, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars } from "../core/global-style.js";
@@ -11,8 +8,10 @@ import SuperInput from "../core/super-input.js";
 const protoName = "input";
 
 /**
- * {@linkcode Input} used for text input.
+ * {@linkcode Input} renders a text input.
  *
+ * @fires input - Fires when the input value changes.
+ * @fires change - Fires when the input value changes.
  * @category input
  */
 @godown(protoName)
@@ -30,6 +29,7 @@ const protoName = "input";
 )
 class Input extends SuperInput {
   type: "text" | "search" | "tel" | "url" | "email" | "password" = "text";
+
   value: string;
 
   /**
@@ -39,33 +39,34 @@ class Input extends SuperInput {
   variant: "default" | "outline" = "default";
 
   @part("input")
-  _input: HTMLInputElement;
+  protected _input: HTMLInputElement;
 
-  protected render() {
-    return html`<div part="root" class="${classList("input-field", this.variant)}">
-    ${[
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)} class="${classList("input-field", this.variant)}">
+      ${[
       this._renderPrefix(),
       html`<input
-        part="input"
-        type="${this.type}"
-        id="${this.makeId}"
-        .value="${this.value}"
-        placeholder="${this.placeholder || nothing}"
-        ?autofocus="${this.autofocus}"
-        autocapitalize="${this.autocapitalize || nothing}"
-        autocomplete="${this.autocomplete || nothing}"
-        ?disabled="${this.disabled}"
-        @input="${this._handleInput}"
-      >`,
+          part="input"
+          type="${this.type}"
+          id="${this.makeId}"
+          .value="${this.value}"
+          placeholder="${this.placeholder || nothing}"
+          ?autofocus="${this.autofocus}"
+          autocapitalize="${this.autocapitalize || nothing}"
+          autocomplete="${this.autocomplete || nothing}"
+          ?disabled="${this.disabled}"
+          @input="${this._handleInput}"
+        >`,
       this._renderSuffix(),
     ]}
     </div>`;
   }
 
-  reset() {
+  reset(): void {
     this._input.value = this.default;
     this.value = this.default;
   }
 }
 
 export default Input;
+export { Input };

package/src/components/layout.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 { htmlSlot } from "@godown/element/directives/html-slot.js";
-import { css, html } from "lit";
+import { attr, godown, htmlSlot, styles } from "@godown/element";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle } from "../core/global-style.js";
@@ -10,32 +7,34 @@ import { GlobalStyle } from "../core/global-style.js";
 const protoName = "layout";
 
 /**
- * {@linkcode NavLayout} renders slot and optional top header, bottom footer.
+ * {@linkcode Layout} renders slot and optional top header, bottom footer.
  *
  * @slot - The main content of the layout.
- *
  * @slot header - The header of the layout.
- *
  * @slot footer - The footer of the layout.
- *
  * @category layout
  */
 @godown(protoName)
 @styles(
   css`
-    :host {
+    :host,
+    :host([contents]) [part=root] {
       min-height: 100%;
       display: flex;
       flex-direction: column;
     }
 
-    .sticky {
+    [part=root] {
+      display: contents;
+    }
+
+    [sticky] header {
       position: sticky;
       top: 0;
       z-index: 1;
     }
 
-    [part="main"] {
+    [part=main] {
       position: relative;
       flex: 1;
       width: 100%;
@@ -48,37 +47,33 @@ const protoName = "layout";
     }
   `,
 )
-class NavLayout extends GlobalStyle {
+class Layout extends GlobalStyle {
   /**
-   * If true, hide the header slot.
+   * If true, remove the header slot.
    */
   @property({ type: Boolean })
-  noHeader: boolean;
+  noHeader = false;
+
   /**
-   * If true, hide the footer slot.
+   * If true, remove the footer slot.
    */
   @property({ type: Boolean })
-  noFooter: boolean;
+  noFooter = false;
 
   /**
    * If true, header will sticky.
    */
   @property({ type: Boolean })
-  sticky: boolean;
+  sticky = false;
 
-  protected render() {
-    return html`${
-      !this.noHeader
-        ? html`<header part="header" class="${classList({ sticky: this.sticky })}">${htmlSlot("header")}</header>`
-        : ""
-    }
-    <main part="main">${htmlSlot()}</main>
-    ${
-      !this.noFooter
-        ? html`<footer part="footer">${htmlSlot("footer")}</footer>`
-        : ""
-    }`;
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+      ${!this.noHeader ? html`<header part="header">${htmlSlot("header")}</header>` : ""}
+      <main part="main">${htmlSlot()}</main>
+      ${!this.noFooter ? html`<footer part="footer">${htmlSlot("footer")}</footer>` : ""}
+    </div>`;
   }
 }
 
-export default NavLayout;
+export default Layout;
+export { Layout };

package/src/components/link.ts

@@ -1,4 +1,4 @@
-import { godown } from "@godown/element/decorators/godown.js";
+import { godown } from "@godown/element";
 import { property } from "lit/decorators.js";
 
 import SuperAnchor from "../core/super-anchor.js";
@@ -19,18 +19,29 @@ class Link extends SuperAnchor {
   /**
    * If "push", call `history.pushState`.
    *
-   * If "replace", call `history.replaceState`
+   * If "replace", call `history.replaceState`.
+   *
+   * If "normal", behave like a normal anchor.
    */
   @property()
   type: "push" | "replace" | "normal" = "normal";
 
-  protected _handleClick(e: MouseEvent) {
+  /**
+   * Suppress the update of the {@linkcode Router}.
+   */
+  @property({ type: Boolean })
+  suppress = false;
+
+  protected _handleClick(e: MouseEvent): void {
     if (this.type === "push" || this.type === "replace") {
       e.preventDefault();
       (history[`${this.type}State`])(null, "", this.href);
-      Router.updateAll();
+      if (!this.suppress) {
+        Router.updateAll();
+      }
     }
   }
 }
 
 export default Link;
+export { Link };

package/src/components/progress.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, isNil, styles } from "@godown/element";
+import { css, html, type TemplateResult } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars, GlobalStyle } from "../core/global-style.js";
@@ -13,73 +12,72 @@ const protoName = "progress";
  * @category feedback
  */
 @godown(protoName)
-@styles(css`
-  :host {
-    width: 100%;
-    height: 0.5em;
-    display: inline-block;
-    border-radius: 0.25em;
-    background: var(${cssGlobalVars.passive});
-    color: var(${cssGlobalVars.active});
-  }
+@styles(
+  css`
+    :host {
+      width: 100%;
+      height: 0.5em;
+      border-radius: 0.25em;
+      background: var(${cssGlobalVars.passive});
+      color: var(${cssGlobalVars.active});
+    }
 
-  [part="root"] {
-    height: inherit;
-    z-index: 1;
-    position: relative;
-    border-radius: inherit;
-  }
+    :host,
+    [part=root] {
+      display: block;
+    }
 
-  [part="value"] {
-    position: absolute;
-    z-index: 2;
-    top: 0;
-    left: 0;
-    height: 100%;
-    border-radius: inherit;
-    transition: all 0.3s;
-    animation: progress 1.8s ease-in-out infinite alternate;
-    background: currentColor;
-  }
+    [part=root] {
+      height: inherit;
+      z-index: 1;
+      position: relative;
+      border-radius: inherit;
+    }
 
-  @keyframes progress {
-    from {
+    [part=value] {
+      position: absolute;
+      z-index: 2;
+      top: 0;
       left: 0;
+      height: 100%;
+      border-radius: inherit;
+      transition: all 0.3s;
+      animation: progress 1.8s ease-in-out infinite alternate;
+      background: currentColor;
     }
-    to {
-      left: 80%;
+
+    @keyframes progress {
+      from {
+        left: 0;
+      }
+      to {
+        left: 80%;
+      }
     }
-  }
 
-  .static [part="value"] {
-    animation: none;
-  }
-`)
+    .static [part=value] {
+      animation: none;
+    }
+  `,
+)
 class Progress extends GlobalStyle {
-  /**
-   * Maximum.
-   */
   @property({ type: Number })
   max = 1;
-  /**
-   * Minimum.
-   */
+
   @property({ type: Number })
   min = 0;
-  /**
-   * Input value.
-   */
-  @property({ type: Number, reflect: true })
-  value = null;
 
-  protected render() {
+  @property({ type: Number })
+  value: number;
+
+  protected render(): TemplateResult<1> {
     let width = 20;
     let className: string;
-    if (this.value !== null) {
+    if (!isNil(this.value)) {
       width = this.parsePercent(this.value);
       className = "static";
     }
-    return html`<div part="root" class="${className}">
+    return html`<div part="root" ${attr(this.observedRecord)} class="${className}">
       <i part="value" style="width:${width}%;"></i>
     </div>`;
   }
@@ -99,3 +97,4 @@ class Progress extends GlobalStyle {
 }
 
 export default Progress;
+export { Progress };