godown 3.0.0-canary.7 → 3.0.0-canary.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "godown",
-  "version": "3.0.0-canary.7",
+  "version": "3.0.0-canary.8",
   "description": "Simple, stylized, semantic web components",
   "type": "module",
   "main": "index.js",
@@ -27,9 +27,9 @@
     "fmtime": "^0.0.3",
     "lit": "^3.0.0",
     "tslib": "^2.7.0",
-    "@godown/colors": "^0.0.0",
-    "@godown/f7-icon": "^0.0.2",
-    "@godown/element": "^0.0.2"
+    "@godown/colors": "^0.0.1",
+    "@godown/element": "^0.0.3",
+    "@godown/f7-icon": "^0.0.3"
   },
   "publishConfig": {
     "access": "public"
@@ -38,7 +38,8 @@
     "**/*.{js,d.ts}+(|.map)",
     "custom-elements.json",
     "web-types.json",
-    "vscode.{css,html}-custom-data.json"
+    "vscode.{css,html}-custom-data.json",
+    "src"
   ],
   "custom-elements": "./custom-elements.json",
   "customElements": "./custom-elements.json",
@@ -50,7 +51,7 @@
     "build": "tsc && tsx build.ts",
     "build:ts": "tsc",
     "fmt": "dprint fmt",
-    "lint": "eslint --fix",
+    "lint": "eslint . --fix",
     "manifest": "tsx manifest.ts"
   }
 }

package/src/alert.ts

@@ -0,0 +1,11 @@
+import Alert from "./components/alert.js";
+
+Alert.define();
+
+export default Alert;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-alert": Alert;
+  }
+}

package/src/avatar.ts

@@ -0,0 +1,11 @@
+import Avatar from "./components/avatar.js";
+
+Avatar.define();
+
+export default Avatar;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-avatar": Avatar;
+  }
+}

package/src/breath.ts

@@ -0,0 +1,13 @@
+import Breath from "./components/breath.js";
+
+Breath.define();
+
+export default Breath;
+
+export * from "./components/breath.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-breath": Breath;
+  }
+}

package/src/button.ts

@@ -0,0 +1,11 @@
+import Button from "./components/button.js";
+
+Button.define();
+
+export default Button;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-button": Button;
+  }
+}

package/src/card.ts

@@ -0,0 +1,11 @@
+import Card from "./components/card.js";
+
+Card.define();
+
+export default Card;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-card": Card;
+  }
+}

package/src/carousel.ts

@@ -0,0 +1,11 @@
+import Carousel from "./components/carousel.js";
+
+Carousel.define();
+
+export default Carousel;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-carousel": Carousel;
+  }
+}

package/src/components/alert.ts

@@ -0,0 +1,282 @@
+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 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 { property } from "lit/decorators.js";
+
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+
+const protoName = "alert";
+const cssScope = scopePrefix(protoName);
+
+const vars = ["color", "background"].map((v) => `${cssScope}--${v}`);
+
+const genDark = (key: string) => {
+  return [cssGlobalVars._colors[key][5], cssGlobalVars._colors[key][9]];
+};
+
+const darkStyles = constructCSSObject(
+  vars,
+  {
+    green: genDark("green"),
+    blue: genDark("blue"),
+    orange: genDark("orange"),
+    red: genDark("red"),
+    yellow: genDark("yellow"),
+    purple: genDark("purple"),
+    teal: genDark("teal"),
+    pink: genDark("pink"),
+    gray: [cssGlobalVars._colors.lightgray[5], cssGlobalVars._colors.darkgray[5]],
+    white: [cssGlobalVars._colors.lightgray[2], cssGlobalVars._colors.darkgray[7]],
+    black: [cssGlobalVars._colors.darkgray[8], cssGlobalVars._colors.lightgray[5]],
+  },
+  () => `:host`,
+  (prop) => toVar(prop),
+);
+
+const genLight = (key: string) => {
+  return [cssGlobalVars._colors[key][6], cssGlobalVars._colors[key][0]];
+};
+
+const lightStyles = constructCSSObject(
+  vars,
+  {
+    green: genLight("green"),
+    blue: genLight("blue"),
+    orange: genLight("orange"),
+    red: genLight("red"),
+    yellow: genLight("yellow"),
+    purple: genLight("purple"),
+    teal: genLight("teal"),
+    pink: genLight("pink"),
+    gray: [cssGlobalVars._colors.darkgray[5], cssGlobalVars._colors.lightgray[7]],
+    white: [cssGlobalVars._colors.lightgray[0], cssGlobalVars._colors.darkgray[0]],
+    black: [cssGlobalVars._colors.darkgray[7], cssGlobalVars._colors.lightgray[3]],
+  },
+  () => `:host`,
+  (prop) => toVar(prop),
+);
+
+const calls = {
+  tip: {
+    color: "teal",
+    icon: iconLightbulb,
+  },
+  success: {
+    color: "green",
+    icon: iconCheckAltCircle,
+  },
+  info: {
+    color: "blue",
+    icon: iconInfoCircle,
+  },
+  warning: {
+    color: "orange",
+    icon: iconExclamationCircle,
+  },
+  danger: {
+    color: "red",
+    icon: iconXmarkCircle,
+  },
+  error: {
+    color: "red",
+    icon: iconXmarkCircle,
+  },
+  help: {
+    color: "purple",
+    icon: iconQuestionCircle,
+  },
+  deprecated: {
+    color: "gray",
+    icon: iconSlashCircle,
+  },
+};
+
+/**
+ * {@linkcode Alert} renders a alert.
+ *
+ * Color defaults to blue.
+ *
+ * @slot - Alert content.
+ * @slot title - Alert title.
+ * @slot icon - Alert icon.
+ * @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%;
+    }
+
+    [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;
+    }
+
+    [part="content"]{
+      color: var(--color);
+    }
+
+    [part="root"] {
+      display: grid;
+      align-items: center;
+      grid-template-columns: auto 1fr auto;
+      grid-template-rows: auto 1fr;
+    }
+
+    [part="title"] {
+      line-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="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.
+   */
+  @property()
+  call: "tip" | "success" | "info" | "warning" | "danger" | "error" | "help" | "deprecated";
+
+  /**
+   * The tone of the component.
+   * Overrides the color of the call.
+   */
+  @property()
+  color:
+    | "white"
+    | "black"
+    | "gray"
+    | "green"
+    | "teal"
+    | "blue"
+    | "red"
+    | "purple"
+    | "orange"
+    | "yellow"
+    | "pink"
+    | "none" = "blue";
+
+  /**
+   * Close delay, if 0, it will not be closed automatically.
+   */
+  @property({ type: Number })
+  autoclose = 0;
+
+  /**
+   * The title is bold and the icon height is the same as it.
+   */
+  @property()
+  title: string;
+
+  /**
+   * Content, if zero value, will be rendered as an unnamed slot.
+   */
+  @property()
+  content: string;
+
+  /**
+   * Set true to hide the close button.
+   *
+   * The behavior may change due to the {@linkcode variant} property.
+   */
+  @property({ type: Boolean })
+  hideClose = false;
+
+  /**
+   * Alert variant, if set to `blockquote`, the alert will be rendered as a blockquote.
+   *
+   * If variant is `"blockquote"`, hide the close button.
+   */
+  @property()
+  variant: "blockquote" | "dark" | "light" = "dark";
+
+  protected render() {
+    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()}
+      </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() {
+    this.remove();
+    this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
+  }
+
+  protected firstUpdated() {
+    if (this.autoclose) {
+      setTimeout(() => this.close(), this.autoclose);
+    }
+  }
+
+  static alert(root: HTMLElement, option: Partial<Alert>): Alert {
+    const ai = new this();
+    Object.assign(ai, option);
+    root.appendChild(ai);
+    return ai;
+  }
+}
+
+export default Alert;

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;