@kdcloudjs/shoelace 1.0.24 → 1.0.25

package/dist/chunks/chunk.PRJSTZJ2.js

@@ -0,0 +1,214 @@
+import {
+  time_panel_styles_default
+} from "./chunk.DK37NZTT.js";
+import {
+  SlButton
+} from "./chunk.RAQSRVTG.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.JRE3XEGV.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/time-panel/time-panel.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+var locale = {
+  confirmText: "\u786E\u5B9A"
+};
+var SlTimePanel = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.value = null;
+    this.noHeader = false;
+    this.withFooter = false;
+    this.isTimeUpdating = false;
+  }
+  async handleValueChange() {
+    if (this.value && !this.isTimeUpdating) {
+      await this.updateComplete;
+      this.scrollToTime("hour", "instant");
+      this.scrollToTime("minute", "instant");
+      this.scrollToTime("second", "instant");
+    }
+  }
+  async resetScroll(behavior = "auto") {
+    var _a;
+    await this.updateComplete;
+    if (this.value) {
+      this.scrollToTime("hour", behavior);
+      this.scrollToTime("minute", behavior);
+      this.scrollToTime("second", behavior);
+    } else {
+      const columns = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".timepicker__column");
+      columns == null ? void 0 : columns.forEach((col) => col.scrollTo({ top: 0, behavior }));
+    }
+  }
+  padStart(num, length = 2) {
+    return String(num).padStart(length, "0");
+  }
+  scrollToTime(part, behavior = "smooth") {
+    var _a;
+    const column = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(`.timepicker__column[part~="${part}"]`);
+    if (!column) return;
+    const selectedItem = column.querySelector(`.timepicker__item--selected`);
+    if (selectedItem) {
+      const columnRect = column.getBoundingClientRect();
+      const itemRect = selectedItem.getBoundingClientRect();
+      const offset = itemRect.top - columnRect.top;
+      const targetScrollTop = column.scrollTop + offset;
+      column.scrollTo({
+        top: Math.max(0, targetScrollTop),
+        behavior
+      });
+    }
+  }
+  async updateTime(part, val) {
+    let base = this.value ? new Date(this.value) : /* @__PURE__ */ new Date();
+    if (!this.value) {
+      const today = /* @__PURE__ */ new Date();
+      base = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
+    }
+    if (part === "hour") {
+      base.setHours(val);
+    } else if (part === "minute") {
+      base.setMinutes(val);
+    } else if (part === "second") {
+      base.setSeconds(val);
+    }
+    this.isTimeUpdating = true;
+    this.value = base;
+    this.emit("sl-change", {
+      detail: { value: base }
+    });
+    await this.updateComplete;
+    this.scrollToTime(part, "smooth");
+    setTimeout(() => {
+      this.isTimeUpdating = false;
+    }, 0);
+  }
+  render() {
+    const activeDate = this.value ? new Date(this.value) : null;
+    const activeHour = activeDate ? activeDate.getHours() : null;
+    const activeMinute = activeDate ? activeDate.getMinutes() : null;
+    const activeSecond = activeDate ? activeDate.getSeconds() : null;
+    const hours = Array.from({ length: 24 }, (_, index) => index);
+    const minutes = Array.from({ length: 60 }, (_, index) => index);
+    const seconds = Array.from({ length: 60 }, (_, index) => index);
+    return html`
+      <div class="timepicker" part="base">
+        ${!this.noHeader ? html`
+              <div class="timepicker__header" part="header">
+                <span class="timepicker__header-item"> ${activeHour !== null ? this.padStart(activeHour) : "--"} </span>
+                <span class="timepicker__header-separator">:</span>
+                <span class="timepicker__header-item">
+                  ${activeMinute !== null ? this.padStart(activeMinute) : "--"}
+                </span>
+                <span class="timepicker__header-separator">:</span>
+                <span class="timepicker__header-item">
+                  ${activeSecond !== null ? this.padStart(activeSecond) : "--"}
+                </span>
+              </div>
+            ` : ""}
+        <div class="timepicker__margin">
+          <div part="margin-cell-first"></div>
+          <div part="margin-cell"></div>
+          <div part="margin-cell"></div>
+        </div>
+        <div class="timepicker__columns" part="columns">
+          <div class="timepicker__column" part="column hour">
+            ${hours.map(
+      (hour) => html`
+                <div
+                  class="timepicker__item ${classMap({
+        "timepicker__item--selected": hour === activeHour
+      })}"
+                  part="item hour"
+                  @click="${() => this.updateTime("hour", hour)}"
+                >
+                  ${this.padStart(hour)}
+                </div>
+              `
+    )}
+            <div class="timepicker__pad"></div>
+          </div>
+          <div class="timepicker__column" part="column minute">
+            ${minutes.map(
+      (minute) => html`
+                <div
+                  class="timepicker__item ${classMap({
+        "timepicker__item--selected": minute === activeMinute
+      })}"
+                  part="item minute"
+                  @click="${() => this.updateTime("minute", minute)}"
+                >
+                  ${this.padStart(minute)}
+                </div>
+              `
+    )}
+            <div class="timepicker__pad"></div>
+          </div>
+          <div class="timepicker__column" part="column second">
+            ${seconds.map(
+      (second) => html`
+                <div
+                  class="timepicker__item ${classMap({
+        "timepicker__item--selected": second === activeSecond
+      })}"
+                  part="item second"
+                  @click="${() => this.updateTime("second", second)}"
+                >
+                  ${this.padStart(second)}
+                </div>
+              `
+    )}
+            <div class="timepicker__pad"></div>
+          </div>
+        </div>
+
+        ${this.withFooter ? html`
+              <div class="timepicker__footer" part="footer">
+                <sl-button
+                  size="small"
+                  variant="primary"
+                  @click=${() => {
+      this.emit("sl-select", { detail: { value: this.value } });
+    }}
+                >
+                  ${locale.confirmText}
+                </sl-button>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+SlTimePanel.styles = [component_styles_default, time_panel_styles_default];
+SlTimePanel.dependencies = { "sl-button": SlButton };
+__decorateClass([
+  property({ attribute: false })
+], SlTimePanel.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-header" })
+], SlTimePanel.prototype, "noHeader", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "with-footer" })
+], SlTimePanel.prototype, "withFooter", 2);
+__decorateClass([
+  state()
+], SlTimePanel.prototype, "isTimeUpdating", 2);
+__decorateClass([
+  watch("value")
+], SlTimePanel.prototype, "handleValueChange", 1);
+
+export {
+  SlTimePanel
+};

package/dist/chunks/chunk.PRNRZ46M.js

@@ -0,0 +1,171 @@
+import {
+  thought_chain_item_styles_default
+} from "./chunk.UUY2HROO.js";
+import {
+  SlSpinner
+} from "./chunk.F2BIKL72.js";
+import {
+  SlIcon
+} from "./chunk.TJTYBIR7.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.JRE3XEGV.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/thought-chain-item/thought-chain-item.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+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 = html`
+        <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 = html`
+        <span class="thought-chain-item__status-icon">
+          <sl-icon name=${STATUS_ICON_NAMES[this.status]}></sl-icon>
+        </span>
+      `;
+    } else if (this._hasIconSlotContent) {
+      iconContent = html`<slot name="icon" @slotchange=${this.handleSlotChange}></slot>`;
+    }
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      "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 ? html`
+              <div
+                part="icon"
+                class=${classMap({
+      "thought-chain-item__icon": true,
+      [`thought-chain-item__icon--${this.status}`]: !!this.status
+    })}
+              >
+                ${iconContent}
+              </div>
+            ` : nothing}
+        <div part="content" class="thought-chain-item__content">
+          ${hasTitle ? html`
+                <span
+                  part="title"
+                  class=${classMap({
+      "thought-chain-item__title": true,
+      "thought-chain-item__title--with-description": !!hasDescription
+    })}
+                >
+                  <slot name="title" @slotchange=${this.handleSlotChange}>${this.title}</slot>
+                </span>
+              ` : nothing}
+          ${hasDescription ? html`
+                <span part="description" class="thought-chain-item__description">
+                  <slot name="description" @slotchange=${this.handleSlotChange}>${this.description}</slot>
+                </span>
+              ` : nothing}
+        </div>
+      </div>
+    `;
+  }
+};
+SlThoughtChainItem.styles = [component_styles_default, thought_chain_item_styles_default];
+SlThoughtChainItem.dependencies = {
+  "sl-icon": SlIcon,
+  "sl-spinner": SlSpinner
+};
+__decorateClass([
+  property()
+], SlThoughtChainItem.prototype, "title", 2);
+__decorateClass([
+  property()
+], SlThoughtChainItem.prototype, "description", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlThoughtChainItem.prototype, "status", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlThoughtChainItem.prototype, "variant", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlThoughtChainItem.prototype, "blink", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlThoughtChainItem.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlThoughtChainItem.prototype, "clickable", 2);
+__decorateClass([
+  state()
+], SlThoughtChainItem.prototype, "_hasIconSlotContent", 2);
+__decorateClass([
+  state()
+], SlThoughtChainItem.prototype, "_hasDescriptionSlotContent", 2);
+__decorateClass([
+  state()
+], SlThoughtChainItem.prototype, "_hasTitleSlotContent", 2);
+
+export {
+  SlThoughtChainItem
+};

package/dist/chunks/chunk.Q2XU4CXO.js

@@ -0,0 +1,21 @@
+import {
+  SlRow
+} from "./chunk.GVAPJYA3.js";
+
+// src/react/row/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "sl-row";
+SlRow.define("sl-row");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlRow,
+  react: React,
+  events: {},
+  displayName: "SlRow"
+});
+var row_default = reactWrapper;
+
+export {
+  row_default
+};

package/dist/chunks/chunk.Q4TZCBZJ.js

@@ -0,0 +1,109 @@
+import {
+  avatar_styles_default
+} from "./chunk.K35GSB4N.js";
+import {
+  SlIcon
+} from "./chunk.TJTYBIR7.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.JRE3XEGV.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/avatar/avatar.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+var SlAvatar = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasError = false;
+    this.image = "";
+    this.label = "";
+    this.initials = "";
+    this.loading = "eager";
+    this.shape = "circle";
+  }
+  handleImageChange() {
+    this.hasError = false;
+  }
+  handleImageLoadError() {
+    this.hasError = true;
+    this.emit("sl-error");
+  }
+  render() {
+    const avatarWithImage = html`
+      <img
+        part="image"
+        class="avatar__image"
+        src="${this.image}"
+        loading="${this.loading}"
+        alt=""
+        @error="${this.handleImageLoadError}"
+      />
+    `;
+    let avatarWithoutImage = html``;
+    if (this.initials) {
+      avatarWithoutImage = html`<div part="initials" class="avatar__initials">${this.initials}</div>`;
+    } else {
+      avatarWithoutImage = html`
+        <div part="icon" class="avatar__icon" aria-hidden="true">
+          <slot name="icon">
+            <sl-icon name="person-fill" library="system"></sl-icon>
+          </slot>
+        </div>
+      `;
+    }
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      avatar: true,
+      "avatar--circle": this.shape === "circle",
+      "avatar--rounded": this.shape === "rounded",
+      "avatar--square": this.shape === "square"
+    })}
+        role="img"
+        aria-label=${this.label}
+      >
+        ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}
+      </div>
+    `;
+  }
+};
+SlAvatar.styles = [component_styles_default, avatar_styles_default];
+SlAvatar.dependencies = {
+  "sl-icon": SlIcon
+};
+__decorateClass([
+  state()
+], SlAvatar.prototype, "hasError", 2);
+__decorateClass([
+  property()
+], SlAvatar.prototype, "image", 2);
+__decorateClass([
+  property()
+], SlAvatar.prototype, "label", 2);
+__decorateClass([
+  property()
+], SlAvatar.prototype, "initials", 2);
+__decorateClass([
+  property()
+], SlAvatar.prototype, "loading", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlAvatar.prototype, "shape", 2);
+__decorateClass([
+  watch("image")
+], SlAvatar.prototype, "handleImageChange", 1);
+
+export {
+  SlAvatar
+};

package/dist/chunks/chunk.Q5QQPLBB.js

@@ -0,0 +1,11 @@
+import {
+  SlAvatar
+} from "./chunk.Q4TZCBZJ.js";
+
+// src/components/avatar/avatar.ts
+var avatar_default = SlAvatar;
+SlAvatar.define("sl-avatar");
+
+export {
+  avatar_default
+};

package/dist/chunks/chunk.QBOVLXXP.js

@@ -0,0 +1,21 @@
+import {
+  SlMenuItem
+} from "./chunk.67C5V6BY.js";
+
+// src/react/menu-item/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "sl-menu-item";
+SlMenuItem.define("sl-menu-item");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlMenuItem,
+  react: React,
+  events: {},
+  displayName: "SlMenuItem"
+});
+var menu_item_default = reactWrapper;
+
+export {
+  menu_item_default
+};

package/dist/chunks/chunk.QEB3AMG2.js

@@ -0,0 +1,11 @@
+import {
+  SlThoughtChainItem
+} from "./chunk.PRNRZ46M.js";
+
+// src/components/thought-chain-item/thought-chain-item.ts
+var thought_chain_item_default = SlThoughtChainItem;
+SlThoughtChainItem.define("sl-thought-chain-item");
+
+export {
+  thought_chain_item_default
+};