@kdcloudjs/shoelace 1.0.15 → 1.0.17

package/dist/chunks/chunk.XSLEJNEA.js

@@ -1,1056 +0,0 @@
-import {
-  SlTimePanel
-} from "./chunk.2EPFDA7S.js";
-import {
-  SlButton
-} from "./chunk.CU3TNPSN.js";
-import {
-  SlIcon
-} from "./chunk.UCM3NHY6.js";
-import {
-  watch
-} from "./chunk.55S3OOTM.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.E2NGL5EB.js";
-import {
-  __decorateClass
-} from "./chunk.W5KB6T3Z.js";
-
-// src/components/calendar/calendar.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-
-// src/internal/datepicker.ts
-function parseDatetime(datetimeStr, format = "datetime") {
-  if (format === "date" || format === "datetime") {
-    return parseLegacyDatetime(datetimeStr);
-  }
-  return parseDateWithFormat(datetimeStr, format);
-}
-function parseLegacyDatetime(datetimeStr) {
-  const regex = /^(\d{4})([-./])(\d{2})\2(\d{2})(?:\s+(\d{2}):(\d{2}):(\d{2}))?$/;
-  const match = datetimeStr.trim().match(regex);
-  if (!match) {
-    return null;
-  }
-  const year = parseInt(match[1], 10);
-  const month = parseInt(match[3], 10);
-  const day = parseInt(match[4], 10);
-  const hours = match[5] ? parseInt(match[5], 10) : 0;
-  const minutes = match[6] ? parseInt(match[6], 10) : 0;
-  const seconds = match[7] ? parseInt(match[7], 10) : 0;
-  if (year < 1) return null;
-  if (month < 1 || month > 12) return null;
-  if (day < 1 || day > 31) return null;
-  if (hours < 0 || hours > 23) return null;
-  if (minutes < 0 || minutes > 59) return null;
-  if (seconds < 0 || seconds > 59) return null;
-  const date = new Date(year, month - 1, day, hours, minutes, seconds);
-  if (year > 0 && year < 100) {
-    date.setFullYear(year);
-  }
-  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
-    return null;
-  }
-  return date;
-}
-function parseDateWithFormat(dateString, format) {
-  const formatRegex = /yyyy|MM|dd|HH|mm|ss|hh|a|M|d|H|h|m|s/g;
-  const formatTokens = format.match(formatRegex);
-  if (!formatTokens) return null;
-  const regexString = format.replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(formatRegex, (token) => {
-    switch (token) {
-      case "yyyy":
-        return "(\\d{4})";
-      case "MM":
-      case "dd":
-      case "HH":
-      case "mm":
-      case "ss":
-      case "hh":
-        return "(\\d{2})";
-      case "M":
-      case "d":
-      case "H":
-      case "h":
-      case "m":
-      case "s":
-        return "(\\d{1,2})";
-      case "a":
-        return "(am|pm|AM|PM)";
-      default:
-        return token;
-    }
-  });
-  const regex = new RegExp(`^${regexString}$`);
-  const match = dateString.trim().match(regex);
-  if (!match) return null;
-  const dateParts = {
-    year: 0,
-    month: 1,
-    day: 1,
-    hour: 0,
-    minute: 0,
-    second: 0
-  };
-  let isPm = false;
-  let is12Hour = false;
-  const today = /* @__PURE__ */ new Date();
-  dateParts.year = today.getFullYear();
-  dateParts.month = today.getMonth() + 1;
-  dateParts.day = today.getDate();
-  formatTokens.forEach((token, index) => {
-    const value = match[index + 1];
-    if (token === "a") {
-      if (value.toLowerCase() === "pm") isPm = true;
-    } else {
-      const intVal = parseInt(value, 10);
-      switch (token) {
-        case "yyyy":
-          dateParts.year = intVal;
-          break;
-        case "MM":
-        case "M":
-          dateParts.month = intVal;
-          break;
-        case "dd":
-        case "d":
-          dateParts.day = intVal;
-          break;
-        case "HH":
-        case "H":
-          dateParts.hour = intVal;
-          break;
-        case "mm":
-        case "m":
-          dateParts.minute = intVal;
-          break;
-        case "ss":
-        case "s":
-          dateParts.second = intVal;
-          break;
-        case "hh":
-        case "h":
-          dateParts.hour = intVal;
-          is12Hour = true;
-          break;
-      }
-    }
-  });
-  if (is12Hour) {
-    if (isPm && dateParts.hour < 12) dateParts.hour += 12;
-    if (!isPm && dateParts.hour === 12) dateParts.hour = 0;
-  }
-  const date = new Date(
-    dateParts.year,
-    dateParts.month - 1,
-    dateParts.day,
-    dateParts.hour,
-    dateParts.minute,
-    dateParts.second
-  );
-  if (date.getFullYear() !== dateParts.year || date.getMonth() !== dateParts.month - 1 || date.getDate() !== dateParts.day) {
-    const hasYear = format.includes("yyyy");
-    const hasMonth = format.includes("MM");
-    const hasDay = format.includes("dd");
-    if (hasYear && hasMonth && hasDay) {
-      return null;
-    }
-    if (format.includes("dd") && date.getDate() !== dateParts.day) return null;
-    if (format.includes("MM") && date.getMonth() !== dateParts.month - 1) return null;
-  }
-  return date;
-}
-function formatDatetime(date, format = "datetime") {
-  if (format === "date") {
-    return formatDateWithFormat(date, "yyyy-MM-dd");
-  }
-  if (format === "datetime") {
-    return formatDateWithFormat(date, "yyyy-MM-dd HH:mm:ss");
-  }
-  return formatDateWithFormat(date, format);
-}
-function formatDateWithFormat(date, format) {
-  const formatRegex = /yyyy|MM|dd|HH|mm|ss|hh|a|M|d|H|h|m|s/g;
-  const map = {
-    yyyy: String(date.getFullYear()).padStart(4, "0"),
-    MM: String(date.getMonth() + 1).padStart(2, "0"),
-    M: String(date.getMonth() + 1),
-    dd: String(date.getDate()).padStart(2, "0"),
-    d: String(date.getDate()),
-    HH: String(date.getHours()).padStart(2, "0"),
-    H: String(date.getHours()),
-    mm: String(date.getMinutes()).padStart(2, "0"),
-    m: String(date.getMinutes()),
-    ss: String(date.getSeconds()).padStart(2, "0"),
-    s: String(date.getSeconds()),
-    hh: String(date.getHours() % 12 || 12).padStart(2, "0"),
-    h: String(date.getHours() % 12 || 12),
-    a: date.getHours() >= 12 ? "PM" : "AM"
-  };
-  return format.replace(formatRegex, (match) => map[match]);
-}
-var LOCALE = {
-  today: "\u4ECA\u5929",
-  year: "\u5E74",
-  month: "\u6708",
-  monday: "\u4E00",
-  tuesday: "\u4E8C",
-  wednesday: "\u4E09",
-  thursday: "\u56DB",
-  friday: "\u4E94",
-  saturday: "\u516D",
-  sunday: "\u65E5",
-  confirmText: "\u786E\u5B9A",
-  cancelText: "\u53D6\u6D88",
-  hour: "\u65F6",
-  minute: "\u5206",
-  second: "\u79D2",
-  clearText: "\u6E05\u9664"
-};
-
-// src/components/calendar/calendar.component.ts
-import { property, query, state } from "lit/decorators.js";
-
-// src/components/calendar/calendar.style.ts
-import { css } from "lit";
-var calendar_style_default = css`
-  :host {
-    display: inline-block;
-    font-family: var(--sl-font-sans);
-  }
-  .flex {
-    display: flex;
-  }
-
-  .calendar {
-    width: 100%;
-    max-width: 560px;
-    box-shadow: var(--sl-shadow-large);
-    border-radius: var(--sl-border-radius-medium);
-    overflow: hidden;
-  }
-
-  .calendar__content {
-    display: block;
-  }
-
-  .calendar__content--has-time {
-    display: flex;
-    align-items: stretch;
-  }
-
-  .calendar__date-section {
-    flex: 1 1 auto;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  .calendar__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--sl-spacing-2x-small) var(--sl-spacing-small);
-    background-color: var(--sl-color-neutral-50);
-    border-bottom: 1px solid var(--sl-color-neutral-300);
-    min-height: 40px; /* Ensure consistent height */
-    box-sizing: border-box;
-  }
-
-  .calendar__nav-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    border-radius: var(--sl-border-radius-small);
-    color: var(--sl-color-neutral-700);
-    cursor: pointer;
-    padding: var(--sl-spacing-2x-small);
-  }
-
-  .calendar__nav-button:hover {
-    color: var(--sl-color-primary-600);
-  }
-
-  .calendar__nav-button[disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
-    background: none;
-    color: var(--sl-color-neutral-400);
-    pointer-events: none;
-  }
-
-  sl-button[disabled] {
-    pointer-events: none;
-  }
-
-  .calendar__title {
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-900);
-  }
-
-  .calendar__title-year,
-  .calendar__title-month {
-    cursor: pointer;
-    border-radius: var(--sl-border-radius-small);
-  }
-
-  .calendar__title-year:hover,
-  .calendar__title-month:hover {
-    color: var(--sl-color-primary-600);
-  }
-
-  .calendar__nav-button--year {
-    font-size: var(--sl-font-size-small);
-    padding: 0 var(--sl-spacing-3x-small);
-    margin: 0 var(--sl-spacing-3x-small);
-  }
-
-  .calendar__grid {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    justify-items: center;
-    gap: 2px;
-    padding: var(--sl-spacing-3x-small);
-  }
-
-  .calendar__day-header {
-    width: 32px;
-    line-height: 32px;
-    height: 32px;
-    background-color: var(--sl-color-neutral-0);
-    text-align: center;
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-600);
-  }
-
-  .calendar__day-footer {
-    padding: var(--sl-spacing-2x-small);
-    display: flex;
-    background-color: var(--sl-color-neutral-0);
-    justify-content: center;
-    border-top: 1px solid var(--sl-color-neutral-300);
-  }
-
-  .calendar__day {
-    width: 32px;
-    line-height: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .calendar__day-item {
-    width: 24px;
-    line-height: 24px;
-    height: 24px;
-    text-align: center;
-    cursor: pointer;
-    font-size: var(--sl-font-size-small);
-    border-radius: var(--sl-border-radius-small);
-  }
-
-  .calendar__day-item:not(.calendar__day--selected):hover {
-    background-color: var(--sl-color-neutral-100);
-    color: var(--sl-color-neutral-900);
-  }
-
-  .calendar__day--other-month {
-    color: var(--sl-color-neutral-400);
-  }
-
-  .calendar__day--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    color: var(--sl-color-neutral-300);
-    pointer-events: none;
-  }
-
-  .calendar__date--current {
-    position: relative;
-    // background-color: var(--sl-color-primary-100);
-    // color: var(--sl-color-primary-700);
-    // font-weight: var(--sl-font-weight-semibold);
-  }
-  .calendar__date--current:not(.calendar__day--selected):after {
-    position: absolute;
-    content: '';
-    bottom: -2px;
-    left: 50%;
-    transform: translate(-50%, 0);
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: var(--sl-color-primary-600);
-  }
-
-  .calendar__day--selected {
-    background-color: var(--sl-color-primary-600);
-    color: white;
-    font-weight: var(--sl-font-weight-semibold);
-  }
-
-  .calendar__year-grid,
-  .calendar__month-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: var(--sl-spacing-medium);
-    padding: var(--sl-spacing-small);
-    background-color: var(--sl-color-neutral-0);
-  }
-
-  .calendar__year-item,
-  .calendar__month-item {
-    width: 56px;
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    cursor: pointer;
-    border-radius: var(--sl-border-radius-small);
-  }
-
-  .calendar__year-item:not(.calendar__year-item--disabled):hover,
-  .calendar__month-item:hover {
-    background-color: var(--sl-color-neutral-100);
-    color: var(--sl-color-neutral-900);
-  }
-
-  .calendar__year-item--disabled {
-    pointer-events: none;
-  }
-
-  .calendar__year-item--selected,
-  .calendar__month-item--selected {
-    background-color: var(--sl-color-primary-600);
-    color: white;
-    font-weight: var(--sl-font-weight-semibold);
-  }
-
-  .calendar__body {
-    display: block;
-    background-color: var(--sl-color-neutral-0);
-  }
-
-  .calendar__date-panel {
-    flex: 1 1 auto;
-  }
-
-  .calendar__time-footer {
-    display: flex;
-    justify-content: flex-end;
-    padding: var(--sl-spacing-2x-small) var(--sl-spacing-small);
-    border-top: 1px solid var(--sl-color-neutral-300);
-    background-color: var(--sl-color-neutral-0);
-    /* Ensure footer aligns at bottom */
-    margin-top: auto;
-  }
-  .calendar__mobile-time-footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--sl-spacing-2x-small);
-    background-color: var(--sl-color-neutral-100);
-    padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
-    border-radius: var(--sl-border-radius-small);
-    cursor: pointer;
-  }
-
-  .calendar__mobile-time-footer span {
-    font-size: var(--sl-font-size-small);
-    color: var(--sl-color-neutral-700);
-    font-variant-numeric: tabular-nums;
-  }
-
-  .calendar__mobile-time-footer sl-icon {
-    font-size: var(--sl-font-size-small);
-    color: var(--sl-color-neutral-500);
-  }
-
-  /* 修改 time-panel 的根容器样式 */
-  sl-time-panel::part(base) {
-    box-shadow: none;
-    border-radius: none;
-  }
-
-  sl-time-panel::part(margin-cell-first) {
-    border-inline-start: 1px solid var(--sl-color-neutral-300);
-  }
-
-  /* 修改 time-panel 的 columns 栏样式 */
-  sl-time-panel::part(columns) {
-    border-inline-start: 1px solid var(--sl-color-neutral-300);
-  }
-`;
-
-// src/components/calendar/calendar.component.ts
-var SlCalendar = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.type = "date";
-    this.min = "0001-01-01";
-    this.max = "9999-12-31";
-    this.isMobile = false;
-    this.currentDate = /* @__PURE__ */ new Date();
-    this.view = "days";
-    this.selectedDate = null;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleResize = this.handleResize.bind(this);
-    window.addEventListener("resize", this.handleResize);
-    this.handleResize();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener("resize", this.handleResize);
-  }
-  handleResize() {
-    this.isMobile = window.matchMedia("(max-width: 500px)").matches;
-  }
-  parseValue(value) {
-    return parseDatetime(value);
-  }
-  handleValueChange() {
-    if (!this.value) {
-      return;
-    }
-    const parsedDate = this.parseValue(this.value);
-    if (parsedDate) {
-      this.currentDate = new Date(parsedDate);
-      this.selectedDate = parsedDate;
-      this.view = "days";
-    }
-  }
-  resetView() {
-    this.view = "days";
-    this.selectedDate = this.value ? this.parseValue(this.value) : null;
-    this.currentDate = this.selectedDate ? new Date(this.selectedDate) : /* @__PURE__ */ new Date();
-    this.updateComplete.then(() => {
-      if (this.timePanel) {
-        this.timePanel.resetScroll();
-      }
-    });
-  }
-  setCurrentDate(date) {
-    this.currentDate = new Date(date);
-    this.view = "days";
-  }
-  // 获取当前月份的第一天是星期几
-  getFirstDayOfMonth(date) {
-    const firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
-    return firstDay.getDay();
-  }
-  // 获取当前月份的天数
-  getDaysInMonth(date) {
-    return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
-  }
-  // 获取当前月份的日期网格
-  getMonthDays(date) {
-    const year = date.getFullYear();
-    const month = date.getMonth();
-    const firstDay = this.getFirstDayOfMonth(date);
-    const daysInMonth = this.getDaysInMonth(date);
-    const daysInPrevMonth = this.getDaysInMonth(new Date(year, month - 1));
-    const days = [];
-    for (let i = firstDay - 1; i >= 0; i--) {
-      days.push({
-        day: daysInPrevMonth - i,
-        month: month - 1,
-        year,
-        isCurrentMonth: false
-      });
-    }
-    for (let i = 1; i <= daysInMonth; i++) {
-      days.push({
-        day: i,
-        month,
-        year,
-        isCurrentMonth: true
-      });
-    }
-    const remainingDays = 42 - days.length;
-    for (let i = 1; i <= remainingDays; i++) {
-      days.push({
-        day: i,
-        month: month + 1,
-        year,
-        isCurrentMonth: false
-      });
-    }
-    return days;
-  }
-  // Check if a specific day should be disabled
-  isDayDisabled(day, month, year) {
-    const minDate = this.parseValue(this.min);
-    const maxDate = this.parseValue(this.max);
-    if (minDate && maxDate && maxDate < minDate) {
-      return true;
-    }
-    const date = new Date(year, month, day);
-    if (year > 0 && year < 100) {
-      date.setFullYear(year);
-    }
-    date.setHours(0, 0, 0, 0);
-    if (minDate) {
-      minDate.setHours(0, 0, 0, 0);
-      if (date < minDate) {
-        return true;
-      }
-    }
-    if (maxDate) {
-      maxDate.setHours(0, 0, 0, 0);
-      if (date > maxDate) {
-        return true;
-      }
-    }
-    return false;
-  }
-  // 获取年份范围
-  getYearRange() {
-    const currentYear = this.currentDate.getFullYear();
-    const startYear = Math.floor(currentYear / 10) * 10;
-    let rangeStart = startYear - 1;
-    const rangeLength = 12;
-    if (rangeStart < 1) {
-      rangeStart = 1;
-    }
-    if (rangeStart + rangeLength - 1 > 9999) {
-      rangeStart = 9999 - rangeLength + 1;
-    }
-    return Array.from({ length: rangeLength }, (_, i) => rangeStart + i);
-  }
-  // 月份名称
-  getMonthNames() {
-    return Array.from({ length: 12 }, (_, i) => `${i + 1}${LOCALE.month}`);
-  }
-  // 星期标题
-  getWeekdayHeaders() {
-    return [
-      LOCALE.sunday,
-      LOCALE.monday,
-      LOCALE.tuesday,
-      LOCALE.wednesday,
-      LOCALE.thursday,
-      LOCALE.friday,
-      LOCALE.saturday
-    ];
-  }
-  // 导航到上一个周期
-  navigatePrev() {
-    if (this.isPrevDisabled) return;
-    const newDate = new Date(this.currentDate);
-    if (this.view === "days") {
-      newDate.setMonth(newDate.getMonth() - 1);
-    } else if (this.view === "months") {
-      newDate.setFullYear(newDate.getFullYear() - 1);
-    } else if (this.view === "years") {
-      newDate.setFullYear(newDate.getFullYear() - 10);
-    }
-    if (newDate.getFullYear() < 1) {
-      newDate.setFullYear(1);
-    }
-    this.currentDate = newDate;
-  }
-  // 导航到下一个周期
-  navigateNext() {
-    if (this.isNextDisabled) return;
-    const newDate = new Date(this.currentDate);
-    if (this.view === "days") {
-      newDate.setMonth(newDate.getMonth() + 1);
-    } else if (this.view === "months") {
-      newDate.setFullYear(newDate.getFullYear() + 1);
-    } else if (this.view === "years") {
-      newDate.setFullYear(newDate.getFullYear() + 10);
-    }
-    if (newDate.getFullYear() > 9999) {
-      newDate.setFullYear(9999);
-    }
-    this.currentDate = newDate;
-  }
-  get isPrevDisabled() {
-    const year = this.currentDate.getFullYear();
-    const month = this.currentDate.getMonth();
-    if (this.view === "days") {
-      return year <= 1 && month === 0;
-    } else if (this.view === "months") {
-      return year <= 1;
-    } else if (this.view === "years") {
-      const yearRange = this.getYearRange();
-      return yearRange[0] <= 1;
-    }
-    return false;
-  }
-  get isNextDisabled() {
-    const year = this.currentDate.getFullYear();
-    const month = this.currentDate.getMonth();
-    if (this.view === "days") {
-      return year >= 9999 && month === 11;
-    } else if (this.view === "months") {
-      return year >= 9999;
-    } else if (this.view === "years") {
-      const yearRange = this.getYearRange();
-      return yearRange[yearRange.length - 1] >= 9999;
-    }
-    return false;
-  }
-  // 选择年份
-  selectYear(year) {
-    this.currentDate = new Date(this.currentDate);
-    this.currentDate.setFullYear(year);
-    this.view = "months";
-  }
-  // 选择月份
-  selectMonth(month) {
-    this.currentDate = new Date(this.currentDate);
-    this.currentDate.setMonth(month);
-    this.view = "days";
-  }
-  // 选择日期
-  selectDay(day, month, year) {
-    const baseDate = this.selectedDate;
-    const hours = baseDate ? baseDate.getHours() : 0;
-    const minutes = baseDate ? baseDate.getMinutes() : 0;
-    const seconds = baseDate ? baseDate.getSeconds() : 0;
-    this.selectedDate = new Date(year, month, day, hours, minutes, seconds);
-    if (year >= 0 && year < 100) {
-      this.selectedDate.setFullYear(year);
-    }
-    this.currentDate = new Date(this.selectedDate);
-    this.view = "days";
-    if (this.type === "date") {
-      this.emit("sl-date-select", {
-        detail: { date: this.selectedDate }
-      });
-    } else {
-      this.emit("sl-date-change", {
-        detail: { date: this.selectedDate }
-      });
-    }
-  }
-  handleTimeChange(event) {
-    this.selectedDate = event.detail.value;
-    this.currentDate = new Date(this.selectedDate);
-    this.emit("sl-date-change", {
-      detail: { date: this.selectedDate }
-    });
-  }
-  confirmSelection() {
-    if (!this.selectedDate) {
-      return;
-    }
-    this.emit("sl-date-select", {
-      detail: { date: this.selectedDate }
-    });
-  }
-  // 切换到年份选择视图
-  showYearSelector() {
-    const event = this.emit("sl-view-change", { detail: { view: "years" }, cancelable: true });
-    if (!event.defaultPrevented) {
-      this.view = "years";
-    }
-  }
-  // 切换到月份选择视图
-  showMonthSelector() {
-    const event = this.emit("sl-view-change", { detail: { view: "months" }, cancelable: true });
-    if (!event.defaultPrevented) {
-      this.view = "months";
-    }
-  }
-  // 导航到上一年
-  navigatePrevYear() {
-    if (this.isPrevYearDisabled) return;
-    const newDate = new Date(this.currentDate);
-    newDate.setFullYear(newDate.getFullYear() - 1);
-    if (newDate.getFullYear() < 1) newDate.setFullYear(1);
-    this.currentDate = newDate;
-  }
-  // 导航到下一年
-  navigateNextYear() {
-    if (this.isNextYearDisabled) return;
-    const newDate = new Date(this.currentDate);
-    newDate.setFullYear(newDate.getFullYear() + 1);
-    if (newDate.getFullYear() > 9999) newDate.setFullYear(9999);
-    this.currentDate = newDate;
-  }
-  get isPrevYearDisabled() {
-    return this.currentDate.getFullYear() <= 1;
-  }
-  get isNextYearDisabled() {
-    return this.currentDate.getFullYear() >= 9999;
-  }
-  padStart(num, length = 2) {
-    return String(num).padStart(length, "0");
-  }
-  handleMouseDown(event) {
-    event.preventDefault();
-  }
-  handleKeyDown(event) {
-    if (event.key === "Enter") {
-      event.stopPropagation();
-      this.confirmSelection();
-    }
-  }
-  // 切换到时间选择视图
-  showTimeSelector() {
-    const event = this.emit("sl-view-change", { detail: { view: "time" }, cancelable: true });
-    if (!event.defaultPrevented) {
-      this.view = "time";
-    }
-  }
-  render() {
-    const year = this.currentDate.getFullYear();
-    const month = this.currentDate.getMonth();
-    const days = this.getMonthDays(this.currentDate);
-    const yearRange = this.getYearRange();
-    const monthNames = this.getMonthNames();
-    const weekdayHeaders = this.getWeekdayHeaders();
-    const todayDate = /* @__PURE__ */ new Date();
-    const isHiddenTimePicker = this.view !== "days";
-    const hiddenCss = isHiddenTimePicker ? "display: none;" : "";
-    return html`
-      <div class="calendar" part="base" @mousedown=${this.handleMouseDown} @keydown=${this.handleKeyDown}>
-        <div class="calendar__content ${this.type === "datetime" ? "calendar__content--has-time" : ""}">
-          <div class="calendar__date-section">
-            <div class="calendar__header" part="header">
-              <div class="flex">
-                ${this.view !== "years" ? html`<button
-                      part="nav-button"
-                      class="calendar__nav-button calendar__nav-button--year"
-                      @click="${this.navigatePrevYear}"
-                      ?disabled="${this.isPrevYearDisabled}"
-                    >
-                      <sl-icon name="chevron-double-left"></sl-icon>
-                    </button>` : null}
-
-                <button
-                  part="nav-button"
-                  class="calendar__nav-button"
-                  @click="${this.navigatePrev}"
-                  ?disabled="${this.isPrevDisabled}"
-                >
-                  <sl-icon name="chevron-left"></sl-icon>
-                </button>
-              </div>
-
-              <div class="calendar__title" part="title">
-                ${this.view === "days" ? html`
-                      <span part="title-year" class="calendar__title-year" @click="${this.showYearSelector}"
-                        >${this.padStart(year, 4)}${LOCALE.year}</span
-                      >
-                      <span part="title-month" class="calendar__title-month" @click="${this.showMonthSelector}"
-                        >${this.padStart(month + 1)}${LOCALE.month}</span
-                      >
-                    ` : ""}
-                ${this.view === "months" ? html`
-                      <span part="title-year" class="calendar__title-year" @click="${this.showYearSelector}"
-                        >${this.padStart(year, 4)}${LOCALE.year}</span
-                      >
-                    ` : ""}
-                ${this.view === "years" ? html` ${this.padStart(yearRange[0], 4)}-${this.padStart(yearRange[yearRange.length - 1], 4)} ` : ""}
-              </div>
-
-              <div class="flex">
-                <button
-                  part="nav-button"
-                  class="calendar__nav-button"
-                  @click="${this.navigateNext}"
-                  ?disabled="${this.isNextDisabled}"
-                >
-                  <sl-icon name="chevron-right"></sl-icon>
-                </button>
-                ${this.view !== "years" ? html`<button
-                      part="nav-button"
-                      class="calendar__nav-button calendar__nav-button--year"
-                      @click="${this.navigateNextYear}"
-                      ?disabled="${this.isNextYearDisabled}"
-                    >
-                      <sl-icon name="chevron-double-right"></sl-icon>
-                    </button>` : null}
-              </div>
-            </div>
-
-            <div class="calendar__body" part="body">
-              ${this.view === "days" ? html`
-                    <div class="calendar__date-panel" part="date-panel">
-                      <div class="calendar__grid">
-                        ${weekdayHeaders.map(
-      (header) => html` <div class="calendar__day-header" part="day-header">${header}</div> `
-    )}
-                        ${days.map((day) => {
-      const isSelected = this.selectedDate ? this.selectedDate.getFullYear() === day.year && this.selectedDate.getMonth() === day.month && this.selectedDate.getDate() === day.day : false;
-      const isCurrent = todayDate.getFullYear() === day.year && todayDate.getMonth() === day.month && todayDate.getDate() === day.day;
-      const isDisabled = this.isDayDisabled(day.day, day.month, day.year);
-      return html`
-                            <div class="calendar__day" part="day">
-                              <div
-                                class="calendar__day-item ${classMap({
-        "calendar__day--other-month": !day.isCurrentMonth,
-        "calendar__day--selected": isSelected,
-        "calendar__date--current": isCurrent,
-        "calendar__day--disabled": isDisabled
-      })}"
-                                @click="${() => !isDisabled && this.selectDay(day.day, day.month, day.year)}"
-                              >
-                                ${day.day}
-                              </div>
-                            </div>
-                          `;
-    })}
-                      </div>
-                      ${this.type !== "datetime" ? html`
-                            <div class="calendar__day-footer" part="day-footer">
-                              <sl-button
-                                variant="text"
-                                size="small"
-                                ?disabled=${this.isDayDisabled(
-      todayDate.getDate(),
-      todayDate.getMonth(),
-      todayDate.getFullYear()
-    )}
-                                @click="${() => {
-      this.selectDay(todayDate.getDate(), todayDate.getMonth(), todayDate.getFullYear());
-    }}"
-                              >
-                                ${LOCALE.today}
-                              </sl-button>
-                            </div>
-                          ` : ""}
-                    </div>
-                  ` : ""}
-              ${this.view === "months" ? html`
-                    <div class="calendar__month-grid" part="month-grid">
-                      ${monthNames.map((name, index) => {
-      const today = /* @__PURE__ */ new Date();
-      const isCurrent = today.getFullYear() === year && today.getMonth() === index;
-      return html`
-                          <div
-                            part="month-item"
-                            class="calendar__month-item ${classMap({
-        "calendar__date--current": isCurrent
-      })}"
-                            @click="${() => this.selectMonth(index)}"
-                          >
-                            ${name}
-                          </div>
-                        `;
-    })}
-                    </div>
-                  ` : ""}
-              ${this.view === "years" ? html`
-                    <div class="calendar__year-grid" part="year-grid">
-                      ${yearRange.map((y) => {
-      const today = /* @__PURE__ */ new Date();
-      const isCurrent = today.getFullYear() === y;
-      return html`
-                          <div
-                            part="year-item"
-                            class="calendar__year-item ${classMap({
-        "calendar__date--current": isCurrent
-      })}"
-                            @click="${() => this.selectYear(y)}"
-                          >
-                            ${this.padStart(y, 4)}
-                          </div>
-                        `;
-    })}
-                    </div>
-                  ` : ""}
-            </div>
-          </div>
-
-          ${this.type === "datetime" && !this.isMobile ? html`
-                <sl-time-panel
-                  exportparts="
-                    base:time-panel-base,
-                    header:time-panel-header,
-                    margin-cell-first:time-panel-margin-cell-first,
-                    margin-cell:time-panel-margin-cell,
-                    columns:time-panel-columns,
-                    column:time-panel-column,
-                    hour:time-panel-hour,
-                    minute:time-panel-minute,
-                    second:time-panel-second,
-                    item:time-panel-item,
-                    footer:time-panel-footer
-                  "
-                  .value=${this.selectedDate}
-                  style="${hiddenCss}"
-                  @sl-change=${this.handleTimeChange}
-                ></sl-time-panel>
-              ` : ""}
-        </div>
-        ${this.type === "datetime" ? html`
-              <div class="calendar__time-footer" part="time-footer" style="${hiddenCss}">
-                ${!this.isMobile ? html`
-                      <sl-button
-                        variant="primary"
-                        size="small"
-                        @click="${this.confirmSelection}"
-                        ?disabled=${!this.selectedDate || this.selectedDate && this.isDayDisabled(
-      this.selectedDate.getDate(),
-      this.selectedDate.getMonth(),
-      this.selectedDate.getFullYear()
-    )}
-                      >
-                        ${LOCALE.confirmText}
-                      </sl-button>
-                    ` : html`<div class="calendar__mobile-time-footer" @click=${this.showTimeSelector}>
-                      <span>
-                        ${this.selectedDate ? `${this.padStart(this.selectedDate.getHours())}:${this.padStart(this.selectedDate.getMinutes())}:${this.padStart(this.selectedDate.getSeconds())}` : "--:--:--"}
-                      </span>
-                      <sl-icon name="chevron-down"></sl-icon>
-                    </div>`}
-              </div>
-            ` : ""}
-      </div>
-    `;
-  }
-};
-SlCalendar.styles = [component_styles_default, calendar_style_default];
-SlCalendar.dependencies = { "sl-icon": SlIcon, "sl-button": SlButton, "sl-time-panel": SlTimePanel };
-__decorateClass([
-  property()
-], SlCalendar.prototype, "value", 2);
-__decorateClass([
-  property({ reflect: true })
-], SlCalendar.prototype, "type", 2);
-__decorateClass([
-  property()
-], SlCalendar.prototype, "min", 2);
-__decorateClass([
-  property()
-], SlCalendar.prototype, "max", 2);
-__decorateClass([
-  state()
-], SlCalendar.prototype, "isMobile", 2);
-__decorateClass([
-  state()
-], SlCalendar.prototype, "currentDate", 2);
-__decorateClass([
-  state()
-], SlCalendar.prototype, "view", 2);
-__decorateClass([
-  state()
-], SlCalendar.prototype, "selectedDate", 2);
-__decorateClass([
-  query("sl-time-panel")
-], SlCalendar.prototype, "timePanel", 2);
-__decorateClass([
-  watch("value")
-], SlCalendar.prototype, "handleValueChange", 1);
-
-export {
-  parseDatetime,
-  formatDatetime,
-  LOCALE,
-  SlCalendar
-};