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

package/src/components/carousel.ts

@@ -0,0 +1,166 @@
+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.
+ *
+ * @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")
+  _moveRoot: HTMLElement;
+
+  intervalID: number;
+
+  _cloneFirst: HTMLElement | undefined;
+
+  _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,112 @@
+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>`.
+ *
+ * @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")
+  _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;

package/src/components/dialog.ts

@@ -0,0 +1,160 @@
+import { type HandlerEvent } from "@godown/element";
+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, type PropertyValues } from "lit";
+import { property } from "lit/decorators.js";
+
+import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
+import SuperOpenable, { type Direction9 } from "../core/super-openable.js";
+
+const protoName = "dialog";
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Dialog} similar to `<dialog>`.
+ *
+ * Like dialog, it listens for submit events and closes itself when the target method is "dialog".
+ *
+ * It listens for the keydown event and also closes itself when the {@linkcode key} contained in the key is pressed
+ *
+ * @category feedback
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      ${cssScope}--background: none;
+      ${cssScope}--background-modal: var(${cssGlobalVars.background});
+      ${cssScope}--opacity-modal: 0.2;
+      background: var(${cssScope}--background);
+      pointer-events: none;
+      visibility: hidden;
+      position: fixed;
+      z-index: 1;
+      inset:0;
+    }
+
+    :host([open]) {
+      visibility: visible;
+    }
+
+    :host([open][modal]) [part="modal"] {
+      pointer-events: all;
+      visibility: visible;
+      opacity: var(${cssScope}--opacity-modal);
+
+    }
+
+    [part="modal"] {
+      visibility: hidden;
+      opacity: 0;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      background: var(${cssScope}--background-modal);
+    }
+
+    [part="root"] {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+    }
+
+    [direction] {
+      pointer-events: all;
+      position: absolute;
+    }
+
+    [direction^="top"] {
+      top: 0;
+    }
+
+    [direction^="bottom"] {
+      bottom: 0;
+    }
+
+    [direction$="right"] {
+      right: 0%;
+    }
+
+    [direction$="left"] {
+      left: 0%;
+    }
+  `,
+)
+class Dialog extends SuperOpenable {
+  @property()
+  direction: Direction9 = "center";
+  /**
+   * Enable modal, blocking event penetration.
+   */
+  @property({ type: Boolean, reflect: true })
+  modal = false;
+  /**
+   * Close key.
+   */
+  @property()
+  key = "Escape";
+
+  private _modalInvoke: boolean;
+
+  protected render() {
+    return html`<div part="root">
+      <div part="modal"></div>
+      <div part="container" direction="${this.direction}">${htmlSlot()}</div>
+    </div>`;
+  }
+
+  showModal() {
+    if (!this.modal) {
+      this.modal = true;
+      this._modalInvoke = true;
+    }
+    this.show();
+  }
+
+  private _submitEvent: EventListenerOrEventListenerObject;
+  private _keydownEvent: EventListenerOrEventListenerObject;
+
+  protected updated(changedProperties: PropertyValues) {
+    if (changedProperties.has("open")) {
+      if (this.open) {
+        this._submitEvent = this.events.add(this, "submit", this._handelSubmit);
+        if (this.key) {
+          this._keydownEvent = this.events.add(document, "keydown", this._handleKeydown.bind(this));
+        }
+      } else {
+        this.events.remove(this, "submit", this._submitEvent);
+        this.events.remove(document, "keydown", this._keydownEvent);
+      }
+    }
+  }
+
+  protected _handleKeydown(e: KeyboardEvent) {
+    e.preventDefault();
+    const keys = this.key.split(/[\s,]/);
+    if (keys.includes(e.key) || keys.includes(e.code)) {
+      this.close();
+    }
+  }
+
+  protected _handelSubmit(e: HandlerEvent<HTMLFormElement>) {
+    if (e.target.method === "dialog") {
+      this.close();
+    }
+  }
+
+  close() {
+    if (this._modalInvoke) {
+      this.modal = false;
+      this._modalInvoke = false;
+    }
+    this.open = false;
+  }
+}
+
+export default Dialog;

package/src/components/divider.ts

@@ -0,0 +1,44 @@
+import { godown, styles } from "@godown/element/decorators/index.js";
+import { css } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle } from "../core/global-style.js";
+
+const protoName = "divider";
+
+/**
+ * {@linkcode Divider} similar to `<hr>`.
+ *
+ * This component does not render content.
+ *
+ * @category layout
+ */
+@godown(protoName)
+@styles(
+  css`
+  :host{
+    width: 100%;
+    height: .05em;
+    margin: auto;
+    display: block;
+    background: currentColor;
+  }
+  :host([vertical]) {
+    width: .05em;
+    height: max(1em, 100%);
+  }
+  `,
+)
+class Divider extends GlobalStyle {
+  /**
+   * Vertical display.
+   */
+  @property({ type: Boolean, reflect: true })
+  vertical = false;
+
+  connectedCallback() {
+    this.createRenderRoot();
+  }
+}
+
+export default Divider;

package/src/components/dragbox.ts

@@ -0,0 +1,126 @@
+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 { EventListenerFunc } from "@godown/element/tools/events.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle } from "../core/global-style.js";
+
+const protoName = "dragbox";
+
+/**
+ * {@linkcode Dragbox} does not extend beyond the range of {@linkcode Dragbox.offsetsWidth} and {@linkcode Dragbox.offsetsHeight}.
+ *
+ * @category wrapper
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      position: absolute;
+      display: block;
+    }
+
+    :host(:active) {
+      -webkit-user-select: none;
+      user-select: none;
+    }
+  `,
+)
+class Dragbox extends GlobalStyle {
+  /**
+   * Width of (`this.offsetParent` or `document.body`).
+   */
+  get offsetsWidth(): number {
+    return this.offsetParent?.clientWidth ?? document.body.offsetWidth;
+  }
+
+  /**
+   * Height of (`this.offsetParent` or `document.body`).
+   */
+  get offsetsHeight(): number {
+    return this.offsetParent?.clientHeight ?? document.body.offsetHeight;
+  }
+
+  drag: boolean;
+  t: number;
+  l: number;
+  cx: number;
+  cy: number;
+
+  /**
+   * Position x.
+   */
+  @property()
+  x = "auto";
+  /**
+   * Position y.
+   */
+  @property()
+  y = "auto";
+
+  protected render() {
+    return html`<div @mousedown="${this._handleDragStart}" @mouseup="${this._handleDragEnd}">${htmlSlot()}</div>`;
+  }
+
+  protected firstUpdated() {
+    this.reset();
+  }
+
+  protected _handleDragStart(e: MouseEvent) {
+    this.cx = e.clientX;
+    this.cy = e.clientY;
+    this.t = this.offsetTop;
+    this.l = this.offsetLeft;
+    this.drag = true;
+    this._handleMouseMove = this.events.add(document, "mousemove", this._handleDrag.bind(this));
+    this._handleMouseLeave = this.events.add(document, "mouseleave", this._handleDragEnd.bind(this));
+  }
+
+  _handleMouseMove: EventListenerFunc;
+  _handleMouseLeave: EventListenerFunc;
+
+  protected _handleDragEnd() {
+    this.drag = false;
+    this.events.remove(document, "mousemove", this._handleMouseMove);
+    this.events.remove(document, "mouseleave", this._handleMouseLeave);
+  }
+
+  protected _handleDrag(e: MouseEvent) {
+    if (!this.drag) {
+      return;
+    }
+    const nl = e.clientX - (this.cx - this.l);
+    const nt = e.clientY - (this.cy - this.t);
+    const { style, offsetsWidth, offsetsHeight, offsetWidth, offsetHeight } = this;
+    if (nl < 0) {
+      style.left = "0";
+    } else if (nl < offsetsWidth - offsetWidth) {
+      style.left = `${nl}px`;
+    } else {
+      style.left = `${offsetsWidth - offsetWidth}"px"`;
+    }
+    if (nt < 0) {
+      style.top = "0";
+    } else if (nt < offsetsHeight - offsetHeight) {
+      style.top = `${nt}px`;
+    } else {
+      style.top = `${offsetsHeight - offsetHeight}px`;
+    }
+  }
+
+  reset() {
+    const { x, y, style, offsetsWidth, offsetsHeight, offsetWidth, offsetHeight, offsetLeft, offsetTop } = this;
+    style.left = x || "0";
+    style.top = y || "0";
+    if (offsetLeft > offsetsWidth - offsetWidth) {
+      style.left = `${offsetsWidth - offsetWidth}px`;
+    }
+    if (offsetTop > offsetsHeight - offsetHeight) {
+      style.top = `${offsetsHeight - offsetHeight}px`;
+    }
+  }
+}
+
+export default Dragbox;

package/src/components/flex.ts

@@ -0,0 +1,65 @@
+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 { joinRules } from "@godown/element/tools/css.js";
+import { css } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle } from "../core/global-style.js";
+
+const protoName = "flex";
+
+/**
+ * {@linkcode Flex} provides flex layout.
+ *
+ * @category layout
+ */
+@godown(protoName)
+@styles(css`:host {display:flex;}`)
+class Flex extends GlobalStyle {
+  /**
+   * CSS property `flex-flow` (`flex-direction flex-wrap`).
+   */
+  @property({ attribute: "flex-flow" })
+  flexFlow: string;
+  /**
+   * CSS property `gap`.
+   */
+  @property()
+  gap: string;
+  /**
+   * CSS property `justify-content`.
+   */
+  @property()
+  content: string;
+  /**
+   * CSS property `align-items`.
+   */
+  @property()
+  items: string;
+  /**
+   * If true, set flex-direction to "column".
+   */
+  @property({ type: Boolean })
+  vertical: boolean;
+
+  protected render() {
+    return [
+      htmlSlot(),
+      htmlStyle(
+        joinRules({
+          ":host": {
+            gap: this.gap,
+            "flex-flow": this.flexFlow,
+            "flex-direction": this.vertical && "column",
+            "align-items": this.items,
+            "justify-content": this.content,
+          },
+        }),
+      ),
+    ];
+  }
+}
+
+export default Flex;