@kdcloudjs/shoelace 1.0.44 → 1.0.45

package/dist/chunks/chunk.CAGU4EFI.js

@@ -0,0 +1,167 @@
+import {
+  screen_styles_default
+} from "./chunk.74VPT7ZS.js";
+import {
+  gridstack_styles_default
+} from "./chunk.MY3GNSET.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.ZFM37KIH.js";
+import {
+  __decorateClass,
+  __spreadValues
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/screen/screen.component.ts
+import { GridStack } from "gridstack";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var SlScreen = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.grid = null;
+    this.options = {};
+    this.data = [];
+    this.removable = false;
+    this.static = false;
+    this.selector = "";
+  }
+  /**
+   * 获取 GridStack 实例的序列化数据
+   * @returns 序列化后的网格数据
+   */
+  getGridData() {
+    var _a;
+    return ((_a = this == null ? void 0 : this.grid) == null ? void 0 : _a.save()) || [];
+  }
+  /**
+   * 获取 GridStack 实例的序列化数据
+   * @returns GridStack 实例
+   */
+  getInstance() {
+    return this.grid;
+  }
+  handleDataChange() {
+    this.loadGrid();
+  }
+  handleSelectorChange() {
+    this.setupDragIn();
+  }
+  handleStaticGridChange() {
+    this.loadGrid();
+  }
+  firstUpdated() {
+    this.initGrid();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.grid) {
+      this.grid.destroy();
+    }
+  }
+  setupDragIn() {
+    if (this.selector) {
+      GridStack.setupDragIn(this.selector);
+    }
+  }
+  initGrid() {
+    const _options = __spreadValues({
+      cellHeight: 80,
+      margin: 14,
+      acceptWidgets: true,
+      staticGrid: false,
+      removable: false
+    }, this.options);
+    if (!this.static && this.removable) {
+      _options.removable = true;
+    }
+    if (this.static) {
+      _options.staticGrid = true;
+    }
+    this.grid = GridStack.init(_options, this.gridElement);
+    this.grid.on("dropped", (_event, _previousNode, newNode) => {
+      if (newNode == null ? void 0 : newNode.el) {
+        this.addDeleteButton(newNode.el);
+      }
+    });
+    if (this.data.length > 0) {
+      this.loadGrid();
+    }
+    this.setupDragIn();
+  }
+  loadGrid() {
+    var _a;
+    if (!this.grid) return;
+    this.grid.removeAll();
+    this.grid.load(this.data, true);
+    const items = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".grid-stack-item");
+    items == null ? void 0 : items.forEach((el) => {
+      const itemEl = el;
+      const node = itemEl.gridstackNode;
+      if (node == null ? void 0 : node.content) {
+        const contentDiv = itemEl.querySelector(".grid-stack-item-content");
+        if (contentDiv) {
+          contentDiv.innerHTML = node.content;
+        }
+      }
+      this.addDeleteButton(itemEl);
+    });
+  }
+  addDeleteButton(itemEl) {
+    if (itemEl.querySelector(".del-btn") || !this.removable || this.static) return;
+    const btn = document.createElement("sl-button");
+    btn.setAttribute("variant", "danger");
+    btn.setAttribute("size", "small");
+    btn.setAttribute("circle", "");
+    btn.className = "del-btn";
+    btn.innerHTML = `<sl-icon name="x-lg"></sl-icon>`;
+    btn.onclick = (e) => {
+      e.stopPropagation();
+      if (this.grid) {
+        this.grid.removeWidget(itemEl);
+      }
+    };
+    itemEl.appendChild(btn);
+  }
+  render() {
+    return html`<div part="base" class="grid-stack"></div>`;
+  }
+};
+SlScreen.styles = [component_styles_default, gridstack_styles_default, screen_styles_default];
+__decorateClass([
+  query(".grid-stack")
+], SlScreen.prototype, "gridElement", 2);
+__decorateClass([
+  property({ type: Object, reflect: true })
+], SlScreen.prototype, "options", 2);
+__decorateClass([
+  property({ type: Array })
+], SlScreen.prototype, "data", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlScreen.prototype, "removable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlScreen.prototype, "static", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlScreen.prototype, "selector", 2);
+__decorateClass([
+  watch("data")
+], SlScreen.prototype, "handleDataChange", 1);
+__decorateClass([
+  watch("selector")
+], SlScreen.prototype, "handleSelectorChange", 1);
+__decorateClass([
+  watch("static")
+], SlScreen.prototype, "handleStaticGridChange", 1);
+
+export {
+  SlScreen
+};

package/dist/chunks/chunk.CAROPHHN.js

@@ -0,0 +1,466 @@
+import {
+  SlSelect
+} from "./chunk.PD3VO3ET.js";
+import {
+  SlSegmented
+} from "./chunk.FKZTQOEP.js";
+import {
+  SlOption
+} from "./chunk.OOXDGYS2.js";
+import {
+  calendar_styles_default
+} from "./chunk.ENEORS6S.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  SlIcon
+} from "./chunk.H3VTQBCH.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.ZFM37KIH.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/calendar/calendar.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+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(e) {
+    const select = e.target;
+    const year = parseInt(select.value, 10);
+    this.currentYear = year;
+    this.emitPanelChange();
+  }
+  handleMonthChange(e) {
+    const select = e.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 nothing;
+    const list = this.getListData(date);
+    if (!list || list.length === 0) return nothing;
+    return html`
+      <ul class="calendar__events">
+        ${list.map(
+      (item) => html`
+            <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 html`<div part="header" class="calendar__header">${result}</div>`;
+    }
+    return html`
+      <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) => html`<sl-option value="${year}">${year}年</sl-option>`)}
+          </sl-select>
+          ${this.viewMode === "month" ? html`
+                <sl-select
+                  class="calendar__month-select"
+                  value="${this.currentMonth}"
+                  size="${this.fullscreen ? "medium" : "small"}"
+                  @sl-change=${this.handleMonthChange}
+                >
+                  ${this.monthNames.map((name, index) => html`<sl-option value="${index}">${name}</sl-option>`)}
+                </sl-select>
+              ` : nothing}
+        </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 html`
+      <table part="table" class="calendar__table">
+        <thead class="calendar__thead">
+          <tr>
+            ${weekDays.map(
+      (day, index) => html`
+                <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(html`
+        <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 html`
+          <td
+            part="cell ${isToday ? "cell-today" : ""} ${isSelected ? "cell-selected" : ""}"
+            class=${classMap(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 html`
+      <td
+        part="cell ${isToday ? "cell-today" : ""} ${isSelected ? "cell-selected" : ""}"
+        class=${classMap(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 || nothing} ${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 html`
+      <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 html`
+                <div class=${classMap(cellClasses)} @click=${() => this.selectMonth(date.getMonth())}>${custom}</div>
+              `;
+        }
+      }
+      const customContent = (_a = this.monthCellRender) == null ? void 0 : _a.call(this, date);
+      return html`
+            <div class=${classMap(cellClasses)} @click=${() => this.selectMonth(date.getMonth())}>
+              <div class="calendar__month-cell-inner">
+                <span class="calendar__month-name">${this.monthNames[date.getMonth()]}</span>
+                ${customContent ? html`<div class="calendar__month-content">${customContent}</div>` : nothing}
+              </div>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      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([
+  property({ attribute: false })
+], SlCalendar.prototype, "value", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "defaultValue", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlCalendar.prototype, "mode", 2);
+__decorateClass([
+  property({
+    type: Boolean,
+    reflect: true,
+    converter: {
+      fromAttribute: (value) => value !== "false" && value !== null,
+      toAttribute: (value) => value ? "" : "false"
+    }
+  })
+], SlCalendar.prototype, "fullscreen", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "disabledDate", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "dateCellRender", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "dateFullCellRender", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "monthCellRender", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "monthFullCellRender", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "getListData", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "validRange", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "headerRender", 2);
+__decorateClass([
+  state()
+], SlCalendar.prototype, "currentYear", 2);
+__decorateClass([
+  state()
+], SlCalendar.prototype, "currentMonth", 2);
+__decorateClass([
+  state()
+], SlCalendar.prototype, "viewMode", 2);
+__decorateClass([
+  watch("value")
+], SlCalendar.prototype, "handleValueChange", 1);
+__decorateClass([
+  watch("mode")
+], SlCalendar.prototype, "handleModeChange", 1);
+
+export {
+  SlCalendar
+};

package/dist/chunks/chunk.CDLYX5ZY.js

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