godown 3.0.0-canary.1 → 3.0.0-canary.11

package/src/components/grid.ts

@@ -0,0 +1,87 @@
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.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, html, type TemplateResult } 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,
+    :host([contents]) [part=root] {
+      display: grid;
+    }
+
+    [part=root] {
+      display: contents;
+    }
+`)
+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(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+    ${[
+      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,
+          },
+        }),
+      ),
+    ]}
+    </div>`;
+  }
+}
+
+export default Grid;

package/src/components/input.ts

@@ -0,0 +1,73 @@
+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 { attr } from "@godown/element/directives/attr.js";
+import { classList } from "@godown/element/directives/class-list.js";
+import { css, html, nothing, type TemplateResult } 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} renders a 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")
+  protected _input: HTMLInputElement;
+
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)} 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(): void {
+    this._input.value = this.default;
+    this.value = this.default;
+  }
+}
+
+export default Input;

package/src/components/layout.ts

@@ -0,0 +1,89 @@
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { css, html, type TemplateResult } 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,
+    :host([contents]) [part=root] {
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    [part=root] {
+      display: contents;
+    }
+
+    [sticky] header {
+      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, remove the header slot.
+   */
+  @property({ type: Boolean })
+  noHeader = false;
+
+  /**
+   * If true, remove the footer slot.
+   */
+  @property({ type: Boolean })
+  noFooter = false;
+
+  /**
+   * If true, header will sticky.
+   */
+  @property({ type: Boolean })
+  sticky = false;
+
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+    ${
+      !this.noHeader
+        ? html`<header part="header">${htmlSlot("header")}</header>`
+        : ""
+    }
+    <main part="main">${htmlSlot()}</main>
+    ${
+      !this.noFooter
+        ? html`<footer part="footer">${htmlSlot("footer")}</footer>`
+        : ""
+    }
+    </div>`;
+  }
+}
+
+export default NavLayout;

package/src/components/link.ts

@@ -0,0 +1,38 @@
+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`.
+   *
+   * If "normal", behave like a normal anchor.
+   */
+  @property()
+  type: "push" | "replace" | "normal" = "normal";
+
+  protected _handleClick(e: MouseEvent): void {
+    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,100 @@
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { attr } from "@godown/element/directives/attr.js";
+import { isNil } from "@godown/element/tools/lib.js";
+import { css, html, type TemplateResult } 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;
+    border-radius: 0.25em;
+    background: var(${cssGlobalVars.passive});
+    color: var(${cssGlobalVars.active});
+  }
+
+  :host,
+  [part=root] {
+    display: block;
+  }
+
+  [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 {
+  @property({ type: Number })
+  max = 1;
+
+  @property({ type: Number })
+  min = 0;
+
+  @property({ type: Number })
+  value: number;
+
+  protected render(): TemplateResult<1> {
+    let width = 20;
+    let className: string;
+    if (!isNil(this.value)) {
+      width = this.parsePercent(this.value);
+      className = "static";
+    }
+    return html`<div part="root" ${attr(this.observedRecord)} 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;