@kdcloudjs/shoelace 1.0.29 → 1.0.30

package/cdn/chunks/chunk.LNQ6YVCP.js

@@ -0,0 +1,191 @@
+import {
+  pagination_styles_default
+} from "./chunk.HIVDROBU.js";
+import {
+  SlIcon
+} from "./chunk.ZBSZHSIJ.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.UWDF7LAT.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/pagination/pagination.component.ts
+var SlPagination = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.pageSize = 20;
+    this.pageSizeOpts = [10, 20, 50, 100];
+    this.total = 5e3;
+    this.disabled = false;
+    this.className = "";
+    this.simpleMode = false;
+    this.direction = "ltr";
+    this.defaultCurrentPage = 1;
+    this.totalPage = 1;
+  }
+  willUpdate(changed) {
+    if (changed.has("total") || changed.has("pageSize")) {
+      this.totalPage = Math.max(1, Math.ceil(this.total / this.pageSize));
+      if (this.defaultCurrentPage > this.totalPage) {
+        this.defaultCurrentPage = this.totalPage;
+      }
+    }
+  }
+  handleInputChange(e) {
+    const input = e.target;
+    const value = input.value;
+    if (value === "") {
+      return;
+    }
+    const num = Number(value);
+    if (!Number.isNaN(num)) {
+      this.defaultCurrentPage = num;
+    }
+  }
+  handlePageChangePage(page) {
+    if (this.disabled) return;
+    const newPage = Math.min(Math.max(1, page), this.totalPage);
+    this.defaultCurrentPage = newPage;
+    this.emit("sl-page-change", {
+      detail: {
+        pageNumber: page,
+        pageSize: this.pageSize
+      }
+    });
+  }
+  handlePageSizeChange(e) {
+    this.pageSize = Number(e.detail);
+    let page = this.currentPage ? this.currentPage : this.defaultCurrentPage;
+    const totalPage = Math.max(1, Math.ceil(this.total / this.pageSize));
+    if (page > totalPage) page = totalPage;
+    this.defaultCurrentPage = page;
+    this.emit("sl-page-change", {
+      detail: {
+        pageNumber: page,
+        pageSize: this.pageSize
+      }
+    });
+  }
+  render() {
+    const page = this.currentPage ? this.currentPage : this.defaultCurrentPage;
+    const isRtl = this.direction === "rtl";
+    const prevIcon = isRtl ? "chevron-right" : "chevron-left";
+    const nextIcon = isRtl ? "chevron-left" : "chevron-right";
+    const firstIcon = isRtl ? "chevron-bar-right" : "chevron-bar-left";
+    const lastIcon = isRtl ? "chevron-bar-left" : "chevron-bar-right";
+    return this.simpleMode ? b`
+          <div class="pagination ${this.className}">
+            <sl-icon
+              name=${prevIcon}
+              class="page-btn ${page === 1 || this.disabled ? "page-btn--disabled" : ""}"
+              @click=${() => page !== 1 && this.handlePageChangePage(page - 1)}
+            ></sl-icon>
+            <sl-icon
+              name=${nextIcon}
+              class="page-btn ${page === this.totalPage || this.disabled ? "page-btn--disabled" : ""}"
+              @click=${() => page !== this.totalPage && this.handlePageChangePage(page + 1)}
+            ></sl-icon>
+            <custom-select
+              .options=${this.pageSizeOpts}
+              .selected=${this.pageSizeOpts.includes(this.pageSize) ? this.pageSize : 20}
+              .disabled=${this.disabled}
+              @select-change=${this.handlePageSizeChange}
+            >
+            </custom-select>
+          </div>
+        ` : b`
+          <div class="pagination ${this.className}">
+            <div class="page-info">
+              <span class="total">共${this.totalPage}页</span>
+              第
+              <input
+                class="page-input"
+                type="string"
+                .value=${String(page)}
+                min="1"
+                max=${this.total}
+                @input=${this.handleInputChange}
+                @change=${() => this.handlePageChangePage(this.defaultCurrentPage)}
+                ?disabled=${this.disabled}
+              />
+              页
+            </div>
+            <div class="page-btns">
+              <sl-icon
+                name=${firstIcon}
+                class="page-btn ${page === 1 || this.disabled ? "page-btn--disabled" : ""}"
+                @click=${() => page !== 1 && this.handlePageChangePage(1)}
+              ></sl-icon>
+              <sl-icon
+                name=${prevIcon}
+                class="page-btn ${page === 1 || this.disabled ? "page-btn--disabled" : ""}"
+                @click=${() => page !== 1 && this.handlePageChangePage(page - 1)}
+              ></sl-icon>
+              <sl-icon
+                name=${nextIcon}
+                class="page-btn ${page === this.totalPage || this.disabled ? "page-btn--disabled" : ""}"
+                @click=${() => page !== this.totalPage && this.handlePageChangePage(page + 1)}
+              ></sl-icon>
+              <sl-icon
+                name=${lastIcon}
+                class="page-btn ${page === this.totalPage || this.disabled ? "page-btn--disabled" : ""}"
+                @click=${() => page !== this.totalPage && this.handlePageChangePage(this.totalPage)}
+              ></sl-icon>
+            </div>
+            <custom-select
+              .options=${this.pageSizeOpts}
+              .selected=${this.pageSizeOpts.includes(this.pageSize) ? this.pageSize : 20}
+              .disabled=${this.disabled}
+              @select-change=${this.handlePageSizeChange}
+            >
+            </custom-select>
+          </div>
+        `;
+  }
+};
+SlPagination.styles = [component_styles_default, pagination_styles_default];
+SlPagination.dependencies = { "sl-icon": SlIcon };
+__decorateClass([
+  n({ type: Number })
+], SlPagination.prototype, "currentPage", 2);
+__decorateClass([
+  n({ type: Number })
+], SlPagination.prototype, "pageSize", 2);
+__decorateClass([
+  n({ type: Array })
+], SlPagination.prototype, "pageSizeOpts", 2);
+__decorateClass([
+  n({ type: Number })
+], SlPagination.prototype, "total", 2);
+__decorateClass([
+  n({ type: Boolean })
+], SlPagination.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: String })
+], SlPagination.prototype, "className", 2);
+__decorateClass([
+  n({ type: Boolean })
+], SlPagination.prototype, "simpleMode", 2);
+__decorateClass([
+  n({ type: String })
+], SlPagination.prototype, "direction", 2);
+__decorateClass([
+  n({ type: Number })
+], SlPagination.prototype, "defaultCurrentPage", 2);
+__decorateClass([
+  r()
+], SlPagination.prototype, "totalPage", 2);
+
+export {
+  SlPagination
+};

package/cdn/chunks/chunk.M4TH7UQL.js

@@ -0,0 +1,11 @@
+import {
+  SlSplitPanel
+} from "./chunk.IKE6LV2L.js";
+
+// src/components/split-panel/split-panel.ts
+var split_panel_default = SlSplitPanel;
+SlSplitPanel.define("sl-split-panel");
+
+export {
+  split_panel_default
+};

package/cdn/chunks/chunk.MJC25OAB.js

@@ -0,0 +1,25 @@
+import {
+  SlRadio
+} from "./chunk.KSVZ46K5.js";
+
+// src/react/radio/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-radio";
+SlRadio.define("sl-radio");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlRadio,
+  react: React,
+  events: {
+    onSlBlur: "sl-blur",
+    onSlFocus: "sl-focus"
+  },
+  displayName: "SlRadio"
+});
+var radio_default = reactWrapper;
+
+export {
+  radio_default
+};

package/cdn/chunks/chunk.MJMMYCYM.js

@@ -0,0 +1,11 @@
+import {
+  SlColorPicker
+} from "./chunk.KZGSIBRV.js";
+
+// src/components/color-picker/color-picker.ts
+var color_picker_default = SlColorPicker;
+SlColorPicker.define("sl-color-picker");
+
+export {
+  color_picker_default
+};

package/cdn/chunks/chunk.N7B3D62N.js

@@ -0,0 +1,11 @@
+import {
+  SlCol
+} from "./chunk.3DJTJWDV.js";
+
+// src/components/col/col.ts
+var col_default = SlCol;
+SlCol.define("sl-col");
+
+export {
+  col_default
+};

package/cdn/chunks/chunk.NBWMMBCI.js

@@ -0,0 +1,218 @@
+import {
+  i
+} from "./chunk.VKO6US6U.js";
+
+// src/components/think/think.styles.ts
+var think_styles_default = i`
+  :host {
+    display: block;
+  }
+
+  .think__status {
+    width: fit-content;
+    display: flex;
+    flex-direction: row;
+    gap: var(--sl-spacing-1-5x-small, 6px);
+    align-items: center;
+    font-size: var(--sl-font-size-medium, 16px);
+    color: var(--sl-color-neutral-600, #555555);
+    line-height: var(--sl-line-height-normal, 1.8);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    border-radius: var(--sl-border-radius-small, 2px);
+    // padding: var(--sl-spacing-3x-small);
+    outline: none;
+  }
+
+  .think__status:focus-visible {
+    outline: var(--sl-focus-ring, solid 1px #5582f3);
+    outline-offset: var(--sl-focus-ring-offset, 1px);
+  }
+
+  .think__status-icon {
+    font-size: var(--sl-font-size-large, 1.25rem);
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--sl-color-neutral-600, #555555);
+  }
+
+  .think__status-text {
+    line-height: var(--sl-line-height-normal, 22px);
+    font-size: var(--sl-font-size-small, 14px);
+    color: var(--sl-color-neutral-900, rgba(0, 0, 0, 0.94));
+    font-weight: var(--sl-font-weight-bold, 700);
+    /* Bidirectional text: let each title string determine its own base direction
+       via the Unicode Paragraph Algorithm (same as HTML dir='auto' on a block). */
+    unicode-bidi: plaintext;
+  }
+
+  .think__chevron {
+    display: flex;
+    align-items: center;
+    /* Match React's fontSizeSM for the down icon */
+    font-size: var(--sl-font-size-large, 1.25rem);
+    color: var(--sl-color-neutral-600, #555555);
+    /* Matches React's transition: all motionDurationMid motionEaseInOut */
+    transition: transform var(--sl-transition-medium, 250ms) ease-in-out;
+    flex-shrink: 0;
+  }
+
+  .think__chevron--expanded {
+    transform: rotate(90deg);
+  }
+
+  .think__body {
+    overflow: hidden;
+  }
+
+  .think__content {
+    /* Matches React: marginSM top, paddingSM inline-start, 2*lineWidth border */
+    margin-block-start: var(--sl-spacing-x-small, 0.5rem);
+    width: 100%;
+    color: var(--sl-color-neutral-600, rgba(0, 0, 0, 0.64));
+    padding-inline-start: var(--sl-spacing-x-small, 0.5rem);
+    border-inline-start: 2px solid var(--sl-color-neutral-600, rgba(0, 0, 0, 0.64));
+    font-size: var(--sl-font-size-small, 14px);
+    line-height: var(--sl-line-height-normal, 22px);
+    /* Bidirectional text: each block-level paragraph determines its own base
+       direction from its first strong Unicode character. This handles mixed
+       LTR/RTL content without requiring an explicit dir attribute on every node. */
+    unicode-bidi: plaintext;
+  }
+
+  /* ── RTL support ─────────────────────────────────────────────────────────── */
+  /* Mirrors React's [prefixCls]-rtl class applied when direction === 'rtl'.  */
+  /* Uses LocalizeController + class modifier, consistent with sl-details etc. */
+
+  /* In RTL, the inherited direction: rtl from the host makes flex-direction: row
+     flow right-to-left automatically. No flex-direction override needed. */
+
+  /* .think__content uses logical properties (padding-inline-start, border-inline-start)
+     which auto-flip in RTL via inherited direction: rtl. No override needed. */
+
+  .think--rtl .think__chevron {
+    transform: scaleX(-1);
+  }
+
+  .think--rtl .think__chevron--expanded {
+    transform: scaleX(-1) rotate(90deg);
+  }
+
+  /* Spinner animation */
+  @keyframes think-spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .think__spinner {
+    animation: think-spin 1s linear infinite;
+    transform-origin: center;
+  }
+
+  /*
+   * Blink animation — matches React's blinkMotion visual effect.
+   *
+   * A highlight "beam" sweeps left-to-right across the title text while the text
+   * remains fully visible at all times. The gradient goes from the base text
+   * colour through the highlight colour and back, so no part of the text ever
+   * disappears — only the brightness changes as the beam passes.
+   *
+   * React implementation (blink.ts) uses:
+   *   color             - colorTextBlinkDefault (base text colour)
+   *   backgroundImage   - linear-gradient(90deg, transparent, colorTextBlink, transparent)
+   *   backgroundClip    - text
+   *   backgroundSize    - 50%
+   *
+   * In React's CSS-in-JS environment, the "color" property keeps the text
+   * visible while the gradient beam sweeps behind it. In a Web Component we
+   * must use -webkit-text-fill-color: transparent so the clipped background
+   * shows through the text glyphs. To compensate, the gradient endpoints use
+   * the base colour (instead of transparent) so the text stays readable.
+   *
+   * CSS custom properties:
+   *   --sl-c-think-TitleTextBlink-color-default           Base text colour (colorTextBlinkDefault in React).
+   *                                 Defaults to rgba(0, 0, 0, 0.45).
+   *   --sl-c-think-TitleTextBlink-color Highlight beam colour (colorTextBlink / colorTextBase in React).
+   *                                 Defaults to #000.
+   */
+  @keyframes think-blink {
+    0% {
+      background-position-x: -200%;
+      background-position-y: 100%;
+    }
+
+    25% {
+      background-position-x: -100%;
+      background-position-y: 100%;
+    }
+
+    50% {
+      background-position-x: 0%;
+      background-position-y: 100%;
+    }
+
+    75% {
+      background-position-x: 100%;
+      background-position-y: 100%;
+    }
+
+    100% {
+      background-position-x: 200%;
+      background-position-y: 100%;
+    }
+  }
+
+  .think__status-text--blink {
+    /*
+     * Blink shimmer — matches React's blinkMotion visual effect.
+     *
+     * The technique layers TWO backgrounds via background-clip: text:
+     *   1. background-color (base colour) - always fills the full text area,
+     *      keeping every glyph visible at all times.
+     *   2. background-image (gradient beam) - transparent -> highlight -> transparent,
+     *      50% wide, sweeps left-to-right. Where the gradient is transparent the
+     *      background-color shows through (= base colour). At the peak the
+     *      highlight colour fully covers the base, producing strong contrast.
+     *
+     * This is the Web-Component equivalent of React's:
+     *   color: colorTextBlinkDefault          (keeps text readable)
+     *   backgroundImage: linear-gradient(90deg, transparent, colorTextBlink, transparent)
+     *   backgroundClip: 'text'
+     *   backgroundSize: '50%'
+     */
+    color: var(--sl-c-think-TitleTextBlink-color-default, rgba(0, 0, 0, 0.45));
+    -webkit-text-fill-color: transparent;
+
+    /* 1. Base colour — guarantees text is always fully visible */
+    background-color: var(--sl-c-think-TitleTextBlink-color-default, rgba(0, 0, 0, 0.45));
+
+    /* 2. Beam gradient — transparent endpoints let background-color show through;
+     *    only the highlight peak produces a visible colour change. */
+    background-image: linear-gradient(90deg, transparent, var(--sl-c-think-TitleTextBlink-color, var(--sl-color-neutral-1000, #000)), transparent);
+
+    background-clip: text;
+    -webkit-background-clip: text;
+
+    /* Beam size: 50% of element width (matches React's backgroundSize: '50%') */
+    background-size: 50%;
+    background-repeat: no-repeat;
+
+    /* Animation: 1s linear infinite (matches React's animationDuration / timing) */
+    animation-name: think-blink;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-fill-mode: forwards;
+  }
+`;
+
+export {
+  think_styles_default
+};

package/cdn/chunks/chunk.NC7I3GW6.js

@@ -0,0 +1,177 @@
+import {
+  thought_chain_item_styles_default
+} from "./chunk.OREJRTGE.js";
+import {
+  SlSpinner
+} from "./chunk.KF5HTQ6Q.js";
+import {
+  e
+} from "./chunk.ZLKEMKLZ.js";
+import {
+  SlIcon
+} from "./chunk.ZBSZHSIJ.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.UWDF7LAT.js";
+import {
+  A,
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/thought-chain-item/thought-chain-item.component.ts
+var STATUS_ICON_NAMES = {
+  success: "check-circle",
+  error: "x-circle",
+  abort: "dash-circle"
+};
+var SlThoughtChainItem = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.description = "";
+    this.status = "";
+    this.variant = "solid";
+    this.blink = false;
+    this.disabled = false;
+    this.clickable = false;
+    this._hasIconSlotContent = false;
+    this._hasDescriptionSlotContent = false;
+    this._hasTitleSlotContent = false;
+  }
+  firstUpdated() {
+    this._detectSlotContent();
+  }
+  _detectSlotContent() {
+    this._hasIconSlotContent = this.querySelector('[slot="icon"]') !== null;
+    this._hasDescriptionSlotContent = this.querySelector('[slot="description"]') !== null;
+    this._hasTitleSlotContent = this.querySelector('[slot="title"]') !== null;
+  }
+  handleSlotChange() {
+    this._detectSlotContent();
+  }
+  handleClick(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    if (this.clickable) {
+      this.emit("sl-click");
+    }
+  }
+  /** Determine if we should show the icon area */
+  get hasIcon() {
+    return !!this.status || this._hasIconSlotContent;
+  }
+  render() {
+    const hasDescription = this.description || this._hasDescriptionSlotContent;
+    const hasTitle = this.title || this._hasTitleSlotContent;
+    let iconContent;
+    if (this.status === "loading") {
+      iconContent = b`
+        <span class="thought-chain-item__status-icon thought-chain-item__status-icon--loading">
+          <sl-spinner></sl-spinner>
+        </span>
+      `;
+    } else if (this.status && STATUS_ICON_NAMES[this.status]) {
+      iconContent = b`
+        <span class="thought-chain-item__status-icon">
+          <sl-icon name=${STATUS_ICON_NAMES[this.status]}></sl-icon>
+        </span>
+      `;
+    } else if (this._hasIconSlotContent) {
+      iconContent = b`<slot name="icon" @slotchange=${this.handleSlotChange}></slot>`;
+    }
+    return b`
+      <div
+        part="base"
+        class=${e({
+      "thought-chain-item": true,
+      [`thought-chain-item--${this.variant}`]: true,
+      "thought-chain-item--click": this.clickable,
+      "thought-chain-item--disabled": this.disabled,
+      "thought-chain-item--error": this.status === "error",
+      "thought-chain-item--blink": this.blink
+    })}
+        @click=${this.handleClick}
+      >
+        ${this.hasIcon ? b`
+              <div
+                part="icon"
+                class=${e({
+      "thought-chain-item__icon": true,
+      [`thought-chain-item__icon--${this.status}`]: !!this.status
+    })}
+              >
+                ${iconContent}
+              </div>
+            ` : A}
+        <div part="content" class="thought-chain-item__content">
+          ${hasTitle ? b`
+                <span
+                  part="title"
+                  class=${e({
+      "thought-chain-item__title": true,
+      "thought-chain-item__title--with-description": !!hasDescription
+    })}
+                >
+                  <slot name="title" @slotchange=${this.handleSlotChange}>${this.title}</slot>
+                </span>
+              ` : A}
+          ${hasDescription ? b`
+                <span part="description" class="thought-chain-item__description">
+                  <slot name="description" @slotchange=${this.handleSlotChange}>${this.description}</slot>
+                </span>
+              ` : A}
+        </div>
+      </div>
+    `;
+  }
+};
+SlThoughtChainItem.styles = [component_styles_default, thought_chain_item_styles_default];
+SlThoughtChainItem.dependencies = {
+  "sl-icon": SlIcon,
+  "sl-spinner": SlSpinner
+};
+__decorateClass([
+  n()
+], SlThoughtChainItem.prototype, "title", 2);
+__decorateClass([
+  n()
+], SlThoughtChainItem.prototype, "description", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlThoughtChainItem.prototype, "status", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlThoughtChainItem.prototype, "variant", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlThoughtChainItem.prototype, "blink", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlThoughtChainItem.prototype, "disabled", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlThoughtChainItem.prototype, "clickable", 2);
+__decorateClass([
+  r()
+], SlThoughtChainItem.prototype, "_hasIconSlotContent", 2);
+__decorateClass([
+  r()
+], SlThoughtChainItem.prototype, "_hasDescriptionSlotContent", 2);
+__decorateClass([
+  r()
+], SlThoughtChainItem.prototype, "_hasTitleSlotContent", 2);
+
+export {
+  SlThoughtChainItem
+};