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

package/src/components/split.ts

@@ -0,0 +1,190 @@
+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;
+    }
+    if (e.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;
+      }
+    } else {
+      // input
+
+      this.currentValue[this.current] = e.data;
+      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;
+      }
+    }
+
+    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 }));
+  }
+
+  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,176 @@
+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}-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 {
+      transform: translateX(100%);
+    }
+
+    .rect .true {
+      background: var(${cssGlobalVars.active});
+    }
+
+    .rect .false {
+      background: var(${cssGlobalVars.passive});
+    }
+
+    .round span::after{
+      --size: var(${cssScope}-handle-size);
+      content:"";
+      border-radius: 100%;
+      background: var(--godown--input-control);
+      width: var(--size);
+      height: var(--size);
+    }
+
+    .round {
+      background: var(${cssGlobalVars.passive});
+    }
+
+    :host([checked]) .round {
+      background: var(${cssGlobalVars.active});
+    }
+  `,
+)
+class Switch extends SuperInput {
+  /**
+   * Border style.
+   */
+  @property({ type: Boolean, reflect: true })
+  round = false;
+  /**
+   * Whether this element is selected or not.
+   */
+  @property({ type: Boolean, reflect: true })
+  checked = false;
+  /**
+   * Whether this element is disabled or not.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+  /**
+   * Parsed by JSON.parse to checked.
+   */
+  @property()
+  default = "false";
+  /**
+   * Input value.
+   */
+  @property()
+  value = "on";
+
+  @query("input")
+  _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 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,77 @@
+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 {
+  /**
+   * Cancels the next character formatting.
+   */
+  @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 = 0;
+  /**
+   * The number of milliseconds that change with each update.
+   */
+  @property({ type: Number })
+  gap = 0;
+
+  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;

package/src/components/tooltip.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 { css, html } from "lit";
+import { property } from "lit/decorators.js";
+
+import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
+import SuperOpenable, { type Direction8 } from "../core/super-openable.js";
+
+const protoName = "tooltip";
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Tooltip} provide tooltip for slot elements.
+ *
+ * If it has the tip property, ignore the slot tip.
+ *
+ * @slot tip - Tip element.
+ * @slot - Content.
+ * @category feedback
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      ${cssScope}--tip-background: var(${cssGlobalVars.background});
+      display: inline-block;
+      width: fit-content;
+    }
+
+    [part="root"] {
+      display: flex;
+      position: relative;
+      transition: inherit;
+      border-radius: inherit;
+    }
+
+    [part="tip"] {
+      width: fit-content;
+      height: fit-content;
+      position: absolute;
+      visibility: hidden;
+      transition: inherit;
+      user-select: none;
+    }
+
+    :host([open]) [part="tip"],
+    :host(:hover) [part="tip"],
+    [part="tip"]:hover {
+      visibility: visible;
+    }
+
+    .passive{
+      background: var(${cssScope}--tip-background);
+      padding: 0 .5em;
+    }
+  `,
+  css`
+    [direction^="top"] {
+      bottom: 100%;
+    }
+    [direction^="bottom"] {
+      top: 100%;
+    }
+    [direction$="right"] {
+      left: 100%;
+    }
+    [direction$="left"] {
+      right: 100%;
+    }
+  `,
+)
+class Tooltip extends SuperOpenable {
+  /**
+   * Tip text, if there is a value, the slot will be ignored.
+   */
+  @property()
+  tip: string;
+  /**
+   * Direction of opening the tip.
+   */
+  @property()
+  direction: Direction8 = "top";
+  /**
+   * Content alignment.
+   */
+  @property()
+  align: "center" | "flex-start" | "flex-end" | "start" | "end" = "center";
+
+  /**
+   * If true, allow penetration of the tip.
+   */
+  @property({ type: Boolean })
+  propagation: boolean;
+
+  static aligns = {
+    start: "flex-start",
+    end: "flex-end",
+    center: "center",
+    "flex-start": "flex-start",
+    "flex-end": "flex-end",
+  };
+
+  protected render() {
+    const align = Tooltip.aligns[this.align] || "inherit";
+    return html`<div part="root" style="justify-content:${align};align-items:${align}">
+      ${htmlSlot()}
+      <div part="tip" direction="${this.direction}" style="pointer-events:${this.propagation ? "none" : "all"}">
+    ${
+      this.tip
+        ? html`<span class="passive">${this.tip}</span>`
+        : htmlSlot("tip")
+    }</div>
+    </div>`;
+  }
+}
+
+export default Tooltip;