godown 3.11.2 → 3.13.0

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

@@ -2,52 +2,32 @@ import { attr, godown, htmlSlot, StyleController, styles, tokenList } from "@god
 import { cssGlobalVars, GlobalStyle, scopePrefix } from "../../internal/global-style.js";
 import { css, html, type TemplateResult } from "lit";
 import { property, queryAll } from "lit/decorators.js";
-import { RingBuilder, type RingType } from "../../internal/ring.js";
+import { RingBuilder, ringTypeAttribute, type RingType } from "../../internal/ring.js";
 
 const protoName = "tabs";
 const cssScope = scopePrefix(protoName);
 
-const mouseEnterAddedToken = "hover";
+const hoverToken = "hover";
 
 /**
  * {@linkcode Tabs} used to render a set of tabs.
  *
- * It accepts "tabs" to present the sub-content.
- *
- * When "useSlot" is enabled, each item in "tabs" becomes a named slot with the same name as itself,
- * while for non-slot tabs, the content is rendered as a horizontally padded string.
- *
- * When "mouseenter" and "mouseleave" are triggered on an individual tab, the indicator will move.
- *
- * The moving indicator will start from the position of the item that was last entered.
- *
- * If the pointer moves out of the root element or the element is connected to the document,
- * the starting position of the indicator will be regarded as the current selection.
- *
- * Apply "flex-direction: column" to the tabs to arrange them vertically.
- *
- * @csspart root - The root element.
- * @csspart item - The tab items.
- * @csspart indicator - The indicator.
- * @csspart selected - The selected tab item.
- * @csspart hover - The hovered tab item.
- * @fires select - Fires when the tab is selected.
+ * @fires select - Fires when the tab index is changed.
  * @category display
  */
 @godown(protoName)
 @styles(css`
   :host {
     ${cssScope}--indicator-background: var(${cssGlobalVars.passive});
-    ${cssScope}--space: 0.25em;
-    border-radius: var(${cssGlobalVars.radius});
-    transition: 0.3s ease-in-out;
-    width: fit-content;
+    ${cssScope}--selected-background: var(${cssGlobalVars.passive});
+    transition: 0.2s ease-in-out;
     display: flex;
     cursor: default;
   }
 
   [part="root"] {
-    padding: 0.2em;
+    gap: 0.25em;
+    padding: 0.25em;
     position: relative;
     z-index: 1;
     display: flex;
@@ -56,14 +36,10 @@ const mouseEnterAddedToken = "hover";
     border-radius: inherit;
     transition: inherit;
     transition-property: width, transform, opacity;
-    gap: var(${cssScope}--space);
-  }
-
-  [useslot] [part~="item"] {
-    padding: 0;
   }
 
   [part~="item"] {
+    position: relative;
     width: 100%;
     display: block;
     padding: 0 0.25em;
@@ -74,12 +50,11 @@ const mouseEnterAddedToken = "hover";
     transition-property: inherit;
   }
 
-  [part="indicator"] {
+  [part="indicator"],
+  [part~="item"]::after {
     width: 100%;
     height: 100%;
     inset: 0;
-    opacity: 0;
-    z-index: -1;
     position: absolute;
     transition: inherit;
     border-radius: inherit;
@@ -87,27 +62,58 @@ const mouseEnterAddedToken = "hover";
     background: var(${cssScope}--indicator-background);
   }
 
-  [part~="selected"] {
-    background: var(${cssScope}--indicator-background);
+  [part="indicator"] {
+    opacity: 0;
+    z-index: -1;
+  }
+
+  [part~="item"]::after {
+    z-index: -2;
+  }
+
+  [indicator="underline"] [part="indicator"],
+  [indicator="underline"] [part~="item"]::after {
+    top: 100%;
+    height: 0.15em;
+    border-radius: 0.075em;
+    margin-top: 0.15em;
+  }
+
+  [part~="selected"]::after {
+    content: "";
+    background: var(${cssScope}--selected-background);
   }
 
-  [part~="selected"] [part="indicator"],
   [part~="hover"] [part="indicator"] {
     opacity: 1;
   }
 `)
 class Tabs extends GlobalStyle {
-  @property({ attribute: "ring-type" })
+  @property({ attribute: ringTypeAttribute })
   ringType: RingType = "border";
 
   /**
-   * Determines whether the tabs should use a slot for their content instead of a string.
+   * If it is "select", the indicator moves from the selected content to the hover position.
+   *
+   * If it is "previous", the indicator moves from the last moved position to the hover position.
+   *
+   * If "none", the indicator will not move.
+   */
+  @property()
+  beginning: "selected" | "previous" | "none" = "selected";
+
+  /**
+   * The behavior of the indicator:
+   *
+   * If "background", its size will be consistent with that of a single tab.
+   *
+   * If "underline", an underline will be displayed at the bottom of the tab.
    */
-  @property({ type: Boolean })
-  useSlot = false;
+  @property()
+  indicator: "background" | "underline" = "background";
 
   /**
-   * An array of strings or slot content representing the tabs.
+   * Tab list or slot list.
    */
   @property({ type: Array })
   tabs: string[];
@@ -118,7 +124,7 @@ class Tabs extends GlobalStyle {
   @property({ type: Number })
   index = 0;
 
-  protected _lastIndex: number;
+  protected previousIndex: number;
 
   @queryAll("[part~=item]")
   protected _items: HTMLCollectionOf<HTMLLIElement>;
@@ -138,24 +144,20 @@ class Tabs extends GlobalStyle {
         ${attr(this.observedRecord)}
         @mouseleave="${this._handleMouseLeave}"
       >
-        ${this.tabs?.map((tab, index) =>
-          tab || this.useSlot
-            ? html`
-                <li
-                  part="${tokenList("item", {
-                    selected: this.index === index,
-                  })}"
-                  @mouseenter=${() => {
-                    this.move(this._lastIndex, index);
-                    this._lastIndex = index;
-                  }}
-                  @click=${() => this.select(index)}
-                >
-                  ${this.useSlot ? htmlSlot(tab) : tab}
-                  <div part="indicator"></div>
-                </li>
-              `
-            : "",
+        ${this.tabs?.map(
+          (tab, index) => html`
+            <li
+              part="${tokenList("item", this.index === index && "selected")}"
+              @mouseenter=${() => {
+                this.move(this.previousIndex, index);
+                this.previousIndex = index;
+              }}
+              @click=${() => this.select(index)}
+            >
+              ${htmlSlot(tab, tab)}
+              <div part="indicator"></div>
+            </li>
+          `,
         )}
       </ul>
     `;
@@ -163,65 +165,62 @@ class Tabs extends GlobalStyle {
 
   connectedCallback(): void {
     super.connectedCallback();
-    this._lastIndex = this.index;
+    this.previousIndex = this.beginning === "selected" ? this.index : -1;
   }
 
   protected _handleMouseLeave(): void {
-    const lastItem = this._items[this._lastIndex];
+    const lastItem = this._items[this.previousIndex];
     if (lastItem) {
-      lastItem.part.remove(mouseEnterAddedToken);
+      lastItem.part.remove(hoverToken);
     }
-    this._lastIndex = this.index;
+    this.previousIndex = this.beginning === "selected" ? this.index : -1;
   }
 
-  move(from: number, to: number): void {
-    if (from === to) {
+  move(sourceIndex: number, targetIndex: number): void {
+    if (sourceIndex === targetIndex) {
       return;
     }
     const { _items, _indicators } = this;
-    const toItem = _items[to];
-    if (!toItem) {
+    const targetElement = _items[targetIndex];
+    if (!targetElement) {
       return;
     }
-    toItem.part.add(mouseEnterAddedToken);
-    const fromItem = _items[from];
+    targetElement.part.add(hoverToken);
+    const fromItem = _items[sourceIndex];
     if (!fromItem) {
       return;
     }
-    fromItem.part.remove(mouseEnterAddedToken);
-    const toIndicator = _indicators[to];
-    const fromIndicator = _indicators[from];
-    if (!toIndicator || !fromIndicator) {
+    fromItem.part.remove(hoverToken);
+    if (this.beginning === "none") {
       return;
     }
-    const fromIndicatorRect = fromIndicator.getBoundingClientRect();
-    const toItemRect = toItem.getBoundingClientRect();
-    const transformX = fromIndicatorRect.x - toItemRect.x;
-    const transformY = fromIndicatorRect.y - toItemRect.y;
-    const fromWidth = fromIndicatorRect.width;
-
-    const { style } = toIndicator;
-    const cssNone = "none";
-
-    style.transform = `translate3d(${transformX}px,${transformY}px,0)`;
-    style.width = fromWidth + "px";
-    style.transition = fromIndicator.style.transition = cssNone;
-
-    toIndicator.getBoundingClientRect();
-
-    style.width = style.transform = style.transition = fromIndicator.style.transition = "";
+    const targetIndicator = _indicators[targetIndex];
+    const sourceIndicator = _indicators[sourceIndex];
+    if (!targetIndicator || !sourceIndicator) {
+      return;
+    }
+    const { x: sourceX, y: sourceY, width: sourceWidth } = sourceIndicator.getBoundingClientRect();
+    const { x, y } = targetIndicator.getBoundingClientRect();
+    const transformX = sourceX - x;
+    const transformY = sourceY - y;
+
+    const { style: targetStyle } = targetIndicator;
+    const { style: sourceStyle } = sourceIndicator;
+
+    targetStyle.transform = `translate3d(${transformX}px,${transformY}px,0)`;
+    targetStyle.width = `${sourceWidth}px`;
+    targetStyle.transition = sourceStyle.transition = "none";
+    targetIndicator.getBoundingClientRect();
+    targetStyle.width = targetStyle.transform = targetStyle.transition = sourceStyle.transition = "";
   }
 
   select(selected: number): void {
-    const { index, tabs, _lastIndex, useSlot } = this;
-    if (!tabs || index === selected || !(selected in tabs)) {
-      return;
-    }
-    this.dispatchCustomEvent("select", selected);
-    this.move(_lastIndex, selected);
-    this._lastIndex = selected;
-    if (index in tabs && (tabs[index] || useSlot)) {
+    const { index, previousIndex } = this;
+    this.move(previousIndex, selected);
+    if (selected !== index) {
+      this.previousIndex = selected;
       this.index = selected;
+      this.dispatchCustomEvent("select", selected);
     }
   }
 }

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

@@ -1,13 +1,11 @@
-import { attr, tokenList, godown, htmlSlot, styles } from "@godown/element";
+import { godown, htmlSlot, styles } from "@godown/element";
 import { type TemplateResult, css, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle, cssGlobalVars, scopePrefix } from "../../internal/global-style.js";
+import { GlobalStyle, cssGlobalVars } from "../../internal/global-style.js";
 
 const protoName = "text";
 
-const cssScope = scopePrefix(protoName);
-
 /**
  * {@linkcode Text} renders text.
  *
@@ -15,74 +13,71 @@ const cssScope = scopePrefix(protoName);
  */
 @godown(protoName)
 @styles(css`
-  :host {
-    ${cssScope}--color: currentColor;
-    ${cssScope}--color-hover: currentColor;
-    ${cssScope}--color-active: currentColor;
+  :host([clip]) {
+    background: var(${cssGlobalVars.backgroundClip});
     display: inline-block;
-    text-overflow: ellipsis;
-    overflow-wrap: break-word;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    -webkit-background-clip: text;
   }
 
-  [part="root"] {
+  :host([nowrap]) {
     white-space: nowrap;
-    vertical-align: bottom;
-    display: inline-block;
-    text-overflow: inherit;
-    overflow-wrap: inherit;
-    overflow: hidden;
-    color: var(${cssScope}--color);
   }
 
-  [part="root"]:hover {
-    color: var(${cssScope}--color-hover, var(${cssScope}--color));
+  :host([italic]) {
+    font-style: italic;
   }
 
-  [part="root"]:active {
-    color: var(${cssScope}--color-active, var(${cssScope}--color));
-  }
-
-  .hover:hover,
-  .active:active,
-  .always {
-    text-decoration: underline;
+  :host([truncate]),
+  :host([truncate]) ::slotted(*) {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
-  .none {
-    text-decoration: none;
+  :host([strikethrough]) {
+    text-decoration: line-through;
   }
 
-  [clip] {
-    background: var(${cssGlobalVars.backgroundClip});
-    display: inline-block;
-    color: transparent;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    -webkit-background-clip: text;
+  :host([underline=""]),
+  :host([underline="always"]),
+  :host(:hover[underline="hover"]),
+  :host(:active[underline="active"]),
+  :host(:focus[underline="focus"]) {
+    text-decoration: underline;
   }
 `)
 class Text extends GlobalStyle {
-  /**
-   * Underline behavior.
-   */
-  @property()
-  underline: "none" | "hover" | "active" | "always" = "none";
+  @property({
+    converter: {
+      fromAttribute(value) {
+        return value === "" ? true : value;
+      },
+      toAttribute(value) {
+        return value === false ? null : value === true ? "" : value;
+      },
+    },
+    reflect: true,
+  })
+  underline: "none" | "hover" | "active" | "always" | boolean = "none";
+
+  @property({ type: Boolean, reflect: true })
+  nowrap = false;
+
+  @property({ type: Boolean, reflect: true })
+  italic = false;
+
+  @property({ type: Boolean, reflect: true })
+  truncate = false;
 
-  /**
-   * Set background-clip to text.
-   */
-  @property({ type: Boolean })
+  @property({ type: Boolean, reflect: true })
   clip = false;
 
   protected render(): TemplateResult<1> {
     return html`
-      <span
-        part="root"
-        ${attr(this.observedRecord)}
-        class="${tokenList(this.underline)}"
-      >
-        ${htmlSlot()}
-      </span>
+      <p part="root">${htmlSlot()}</p>
     `;
   }
 }

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

@@ -1,9 +1,9 @@
-import { attr, godown, styles } from "@godown/element";
+import { attr, godown } from "@godown/element";
 import fmtime from "fmtime";
-import { type PropertyValues, type TemplateResult, css, html } from "lit";
+import { type PropertyValues, type TemplateResult, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { GlobalStyle } from "../../internal/global-style.js";
+import Text from "../text/component.js";
 
 const protoName = "time";
 
@@ -14,12 +14,7 @@ const protoName = "time";
  * @category display
  */
 @godown(protoName)
-@styles(css`
-  :host {
-    text-align: center;
-  }
-`)
-class Time extends GlobalStyle {
+class Time extends Text {
   /**
    * Escape symbol.
    */
@@ -54,12 +49,7 @@ class Time extends GlobalStyle {
 
   protected render(): TemplateResult<1> {
     return html`
-      <span
-        part="root"
-        ${attr(this.observedRecord)}
-      >
-        ${fmtime(this.format, this.time, this.escape)}
-      </span>
+      <p part="root">${fmtime(this.format, this.time, this.escape)}</p>
     `;
   }
 

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

@@ -1,138 +1,71 @@
-import { attr, godown, htmlSlot, styles } from "@godown/element";
-import { type TemplateResult, css, html } from "lit";
+import { godown, htmlSlot } from "@godown/element";
+import { type TemplateResult, html } from "lit";
 import { property } from "lit/decorators.js";
 
-import { scopePrefix } from "../../internal/global-style.js";
-import { SuperOpenable } from "../../internal/super-openable.js";
-import { type DirectionCardinal, type DirectionCorner, directionOutsetPlace } from "../../internal/direction.js";
+import Popover from "../popover/component.js";
 
 const protoName = "tooltip";
-const cssScope = scopePrefix(protoName);
 
 /**
- * {@linkcode Tooltip} provide tooltip for slot elements.
+ * {@linkcode Tooltip} is similar to {@linkcode Popover}.
  *
- * If it has the tip property, ignore the slot tip.
+ * It listens for the mouseenter event and displays the tip or popover after a specified delay.
  *
- * @slot tip - Tip element if no `tip` provided.
- * @slot - Content.
+ * When it is clicked or the mouseleave event occurs followed by another delay, closes the tip.
+ *
+ * @fires toggle - Fired when the popover is toggled.
+ * @slot tip - Tip content.
+ * @slot - Tip trigger.
  * @category feedback
  */
 @godown(protoName)
-@styles(
-  directionOutsetPlace,
-  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;
-    }
+class Tooltip extends Popover {
+  action: "hide";
+  span: "span" | "isolated";
 
-    .passive {
-      background: var(${cssScope}--tip-background);
-    }
-
-    [propagation] [part="tip"] {
-      pointer-events: none;
-    }
-  `,
-)
-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: DirectionCardinal | DirectionCorner = "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",
-  };
+  @property({ type: Number })
+  delay = 300;
 
   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="root">
         <div
-          part="tip"
-          direction-outset-place
+          part="trigger"
+          @click=${this.hide}
         >
-          ${this.tip
-            ? html`
-                <span class="passive">${this.tip}</span>
-              `
-            : htmlSlot("tip")}
+          ${htmlSlot()}
+        </div>
+        <div
+          part="popover"
+          popover="manual"
+        >
+          ${htmlSlot("tip", this.tip)}
         </div>
       </div>
     `;
   }
+
+  _hoverTimeout: number;
+  _leaveTimeout: number;
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.events.add(this, "mouseenter", () => {
+      clearTimeout(this._leaveTimeout);
+      this._hoverTimeout = setTimeout(() => {
+        this.show();
+      }, this.delay);
+    });
+    this.events.add(this, "mouseleave", () => {
+      clearTimeout(this._hoverTimeout);
+      this._leaveTimeout = setTimeout(() => {
+        this.hide();
+      }, this.delay);
+    });
+  }
 }
 
 export default Tooltip;

package/vscode.css-custom-data.json

@@ -1 +1 @@
-{"version":1.1,"properties":[],"pseudoElements":[{"name":"::part(root)","description":"The root element."},{"name":"::part(item)","description":"The tab items."},{"name":"::part(indicator)","description":"The indicator."},{"name":"::part(selected)","description":"The selected tab item."},{"name":"::part(hover)","description":"The hovered tab item."}]}
+{"version":1.1,"properties":[],"pseudoElements":[]}