@kdcloudjs/shoelace 1.0.50 → 1.0.52

package/cdn/chunks/chunk.6HECAGZL.js

@@ -0,0 +1,373 @@
+import {
+  popconfirm_styles_default
+} from "./chunk.NXVJ3W6M.js";
+import {
+  o
+} from "./chunk.TNQRIWXJ.js";
+import {
+  SlPopup
+} from "./chunk.GAVVZRTC.js";
+import {
+  SlButton
+} from "./chunk.PIB5DYY5.js";
+import {
+  SlIcon
+} from "./chunk.QKWA4FGY.js";
+import {
+  e
+} from "./chunk.ZLKEMKLZ.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  e as e2,
+  n,
+  r
+} from "./chunk.XXG7OQYD.js";
+import {
+  A,
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/popconfirm/popconfirm.component.ts
+var placementMap = {
+  top: "top",
+  topLeft: "top-start",
+  topRight: "top-end",
+  bottom: "bottom",
+  bottomLeft: "bottom-start",
+  bottomRight: "bottom-end",
+  left: "left",
+  leftTop: "left-start",
+  leftBottom: "left-end",
+  right: "right",
+  rightTop: "right-start",
+  rightBottom: "right-end"
+};
+var SlPopconfirm = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.title = "";
+    this.description = "";
+    this.okText = "\u786E\u5B9A";
+    this.cancelText = "\u53D6\u6D88";
+    this.placement = "top";
+    this.open = false;
+    this.disabled = false;
+    this.icon = "exclamation-circle-fill";
+    this.arrow = true;
+    this.okType = "primary";
+    this.direction = "ltr";
+    this.scrollParent = null;
+    /** shift 关闭时锁定的 skidding 值 */
+    this.lockedSkidding = 0;
+    this.shiftLocked = false;
+    this.confirmLoading = false;
+    this.handleScroll = () => {
+      var _a;
+      if (!this.scrollParent || !this.popup || !this.open) return;
+      const anchor = this.querySelector(":scope > :not([slot])");
+      if (!anchor) return;
+      const cr = this.scrollParent.getBoundingClientRect();
+      const ar = anchor.getBoundingClientRect();
+      const anchorArea = ar.width * ar.height;
+      if (anchorArea === 0) return;
+      const overlapW = Math.max(0, Math.min(ar.right, cr.right) - Math.max(ar.left, cr.left));
+      const overlapH = Math.max(0, Math.min(ar.bottom, cr.bottom) - Math.max(ar.top, cr.top));
+      const visibleRatio = overlapW * overlapH / anchorArea;
+      if (visibleRatio <= 0.2 && !this.shiftLocked) {
+        const popupEl = (_a = this.popup.shadowRoot) == null ? void 0 : _a.querySelector(".popup");
+        if (!popupEl) return;
+        const pr = popupEl.getBoundingClientRect();
+        const placement = (this.popup.getAttribute("data-current-placement") || "top").split("-")[0];
+        if (placement === "top" || placement === "bottom") {
+          this.lockedSkidding = (pr.left + pr.right) / 2 - (ar.left + ar.right) / 2;
+        } else {
+          this.lockedSkidding = (pr.top + pr.bottom) / 2 - (ar.top + ar.bottom) / 2;
+        }
+        this.shiftLocked = true;
+        this.popup.shift = false;
+        this.popup.skidding = this.lockedSkidding;
+        this.popup.reposition();
+      } else if (visibleRatio > 0.2 && this.shiftLocked) {
+        this.shiftLocked = false;
+        this.lockedSkidding = 0;
+        this.popup.shift = true;
+        this.popup.skidding = 0;
+        this.popup.reposition();
+      }
+    };
+    this.handleTriggerClick = () => {
+      if (this.disabled) return;
+      this.open ? this.hide() : this.show();
+    };
+    this.handleDocumentClick = (e3) => {
+      if (!this.open) return;
+      if (!e3.composedPath().includes(this)) this.hide();
+    };
+    this.handleConfirm = async () => {
+      var _a;
+      if (this.confirmLoading) return;
+      const result = (_a = this.onConfirm) == null ? void 0 : _a.call(this);
+      if (result instanceof Promise) {
+        this.confirmLoading = true;
+        try {
+          await result;
+          this.hide();
+        } finally {
+          this.confirmLoading = false;
+        }
+      } else {
+        this.hide();
+      }
+    };
+    this.handleCancel = () => {
+      var _a;
+      (_a = this.onCancel) == null ? void 0 : _a.call(this);
+      this.hide();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.hasAttribute("title")) {
+      if (!this.title) {
+        this.title = this.getAttribute("title") || "";
+      }
+      this.removeAttribute("title");
+    }
+    let node = this.parentElement;
+    while (node) {
+      const style = getComputedStyle(node);
+      if (/(auto|scroll|hidden)/.test(style.overflow + style.overflowX + style.overflowY)) {
+        this.scrollParent = node;
+        break;
+      }
+      node = node.parentElement;
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+    this.stopScrollTracking();
+    this.scrollParent = null;
+    document.removeEventListener("click", this.handleDocumentClick);
+  }
+  firstUpdated() {
+    if (this.open) {
+      this.startScrollTracking();
+    }
+  }
+  startScrollTracking() {
+    if (this.scrollParent) {
+      this.scrollParent.addEventListener("scroll", this.handleScroll, { passive: true });
+    }
+  }
+  stopScrollTracking() {
+    if (this.scrollParent) {
+      this.scrollParent.removeEventListener("scroll", this.handleScroll);
+    }
+    this.shiftLocked = false;
+    this.lockedSkidding = 0;
+  }
+  async show() {
+    var _a;
+    if (this.open) return;
+    this.open = true;
+    await this.updateComplete;
+    this.popup.reposition();
+    this.startScrollTracking();
+    document.addEventListener("click", this.handleDocumentClick);
+    if ("CloseWatcher" in window) {
+      (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+      this.closeWatcher = new CloseWatcher();
+      this.closeWatcher.onclose = () => {
+        this.hide();
+      };
+    }
+  }
+  async hide() {
+    var _a;
+    if (!this.open) return;
+    this.open = false;
+    this.stopScrollTracking();
+    document.removeEventListener("click", this.handleDocumentClick);
+    (_a = this.closeWatcher) == null ? void 0 : _a.destroy();
+    this.closeWatcher = null;
+  }
+  /** 是否显示箭头 */
+  get showArrow() {
+    if (typeof this.arrow === "boolean") return this.arrow;
+    return true;
+  }
+  /** 箭头是否精准指向目标元素中心 */
+  get arrowPointAtCenter() {
+    if (typeof this.arrow === "object" && this.arrow !== null) return this.arrow.pointAtCenter;
+    return false;
+  }
+  /** 解析 styles 属性，支持对象和函数 */
+  resolveStyles() {
+    if (!this.customStyles) return {};
+    if (typeof this.customStyles === "function") return this.customStyles({ props: this });
+    return this.customStyles;
+  }
+  render() {
+    const mapped = placementMap[this.placement] || "top";
+    let arrowPlacement = "anchor";
+    if (!this.arrowPointAtCenter && mapped.includes("-")) {
+      arrowPlacement = mapped.endsWith("-start") ? "start" : "end";
+    }
+    const cn = this.classNames || {};
+    const resolvedStyles = this.resolveStyles();
+    return b`
+      <sl-popup
+        class=${e({
+      popconfirm: true,
+      "popconfirm--open": this.open
+    })}
+        placement=${placementMap[this.placement] || "top"}
+        distance=${8}
+        strategy="absolute"
+        flip
+        shift
+        ?arrow=${this.showArrow}
+        arrow-placement=${arrowPlacement}
+        ?active=${this.open}
+      >
+        <slot slot="anchor" @click=${this.handleTriggerClick}></slot>
+        <div
+          class=${e({
+      popconfirm__body: true,
+      "popconfirm__body--rtl": this.direction === "rtl",
+      [cn.body || ""]: !!cn.body
+    })}
+          style=${o(resolvedStyles.body || {})}
+          dir=${this.direction}
+          part="body"
+        >
+          <div class="popconfirm__content">
+            <span
+              class=${e({ popconfirm__icon: true, [cn.icon || ""]: !!cn.icon })}
+              style=${o(resolvedStyles.icon || {})}
+              part="icon"
+            >
+              <slot name="icon">
+                <sl-icon name=${this.icon}></sl-icon>
+              </slot>
+            </span>
+            <div class="popconfirm__text">
+              ${this.title ? b`<div
+                    class=${e({ popconfirm__title: true, [cn.title || ""]: !!cn.title })}
+                    style=${o(resolvedStyles.title || {})}
+                    part="title"
+                  >
+                    ${this.title}
+                  </div>` : A}
+              ${this.description ? b`<div
+                    class=${e({ popconfirm__description: true, [cn.description || ""]: !!cn.description })}
+                    style=${o(resolvedStyles.description || {})}
+                    part="description"
+                  >
+                    ${this.description}
+                  </div>` : A}
+            </div>
+          </div>
+          <div
+            class=${e({ popconfirm__footer: true, [cn.footer || ""]: !!cn.footer })}
+            style=${o(resolvedStyles.footer || {})}
+            part="footer"
+          >
+            <sl-button size="small" @click=${this.handleCancel}>${this.cancelText}</sl-button>
+            <sl-button
+              size="small"
+              variant=${this.okType === "danger" ? "danger" : "primary"}
+              ?loading=${this.confirmLoading}
+              ?disabled=${this.confirmLoading}
+              @click=${this.handleConfirm}
+            >
+              ${this.okText}
+            </sl-button>
+          </div>
+        </div>
+      </sl-popup>
+    `;
+  }
+};
+SlPopconfirm.styles = [component_styles_default, popconfirm_styles_default];
+SlPopconfirm.dependencies = {
+  "sl-popup": SlPopup,
+  "sl-button": SlButton,
+  "sl-icon": SlIcon
+};
+__decorateClass([
+  e2("sl-popup")
+], SlPopconfirm.prototype, "popup", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlPopconfirm.prototype, "title", 2);
+__decorateClass([
+  n()
+], SlPopconfirm.prototype, "description", 2);
+__decorateClass([
+  n({ attribute: "ok-text" })
+], SlPopconfirm.prototype, "okText", 2);
+__decorateClass([
+  n({ attribute: "cancel-text" })
+], SlPopconfirm.prototype, "cancelText", 2);
+__decorateClass([
+  n()
+], SlPopconfirm.prototype, "placement", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlPopconfirm.prototype, "open", 2);
+__decorateClass([
+  n({ type: Boolean, reflect: true })
+], SlPopconfirm.prototype, "disabled", 2);
+__decorateClass([
+  n()
+], SlPopconfirm.prototype, "icon", 2);
+__decorateClass([
+  n({
+    attribute: "arrow",
+    converter: {
+      fromAttribute: (value) => {
+        if (value === null || value === "false") return false;
+        if (value === "" || value === "true") return true;
+        try {
+          return JSON.parse(value);
+        } catch (e3) {
+          return true;
+        }
+      }
+    }
+  })
+], SlPopconfirm.prototype, "arrow", 2);
+__decorateClass([
+  n({ attribute: "ok-type" })
+], SlPopconfirm.prototype, "okType", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlPopconfirm.prototype, "onConfirm", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlPopconfirm.prototype, "onCancel", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlPopconfirm.prototype, "classNames", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlPopconfirm.prototype, "customStyles", 2);
+__decorateClass([
+  n({ type: String })
+], SlPopconfirm.prototype, "direction", 2);
+__decorateClass([
+  r()
+], SlPopconfirm.prototype, "confirmLoading", 2);
+
+export {
+  SlPopconfirm
+};

package/cdn/chunks/chunk.6HHD6FW3.js

@@ -0,0 +1,55 @@
+import {
+  i
+} from "./chunk.VKO6US6U.js";
+
+// src/components/timeline/timeline.styles.ts
+var timeline_styles_default = i`
+  :host {
+    display: block;
+  }
+
+  /* ============================== Vertical (default) ============================== */
+  .timeline {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-family: var(--sl-font-sans);
+  }
+
+  /* ============================== Horizontal ============================== */
+  .timeline--horizontal {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+  }
+
+  .timeline--horizontal ::slotted(sl-timeline-item) {
+    flex: 1 1 0%;
+    min-width: 0;
+  }
+
+  .timeline--horizontal sl-timeline-item {
+    flex: 1 1 0%;
+    min-width: 0;
+  }
+
+  /* ============================== Alternate (vertical) ============================== */
+  .timeline--alternate {
+    /* container for alternate items — items set via placement attribute on sl-timeline-item */
+  }
+
+  /* ============================== Reverse ============================== */
+  .timeline--reverse {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  .timeline--horizontal.timeline--reverse {
+    flex-direction: row-reverse;
+  }
+`;
+
+export {
+  timeline_styles_default
+};

package/cdn/chunks/chunk.6I2NWX7W.js

@@ -0,0 +1,277 @@
+import {
+  i
+} from "./chunk.VKO6US6U.js";
+
+// src/components/bubble/bubble.styles.ts
+var bubble_styles_default = i`
+  :host {
+    display: block;
+  }
+
+  /* ===== Base layout ===== */
+  .bubble {
+    display: flex;
+    gap: var(--sl-spacing-x-small, 0.5rem);
+    align-items: flex-start;
+    font-family: var(
+      --sl-font-sans,
+      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
+    );
+    font-size: var(--sl-font-size-medium, 1rem);
+    line-height: var(--sl-line-height-dense, 1.4);
+  }
+
+  /* ===== Placement ===== */
+  .bubble--end {
+    flex-direction: row-reverse;
+  }
+
+  .bubble--end .bubble__body {
+    align-items: flex-end;
+  }
+
+  .bubble--end .bubble__footer {
+    justify-content: flex-end;
+  }
+
+  /* ===== RTL ===== */
+  .bubble--rtl {
+    direction: rtl;
+  }
+
+  /* ===== Avatar ===== */
+  .bubble__avatar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .bubble__avatar ::slotted(sl-avatar) {
+    --size: var(--sl-spacing-2x-large, 2.25rem); /* 36px */
+  }
+
+  .bubble__avatar--hidden {
+    display: none;
+  }
+
+  /* ===== Body ===== */
+  .bubble__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sl-spacing-3x-small, 0.125rem);
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  /* ===== Header ===== */
+  .bubble__header {
+    font-size: var(--sl-font-size-small, 0.875rem);
+    color: var(--sl-color-neutral-600, #555);
+  }
+
+  .bubble__header--hidden {
+    display: none;
+  }
+
+  /* ===== Content ===== */
+  .bubble__content {
+    display: inline-block;
+    align-self: flex-start;
+    max-width: 100%;
+    padding: var(--sl-spacing-x-small, 0.5rem) var(--sl-spacing-small, 0.75rem);
+    border-radius: var(--sl-border-radius-large, 0.5rem);
+    word-break: break-word;
+    position: relative;
+  }
+
+  .bubble--end .bubble__content {
+    align-self: flex-end;
+  }
+
+  /* ── Variant: filled (default) ── */
+  .bubble__content--filled {
+    background-color: var(--sl-bubble-filled-background, var(--sl-color-neutral-50));
+    color: var(--sl-bubble-filled-color, var(--sl-color-neutral-900, #212121));
+  }
+
+  .bubble--end .bubble__content--filled {
+    background-color: var(--sl-bubble-filled-background-end, var(--sl-color-on-surface-01));
+    color: var(--sl-bubble-filled-color-end, var(--sl-color-neutral-900, #212121));
+  }
+
+  /* ── Variant: outlined ── */
+  .bubble__content--outlined {
+    background-color: var(--sl-bubble-outlined-background, transparent);
+    border: 1px solid var(--sl-bubble-outlined-border-color, var(--sl-color-neutral-300, #d4d4d4));
+    color: var(--sl-bubble-outlined-color, var(--sl-color-neutral-900, #212121));
+  }
+
+  /* ── Variant: shadow ── */
+  .bubble__content--shadow {
+    background-color: var(--sl-bubble-shadow-background, var(--sl-color-neutral-0, #fff));
+    box-shadow: var(--sl-bubble-shadow-box-shadow, var(--sl-shadow-small));
+    color: var(--sl-bubble-shadow-color, var(--sl-color-neutral-900, #212121));
+  }
+
+  /* ── Variant: borderless ── */
+  .bubble__content--borderless {
+    background: transparent;
+    padding: 0;
+    color: var(--sl-bubble-borderless-color, var(--sl-color-neutral-900, #212121));
+  }
+
+  /* ── Shape: round ── */
+  .bubble__content--round {
+    border-radius: var(--sl-border-radius-pill, 9999px);
+  }
+
+  /* ── Shape: corner ── */
+  .bubble__content--corner {
+    border-radius: var(--sl-border-radius-large, 0.5rem);
+  }
+
+  .bubble--start .bubble__content--corner {
+    border-start-start-radius: var(--sl-spacing-3x-small, 0.125rem);
+  }
+
+  .bubble--end .bubble__content--corner {
+    border-start-end-radius: var(--sl-spacing-3x-small, 0.125rem);
+  }
+
+  /* ===== Footer ===== */
+  .bubble__footer {
+    display: flex;
+    font-size: var(--sl-font-size-small, 0.875rem);
+    color: var(--sl-color-neutral-500, #6e6e6e);
+    margin-block-start: var(--sl-spacing-3x-small, 0.125rem);
+  }
+
+  .bubble__footer--hidden {
+    display: none;
+  }
+
+  .bubble__footer--start {
+    flex-direction: row;
+  }
+
+  .bubble__footer--end {
+    flex-direction: row-reverse;
+  }
+
+  /* ── Inner footer (inside content bubble) ── */
+  .bubble__content-inner {
+    /* Wrapper for content text when footer is inner, so footer sits below */
+  }
+
+  .bubble__content > .bubble__footer {
+    margin-block-start: var(--sl-spacing-2x-small, 0.25rem);
+    padding-block-start: var(--sl-spacing-2x-small, 0.25rem);
+    border-block-start: 1px solid var(--sl-color-neutral-200, #e5e5e5);
+  }
+
+  /* ===== Extra ===== */
+  .bubble__extra {
+    display: flex;
+    align-self: flex-end;
+    flex-shrink: 0;
+  }
+
+  .bubble__extra--hidden {
+    display: none;
+  }
+
+  /* ===== Loading indicator ===== */
+  .bubble__loading {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: var(--sl-spacing-2x-small, 0.25rem) 0;
+  }
+
+  .bubble__loading-dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: var(--sl-bubble-loading-dot-color, var(--sl-color-neutral-400, #a0a0a0));
+    animation: bubble-loading-bounce 1.4s infinite ease-in-out both;
+  }
+
+  .bubble__loading-dot:nth-child(1) {
+    animation-delay: 0s;
+  }
+
+  .bubble__loading-dot:nth-child(2) {
+    animation-delay: 0.16s;
+  }
+
+  .bubble__loading-dot:nth-child(3) {
+    animation-delay: 0.32s;
+  }
+
+  @keyframes bubble-loading-bounce {
+    0%, 80%, 100% {
+      transform: scale(0.6);
+      opacity: 0.4;
+    }
+    40% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  /* ===== Typing animation ===== */
+  .bubble__typing-cursor::after {
+    content: '▍';
+    display: inline;
+    animation: bubble-cursor-blink 0.8s infinite;
+    color: var(--sl-bubble-cursor-color, var(--sl-color-neutral-500, #6e6e6e));
+    font-weight: 100;
+    margin-inline-start: 1px;
+  }
+
+  @keyframes bubble-cursor-blink {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+    }
+  }
+
+  /* ===== Editable mode ===== */
+  .bubble__content--editing {
+    align-self: stretch;
+  }
+
+  .bubble__editable-input {
+    outline: none;
+    min-height: 1lh;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .bubble__editable-actions {
+    display: flex;
+    gap: var(--sl-spacing-2x-small, 0.25rem);
+    margin-block-start: var(--sl-spacing-x-small, 0.5rem);
+  }
+
+  /* ===== Fade-in animation for content ===== */
+  .bubble__fade-in {
+    animation: bubble-fade-in 0.3s ease-in;
+  }
+
+  @keyframes bubble-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`;
+
+export {
+  bubble_styles_default
+};