godown 3.0.0-canary.6 → 3.0.0-canary.8

package/src/components/avatar.ts

@@ -0,0 +1,93 @@
+import { godown, styles } from "@godown/element/decorators/index.js";
+import { htmlSlot } from "@godown/element/directives/index.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle, scopePrefix } from "../core/global-style.js";
+
+const protoName = "avatar";
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Avatar} renders a avatar.
+ *
+ * Renders as an image if it has a src property,
+ * otherwise falls back to name or nameless slot.
+ *
+ * @category display
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      ${cssScope}--size: 2em;
+      width: var(${cssScope}--size);
+      height: var(${cssScope}--size);
+      display: inline-block;
+      vertical-align: bottom;
+    }
+
+    :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%;
+    }
+
+    [part="root"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `,
+)
+class Avatar extends GlobalStyle {
+  /**
+   * Image src.
+   */
+  @property()
+  src: string | undefined | null;
+  /**
+   * If the image is not available, the {@linkcode Avatar.format} will be displayed.
+   */
+  @property()
+  name = "";
+
+  @property({ type: Boolean })
+  round = false;
+
+  protected render() {
+    return html`<div part="root">${this._renderAvatar()}</div>`;
+  }
+
+  private _renderAvatar() {
+    if (this.src) {
+      return html`<img part="image" src="${this.src}" @error=${this._handleError} alt="${this.name}">`;
+    }
+    if (this.name) {
+      return html`<span part="name">${this.format()}</span>`;
+    }
+    return htmlSlot();
+  }
+
+  format() {
+    return this.name;
+  }
+
+  _handleError() {
+    this.src = undefined;
+  }
+}
+
+export default Avatar;

package/src/components/breath.ts

@@ -0,0 +1,151 @@
+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 { property } from "lit/decorators.js";
+
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+
+const defineName = "breath";
+const cssScope = scopePrefix(defineName);
+
+/**
+ * {@linkcode Breath} render the text with a breathing effect.
+ *
+ * Dynamically generate a breathing effect based on the length of the split text.
+ *
+ * If there is not enough CSS variable, overrun elements will use the.
+ *
+ * godown was a css library in its earliest days,
+ * and this is the component version of its first effect.
+ *
+ * Inspired by Vercel home page (2023).
+ *
+ * @category effect
+ */
+@godown(defineName)
+@styles(
+  css`
+    :host {
+      ${cssScope}--deg: 60deg;
+      ${cssScope}--1-1: var(${cssGlobalVars._colors.red[5]});
+      ${cssScope}--1-2: var(${cssGlobalVars._colors.yellow[5]});
+      ${cssScope}--2-1: var(${cssGlobalVars._colors.green[5]});
+      ${cssScope}--2-2: var(${cssGlobalVars._colors.purple[5]});
+      ${cssScope}--3-1: var(${cssGlobalVars._colors.blue[5]});
+      ${cssScope}--3-2: var(${cssGlobalVars._colors.pink[5]});
+      ${cssScope}--1: linear-gradient(var(${cssScope}--deg), var(${cssScope}--1-1), var(${cssScope}--1-2));
+      ${cssScope}--2: linear-gradient(var(${cssScope}--deg), var(${cssScope}--2-1), var(${cssScope}--2-2));
+      ${cssScope}--3: linear-gradient(var(${cssScope}--deg), var(${cssScope}--3-1), var(${cssScope}--3-2));
+    }
+  `,
+  css`
+    :host {
+      display: flex;
+      margin: auto;
+      width: -moz-fit-content;
+      width: fit-content;
+      font-size: 2em;
+      align-items: center;
+      direction: ltr;
+    }
+
+    ::selection {
+      background: none;
+    }
+
+    .rel {
+      position: relative;
+      font-weight: 800;
+      font-size: inherit;
+      letter-spacing: -0.05em;
+    }
+  `,
+  css`
+    .nocolor,
+    .colorful {
+      padding: 0 0.05em;
+      box-sizing: border-box;
+      display: inline-block;
+      animation-iteration-count: infinite;
+      -webkit-text-fill-color: transparent;
+      -webkit-background-clip: text !important;
+      background-clip: text !important;
+    }
+    .colorful {
+      opacity: 0;
+      animation-name: colorfulN;
+    }
+    .nocolor {
+      position: absolute;
+      top: 0;
+      background: var(${cssGlobalVars.clipBackground});
+    }
+  `,
+)
+class Breath extends GlobalStyle {
+  /**
+   * Strings or array of strings,
+   * if array, divided each element into chunks,
+   * otherwise split strings by whitespace.
+   */
+  @property()
+  text: string | string[];
+  /**
+   * Effect duration, ending in s or ms.
+   */
+  @property()
+  duration: string;
+
+  protected render() {
+    const texts = this.getTexts();
+    return [
+      texts.map(this.renderText),
+      htmlStyle(this.computeStyle(texts.length)),
+    ];
+  }
+
+  protected renderText(text: string) {
+    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) {
+    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;
+      })()
+    );
+  }
+
+  protected parseDuration() {
+    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;
+      }
+    }
+  }
+}
+
+export default Breath;

package/src/components/button.ts

@@ -0,0 +1,276 @@
+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 { 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 { css, html } from "lit";
+import { property } from "lit/decorators.js";
+
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+
+const protoName = "button";
+const cssScope = scopePrefix(protoName);
+
+const whiteFont = cssGlobalVars._colors.lightgray[0];
+const blackFont = cssGlobalVars._colors.darkgray[6];
+
+const colors = constructCSSObject(
+  ["color", "background", "gradients"].map((k) => `${cssScope}--${k}`),
+  {
+    black: [
+      whiteFont, // color
+      cssGlobalVars._colors.darkgray[7], // background
+      cssGlobalVars._colors.darkgray[4], // gradients
+    ],
+    gray: [
+      whiteFont, // color
+      cssGlobalVars._colors.darkgray[1], // background
+      cssGlobalVars._colors.lightgray[8], // gradients
+    ],
+    white: [
+      blackFont, // color
+      cssGlobalVars._colors.lightgray[3], // background
+      cssGlobalVars._colors.lightgray[0], // gradients
+    ],
+    blue: [
+      whiteFont, // color
+      cssGlobalVars._colors.blue[6], // background
+      cssGlobalVars._colors.blue[4], // gradients
+    ],
+    green: [
+      whiteFont, // color
+      cssGlobalVars._colors.green[6], // background
+      cssGlobalVars._colors.green[4], // gradients
+    ],
+    red: [
+      whiteFont, // color
+      cssGlobalVars._colors.red[6], // background
+      cssGlobalVars._colors.red[4], // gradients
+    ],
+    orange: [
+      whiteFont, // color
+      cssGlobalVars._colors.orange[6], // background
+      cssGlobalVars._colors.orange[4], // gradients
+    ],
+    pink: [
+      whiteFont, // color
+      cssGlobalVars._colors.pink[6], // background
+      cssGlobalVars._colors.pink[4], // gradients
+    ],
+    purple: [
+      whiteFont, // color
+      cssGlobalVars._colors.purple[6], // background
+      cssGlobalVars._colors.purple[4], // gradients
+    ],
+    yellow: [
+      blackFont, // color
+      cssGlobalVars._colors.yellow[6], // background
+      cssGlobalVars._colors.yellow[4], // gradients
+    ],
+    teal: [
+      whiteFont, // color
+      cssGlobalVars._colors.teal[6], // background
+      cssGlobalVars._colors.teal[4], // gradients
+    ],
+  },
+  () => `:host`,
+  (prop) => toVar(prop),
+);
+
+/**
+ * {@linkcode Button} renders a button.
+ *
+ * Color defaults to black.
+ *
+ * @category input
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host(:not([disabled]):active) {
+      transform: scale(var(${cssScope}--focus-scale));
+    }
+
+    :host([round]) {
+      ${cssScope}--padding-x: .75em;
+      border-radius: calc(infinity * 1px);
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+      filter: brightness(0.85);
+    }
+
+    :host([ghost]) {
+      ${cssScope}--modal-background: var(${cssScope}--ghost-color);
+      box-shadow:inset 0px 0px 0px var(${cssScope}--ghost-width) var(${cssScope}--ghost-color);
+      color: var(${cssScope}--ghost-color);
+      background: transparent;
+    }
+  `,
+  css`
+    :host {
+      ${cssScope}--padding-x: .5em;
+      ${cssScope}--padding-y: .15em;
+      ${cssScope}--padding: var(${cssScope}--padding-y) var(${cssScope}--padding-x);
+      ${cssScope}--modal-animation-duration: 1s;
+      ${cssScope}--ghost-width: .08em;
+      ${cssScope}--focus-scale: .97;
+      ${cssScope}--deg: 45deg;
+      ${cssScope}--ghost-color:var(${cssScope}--background);
+      color: var(${cssScope}--color, inherit);
+      background: linear-gradient(
+        var(${cssScope}--deg),
+        var(${cssScope}--background),
+        var(${cssScope}--gradients, var(${cssScope}--background))
+      );
+      border-radius: 0.3em;
+      width: -moz-fit-content;
+      width: fit-content;
+      transition: 0.1s;
+      display: block;
+      overflow: hidden;
+      text-align: center;
+      padding: 0 !important;
+      cursor: pointer;
+    }
+
+    [part="root"] {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      position: relative;
+      transition: none;
+      user-select: none;
+      border-radius: inherit;
+      transition-duration: inherit;
+    }
+
+    [part="slot"] {
+      padding: var(${cssScope}--padding);
+    }
+
+    i {
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      visibility: visible;
+      pointer-events: none;
+      transform-origin: 0 0;
+      background: var(${cssScope}--modal-background, currentColor);
+      animation-duration: var(${cssScope}--modal-animation-duration);
+    }
+
+    @keyframes kf {
+      0% {
+        transform: scale(0) translate(-50%, -50%);
+        opacity: var(${cssScope}--modal-opacity, 0.18);
+      }
+      80% {
+        transform: scale(1) translate(-50%, -50%);
+      }
+      to {
+        opacity: 0;
+      }
+    }
+  `,
+)
+class Button extends GlobalStyle {
+  /**
+   * Whether to disable this element.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean;
+  /**
+   * Invert font and background color.
+   */
+  @property({ type: Boolean, reflect: true })
+  ghost: boolean;
+  /**
+   * Whether this element is active or not.
+   */
+  @property({ type: Boolean, reflect: true })
+  active: boolean;
+  /**
+   * Enables rounded corners to appear capsule shaped.
+   */
+  @property({ type: Boolean, reflect: true })
+  round: boolean;
+  /**
+   * The primary color.
+   */
+  @property({ reflect: true })
+  color: "none" | keyof typeof colors = "black";
+  /**
+   * Text inside.
+   */
+  @property()
+  text: string;
+
+  @part("modal-root")
+  _modalRoot: HTMLElement;
+  @part("root")
+  _root: HTMLElement;
+
+  protected render() {
+    const color = this.nextColor();
+    return [
+      html`<div part="root">
+        <span part="modal-root"></span>
+        <div part="slot">${this.text || htmlSlot()}</div>
+      </div>`,
+      htmlStyle(colors[color]),
+    ];
+  }
+
+  focus() {
+    if (this.disabled) {
+      return;
+    }
+    this.active = true;
+    super.focus();
+  }
+
+  blur() {
+    this.active = false;
+    super.blur();
+  }
+
+  firstUpdated() {
+    this.events.add(this, "click", this._handelClick, true);
+  }
+
+  protected _handelClick(e: MouseEvent) {
+    if (this.disabled) {
+      e.stopPropagation();
+      e.preventDefault();
+      return;
+    }
+    this._handleModal(e);
+  }
+
+  protected _handleModal(e: MouseEvent) {
+    const modal = document.createElement("i");
+    const rect = this.getBoundingClientRect();
+    const h = rect.height;
+    const w = rect.width;
+    const size = `${Math.sqrt(h * h + w * w) * 2}px`;
+    modal.style.height = size;
+    modal.style.width = size;
+    modal.style.left = `${e.clientX - rect.left}px`;
+    modal.style.top = `${e.clientY - rect.y}px`;
+    modal.style.animationName = "kf";
+    this._modalRoot.appendChild(modal);
+    modal.addEventListener("animationend", () => modal.remove(), { once: true });
+  }
+
+  nextColor() {
+    return this.color;
+  }
+}
+
+export default Button;

package/src/components/card.ts

@@ -0,0 +1,85 @@
+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 } from "lit";
+import { property } from "lit/decorators.js";
+
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type Layout from "../layout.js";
+
+const protoName = "card";
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Card} renders a card.
+ *
+ * This may be similar to {@linkcode Layout},
+ * but it needs to be specified to enable header and footer.
+ *
+ * @slot - The main content of the card.
+ * @slot header - The header of the card.
+ * @slot footer - The footer of the card.
+ * @category display
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      ${cssScope}--shadow-width: .0375em;
+      ${cssScope}--shadow-color: transparent;
+      ${cssScope}--background: var(${cssGlobalVars.background});
+      ${cssScope}--divider-width: 100%;
+      ${cssScope}--divider-height: var(${cssScope}--shadow-width);
+      ${cssScope}--divider-background: var(${cssGlobalVars.passive});
+      ${cssScope}--padding: .75em;
+      color: var(${cssGlobalVars.foreground});
+      background: var(${cssScope}--background);
+      display: block;
+      flex-shrink: 0;
+      position: relative;
+      overflow: hidden;
+      box-sizing: border-box;
+      border-radius: 0.25em;
+      transition: box-shadow .1s ease-in-out;
+    }
+    
+    :host([shadow="hover"]:hover),
+    :host([shadow="always"]) {
+      ${cssScope}--shadow-color: var(${cssScope}--divider-background);
+      box-shadow: inset 0 0 0px var(${cssScope}--shadow-width) var(${cssScope}--shadow-color);
+    }
+
+   [part="divider"] {
+      margin: auto;
+      width: var(${cssScope}--divider-width);
+      height: var(${cssScope}--divider-height);
+      background: var(${cssScope}--divider-background);
+    }
+
+    slot {
+      display: block;
+      padding: var(${cssScope}--padding);
+    }
+  `,
+)
+class Card extends GlobalStyle {
+  @property({ reflect: true })
+  shadow: "none" | "always" | "hover" = "hover";
+
+  @property({ type: Boolean })
+  footer = false;
+  @property({ type: Boolean })
+  header = false;
+
+  protected render() {
+    const hr = html`<hr part="divider">`;
+    return [
+      this.header ? [htmlSlot("header"), hr] : "",
+      htmlSlot(),
+      this.footer ? [hr, htmlSlot("footer")] : "",
+    ];
+  }
+}
+
+export default Card;