@kdcloudjs/shoelace 1.0.5 → 1.0.6

package/cdn/chunks/chunk.H5SKDL5B.js

@@ -0,0 +1,498 @@
+import {
+  tableCommonCss
+} from "./chunk.NYGQJUAI.js";
+import {
+  spread_default
+} from "./chunk.GRGYWQPR.js";
+import {
+  flexRender
+} from "./chunk.VK7KEYIH.js";
+import {
+  getCommonPinningProps
+} from "./chunk.GXKPSSUK.js";
+import {
+  c,
+  renderColGroup
+} from "./chunk.D5HRUXPS.js";
+import {
+  getTableAlign,
+  getTableRect,
+  iterateStyles
+} from "./chunk.FZR6BKU2.js";
+import {
+  n as n2
+} from "./chunk.G2YOMCHR.js";
+import {
+  e
+} from "./chunk.VHCLMDG7.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.HUA3M65Y.js";
+import {
+  b
+} from "./chunk.7WSF3BCU.js";
+import {
+  __decorateClass,
+  __objRest
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/table/head-table.ts
+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 b` <sl-dropdown
+      @click=${(e2) => e2.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 ? b`
+                <div class="table-filter-checkbox-group">
+                  ${c(
+        filters,
+        (f) => f.value,
+        (f) => b`
+                      <div class="table-filter-item">
+                        <sl-checkbox
+                          size="small"
+                          .checked=${this.editingFilterValues.includes(f.value)}
+                          @sl-change=${(e2) => {
+          const target = e2.target;
+          this.handleFilterValueChange(f.value, target.checked, true);
+        }}
+                        >
+                          ${f.text}
+                        </sl-checkbox>
+                      </div>
+                    `
+      )}
+                </div>
+              ` : b`
+                <sl-radio-group
+                  size="small"
+                  .value=${this.editingFilterValues[0]}
+                  @sl-change=${(e2) => {
+        const target = e2.target;
+        this.handleFilterValueChange(target.value, true, false);
+      }}
+                >
+                  ${c(
+        filters,
+        (f) => f.value,
+        (f) => b`
+                      <div class="table-filter-item">
+                        <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>`;
+    };
+  }
+  renderSortIcon(isSorted) {
+    return b`
+      <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 (e2) => {
+      this.setGlobalCursor(true);
+      const end = () => this.setGlobalCursor(false);
+      window.addEventListener("mouseup", end, { once: true });
+      window.addEventListener("touchend", end, { once: true });
+      handler(e2);
+    };
+  }
+  render() {
+    const { bordered, tableInstance, tableScroll, handleBodyScroll } = this.commonProps;
+    const { x } = tableScroll || {};
+    const style = {
+      "max-width": x ? getTableRect(x) : "100%"
+    };
+    const columnResizeable = tableInstance.getAllLeafColumns().some((c2) => c2.getCanResize());
+    return b` <div
+        style=${iterateStyles(style)}
+        class="table-head"
+        part="table-head"
+        ${n2(this.headerRef)}
+        @scroll=${handleBodyScroll}
+      >
+        <table
+          class="${e({
+      table: true,
+      "table-bordered": bordered,
+      "table-fixed": !columnResizeable
+    })}"
+          style="width: ${tableInstance.getTotalSize()}px;"
+        >
+          ${renderColGroup(tableInstance)}
+          <thead class="table-thead">
+            ${c(
+      tableInstance.getHeaderGroups(),
+      (headerGroup) => headerGroup.id,
+      (headerGroup) => {
+        var _a, _b;
+        const headerGroups = tableInstance.getHeaderGroups();
+        const index = headerGroups.findIndex((hg) => hg.id === headerGroup.id);
+        const headerRowProps = ((_b = (_a = this.commonProps) == null ? void 0 : _a.onHeaderRow) == null ? void 0 : _b.call(_a, this.commonProps.columns, index)) || {};
+        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 b` <tr
+                  part="table-row"
+                  class="${e(rowClassMap)}"
+                  role="row"
+                  style=${rowStyleText || ""}
+                  ${spread_default(rowRestProps)}
+                >
+                  ${c(
+          headerGroup.headers,
+          (header) => header.id,
+          (header) => {
+            var _a2, _c2;
+            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 = this.commonProps.columns.find((c2) => c2.dataIndex === column.id);
+            const headCellProps = ((_a2 = originCol == null ? void 0 : originCol.onHeaderCell) == null ? void 0 : _a2.call(originCol, originCol, index)) || {};
+            const _b2 = headCellProps, {
+              className: cellClassName,
+              style: cellStyle
+            } = _b2, cellRestProps = __objRest(_b2, [
+              "className",
+              "style"
+            ]);
+            const headerList = [];
+            const titleNode = b`<div
+                        class="${e({
+              "table-column-title": true,
+              "table-cell-ellipsis": (_c2 = columnDef.meta) == null ? void 0 : _c2.ellipsis
+            })}"
+                      >
+                        ${header.isPlaceholder ? null : flexRender(columnDef.header, header.getContext())}
+                      </div>`;
+            const sortNode = b`<div>${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() ? getCommonPinningProps(column) : {};
+            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 cellStyleResult = [cellStyleText, pinningStyles].filter(Boolean).join(";");
+            return b`<th
+                        part="table-row-cell"
+                        role="columnheader"
+                        class="${e(thClassMap)}"
+                        style=${cellStyleResult || ""}
+                        data-col-key=${column.id}
+                        ${spread_default(cellRestProps)}
+                      >
+                        <div
+                          class="${e({
+              "table-column-content": true
+            })}"
+                          style="justify-content: ${getTableAlign(align)}"
+                        >
+                          <div
+                            class="${e({
+              "table-column-cell-wrap": true,
+              "table-column-sort": canSort
+            })}"
+                            @click=${() => this.handleHeaderClick(header, canSort)}
+                          >
+                            ${headerList}
+                          </div>
+                        </div>
+                        ${column.getCanResize() ? b`
+                              <div
+                                class="table-column-resizer"
+                                @mousedown=${this.withGlobalCursor(header.getResizeHandler())}
+                                @touchstart=${this.withGlobalCursor(header.getResizeHandler())}
+                              ></div>
+                            ` : null}
+                      </th>`;
+          }
+        )}
+                </tr>`;
+      }
+    )}
+          </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%;
+        }
+        .table-column-cell-wrap {
+          display: flex;
+          align-items: center;
+          height: 100%;
+        }
+        .table-column-title {
+          flex-basis: fit-content;
+          height: 100%;
+          display: flex;
+          align-items: center;
+        }
+        .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;
+        }
+        .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;
+          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-content {
+          padding: 8px 12px;
+        }
+        .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;
+        }
+        .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: -2px;
+          width: 4px;
+          height: 100%;
+          cursor: col-resize;
+          user-select: none;
+          touch-action: none;
+        }
+        .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([
+  n({ type: Object })
+], HeadTable.prototype, "headerRef", 2);
+__decorateClass([
+  n({ type: Object })
+], HeadTable.prototype, "commonProps", 2);
+__decorateClass([
+  r()
+], HeadTable.prototype, "showFilterDropDown", 2);
+__decorateClass([
+  r()
+], HeadTable.prototype, "editingFilterValues", 2);
+HeadTable.define("sl-table-head-table");
+
+export {
+  HeadTable
+};

package/cdn/chunks/chunk.HAGPNIZX.js

@@ -0,0 +1,175 @@
+import {
+  i
+} from "./chunk.7WSF3BCU.js";
+
+// src/components/tree-item/tree-item.styles.ts
+var tree_item_styles_default = i`
+  :host {
+    display: block;
+    outline: 0;
+    z-index: 0;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  slot:not([name])::slotted(sl-icon) {
+    margin-inline-end: var(--sl-spacing-x-small);
+  }
+
+  .tree-item {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    color: var(--sl-color-neutral-700);
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .tree-item__checkbox {
+    pointer-events: none;
+  }
+
+  .tree-item__expand-button,
+  .tree-item__checkbox,
+  .tree-item__label {
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-small);
+    font-weight: var(--sl-font-weight-normal);
+    line-height: var(--sl-line-height-dense);
+    letter-spacing: var(--sl-letter-spacing-normal);
+  }
+
+  .tree-item__checkbox::part(base) {
+    display: flex;
+    align-items: center;
+  }
+
+  .tree-item__indentation {
+    display: block;
+    width: 1em;
+    flex-shrink: 0;
+  }
+
+  .tree-item__expand-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    color: var(--sl-color-neutral-500);
+    padding: var(--sl-spacing-x-small);
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+
+  .tree-item__expand-button {
+    transition: var(--sl-transition-medium) rotate ease;
+  }
+
+  .tree-item--expanded .tree-item__expand-button {
+    rotate: 90deg;
+  }
+
+  .tree-item--expanded.tree-item--rtl .tree-item__expand-button {
+    rotate: -90deg;
+  }
+
+  .tree-item--expanded slot[name='expand-icon'],
+  .tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {
+    display: none;
+  }
+
+  .tree-item:not(.tree-item--has-expand-button) .tree-item__expand-icon-slot {
+    display: none;
+  }
+
+  .tree-item__expand-button--visible {
+    cursor: pointer;
+  }
+
+  .tree-item__item {
+    display: flex;
+    align-items: center;
+    border-inline-start: solid 3px transparent;
+  }
+
+  .tree-item--disabled .tree-item__item {
+    opacity: 0.5;
+    outline: none;
+    cursor: not-allowed;
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item__item:hover {
+    background-color: var(--sl-color-neutral-100);
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item__item:active .tree-item__label {
+    color: var(--sl-color-primary-600);
+  }
+
+  :host(:focus-visible) .tree-item__item {
+    outline: var(--sl-focus-ring);
+    outline-offset: var(--sl-focus-ring-offset);
+    z-index: 2;
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
+    background-color: var(--sl-color-primary-100);
+    border-inline-start-color: transparent;
+    color: var(--sl-color-primary-600);
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__label {
+    color: var(--sl-color-primary-600);
+  }
+
+  :host(:not([aria-disabled='true'])) .tree-item__expand-button {
+    color: var(--sl-color-neutral-600);
+  }
+
+  .tree-item__label {
+    display: flex;
+    align-items: center;
+    transition: var(--sl-transition-fast) color;
+  }
+
+  .tree-item__children {
+    display: block;
+    font-size: calc(1em + var(--indent-size, var(--sl-spacing-medium)));
+  }
+
+  /* Indentation lines */
+  .tree-item__children {
+    position: relative;
+  }
+
+  .tree-item__children::before {
+    content: '';
+    position: absolute;
+    top: var(--indent-guide-offset);
+    bottom: var(--indent-guide-offset);
+    left: calc(1em - (var(--indent-guide-width) / 2) - 1px);
+    border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);
+    z-index: 1;
+  }
+
+  .tree-item--rtl .tree-item__children::before {
+    left: auto;
+    right: 1em;
+  }
+
+  @media (forced-colors: active) {
+    :host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
+      outline: dashed 1px SelectedItem;
+    }
+  }
+`;
+
+export {
+  tree_item_styles_default
+};

package/cdn/chunks/chunk.HE4XNMQ6.js

@@ -0,0 +1,11 @@
+import {
+  SlFormatDate
+} from "./chunk.XKAPNSQY.js";
+
+// src/components/format-date/format-date.ts
+var format_date_default = SlFormatDate;
+SlFormatDate.define("sl-format-date");
+
+export {
+  format_date_default
+};

package/cdn/chunks/chunk.HFDPA5IX.js

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