godown 3.0.0-canary.7 → 3.0.0-canary.9

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="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.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;
+
+  /**
+   * 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";
+
+  /**
+   * 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="slot">
+        ${[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;

package/src/components/details.ts

@@ -0,0 +1,116 @@
+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 svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+
+import { scopePrefix } from "../core/global-style.js";
+import SuperOpenable from "../core/super-openable.js";
+
+const protoName = "details";
+
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Details} similar to `<details>`.
+ *
+ * @slot summary - Details summary if no `summary` is provided.
+ * @slot - Details content.
+ * @fires change - Fired when the details is toggled.
+ * @category display
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      ${cssScope}--icon-deg-open: 0deg;
+      ${cssScope}--icon-deg-close: 90deg;
+      ${cssScope}--icon-deg: 0deg;
+      ${cssScope}--icon-space: 0.3em;
+      ${cssScope}--summary-direction: row;
+      ${cssScope}--transition: .3s;
+      height: fit-content;
+      display: block;
+      transition: var(${cssScope}--transition);
+    }
+
+    dl {
+      height: 100%;
+      position: relative;
+      overflow: hidden;
+    }
+
+    dt {
+      height: 100%;
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+      background: inherit;
+      align-items: center;
+      flex-direction: var(${cssScope}--summary-direction);
+    }
+
+    dd {
+      display: grid;
+      overflow: hidden;
+      grid-template-rows: 0fr;
+      transition: var(${cssScope}--transition);
+      transition-property: grid-template-rows;
+    }
+
+    i {
+      display: flex;
+      backface-visibility: hidden;
+      padding: var(${cssScope}--icon-space);
+      transition: var(${cssScope}--transition);
+      transform: rotate(var(${cssScope}--icon-deg));
+    }
+
+    :host([open]) dd {
+      grid-template-rows: 1fr;
+    }
+
+    :host([float]) dd {
+      top: 100%;
+      position: absolute;
+    }
+
+    i {
+      transform: rotate(var(${cssScope}--icon-deg-close));
+    }
+    :host([open]) i {
+      transform: rotate(var(${cssScope}--icon-deg-open));
+    }
+  `,
+)
+class Details extends SuperOpenable {
+  /**
+   * If it is true, the summary event scope will fill the element.
+   */
+  @property({ type: Boolean })
+  fill = false;
+
+  /**
+   * Summary text.
+   */
+  @property()
+  summary = "";
+
+  @query("dd")
+  protected _dd: HTMLDataListElement;
+
+  protected render() {
+    return html`<dl part="root">
+      <dt part="title" @click="${this._handelClick}">
+        <span part="summary">${this.summary || htmlSlot("summary")} </span>
+        <span><i part="icon">${svgCaretDown()}</i></span>
+      </dt>
+      <dd part="details" @click=${this.fill ? () => this.toggle() : null}>
+        <div style="min-height: 0;">${htmlSlot()}</div>
+      </dd>
+    </dl>`;
+  }
+}
+
+export default Details;