@kdcloudjs/shoelace 1.0.3 → 1.0.5

package/dist/chunks/chunk.4UV3URTK.js

@@ -1,371 +0,0 @@
-import {
-  spread_default
-} from "./chunk.26MJV2ME.js";
-import {
-  tableCommonCss
-} from "./chunk.N4WPBYFA.js";
-import {
-  renderColGroup
-} from "./chunk.VMZXWIMR.js";
-import {
-  getTableAlign,
-  getTableRect,
-  iterateStyles
-} from "./chunk.J5RYNIJI.js";
-import {
-  ShoelaceElement
-} from "./chunk.UVL7C5UN.js";
-import {
-  __decorateClass
-} from "./chunk.KAW7D32O.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";
-var HeadTable = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.showFilterDropDown = "";
-    this.editingFilterValues = [];
-    this.getSortTooltipContent = (header) => {
-      return header.column.getNextSortingOrder() === "asc" ? "\u70B9\u51FB\u5347\u5E8F" : header.column.getNextSortingOrder() === "desc" ? "\u70B9\u51FB\u964D\u5E8F" : "\u53D6\u6D88\u6392\u5E8F";
-    };
-    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-after-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`
-                      <sl-checkbox
-                        size="small"
-                        .checked=${this.editingFilterValues.includes(f.value)}
-                        @sl-change=${(e) => {
-          const target = e.target;
-          this.handleFilterValueChange(f.value, target.checked, true);
-        }}
-                      >
-                        ${f.text}
-                      </sl-checkbox>
-                    `
-      )}
-                </div>
-              ` : html`
-                <sl-radio-group
-                  .value=${this.editingFilterValues[0]}
-                  @sl-change=${(e) => {
-        const target = e.target;
-        this.handleFilterValueChange(target.value, true, false);
-      }}
-                >
-                  ${repeat(
-        filters,
-        (f) => f.value,
-        (f) => html` <sl-radio .value=${f.value}>${f.text}</sl-radio> `
-      )}
-                </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 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>
-    `;
-  }
-  render() {
-    const { bordered, tableInstance, tableScroll, handleBodyScroll } = this.commonProps;
-    const { x } = tableScroll || {};
-    const style = {
-      width: x ? getTableRect(x) : "100%"
-    };
-    return html` <div class="table-head" part="table-head" ${ref(this.headerRef)} @scroll=${handleBodyScroll}>
-        <table
-          style=${iterateStyles(style)}
-          class="${classMap({
-      table: true,
-      "table-bordered": bordered,
-      "table-fixed": true
-    })}"
-        >
-          ${renderColGroup(tableInstance)}
-          <thead part="table-thead" class="table-thead">
-            ${repeat(
-      tableInstance.getHeaderGroups(),
-      (headerGroup) => headerGroup.id,
-      (headerGroup) => html` <tr part="table-row" class="table-row" role="row">
-                  ${repeat(
-        headerGroup.headers,
-        (header) => header.id,
-        (header) => {
-          var _a;
-          const { column } = header;
-          const columnDef = column.columnDef;
-          const { align } = columnDef.meta || {};
-          const canSort = column.getCanSort();
-          const canFilter = column.getCanFilter();
-          const sorted = column.getIsSorted();
-          const headerList = [];
-          const titleNode = html`<div
-                        class="${classMap({
-            "table-column-title": true,
-            "table-cell-ellipsis": (_a = columnDef.meta) == null ? void 0 : _a.ellipsis
-          })}"
-                      >
-                        ${header.isPlaceholder ? null : flexRender(columnDef.header, header.getContext())}
-                      </div>`;
-          const sortToolTipContent = this.getSortTooltipContent(header);
-          const sortNode = html`<sl-tooltip hoist content=${sortToolTipContent}>
-                        ${titleNode} ${this.renderSortIcon(sorted)}
-                      </sl-tooltip>`;
-          const filterNode = this.renderFilterNode(header);
-          if (canSort) {
-            headerList.push(sortNode);
-          } else {
-            headerList.push(titleNode);
-          }
-          if (canFilter) {
-            headerList.push(filterNode);
-          }
-          return html`<th
-                        part="table-row-cell"
-                        role="columnheader"
-                        class="${classMap({
-            "table-row-head": true,
-            "table-filter-icon-show": this.showFilterDropDown === column.id || column.getIsFiltered(),
-            "table-sort-icon-show": sorted
-          })}"
-                      >
-                        <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>
-                      </th>`;
-        }
-      )}
-                </tr>`
-    )}
-          </thead>
-        </table>
-      </div>
-      <style>
-        .table-head {
-          overflow: hidden;
-          direction: var(--sl-c-table-direction);
-        }
-        .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 {
-          display: flex;
-        }
-        :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;
-          display: none;
-        }
-        .table-filter-icon-show .table-filter-icon {
-          display: flex;
-        }
-        .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-footer {
-          padding: 8px 12px;
-          border-top: solid 1px var(--sl-color-neutral-200);
-          display: flex;
-          justify-content: center;
-          gap: 8px;
-        }
-      </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
-};

package/dist/chunks/chunk.4UVFSJNN.js

@@ -1,45 +0,0 @@
-import {
-  skeleton_styles_default
-} from "./chunk.HTQNKB5E.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.UVL7C5UN.js";
-import {
-  __decorateClass
-} from "./chunk.KAW7D32O.js";
-
-// src/components/skeleton/skeleton.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { property } from "lit/decorators.js";
-var SlSkeleton = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.effect = "none";
-  }
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-      skeleton: true,
-      "skeleton--pulse": this.effect === "pulse",
-      "skeleton--sheen": this.effect === "sheen"
-    })}
-      >
-        <div part="indicator" class="skeleton__indicator"></div>
-      </div>
-    `;
-  }
-};
-SlSkeleton.styles = [component_styles_default, skeleton_styles_default];
-__decorateClass([
-  property()
-], SlSkeleton.prototype, "effect", 2);
-
-export {
-  SlSkeleton
-};

package/dist/chunks/chunk.54TUSYKV.js

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

package/dist/chunks/chunk.5BLLS676.js

@@ -1,25 +0,0 @@
-import {
-  SlAnimatedImage
-} from "./chunk.6AD6KEUJ.js";
-
-// src/react/animated-image/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-animated-image";
-SlAnimatedImage.define("sl-animated-image");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlAnimatedImage,
-  react: React,
-  events: {
-    onSlLoad: "sl-load",
-    onSlError: "sl-error"
-  },
-  displayName: "SlAnimatedImage"
-});
-var animated_image_default = reactWrapper;
-
-export {
-  animated_image_default
-};

package/dist/chunks/chunk.5QEFBJ6M.js

@@ -1,100 +0,0 @@
-import {
-  LocalizeController
-} from "./chunk.6CTB5ZDJ.js";
-import {
-  ShoelaceElement
-} from "./chunk.UVL7C5UN.js";
-import {
-  __decorateClass
-} from "./chunk.KAW7D32O.js";
-
-// src/components/relative-time/relative-time.component.ts
-import { html } from "lit";
-import { property, state } from "lit/decorators.js";
-var availableUnits = [
-  { max: 276e4, value: 6e4, unit: "minute" },
-  // max 46 minutes
-  { max: 72e6, value: 36e5, unit: "hour" },
-  // max 20 hours
-  { max: 5184e5, value: 864e5, unit: "day" },
-  // max 6 days
-  { max: 24192e5, value: 6048e5, unit: "week" },
-  // max 28 days
-  { max: 28512e6, value: 2592e6, unit: "month" },
-  // max 11 months
-  { max: Infinity, value: 31536e6, unit: "year" }
-];
-var SlRelativeTime = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.isoTime = "";
-    this.relativeTime = "";
-    this.date = /* @__PURE__ */ new Date();
-    this.format = "long";
-    this.numeric = "auto";
-    this.sync = false;
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    clearTimeout(this.updateTimeout);
-  }
-  render() {
-    const now = /* @__PURE__ */ new Date();
-    const then = new Date(this.date);
-    if (isNaN(then.getMilliseconds())) {
-      this.relativeTime = "";
-      this.isoTime = "";
-      return "";
-    }
-    const diff = then.getTime() - now.getTime();
-    const { unit, value } = availableUnits.find((singleUnit) => Math.abs(diff) < singleUnit.max);
-    this.isoTime = then.toISOString();
-    this.relativeTime = this.localize.relativeTime(Math.round(diff / value), unit, {
-      numeric: this.numeric,
-      style: this.format
-    });
-    clearTimeout(this.updateTimeout);
-    if (this.sync) {
-      let nextInterval;
-      if (unit === "minute") {
-        nextInterval = getTimeUntilNextUnit("second");
-      } else if (unit === "hour") {
-        nextInterval = getTimeUntilNextUnit("minute");
-      } else if (unit === "day") {
-        nextInterval = getTimeUntilNextUnit("hour");
-      } else {
-        nextInterval = getTimeUntilNextUnit("day");
-      }
-      this.updateTimeout = window.setTimeout(() => this.requestUpdate(), nextInterval);
-    }
-    return html` <time datetime=${this.isoTime}>${this.relativeTime}</time> `;
-  }
-};
-__decorateClass([
-  state()
-], SlRelativeTime.prototype, "isoTime", 2);
-__decorateClass([
-  state()
-], SlRelativeTime.prototype, "relativeTime", 2);
-__decorateClass([
-  property()
-], SlRelativeTime.prototype, "date", 2);
-__decorateClass([
-  property()
-], SlRelativeTime.prototype, "format", 2);
-__decorateClass([
-  property()
-], SlRelativeTime.prototype, "numeric", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlRelativeTime.prototype, "sync", 2);
-function getTimeUntilNextUnit(unit) {
-  const units = { second: 1e3, minute: 6e4, hour: 36e5, day: 864e5 };
-  const value = units[unit];
-  return value - Date.now() % value;
-}
-
-export {
-  SlRelativeTime
-};

package/dist/chunks/chunk.5T2AHSSJ.js

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

package/dist/chunks/chunk.5Z7YPAZI.js

@@ -1,21 +0,0 @@
-import {
-  SlSpinner
-} from "./chunk.4Q3NU54T.js";
-
-// src/react/spinner/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "sl-spinner";
-SlSpinner.define("sl-spinner");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlSpinner,
-  react: React,
-  events: {},
-  displayName: "SlSpinner"
-});
-var spinner_default = reactWrapper;
-
-export {
-  spinner_default
-};

package/dist/chunks/chunk.64PJLQBK.js

@@ -1,11 +0,0 @@
-import {
-  SlAnimatedImage
-} from "./chunk.6AD6KEUJ.js";
-
-// src/components/animated-image/animated-image.ts
-var animated_image_default = SlAnimatedImage;
-SlAnimatedImage.define("sl-animated-image");
-
-export {
-  animated_image_default
-};