godown 3.10.0 → 3.11.0

package/src/web-components/input/component.ts

@@ -1,16 +1,16 @@
-import { attr, godown, part, styles, htmlSlot, StyleController } from "@godown/element";
-import iconEyeSlashFill from "@godown/f7-icon/icons/eye-slash-fill.js";
+import { attr, godown, queryPart, styles, htmlSlot, StyleController } from "@godown/element";
+import iconEyeSlash from "../../internal/icons/eye-slash.js";
 import { type TemplateResult, css, html, nothing } from "lit";
 import { property } from "lit/decorators.js";
 
 import { cssGlobalVars } from "../../internal/global-style.js";
 import { SuperInput } from "../../internal/super-input.js";
-import { OutlineBuilder } from "../../internal/outline.js";
+import { RingBuilder } from "../../internal/ring.js";
 
 const protoName = "input";
 
 /**
- * {@linkcode Input} renders a text input.
+ * {@linkcode Input} renders a input.
  *
  * @fires input - Fires when the input value changes.
  * @fires change - Fires when the input value changes.
@@ -19,17 +19,70 @@ const protoName = "input";
 @godown(protoName)
 @styles(css`
   :host {
-    width: var(${cssGlobalVars.input}-width);
-    height: var(${cssGlobalVars.input}-height);
     display: block;
+    ${cssGlobalVars.input}-space: 0.2em;
+    ${cssGlobalVars.input}-control: currentColor;
+    ${cssGlobalVars.input}-icon-color: hsl(0, 0%, 50%);
   }
 
-  :host(:focus-within) {
-    ${cssGlobalVars.outlineColor}: var(${cssGlobalVars.active});
+  :host(:focus-within),
+  :host(:active) {
+    ${cssGlobalVars.ringColor}: var(${cssGlobalVars.active});
+    ${cssGlobalVars.input}-icon-color: currentColor;
+  }
+
+  [part~="root"] {
+    padding: 0.4em 0.5em;
+    display: flex;
+    position: relative;
+    align-items: center;
+    border-radius: inherit;
+    height: inherit;
+  }
+
+  [part="input"] {
+    background: none;
+    height: 100%;
+    flex-grow: 1;
+    color: currentColor;
+    min-height: 1.5em;
+  }
+
+  [part~="icon"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(${cssGlobalVars.input}-icon-color);
+  }
+
+  [part~="prefix"],
+  [part~="suffix"] {
+    height: 100%;
+    display: flex;
+  }
+
+  [part~="suffix"][part~="icon"] {
+    padding-inline-start: var(${cssGlobalVars.input}-space);
+  }
+
+  [part~="prefix"][part~="icon"] {
+    padding-inline-end: var(${cssGlobalVars.input}-space);
   }
 `)
 class Input extends SuperInput {
-  type: "text" | "search" | "tel" | "url" | "email" | "password" = "text";
+  type:
+    | "text"
+    | "search"
+    | "tel"
+    | "url"
+    | "email"
+    | "password"
+    | "number"
+    | "date"
+    | "time"
+    | "datetime-local"
+    | "month"
+    | "week" = "text";
 
   value: string;
 
@@ -39,22 +92,24 @@ class Input extends SuperInput {
   @property()
   variant: "default" | "outline" = "default";
 
-  @part("input")
+  @queryPart("input")
   protected _input: HTMLInputElement;
 
-  private __outlineSC = new StyleController(
-    this,
-    () =>
-      new OutlineBuilder({ outlineType: this.outlineType }).css +
-      (this.variant === "outline" ? `:host{${cssGlobalVars.outlineColor}: var(${cssGlobalVars.active})}` : ""),
-  );
+  constructor() {
+    super();
+    new StyleController(
+      this,
+      () =>
+        new RingBuilder({ type: this.ringType }).css +
+        (this.variant === "outline" ? `:host{${cssGlobalVars.ringColor}:currentColor}` : ""),
+    );
+  }
 
   protected render(): TemplateResult<1> {
     return html`
-      <div
+      <label
         part="root"
         ${attr(this.observedRecord)}
-        class="input-field"
       >
         ${[
           this._renderPrefix(),
@@ -68,38 +123,31 @@ class Input extends SuperInput {
               autocapitalize="${this.autocapitalize || nothing}"
               autocomplete="${this.autocomplete || nothing}"
               placeholder="${this.placeholder || nothing}"
-              id="${this.makeId}"
               @input="${this._handleInput}"
               @change="${this._handleChange}"
             />
           `,
           this._renderSuffix(),
         ]}
-      </div>
+      </label>
     `;
   }
 
   protected _renderSuffix(): TemplateResult<1> {
     const PASSWORD = "password";
-    return html`
-      <label
-        for=${this.makeId}
-        part="suffix"
-      >
-        ${this.type === PASSWORD
-          ? html`
-              <i
-                part="icon"
-                @mousedown="${() => this._changeInputType("text")}"
-                @mouseup="${() => this._changeInputType(PASSWORD)}"
-                @mouseleave="${() => this._changeInputType(PASSWORD)}"
-              >
-                ${iconEyeSlashFill()}
-              </i>
-            `
-          : htmlSlot("suffix")}
-      </label>
-    `;
+    if (this.type === PASSWORD) {
+      return html`
+        <i
+          part="suffix icon"
+          @mousedown="${() => this._changeInputType("text")}"
+          @mouseup="${() => this._changeInputType(PASSWORD)}"
+          @mouseleave="${() => this._changeInputType(PASSWORD)}"
+        >
+          ${iconEyeSlash()}
+        </i>
+      `;
+    }
+    return super._renderSuffix();
   }
 }
 

package/src/web-components/link/component.ts

@@ -1,8 +1,9 @@
-import { godown } from "@godown/element";
+import { attr, godown, htmlSlot, styles } from "@godown/element";
 import { property } from "lit/decorators.js";
 
-import { SuperAnchor } from "../../internal/super-anchor.js";
 import Router from "../router/component.js";
+import { css, html, nothing, type TemplateResult } from "lit";
+import GlobalStyle from "../../internal/global-style.js";
 
 const protoName = "link";
 
@@ -35,7 +36,23 @@ type LinkType = keyof typeof linkTypes;
  * @category navigation
  */
 @godown(protoName)
-class Link extends SuperAnchor {
+@styles(css`
+  :host {
+    display: inline-block;
+    color: currentColor;
+    cursor: default;
+  }
+
+  :host([href]) {
+    cursor: pointer;
+  }
+
+  a {
+    color: currentColor;
+    display: contents;
+  }
+`)
+class Link extends GlobalStyle {
   /**
    * If `"normal"`, behave like a normal anchor.
    *
@@ -58,13 +75,32 @@ class Link extends SuperAnchor {
   @property({ type: Boolean })
   replace = false;
 
+  /**
+   * A element href.
+   */
+  @property()
+  href: string;
+
+  /**
+   * A element target.
+   */
+  @property()
+  target: "_blank" | "_self" | "_parent" | "_top" = "_self";
+
   /**
    * Location state object.
    */
   state = {};
 
+  get pathname(): string {
+    return new URL(this.href, location.href).pathname;
+  }
+
   protected _handleClick(e: MouseEvent): void {
     const { state, type, href, pathname, suppress } = this;
+    if (!href) {
+      return;
+    }
     this.dispatchCustomEvent("navigate", {
       ...this.observedRecord,
       pathname,
@@ -104,6 +140,20 @@ class Link extends SuperAnchor {
         break;
     }
   };
+
+  protected render(): TemplateResult<1> {
+    return html`
+      <a
+        part="root"
+        ${attr(this.observedRecord)}
+        href="${this.href || nothing}"
+        target="${this.target}"
+        @click=${this._handleClick}
+      >
+        ${htmlSlot()}
+      </a>
+    `;
+  }
 }
 
 export default Link;

package/src/web-components/progress/component.ts

@@ -73,7 +73,8 @@ class Progress extends GlobalStyle {
     let className: string;
     if (!isNullable(this.value)) {
       const ranger = new Ranger(this.min, this.max);
-      width = ranger.restrict(this.value / ranger.diff) * 100;
+      const value = +this.value - this.min;
+      width = (value / ranger.diff) * 100;
       className = "static";
     }
     return html`

package/src/web-components/range/component.ts

@@ -5,7 +5,7 @@ import {
   isNullable,
   joinDeclarations,
   loop,
-  part,
+  queryPart,
   styles,
   Ranger,
   omit,
@@ -35,12 +35,13 @@ type RangeValue = number | number[];
 @styles(
   css`
     :host {
-      ${cssScope}--handle-active: var(${cssGlobalVars.active});
       ${cssScope}--track-width: .5em;
-      ${cssScope}--length: var(${cssGlobalVars.input}-width);
+      ${cssScope}--handle-scale: 1;
+      ${cssScope}--track-background: var(${cssGlobalVars.active});
       background: var(${cssGlobalVars.passive});
-      width: var(${cssScope}--length);
+      width: 100%;
       display: block;
+      height: var(${cssScope}--track-width);
     }
 
     :host([contents]) [part="root"] {
@@ -48,22 +49,16 @@ type RangeValue = number | number[];
     }
 
     :host([vertical]) {
-      height: var(${cssScope}--length);
+      height: 100%;
       width: fit-content;
     }
 
-    :host(:not([disabled])) .last-focus {
-      ${cssScope}--handle-scale: 1.05;
-      background: var(${cssScope}--handle-active);
-    }
-
     [part="root"] {
       min-height: inherit;
       position: relative;
       border-radius: inherit;
       --from: 0%;
       --to: 50%;
-      height: var(${cssScope}--track-width);
     }
 
     [part="track"] {
@@ -75,11 +70,11 @@ type RangeValue = number | number[];
       border-radius: inherit;
       justify-content: space-between;
       left: min(var(--from), var(--to));
-      background: var(${cssGlobalVars.active});
+      background: var(${cssScope}--track-background);
       width: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));
     }
 
-    [part="handle"] {
+    [part~="handle"] {
       width: 1em;
       height: 1em;
       display: flex;
@@ -87,12 +82,14 @@ type RangeValue = number | number[];
       justify-content: center;
       user-select: none;
       position: absolute;
-      border: 0.1em solid;
       border-radius: 50%;
       transform-origin: 0% 25%;
-      transform: scale(var(${cssScope}--handle-scale, 1)) translate(-50%, -25%);
-      background: var(${cssGlobalVars.active});
-      border-color: var(${cssGlobalVars.input}-control);
+      outline: 0;
+      border-style: solid;
+      border-width: 0.1em;
+      transform: scale(var(${cssScope}--handle-scale)) translate(-50%, -25%);
+      background: var(${cssGlobalVars.background});
+      border-color: currentColor;
     }
   `,
   css`
@@ -113,12 +110,12 @@ type RangeValue = number | number[];
     }
   `,
   css`
-    [part="handle"] {
+    [part~="handle"] {
       left: var(--handle);
       top: 0;
     }
 
-    [vertical] [part="handle"] {
+    [vertical] [part~="handle"] {
       top: var(--handle);
       left: 0;
     }
@@ -163,7 +160,7 @@ class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
   @property({ type: Array })
   default: V;
 
-  @part("root")
+  @queryPart("root")
   protected _root: HTMLElement;
 
   @queryAll("[part=handle]")
@@ -206,7 +203,7 @@ class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
   }
 
   get observedRecord(): Record<string, any> {
-    return omit(super.observedRecord, "outline-type");
+    return omit(super.observedRecord, "ring-type");
   }
 
   protected render(): TemplateResult<1> {
@@ -242,11 +239,8 @@ class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
     return html`
       <i
         tabindex="0"
-        part="handle"
-        class="${tokenList({ "last-focus": this.lastFocus === index })}"
+        part="${tokenList("handle", `handle-${index}`)}"
         @mousedown="${disabled ? null : this.createMouseDown(index)}"
-        @focus="${disabled ? null : () => this.focusHandle(index)}"
-        @blur="${disabled ? null : this.blurHandle}"
         style="${joinDeclarations({
           "z-index": this.__focusStack.indexOf(index) + 1,
           "--handle": `var(--${end ? "to" : `handle-${index}`})`,

package/src/web-components/rotate/component.ts

@@ -1,4 +1,4 @@
-import { godown, htmlSlot, part, styles } from "@godown/element";
+import { godown, htmlSlot, queryPart, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 
 import { GlobalStyle, scopePrefix } from "../../internal/global-style.js";
@@ -43,7 +43,7 @@ const cssScope = scopePrefix(protoName);
   }
 `)
 class Rotate extends GlobalStyle {
-  @part("root")
+  @queryPart("root")
   protected _root: HTMLElement;
 
   protected render(): TemplateResult<1> {

package/src/web-components/select/component.ts

@@ -1,5 +1,5 @@
-import { type HandlerEvent, attr, godown, htmlSlot, part, styles } from "@godown/element";
-import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
+import { type HandlerEvent, attr, godown, htmlSlot, queryPart, styles } from "@godown/element";
+import svgCaretDown from "../../internal/icons/caret-down.js";
 import { type TemplateResult, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 
@@ -39,7 +39,7 @@ const protoName = "select";
  *
  * Multi-selected state looks the same as single-selected.
  *
- * Input will filter the element.
+ * Input will filter the options.
  *
  * @fires input - Fires when the input value changes.
  * @fires change - Fires when the input value changes.
@@ -53,7 +53,7 @@ const protoName = "select";
   css`
     :host(:focus-within),
     .outline {
-      ${cssGlobalVars.input}-outline-color: var(${cssGlobalVars.active});
+      ${cssGlobalVars.input}-outline-color: currentColor;
     }
 
     [part="input"] {
@@ -81,7 +81,7 @@ class Select extends Input {
   @property()
   text: string;
 
-  @part("content")
+  @queryPart("content")
   protected _content: HTMLElement;
 
   @property()
@@ -110,10 +110,9 @@ class Select extends Input {
 
   protected render(): TemplateResult<1> {
     return html`
-      <div
+      <label
         part="root"
         ${attr(this.observedRecord)}
-        class="input-field"
       >
         ${[
           this._renderPrefix(),
@@ -127,23 +126,14 @@ class Select extends Input {
               autocapitalize="${this.autocapitalize || nothing}"
               autocomplete="${this.autocomplete || nothing}"
               placeholder="${this.placeholder || nothing}"
-              id="${this.makeId}"
               @focus="${this._handleFocus}"
               @input="${this._handleInput}"
               @change="${this._handleChange}"
             />
           `,
+          this._renderSuffix(),
           html`
             <label
-              for="${this.makeId}"
-              part="suffix"
-            >
-              <i part="icon">${svgCaretDown()}</i>
-            </label>
-          `,
-          html`
-            <label
-              for="${this.makeId}"
               part="content"
               direction-outset-place
             >
@@ -151,7 +141,13 @@ class Select extends Input {
             </label>
           `,
         ]}
-      </div>
+      </label>
+    `;
+  }
+
+  protected _renderSuffix(): TemplateResult<1> {
+    return html`
+      <i part="suffix icon">${svgCaretDown()}</i>
     `;
   }
 

package/src/web-components/select/definition.ts

@@ -6,6 +6,6 @@ export default Select;
 
 declare global {
   interface HTMLElementTagNameMap {
-    "g-select": Select;
+    "godown-select": Select;
   }
 }

package/src/web-components/skeleton/component.ts

@@ -1,5 +1,4 @@
 import { attr, godown, htmlSlot, styles } from "@godown/element";
-import iconPhoto from "@godown/f7-icon/icons/photo.js";
 import { type TemplateResult, css, html } from "lit";
 import { property, state } from "lit/decorators.js";
 
@@ -18,46 +17,26 @@ const cssScope = scopePrefix(protoName);
 @godown(protoName)
 @styles(css`
   :host {
-    ${cssScope}--from: var(${cssGlobalVars._colors.darkgray[9]});
-    ${cssScope}--to: var(${cssGlobalVars._colors.darkgray[7]});
+    ${cssScope}--from: var(${cssGlobalVars.background});
+    ${cssScope}--to: var(${cssGlobalVars.passive});
     ${cssScope}--deg: 95deg;
-    ${cssScope}--duration: 1.5s;
-    ${cssScope}--icon-size: 5em;
-    ${cssScope}--icon-margin: .25em;
-    color: var(${cssGlobalVars._colors.darkgray[5]});
-    background: var(${cssScope}--from);
+    ${cssScope}--duration: 2s;
     min-height: 1.5em;
     width: 100%;
     flex-shrink: 0;
-    display: block;
     overflow: hidden;
-  }
-
-  [part="root"] {
-    min-height: inherit;
-    text-align: center;
-    animation: var(${cssScope}--duration) ease-in-out 0s infinite none running;
-  }
-
-  svg {
-    --size: var(${cssScope}--icon-size);
-    font-size: var(--size);
-    margin: calc(var(--size) * 0.05);
-  }
-
-  [animation="position"] {
+    background-color: transparent;
+    background-size: 200% 100%;
     background-image: linear-gradient(
       var(${cssScope}--deg),
       var(${cssScope}--from) 36%,
       var(${cssScope}--to) 50%,
       var(${cssScope}--from) 64%
     );
-    background-color: transparent;
-    background-size: 200% 100%;
-    animation-name: po;
+    animation: _ var(${cssScope}--duration) ease-in-out infinite none running;
   }
 
-  @keyframes po {
+  @keyframes _ {
     from {
       background-position: 150% center;
     }
@@ -66,34 +45,16 @@ const cssScope = scopePrefix(protoName);
     }
   }
 
-  [animation="opacity"] {
-    animation-name: op;
-    animation-direction: alternate;
+  [part="root"] {
+    display: contents;
   }
 
-  @keyframes op {
-    50% {
-      opacity: 0.25;
-    }
-    to {
-      opacity: 1;
-    }
+  :host,
+  :host([contents]) [part="root"] {
+    display: block;
   }
 `)
 class Skeleton extends GlobalStyle {
-  /**
-   * If "image", render a image placeholder.
-   */
-  @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.
    */
@@ -105,12 +66,7 @@ class Skeleton extends GlobalStyle {
       return htmlSlot();
     }
     return html`
-      <div
-        part="root"
-        ${attr(this.observedRecord)}
-      >
-        ${this.type === "image" ? iconPhoto() : ""} ${htmlSlot("loading")}
-      </div>
+      <div part="root">${htmlSlot("loading")}</div>
     `;
   }
 }