@kdcloudjs/shoelace 1.0.44 → 1.0.45

package/cdn/chunks/chunk.XMK6TU2Z.js

@@ -0,0 +1,472 @@
+import {
+  SlSelect
+} from "./chunk.IRBBLQ2D.js";
+import {
+  SlSegmented
+} from "./chunk.A6E77YML.js";
+import {
+  SlOption
+} from "./chunk.P7VAWFLA.js";
+import {
+  calendar_styles_default
+} from "./chunk.6NOC6GTR.js";
+import {
+  LocalizeController
+} from "./chunk.VBONVBBW.js";
+import {
+  SlIcon
+} from "./chunk.A3LXMVDY.js";
+import {
+  e
+} from "./chunk.2QDPYAHS.js";
+import {
+  watch
+} from "./chunk.WID3TCT6.js";
+import {
+  component_styles_default
+} from "./chunk.N6N54SAA.js";
+import {
+  ShoelaceElement,
+  n,
+  r
+} from "./chunk.ZYC5S7ZP.js";
+import {
+  A,
+  b
+} from "./chunk.OLIQR3OU.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.XUNG7FQE.js

@@ -0,0 +1,32 @@
+import {
+  SlCascader
+} from "./chunk.7IFUCYTC.js";
+
+// src/react/cascader/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-cascader";
+SlCascader.define("sl-cascader");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlCascader,
+  react: React,
+  events: {
+    onSlChange: "sl-change",
+    onSlClear: "sl-clear",
+    onSlInput: "sl-input",
+    onSlFocus: "sl-focus",
+    onSlBlur: "sl-blur",
+    onSlShow: "sl-show",
+    onSlAfterShow: "sl-after-show",
+    onSlHide: "sl-hide",
+    onSlAfterHide: "sl-after-hide"
+  },
+  displayName: "SlCascader"
+});
+var cascader_default = reactWrapper;
+
+export {
+  cascader_default
+};

package/cdn/chunks/chunk.XWWOORAU.js

@@ -0,0 +1,11 @@
+import {
+  SlMenuItem
+} from "./chunk.WT723SV4.js";
+
+// src/components/menu-item/menu-item.ts
+var menu_item_default = SlMenuItem;
+SlMenuItem.define("sl-menu-item");
+
+export {
+  menu_item_default
+};

package/cdn/chunks/chunk.XXFGH26X.js

@@ -0,0 +1,11 @@
+import {
+  SlInput
+} from "./chunk.CLHJVNB6.js";
+
+// src/components/input/input.ts
+var input_default = SlInput;
+SlInput.define("sl-input");
+
+export {
+  input_default
+};

package/cdn/chunks/chunk.XXWWX42Z.js

@@ -0,0 +1,11 @@
+import {
+  SlBreadcrumbItem
+} from "./chunk.TZZMKEKV.js";
+
+// src/components/breadcrumb-item/breadcrumb-item.ts
+var breadcrumb_item_default = SlBreadcrumbItem;
+SlBreadcrumbItem.define("sl-breadcrumb-item");
+
+export {
+  breadcrumb_item_default
+};

package/cdn/chunks/chunk.XY62FXRL.js

@@ -0,0 +1,11 @@
+import {
+  SlTabPanel
+} from "./chunk.LS5MJC2K.js";
+
+// src/components/tab-panel/tab-panel.ts
+var tab_panel_default = SlTabPanel;
+SlTabPanel.define("sl-tab-panel");
+
+export {
+  tab_panel_default
+};