@kdcloudjs/shoelace 1.0.13 → 1.0.14

package/dist/chunks/chunk.ZJC4FLKC.js

@@ -1,437 +0,0 @@
-import {
-  tableCommonCss
-} from "./chunk.YETPLLCY.js";
-import {
-  spread_default
-} from "./chunk.26MJV2ME.js";
-import {
-  getCommonPinningProps
-} from "./chunk.OMKHV7Q2.js";
-import {
-  renderColGroup
-} from "./chunk.CUYJVL7R.js";
-import {
-  getTableRect,
-  iterateStyles
-} from "./chunk.5AHQNL5Y.js";
-import {
-  CUSTOM_ROW
-} from "./chunk.NCE7XJQI.js";
-import {
-  ShoelaceElement
-} from "./chunk.M7GTV5KG.js";
-import {
-  __decorateClass,
-  __objRest
-} from "./chunk.W5KB6T3Z.js";
-
-// src/components/table/body-table.ts
-import { classMap } from "lit/directives/class-map.js";
-import { createRef, ref } from "lit/directives/ref.js";
-import { flexRender } from "@tanstack/lit-table";
-import { html } from "lit";
-import { property, state } from "lit/decorators.js";
-import { repeat } from "lit/directives/repeat.js";
-import { styleMap } from "lit/directives/style-map.js";
-import Sortable from "sortablejs";
-var BodyTable = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.expandRowByClick = false;
-    this.currentInsertIndex = null;
-    this.tbodyRef = createRef();
-    this.cleanupDragImage = () => {
-      var _a;
-      if ((_a = this.dragImageEl) == null ? void 0 : _a.parentNode) this.dragImageEl.parentNode.removeChild(this.dragImageEl);
-      this.dragImageEl = void 0;
-    };
-    this.handleMove = (evt) => {
-      var _a;
-      const body = this.bodyRef.value;
-      const tbody = this.tbodyRef.value;
-      if (!body || !tbody) return true;
-      const rows = Array.from(tbody.querySelectorAll("tr[data-row-key]"));
-      if (!rows.length) return true;
-      const mouseY = evt.originalEvent.clientY;
-      const firstRect = rows[0].getBoundingClientRect();
-      const lastRect = rows[rows.length - 1].getBoundingClientRect();
-      let insertIndex = (_a = this.currentInsertIndex) != null ? _a : 0;
-      if (mouseY >= lastRect.bottom) {
-        insertIndex = rows.length;
-      } else if (mouseY <= firstRect.top) {
-        insertIndex = 0;
-      } else {
-        const related = evt.related;
-        if (related) {
-          const rect = related.getBoundingClientRect();
-          const offset = mouseY - rect.top;
-          const relatedIndex = rows.indexOf(related);
-          if (relatedIndex >= 0) {
-            insertIndex = offset > rect.height / 2 ? relatedIndex + 1 : relatedIndex;
-          }
-        }
-      }
-      insertIndex = Math.max(0, Math.min(rows.length, insertIndex));
-      this.currentInsertIndex = insertIndex;
-      this.requestUpdate();
-      return false;
-    };
-    this.handleEnd = (evt) => {
-      var _a, _b;
-      if (this.currentInsertIndex === null) return;
-      this.draggingBlock = { start: -1, end: -1 };
-      this.requestUpdate();
-      const rows = this.commonProps.tableInstance.getRowModel().rows;
-      const fromIndex = evt.oldDraggableIndex;
-      const toIndex = this.currentInsertIndex;
-      const newRows = [...rows.map((r) => r.original)];
-      const { start, end } = this.getSelectedBlock(rows, fromIndex);
-      if (start <= toIndex && toIndex <= end) {
-        this.currentInsertIndex = null;
-        return;
-      }
-      const block = newRows.splice(start, end - start + 1);
-      let targetIndex = toIndex;
-      if (start < toIndex) {
-        targetIndex -= block.length;
-      }
-      newRows.splice(targetIndex, 0, ...block);
-      const detail = {
-        fromIndex,
-        toIndex,
-        rows: rows.map((r) => r.original),
-        newRows
-      };
-      (_b = (_a = this.commonProps).slRowReorder) == null ? void 0 : _b.call(_a, detail);
-      this.currentInsertIndex = null;
-      this.cleanupDragImage();
-    };
-    this.handleChoose = (evt) => {
-      const rows = this.commonProps.tableInstance.getRowModel().rows;
-      const fromIndex = evt.oldDraggableIndex;
-      const { start, end } = this.getSelectedBlock(rows, fromIndex);
-      this.draggingBlock = { start, end };
-      this.requestUpdate();
-      if (start === end) return;
-      const count = end - start + 1;
-      const dragImage = document.createElement("div");
-      dragImage.textContent = `\u62D6\u52A8 ${count} \u884C\u6570\u636E`;
-      dragImage.style.position = "fixed";
-      dragImage.style.padding = "10px 8px";
-      dragImage.style.color = "#212121";
-      dragImage.style.fontSize = "12px";
-      dragImage.style.background = "#FFFFFF";
-      dragImage.style.border = "1px solid rgba(217,217,217,1)";
-      dragImage.style.boxShadow = "0px 6px 16px 3px rgba(0,0,0,0.08)";
-      dragImage.style.borderRadius = "2px";
-      dragImage.style.lineHeight = "21px";
-      document.body.appendChild(dragImage);
-      this.dragImageEl = dragImage;
-      const chosenEl = evt.item;
-      chosenEl.addEventListener(
-        "dragstart",
-        (e) => {
-          var _a;
-          (_a = e.dataTransfer) == null ? void 0 : _a.setDragImage(dragImage, 10, 10);
-        },
-        { once: true }
-      );
-    };
-    // 未发生拖拽时清理,防止点击行但未拖拽时一直保持拖拽样式
-    this.handleUnchoose = () => {
-      var _a;
-      this.draggingBlock = { start: -1, end: -1 };
-      (_a = this.cleanupDragImage) == null ? void 0 : _a.call(this);
-    };
-    this.renderTr = (row, styles = {}) => {
-      const { rowSelectedMap, slRow, virtualized } = this.commonProps;
-      const rowProps = (slRow == null ? void 0 : slRow(row.original, row.index)) || {};
-      const _a = rowProps, { className, style: rowPropsStyle } = _a, rowRestProps = __objRest(_a, ["className", "style"]);
-      const rowClassName = typeof className === "string" ? className : "";
-      const rowClassMap = {
-        "table-row": true,
-        "table-row-selected": rowSelectedMap[row.id],
-        "table-row-dragging": this.draggingBlock && row.index >= this.draggingBlock.start && row.index <= this.draggingBlock.end,
-        [rowClassName]: true
-      };
-      const rowPropsStyleText = typeof rowPropsStyle === "string" ? rowPropsStyle : rowPropsStyle && typeof rowPropsStyle === "object" ? iterateStyles(rowPropsStyle) : void 0;
-      const rowStyles = [rowPropsStyleText, iterateStyles(styles)].filter(Boolean).join(";") || "";
-      return html`
-      <tr
-        class=${classMap(rowClassMap)}
-        role="table-row"
-        part="table-body-row"
-        data-row-key=${this.commonProps.adapter.getRecordKey(row.original)}
-        data-row-index=${row.index}
-        @click=${this.expandRowByClick ? () => row.getCanExpand() && row.toggleExpanded() : null}
-        style=${rowStyles}
-        ${spread_default(rowRestProps)}
-      >
-        ${repeat(
-        row.getVisibleCells(),
-        (cell) => cell.id,
-        (cell) => {
-          var _a2, _b, _c, _e, _f;
-          const { column } = cell;
-          const columnDef = column.columnDef;
-          const align = (_a2 = columnDef.meta) == null ? void 0 : _a2.align;
-          const cellProps = ((_c = (_b = columnDef.meta) == null ? void 0 : _b.slCell) == null ? void 0 : _c.call(_b, cell.row.original, row.index)) || {};
-          const _d = cellProps, {
-            className: cellClassName,
-            style: cellStyle
-          } = _d, cellRestProps = __objRest(_d, [
-            "className",
-            "style"
-          ]);
-          const cellClassNameValue = typeof cellClassName === "string" ? cellClassName : "";
-          const { styles: pinningStyles, className: pinningClassName } = column.getIsPinned() ? getCommonPinningProps(column) : {};
-          const cellClassMap = {
-            "table-row-cell": true,
-            [pinningClassName]: pinningClassName !== void 0
-          };
-          if ((_e = columnDef.meta) == null ? void 0 : _e.className) {
-            cellClassMap[columnDef.meta.className] = true;
-          }
-          if (cellClassNameValue) {
-            cellClassMap[cellClassNameValue] = true;
-          }
-          const cellStyleText = typeof cellStyle === "string" ? cellStyle : cellStyle && typeof cellStyle === "object" ? iterateStyles(cellStyle) : void 0;
-          let cellStyleResult = [cellStyleText, pinningStyles].filter(Boolean).join(";");
-          if (virtualized) {
-            cellStyleResult += `;width: ${column.getSize()}px`;
-          }
-          return html` <td
-              role="gridcell"
-              part="table-body-cell"
-              class="${classMap(cellClassMap)}"
-              style=${cellStyleResult || ""}
-              ${spread_default(cellRestProps)}
-            >
-              <div
-                class="${classMap({
-            "table-cell-content": true,
-            "table-cell-ellipsis": !!((_f = columnDef.meta) == null ? void 0 : _f.ellipsis)
-          })}"
-                style="text-align: ${align}"
-              >
-                ${flexRender(columnDef.cell, cell.getContext())}
-              </div>
-            </td>`;
-        }
-      )}
-      </tr>
-      ${row.getIsExpanded() ? html`
-            <tr class="table-row table-expand-row" part="table-body-row">
-              <td colspan="${row.getVisibleCells().length}" class="table-row-cell" part="table-body-cell">
-                <slot name="${CUSTOM_ROW}-${this.commonProps.adapter.getRecordKey(row.original)}"></slot>
-              </td>
-            </tr>
-          ` : ""}
-    `;
-    };
-  }
-  getSelectedBlock(rows, fromIndex) {
-    const selected = this.commonProps.rowSelectedMap;
-    if (!selected[rows[fromIndex].id]) {
-      return { start: fromIndex, end: fromIndex };
-    }
-    let start = fromIndex;
-    let end = fromIndex;
-    while (start > 0 && selected[rows[start - 1].id]) {
-      start--;
-    }
-    while (end < rows.length - 1 && selected[rows[end + 1].id]) {
-      end++;
-    }
-    return { start, end };
-  }
-  renderIndicator() {
-    const tbody = this.tbodyRef.value;
-    if (!tbody || this.currentInsertIndex === null) return "";
-    const rows = Array.from(tbody.querySelectorAll("tr[data-row-key]"));
-    if (!rows.length) return "";
-    let top = 0;
-    if (this.currentInsertIndex >= rows.length) {
-      top = rows[rows.length - 1].offsetTop + rows[rows.length - 1].offsetHeight;
-    } else {
-      top = rows[this.currentInsertIndex].offsetTop;
-    }
-    return html`
-      <div
-        style="
-          position: absolute;
-          left: 0;
-          right: 0;
-          top: ${top}px;
-          height: 2px;
-          background: #1677ff;
-          pointer-events: none;
-          z-index: 10;
-        "
-      ></div>
-    `;
-  }
-  initSortable() {
-    var _a, _b;
-    const { rowDrag, virtualized } = this.commonProps;
-    if (!rowDrag || virtualized) {
-      (_a = this.sortable) == null ? void 0 : _a.destroy();
-      this.sortable = void 0;
-      return;
-    }
-    const el = this.tbodyRef.value;
-    if (!el) return;
-    (_b = this.sortable) == null ? void 0 : _b.destroy();
-    this.sortable = Sortable.create(el, {
-      animation: 0,
-      draggable: "tr[data-row-key]",
-      handle: ".row-drag-handle",
-      onChoose: this.handleChoose,
-      onMove: this.handleMove,
-      onEnd: this.handleEnd,
-      onUnchoose: this.handleUnchoose
-    });
-  }
-  firstUpdated() {
-    this.initSortable();
-  }
-  render() {
-    var _a, _b, _c, _d, _e;
-    const virtualizer = (_a = this.rowVirtualizerController) == null ? void 0 : _a.getVirtualizer();
-    const { tableScroll, handleBodyScroll, bordered, tableInstance, virtualized, rowDrag } = this.commonProps;
-    const { x, y } = tableScroll || {};
-    const columnResizeable = tableInstance.getAllLeafColumns().some((c) => c.getCanResize());
-    const style = {
-      "max-width": x ? getTableRect(x) : "100%",
-      "max-height": y ? getTableRect(y) : "100%",
-      width: columnResizeable && `${tableInstance.getTotalSize()}px`
-    };
-    const { rows } = tableInstance.getRowModel();
-    return html` <div
-        style=${iterateStyles(style)}
-        class="table-body"
-        part="table-body"
-        ${ref(this.bodyRef)}
-        @scroll=${handleBodyScroll}
-      >
-        <table
-          class="${classMap({
-      table: true,
-      "table-bordered": bordered,
-      "table-fixed": !columnResizeable
-    })}"
-          style=${styleMap({
-      height: virtualized && y ? `${virtualizer == null ? void 0 : virtualizer.getTotalSize()}px` : "100%"
-    })}
-        >
-          ${renderColGroup(tableInstance)}
-          <tbody class="table-tbody" style="position: relative;" ${ref(this.tbodyRef)}>
-            ${virtualized ? repeat(
-      (_c = (_b = this.rowVirtualizerController) == null ? void 0 : _b.getVirtualizer().getVirtualItems()) != null ? _c : [],
-      (item) => item.key,
-      (item) => {
-        const row = rows[item.index];
-        return this.renderTr(row, {
-          transform: `translateY(${item.start}px)`,
-          position: "absolute",
-          width: "100%"
-        });
-      }
-    ) : repeat(
-      rows,
-      (row) => row.id,
-      (row) => this.renderTr(row)
-    )}
-            ${rowDrag ? html`<tr class="table-bottom-placeholder" style="height: 2px;padding: 0;border: none;">
-                  <td colspan="${(_e = (_d = rows[0]) == null ? void 0 : _d.getVisibleCells().length) != null ? _e : 1}"></td>
-                </tr>` : ""}
-            ${this.renderIndicator()}
-          </tbody>
-        </table>
-        ${this.emptyTemplate}
-      </div>
-      <style>
-        .table-body {
-          overflow: auto;
-          width: 100%;
-          box-sizing: border-box;
-          direction: var(--sl-c-table-direction);
-        }
-        .table-row {
-          display: table-row;
-        }
-        .table-row-dragging {
-          opacity: 0.35;
-        }
-        .table-row > .table-row-cell {
-          height: var(--sl-table-cell-line-height);
-          font-size: var(--sl-table-font-size);
-          padding: 0 var(--sl-table-cell-padding);
-          box-sizing: border-box;
-          border-inline-start: none;
-          border-inline-end: none;
-          border-bottom: var(--sl-table-cell-border-width) solid var(--sl-table-cell-border);
-          overflow-wrap: break-word;
-          color: var(--sl-table-cell-color);
-          background-color: var(--sl-table-cell-background);
-          vertical-align: middle;
-        }
-        .table-row:hover > .table-row-cell {
-          background: var(--sl-table-row-background-hover);
-        }
-        :where(.table.table-bordered) > tbody.table-tbody > tr.table-row > td.table-row-cell {
-          border-inline-end: var(--sl-table-cell-border-width) solid var(--sl-table-cell-border);
-        }
-        .table-row.table-row-selected > .table-row-cell {
-          background-color: var(--sl-table-row-background-active);
-        }
-        .table-row.table-row-selected:hover > .table-row-cell {
-          background-color: hsl(212.29999999999995, 100%, 95.5%);
-        }
-        .table-placeholder {
-          position: sticky;
-          left: 0;
-          z-index: 1;
-          padding: var(--sl-table-default-text-margin-vertical);
-          color: var(--semi-color-text-2);
-          font-size: 14px;
-          text-align: center;
-          background: transparent;
-          color: var(--sl-table-default-text-color);
-          border-bottom: var(--sl-table-cell-border-width) solid var(--sl-table-cell-border);
-          border-inline-start: none;
-        }
-        .table-cell-content {
-          line-height: var(--sl-line-height-dense);
-          word-break: break-word;
-        }
-      </style>`;
-  }
-};
-BodyTable.styles = [tableCommonCss];
-__decorateClass([
-  property({ type: Object })
-], BodyTable.prototype, "bodyRef", 2);
-__decorateClass([
-  property({ type: Function })
-], BodyTable.prototype, "emptyTemplate", 2);
-__decorateClass([
-  property({ type: Object })
-], BodyTable.prototype, "commonProps", 2);
-__decorateClass([
-  property({ type: Boolean })
-], BodyTable.prototype, "expandRowByClick", 2);
-__decorateClass([
-  property({ type: Object })
-], BodyTable.prototype, "rowVirtualizerController", 2);
-__decorateClass([
-  state()
-], BodyTable.prototype, "currentInsertIndex", 2);
-__decorateClass([
-  state()
-], BodyTable.prototype, "draggingBlock", 2);
-BodyTable.define("sl-table-body-table");
-
-export {
-  BodyTable
-};

package/dist/chunks/chunk.ZK6W4KRT.js

@@ -1,11 +0,0 @@
-import {
-  SlRelativeTime
-} from "./chunk.K3SPPBSK.js";
-
-// src/components/relative-time/relative-time.ts
-var relative_time_default = SlRelativeTime;
-SlRelativeTime.define("sl-relative-time");
-
-export {
-  relative_time_default
-};

package/dist/chunks/chunk.ZQMRTBNR.js

@@ -1,180 +0,0 @@
-import {
-  pagination_styles_default
-} from "./chunk.VMLX3RO3.js";
-import {
-  SlIcon
-} from "./chunk.VHHBFM4E.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.M7GTV5KG.js";
-import {
-  __decorateClass
-} from "./chunk.W5KB6T3Z.js";
-
-// src/components/pagination/pagination.component.ts
-import { html } from "lit";
-import { property, state } from "lit/decorators.js";
-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.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;
-    console.log(page, totalPage, "dahuigh");
-    this.defaultCurrentPage = page;
-    this.emit("sl-page-change", {
-      detail: {
-        pageNumber: page,
-        pageSize: this.pageSize
-      }
-    });
-  }
-  render() {
-    const page = this.currentPage ? this.currentPage : this.defaultCurrentPage;
-    return this.simpleMode ? html`
-          <div class="pagination ${this.className}">
-            <sl-icon
-              name="chevron-left"
-              class="page-btn ${page === 1 || this.disabled ? "page-btn--disabled" : ""}"
-              @click=${() => page !== 1 && this.handlePageChangePage(page - 1)}
-            ></sl-icon>
-            <sl-icon
-              name="chevron-right"
-              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>
-        ` : html`
-          <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="chevron-bar-left"
-                class="page-btn ${page === 1 || this.disabled ? "page-btn--disabled" : ""}"
-                @click=${() => page !== 1 && this.handlePageChangePage(1)}
-              ></sl-icon>
-              <sl-icon
-                name="chevron-left"
-                class="page-btn ${page === 1 || this.disabled ? "page-btn--disabled" : ""}"
-                @click=${() => page !== 1 && this.handlePageChangePage(page - 1)}
-              ></sl-icon>
-              <sl-icon
-                name="chevron-right"
-                class="page-btn ${page === this.totalPage || this.disabled ? "page-btn--disabled" : ""}"
-                @click=${() => page !== this.totalPage && this.handlePageChangePage(page + 1)}
-              ></sl-icon>
-              <sl-icon
-                name="chevron-bar-right"
-                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([
-  property({ type: Number })
-], SlPagination.prototype, "currentPage", 2);
-__decorateClass([
-  property({ type: Number })
-], SlPagination.prototype, "pageSize", 2);
-__decorateClass([
-  property({ type: Array })
-], SlPagination.prototype, "pageSizeOpts", 2);
-__decorateClass([
-  property({ type: Number })
-], SlPagination.prototype, "total", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlPagination.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: String })
-], SlPagination.prototype, "className", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlPagination.prototype, "simpleMode", 2);
-__decorateClass([
-  property({ type: Number })
-], SlPagination.prototype, "defaultCurrentPage", 2);
-__decorateClass([
-  state()
-], SlPagination.prototype, "totalPage", 2);
-
-export {
-  SlPagination
-};