@kdcloudjs/shoelace 0.0.1 → 1.0.0

package/cdn/chunks/chunk.EN6IZDYW.js

@@ -0,0 +1,186 @@
+import {
+  e
+} from "./chunk.PXND53B4.js";
+import {
+  icon_styles_default
+} from "./chunk.RGS2YUQD.js";
+import {
+  getIconLibrary,
+  unwatchIcon,
+  watchIcon
+} from "./chunk.ZL53POKZ.js";
+import {
+  watch
+} from "./chunk.OY5V3CPY.js";
+import {
+  component_styles_default
+} from "./chunk.EFE6XYM5.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.U6LIZH2N.js";
+import {
+  x
+} from "./chunk.ZKRJ3RUK.js";
+import {
+  __decorateClass
+} from "./chunk.IMHLNNT7.js";
+
+// src/components/icon/icon.component.ts
+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 = x`<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 (e2) {
+      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 (e2) {
+      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 (e(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([
+  r()
+], SlIcon.prototype, "svg", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlIcon.prototype, "name", 2);
+__decorateClass([
+  n()
+], SlIcon.prototype, "src", 2);
+__decorateClass([
+  n()
+], SlIcon.prototype, "label", 2);
+__decorateClass([
+  n({ 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/cdn/chunks/chunk.EOLDHINP.js

@@ -0,0 +1,24 @@
+import {
+  SlPopup
+} from "./chunk.MMN6BEAM.js";
+
+// src/react/popup/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-popup";
+SlPopup.define("sl-popup");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlPopup,
+  react: React,
+  events: {
+    onSlReposition: "sl-reposition"
+  },
+  displayName: "SlPopup"
+});
+var popup_default = reactWrapper;
+
+export {
+  popup_default
+};

package/cdn/chunks/chunk.EPCUFOKP.js

@@ -0,0 +1,11 @@
+import {
+  SlIcon
+} from "./chunk.EN6IZDYW.js";
+
+// src/components/icon/icon.ts
+var icon_default = SlIcon;
+SlIcon.define("sl-icon");
+
+export {
+  icon_default
+};

package/cdn/chunks/chunk.ET5BZX7S.js

@@ -0,0 +1,27 @@
+import {
+  SlAlert
+} from "./chunk.VV24KCRD.js";
+
+// src/react/alert/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-alert";
+SlAlert.define("sl-alert");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlAlert,
+  react: React,
+  events: {
+    onSlShow: "sl-show",
+    onSlAfterShow: "sl-after-show",
+    onSlHide: "sl-hide",
+    onSlAfterHide: "sl-after-hide"
+  },
+  displayName: "SlAlert"
+});
+var alert_default = reactWrapper;
+
+export {
+  alert_default
+};

package/cdn/chunks/chunk.EUIGQH5J.js

@@ -0,0 +1,11 @@
+import {
+  SlFormatBytes
+} from "./chunk.W5YWNJ3F.js";
+
+// src/components/format-bytes/format-bytes.ts
+var format_bytes_default = SlFormatBytes;
+SlFormatBytes.define("sl-format-bytes");
+
+export {
+  format_bytes_default
+};

package/cdn/chunks/chunk.EYAZDNPG.js

@@ -0,0 +1,163 @@
+import {
+  i
+} from "./chunk.ZKRJ3RUK.js";
+
+// src/components/drawer/drawer.styles.ts
+var drawer_styles_default = i`
+  :host {
+    --size: 25rem;
+    --header-spacing: var(--sl-spacing-large);
+    --body-spacing: var(--sl-spacing-large);
+    --footer-spacing: var(--sl-spacing-large);
+
+    display: contents;
+  }
+
+  .drawer {
+    top: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    overflow: hidden;
+  }
+
+  .drawer--contained {
+    position: absolute;
+    z-index: initial;
+  }
+
+  .drawer--fixed {
+    position: fixed;
+    z-index: var(--sl-z-index-drawer);
+  }
+
+  .drawer__panel {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    max-width: 100%;
+    max-height: 100%;
+    background-color: var(--sl-panel-background-color);
+    box-shadow: var(--sl-shadow-x-large);
+    overflow: auto;
+    pointer-events: all;
+  }
+
+  .drawer__panel:focus {
+    outline: none;
+  }
+
+  .drawer--top .drawer__panel {
+    top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--size);
+  }
+
+  .drawer--end .drawer__panel {
+    top: 0;
+    inset-inline-end: 0;
+    bottom: auto;
+    inset-inline-start: auto;
+    width: var(--size);
+    height: 100%;
+  }
+
+  .drawer--bottom .drawer__panel {
+    top: auto;
+    inset-inline-end: auto;
+    bottom: 0;
+    inset-inline-start: 0;
+    width: 100%;
+    height: var(--size);
+  }
+
+  .drawer--start .drawer__panel {
+    top: 0;
+    inset-inline-end: auto;
+    bottom: auto;
+    inset-inline-start: 0;
+    width: var(--size);
+    height: 100%;
+  }
+
+  .drawer__header {
+    display: flex;
+  }
+
+  .drawer__title {
+    flex: 1 1 auto;
+    font: inherit;
+    font-size: var(--sl-font-size-large);
+    line-height: var(--sl-line-height-dense);
+    padding: var(--header-spacing);
+    margin: 0;
+  }
+
+  .drawer__header-actions {
+    flex-shrink: 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: end;
+    gap: var(--sl-spacing-2x-small);
+    padding: 0 var(--header-spacing);
+  }
+
+  .drawer__header-actions sl-icon-button,
+  .drawer__header-actions ::slotted(sl-icon-button) {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    font-size: var(--sl-font-size-medium);
+  }
+
+  .drawer__body {
+    flex: 1 1 auto;
+    display: block;
+    padding: var(--body-spacing);
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .drawer__footer {
+    text-align: right;
+    padding: var(--footer-spacing);
+  }
+
+  .drawer__footer ::slotted(sl-button:not(:last-of-type)) {
+    margin-inline-end: var(--sl-spacing-x-small);
+  }
+
+  .drawer:not(.drawer--has-footer) .drawer__footer {
+    display: none;
+  }
+
+  .drawer__overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--sl-overlay-background-color);
+    pointer-events: all;
+  }
+
+  .drawer--contained .drawer__overlay {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    .drawer__panel {
+      border: solid 1px var(--sl-color-neutral-0);
+    }
+  }
+`;
+
+export {
+  drawer_styles_default
+};

package/cdn/chunks/chunk.FAKWCEXF.js

@@ -0,0 +1,186 @@
+import {
+  getRowSelectionOptions,
+  getSelectionColumn
+} from "./chunk.J2JUWNCI.js";
+import {
+  table_style_default
+} from "./chunk.BGNYIYEZ.js";
+import {
+  TableController,
+  createColumnHelper,
+  getCoreRowModel
+} from "./chunk.YQCNCHZK.js";
+import {
+  o
+} from "./chunk.3TEIDNQG.js";
+import {
+  SlRadio
+} from "./chunk.R5VGZ4LD.js";
+import {
+  SlCheckbox
+} from "./chunk.GMNTE57E.js";
+import {
+  e
+} from "./chunk.ZLZKOPYV.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.U6LIZH2N.js";
+import {
+  x
+} from "./chunk.ZKRJ3RUK.js";
+import {
+  __decorateClass,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.IMHLNNT7.js";
+
+// src/components/table/table.component.ts
+var SlTable = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.columns = [];
+    this.dataSource = [];
+    this.loading = false;
+    this.bordered = false;
+    this.direction = "ltr";
+    this.showHeader = true;
+    this.rowSelectedMap = {};
+    this.tableController = new TableController(this);
+  }
+  get adapter() {
+    return {};
+  }
+  renderTable(tableInstance) {
+    const commonProps = {
+      direction: this.direction,
+      bordered: this.bordered,
+      rowSelectedMap: this.rowSelectedMap
+    };
+    const headTable = this.showHeader ? x`<sl-table-head-table
+          .tableInstance=${tableInstance}
+          .rowSelectedMap="${commonProps.rowSelectedMap}"
+          .direction=${commonProps.direction}
+          .bordered=${commonProps.bordered}
+          .dataSource=${this.dataSource}
+          .columns=${this.columns}
+        ></sl-table-head-table>` : "";
+    const bodyTable = x`<sl-table-body-table
+      .tableInstance=${tableInstance}
+      .rowSelectedMap="${commonProps.rowSelectedMap}"
+      .direction=${commonProps.direction}
+      .bordered=${commonProps.bordered}
+      .dataSource=${this.dataSource}
+      .columns=${this.columns}
+    ></sl-table-body-table>`;
+    return x`${headTable} ${bodyTable}`;
+  }
+  renderMainTable(tableInstance) {
+    const table = x`${this.renderTable(tableInstance)}`;
+    return table;
+  }
+  // 生成lit-table所需要的columns数组
+  generateColumns() {
+    const _columns = [];
+    const columnHelper = createColumnHelper();
+    for (const col of this.columns) {
+      const { dataIndex, width, render, align, className } = col;
+      const newCol = columnHelper.accessor((row) => row[dataIndex], {
+        id: dataIndex,
+        meta: {
+          align,
+          className
+        },
+        cell: (info) => {
+          if (render) {
+            const renderHtml = render(info.getValue(), info.row.original);
+            return x`${o(renderHtml)}`;
+          }
+          return info.getValue();
+        },
+        header: () => col.title || dataIndex,
+        size: width
+      });
+      _columns.push(newCol);
+    }
+    if (this.rowSelection && !this.rowSelection.hidden) {
+      _columns.unshift(getSelectionColumn(this.rowSelection));
+    }
+    return _columns;
+  }
+  // 构建 tableState
+  buildTableState() {
+    const rowSelectionOptions = getRowSelectionOptions({
+      rowSelection: this.rowSelection
+    });
+    return this.tableController.table(__spreadProps(__spreadValues({
+      columns: this.generateColumns(),
+      data: this.dataSource,
+      getCoreRowModel: getCoreRowModel(),
+      state: {
+        rowSelection: this.rowSelectedMap
+      }
+    }, rowSelectionOptions), {
+      onRowSelectionChange: (updaterOrValue) => {
+        if (typeof updaterOrValue === "function") {
+          this.rowSelectedMap = updaterOrValue(this.rowSelectedMap);
+        } else {
+          this.rowSelectedMap = updaterOrValue;
+        }
+      }
+    }));
+  }
+  render() {
+    const tableInstance = this.buildTableState();
+    return x`
+      <div 
+        part="table-wrapper"
+        class=${e({
+      "table-wrapper": true,
+      [`table-direction-${this.direction}`]: true
+    })}
+      >
+        <sl-table-spinner-container .loading=${this.loading}>
+        <div class=${e({
+      "table-bordered": Boolean(this.bordered)
+    })}>
+          <div part="table-container" class="table-container">${this.renderMainTable(tableInstance)}</div>
+        </sl-table-spinner-container>
+      </div>
+    `;
+  }
+};
+SlTable.dependencies = {
+  "sl-checkbox": SlCheckbox,
+  "sl-radio": SlRadio
+};
+SlTable.styles = [table_style_default];
+__decorateClass([
+  n({ type: Array })
+], SlTable.prototype, "columns", 2);
+__decorateClass([
+  n({ type: Array })
+], SlTable.prototype, "dataSource", 2);
+__decorateClass([
+  n({ type: Boolean })
+], SlTable.prototype, "loading", 2);
+__decorateClass([
+  n({ type: Boolean })
+], SlTable.prototype, "bordered", 2);
+__decorateClass([
+  n({ type: String })
+], SlTable.prototype, "direction", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "show-header" })
+], SlTable.prototype, "showHeader", 2);
+__decorateClass([
+  n({ type: Object })
+], SlTable.prototype, "rowSelection", 2);
+__decorateClass([
+  r()
+], SlTable.prototype, "rowSelectedMap", 2);
+
+export {
+  SlTable
+};