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

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;

package/src/components/dialog.ts

@@ -0,0 +1,165 @@
+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 {
+  /**
+   * Direction of the opening animation.
+   */
+  @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,127 @@
+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;
+  }
+
+  private drag: boolean;
+  private t: number;
+  private l: number;
+  private cx: number;
+  private 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));
+  }
+
+  protected _handleMouseMove: EventListenerFunc;
+  protected _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,70 @@
+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.
+ *
+ * @slot - Flex items.
+ * @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 = false;
+
+  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;

package/src/components/form.ts

@@ -0,0 +1,82 @@
+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 { GlobalStyle } from "../core/global-style.js";
+
+const protoName = "form";
+
+/**
+ * {@linkcode Form} Gets child element key-value object,
+ * which will be nested if the child element is the same as this element.
+ *
+ * @category form
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      display: block;
+    }
+  `,
+)
+class Form<T = object> extends GlobalStyle {
+  @property()
+  name = "";
+
+  get value(): T {
+    return Form.buildValue(this._slot.assignedElements()) as T;
+  }
+
+  nameValue = this.namevalue;
+
+  protected render() {
+    return htmlSlot();
+  }
+
+  reset() {
+    this.deepQuerySelectorAll<HTMLElement & { reset?: () => void; }>("*").forEach((el) => {
+      if (el.tagName === this.tagName) {
+        return;
+      }
+      if (el.reset) {
+        el.reset();
+      }
+    });
+  }
+
+  namevalue(): [string, T] {
+    return [this.name, this.value];
+  }
+
+  static buildValue(
+    elements: (Element & {
+      name?: string;
+      value?: unknown;
+      namevalue?: () => [string, unknown];
+    })[],
+  ): Record<string, any> {
+    const result = {};
+    for (const el of elements) {
+      if (el.tagName === "FORM") {
+        Object.assign(result, Object.fromEntries(new FormData(el as HTMLFormElement).entries()));
+      } else if (el.namevalue) {
+        const [name, value] = el.namevalue();
+        if (name) {
+          result[name] = value;
+        }
+      } else if (el.name && el.value !== undefined) {
+        result[el.name] = el.value;
+      } else if (el.shadowRoot) {
+        for (const slot of el.shadowRoot.querySelectorAll("slot")) {
+          Object.assign(result, this.buildValue(slot.assignedElements()));
+        }
+      }
+    }
+    return result;
+  }
+}
+
+export default Form;

package/src/components/grid.ts

@@ -0,0 +1,75 @@
+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 { isNumerical } from "@godown/element/tools/lib.js";
+import { css } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle } from "../core/global-style.js";
+
+const protoName = "grid";
+
+/**
+ * {@linkcode Grid} provides gird layout.
+ *
+ * @slot - Grid items.
+ * @category layout
+ */
+@godown(protoName)
+@styles(css`:host{display:grid;}`)
+class Grid extends GlobalStyle {
+  /**
+   * CSS property `gap`.
+   */
+  @property()
+  gap: string;
+
+  /**
+   * CSS property `grid-template-columns`.
+   *
+   * If columns is numerical, divide columns equally.
+   */
+  @property()
+  columns: string | number;
+
+  /**
+   * CSS property `grid-template-rows`.
+   *
+   * If rows is numerical, divide rows equally.
+   */
+  @property()
+  rows: string | number;
+
+  /**
+   * CSS property `place-content` (`align-content justify-content`).
+   */
+  @property()
+  content: string;
+
+  /**
+   * CSS property `place-items` (`align-items justify-items`).
+   */
+  @property()
+  items: string;
+
+  protected render() {
+    return [
+      htmlSlot(),
+      htmlStyle(
+        joinRules({
+          ":host": {
+            gap: this.gap,
+            "grid-template-columns": isNumerical(this.columns) ? `repeat(${this.columns},1fr)` : this.columns,
+            "grid-template-rows": isNumerical(this.rows) ? `repeat(${this.rows},1fr)` : this.rows,
+            "place-content": this.content,
+            "place-items": this.items,
+          },
+        }),
+      ),
+    ];
+  }
+}
+
+export default Grid;