godown 3.0.0-canary.0 → 3.0.0-canary.10

package/src/components/breath.ts

@@ -0,0 +1,153 @@
+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).
+ *
+ * @slot - Breathing parts.
+ * @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,286 @@
+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.white;
+const blackFont = cssGlobalVars.black;
+
+const colors = constructCSSObject(
+  ["color", "background", "gradients"].map((k) => `${cssScope}--${k}`),
+  {
+    black: [
+      whiteFont, // color
+      cssGlobalVars._colors.darkgray[7], // background
+      cssGlobalVars._colors.darkgray[5], // 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.
+ *
+ * Create modal animation upon clicking.
+ *
+ * Available colors (background): none, black, gray, white, blue, green, red, orange, pink, purple, yellow, teal.
+ *
+ * Default color is `black`.
+ *
+ * Set the color to `none` to prevent applying styles.
+ *
+ * @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=content] {
+      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.1);
+      }
+      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;
+
+  /**
+   * Display ghost.
+   */
+  @property({ type: Boolean, reflect: true })
+  ghost: boolean;
+
+  /**
+   * Whether this element is active or not.
+   */
+  @property({ type: Boolean, reflect: true })
+  active: boolean;
+
+  /**
+   * Display rounded.
+   */
+  @property({ type: Boolean, reflect: true })
+  round: boolean;
+
+  /**
+   * The primary color.
+   */
+  @property({ reflect: true })
+  color: "none" | keyof typeof colors = "black";
+
+  /**
+   * Content text.
+   */
+  @property()
+  content: string;
+
+  @part("modal-root")
+  protected _modalRoot: HTMLElement;
+  @part("root")
+  protected _root: HTMLElement;
+
+  protected render() {
+    const color = this.nextColor();
+    return html`<div part="root">
+      <span part="modal-root"></span>
+      <div part="content">
+        ${[this.content || htmlSlot(), htmlStyle(colors[color])]}
+      </div>
+    </div>`;
+  }
+
+  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,80 @@
+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 } 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}--background: var(${cssGlobalVars.background});
+      ${cssScope}--border-width: .0375em;
+      ${cssScope}--border-color: transparent;
+      ${cssScope}--border-background: var(${cssGlobalVars.passive});
+      ${cssScope}--padding: .75em;
+      color: var(${cssGlobalVars.foreground});
+      background: var(${cssScope}--background);
+      border-width: var(${cssScope}--border-width);
+      display: block;
+      flex-shrink: 0;
+      position: relative;
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+
+    slot {
+      display: block;
+      padding: var(${cssScope}--padding);
+    }
+
+    :host,
+    slot {
+      border-color: var(${cssScope}--border-background);
+      border-style: solid;
+    }
+
+    [name=footer]{
+      border-top-width: var(${cssScope}--border-width);
+    }
+
+    [name=header]{
+      border-bottom-width: var(${cssScope}--border-width);
+    }
+  `,
+)
+class Card extends GlobalStyle {
+  @property({ type: Boolean })
+  footer = false;
+
+  @property({ type: Boolean })
+  header = false;
+
+  protected render() {
+    return [
+      this.header ? htmlSlot("header") : "",
+      htmlSlot(),
+      this.footer ? htmlSlot("footer") : "",
+    ];
+  }
+}
+
+export default Card;

package/src/components/carousel.ts

@@ -0,0 +1,169 @@
+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 iconChevronLeft from "@godown/f7-icon/icons/chevron-left.js";
+import iconChevronRight from "@godown/f7-icon/icons/chevron-right.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle } from "../core/global-style.js";
+
+const protoName = "carousel";
+
+/**
+ * {@linkcode Carousel} make the content display as a carousel.
+ *
+ * When this component is `firstUpdated`,
+ * clone the first and last element and make the matching element visible when switching index.
+ *
+ * Child elements should maintain the same size.
+ *
+ * If no width, it will be the width of the first element.
+ *
+ * @slot - Carousel items, should maintain the same size.
+ * @category display
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      display: block;
+      transition: .3s;
+    }
+
+    [part=root] {
+      overflow: hidden;
+    }
+
+    [part=root],
+    [part=move-root] {
+      height: 100%;
+      width: 100%;
+      display: flex;
+      position: relative;
+      transition: inherit;
+    }
+
+    [part=prev],
+    [part=next] {
+      height: 100%;
+      width: 1.5em;
+      z-index: 1;
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      user-select: none;
+    }
+
+    [part=prev] {
+      left: 0;
+    }
+
+    [part=next] {
+      right: 0;
+    }
+
+    slot::slotted(*) {
+      flex-shrink: 0 !important;
+    }
+  `,
+)
+class Carousel extends GlobalStyle {
+  /**
+   * The index of the element is displayed for the first time.
+   */
+  @property({ type: Number })
+  index = 0;
+
+  /**
+   * If autoChange > 0, the rotation will be automated.
+   */
+  @property({ type: Number })
+  autoChange = 0;
+
+  /**
+   * Element width.
+   */
+  @property()
+  width: string;
+
+  @part("move-root")
+  protected _moveRoot: HTMLElement;
+
+  protected intervalID: number;
+
+  private _cloneFirst: HTMLElement | undefined;
+
+  private _cloneLast: HTMLElement | undefined;
+
+  protected render() {
+    return [
+      html`<div part="root">
+        <i part="prev" @click="${this.prev}">${iconChevronLeft()}</i>
+        <div part="move-root" style="transform:${`translateX(-${this.index + 1}00%)`}">${htmlSlot()}</div>
+        <i part="next" @click="${this.next}">${iconChevronRight()}</i>
+    </div>`,
+      htmlStyle(`:host{width:${this.width};}`),
+    ];
+  }
+
+  protected async firstUpdated() {
+    await this.updateComplete;
+
+    if (this.children.length) {
+      this.width ||= `${(this.firstElementChild as HTMLElement).offsetWidth}px`;
+
+      this._cloneFirst?.remove();
+      this._cloneLast?.remove();
+      this._cloneLast = this.firstElementChild.cloneNode(true) as HTMLElement;
+      this._cloneFirst = this.lastElementChild.cloneNode(true) as HTMLElement;
+      this.appendChild(this._cloneLast);
+      this.insertBefore(this._cloneFirst, this.firstElementChild);
+      this.show(this.index);
+    }
+    if (this.autoChange) {
+      this.intervalID = window.setInterval(() => {
+        this.next();
+      }, this.autoChange);
+    }
+  }
+
+  disconnectedCallback() {
+    clearInterval(this.intervalID);
+  }
+
+  show(i: number) {
+    this.index = i;
+  }
+
+  next() {
+    if (this.index === this.childElementCount - 3) {
+      this._doTranslateX("0", true);
+      this.show(0);
+    } else {
+      this.show(this.index + 1);
+    }
+  }
+
+  prev() {
+    if (this.index === 0) {
+      this._doTranslateX(`-${this.childElementCount - 1}00%`, true);
+      this.show(this.children.length - 3);
+    } else {
+      this.show(this.index - 1);
+    }
+  }
+
+  protected _doTranslateX(xValue: string, noTransition?: boolean) {
+    this._moveRoot.style.transform = `translateX(${xValue})`;
+    if (noTransition) {
+      this._moveRoot.style.transition = `none`;
+    }
+    this._moveRoot.getBoundingClientRect();
+  }
+}
+
+export default Carousel;