godown 3.0.0-canary.0 → 3.0.0-canary.10

package/src/components/skeleton.ts

@@ -0,0 +1,118 @@
+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 iconPhoto from "@godown/f7-icon/icons/photo.js";
+import { css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+
+import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+
+const protoName = "skeleton";
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Skeleton} renders a skeleton screen.
+ *
+ * @slot loading - The content if loading is true.
+ * @slot - The content if loading is false.
+ * @category feedback
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      ${cssScope}--from: var(${cssGlobalVars._colors.darkgray[9]});
+      ${cssScope}--to: var(${cssGlobalVars._colors.darkgray[7]});
+      ${cssScope}--deg: 95deg;
+      ${cssScope}--duration: 1.5s;
+      ${cssScope}--icon-size: 5em;
+      ${cssScope}--icon-margin: .25em;
+      color: var(${cssGlobalVars._colors.darkgray[5]});
+      background: var(${cssScope}--from);
+      min-height: 1.5em;
+      width: 100%;
+      flex-shrink: 0;
+      display: block;
+      overflow: hidden;
+    }
+
+    [part=root] {
+      height: 100%;
+      min-height: inherit;
+      text-align: center;
+      animation: var(${cssScope}--duration) ease-in-out 0s infinite none running;
+    }
+
+    svg {
+      --size:var(${cssScope}--icon-size);
+      font-size: var(--size);
+      margin: calc(var(--size) * 0.05);
+    }
+
+    .position {
+      background-image: linear-gradient(
+        var(${cssScope}--deg),
+        var(${cssScope}--from) 36%,
+        var(${cssScope}--to) 50%,
+        var(${cssScope}--from) 64%
+      );
+      background-color: transparent;
+      background-size: 200% 100%;
+      animation-name: po;
+    }
+
+    @keyframes po {
+      from {
+        background-position: 150% center;
+      }
+      to {
+        background-position: -50% center;
+      }
+    }
+
+    .opacity {
+      animation-name: op;
+      animation-direction: alternate;
+    }
+
+    @keyframes op {
+      50% {
+        opacity: 0.25;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+  `,
+)
+class Skeleton extends GlobalStyle {
+  /**
+   * If "image", render a image placeholder.
+   */
+  @property()
+  type: "text" | "image";
+
+  /**
+   * Animation type.
+   * opacity animation only effect on slotted element and image icon.
+   */
+  @property()
+  animation: "position" | "opacity" = "position";
+
+  /**
+   * If false, render slot only.
+   */
+  @state()
+  loading = true;
+
+  protected render() {
+    if (!this.loading) {
+      return htmlSlot();
+    }
+    return html`<div part="root" class="${this.animation}">
+    ${this.type === "image" ? iconPhoto() : ""}
+    ${htmlSlot("loading")}</div>`;
+  }
+}
+
+export default Skeleton;

package/src/components/split.ts

@@ -0,0 +1,221 @@
+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 { type HandlerEvent } from "@godown/element/element.js";
+import { css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+
+import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
+import SuperInput from "../core/super-input.js";
+
+const protoName = "split";
+const cssScope = scopePrefix(protoName);
+
+const loop = <T>(len: number, fn: (index?: number) => T) => {
+  const result: T[] = new Array(len);
+  for (let index = 0; index < len; index++) {
+    result[index] = fn(index);
+  }
+  return result;
+};
+
+/**
+ * {@linkcode Split} renders multiple input boxes.
+ *
+ * Input: will move the focus box backward until the complete input from start to end.
+ *
+ * Delete: will move the focus box forward until the first and no inputs for each.
+ *
+ * @category input
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      color: var(${cssGlobalVars.foreground});
+      display: block;
+      border-radius: 1px;
+      width: fit-content;
+      ${cssScope}--size: 1.45em;
+      ${cssScope}--gap: .25em;
+    }
+
+    [part=root] {
+      gap: var(${cssScope}--gap);
+      width: 100%;
+      position: relative;
+      vertical-align: top;
+      display: inline-flex;
+      justify-content: space-between;
+      border-radius: inherit;
+    }
+
+    [part=input-box] {
+      width: var(${cssScope}--size);
+      height: var(${cssScope}--size);
+      vertical-align: top;
+      text-align: center;
+      background-color: var(${cssGlobalVars.input}-background);
+      border-radius: inherit;
+    }
+
+    [part=input] {
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      background: none;
+      position: absolute;
+      z-index: -1;
+    }
+
+    .focus {
+      box-shadow: var(${cssGlobalVars.input}-box-shadow);
+    }
+  `,
+)
+class Split extends SuperInput {
+  /**
+   * The number of input boxes.
+   */
+  @property({ type: Number })
+  len = 6;
+
+  /**
+   * Focus index.
+   */
+  @property({ type: Number })
+  index = -1;
+
+  @state()
+  current = -1;
+
+  @state()
+  currentValue: (string | void)[] = [];
+
+  protected render() {
+    return html`
+      <div part="root">
+    ${
+      loop(this.len, (index: number) =>
+        html`<span part="input-box"
+          @click="${this.disabled ? null : () => this.focusAt(index)}"
+          class="${classList({ focus: this.current === index }) || nothing}"
+        >${this.currentValue[index]}</span>`)
+    }
+        <input
+          part="input"
+          id="${this.makeId}"
+          @blur=${this.blur}
+          @input="${this._handleInput}"
+          .value="${
+      /* Ensure that input always has a value of length this.len */
+      this.value.padStart(this.len, " ")}"
+        >
+      </div>
+    `;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.reset();
+  }
+
+  protected _handleInput(e: HandlerEvent<HTMLInputElement, InputEvent>) {
+    e.stopPropagation();
+    if (this.compositing) {
+      return;
+    }
+
+    this.fillInput(e.data);
+    this.value = this.currentValue.join("");
+
+    this.dispatchEvent(new CustomEvent("input", { detail: this.value, bubbles: true, composed: true }));
+    this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
+  }
+
+  /**
+   * Fill input with data.
+   *
+   * If data is null
+   *  - If current value is null, move to before.
+   *  - If current value is not null, delete it.
+   *
+   * If data is not null
+   *  - If current value is null, input data.
+   *  - If current value is not null, input data and move to after.
+   *
+   * If data is multiple characters,
+   *   Fill input with data[0] and call fillInput with data.slice(1).
+   *
+   * @param data Input event data.
+   */
+  protected fillInput(data: string | null) {
+    if (data === null) {
+      // delete
+
+      if (this.currentValue[this.current] !== null) {
+        // delete exist value
+
+        this.currentValue[this.current] = null;
+      } else {
+        // go to before
+
+        this.currentValue[this.current - 1] = null;
+        const lastNotNull = this.currentValue.findLastIndex(a => a !== null);
+        this.current = this.current - 1 < 0 ? lastNotNull < 0 ? 0 : lastNotNull : this.current - 1;
+      }
+      return;
+    }
+
+    const multiple = data.length > 1;
+
+    // input
+    this.currentValue[this.current] = data[0];
+    if (this.current + 1 >= this.len) {
+      // index overflow
+
+      this.current = this.currentValue.indexOf(null);
+      if (this.current === -1) {
+        this.blur();
+      }
+    } else {
+      // go to after
+
+      this.current += 1;
+    }
+
+    if (multiple) {
+      const after = data.slice(1);
+      if (after) {
+        this.fillInput(after);
+      }
+    }
+  }
+
+  focus() {
+    this.focusAt(this.current);
+    super.focus();
+  }
+
+  focusAt(i: number) {
+    this.current = i;
+    this._input.focus();
+  }
+
+  blur() {
+    this._input.blur();
+    this.current = -1;
+    super.blur();
+  }
+
+  reset() {
+    this.current = -1;
+    this.value = this.default;
+    this.currentValue = this.value.split("").concat(Array(this.len - this.value.length).fill(null));
+    if (this.index > -1) {
+      this.current = this.index;
+    }
+  }
+}
+
+export default Split;

package/src/components/switch.ts

@@ -0,0 +1,180 @@
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { css, html } from "lit";
+import { property, query } from "lit/decorators.js";
+
+import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
+import SuperInput from "../core/super-input.js";
+
+const protoName = "switch";
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Switch} renders a switch.
+ *
+ * The switch is rectangular by default,
+ * set the round property to rounded switch.
+ *
+ * @category input
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      ${cssScope}-width: 3em;
+      ${cssScope}-height: calc(var(${cssScope}-width) / 2);
+      ${cssScope}-handle-size: 1.25em;
+      ${cssScope}-handle-space: .125em;
+      ${cssScope}-transition: .2s ease-in-out;
+      background: var(${cssGlobalVars.input}-background);
+      width: var(${cssScope}-width);
+      height: var(${cssScope}-height);
+      display: inline-block;
+      vertical-align: bottom;
+      border-radius: 0;
+    }
+
+    [part=root],
+    span {
+      transition: var(${cssScope}-transition);
+    }
+
+    [part=root] {
+      border-radius: inherit;
+      position: relative;
+      height: inherit;
+    }
+
+    [part=root],
+    input {
+      width: 100%;
+    }
+
+    input {
+      opacity: 0;
+      height: 100%;
+      appearance: none;
+    }
+
+    span {
+      height: 100%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      left: 0;
+      width: 50%;
+      pointer-events: none;
+      border-radius: inherit;
+    }
+
+    :host([round]) {
+      border-radius: calc(var(${cssScope}-height) / 2);
+    }
+
+    :host([checked]) span {
+      left: 50%;
+    }
+
+    .rect .true {
+      background: var(${cssGlobalVars.active});
+    }
+
+    .rect .false {
+      background: var(${cssGlobalVars.passive});
+    }
+
+    .round span{
+      --size: var(${cssScope}-handle-size);
+      border-radius: 100%;
+      background: var(--godown--input-control);
+      width: var(--size);
+      height: var(--size);
+      margin: var(${cssScope}-handle-space);
+    }
+
+    .round {
+      background: var(${cssGlobalVars.passive});
+    }
+
+    :host([checked]) .round {
+      background: var(${cssGlobalVars.active});
+    }
+  `,
+)
+class Switch extends SuperInput {
+  /**
+   * Display rounded.
+   */
+  @property({ type: Boolean, reflect: true })
+  round = false;
+
+  /**
+   * Whether this element is selected or not.
+   */
+  @property({ type: Boolean, reflect: true })
+  checked = false;
+
+  /**
+   * Disable this element.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /**
+   * Default checked state.
+   */
+  @property()
+  default = "false";
+
+  /**
+   * Input value.
+   */
+  @property()
+  value = "on";
+
+  @query("input")
+  protected _input: HTMLInputElement;
+
+  protected render() {
+    return html`<div part="root" class="${this.round ? "round" : "rect"}">
+      <input
+        part="input"
+        @change="${this._handleChange}"
+        ?disabled="${this.disabled}"
+        ?checked="${this.checked}"
+        name="${this.name}"
+        id="${this.makeId}"
+        type="checkbox"
+      >
+      <span part="handle" class="${this.checked}"></span>
+    </div>`;
+  }
+
+  reset() {
+    this.checked = this.default === "true";
+    this._input.checked = this.checked;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.checked) {
+      this.default = "true";
+    }
+    if (this.default === "true") {
+      this.checked = true;
+    }
+  }
+
+  protected _handleChange() {
+    this.checked = this._input.checked;
+    this.dispatchEvent(new CustomEvent("input", { detail: this.checked, bubbles: true, composed: true }));
+    this.dispatchEvent(new CustomEvent("change", { detail: this.checked, composed: true }));
+  }
+
+  namevalue(): [string, boolean] {
+    return [this.name, this.checked];
+  }
+}
+
+export default Switch;

package/src/components/text.ts

@@ -0,0 +1,95 @@
+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 { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
+
+const protoName = "text";
+
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Text} renders nowrap text.
+ *
+ * @category display
+ */
+@godown(protoName)
+@styles(css`
+    :host {
+      ${cssScope}--color: currentColor;
+      ${cssScope}--color-hover: currentColor;
+      ${cssScope}--color-active: currentColor;
+      display: inline-block;
+      text-overflow: ellipsis;
+      overflow-wrap: break-word;
+    }
+
+    [part=root] {
+      white-space: nowrap;
+      width: 100%;
+      vertical-align: bottom;
+      display: inline-block;
+      text-overflow: inherit;
+      overflow-wrap: inherit;
+      overflow: hidden;
+      color: var(${cssScope}--color);
+    }
+
+    [part=root]:hover {
+      color: var(${cssScope}--color-hover, var(${cssScope}--color));
+    }
+
+    [part=root]:active {
+      color: var(${cssScope}--color-active, var(${cssScope}--color));
+    }
+
+    .hover:hover,
+    .active:active,
+    .always {
+      text-decoration: underline;
+    }
+
+    .none {
+      text-decoration: none;
+    }
+
+    .clip{
+      background: var(${cssGlobalVars.clipBackground});
+      display: inline-block;
+      color: transparent;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      -webkit-background-clip: text;
+    }
+`)
+class Text extends GlobalStyle {
+  /**
+   * Underline behavior.
+   */
+  @property()
+  underline: "none" | "hover" | "active" | "always" = "none";
+
+  /**
+   * Set background-clip to text.
+   */
+  @property({ type: Boolean })
+  clip: boolean;
+
+  protected render() {
+    return html`<span
+      part="root"
+      class="${
+      classList(this.underline, {
+        clip: this.clip,
+      })
+    }"
+    >
+      ${htmlSlot()}
+    </span>`;
+  }
+}
+
+export default Text;

package/src/components/time.ts

@@ -0,0 +1,81 @@
+import { godown } from "@godown/element/decorators/godown.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import fmtime from "fmtime";
+import { css, type PropertyValues } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle } from "../core/global-style.js";
+
+const protoName = "time";
+
+/**
+ * {@linkcode Time} renders a formatting time.
+ *
+ * @category display
+ */
+@godown(protoName)
+@styles(css`:host{text-align: center;}`)
+class Time extends GlobalStyle {
+  /**
+   * Escape symbol.
+   */
+  @property()
+  escape = "%";
+
+  /**
+   * Format strings.
+   */
+  @property()
+  format = "YYYY-MM-DD hh:mm:ss UTFZ";
+
+  /**
+   * Time.
+   */
+  @property({ type: Object })
+  time = new Date();
+
+  /**
+   * If there is a value, update every gap or timeout.
+   */
+  @property({ type: Number })
+  timeout;
+
+  /**
+   * The number of milliseconds that change with each update.
+   */
+  @property({ type: Number })
+  gap;
+
+  protected timeoutId: number;
+
+  protected render(): string {
+    return fmtime(this.format, this.time, this.escape);
+  }
+
+  protected firstUpdated() {
+    if (this.timeout) {
+      this.timeoutId = this.startTimeout();
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    if (changedProperties.has("timeout")) {
+      clearInterval(this.timeoutId);
+      if (this.timeout) {
+        this.timeoutId = this.startTimeout();
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    clearInterval(this.timeoutId);
+  }
+
+  startTimeout() {
+    return window.setInterval(() => {
+      this.time = new Date(this.time.getTime() + (this.gap || this.timeout));
+    }, Math.abs(this.timeout));
+  }
+}
+
+export default Time;