@kdcloudjs/shoelace 1.0.46 → 1.0.47

package/cdn/chunks/chunk.BU4EN5M4.js

@@ -1,472 +0,0 @@
-import {
-  SlSegmented
-} from "./chunk.52RBQUKR.js";
-import {
-  SlSelect
-} from "./chunk.IAY6HNWS.js";
-import {
-  SlOption
-} from "./chunk.H6ND6Q32.js";
-import {
-  calendar_styles_default
-} from "./chunk.6NOC6GTR.js";
-import {
-  LocalizeController
-} from "./chunk.VBONVBBW.js";
-import {
-  e
-} from "./chunk.2QDPYAHS.js";
-import {
-  SlIcon
-} from "./chunk.CQX7UPK6.js";
-import {
-  watch
-} from "./chunk.WID3TCT6.js";
-import {
-  component_styles_default
-} from "./chunk.N6N54SAA.js";
-import {
-  ShoelaceElement,
-  n,
-  r
-} from "./chunk.WA3EGIIZ.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.BUEZDJBO.js

@@ -1,21 +0,0 @@
-import {
-  SlSpinner
-} from "./chunk.E5W7KIHL.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/cdn/chunks/chunk.C5TKMJ5P.js

@@ -1,11 +0,0 @@
-import {
-  SlOption
-} from "./chunk.H6ND6Q32.js";
-
-// src/components/option/option.ts
-var option_default = SlOption;
-SlOption.define("sl-option");
-
-export {
-  option_default
-};

package/cdn/chunks/chunk.CJ36IRNW.js

@@ -1,21 +0,0 @@
-import {
-  SlRelativeTime
-} from "./chunk.3J7K5Q7R.js";
-
-// src/react/relative-time/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-var tagName = "sl-relative-time";
-SlRelativeTime.define("sl-relative-time");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlRelativeTime,
-  react: React,
-  events: {},
-  displayName: "SlRelativeTime"
-});
-var relative_time_default = reactWrapper;
-
-export {
-  relative_time_default
-};

package/cdn/chunks/chunk.CJGSQRIH.js

@@ -1,24 +0,0 @@
-import {
-  SlPopup
-} from "./chunk.UV4PEJWH.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.CKQ7ADVE.js

@@ -1,120 +0,0 @@
-import {
-  SlIcon
-} from "./chunk.CQX7UPK6.js";
-import {
-  watch
-} from "./chunk.WID3TCT6.js";
-import {
-  component_styles_default
-} from "./chunk.N6N54SAA.js";
-import {
-  ShoelaceElement,
-  e,
-  n,
-  r
-} from "./chunk.WA3EGIIZ.js";
-import {
-  animated_image_styles_default
-} from "./chunk.44LAWITI.js";
-import {
-  b
-} from "./chunk.OLIQR3OU.js";
-import {
-  __decorateClass
-} from "./chunk.CZCSAYQZ.js";
-
-// src/components/animated-image/animated-image.component.ts
-var SlAnimatedImage = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.isLoaded = false;
-  }
-  handleClick() {
-    this.play = !this.play;
-  }
-  handleLoad() {
-    const canvas = document.createElement("canvas");
-    const { width, height } = this.animatedImage;
-    canvas.width = width;
-    canvas.height = height;
-    canvas.getContext("2d").drawImage(this.animatedImage, 0, 0, width, height);
-    this.frozenFrame = canvas.toDataURL("image/gif");
-    if (!this.isLoaded) {
-      this.emit("sl-load");
-      this.isLoaded = true;
-    }
-  }
-  handleError() {
-    this.emit("sl-error");
-  }
-  handlePlayChange() {
-    if (this.play) {
-      this.animatedImage.src = "";
-      this.animatedImage.src = this.src;
-    }
-  }
-  handleSrcChange() {
-    this.isLoaded = false;
-  }
-  render() {
-    return b`
-      <div class="animated-image">
-        <img
-          class="animated-image__animated"
-          src=${this.src}
-          alt=${this.alt}
-          crossorigin="anonymous"
-          aria-hidden=${this.play ? "false" : "true"}
-          @click=${this.handleClick}
-          @load=${this.handleLoad}
-          @error=${this.handleError}
-        />
-
-        ${this.isLoaded ? b`
-              <img
-                class="animated-image__frozen"
-                src=${this.frozenFrame}
-                alt=${this.alt}
-                aria-hidden=${this.play ? "true" : "false"}
-                @click=${this.handleClick}
-              />
-
-              <div part="control-box" class="animated-image__control-box">
-                <slot name="play-icon"><sl-icon name="play-fill" library="system"></sl-icon></slot>
-                <slot name="pause-icon"><sl-icon name="pause-fill" library="system"></sl-icon></slot>
-              </div>
-            ` : ""}
-      </div>
-    `;
-  }
-};
-SlAnimatedImage.styles = [component_styles_default, animated_image_styles_default];
-SlAnimatedImage.dependencies = { "sl-icon": SlIcon };
-__decorateClass([
-  e(".animated-image__animated")
-], SlAnimatedImage.prototype, "animatedImage", 2);
-__decorateClass([
-  r()
-], SlAnimatedImage.prototype, "frozenFrame", 2);
-__decorateClass([
-  r()
-], SlAnimatedImage.prototype, "isLoaded", 2);
-__decorateClass([
-  n()
-], SlAnimatedImage.prototype, "src", 2);
-__decorateClass([
-  n()
-], SlAnimatedImage.prototype, "alt", 2);
-__decorateClass([
-  n({ type: Boolean, reflect: true })
-], SlAnimatedImage.prototype, "play", 2);
-__decorateClass([
-  watch("play", { waitUntilFirstUpdate: true })
-], SlAnimatedImage.prototype, "handlePlayChange", 1);
-__decorateClass([
-  watch("src")
-], SlAnimatedImage.prototype, "handleSrcChange", 1);
-
-export {
-  SlAnimatedImage
-};

package/cdn/chunks/chunk.CQBOVUI5.js

@@ -1,26 +0,0 @@
-import {
-  SlNav
-} from "./chunk.SPBW63IR.js";
-
-// src/react/nav/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-nav";
-SlNav.define("sl-nav");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlNav,
-  react: React,
-  events: {
-    onSlChange: "sl-change",
-    onSlNavOpenChange: "sl-nav-open-change",
-    onSlNavSelect: "sl-nav-select"
-  },
-  displayName: "SlNav"
-});
-var nav_default = reactWrapper;
-
-export {
-  nav_default
-};