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

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;

package/src/components/form.ts

@@ -0,0 +1,83 @@
+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.
+ *
+ * @slot - Child elements.
+ *
+ * @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,66 @@
+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.
+ *
+ * @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 {@linkcode isNumerical} divide equally.
+   */
+  @property()
+  columns: string | number;
+  /**
+   * CSS property `grid-template-rows`, if {@linkcode isNumerical} divide 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;

package/src/components/input.ts

@@ -0,0 +1,71 @@
+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 { classList } from "@godown/element/directives/class-list.js";
+import { css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+
+import { cssGlobalVars } from "../core/global-style.js";
+import SuperInput from "../core/super-input.js";
+
+const protoName = "input";
+
+/**
+ * {@linkcode Input} used for text input.
+ *
+ * @category input
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      width: var(${cssGlobalVars.input}-width);
+      height: var(${cssGlobalVars.input}-height);
+      color: var(${cssGlobalVars.foreground});
+      background: var(${cssGlobalVars.input}-background);
+      border-radius: var(${cssGlobalVars.input}-radius);
+      display: block;
+    }
+  `,
+)
+class Input extends SuperInput {
+  type: "text" | "search" | "tel" | "url" | "email" | "password" = "text";
+  value: string;
+
+  /**
+   * If outline, the outline is always present.
+   */
+  @property()
+  variant: "default" | "outline" = "default";
+
+  @part("input")
+  _input: HTMLInputElement;
+
+  protected render() {
+    return html`<div part="root" class="${classList("input-field", this.variant)}">
+    ${[
+      this._renderPrefix(),
+      html`<input
+        part="input"
+        type="${this.type}"
+        id="${this.makeId}"
+        .value="${this.value}"
+        placeholder="${this.placeholder || nothing}"
+        ?autofocus="${this.autofocus}"
+        autocapitalize="${this.autocapitalize || nothing}"
+        autocomplete="${this.autocomplete || nothing}"
+        ?disabled="${this.disabled}"
+        @input="${this._handleInput}"
+      >`,
+      this._renderSuffix(),
+    ]}
+    </div>`;
+  }
+
+  reset() {
+    this._input.value = this.default;
+    this.value = this.default;
+  }
+}
+
+export default Input;

package/src/components/layout.ts

@@ -0,0 +1,84 @@
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { classList } from "@godown/element/directives/class-list.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle } from "../core/global-style.js";
+
+const protoName = "layout";
+
+/**
+ * {@linkcode NavLayout} renders slot and optional top header, bottom footer.
+ *
+ * @slot - The main content of the layout.
+ *
+ * @slot header - The header of the layout.
+ *
+ * @slot footer - The footer of the layout.
+ *
+ * @category layout
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .sticky {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    [part="main"] {
+      position: relative;
+      flex: 1;
+      width: 100%;
+    }
+
+    header,
+    main,
+    footer {
+      width: 100%;
+    }
+  `,
+)
+class NavLayout extends GlobalStyle {
+  /**
+   * If true, hide the header slot.
+   */
+  @property({ type: Boolean })
+  noHeader: boolean;
+  /**
+   * If true, hide the footer slot.
+   */
+  @property({ type: Boolean })
+  noFooter: boolean;
+
+  /**
+   * If true, header will sticky.
+   */
+  @property({ type: Boolean })
+  sticky: boolean;
+
+  protected render() {
+    return html`${
+      !this.noHeader
+        ? html`<header part="header" class="${classList({ sticky: this.sticky })}">${htmlSlot("header")}</header>`
+        : ""
+    }
+    <main part="main">${htmlSlot()}</main>
+    ${
+      !this.noFooter
+        ? html`<footer part="footer">${htmlSlot("footer")}</footer>`
+        : ""
+    }`;
+  }
+}
+
+export default NavLayout;