@kdcloudjs/shoelace 1.0.34 → 1.0.36

package/dist/chunks/chunk.X2PKLPVG.js

@@ -0,0 +1,1317 @@
+import {
+  SlTimePanel
+} from "./chunk.NGYRGP5T.js";
+import {
+  SlButton
+} from "./chunk.W3VPDJZ4.js";
+import {
+  SlIcon
+} from "./chunk.6CFYPOVU.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.7KYGZCEZ.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,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Helvetica,
+      Arial,
+      sans-serif
+    );
+  }
+  .flex {
+    display: flex;
+  }
+
+  .calendar {
+    width: 100%;
+    max-width: 560px;
+    box-shadow: var(--sl-shadow-large, 0 4px 15px rgba(47, 62, 97, 0.12));
+    border-radius: var(--sl-border-radius-medium, 0.25rem);
+    overflow: hidden;
+    background-color: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
+  }
+
+  .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, 0.25rem) var(--sl-spacing-small, 0.75rem);
+    background-color: var(--sl-color-neutral-50, #fafafa);
+    border-bottom: 1px solid var(--sl-color-neutral-200, #e5e5e5);
+    min-height: 40px; /* Ensure consistent height */
+    box-sizing: border-box;
+  }
+
+  .calendar__nav-button {
+    font-size: var(--sl-font-size-small, 0.875rem);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    border-radius: var(--sl-border-radius-small, 0.125rem);
+    color: var(--sl-color-neutral-700, #404040);
+    cursor: pointer;
+    padding: var(--sl-spacing-2x-small, 0.25rem);
+  }
+
+  .calendar__nav-button:hover {
+    color: var(--sl-color-primary-600, #5582f3);
+  }
+
+  .calendar__nav-button[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: none;
+    color: var(--sl-color-neutral-400, #b2b2b2);
+    pointer-events: none;
+  }
+
+  sl-button[disabled] {
+    pointer-events: none;
+  }
+
+  .calendar__title {
+    font-size: var(--sl-font-size-small, 0.875rem);
+    font-weight: var(--sl-font-weight-semibold, 500);
+    color: var(--sl-color-neutral-900, #212121);
+  }
+
+  .calendar__title-year,
+  .calendar__title-month {
+    cursor: pointer;
+    border-radius: var(--sl-border-radius-small, 0.125rem);
+  }
+
+  .calendar__title-year:hover,
+  .calendar__title-month:hover {
+    color: var(--sl-color-primary-600, #5582f3);
+  }
+
+  .calendar__nav-button--year {
+    padding: 0 var(--sl-spacing-3x-small, 0.125rem);
+    margin: 0 var(--sl-spacing-3x-small, 0.125rem);
+  }
+
+  .calendar__grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    justify-items: center;
+    gap: 0;
+    padding: var(--sl-spacing-3x-small, 0.125rem);
+  }
+
+  .calendar__day-header {
+    width: 32px;
+    line-height: 32px;
+    height: 32px;
+    background-color: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
+    text-align: center;
+    font-size: var(--sl-font-size-small, 0.875rem);
+    font-weight: var(--sl-font-weight-semibold, 500);
+    color: var(--sl-color-neutral-600, #555555);
+  }
+
+  .calendar__day-footer {
+    padding: var(--sl-spacing-2x-small, 0.25rem);
+    display: flex;
+    background-color: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
+    justify-content: center;
+    border-top: 1px solid var(--sl-color-neutral-200, #e5e5e5);
+  }
+
+  .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, 0.875rem);
+    border-radius: var(--sl-border-radius-small, 0.125rem);
+    position: relative;
+  }
+
+  @media (hover: hover) {
+    .calendar__day:not(.calendar__day--in-range):not(.calendar__day--in-range-hover)
+      .calendar__day-item:not(.calendar__day--selected):not(.calendar__day--hover-cell):hover {
+      background-color: var(--sl-color-neutral-100, #f5f5f5);
+      color: var(--sl-color-neutral-900, #212121);
+    }
+  }
+
+  .calendar__day--other-month {
+    color: var(--sl-color-neutral-400, #b2b2b2);
+  }
+
+  .calendar__day--disabled {
+    cursor: not-allowed;
+    color: var(--sl-color-neutral-200, #e5e5e5);
+    pointer-events: none;
+    border-radius: 0;
+    background: var(--sl-input-background-color-disabled, var(--sl-color-neutral-100, #f5f5f5));
+    box-shadow:
+      -4px 0 0 var(--sl-input-background-color-disabled, var(--sl-color-neutral-100, #f5f5f5)),
+      4px 0 0 var(--sl-input-background-color-disabled, var(--sl-color-neutral-100, #f5f5f5));
+  }
+
+  .calendar__date--current {
+    position: relative;
+  }
+  .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, #5582f3);
+  }
+
+  .calendar__day--selected {
+    background-color: var(--sl-color-primary-600, #5582f3);
+    color: white;
+  }
+
+  .calendar__day--in-range .calendar__day-item:not(.calendar__day--selected) {
+    background-color: var(--sl-color-primary-100, #f2f6ff);
+    border-radius: 0;
+    box-shadow:
+      -4px 0 0 var(--sl-color-primary-100, #f2f6ff),
+      4px 0 0 var(--sl-color-primary-100, #f2f6ff);
+  }
+
+  .calendar__day--in-range-hover .calendar__day-item:not(.calendar__day--selected) {
+    background-color: var(--sl-color-primary-200, #e9f0ff);
+    border-radius: 0;
+    box-shadow:
+      -4px 0 0 var(--sl-color-primary-200, #e9f0ff),
+      4px 0 0 var(--sl-color-primary-200, #e9f0ff);
+  }
+
+  .calendar__day--hover-cell {
+    background-color: var(--sl-color-primary-200, #e9f0ff);
+  }
+
+  .calendar__day--range-start .calendar__day-item {
+    border-top-left-radius: var(--sl-border-radius-small, 0.125rem);
+    border-bottom-left-radius: var(--sl-border-radius-small, 0.125rem);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    box-shadow: 4px 0 0 var(--sl-color-primary-100, #f2f6ff);
+  }
+
+  .calendar__day--range-end .calendar__day-item {
+    border-top-right-radius: var(--sl-border-radius-small, 0.125rem);
+    border-bottom-right-radius: var(--sl-border-radius-small, 0.125rem);
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    box-shadow: -4px 0 0 var(--sl-color-primary-100, #f2f6ff);
+  }
+
+  .calendar__day--in-range-hover.calendar__day--range-start .calendar__day-item {
+    box-shadow: 4px 0 0 var(--sl-color-primary-200, #e9f0ff);
+  }
+
+  .calendar__day--in-range-hover.calendar__day--range-end .calendar__day-item {
+    box-shadow: -4px 0 0 var(--sl-color-primary-200, #e9f0ff);
+  }
+
+  .calendar__year-grid,
+  .calendar__month-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--sl-spacing-medium, 1rem);
+    padding: var(--sl-spacing-small, 0.75rem);
+    background-color: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
+  }
+
+  .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, 0.125rem);
+  }
+
+  .calendar__year-item:not(.calendar__year-item--disabled):hover,
+  .calendar__month-item:hover {
+    background-color: var(--sl-color-neutral-100, #f5f5f5);
+    color: var(--sl-color-neutral-900, #212121);
+  }
+
+  .calendar__year-item--disabled {
+    pointer-events: none;
+  }
+
+  .calendar__year-item--selected,
+  .calendar__month-item--selected {
+    background-color: var(--sl-color-primary-600, #5582f3);
+    color: white;
+  }
+
+  .calendar__body {
+    display: block;
+    background-color: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
+  }
+
+  .calendar__date-panel {
+    flex: 1 1 auto;
+  }
+
+  .calendar__time-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--sl-spacing-2x-small, 0.25rem) var(--sl-spacing-small, 0.75rem);
+    border-top: 1px solid var(--sl-color-neutral-200, #e5e5e5);
+    background-color: var(--sl-color-neutral-0, hsl(0, 0%, 100%));
+    /* 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, 0.25rem);
+    background-color: var(--sl-color-neutral-100, #f5f5f5);
+    padding: var(--sl-spacing-2x-small, 0.25rem) var(--sl-spacing-x-small, 0.5rem);
+    border-radius: var(--sl-border-radius-small, 0.125rem);
+    cursor: pointer;
+  }
+
+  .calendar__mobile-time-footer span {
+    font-size: var(--sl-font-size-small, 0.875rem);
+    color: var(--sl-color-neutral-700, #404040);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .calendar__mobile-time-footer sl-icon {
+    font-size: var(--sl-font-size-small, 0.875rem);
+    color: var(--sl-color-neutral-500, #999999);
+  }
+
+  /* 修改 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-200, #e5e5e5);
+  }
+
+  /* 修改 time-panel 的 columns 栏样式 */
+  sl-time-panel::part(columns) {
+    border-inline-start: 1px solid var(--sl-color-neutral-200, #e5e5e5);
+  }
+
+  @media (max-width: 500px) {
+    .calendar__day-item,
+    .calendar__title {
+      font-size: var(--sl-font-size-medium, 1rem);
+    }
+    .calendar__body {
+      padding-bottom: max(var(--sl-spacing-2x-small, 0.25rem), env(safe-area-inset-bottom, 0px));
+      box-sizing: border-box;
+    }
+    .calendar__nav-button {
+      font-size: var(--sl-font-size-large, 1.25rem);
+    }
+    sl-button::part(base) {
+      font-size: var(--sl-button-font-size-medium, var(--sl-font-size-small, 0.875rem));
+      color: var(--sl-color-neutral-900, #212121);
+    }
+    .calendar__day--disabled {
+      box-shadow: unset;
+    }
+
+    /* Make day grid stretch to full width on mobile so range highlights connect */
+    .calendar__grid {
+      justify-items: stretch;
+    }
+
+    .calendar__day-header {
+      width: auto;
+      height: auto;
+      line-height: normal;
+      padding: var(--sl-spacing-3x-small, 0.125rem) 0;
+    }
+
+    .calendar__day {
+      width: auto;
+      height: auto;
+      line-height: normal;
+      aspect-ratio: 1;
+      justify-content: center;
+    }
+
+    .calendar__day-item {
+      width: 100%;
+      height: 100%;
+      line-height: normal;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+
+    /* Range highlight: item fills the cell, so box-shadow is no longer needed to bridge gaps */
+    .calendar__day--in-range .calendar__day-item:not(.calendar__day--selected) {
+      box-shadow: none;
+    }
+
+    .calendar__day--in-range-hover .calendar__day-item:not(.calendar__day--selected) {
+      box-shadow: none;
+    }
+
+    .calendar__day--range-start .calendar__day-item {
+      box-shadow: none;
+    }
+
+    .calendar__day--range-end .calendar__day-item {
+      box-shadow: none;
+    }
+
+    .calendar__day--in-range-hover.calendar__day--range-start .calendar__day-item {
+      box-shadow: none;
+    }
+
+    .calendar__day--in-range-hover.calendar__day--range-end .calendar__day-item {
+      box-shadow: none;
+    }
+  }
+`;
+
+// src/components/calendar/calendar.component.ts
+var SlCalendar = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.type = "date";
+    this.mode = "single";
+    this.min = "0001-01-01";
+    this.max = "9999-12-31";
+    this.startDate = null;
+    this.endDate = null;
+    this.hoverDate = null;
+    this.activeInput = "start";
+    this.currentDate = /* @__PURE__ */ new Date();
+    this.syncViewWithValue = true;
+    this.isMobile = false;
+    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) {
+      this.selectedDate = null;
+      return;
+    }
+    const parsedDate = this.parseValue(this.value);
+    if (parsedDate) {
+      if (this.syncViewWithValue) {
+        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();
+      }
+    });
+  }
+  /** 仅重置时间面板的滚动位置，不影响 view 和 currentDate */
+  resetTimeScroll(behavior = "auto") {
+    this.updateComplete.then(() => {
+      if (this.timePanel) {
+        this.timePanel.resetScroll(behavior);
+      }
+    });
+  }
+  setCurrentDate(date) {
+    this.currentDate = new Date(date);
+    this.view = "days";
+  }
+  setView(view) {
+    this.view = view;
+  }
+  createDate(year, month, day, hours = 0, minutes = 0, seconds = 0) {
+    const d = /* @__PURE__ */ new Date(0);
+    d.setFullYear(year, month, day);
+    d.setHours(hours, minutes, seconds, 0);
+    return d;
+  }
+  // 获取当前月份的第一天是星期几
+  getFirstDayOfMonth(date) {
+    const firstDay = this.createDate(date.getFullYear(), date.getMonth(), 1);
+    return firstDay.getDay();
+  }
+  // 获取当前月份的天数
+  getDaysInMonth(date) {
+    return this.createDate(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(this.createDate(year, month - 1, 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.min ? this.parseValue(this.min) : null;
+    const maxDate = this.max ? this.parseValue(this.max) : null;
+    if (minDate && maxDate && maxDate < minDate) {
+      return true;
+    }
+    const date = this.createDate(year, month, day);
+    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;
+      }
+    }
+    if (this.disabledDate && this.disabledDate(date)) {
+      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;
+    this.emit("sl-view-change", { detail: { date: this.currentDate, view: this.view } });
+  }
+  // 导航到下一个周期
+  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;
+    this.emit("sl-view-change", { detail: { date: this.currentDate, view: this.view } });
+  }
+  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";
+    this.emit("sl-view-change", { detail: { date: this.currentDate, view: this.view } });
+  }
+  // 选择月份
+  selectMonth(month) {
+    this.currentDate = new Date(this.currentDate);
+    this.currentDate.setMonth(month);
+    this.view = "days";
+    this.emit("sl-view-change", { detail: { date: this.currentDate, view: this.view } });
+  }
+  // 选择日期
+  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 = this.createDate(year, month, day, hours, minutes, seconds);
+    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;
+    this.emit("sl-view-change", { detail: { date: this.currentDate, view: this.view } });
+  }
+  // 导航到下一年
+  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;
+    this.emit("sl-view-change", { detail: { date: this.currentDate, view: this.view } });
+  }
+  get isPrevYearDisabled() {
+    return this.currentDate.getFullYear() <= 1;
+  }
+  get isNextYearDisabled() {
+    return this.currentDate.getFullYear() >= 9999;
+  }
+  padStart(num, length = 2) {
+    return String(num).padStart(length, "0");
+  }
+  normalizeDay(value) {
+    if (!value) return null;
+    const normalized = new Date(value);
+    normalized.setHours(0, 0, 0, 0);
+    return normalized;
+  }
+  handleMouseDown(event) {
+    event.preventDefault();
+  }
+  handleDatePanelMouseLeave() {
+    this.dispatchEvent(new CustomEvent("sl-date-hover", { detail: { date: null } }));
+  }
+  handleGridMouseMove(event) {
+    const hasDayItem = event.composedPath().some((element) => {
+      var _a;
+      return element instanceof HTMLElement && ((_a = element.classList) == null ? void 0 : _a.contains("calendar__day-item"));
+    });
+    if (!hasDayItem) {
+      this.dispatchEvent(new CustomEvent("sl-date-hover", { detail: { date: null } }));
+    }
+  }
+  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" @mouseleave=${this.handleDatePanelMouseLeave}>
+                      <div class="calendar__grid" @mousemove=${this.handleGridMouseMove}>
+                        ${weekdayHeaders.map(
+      (header) => html` <div class="calendar__day-header" part="day-header">${header}</div> `
+    )}
+                        ${days.map((day) => {
+      const date = this.createDate(day.year, day.month, day.day);
+      date.setHours(0, 0, 0, 0);
+      const isRange = this.mode === "range";
+      const isCurrent = todayDate.getFullYear() === day.year && todayDate.getMonth() === day.month && todayDate.getDate() === day.day;
+      const isDisabled = this.isDayDisabled(day.day, day.month, day.year);
+      let confirmedRangeStart = isRange ? this.normalizeDay(this.startDate) : null;
+      let confirmedRangeEnd = isRange ? this.normalizeDay(this.endDate) : null;
+      if (confirmedRangeStart && confirmedRangeEnd && confirmedRangeStart > confirmedRangeEnd) {
+        [confirmedRangeStart, confirmedRangeEnd] = [confirmedRangeEnd, confirmedRangeStart];
+      }
+      let previewRangeStart = null;
+      let previewRangeEnd = null;
+      const hoverDate = isRange ? this.normalizeDay(this.hoverDate) : null;
+      if (isRange && hoverDate) {
+        if (this.activeInput === "start") {
+          if (confirmedRangeEnd && hoverDate > confirmedRangeEnd) {
+            previewRangeStart = hoverDate;
+            previewRangeEnd = null;
+          } else {
+            previewRangeStart = hoverDate;
+            previewRangeEnd = confirmedRangeEnd;
+          }
+        } else {
+          if (confirmedRangeStart && hoverDate < confirmedRangeStart) {
+            previewRangeStart = null;
+            previewRangeEnd = hoverDate;
+          } else {
+            previewRangeStart = confirmedRangeStart;
+            previewRangeEnd = hoverDate;
+          }
+        }
+      }
+      if (previewRangeStart && previewRangeEnd && previewRangeStart > previewRangeEnd) {
+        [previewRangeStart, previewRangeEnd] = [previewRangeEnd, previewRangeStart];
+      }
+      if (isRange && hoverDate && !confirmedRangeStart && confirmedRangeEnd && !previewRangeStart) {
+        previewRangeStart = hoverDate;
+        previewRangeEnd = confirmedRangeEnd;
+      } else if (isRange && hoverDate && confirmedRangeStart && !confirmedRangeEnd && !previewRangeEnd) {
+        previewRangeStart = confirmedRangeStart;
+        previewRangeEnd = hoverDate;
+      }
+      if (previewRangeStart && previewRangeEnd && previewRangeStart > previewRangeEnd) {
+        [previewRangeStart, previewRangeEnd] = [previewRangeEnd, previewRangeStart];
+      }
+      const isConfirmedStart = isRange && confirmedRangeStart && date.getTime() === confirmedRangeStart.getTime();
+      const isConfirmedEnd = isRange && confirmedRangeEnd && date.getTime() === confirmedRangeEnd.getTime();
+      const isConfirmedSelected = isRange ? isConfirmedStart || isConfirmedEnd : isConfirmedStart || isConfirmedEnd || this.selectedDate && date.getTime() === this.selectedDate.getTime();
+      const isHovered = isRange && hoverDate && date.getTime() === hoverDate.getTime();
+      const isConfirmedRangeCell = isRange && !!day.isCurrentMonth && !!confirmedRangeStart && !!confirmedRangeEnd && date >= confirmedRangeStart && date <= confirmedRangeEnd;
+      const isPreviewRangeCell = isRange && !!day.isCurrentMonth && !!previewRangeStart && !!previewRangeEnd && date >= previewRangeStart && date <= previewRangeEnd;
+      return html`
+                            <div
+                              class=${classMap({
+        calendar__day: true,
+        "calendar__day--in-range-hover": !!isPreviewRangeCell,
+        "calendar__day--in-range": !isPreviewRangeCell && !!isConfirmedRangeCell,
+        "calendar__day--range-start": isPreviewRangeCell && !!previewRangeStart && !!previewRangeEnd && previewRangeStart.getTime() !== previewRangeEnd.getTime() && date.getTime() === previewRangeStart.getTime() || !isPreviewRangeCell && !!isConfirmedRangeCell && !!confirmedRangeStart && !!confirmedRangeEnd && confirmedRangeStart.getTime() !== confirmedRangeEnd.getTime() && date.getTime() === confirmedRangeStart.getTime(),
+        "calendar__day--range-end": isPreviewRangeCell && !!previewRangeStart && !!previewRangeEnd && previewRangeStart.getTime() !== previewRangeEnd.getTime() && date.getTime() === previewRangeEnd.getTime() || !isPreviewRangeCell && !!isConfirmedRangeCell && !!confirmedRangeStart && !!confirmedRangeEnd && confirmedRangeStart.getTime() !== confirmedRangeEnd.getTime() && date.getTime() === confirmedRangeEnd.getTime()
+      })}
+                              part="day"
+                            >
+                              <div
+                                class=${classMap({
+        "calendar__day-item": true,
+        "calendar__day--other-month": !day.isCurrentMonth,
+        "calendar__day--selected": !!day.isCurrentMonth && !!isConfirmedSelected,
+        "calendar__day--hover-cell": !!day.isCurrentMonth && !!isHovered && !isConfirmedSelected && !!(this.startDate || this.endDate),
+        "calendar__date--current": isCurrent,
+        "calendar__day--disabled": isDisabled
+      })}
+                                @click="${() => !isDisabled && this.selectDay(day.day, day.month, day.year)}"
+                                @mouseenter="${() => !isDisabled && this.dispatchEvent(new CustomEvent("sl-date-hover", { detail: { date } }))}"
+                              >
+                                ${day.day}
+                              </div>
+                            </div>
+                          `;
+    })}
+                      </div>
+                      ${this.type !== "datetime" && this.mode !== "range" ? 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({ reflect: true })
+], SlCalendar.prototype, "mode", 2);
+__decorateClass([
+  property()
+], SlCalendar.prototype, "min", 2);
+__decorateClass([
+  property()
+], SlCalendar.prototype, "max", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "disabledDate", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "startDate", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "endDate", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "hoverDate", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "activeInput", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlCalendar.prototype, "currentDate", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "sync-view-with-value" })
+], SlCalendar.prototype, "syncViewWithValue", 2);
+__decorateClass([
+  state()
+], SlCalendar.prototype, "isMobile", 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
+};