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

package/src/components/tooltip.ts

@@ -0,0 +1,150 @@
+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 { 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;
+      width: fit-content;
+    }
+    
+    :host,
+    [part=root] {
+      display: inline-flex;
+    }
+
+    [part=root] {
+      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);
+    }
+
+    [propagation] [part=tip] {
+      pointer-events: none;
+    }
+  `,
+  css`
+    [direction^=top] [part=tip] {
+      bottom: 100%;
+    }
+
+    [direction^=bottom] [part=tip] {
+      top: 100%;
+    }
+
+    [direction$=right] [part=tip] {
+      left: 100%;
+    }
+
+    [direction$=left] [part=tip] {
+      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(): TemplateResult<1> {
+    const align = Tooltip.aligns[this.align] || "inherit";
+    const isFocusable = this.type === "focus";
+    return html`<div 
+      part="root"
+      ${attr(this.observedRecord)}
+      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">
+      ${
+      this.tip
+        ? html`<span class="passive">${this.tip}</span>`
+        : htmlSlot("tip")
+    }
+      </div>
+    </div>`;
+  }
+}
+
+export default Tooltip;

package/src/components/typewriter.ts

@@ -0,0 +1,159 @@
+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 { random } from "@godown/element/tools/lib.js";
+import { css, html, type PropertyValueMap, TemplateResult } 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;
+    }
+
+    :host,
+    :host([contents]) [part=root] {
+      display: inline-block;
+    }
+
+    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(): number {
+    return this.text.length;
+  }
+
+  protected render(): TemplateResult<1> {
+    return html`<div part="root" ${attr(this.observedRecord)}>
+      ${htmlSlot()}
+      ${this.content}
+      <i part="cursor" class="${classList({ hidden: this.ended })}"></i>
+    </div>`;
+  }
+
+  protected firstUpdated(): void {
+    if (!this.text) {
+      this.text = this._slot?.assignedNodes()[0]?.textContent.trim() || "";
+    }
+    if (!this.stopped && this.len) {
+      this.write();
+    }
+  }
+
+  protected updated(changedProperties: PropertyValueMap<this>): void {
+    if (changedProperties.has("index")) {
+      this.dispatchEvent(new CustomEvent(this.index === this.len ? "done" : "write", { detail: this.content }));
+    }
+  }
+
+  write(at: number = this.index): void {
+    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(): void {
+    clearTimeout(this.timeoutID);
+  }
+
+  end(): void {
+    this.ended = true;
+  }
+}
+
+export default Typewriter;

package/src/core/global-style.ts

@@ -0,0 +1,105 @@
+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): CSSResult {
+  return variablePrefix(cssvar + "-".repeat(len) + scope);
+}
+
+export function variablePrefix(variable: string): CSSResult {
+  return unsafeCSS("--" + variable);
+}
+
+export const cssGlobalVars: {
+  foreground: CSSResult;
+  background: CSSResult;
+  clipBackground: CSSResult;
+  active: CSSResult;
+  passive: CSSResult;
+  _colors: PresetsGradientsCSSResult;
+  input: CSSResult;
+  white: CSSResult;
+  black: CSSResult;
+} = {
+  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;
+    }
+
+    :host([contents]) {
+      display: contents;
+    }
+
+    :where(:host([contents]) [part=root]) {
+      all: inherit;
+      display: revert;
+    }
+`,
+];

package/src/core/super-anchor.ts

@@ -0,0 +1,55 @@
+import { styles } from "@godown/element/decorators/index.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 { 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;
+  }
+
+  [part=root] {
+    width: 100%;
+    color: inherit;
+    display: inline-block;
+    text-decoration: inherit;
+  }
+`)
+class SuperAnchor extends GlobalStyle {
+  /**
+   * A element href.
+   */
+  @property()
+  href: string = undefined;
+  /**
+   * A element target.
+   */
+  @property()
+  target: "_blank" | "_self" | "_parent" | "_top" = "_self";
+
+  protected render(): TemplateResult<1> {
+    return html`<a part="root"
+      ${attr(this.observedRecord)}
+      href="${ifDefined(this.href)}"
+      target="${this.target}"
+      @click=${this._handleClick}>
+      ${htmlSlot()}
+    </a>`;
+  }
+
+  // eslint-disable-next-line
+  protected _handleClick(_: MouseEvent): void {}
+}
+
+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, type TemplateResult } 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: string = Math.random().toString(36).slice(1);
+
+  namevalue(): [string, any] {
+    return [this.name, this.value];
+  }
+
+  nameValue: () => [string, any] = this.namevalue;
+
+  reset(): void {
+    this.value = this.default;
+    this._input.value = this.default;
+  }
+
+  protected _handleInput(e: HandlerEvent<HTMLInputElement>): void {
+    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(): void {
+    super.connectedCallback();
+    this._connectedInit();
+  }
+
+  protected _connectedInit(): void {
+    this.default ??= this.value || "";
+    this.value ??= this.default;
+  }
+
+  protected _compositionInit(): void {
+    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): void {
+    if (this._input) {
+      this._input.type = t;
+    }
+  }
+
+  focus(options?: FocusOptions): void {
+    this._input?.focus(options);
+  }
+
+  protected firstUpdated(): void {
+    this._compositionInit();
+  }
+
+  protected _renderPrefix(): TemplateResult<1> {
+    return html`<label for=${this.makeId} part="prefix">
+    <i part="space"></i>
+    ${htmlSlot("prefix")}</label>`;
+  }
+
+  protected _renderSuffix(): TemplateResult<1> {
+    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";