godown 3.0.0-canary.1 → 3.0.0-canary.10

package/index.js

@@ -26,6 +26,19 @@ import './text.js';
 import './time.js';
 import './tooltip.js';
 import './typewriter.js';
+export { default as Alert } from './components/alert.js';
+export { default as Avatar } from './components/avatar.js';
+export { default as Breath } from './components/breath.js';
+export { default as Button } from './components/button.js';
+export { default as Card } from './components/card.js';
+export { default as Carousel } from './components/carousel.js';
+export { default as Details } from './components/details.js';
+export { default as Dialog } from './components/dialog.js';
+export { default as Divider } from './components/divider.js';
+export { default as Dragbox } from './components/dragbox.js';
+export { default as Flex } from './components/flex.js';
+export { default as Form } from './components/form.js';
+export { default as Grid } from './components/grid.js';
 export { default as Input } from './components/input.js';
 export { default as Layout } from './components/layout.js';
 export { default as Link } from './components/link.js';
@@ -41,17 +54,4 @@ export { default as Text } from './components/text.js';
 export { default as Time } from './components/time.js';
 export { default as Tooltip } from './components/tooltip.js';
 export { default as Typewriter } from './components/typewriter.js';
-export { default as Alert } from './components/alert.js';
-export { default as Avatar } from './components/avatar.js';
-export { default as Breath } from './components/breath.js';
-export { default as Button } from './components/button.js';
-export { default as Card } from './components/card.js';
-export { default as Carousel } from './components/carousel.js';
-export { default as Details } from './components/details.js';
-export { default as Dialog } from './components/dialog.js';
-export { default as Divider } from './components/divider.js';
-export { default as Dragbox } from './components/dragbox.js';
-export { default as Flex } from './components/flex.js';
-export { default as Form } from './components/form.js';
-export { default as Grid } from './components/grid.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "godown",
-  "version": "3.0.0-canary.1",
+  "version": "3.0.0-canary.10",
   "description": "Simple, stylized, semantic web components",
   "type": "module",
   "main": "index.js",
@@ -18,17 +18,18 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/startracex/godown.git",
-    "directory": "packages/components"
+    "directory": "packages/godown"
   },
   "keywords": [],
   "author": "startracex",
   "license": "MIT",
   "dependencies": {
+    "fmtime": "^0.0.3",
     "lit": "^3.0.0",
     "tslib": "^2.7.0",
-    "@godown/element": "^0.0.0",
-    "@godown/colors": "^0.0.0",
-    "@godown/f7-icon": "^0.0.0"
+    "@godown/colors": "^0.0.1",
+    "@godown/element": "^0.0.3",
+    "@godown/f7-icon": "^0.0.3"
   },
   "publishConfig": {
     "access": "public"
@@ -37,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",
@@ -49,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/range.d.ts

@@ -3,7 +3,7 @@ export default Range;
 export * from "./components/range.js";
 declare global {
     interface HTMLElementTagNameMap {
-        "godown-range-input": Range;
+        "godown-range": Range;
     }
 }
 //# sourceMappingURL=range.d.ts.map

package/range.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range.d.ts","sourceRoot":"","sources":["src/range.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAI1C,eAAe,KAAK,CAAC;AAErB,cAAc,uBAAuB,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,KAAK,CAAC;KAC7B;CACF"}
+{"version":3,"file":"range.d.ts","sourceRoot":"","sources":["src/range.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAI1C,eAAe,KAAK,CAAC;AAErB,cAAc,uBAAuB,CAAC;AAEtC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,KAAK,CAAC;KACvB;CACF"}

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,95 @@
+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.
+ *
+ * @slot - Display content if no `src` or `name` provided.
+ * @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%;
+      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, 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>`;
+  }
+
+  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;