@kdcloudjs/shoelace 1.0.29 → 1.0.30

package/dist/chunks/chunk.TJEPUVRV.js

@@ -1,25 +0,0 @@
-import {
-  SlInclude
-} from "./chunk.4UGGBC4S.js";
-
-// src/react/include/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-include";
-SlInclude.define("sl-include");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlInclude,
-  react: React,
-  events: {
-    onSlLoad: "sl-load",
-    onSlError: "sl-error"
-  },
-  displayName: "SlInclude"
-});
-var include_default = reactWrapper;
-
-export {
-  include_default
-};

package/dist/chunks/chunk.TJTYBIR7.js

@@ -1,181 +0,0 @@
-import {
-  getIconLibrary,
-  unwatchIcon,
-  watchIcon
-} from "./chunk.ZL53POKZ.js";
-import {
-  icon_styles_default
-} from "./chunk.QLXRCYS4.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/icon/icon.component.ts
-import { html } from "lit";
-import { isTemplateResult } from "lit/directive-helpers.js";
-import { property, state } from "lit/decorators.js";
-var CACHEABLE_ERROR = Symbol();
-var RETRYABLE_ERROR = Symbol();
-var parser;
-var iconCache = /* @__PURE__ */ new Map();
-var SlIcon = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.initialRender = false;
-    this.svg = null;
-    this.label = "";
-    this.library = "default";
-  }
-  /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
-  async resolveIcon(url, library) {
-    var _a;
-    let fileData;
-    if (library == null ? void 0 : library.spriteSheet) {
-      this.svg = html`<svg part="svg">
-        <use part="use" href="${url}"></use>
-      </svg>`;
-      return this.svg;
-    }
-    try {
-      fileData = await fetch(url, { mode: "cors" });
-      if (!fileData.ok) return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;
-    } catch (e) {
-      return RETRYABLE_ERROR;
-    }
-    try {
-      const div = document.createElement("div");
-      div.innerHTML = await fileData.text();
-      const svg = div.firstElementChild;
-      if (((_a = svg == null ? void 0 : svg.tagName) == null ? void 0 : _a.toLowerCase()) !== "svg") return CACHEABLE_ERROR;
-      if (!parser) parser = new DOMParser();
-      const doc = parser.parseFromString(svg.outerHTML, "text/html");
-      const svgEl = doc.body.querySelector("svg");
-      if (!svgEl) return CACHEABLE_ERROR;
-      svgEl.part.add("svg");
-      return document.adoptNode(svgEl);
-    } catch (e) {
-      return CACHEABLE_ERROR;
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    watchIcon(this);
-  }
-  firstUpdated() {
-    this.initialRender = true;
-    this.setIcon();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    unwatchIcon(this);
-  }
-  getIconSource() {
-    const library = getIconLibrary(this.library);
-    if (this.name && library) {
-      return {
-        url: library.resolver(this.name),
-        fromLibrary: true
-      };
-    }
-    return {
-      url: this.src,
-      fromLibrary: false
-    };
-  }
-  handleLabelChange() {
-    const hasLabel = typeof this.label === "string" && this.label.length > 0;
-    if (hasLabel) {
-      this.setAttribute("role", "img");
-      this.setAttribute("aria-label", this.label);
-      this.removeAttribute("aria-hidden");
-    } else {
-      this.removeAttribute("role");
-      this.removeAttribute("aria-label");
-      this.setAttribute("aria-hidden", "true");
-    }
-  }
-  async setIcon() {
-    var _a;
-    const { url, fromLibrary } = this.getIconSource();
-    const library = fromLibrary ? getIconLibrary(this.library) : void 0;
-    if (!url) {
-      this.svg = null;
-      return;
-    }
-    let iconResolver = iconCache.get(url);
-    if (!iconResolver) {
-      iconResolver = this.resolveIcon(url, library);
-      iconCache.set(url, iconResolver);
-    }
-    if (!this.initialRender) {
-      return;
-    }
-    const svg = await iconResolver;
-    if (svg === RETRYABLE_ERROR) {
-      iconCache.delete(url);
-    }
-    if (url !== this.getIconSource().url) {
-      return;
-    }
-    if (isTemplateResult(svg)) {
-      this.svg = svg;
-      if (library) {
-        await this.updateComplete;
-        const shadowSVG = this.shadowRoot.querySelector("[part='svg']");
-        if (typeof library.mutator === "function" && shadowSVG) {
-          library.mutator(shadowSVG);
-        }
-      }
-      return;
-    }
-    switch (svg) {
-      case RETRYABLE_ERROR:
-      case CACHEABLE_ERROR:
-        this.svg = null;
-        this.emit("sl-error");
-        break;
-      default:
-        this.svg = svg.cloneNode(true);
-        (_a = library == null ? void 0 : library.mutator) == null ? void 0 : _a.call(library, this.svg);
-        this.emit("sl-load");
-    }
-  }
-  render() {
-    return this.svg;
-  }
-};
-SlIcon.styles = [component_styles_default, icon_styles_default];
-__decorateClass([
-  state()
-], SlIcon.prototype, "svg", 2);
-__decorateClass([
-  property({ reflect: true })
-], SlIcon.prototype, "name", 2);
-__decorateClass([
-  property()
-], SlIcon.prototype, "src", 2);
-__decorateClass([
-  property()
-], SlIcon.prototype, "label", 2);
-__decorateClass([
-  property({ reflect: true })
-], SlIcon.prototype, "library", 2);
-__decorateClass([
-  watch("label")
-], SlIcon.prototype, "handleLabelChange", 1);
-__decorateClass([
-  watch(["name", "src", "library"])
-], SlIcon.prototype, "setIcon", 1);
-
-export {
-  SlIcon
-};

package/dist/chunks/chunk.TMKAHS52.js

@@ -1,504 +0,0 @@
-import {
-  tableCommonCss
-} from "./chunk.YETPLLCY.js";
-import {
-  spread_default
-} from "./chunk.26MJV2ME.js";
-import {
-  getColumnStickyStyle
-} from "./chunk.AWQWCVVK.js";
-import {
-  renderColGroup
-} from "./chunk.JT753POS.js";
-import {
-  getLeafColumns,
-  getTableAlign,
-  getTableRect,
-  iterateStyles
-} from "./chunk.5I3DB52F.js";
-import {
-  ShoelaceElement
-} from "./chunk.JRE3XEGV.js";
-import {
-  __decorateClass,
-  __objRest
-} from "./chunk.W5KB6T3Z.js";
-
-// src/components/table/head-table.ts
-import { classMap } from "lit/directives/class-map.js";
-import { flexRender } from "@tanstack/lit-table";
-import { html } from "lit";
-import { property, state } from "lit/decorators.js";
-import { ref } from "lit/directives/ref.js";
-import { repeat } from "lit/directives/repeat.js";
-import { tableHeaderRowSpan } from "tanstack-table-header-rowspan";
-var HeadTable = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.showFilterDropDown = "";
-    this.editingFilterValues = [];
-    this.handleHeaderClick = (header, canSort) => {
-      if (canSort) {
-        header.column.toggleSorting();
-      }
-    };
-    this.handleToggleShowDropdown = (id, columnId) => {
-      this.showFilterDropDown = id;
-      const targetId = id || columnId;
-      if (targetId) {
-        this.emit("sl-filter-dropdown-change", {
-          detail: {
-            key: targetId,
-            visible: !!id
-          }
-        });
-      }
-    };
-    this.handleFilterDropdownShow = (header) => {
-      const { id, column } = header;
-      this.showFilterDropDown = id;
-      const value = column.getFilterValue();
-      this.editingFilterValues = value ? [...value] : [];
-      this.emit("sl-filter-dropdown-change", {
-        detail: {
-          key: id,
-          visible: true
-        }
-      });
-    };
-    this.handleFilterValueChange = (value, checked, multiple) => {
-      if (multiple) {
-        if (checked) {
-          this.editingFilterValues = [...new Set(this.editingFilterValues.concat(value))];
-        } else {
-          this.editingFilterValues = this.editingFilterValues.filter((v) => v !== value);
-        }
-      } else {
-        this.editingFilterValues = [value];
-      }
-    };
-    this.hideFilterDropDown = (id) => {
-      var _a;
-      const dropdown = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(`sl-dropdown[data-column-id="${id}"]`);
-      if (dropdown) {
-        dropdown.hide();
-      }
-    };
-    this.handleFilterConfirm = (header, isReset = false) => {
-      const filterValues = [];
-      if (!isReset) {
-        filterValues.push(...this.editingFilterValues);
-      }
-      header.column.setFilterValue(filterValues.length > 0 ? filterValues : void 0);
-      this.hideFilterDropDown(header.id);
-    };
-    this.renderFilterNode = (header) => {
-      const { column } = header;
-      const { filters, filterMultiple = true, filterDropdownProps } = column.columnDef.meta || {};
-      if (!filters) return null;
-      return html` <sl-dropdown
-      @click=${(e) => e.stopPropagation()}
-      hoist
-      data-column-id="${header.id}"
-      ${spread_default(filterDropdownProps || {})}
-      @sl-show=${() => this.handleFilterDropdownShow(header)}
-      @sl-hide=${() => this.handleToggleShowDropdown("", header.id)}
-    >
-      <div slot="trigger" class="table-filter-icon">
-        <sl-icon name="funnel" class="${column.getIsFiltered() ? "active" : ""}"></sl-icon>
-      </div>
-      <div class="table-filter-panel">
-        <div class="table-filter-content">
-          ${filterMultiple ? html`
-                <div class="table-filter-checkbox-group">
-                  ${repeat(
-        filters,
-        (f) => f.value,
-        (f) => html`
-                      <div
-                        class="table-filter-item"
-                        @click=${() => {
-          const isChecked = this.editingFilterValues.includes(f.value);
-          this.handleFilterValueChange(f.value, !isChecked, true);
-        }}
-                      >
-                        <sl-checkbox
-                          size="small"
-                          .checked=${this.editingFilterValues.includes(f.value)}
-                          @sl-change=${(e) => {
-          e.stopPropagation();
-          const target = e.target;
-          this.handleFilterValueChange(f.value, target.checked, true);
-        }}
-                        >
-                          ${f.text}
-                        </sl-checkbox>
-                      </div>
-                    `
-      )}
-                </div>
-              ` : html`
-                <sl-radio-group
-                  size="small"
-                  .value=${this.editingFilterValues[0]}
-                  @sl-change=${(e) => {
-        const target = e.target;
-        this.handleFilterValueChange(target.value, true, false);
-      }}
-                >
-                  ${repeat(
-        filters,
-        (f) => f.value,
-        (f) => html`
-                      <div
-                        class="table-filter-item"
-                        @click=${() => {
-          this.handleFilterValueChange(f.value, true, false);
-        }}
-                      >
-                        <sl-radio .value=${f.value}>${f.text}</sl-radio>
-                      </div>
-                    `
-      )}
-                </sl-radio-group>
-              `}
-        </div>
-        <div class="table-filter-footer">
-          <sl-button size="small" @click=${() => this.handleFilterConfirm(header, true)}>重置</sl-button>
-          <sl-button size="small" variant="primary" @click=${() => this.handleFilterConfirm(header)}>确定</sl-button>
-        </div>
-      </div>
-    </sl-dropdown>`;
-    };
-    this.renderTr = (headerGroup, groupIndex) => {
-      var _a, _b;
-      const headerRowProps = ((_b = (_a = this.commonProps) == null ? void 0 : _a.slHeaderRow) == null ? void 0 : _b.call(_a, this.commonProps.columns, groupIndex)) || {};
-      const _c = headerRowProps, { className, class: rowClass, style: rowStyle } = _c, rowRestProps = __objRest(_c, ["className", "class", "style"]);
-      const rowClassName = typeof className === "string" ? className : "";
-      const rowClassValue = typeof rowClass === "string" ? rowClass : "";
-      const rowClassMap = {
-        "table-row": true
-      };
-      if (rowClassName) rowClassMap[rowClassName] = true;
-      if (rowClassValue) rowClassMap[rowClassValue] = true;
-      const rowStyleText = typeof rowStyle === "string" ? rowStyle : rowStyle && typeof rowStyle === "object" ? iterateStyles(rowStyle) : void 0;
-      return html` <tr
-      part="table-head-row"
-      class="${classMap(rowClassMap)}"
-      role="row"
-      style=${rowStyleText || ""}
-      key=${headerGroup.id}
-      ${spread_default(rowRestProps)}
-    >
-      ${headerGroup.headers.map((header, headerIndex) => this.renderTh(header, headerIndex))}
-    </tr>`;
-    };
-    this.renderTh = (header, headerIndex) => {
-      var _a, _c;
-      const rowSpan = tableHeaderRowSpan(header);
-      if (!rowSpan) {
-        return null;
-      }
-      const { column } = header;
-      const columnDef = column.columnDef;
-      const { align } = columnDef.meta || {};
-      const canSort = column.getCanSort();
-      const canFilter = column.getCanFilter();
-      const sorted = column.getIsSorted();
-      const originCol = getLeafColumns(this.commonProps.columns).find((c) => c.dataIndex === column.id);
-      const headCellProps = ((_a = originCol == null ? void 0 : originCol.slHeaderCell) == null ? void 0 : _a.call(originCol, originCol, headerIndex)) || {};
-      const _b = headCellProps, { className: cellClassName, style: cellStyle } = _b, cellRestProps = __objRest(_b, ["className", "style"]);
-      const headerList = [];
-      const titleText = flexRender(columnDef.header, header.getContext());
-      const titleNode = html`<div
-      key=${header.id}
-      title=${titleText}
-      class="${classMap({
-        "table-column-title": true,
-        "table-cell-ellipsis": (_c = columnDef.meta) == null ? void 0 : _c.ellipsis
-      })}"
-    >
-      ${titleText}
-    </div>`;
-      const sortNode = html`<div class="table-column-sort-content">${titleNode} ${this.renderSortIcon(sorted)}</div>`;
-      const filterNode = this.renderFilterNode(header);
-      if (canSort) {
-        headerList.push(sortNode);
-      } else {
-        headerList.push(titleNode);
-      }
-      if (canFilter) {
-        headerList.push(filterNode);
-      }
-      const cellClassNameValue = typeof cellClassName === "string" ? cellClassName : "";
-      const { styles: pinningStyles, className: pinningClassName } = column.getIsPinned() ? getColumnStickyStyle(header, this.commonProps.tableInstance) : {};
-      const thClassMap = {
-        "table-row-head": true,
-        "table-filter-icon-show": this.showFilterDropDown === column.id || column.getIsFiltered(),
-        "table-sort-icon-show": sorted,
-        [pinningClassName]: pinningClassName !== void 0
-      };
-      if (cellClassNameValue) thClassMap[cellClassNameValue] = true;
-      const cellStyleText = typeof cellStyle === "string" ? cellStyle : cellStyle && typeof cellStyle === "object" ? iterateStyles(cellStyle) : void 0;
-      const cellSizingStyles = this.commonProps.enableColumnResizing && this.commonProps.bordered ? "border-top: var(--sl-table-cell-border-width) solid var(--sl-table-cell-border);" : "";
-      const cellStyleResult = [cellStyleText, pinningStyles, cellSizingStyles].filter(Boolean).join(";");
-      return html`<th
-      colspan=${header.colSpan}
-      rowspan=${rowSpan}
-      part="table-head-cell"
-      role="columnheader"
-      class="${classMap(thClassMap)}"
-      style=${cellStyleResult || ""}
-      data-col-key=${column.id}
-      ${spread_default(cellRestProps)}
-    >
-      <div
-        class="${classMap({
-        "table-column-content": true
-      })}"
-        style="justify-content: ${getTableAlign(align)}"
-      >
-        <div
-          class="${classMap({
-        "table-column-cell-wrap": true,
-        "table-column-sort": canSort
-      })}"
-          @click=${() => this.handleHeaderClick(header, canSort)}
-        >
-          ${headerList}
-        </div>
-      </div>
-      ${column.getCanResize() ? html`
-            <div
-              class="table-column-resizer"
-              @mousedown=${this.withGlobalCursor(header.getResizeHandler())}
-              @touchstart=${this.withGlobalCursor(header.getResizeHandler())}
-            ></div>
-          ` : null}
-    </th>`;
-    };
-  }
-  renderSortIcon(isSorted) {
-    return html`
-      <div class="table-sort-icon">
-        <sl-icon name="caret-up-fill" class="table-sort-icon-up ${isSorted === "asc" ? "active" : ""}"></sl-icon>
-        <sl-icon name="caret-down-fill" class="table-sort-icon-down ${isSorted === "desc" ? "active" : ""}"></sl-icon>
-      </div>
-    `;
-  }
-  setGlobalCursor(on) {
-    document.body.style.cursor = on ? "col-resize" : "";
-  }
-  withGlobalCursor(handler) {
-    return (e) => {
-      this.setGlobalCursor(true);
-      const end = () => this.setGlobalCursor(false);
-      window.addEventListener("mouseup", end, { once: true });
-      window.addEventListener("touchend", end, { once: true });
-      handler(e);
-    };
-  }
-  render() {
-    const { bordered, tableInstance, tableScroll, handleBodyScroll } = this.commonProps;
-    const { x } = tableScroll || {};
-    const columnResizeable = tableInstance.getAllLeafColumns().some((c) => c.getCanResize());
-    const style = {
-      "max-width": x ? getTableRect(x) : "100%",
-      width: columnResizeable && `${tableInstance.getTotalSize()}px`
-    };
-    return html` <div
-        style=${iterateStyles(style)}
-        class="table-head"
-        part="table-head"
-        ${ref(this.headerRef)}
-        @scroll=${handleBodyScroll}
-      >
-        <table
-          class="${classMap({
-      table: true,
-      "table-bordered": bordered,
-      "table-fixed": true
-    })}"
-        >
-          ${renderColGroup(tableInstance)}
-          <thead class="table-thead">
-            ${tableInstance.getHeaderGroups().map((headerGroup, groupIndex) => this.renderTr(headerGroup, groupIndex))}
-          </thead>
-        </table>
-      </div>
-      <style>
-        .table-head {
-          overflow: hidden;
-          direction: var(--sl-c-table-direction);
-          scrollbar-color: inherit;
-        }
-        .table-head::-webkit-scrollbar {
-          background-color: transparent;
-        }
-        .table-row-head {
-          font-weight: unset;
-          text-align: start;
-          padding: 0 var(--sl-table-column-header-padding);
-          height: var(--sl-table-header-line-height);
-          vertical-align: middle;
-          color: var(--sl-table-cell-color);
-          background-color: var(--sl-table-header-background);
-          font-size: var(--sl-table-font-size);
-          border-bottom: var(--sl-table-cell-border-width) solid var(--sl-table-cell-border);
-          overflow-wrap: break-word;
-          position: relative;
-        }
-        .table-row-head:hover .table-filter-icon {
-          visibility: visible;
-          width: unset;
-        }
-        :where(.table.table-bordered) > thead.table-thead > tr.table-row > th.table-row-head {
-          border-inline-end: var(--sl-table-cell-border-width) solid var(--sl-table-cell-border);
-        }
-        .table-column-content {
-          display: flex;
-          align-items: center;
-          height: 100%;
-          width: 100%;
-        }
-        .table-column-cell-wrap {
-          display: flex;
-          align-items: center;
-          height: 100%;
-          max-width: 100%;
-        }
-        .table-column-sort-content {
-          display: flex;
-          flex-wrap: nowrap;
-          align-items: center;
-          height: 100%;
-          max-width: 100%;
-          min-width: 0;
-        }
-        .table-column-title {
-          line-height: var(--sl-line-height-dense);
-        }
-        .table-column-sort {
-          cursor: pointer;
-        }
-        .table-sort-icon {
-          flex-shrink: 0;
-          display: inline-flex;
-          flex-direction: column;
-          margin-inline-start: 6px;
-          vertical-align: middle;
-          display: none;
-        }
-        .table-sort-icon-up,
-        .table-sort-icon-down {
-          font-size: 12px;
-          height: 10px;
-          width: 10px;
-          color: var(--sl-table-icon-color-default);
-        }
-        .table-sort-icon-up.active,
-        .table-sort-icon-down.active {
-          color: var(--sl-table-icon-color-active);
-        }
-        .table-filter-icon {
-          padding: 4px 2px;
-          margin: 2px 0;
-          display: flex;
-          cursor: pointer;
-          margin-left: 2px;
-          border-radius: 2px;
-          visibility: hidden;
-          width: 0;
-          background: var(--sl-table-header-background);
-        }
-        .table-filter-icon-show .table-filter-icon {
-          visibility: visible;
-          width: unset;
-        }
-        .table-sort-icon-show .table-sort-icon {
-          display: inline-flex;
-        }
-        .table-filter-icon:hover {
-          background-color: var(--sl-color-neutral-200);
-        }
-        .table-filter-icon sl-icon.active {
-          color: var(--sl-color-primary-600);
-        }
-        .table-filter-panel {
-          min-width: 120px;
-          cursor: default;
-          background-color: var(--sl-color-neutral-0);
-          border: solid 1px var(--sl-color-neutral-200);
-          border-radius: var(--sl-border-radius-medium);
-          box-shadow: var(--sl-shadow-large);
-        }
-        .table-filter-checkbox-group {
-          display: flex;
-          flex-direction: column;
-        }
-        .table-filter-item {
-          height: 32px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          display: flex;
-          align-items: center;
-          cursor: pointer;
-          padding: 0 14px;
-        }
-        .table-filter-item:hover {
-          background-color: var(--sl-table-row-background-hover);
-        }
-        .table-filter-footer {
-          padding: 8px 12px;
-          border-top: solid 1px var(--sl-color-neutral-200);
-          display: flex;
-          justify-content: center;
-          gap: 8px;
-        }
-        .table-column-resizer {
-          position: absolute;
-          top: 0;
-          right: 0;
-          width: var(--sl-table-drag-handle-width);
-          height: 100%;
-          cursor: col-resize;
-          user-select: none;
-          touch-action: none;
-          background: transparent;
-        }
-        .table:not(.table-bordered) .table-column-resizer::before {
-          content: '';
-          position: absolute;
-          top: 6px;
-          bottom: 6px;
-          left: 50%;
-          transform: translateX(-50%);
-          width: 1px;
-          background-color: var(--sl-table-cell-border);
-          opacity: 0;
-        }
-        .table:not(.table-bordered) th.table-row-head:hover .table-column-resizer::before {
-          opacity: 1;
-        }
-      </style>`;
-  }
-};
-HeadTable.styles = [tableCommonCss];
-__decorateClass([
-  property({ type: Object })
-], HeadTable.prototype, "headerRef", 2);
-__decorateClass([
-  property({ type: Object })
-], HeadTable.prototype, "commonProps", 2);
-__decorateClass([
-  state()
-], HeadTable.prototype, "showFilterDropDown", 2);
-__decorateClass([
-  state()
-], HeadTable.prototype, "editingFilterValues", 2);
-HeadTable.define("sl-table-head-table");
-
-export {
-  HeadTable
-};