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

package/src/components/tooltip.ts

@@ -0,0 +1,138 @@
+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 { 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 if no `tip` provided.
+ * @slot - Content.
+ * @category feedback
+ */
+@godown(protoName)
+@styles(
+  css`
+    :host {
+      ${cssScope}--tip-background: inherit;
+      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] {
+      visibility: visible;
+    }
+
+    .passive {
+      background: var(${cssScope}--tip-background);
+    }
+  `,
+  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 = false;
+
+  /**
+   * How can tips be triggered.
+   *
+   * If `focus`, element will be focusable, open tip when focused.
+   *
+   * If `hover`, element will open tip when hovered.
+   *
+   * @default "hover"
+   */
+  @property()
+  type: "hover" | "focus" = "hover";
+
+  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";
+    const isFocusable = this.type === "focus";
+    return html`<div part="root"
+      tabindex="${isFocusable ? 0 : -1}"
+      @focus="${isFocusable ? () => this.open = true : null}"
+      @blur="${isFocusable ? () => this.open = false : null}"
+      @mouseenter="${isFocusable ? null : () => this.open = true}"
+      @mouseleave="${isFocusable ? null : () => this.open = false}"
+      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;

package/src/components/typewriter.ts

@@ -0,0 +1,154 @@
+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 { random } from "@godown/element/tools/lib.js";
+import { css, html, type PropertyValueMap } from "lit";
+import { property, query, state } from "lit/decorators.js";
+
+import { GlobalStyle, scopePrefix } from "../core/global-style.js";
+
+const protoName = "typewriter";
+const cssScope = scopePrefix(protoName);
+
+/**
+ * {@linkcode Typewriter} renders a typewriter effect to text.
+ *
+ * @category effect
+ */
+@godown(protoName)
+@styles(css`
+    :host {
+      ${cssScope}--cursor-width: .05em;
+      white-space: nowrap;
+    }
+
+    i {
+      border-right: var(${cssScope}--cursor-width) solid;
+      margin-left: 0.02em;
+      animation: s 1.5s steps(1) infinite;
+    }
+
+    @keyframes s {
+      0% {
+        border-color: currentColor;
+      }
+      50% {
+        border-color: transparent;
+      }
+    }
+
+    slot {
+      display: none;
+    }
+
+    .hidden {
+      visibility: hidden;
+    }
+  `)
+class Typewriter extends GlobalStyle {
+  /**
+   * Raw text.
+   */
+  @property()
+  text = "";
+
+  /**
+   * Start immediately after {@linkcode Typewriter.firstUpdated}.
+   */
+  @property({ type: Boolean })
+  stopped = false;
+
+  /**
+   * If true, hide the cursor
+   */
+  @property({ type: Boolean })
+  ended = false;
+
+  /**
+   * Maximum random time.
+   */
+  @property({ type: Number })
+  max = 100;
+
+  /**
+   * Minimum random time.
+   */
+  @property({ type: Number })
+  min = 50;
+
+  /**
+   * Fixed time.
+   */
+  @property({ type: Number })
+  delay = 0;
+
+  /**
+   * The index at the beginning.
+   */
+  @property({ type: Number })
+  index = 0;
+
+  /**
+   * Internal text.
+   */
+  @state()
+  content = "";
+
+  protected timeoutID: number;
+
+  @query("i")
+  protected _i: HTMLElement;
+
+  /**
+   * {@linkcode Typewriter.text} length.
+   */
+  get len() {
+    return this.text.length;
+  }
+
+  protected render() {
+    return html`${htmlSlot()}${this.content}<i part="cursor" class="${
+      classList({
+        hidden: this.ended,
+      })
+    }"></i>`;
+  }
+
+  protected firstUpdated() {
+    if (!this.text) {
+      this.text = this._slot?.assignedNodes()[0]?.textContent.trim() || "";
+    }
+    if (!this.stopped && this.len) {
+      this.write();
+    }
+  }
+
+  protected updated(changedProperties: PropertyValueMap<this>) {
+    if (changedProperties.has("index")) {
+      this.dispatchEvent(new CustomEvent(this.index === this.len ? "done" : "write", { detail: this.content }));
+    }
+  }
+
+  write(at = this.index) {
+    this.content = this.text.slice(0, at + 1);
+    const timeout = this.delay || random(this.max, this.min);
+    this.timeoutID = window.setTimeout(() => {
+      const nx = at + 1;
+      if (nx <= this.len) {
+        this.index = nx;
+        this.write();
+      }
+    }, timeout);
+  }
+
+  stop() {
+    clearTimeout(this.timeoutID);
+  }
+
+  end() {
+    this.ended = true;
+  }
+}
+
+export default Typewriter;

package/src/core/global-style.ts

@@ -0,0 +1,86 @@
+import { type Gradients, presetsRGB } from "@godown/colors/presets-rgb.js";
+import { travel } from "@godown/colors/travel.js";
+import GodownElement from "@godown/element";
+import GodownConfig from "@godown/element/config.js";
+import { joinProperties } from "@godown/element/tools/css.js";
+import { trim } from "@godown/element/tools/lib.js";
+import { css, CSSResult, unsafeCSS } from "lit";
+
+GodownElement.godownConfig ||= new GodownConfig();
+
+export class GlobalStyle extends GodownElement {
+}
+
+const cssvar = trim(GlobalStyle.godownConfig.prefix, "-");
+
+export function scopePrefix(scope: string, len = 1) {
+  return variablePrefix(cssvar + "-".repeat(len) + scope);
+}
+
+export function variablePrefix(variable: string) {
+  return unsafeCSS("--" + variable);
+}
+
+export const cssGlobalVars = {
+  foreground: scopePrefix("foreground", 2),
+  background: scopePrefix("background", 2),
+  clipBackground: scopePrefix("clip-background", 2),
+  active: scopePrefix("active", 2),
+  passive: scopePrefix("passive", 2),
+  _colors: {} as PresetsGradientsCSSResult,
+  input: scopePrefix("input", 2),
+  white: scopePrefix("color-white", 2),
+  black: scopePrefix("color-black", 2),
+};
+
+type PresetsGradientsCSSResult = Record<keyof typeof presetsRGB, Gradients<CSSResult>>;
+GlobalStyle.styles = [
+  unsafeCSS(
+    ":host{"
+      + `${cssGlobalVars.black}:rgb(0 0 0);`
+      + `${cssGlobalVars.white}:rgb(255 255 255);`
+      + travel((key, gradient, rgb) => {
+        cssGlobalVars._colors[key] ||= [] as any;
+        cssGlobalVars._colors[key].push(unsafeCSS(scopePrefix("color", 2) + "-" + key + "-" + gradient));
+        const endKey = `-${key}-${gradient}`;
+        const colorKey = scopePrefix("color", 2) + endKey;
+        return `${colorKey}:rgb(${rgb});`;
+      }, presetsRGB).join("")
+      + joinProperties({
+        [cssGlobalVars.background + ""]: `var(${cssGlobalVars._colors.darkgray[9]})`,
+        [cssGlobalVars.foreground + ""]: `var(${cssGlobalVars._colors.lightgray[0]})`,
+        [cssGlobalVars.active + ""]: `var(${cssGlobalVars._colors.blue[6]})`,
+        [cssGlobalVars.passive + ""]: `var(${cssGlobalVars._colors.darkgray[6]})`,
+        [cssGlobalVars.clipBackground + ""]:
+          `linear-gradient(to bottom, var(${cssGlobalVars.foreground}), var(${cssGlobalVars.passive}))`,
+      })
+      + "}",
+  ),
+  css`
+    * {
+      border: 0;
+      outline: 0;
+      margin: 0;
+      padding: 0;
+      font-size: 100%;
+      font-style: normal;
+      box-sizing: border-box;
+    }
+
+    :host {
+      box-sizing: border-box;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    span {
+      white-space: nowrap;
+    }
+
+    svg {
+      user-select: none;
+    }
+  `,
+];

package/src/core/super-anchor.ts

@@ -0,0 +1,52 @@
+import { styles } from "@godown/element/decorators/index.js";
+import { htmlSlot } from "@godown/element/directives/html-slot.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import { GlobalStyle } from "./global-style.js";
+
+@styles(css`
+  :host {
+    display: inline-block;
+    color: currentColor;
+    text-decoration: none;
+    cursor: default;
+  }
+
+  :host([href]) {
+    cursor: pointer;
+  }
+
+  a {
+    width: 100%;
+    display: flex;
+    color: inherit;
+    text-decoration: inherit;
+    justify-content: space-between;
+    align-items: center;
+  }
+`)
+class SuperAnchor extends GlobalStyle {
+  /**
+   * A element href.
+   */
+  @property()
+  href: string = undefined;
+  /**
+   * A element target.
+   */
+  @property()
+  target: "_blank" | "_self" | "_parent" | "_top" = "_self";
+
+  protected render() {
+    return html`<a part="root" href="${ifDefined(this.href)}" target="${this.target}" @click=${this._handleClick}>
+      ${htmlSlot()}
+    </a>`;
+  }
+
+  // eslint-disable-next-line
+  protected _handleClick(_: MouseEvent) {}
+}
+
+export default SuperAnchor;

package/src/core/super-input.ts

@@ -0,0 +1,230 @@
+import { part } from "@godown/element/decorators/part.js";
+import { styles } from "@godown/element/decorators/styles.js";
+import { htmlSlot } from "@godown/element/directives/index.js";
+import { type HandlerEvent } from "@godown/element/element.js";
+import iconEyeSlashFill from "@godown/f7-icon/icons/eye-slash-fill.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+
+import { cssGlobalVars, GlobalStyle } from "./global-style.js";
+
+const fieldStyle = css`
+  .input-field {
+    display: flex;
+    position: relative;
+    align-items: center;
+    border-radius: inherit;
+    height: inherit;
+  }
+
+  .input-field [part=input] {
+    background: transparent;
+    height: 100%;
+    width: 100%;
+    color: inherit;
+  }
+
+  .input-field:focus-within,
+  .input-field.outline {
+    box-shadow: var(${cssGlobalVars.input}-box-shadow);
+  }
+
+  .input-field [part=icon] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .input-field [part=prefix],
+  .input-field [part=suffix] {
+    height: 100%;
+    display: flex;
+  }
+
+  .input-field [part=space]{
+    width: var(${cssGlobalVars.input}-space);
+  }
+`;
+
+const inputStyle = css`
+:host {
+  ${cssGlobalVars.input}-width: 10em;
+  ${cssGlobalVars.input}-height: 1.6em;
+  ${cssGlobalVars.input}-space: 0.2em;
+  ${cssGlobalVars.input}-background: var(${cssGlobalVars.background});
+  ${cssGlobalVars.input}-control: var(${cssGlobalVars.foreground});
+  ${cssGlobalVars.input}-control-edge: var(${cssGlobalVars.active});
+  ${cssGlobalVars.input}-radius: 0.2em;
+  ${cssGlobalVars.input}-box-shadow: 0px 0px 0px .1em var(${cssGlobalVars.active});
+  border-radius: var(${cssGlobalVars.input}-radius);
+}
+
+:host([disabled]) {
+  cursor: not-allowed;
+  filter: brightness(0.85);
+}
+
+input:disabled {
+  cursor: inherit;
+}
+
+input::-ms-reveal,
+input::-ms-clear {
+  display: none;
+}
+`;
+
+@styles(fieldStyle, inputStyle)
+class SuperInput extends GlobalStyle {
+  autofocus: boolean;
+  @property()
+  autocomplete: string | boolean;
+
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean;
+
+  @property({ reflect: true })
+  type: InputType;
+
+  @property({ reflect: true })
+  placeholder: string;
+
+  @property({ reflect: true })
+  name: string;
+
+  @property()
+  value: any;
+
+  /**
+   * default property records the default or initial value and is used to reset the input.
+   */
+  @property()
+  default: any;
+
+  @part("input")
+  protected _input: HTMLInputElement;
+
+  /**
+   * Returns true when the input is compositing.
+   */
+  compositing: boolean;
+
+  set defaultValue(value: typeof this.default) {
+    this.default = value;
+  }
+
+  get defaultValue() {
+    return this.default;
+  }
+
+  protected makeId = Math.random().toString(36).slice(1);
+
+  namevalue(): [string, any] {
+    return [this.name, this.value];
+  }
+
+  nameValue = this.namevalue;
+
+  reset() {
+    this.value = this.default;
+    this._input.value = this.default;
+  }
+
+  protected _handleInput(e: HandlerEvent<HTMLInputElement>) {
+    e.stopPropagation();
+    if (this.compositing) {
+      return;
+    }
+    this.value = e.target.value?.trim();
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: this.value,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._connectedInit();
+  }
+
+  protected _connectedInit() {
+    this.default ??= this.value || "";
+    this.value ??= this.default;
+  }
+
+  protected _compositionInit() {
+    if (this._input) {
+      this.events.add(this._input, "compositionstart", () => this.compositing = true);
+      this.events.add(this._input, "compositionend", (e: HandlerEvent<HTMLInputElement>) => {
+        this.compositing = false;
+        this._handleInput(e);
+      });
+    }
+  }
+
+  protected _changeInputType(t: typeof this.type) {
+    if (this._input) {
+      this._input.type = t;
+    }
+  }
+
+  focus(options?: FocusOptions) {
+    this._input?.focus(options);
+  }
+
+  protected firstUpdated() {
+    this._compositionInit();
+  }
+
+  protected _renderPrefix() {
+    return html`<label for=${this.makeId} part="prefix">
+    <i part="space"></i>
+    ${htmlSlot("prefix")}</label>`;
+  }
+
+  protected _renderSuffix() {
+    const PASSWORD = "password";
+    return html`<label for=${this.makeId} part="suffix">${
+      this.type === "password"
+        ? html`
+        <i part="space"></i>
+        <i
+          part="icon"
+          @mousedown="${() => this._changeInputType("text")}"
+          @mouseup="${() => this._changeInputType(PASSWORD)}"
+          @mouseleave="${() => this._changeInputType(PASSWORD)}"
+        >${iconEyeSlashFill()}</i>`
+        : htmlSlot("suffix")
+    }
+    <i part="space"></i>
+  </label>`;
+  }
+}
+
+export default SuperInput;
+
+type InputType =
+  | "hidden"
+  | "text"
+  | "search"
+  | "tel"
+  | "url"
+  | "email"
+  | "password"
+  | "datetime"
+  | "date"
+  | "month"
+  | "week"
+  | "time"
+  | "datetime-local"
+  | "number"
+  | "range"
+  | "color"
+  | "checkbox"
+  | "radio"
+  | "file"
+  | "image";

package/src/core/super-openable.ts

@@ -0,0 +1,51 @@
+import { type PropertyValueMap } from "lit";
+import { property } from "lit/decorators.js";
+
+import { GlobalStyle } from "./global-style.js";
+
+class SuperOpenable extends GlobalStyle {
+  /**
+   * Open the content.
+   */
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  toggle(to = !this.open) {
+    this.open = to;
+  }
+
+  close() {
+    this.open = false;
+  }
+
+  show() {
+    this.open = true;
+  }
+
+  protected updated(changedProperties: PropertyValueMap<this>) {
+    const open = changedProperties.get("open");
+    if (open !== undefined) {
+      this.dispatchEvent(new CustomEvent("change", { detail: this.open }));
+    }
+  }
+
+  // eslint-disable-next-line
+  protected _handelClick(_: MouseEvent) {
+    this.toggle();
+  }
+}
+
+export default SuperOpenable;
+
+export type Direction4 = "left" | "right" | "top" | "bottom";
+
+export type Direction5 = Direction4 | "center";
+
+export type Direction8 =
+  | Direction4
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right";
+
+export type Direction9 = Direction8 | Direction5;