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

package/src/components/split.ts

@@ -0,0 +1,225 @@
+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 { classList } from "@godown/element/directives/class-list.js";
+import { type HandlerEvent } from "@godown/element/element.js";
+import { css, html, nothing, type TemplateResult } 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;
+    }
+
+    :host([contents]) [part=root] {
+      width: fit-content;
+    }
+
+    [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(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+    ${
+      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>): void {
+    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): void {
+    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(): void {
+    this.focusAt(this.current);
+    super.focus();
+  }
+
+  focusAt(i: number): void {
+    this.current = i;
+    this._input.focus();
+  }
+
+  blur(): void {
+    this._input.blur();
+    this.current = -1;
+    super.blur();
+  }
+
+  reset(): void {
+    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,184 @@
+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 { css, html, type TemplateResult } 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,
+    :host([contents]) [part=root] {
+      width: var(${cssScope}-width);
+      height: var(${cssScope}-height);
+    }
+
+    :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);
+      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;
+    }
+    
+    input {
+      opacity: 0;
+      width: 100%;
+      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(): TemplateResult<1> {
+    return html`<div part="root"
+      ${attr(this.observedRecord)}
+      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(): void {
+    this.checked = this.default === "true";
+    this._input.checked = this.checked;
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    if (this.checked) {
+      this.default = "true";
+    }
+    if (this.default === "true") {
+      this.checked = true;
+    }
+  }
+
+  protected _handleChange(): void {
+    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,93 @@
+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 { classList } from "@godown/element/directives/class-list.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { css, html, type TemplateResult } 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(): TemplateResult<1> {
+    return html`<span
+      part="root"
+      ${attr(this.observedRecord)}
+      class="${classList(this.underline)}"
+    >
+      ${htmlSlot()}
+    </span>`;
+  }
+}
+
+export default Text;

package/src/components/time.ts

@@ -0,0 +1,84 @@
+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 fmtime from "fmtime";
+import { css, html, type PropertyValues, TemplateResult } 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: Date = new Date();
+
+  /**
+   * If there is a value, update every gap or timeout.
+   */
+  @property({ type: Number })
+  timeout: any;
+
+  /**
+   * The number of milliseconds that change with each update.
+   */
+  @property({ type: Number })
+  gap: any;
+
+  protected timeoutId: number;
+
+  protected render(): TemplateResult<1> {
+    return html`<span part="root" ${attr(this.observedRecord)}>
+      ${fmtime(this.format, this.time, this.escape)}
+    </span>`;
+  }
+
+  protected firstUpdated(): void {
+    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(): void {
+    clearInterval(this.timeoutId);
+  }
+
+  startTimeout(): number {
+    return window.setInterval(() => {
+      this.time = new Date(this.time.getTime() + (this.gap || this.timeout));
+    }, Math.abs(this.timeout));
+  }
+}
+
+export default Time;