@kdcloudjs/shoelace 0.0.2 → 1.0.0

package/dist/chunks/chunk.OTP7XFTZ.js

@@ -1,450 +0,0 @@
-import {
-  watch
-} from "./chunk.GMYPQTFK.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.VAOOYX3C.js";
-import {
-  __decorateClass
-} from "./chunk.KAW7D32O.js";
-
-// src/components/calendar/calendar.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-import { property, 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: 350px;
-    border: 1px solid var(--sl-color-neutral-200);
-    border-radius: var(--sl-border-radius-medium);
-    overflow: hidden;
-  }
-
-  .calendar__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--sl-spacing-x-small) var(--sl-spacing-small);
-    background-color: var(--sl-color-neutral-50);
-    border-bottom: 1px solid var(--sl-color-neutral-200);
-  }
-
-  .calendar__nav-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    // width: var(--sl-spacing-large);
-    // height: var(--sl-spacing-large);
-    background: none;
-    border: none;
-    border-radius: var(--sl-border-radius-small);
-    color: var(--sl-color-neutral-700);
-    cursor: pointer;
-  }
-
-  .calendar__nav-button:hover {
-    background-color: var(--sl-color-neutral-100);
-  }
-
-  .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;
-    padding: var(--sl-spacing-xxx-small) var(--sl-spacing-x-small);
-    border-radius: var(--sl-border-radius-small);
-  }
-
-  .calendar__title-year:hover,
-  .calendar__title-month:hover {
-    background-color: var(--sl-color-neutral-100);
-  }
-
-  .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);
-    gap: 2px;
-    background-color: var(--sl-color-neutral-0);
-  }
-
-  .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-50);
-    justify-content: center;
-  }
-
-  .calendar__day {
-    width: 32px;
-    line-height: 32px;
-    height: 32px;
-    text-align: center;
-    cursor: pointer;
-    font-size: var(--sl-font-size-small);
-  }
-
-  .calendar__day:hover {
-    background-color: var(--sl-color-neutral-50);
-    color: var(--sl-color-neutral-900);
-  }
-
-  .calendar__day--other-month {
-    color: var(--sl-color-neutral-400);
-  }
-
-  .calendar__day--current {
-    background-color: var(--sl-color-primary-100);
-    color: var(--sl-color-primary-700);
-    font-weight: var(--sl-font-weight-semibold);
-  }
-
-  .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:hover,
-  .calendar__month-item:hover {
-    background-color: var(--sl-color-neutral-100);
-    color: var(--sl-color-neutral-900);
-  }
-
-  .calendar__year-item--selected,
-  .calendar__month-item--selected {
-    background-color: var(--sl-color-primary-600);
-    color: white;
-    font-weight: var(--sl-font-weight-semibold);
-  }
-`;
-
-// src/components/calendar/calendar.component.ts
-var SlCalendar = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.date = /* @__PURE__ */ new Date();
-    this.currentDate = new Date(this.date);
-    this.view = "days";
-    this.selectedDate = null;
-  }
-  handleValueChange() {
-    if (this.value) {
-      const parsedDate = new Date(this.value);
-      if (!isNaN(parsedDate.getTime())) {
-        this.currentDate = parsedDate;
-        this.selectedDate = parsedDate;
-      }
-    }
-  }
-  handleDateChange() {
-    this.currentDate = new Date(this.date);
-  }
-  // 获取当前月份的第一天是星期几
-  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;
-  }
-  // 获取年份范围
-  getYearRange() {
-    const currentYear = this.currentDate.getFullYear();
-    const startYear = Math.floor(currentYear / 10) * 10;
-    return Array.from({ length: 12 }, (_, i) => startYear + i - 1);
-  }
-  // 月份名称
-  getMonthNames() {
-    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"];
-  }
-  // 星期标题
-  getWeekdayHeaders() {
-    return ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
-  }
-  // 导航到上一个周期
-  navigatePrev() {
-    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);
-    }
-    this.currentDate = newDate;
-  }
-  // 导航到下一个周期
-  navigateNext() {
-    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);
-    }
-    this.currentDate = newDate;
-  }
-  // 选择年份
-  selectYear(year) {
-    this.currentDate.setFullYear(year);
-    this.view = "months";
-  }
-  // 选择月份
-  selectMonth(month) {
-    this.currentDate.setMonth(month);
-    this.view = "days";
-  }
-  // 选择日期
-  selectDay(day, month, year) {
-    this.selectedDate = new Date(year, month, day);
-    this.currentDate = new Date(year, month, day);
-    this.view = "days";
-    this.emit("sl-date-select", {
-      detail: { date: this.selectedDate }
-    });
-  }
-  // 切换到年份选择视图
-  showYearSelector() {
-    this.view = "years";
-  }
-  // 切换到月份选择视图
-  showMonthSelector() {
-    this.view = "months";
-  }
-  // 导航到上一年
-  navigatePrevYear() {
-    const newDate = new Date(this.currentDate);
-    newDate.setFullYear(newDate.getFullYear() - 1);
-    this.currentDate = newDate;
-  }
-  // 导航到下一年
-  navigateNextYear() {
-    const newDate = new Date(this.currentDate);
-    newDate.setFullYear(newDate.getFullYear() + 1);
-    this.currentDate = newDate;
-  }
-  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();
-    return html`
-      <div class="calendar">
-        <div class="calendar__header">
-          <div class="flex">
-            <button class="calendar__nav-button calendar__nav-button--year" @click="${this.navigatePrevYear}">
-              <sl-icon name="chevron-double-left"></sl-icon>
-            </button>
-            <button class="calendar__nav-button" @click="${this.navigatePrev}">
-              <sl-icon name="chevron-left"></sl-icon>
-            </button>
-          </div>
-
-          <div class="calendar__title">
-            ${this.view === "days" ? html`
-                  <span class="calendar__title-year" @click="${this.showYearSelector}">${year}年</span>
-                  <span class="calendar__title-month" @click="${this.showMonthSelector}">${month + 1}月</span>
-                ` : ""}
-            ${this.view === "months" ? html` <span class="calendar__title-year" @click="${this.showYearSelector}">${year}</span>年 ` : ""}
-            ${this.view === "years" ? html` ${yearRange[0]}-${yearRange[yearRange.length - 1]} ` : ""}
-          </div>
-
-          <div class="flex">
-            <button class="calendar__nav-button" @click="${this.navigateNext}">
-              <sl-icon name="chevron-right"></sl-icon>
-            </button>
-            <button class="calendar__nav-button calendar__nav-button--year" @click="${this.navigateNextYear}">
-              <sl-icon name="chevron-double-right"></sl-icon>
-            </button>
-          </div>
-        </div>
-
-        ${this.view === "days" ? html`
-              <div class="calendar__grid">
-                ${weekdayHeaders.map((header) => html` <div class="calendar__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 = (/* @__PURE__ */ new Date()).getFullYear() === day.year && (/* @__PURE__ */ new Date()).getMonth() === day.month && (/* @__PURE__ */ new Date()).getDate() === day.day;
-      return html`
-                    <div
-                      class="calendar__day ${classMap({
-        "calendar__day--other-month": !day.isCurrentMonth,
-        "calendar__day--selected": isSelected,
-        "calendar__day--current": isCurrent
-      })}"
-                      @click="${() => this.selectDay(day.day, day.month, day.year)}"
-                    >
-                      ${day.day}
-                    </div>
-                  `;
-    })}
-              </div>
-              <div class="calendar__day-footer">
-                <sl-button
-                  variant="text"
-                  size="small"
-                  @click="${() => {
-      const today = /* @__PURE__ */ new Date();
-      this.selectDay(today.getDate(), today.getMonth(), today.getFullYear());
-    }}"
-                >
-                  今天
-                </sl-button>
-              </div>
-            ` : ""}
-        ${this.view === "months" ? html`
-              <div class="calendar__month-grid">
-                ${monthNames.map(
-      (name, index) => html`
-                    <div
-                      class="calendar__month-item ${classMap({
-        "calendar__month-item--selected": index === month
-      })}"
-                      @click="${() => this.selectMonth(index)}"
-                    >
-                      ${name}
-                    </div>
-                  `
-    )}
-              </div>
-            ` : ""}
-        ${this.view === "years" ? html`
-              <div class="calendar__year-grid">
-                ${yearRange.map(
-      (y) => html`
-                    <div
-                      class="calendar__year-item ${classMap({
-        "calendar__year-item--selected": y === year
-      })}"
-                      @click="${() => this.selectYear(y)}"
-                    >
-                      ${y}
-                    </div>
-                  `
-    )}
-              </div>
-            ` : ""}
-      </div>
-    `;
-  }
-};
-SlCalendar.styles = [component_styles_default, calendar_style_default];
-__decorateClass([
-  property()
-], SlCalendar.prototype, "date", 2);
-__decorateClass([
-  property()
-], SlCalendar.prototype, "value", 2);
-__decorateClass([
-  state()
-], SlCalendar.prototype, "currentDate", 2);
-__decorateClass([
-  state()
-], SlCalendar.prototype, "view", 2);
-__decorateClass([
-  state()
-], SlCalendar.prototype, "selectedDate", 2);
-__decorateClass([
-  watch("value")
-], SlCalendar.prototype, "handleValueChange", 1);
-__decorateClass([
-  watch("date")
-], SlCalendar.prototype, "handleDateChange", 1);
-
-export {
-  SlCalendar
-};

package/dist/chunks/chunk.ST6QSNN7.js

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

package/dist/chunks/chunk.TZQ2VPVF.js

@@ -1,7 +0,0 @@
-// src/components/table/table.context.ts
-import { createContext } from "@lit/context";
-var tableContext = createContext("table-context");
-
-export {
-  tableContext
-};

package/dist/react/calendar/index.js

@@ -1,11 +0,0 @@
-import {
-  calendar_default
-} from "../../chunks/chunk.ST6QSNN7.js";
-import "../../chunks/chunk.OTP7XFTZ.js";
-import "../../chunks/chunk.GMYPQTFK.js";
-import "../../chunks/chunk.TUVJKY7S.js";
-import "../../chunks/chunk.VAOOYX3C.js";
-import "../../chunks/chunk.KAW7D32O.js";
-export {
-  calendar_default as default
-};