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

package/src/components/typewriter.ts

@@ -0,0 +1,147 @@
+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;
+      font-family: monospace;
+      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 = "";
+
+  timeoutID: number;
+  @query("i")
+  _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 { 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("")
+      + "}",
+  ),
+  css`
+    :host {
+      ${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(180deg, 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")
+  _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;
+  }
+
+  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;

package/src/details.ts

@@ -0,0 +1,11 @@
+import Details from "./components/details.js";
+
+Details.define();
+
+export default Details;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-details": Details;
+  }
+}

package/src/dialog.ts

@@ -0,0 +1,11 @@
+import Dialog from "./components/dialog.js";
+
+Dialog.define();
+
+export default Dialog;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-dialog": Dialog;
+  }
+}

package/src/divider.ts

@@ -0,0 +1,11 @@
+import Divider from "./components/divider.js";
+
+Divider.define();
+
+export default Divider;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-divider": Divider;
+  }
+}

package/src/dragbox.ts

@@ -0,0 +1,11 @@
+import Dragbox from "./components/dragbox.js";
+
+Dragbox.define();
+
+export default Dragbox;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-dragbox": Dragbox;
+  }
+}

package/src/flex.ts

@@ -0,0 +1,11 @@
+import Flex from "./components/flex.js";
+
+Flex.define();
+
+export default Flex;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-flex": Flex;
+  }
+}

package/src/form.ts

@@ -0,0 +1,11 @@
+import Form from "./components/form.js";
+
+Form.define();
+
+export default Form;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-form": Form;
+  }
+}

package/src/grid.ts

@@ -0,0 +1,11 @@
+import Grid from "./components/grid.js";
+
+Grid.define();
+
+export default Grid;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-grid": Grid;
+  }
+}

package/src/index.ts

@@ -0,0 +1,28 @@
+export { default as Alert } from "./alert.js";
+export { default as Avatar } from "./avatar.js";
+export { default as Breath } from "./breath.js";
+export { default as Button } from "./button.js";
+export { default as Card } from "./card.js";
+export { default as Carousel } from "./carousel.js";
+export { default as Details } from "./details.js";
+export { default as Dialog } from "./dialog.js";
+export { default as Divider } from "./divider.js";
+export { default as Dragbox } from "./dragbox.js";
+export { default as Flex } from "./flex.js";
+export { default as Form } from "./form.js";
+export { default as Grid } from "./grid.js";
+export { default as Input } from "./input.js";
+export { default as Layout } from "./layout.js";
+export { default as Link } from "./link.js";
+export { default as Progress } from "./progress.js";
+export { default as Range } from "./range.js";
+export { default as Rotate } from "./rotate.js";
+export { default as Router } from "./router.js";
+export { default as Select } from "./select.js";
+export { default as Skeleton } from "./skeleton.js";
+export { default as Split } from "./split.js";
+export { default as Switch } from "./switch.js";
+export { default as Text } from "./text.js";
+export { default as Time } from "./time.js";
+export { default as Tooltip } from "./tooltip.js";
+export { default as Typewriter } from "./typewriter.js";

package/src/input.ts

@@ -0,0 +1,13 @@
+import Input from "./components/input.js";
+
+Input.define();
+
+export default Input;
+
+export * from "./components/input.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "godown-input": Input;
+  }
+}