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

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;

package/src/components/link.ts

@@ -0,0 +1,36 @@
+import { godown } from "@godown/element/decorators/godown.js";
+import { property } from "lit/decorators.js";
+
+import SuperAnchor from "../core/super-anchor.js";
+import Router from "./router.js";
+
+const protoName = "link";
+
+/**
+ * {@linkcode Link} is used for link jumping.
+ *
+ * Set `type` to `"push" `or `"replace"`,
+ * will invoke the history api and trigger the {@linkcode Router.updateAll}.
+ *
+ * @category navigation
+ */
+@godown(protoName)
+class Link extends SuperAnchor {
+  /**
+   * If "push", call `history.pushState`.
+   *
+   * If "replace", call `history.replaceState`
+   */
+  @property()
+  type: "push" | "replace" | "normal" = "normal";
+
+  protected _handleClick(e: MouseEvent) {
+    if (this.type === "push" || this.type === "replace") {
+      e.preventDefault();
+      (history[`${this.type}State`])(null, "", this.href);
+      Router.updateAll();
+    }
+  }
+}
+
+export default Link;

package/src/components/progress.ts

@@ -0,0 +1,101 @@
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+
+import { cssGlobalVars, GlobalStyle } from "../core/global-style.js";
+
+const protoName = "progress";
+
+/**
+ * {@linkcode Progress} similar to `<progress>`.
+ *
+ * @category feedback
+ */
+@godown(protoName)
+@styles(css`
+  :host {
+    width: 100%;
+    height: 0.5em;
+    display: inline-block;
+    border-radius: 0.25em;
+    background: var(${cssGlobalVars.passive});
+    color: var(${cssGlobalVars.active});
+  }
+
+  [part="root"] {
+    height: inherit;
+    z-index: 1;
+    position: relative;
+    border-radius: inherit;
+  }
+
+  [part="value"] {
+    position: absolute;
+    z-index: 2;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: inherit;
+    transition: all 0.3s;
+    animation: progress 1.8s ease-in-out infinite alternate;
+    background: currentColor;
+  }
+
+  @keyframes progress {
+    from {
+      left: 0;
+    }
+    to {
+      left: 80%;
+    }
+  }
+
+  .static [part="value"] {
+    animation: none;
+  }
+`)
+class Progress extends GlobalStyle {
+  /**
+   * Maximum.
+   */
+  @property({ type: Number })
+  max = 1;
+  /**
+   * Minimum.
+   */
+  @property({ type: Number })
+  min = 0;
+  /**
+   * Input value.
+   */
+  @property({ type: Number, reflect: true })
+  value = null;
+
+  protected render() {
+    let width = 20;
+    let className: string;
+    if (this.value !== null) {
+      width = this.parsePercent(this.value);
+      className = "static";
+    }
+    return html`<div part="root" class="${className}">
+      <i part="value" style="width:${width}%;"></i>
+    </div>`;
+  }
+
+  /**
+   * Convert s to a percentage without a percent sign.
+   *
+   * @param s String or number to convert.
+   * @returns Percentage without a percent sign.
+   */
+  parsePercent(s: string | number = "0"): number {
+    if (String(s).includes("%")) {
+      return parseFloat(String(s));
+    }
+    return (parseFloat(String(s)) / (this.max - this.min)) * 100;
+  }
+}
+
+export default Progress;