godown 3.0.0-canary.9 → 3.0.1

package/src/components/alert.ts

@@ -1,20 +1,16 @@
-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 { constructCSSObject, toVar } from "@godown/element/tools/css.js";
+import { attr, constructCSSObject, godown, htmlSlot, htmlStyle, styles, toVar } from "@godown/element";
 import iconCheckAltCircle from "@godown/f7-icon/icons/checkmark-alt-circle.js";
 import iconExclamationCircle from "@godown/f7-icon/icons/exclamationmark-circle.js";
 import iconInfoCircle from "@godown/f7-icon/icons/info-circle.js";
 import iconLightbulb from "@godown/f7-icon/icons/lightbulb.js";
 import iconQuestionCircle from "@godown/f7-icon/icons/question-circle.js";
 import iconSlashCircle from "@godown/f7-icon/icons/slash-circle.js";
-import iconXmark from "@godown/f7-icon/icons/xmark.js";
 import iconXmarkCircle from "@godown/f7-icon/icons/xmark-circle.js";
-import { css, html } from "lit";
+import iconXmark from "@godown/f7-icon/icons/xmark.js";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
 
 const protoName = "alert";
 const cssScope = scopePrefix(protoName);
@@ -40,7 +36,7 @@ const darkStyles = constructCSSObject(
     white: [cssGlobalVars._colors.lightgray[2], cssGlobalVars._colors.darkgray[7]],
     black: [cssGlobalVars._colors.darkgray[8], cssGlobalVars._colors.lightgray[5]],
   },
-  () => `:host`,
+  () => ":host",
   (prop) => toVar(prop),
 );
 
@@ -63,7 +59,7 @@ const lightStyles = constructCSSObject(
     white: [cssGlobalVars._colors.lightgray[0], cssGlobalVars._colors.darkgray[0]],
     black: [cssGlobalVars._colors.darkgray[7], cssGlobalVars._colors.lightgray[3]],
   },
-  () => `:host`,
+  () => ":host",
   (prop) => toVar(prop),
 );
 
@@ -110,76 +106,76 @@ const calls = {
  * @slot - Alert content.
  * @slot title - Alert title.
  * @slot icon - Alert icon.
+ * @fires close - Fires when the alert is closed.
  * @category feedback
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      border-radius: var(${cssScope}--border-radius);
-      ${cssScope}--border-radius: .25em;
-      ${cssScope}--border-width: .075em;
-      ${cssScope}--blockquote-width: .2em;
-      ${cssScope}--padding: .5em;
-      display: block;
-      width: 100%;
-    }
+@styles(css`
+  :host,
+  :where(:host([contents]) [part="root"]) {
+    border-radius: var(${cssScope}--border-radius);
+    ${cssScope}--border-radius: .25em;
+    ${cssScope}--border-width: .075em;
+    ${cssScope}--blockquote-width: .2em;
+    ${cssScope}--padding: .5em;
+    display: block;
+    width: 100%;
+  }
 
-    [part="root"] {
-      --color: var(${cssScope}--color);
-      color: var(--color);
-      width: 100%;
-      transition: 0.25s;
-      display: flex;
-      justify-content: space-between;
-      padding: var(${cssScope}--padding);
-      border-radius: inherit;
-      border: var(${cssScope}--border-width) solid var(--color);
-      background: var(${cssScope}--background);
-    }
+  [part="root"] {
+    --color: var(${cssScope}--color);
+    color: var(--color);
+    width: 100%;
+    transition: 0.25s;
+    display: flex;
+    justify-content: space-between;
+    padding: var(${cssScope}--padding);
+    border-radius: inherit;
+    border: var(${cssScope}--border-width) solid var(--color);
+    background: var(${cssScope}--background);
+  }
 
-    [variant="blockquote"] {
-      border-radius: 0;
-      border-left: var(${cssScope}--blockquote-width) solid var(--color);
-      border-bottom: none;
-      border-right: none;
-      border-top: none;
-      background: transparent;
-    }
+  [variant="blockquote"] {
+    border-radius: 0;
+    border-left: var(${cssScope}--blockquote-width) solid var(--color);
+    border-bottom: none;
+    border-right: none;
+    border-top: none;
+    background: transparent;
+  }
 
-    [part="content"]{
-      color: var(--color);
-    }
+  [part="content"] {
+    color: var(--color);
+  }
 
-    [part="root"] {
-      display: grid;
-      align-items: center;
-      grid-template-columns: auto 1fr auto;
-      grid-template-rows: auto 1fr;
-    }
+  [part="root"] {
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto 1fr;
+  }
 
-    [part="title"] {
-      line-height: 2em;
-    }
+  [part="title"] {
+    line-height: 2em;
+  }
 
-    [part="icon"] {
-      display: inline-grid;
-      align-items: center;
-      height: 2em;
-    }
+  [part="icon"] {
+    display: inline-grid;
+    align-items: center;
+    height: 2em;
+  }
 
-    [part="icon"] svg {
-      margin-right: .5em;
-      width: 1.25em;
-      height: 1.25em;
-    }
+  [part="icon"] svg {
+    margin-right: 0.5em;
+    width: 1.25em;
+    height: 1.25em;
+  }
 
-    [part="content"] {
-      grid-row: span 2 / span 2;
-      line-height: 1.5em;
-    }
-    `,
-)
+  [part="content"] {
+    grid-row: span 2 / span 2;
+    line-height: 1.5em;
+  }
+`)
 class Alert extends GlobalStyle {
   /**
    * If it is a legal value, the icon and preset color will be rendered.
@@ -240,32 +236,41 @@ class Alert extends GlobalStyle {
   @property()
   variant: "blockquote" | "dark" | "light" = "dark";
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     const color = calls[this.call]?.color || this.color;
     const icon = this.call ? calls[this.call].icon() : htmlSlot("icon");
-    return [
-      html`<div part="root" variant="${this.variant}">
-      <div part="icon">${icon}</div>
-      <div part="content">
-        <strong part="title">${this.title || htmlSlot("title")}</strong>
-        ${this.content || htmlSlot()}
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        <div part="icon">${icon}</div>
+        <div part="content">
+          <strong part="title">${this.title || htmlSlot("title")}</strong>
+          ${this.content || htmlSlot()}
+        </div>
+        ${this.hideClose || this.variant === "blockquote"
+          ? ""
+          : html`
+              <div
+                part="close"
+                tabindex="0"
+                @click="${this.close}"
+              >
+                ${iconXmark()}
+              </div>
+            `}
+        ${htmlStyle(this.variant === "dark" ? darkStyles[color] : lightStyles[color])}
       </div>
-      ${
-        !this.hideClose && this.variant !== "blockquote"
-          ? html`<div part="close" tabindex=0 @click="${this.close}">${iconXmark()}</div>`
-          : ""
-      }
-    </div>`,
-      htmlStyle(this.variant === "light" ? lightStyles[color] : darkStyles[color]),
-    ];
+    `;
   }
 
-  close() {
+  close(): void {
     this.remove();
     this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
   }
 
-  protected firstUpdated() {
+  protected firstUpdated(): void {
     if (this.autoclose) {
       setTimeout(() => this.close(), this.autoclose);
     }
@@ -280,3 +285,4 @@ class Alert extends GlobalStyle {
 }
 
 export default Alert;
+export { Alert };

package/src/components/avatar.ts

@@ -1,6 +1,5 @@
-import { godown, styles } from "@godown/element/decorators/index.js";
-import { htmlSlot } from "@godown/element/directives/index.js";
-import { css, html } from "lit";
+import { attr, godown, htmlSlot, omit, styles } from "@godown/element";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
 import { GlobalStyle, scopePrefix } from "../core/global-style.js";
@@ -18,38 +17,45 @@ const cssScope = scopePrefix(protoName);
  * @category display
  */
 @godown(protoName)
-@styles(
-  css`
-    :host {
-      ${cssScope}--size: 2em;
-      width: var(${cssScope}--size);
-      height: var(${cssScope}--size);
-      display: inline-block;
-      vertical-align: bottom;
-    }
+@styles(css`
+  :host {
+    ${cssScope}--size: 2em;
+    width: var(${cssScope}--size);
+    height: var(${cssScope}--size);
+    vertical-align: bottom;
+  }
 
-    :host([round]){
-      border-radius:50%;
-    }
+  :host,
+  [part="root"] {
+    display: inline-flex;
+  }
 
-    [part="image"] {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
+  :host([contents]) [part="root"] {
+    display: inline-flex;
+    width: inherit;
+    height: inherit;
+  }
 
-    [part="root"] {
-      overflow: hidden;
-      position: relative;
-      border-radius: inherit;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  `,
-)
+  :host([round]) {
+    border-radius: 50%;
+  }
+
+  [part="image"] {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  [part="root"] {
+    overflow: hidden;
+    position: relative;
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+  }
+`)
 class Avatar extends GlobalStyle {
   /**
    * Image src.
@@ -58,35 +64,55 @@ class Avatar extends GlobalStyle {
   src: string | undefined | null;
 
   /**
-   * If the image is not available, the {@linkcode Avatar.format} will be displayed.
+   * If the image is not available, display name (call {@linkcode Avatar.format}).
    */
   @property()
   name = "";
 
+  /**
+   * Display rounded.
+   */
   @property({ type: Boolean })
   round = false;
 
-  protected render() {
-    return html`<div part="root">${this._renderAvatar()}</div>`;
+  protected render(): TemplateResult<1> {
+    return html`
+      <div
+        part="root"
+        ${attr(omit(this.observedRecord, "src"))}
+      >
+        ${this._renderAvatar()}
+      </div>
+    `;
   }
 
   private _renderAvatar() {
     if (this.src) {
-      return html`<img part="image" src="${this.src}" @error=${this._handleError} alt="${this.name}">`;
+      return html`
+        <img
+          part="image"
+          src="${this.src}"
+          alt="${this.name}"
+          @error=${this._handleError}
+        />
+      `;
     }
     if (this.name) {
-      return html`<span part="name">${this.format()}</span>`;
+      return html`
+        <span part="name">${this.format()}</span>
+      `;
     }
     return htmlSlot();
   }
 
-  format() {
+  format(): string {
     return this.name;
   }
 
-  _handleError() {
+  _handleError(): void {
     this.src = undefined;
   }
 }
 
 export default Avatar;
+export { Avatar };

package/src/components/badge.ts

@@ -0,0 +1,110 @@
+import { attr, godown, htmlSlot, styles } from "@godown/element";
+import { type TemplateResult, css, html } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
+
+type Position = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+
+const protoName = "badge";
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Badge} renders a badge.
+ *
+ * @slot - Badge content.
+ * @category display
+ */
+@godown(protoName)
+@styles(css`
+  :host {
+    ${cssScope}--background: var(${cssGlobalVars.active});
+    ${cssScope}--offset: 0%;
+    ${cssScope}--offset-x: var(${cssScope}--offset);
+    ${cssScope}--offset-y: var(${cssScope}--offset);
+  }
+
+  :host,
+  :host([contents]) [part="root"] {
+    display: inline-block;
+  }
+
+  [part="root"] {
+    position: relative;
+  }
+
+  [part="badge"] {
+    position: absolute;
+    font-size: 75%;
+    padding: 0 0.5em;
+    user-select: none;
+    border-radius: calc(infinity * 1px);
+    transform: translate(-50%, -50%);
+    left: var(--left);
+    top: var(--top);
+    background: var(${cssScope}--background);
+  }
+
+  [part="badge"]:empty {
+    width: 0.5em;
+    height: 0.5em;
+    font-size: 100%;
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  [position^="top"] {
+    --top: calc(0% + var(${cssScope}--offset-y));
+  }
+
+  [position$="right"] {
+    --left: calc(100% - var(${cssScope}--offset-x));
+  }
+
+  [position^="bottom"] {
+    --top: calc(100% - var(${cssScope}--offset-y));
+  }
+
+  [position$="left"] {
+    --left: calc(0% + var(${cssScope}--offset-x));
+  }
+`)
+class Badge extends GlobalStyle {
+  @property()
+  position: Position = "top-right";
+
+  @property({ type: Number })
+  value = 0;
+
+  /**
+   * If `true`, render a dot badge.
+   */
+  @property({ type: Boolean })
+  dot = false;
+
+  @property({ type: Number })
+  max = 99;
+
+  private formatValue(value: number): string {
+    return value > this.max ? this.max + "+" : value + "";
+  }
+
+  render(): TemplateResult<1> {
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${htmlSlot()}
+        ${this.value || this.dot
+          ? html`
+              <div part="badge">${this.dot ? "" : this.formatValue(this.value)}</div>
+            `
+          : ""}
+      </div>
+    `;
+  }
+}
+
+export default Badge;
+export { Badge };

package/src/components/breath.ts

@@ -1,10 +1,8 @@
-import { godown } from "@godown/element/decorators/godown.js";
-import { styles } from "@godown/element/decorators/styles.js";
-import { htmlStyle } from "@godown/element/directives/html-style.js";
-import { css, html } from "lit";
+import { attr, godown, htmlStyle, styles } from "@godown/element";
+import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+import { GlobalStyle, cssGlobalVars, scopePrefix } from "../core/global-style.js";
 
 const defineName = "breath";
 const cssScope = scopePrefix(defineName);
@@ -42,15 +40,22 @@ const cssScope = scopePrefix(defineName);
   `,
   css`
     :host {
-      display: flex;
       margin: auto;
-      width: -moz-fit-content;
       width: fit-content;
       font-size: 2em;
       align-items: center;
       direction: ltr;
     }
 
+    :host,
+    :host([contents]) [part="root"] {
+      display: flex;
+    }
+
+    [part="root"] {
+      display: contents;
+    }
+
     ::selection {
       background: none;
     }
@@ -69,14 +74,16 @@ const cssScope = scopePrefix(defineName);
       box-sizing: border-box;
       display: inline-block;
       animation-iteration-count: infinite;
-      -webkit-text-fill-color: transparent;
+      color: transparent;
       -webkit-background-clip: text !important;
       background-clip: text !important;
     }
+
     .colorful {
       opacity: 0;
       animation-name: colorfulN;
     }
+
     .nocolor {
       position: absolute;
       top: 0;
@@ -99,55 +106,57 @@ class Breath extends GlobalStyle {
   @property()
   duration: string;
 
-  protected render() {
+  protected render(): TemplateResult<1> {
     const texts = this.getTexts();
-    return [
-      texts.map(this.renderText),
-      htmlStyle(this.computeStyle(texts.length)),
-    ];
+    return html`
+      <div
+        part="root"
+        ${attr(this.observedRecord)}
+      >
+        ${[texts.map(this.renderText), htmlStyle(this._computeStyle(texts.length))]}
+      </div>
+    `;
   }
 
-  protected renderText(text: string) {
-    return html`<span class="rel">
-      <span class="nocolor">${text}</span>
-      <span class="colorful">${text}</span>
-    </span>`;
+  protected renderText(text: string): TemplateResult<1> {
+    return html`
+      <span class="rel">
+        <span class="nocolor">${text}</span>
+        <span class="colorful">${text}</span>
+      </span>
+    `;
   }
 
   protected getTexts(): string[] {
     return Array.isArray(this.text) ? this.text : (this.text || this.textContent).split(/\s+/).filter((x) => x);
   }
 
-  protected computeStyle(len: number) {
+  protected _computeStyle(len: number): string {
     const gap = 100 / 2 / len;
     const duration = this.parseDuration() || len * 2 + 2;
-
-    return (
-      `.colorful{animation-duration:${duration}s;}`
-      + `@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${gap * 2}%{opacity:1;}}`
-      + (() => {
-        let style1 = "";
-        for (let number = 1; number <= len; number++) {
-          const delay = -duration / len * (len - number + 1);
-          const defaultNumber = ((number - 1) % 3) + 1;
-          style1 +=
-            `.rel:nth-child(${number}) .colorful{animation-delay:${delay}s;background:var(${cssScope}--${number},var(${cssScope}--${defaultNumber}));}`;
-        }
-        return style1;
-      })()
-    );
+    let style1 = "";
+    for (let number = 1; number <= len; number++) {
+      const delay = (-duration / len) * (len - number + 1);
+      const defaultNumber = ((number - 1) % 3) + 1;
+      style1 += `.rel:nth-child(${number}) .colorful{animation-delay:${delay}s;background:var(${cssScope}--${number},var(${cssScope}--${defaultNumber}));}`;
+    }
+    return `.colorful{animation-duration:${duration}s;}@keyframes colorfulN{0%,${gap * 3}%{opacity:0;}${gap}%,${
+      gap * 2
+    }%{opacity:1;}}${style1}`;
   }
 
-  protected parseDuration() {
+  protected parseDuration(): number | undefined {
     const { duration } = this;
     if (duration) {
       if (duration.endsWith("s")) {
-        return parseFloat(duration.slice(0, -1));
-      } else if (duration.endsWith("ms")) {
-        return parseFloat(duration.slice(0, -2)) / 1000;
+        return Number.parseFloat(duration.slice(0, -1));
+      }
+      if (duration.endsWith("ms")) {
+        return Number.parseFloat(duration.slice(0, -2)) / 1000;
       }
     }
   }
 }
 
 export default Breath;
+export { Breath };