godown 3.0.0-canary.8 → 3.0.0-canary.9

package/src/components/layout.ts

@@ -13,11 +13,8 @@ const protoName = "layout";
  * {@linkcode NavLayout} renders slot and optional top header, bottom footer.
  *
  * @slot - The main content of the layout.
- *
  * @slot header - The header of the layout.
- *
  * @slot footer - The footer of the layout.
- *
  * @category layout
  */
 @godown(protoName)
@@ -50,21 +47,22 @@ const protoName = "layout";
 )
 class NavLayout extends GlobalStyle {
   /**
-   * If true, hide the header slot.
+   * If true, remove the header slot.
    */
   @property({ type: Boolean })
-  noHeader: boolean;
+  noHeader = false;
+
   /**
-   * If true, hide the footer slot.
+   * If true, remove the footer slot.
    */
   @property({ type: Boolean })
-  noFooter: boolean;
+  noFooter = false;
 
   /**
    * If true, header will sticky.
    */
   @property({ type: Boolean })
-  sticky: boolean;
+  sticky = false;
 
   protected render() {
     return html`${

package/src/components/link.ts

@@ -19,7 +19,9 @@ class Link extends SuperAnchor {
   /**
    * If "push", call `history.pushState`.
    *
-   * If "replace", call `history.replaceState`
+   * If "replace", call `history.replaceState`.
+   *
+   * If "normal", behave like a normal anchor.
    */
   @property()
   type: "push" | "replace" | "normal" = "normal";

package/src/components/progress.ts

@@ -1,5 +1,6 @@
 import { godown } from "@godown/element/decorators/godown.js";
 import { styles } from "@godown/element/decorators/styles.js";
+import { isNil } from "@godown/element/tools/lib.js";
 import { css, html } from "lit";
 import { property } from "lit/decorators.js";
 
@@ -56,26 +57,19 @@ const protoName = "progress";
   }
 `)
 class Progress extends GlobalStyle {
-  /**
-   * Maximum.
-   */
   @property({ type: Number })
   max = 1;
-  /**
-   * Minimum.
-   */
+
   @property({ type: Number })
   min = 0;
-  /**
-   * Input value.
-   */
-  @property({ type: Number, reflect: true })
-  value = null;
+
+  @property({ type: Number })
+  value: number;
 
   protected render() {
     let width = 20;
     let className: string;
-    if (this.value !== null) {
+    if (!isNil(this.value)) {
       width = this.parsePercent(this.value);
       className = "static";
     }

package/src/components/range.ts

@@ -133,33 +133,36 @@ class Range extends SuperInput {
   step: number;
 
   /**
-   * Display vertically
+   * Display vertically.
    */
   @property({ type: Boolean, reflect: true })
   vertical: boolean;
 
   /**
-   * When `this.range` is true, it should be [number, number], otherwise number.
+   * Value, or each of values, will render a handle.
+   *
+   * Accepts number or array of numbers.
    */
   @property({ type: Array })
   value: number | number[];
+
   /**
-   * The default of `this.value`.
+   * The default of `{@linkcode this.value}`.
    */
   @property({ type: Array })
   default: typeof this.value;
 
   @part("root")
-  _root: HTMLElement;
+  protected _root: HTMLElement;
 
   @queryAll("[part=handle]")
-  _handles: NodeListOf<HTMLElement>;
+  protected _handles: NodeListOf<HTMLElement>;
 
   @state()
   lastFocus?: number;
 
   /**
-   * Returns true when the second number is greater than the first number
+   * Returns true when the second number is greater than the first number.
    */
   get reverse() {
     return this.range ? this.value[0] > this.value[1] : false;
@@ -279,8 +282,8 @@ class Range extends SuperInput {
     };
   }
 
-  createMouseDown(index) {
-    return (e) => {
+  createMouseDown(index: number) {
+    return (e: MouseEvent) => {
       this.focusHandle(index);
       this.createMousedownListener(this.createSetValue(index))(e);
     };
@@ -292,7 +295,7 @@ class Range extends SuperInput {
     this.focusHandle(0);
   }
 
-  createSetValue(index?: number) {
+  createSetValue(index: number) {
     return (numberOrModifier: number | ((value: number) => number)) => {
       const number = typeof numberOrModifier === "number"
         ? this.normalizeValue(numberOrModifier)
@@ -386,21 +389,13 @@ class Range extends SuperInput {
     this.value = this.default;
   }
 
-  swap() {
-    if (this.range) {
-      const [a, b] = this.value as [number, number];
-      this.value = [b, a];
-    }
-  }
-
   sort() {
-    this.value = this.toSorted();
+    return this.value = this.toSorted();
   }
 
-  toSorted(): typeof this.value {
+  toSorted() {
     if (this.range) {
-      const [a, b] = this.value as [number, number];
-      return a > b ? [b, a] : [a, b];
+      return [...this.value as number[]].sort((a, b) => a - b);
     }
     return this.value;
   }

package/src/components/rotate.ts

@@ -49,7 +49,7 @@ const cssScope = scopePrefix(protoName);
 )
 class Rotate extends GlobalStyle {
   @part("root")
-  _root: HTMLElement;
+  protected _root: HTMLElement;
 
   protected render() {
     return html`<div part="root">

package/src/components/router.ts

@@ -27,6 +27,8 @@ const protoName = "router";
  *
  * If no routes are matched, the default value (no named slot) will be rendered.
  *
+ * @slot - Display slot when there is no match.
+ * @slot * - Matching slot will be displayed.
  * @category navigation
  */
 @godown(protoName)
@@ -50,31 +52,37 @@ class Router<C = unknown> extends GlobalStyle {
    */
   @state()
   component: C | TemplateResult = null;
+
   /**
    * Dynamic parameters record.
    */
   @state()
   params: Record<string, string> = {};
+
   /**
    * Value of matched path in routes.
    */
   @state()
   path: string;
+
   /**
    * Current pathname (equals to location.pathname).
    */
   @property()
   pathname = "";
+
   /**
    * Path prefix.
    */
   @property()
   baseURL = "";
+
   /**
    * Rendered content when there is no match.
    */
   @state()
   default: TemplateResult = htmlSlot();
+
   /**
    * The type of routing sources.
    *
@@ -84,6 +92,7 @@ class Router<C = unknown> extends GlobalStyle {
    */
   @property()
   type: "united" | "slotted" | "field" = "united";
+
   /**
    * Cache accessed records.
    *
@@ -97,6 +106,7 @@ class Router<C = unknown> extends GlobalStyle {
     this.__routes = value;
     this.collectFieldRoutes(value);
   }
+
   get routes() {
     return this.__routes;
   }
@@ -158,8 +168,7 @@ class Router<C = unknown> extends GlobalStyle {
   }
 
   /**
-   * @param params value of useRouter()
-   * @param first whether this path is loaded for the first time.
+   * Callback function when the route changes.
    */
   routeChangeCallback: (params: {
     pathname: string;
@@ -182,9 +191,7 @@ class Router<C = unknown> extends GlobalStyle {
   }
 
   /**
-   * Find components from {@linkcode __fieldRouteTree} matching query.
-   * @param query Query string.
-   * @returns Components or null.
+   * Get component from {@linkcode routes} by query.
    */
   fieldComponent(query?: string) {
     query ||= this.useWhich(this.pathname);
@@ -203,9 +210,7 @@ class Router<C = unknown> extends GlobalStyle {
   }
 
   /**
-   * Find components from {@linkcode __slottedRouteTree} matching query.
-   * @param query Query string.
-   * @returns Named slot element template result or null.
+   * Get component from slotted elements by query.
    */
   slottedComponent(usedRouteTemplate?: string) {
     const slottedPaths = this._slottedNames;
@@ -256,9 +261,13 @@ class Router<C = unknown> extends GlobalStyle {
 
   static updateAll() {
     this.routerInstances.forEach((i) => {
-      i.pathname = window.location.pathname;
+      i.handlePopstate();
     });
   }
+
+  handlePopstate = this.events.add(window, "popstate", () => {
+    this.pathname = location.pathname;
+  }) as () => void;
 }
 
 export default Router;

package/src/components/select.ts

@@ -69,7 +69,6 @@ const protoName = "select";
   `,
 )
 class Select extends Input {
-  _cache = new WeakMap<HTMLElement, boolean>();
   // @ts-ignore
   value: string | string[];
 
@@ -80,7 +79,7 @@ class Select extends Input {
   text: string;
 
   @part("content")
-  _content: HTMLElement;
+  protected _content: HTMLElement;
 
   @property()
   direction: "top" | "bottom" | undefined;
@@ -93,6 +92,7 @@ class Select extends Input {
 
   @state()
   protected autoDirection: "top" | "bottom" = "bottom";
+
   protected lastChecked: HTMLElement;
   protected defaultText: string;
   protected defaultChecked: HTMLElement[];

package/src/components/skeleton.ts

@@ -91,12 +91,14 @@ class Skeleton extends GlobalStyle {
    */
   @property()
   type: "text" | "image";
+
   /**
    * Animation type.
    * opacity animation only effect on slotted element and image icon.
    */
   @property()
   animation: "position" | "opacity" = "position";
+
   /**
    * If false, render slot only.
    */

package/src/components/split.ts

@@ -79,6 +79,7 @@ class Split extends SuperInput {
    */
   @property({ type: Number })
   len = 6;
+
   /**
    * Focus index.
    */
@@ -87,6 +88,7 @@ class Split extends SuperInput {
 
   @state()
   current = -1;
+
   @state()
   currentValue: (string | void)[] = [];
 
@@ -123,7 +125,32 @@ class Split extends SuperInput {
     if (this.compositing) {
       return;
     }
-    if (e.data === null) {
+
+    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) {
+    if (data === null) {
       // delete
 
       if (this.currentValue[this.current] !== null) {
@@ -137,28 +164,32 @@ class Split extends SuperInput {
         const lastNotNull = this.currentValue.findLastIndex(a => a !== null);
         this.current = this.current - 1 < 0 ? lastNotNull < 0 ? 0 : lastNotNull : this.current - 1;
       }
-    } else {
-      // input
+      return;
+    }
 
-      this.currentValue[this.current] = e.data;
-      if (this.current + 1 >= this.len) {
-        // index overflow
+    const multiple = data.length > 1;
 
-        this.current = this.currentValue.indexOf(null);
-        if (this.current === -1) {
-          this.blur();
-        }
-      } else {
-        // go to after
+    // input
+    this.currentValue[this.current] = data[0];
+    if (this.current + 1 >= this.len) {
+      // index overflow
 
-        this.current += 1;
+      this.current = this.currentValue.indexOf(null);
+      if (this.current === -1) {
+        this.blur();
       }
-    }
+    } else {
+      // go to after
 
-    this.value = this.currentValue.join("");
+      this.current += 1;
+    }
 
-    this.dispatchEvent(new CustomEvent("input", { detail: this.value, bubbles: true, composed: true }));
-    this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
+    if (multiple) {
+      const after = data.slice(1);
+      if (after) {
+        this.fillInput(after);
+      }
+    }
   }
 
   focus() {

package/src/components/switch.ts

@@ -24,6 +24,7 @@ const cssScope = scopePrefix(protoName);
       ${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);
       width: var(${cssScope}-width);
@@ -72,7 +73,7 @@ const cssScope = scopePrefix(protoName);
     }
 
     :host([checked]) span {
-      transform: translateX(100%);
+      left: 50%;
     }
 
     .rect .true {
@@ -83,13 +84,13 @@ const cssScope = scopePrefix(protoName);
       background: var(${cssGlobalVars.passive});
     }
 
-    .round span::after{
+    .round span{
       --size: var(${cssScope}-handle-size);
-      content:"";
       border-radius: 100%;
       background: var(--godown--input-control);
       width: var(--size);
       height: var(--size);
+      margin: var(${cssScope}-handle-space);
     }
 
     .round {
@@ -107,21 +108,25 @@ class Switch extends SuperInput {
    */
   @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.
+   * Disable this element.
    */
   @property({ type: Boolean, reflect: true })
   disabled = false;
+
   /**
-   * Parsed by JSON.parse to checked.
+   * Default checked state.
    */
   @property()
   default = "false";
+
   /**
    * Input value.
    */
@@ -129,7 +134,7 @@ class Switch extends SuperInput {
   value = "on";
 
   @query("input")
-  _input: HTMLInputElement;
+  protected _input: HTMLInputElement;
 
   protected render() {
     return html`<div part="root" class="${this.round ? "round" : "rect"}">
@@ -142,8 +147,7 @@ class Switch extends SuperInput {
         id="${this.makeId}"
         type="checkbox"
       >
-      <span class="${this.checked}">
-      </span>
+      <span part="handle" class="${this.checked}"></span>
     </div>`;
   }
 

package/src/components/time.ts

@@ -17,32 +17,36 @@ const protoName = "time";
 @styles(css`:host{text-align: center;}`)
 class Time extends GlobalStyle {
   /**
-   * Cancels the next character formatting.
+   * Escape symbol.
    */
   @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;
+  timeout;
+
   /**
    * The number of milliseconds that change with each update.
    */
   @property({ type: Number })
-  gap = 0;
+  gap;
 
-  timeoutId: number;
+  protected timeoutId: number;
 
   protected render(): string {
     return fmtime(this.format, this.time, this.escape);

package/src/components/tooltip.ts

@@ -4,7 +4,7 @@ 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 { scopePrefix } from "../core/global-style.js";
 import SuperOpenable, { type Direction8 } from "../core/super-openable.js";
 
 const protoName = "tooltip";
@@ -15,7 +15,7 @@ const cssScope = scopePrefix(protoName);
  *
  * If it has the tip property, ignore the slot tip.
  *
- * @slot tip - Tip element.
+ * @slot tip - Tip element if no `tim` provided.
  * @slot - Content.
  * @category feedback
  */
@@ -23,7 +23,7 @@ const cssScope = scopePrefix(protoName);
 @styles(
   css`
     :host {
-      ${cssScope}--tip-background: var(${cssGlobalVars.background});
+      ${cssScope}--tip-background: inherit;
       display: inline-block;
       width: fit-content;
     }
@@ -44,9 +44,7 @@ const cssScope = scopePrefix(protoName);
       user-select: none;
     }
 
-    :host([open]) [part="tip"],
-    :host(:hover) [part="tip"],
-    [part="tip"]:hover {
+    :host([open]) [part="tip"] {
       visibility: visible;
     }
 
@@ -76,11 +74,13 @@ class Tooltip extends SuperOpenable {
    */
   @property()
   tip: string;
+
   /**
    * Direction of opening the tip.
    */
   @property()
   direction: Direction8 = "top";
+
   /**
    * Content alignment.
    */
@@ -93,6 +93,18 @@ class Tooltip extends SuperOpenable {
   @property({ type: Boolean })
   propagation: boolean;
 
+  /**
+   * 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",
@@ -103,9 +115,18 @@ class Tooltip extends SuperOpenable {
 
   protected render() {
     const align = Tooltip.aligns[this.align] || "inherit";
-    return html`<div part="root" style="justify-content:${align};align-items:${align}">
+    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"}">
+      <div part="tip"
+      direction="${this.direction}"
+      style="pointer-events:${this.propagation ? "none" : "all"}">
     ${
       this.tip
         ? html`<span class="passive">${this.tip}</span>`