@kdcloudjs/shoelace 1.0.41 → 1.0.43

package/cdn/chunks/chunk.W7SM2YVJ.js

@@ -0,0 +1,472 @@
+import {
+  SlSelect
+} from "./chunk.UGH4ZCOQ.js";
+import {
+  SlSegmented
+} from "./chunk.JF4EZ276.js";
+import {
+  SlOption
+} from "./chunk.V7AQHWXZ.js";
+import {
+  calendar_styles_default
+} from "./chunk.CJEFTJ2D.js";
+import {
+  e
+} from "./chunk.ZLKEMKLZ.js";
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  SlIcon
+} from "./chunk.KW4OXJS2.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.QUQH2EBA.js";
+import {
+  A,
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/calendar/calendar.component.ts
+var SlCalendar = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = /* @__PURE__ */ new Date();
+    this.mode = "month";
+    this.fullscreen = true;
+    this.currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+    this.currentMonth = (/* @__PURE__ */ new Date()).getMonth();
+    this.viewMode = "month";
+  }
+  get weekDays() {
+    return ["\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u65E5"];
+  }
+  get monthNames() {
+    return ["1\u6708", "2\u6708", "3\u6708", "4\u6708", "5\u6708", "6\u6708", "7\u6708", "8\u6708", "9\u6708", "10\u6708", "11\u6708", "12\u6708"];
+  }
+  get yearOptions() {
+    const current = this.currentYear;
+    const years = [];
+    for (let y = current - 10; y <= current + 10; y++) {
+      if (y >= 1 && y <= 9999) years.push(y);
+    }
+    return years;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const initDate = this.value || this.defaultValue || /* @__PURE__ */ new Date();
+    this.currentYear = initDate.getFullYear();
+    this.currentMonth = initDate.getMonth();
+    this.viewMode = this.mode;
+  }
+  handleValueChange() {
+    if (this.value) {
+      this.currentYear = this.value.getFullYear();
+      this.currentMonth = this.value.getMonth();
+    }
+  }
+  handleModeChange() {
+    this.viewMode = this.mode;
+  }
+  isDateDisabled(date) {
+    var _a;
+    if ((_a = this.disabledDate) == null ? void 0 : _a.call(this, date)) return true;
+    if (this.validRange) {
+      const [start, end] = this.validRange;
+      if (start && date < start) return true;
+      if (end && date > end) return true;
+    }
+    return false;
+  }
+  isSameDate(date1, date2) {
+    return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+  }
+  isSameMonth(date1, date2) {
+    return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
+  }
+  getMonthData() {
+    const year = this.currentYear;
+    const month = this.currentMonth;
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const startDayOfWeek = firstDay.getDay() === 0 ? 7 : firstDay.getDay();
+    const daysInMonth = lastDay.getDate();
+    const days = [];
+    const prevMonthDays = new Date(year, month, 0).getDate();
+    for (let i = startDayOfWeek - 2; i >= 0; i--) {
+      days.push({
+        date: new Date(year, month - 1, prevMonthDays - i),
+        isCurrentMonth: false
+      });
+    }
+    for (let i = 1; i <= daysInMonth; i++) {
+      days.push({
+        date: new Date(year, month, i),
+        isCurrentMonth: true
+      });
+    }
+    const remainingCells = 42 - days.length;
+    for (let i = 1; i <= remainingCells; i++) {
+      days.push({
+        date: new Date(year, month + 1, i),
+        isCurrentMonth: false
+      });
+    }
+    return days;
+  }
+  handleYearChange(e2) {
+    const select = e2.target;
+    const year = parseInt(select.value, 10);
+    this.currentYear = year;
+    this.emitPanelChange();
+  }
+  handleMonthChange(e2) {
+    const select = e2.target;
+    const month = parseInt(select.value, 10);
+    this.currentMonth = month;
+    this.emitPanelChange();
+  }
+  handleModeSwitch(newMode) {
+    this.viewMode = newMode;
+    this.emitPanelChange();
+  }
+  emitPanelChange() {
+    const date = new Date(this.currentYear, this.currentMonth, 1);
+    this.dispatchEvent(
+      new CustomEvent("sl-panel-change", {
+        bubbles: true,
+        composed: true,
+        detail: { date, mode: this.viewMode }
+      })
+    );
+  }
+  selectDate(date, source = "date") {
+    if (this.isDateDisabled(date)) return;
+    this.value = new Date(date);
+    this.currentYear = date.getFullYear();
+    this.currentMonth = date.getMonth();
+    this.dispatchEvent(
+      new CustomEvent("sl-calendar-change", {
+        bubbles: true,
+        composed: true,
+        detail: { date: new Date(date) }
+      })
+    );
+    this.dispatchEvent(
+      new CustomEvent("sl-calendar-select", {
+        bubbles: true,
+        composed: true,
+        detail: { date: new Date(date), source }
+      })
+    );
+  }
+  selectMonth(month) {
+    this.currentMonth = month;
+    this.viewMode = "month";
+    const date = new Date(this.currentYear, month, 1);
+    this.dispatchEvent(
+      new CustomEvent("sl-panel-change", {
+        bubbles: true,
+        composed: true,
+        detail: { date, mode: "month" }
+      })
+    );
+    this.dispatchEvent(
+      new CustomEvent("sl-calendar-select", {
+        bubbles: true,
+        composed: true,
+        detail: { date, source: "month" }
+      })
+    );
+  }
+  renderListData(date) {
+    if (!this.getListData) return A;
+    const list = this.getListData(date);
+    if (!list || list.length === 0) return A;
+    return b`
+      <ul class="calendar__events">
+        ${list.map(
+      (item) => b`
+            <li class="calendar__event calendar__event--${item.type}">
+              <span class="calendar__event-dot"></span>
+              <span class="calendar__event-text">${item.content}</span>
+            </li>
+          `
+    )}
+      </ul>
+    `;
+  }
+  renderHeader() {
+    if (this.headerRender) {
+      const result = this.headerRender({
+        value: new Date(this.currentYear, this.currentMonth, 1),
+        type: this.viewMode,
+        onChange: (date) => {
+          this.currentYear = date.getFullYear();
+          this.currentMonth = date.getMonth();
+          this.emitPanelChange();
+        },
+        onTypeChange: (type) => {
+          this.viewMode = type;
+          this.emitPanelChange();
+        }
+      });
+      return b`<div part="header" class="calendar__header">${result}</div>`;
+    }
+    return b`
+      <div part="header" class="calendar__header">
+        <div part="header-left" class="calendar__header-left">
+          <sl-select
+            class="calendar__year-select"
+            value="${this.currentYear}"
+            size="${this.fullscreen ? "medium" : "small"}"
+            @sl-change=${this.handleYearChange}
+          >
+            ${this.yearOptions.map((year) => b`<sl-option value="${year}">${year}年</sl-option>`)}
+          </sl-select>
+          ${this.viewMode === "month" ? b`
+                <sl-select
+                  class="calendar__month-select"
+                  value="${this.currentMonth}"
+                  size="${this.fullscreen ? "medium" : "small"}"
+                  @sl-change=${this.handleMonthChange}
+                >
+                  ${this.monthNames.map((name, index) => b`<sl-option value="${index}">${name}</sl-option>`)}
+                </sl-select>
+              ` : A}
+        </div>
+        <div part="header-right" class="calendar__header-right">
+          <sl-segmented
+            class="calendar__mode-switch"
+            size="${this.fullscreen ? "medium" : "small"}"
+            .options=${[
+      { label: "\u6708", value: "month" },
+      { label: "\u5E74", value: "year" }
+    ]}
+            .value=${this.viewMode}
+            .onChange=${(value) => this.handleModeSwitch(value)}
+          ></sl-segmented>
+        </div>
+      </div>
+    `;
+  }
+  renderMonthView() {
+    const days = this.getMonthData();
+    const today = /* @__PURE__ */ new Date();
+    const weekDays = this.weekDays;
+    const selectedDayIndex = this.value ? this.value.getDay() === 0 ? 6 : this.value.getDay() - 1 : -1;
+    return b`
+      <table part="table" class="calendar__table">
+        <thead class="calendar__thead">
+          <tr>
+            ${weekDays.map(
+      (day, index) => b`
+                <th
+                  class="calendar__column-header ${index === selectedDayIndex ? "calendar__column-header--active" : ""}"
+                >
+                  ${day}
+                </th>
+              `
+    )}
+          </tr>
+        </thead>
+        <tbody class="calendar__tbody">
+          ${this.renderWeeks(days, today)}
+        </tbody>
+      </table>
+    `;
+  }
+  renderWeeks(days, today) {
+    const weeks = [];
+    for (let i = 0; i < days.length; i += 7) {
+      const week = days.slice(i, i + 7);
+      weeks.push(b`
+        <tr class="calendar__row">
+          ${week.map(({ date, isCurrentMonth }) => this.renderDateCell(date, isCurrentMonth, today))}
+        </tr>
+      `);
+    }
+    return weeks;
+  }
+  renderDateCell(date, isCurrentMonth, today) {
+    var _a;
+    const isToday = this.isSameDate(date, today);
+    const isSelected = this.value && this.isSameDate(date, this.value);
+    const isDisabled = this.isDateDisabled(date);
+    const cellClasses = {
+      calendar__cell: true,
+      "calendar__cell--in-view": isCurrentMonth,
+      "calendar__cell--today": isToday,
+      "calendar__cell--selected": isSelected,
+      "calendar__cell--disabled": isDisabled
+    };
+    if (this.dateFullCellRender) {
+      const custom = this.dateFullCellRender(date);
+      if (custom) {
+        return b`
+          <td
+            part="cell ${isToday ? "cell-today" : ""} ${isSelected ? "cell-selected" : ""}"
+            class=${e(cellClasses)}
+            @click=${() => this.selectDate(date)}
+          >
+            ${custom}
+          </td>
+        `;
+      }
+    }
+    const customContent = (_a = this.dateCellRender) == null ? void 0 : _a.call(this, date);
+    const listData = this.renderListData(date);
+    return b`
+      <td
+        part="cell ${isToday ? "cell-today" : ""} ${isSelected ? "cell-selected" : ""}"
+        class=${e(cellClasses)}
+        @click=${() => this.selectDate(date)}
+      >
+        <div part="cell-inner" class="calendar__cell-inner">
+          <div part="date-value" class="calendar__date-value">
+            <span class="calendar__date-number">${date.getDate()}</span>
+          </div>
+          <div part="date-content" class="calendar__date-content">${customContent || A} ${listData}</div>
+        </div>
+      </td>
+    `;
+  }
+  renderYearView() {
+    const today = /* @__PURE__ */ new Date();
+    const months = [];
+    for (let i = 0; i < 12; i++) {
+      months.push(new Date(this.currentYear, i, 1));
+    }
+    return b`
+      <div class="calendar__month-panel">
+        ${months.map((date) => {
+      var _a;
+      const isCurrentMonth = this.isSameMonth(date, today);
+      const isSelected = this.value && this.isSameMonth(date, this.value);
+      const isDisabled = this.isDateDisabled(date);
+      const cellClasses = {
+        "calendar__month-cell": true,
+        "calendar__month-cell--current": isCurrentMonth,
+        "calendar__month-cell--selected": isSelected,
+        "calendar__month-cell--disabled": isDisabled
+      };
+      if (this.monthFullCellRender) {
+        const custom = this.monthFullCellRender(date);
+        if (custom) {
+          return b`
+                <div class=${e(cellClasses)} @click=${() => this.selectMonth(date.getMonth())}>${custom}</div>
+              `;
+        }
+      }
+      const customContent = (_a = this.monthCellRender) == null ? void 0 : _a.call(this, date);
+      return b`
+            <div class=${e(cellClasses)} @click=${() => this.selectMonth(date.getMonth())}>
+              <div class="calendar__month-cell-inner">
+                <span class="calendar__month-name">${this.monthNames[date.getMonth()]}</span>
+                ${customContent ? b`<div class="calendar__month-content">${customContent}</div>` : A}
+              </div>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+  render() {
+    return b`
+      <div
+        part="base"
+        class=${e({
+      calendar: true,
+      "calendar--fullscreen": this.fullscreen,
+      "calendar--card": !this.fullscreen
+    })}
+      >
+        ${this.renderHeader()}
+        <div part="body" class="calendar__body">
+          ${this.viewMode === "month" ? this.renderMonthView() : this.renderYearView()}
+        </div>
+      </div>
+    `;
+  }
+};
+SlCalendar.styles = [component_styles_default, calendar_styles_default];
+SlCalendar.dependencies = {
+  "sl-icon": SlIcon,
+  "sl-select": SlSelect,
+  "sl-option": SlOption,
+  "sl-segmented": SlSegmented
+};
+__decorateClass([
+  n({ attribute: false })
+], SlCalendar.prototype, "value", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlCalendar.prototype, "defaultValue", 2);
+__decorateClass([
+  n({ reflect: true })
+], SlCalendar.prototype, "mode", 2);
+__decorateClass([
+  n({
+    type: Boolean,
+    reflect: true,
+    converter: {
+      fromAttribute: (value) => value !== "false" && value !== null,
+      toAttribute: (value) => value ? "" : "false"
+    }
+  })
+], SlCalendar.prototype, "fullscreen", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlCalendar.prototype, "disabledDate", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlCalendar.prototype, "dateCellRender", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlCalendar.prototype, "dateFullCellRender", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlCalendar.prototype, "monthCellRender", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlCalendar.prototype, "monthFullCellRender", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlCalendar.prototype, "getListData", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlCalendar.prototype, "validRange", 2);
+__decorateClass([
+  n({ attribute: false })
+], SlCalendar.prototype, "headerRender", 2);
+__decorateClass([
+  r()
+], SlCalendar.prototype, "currentYear", 2);
+__decorateClass([
+  r()
+], SlCalendar.prototype, "currentMonth", 2);
+__decorateClass([
+  r()
+], SlCalendar.prototype, "viewMode", 2);
+__decorateClass([
+  watch("value")
+], SlCalendar.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("mode")
+], SlCalendar.prototype, "handleModeChange", 1);
+
+export {
+  SlCalendar
+};

package/cdn/chunks/chunk.WB6TOBWU.js

@@ -0,0 +1,50 @@
+import {
+  LocalizeController
+} from "./chunk.2SU6QBUU.js";
+import {
+  ShoelaceElement,
+  n
+} from "./chunk.QUQH2EBA.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/format-bytes/format-bytes.component.ts
+var SlFormatBytes = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.unit = "byte";
+    this.display = "short";
+  }
+  render() {
+    if (isNaN(this.value)) {
+      return "";
+    }
+    const bitPrefixes = ["", "kilo", "mega", "giga", "tera"];
+    const bytePrefixes = ["", "kilo", "mega", "giga", "tera", "peta"];
+    const prefix = this.unit === "bit" ? bitPrefixes : bytePrefixes;
+    const index = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1));
+    const unit = prefix[index] + this.unit;
+    const valueToFormat = parseFloat((this.value / Math.pow(1e3, index)).toPrecision(3));
+    return this.localize.number(valueToFormat, {
+      style: "unit",
+      unit,
+      unitDisplay: this.display
+    });
+  }
+};
+__decorateClass([
+  n({ type: Number })
+], SlFormatBytes.prototype, "value", 2);
+__decorateClass([
+  n()
+], SlFormatBytes.prototype, "unit", 2);
+__decorateClass([
+  n()
+], SlFormatBytes.prototype, "display", 2);
+
+export {
+  SlFormatBytes
+};

package/cdn/chunks/chunk.WEGQ4YPF.js

@@ -0,0 +1,11 @@
+import {
+  SlCarousel
+} from "./chunk.P4NRTQFL.js";
+
+// src/components/carousel/carousel.ts
+var carousel_default = SlCarousel;
+SlCarousel.define("sl-carousel");
+
+export {
+  carousel_default
+};

package/cdn/chunks/chunk.WF7NDNWN.js

@@ -0,0 +1,11 @@
+import {
+  SlRow
+} from "./chunk.2FFGJYE4.js";
+
+// src/components/row/row.ts
+var row_default = SlRow;
+SlRow.define("sl-row");
+
+export {
+  row_default
+};

package/cdn/chunks/chunk.WMO7OIUB.js

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

package/cdn/chunks/chunk.WOHHOS7H.js

@@ -0,0 +1,11 @@
+import {
+  SlDaterangepicker
+} from "./chunk.ITVEHX7R.js";
+
+// src/components/daterangepicker/daterangepicker.ts
+var daterangepicker_default = SlDaterangepicker;
+SlDaterangepicker.define("sl-daterangepicker");
+
+export {
+  daterangepicker_default
+};

package/cdn/chunks/chunk.WSH5IXQ4.js

@@ -0,0 +1,24 @@
+import {
+  visually_hidden_styles_default
+} from "./chunk.VASGIW4T.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement
+} from "./chunk.QUQH2EBA.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+
+// src/components/visually-hidden/visually-hidden.component.ts
+var SlVisuallyHidden = class extends ShoelaceElement {
+  render() {
+    return b` <slot></slot> `;
+  }
+};
+SlVisuallyHidden.styles = [component_styles_default, visually_hidden_styles_default];
+
+export {
+  SlVisuallyHidden
+};

package/cdn/chunks/chunk.WT3WQIEX.js

@@ -0,0 +1,92 @@
+import {
+  space_styles_default
+} from "./chunk.EXWUHZ75.js";
+import {
+  o
+} from "./chunk.TNQRIWXJ.js";
+import {
+  e
+} from "./chunk.ZLKEMKLZ.js";
+import {
+  component_styles_default
+} from "./chunk.WT5BNBAS.js";
+import {
+  ShoelaceElement,
+  n
+} from "./chunk.QUQH2EBA.js";
+import {
+  b
+} from "./chunk.7Z2GKZ7U.js";
+import {
+  __decorateClass
+} from "./chunk.CZCSAYQZ.js";
+
+// src/components/space/space.component.ts
+var SlSpace = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "horizontal";
+    this.size = "small";
+    this.wrap = false;
+  }
+  getSizeValue(size) {
+    if (typeof size === "number") {
+      return `${size}px`;
+    }
+    const sizeMap = {
+      small: "var(--sl-spacing-small)",
+      medium: "var(--sl-spacing-medium)",
+      large: "var(--sl-spacing-large)"
+    };
+    return sizeMap[size] || sizeMap.small;
+  }
+  getGapStyle() {
+    const [horizontalSize, verticalSize] = Array.isArray(this.size) ? this.size : [this.size, this.size];
+    return {
+      columnGap: this.getSizeValue(horizontalSize),
+      rowGap: this.getSizeValue(verticalSize),
+      flexWrap: this.wrap ? "wrap" : "nowrap"
+    };
+  }
+  render() {
+    const isVertical = this.orientation === "vertical";
+    return b`
+      <div
+        part="base"
+        class=${e({
+      space: true,
+      "space--horizontal": !isVertical,
+      "space--vertical": isVertical,
+      "space--wrap": this.wrap,
+      "space--align-start": this.align === "start",
+      "space--align-end": this.align === "end",
+      "space--align-center": this.align === "center",
+      "space--align-baseline": this.align === "baseline"
+    })}
+        style=${o(this.getGapStyle())}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+SlSpace.styles = [component_styles_default, space_styles_default];
+__decorateClass([
+  n({ reflect: true })
+], SlSpace.prototype, "orientation", 2);
+__decorateClass([
+  n()
+], SlSpace.prototype, "size", 2);
+__decorateClass([
+  n()
+], SlSpace.prototype, "align", 2);
+__decorateClass([
+  n({ type: Boolean })
+], SlSpace.prototype, "wrap", 2);
+__decorateClass([
+  n()
+], SlSpace.prototype, "separator", 2);
+
+export {
+  SlSpace
+};