@kdcloudjs/shoelace 0.0.2 → 1.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kdcloudjs/shoelace",
   "description": "A forward-thinking library of web components.",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "license": "MIT",
   "customElements": "cdn/custom-elements.json",
   "web-types": "./dist/web-types.json",
@@ -124,4 +124,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/cdn/chunks/chunk.IW4UQA27.js

@@ -1,453 +0,0 @@
-import {
-  e
-} from "./chunk.ZLZKOPYV.js";
-import {
-  watch
-} from "./chunk.OY5V3CPY.js";
-import {
-  component_styles_default
-} from "./chunk.EFE6XYM5.js";
-import {
-  ShoelaceElement,
-  n,
-  r
-} from "./chunk.HYLK53IJ.js";
-import {
-  i,
-  x
-} from "./chunk.ZKRJ3RUK.js";
-import {
-  __decorateClass
-} from "./chunk.IMHLNNT7.js";
-
-// src/components/calendar/calendar.style.ts
-var calendar_style_default = i`
-  :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 i2 = firstDay - 1; i2 >= 0; i2--) {
-      days.push({
-        day: daysInPrevMonth - i2,
-        month: month - 1,
-        year,
-        isCurrentMonth: false
-      });
-    }
-    for (let i2 = 1; i2 <= daysInMonth; i2++) {
-      days.push({
-        day: i2,
-        month,
-        year,
-        isCurrentMonth: true
-      });
-    }
-    const remainingDays = 42 - days.length;
-    for (let i2 = 1; i2 <= remainingDays; i2++) {
-      days.push({
-        day: i2,
-        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 }, (_, i2) => startYear + i2 - 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 x`
-      <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" ? x`
-                  <span class="calendar__title-year" @click="${this.showYearSelector}">${year}年</span>
-                  <span class="calendar__title-month" @click="${this.showMonthSelector}">${month + 1}月</span>
-                ` : ""}
-            ${this.view === "months" ? x` <span class="calendar__title-year" @click="${this.showYearSelector}">${year}</span>年 ` : ""}
-            ${this.view === "years" ? x` ${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" ? x`
-              <div class="calendar__grid">
-                ${weekdayHeaders.map((header) => x` <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 x`
-                    <div
-                      class="calendar__day ${e({
-        "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" ? x`
-              <div class="calendar__month-grid">
-                ${monthNames.map(
-      (name, index) => x`
-                    <div
-                      class="calendar__month-item ${e({
-        "calendar__month-item--selected": index === month
-      })}"
-                      @click="${() => this.selectMonth(index)}"
-                    >
-                      ${name}
-                    </div>
-                  `
-    )}
-              </div>
-            ` : ""}
-        ${this.view === "years" ? x`
-              <div class="calendar__year-grid">
-                ${yearRange.map(
-      (y) => x`
-                    <div
-                      class="calendar__year-item ${e({
-        "calendar__year-item--selected": y === year
-      })}"
-                      @click="${() => this.selectYear(y)}"
-                    >
-                      ${y}
-                    </div>
-                  `
-    )}
-              </div>
-            ` : ""}
-      </div>
-    `;
-  }
-};
-SlCalendar.styles = [component_styles_default, calendar_style_default];
-__decorateClass([
-  n()
-], SlCalendar.prototype, "date", 2);
-__decorateClass([
-  n()
-], SlCalendar.prototype, "value", 2);
-__decorateClass([
-  r()
-], SlCalendar.prototype, "currentDate", 2);
-__decorateClass([
-  r()
-], SlCalendar.prototype, "view", 2);
-__decorateClass([
-  r()
-], SlCalendar.prototype, "selectedDate", 2);
-__decorateClass([
-  watch("value")
-], SlCalendar.prototype, "handleValueChange", 1);
-__decorateClass([
-  watch("date")
-], SlCalendar.prototype, "handleDateChange", 1);
-
-export {
-  SlCalendar
-};

package/cdn/chunks/chunk.JK5C4Y2O.js

@@ -1,217 +0,0 @@
-import {
-  __spreadProps,
-  __spreadValues
-} from "./chunk.IMHLNNT7.js";
-
-// node_modules/@lit/context/lib/context-request-event.js
-var s = class extends Event {
-  constructor(s4, t2, e3, o) {
-    super("context-request", { bubbles: true, composed: true }), this.context = s4, this.contextTarget = t2, this.callback = e3, this.subscribe = o != null ? o : false;
-  }
-};
-
-// node_modules/@lit/context/lib/create-context.js
-function n(n2) {
-  return n2;
-}
-
-// node_modules/@lit/context/lib/controllers/context-consumer.js
-var s2 = class {
-  constructor(t2, s4, i2, h) {
-    var _a;
-    if (this.subscribe = false, this.provided = false, this.value = void 0, this.t = (t3, s5) => {
-      this.unsubscribe && (this.unsubscribe !== s5 && (this.provided = false, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = t3, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = true, this.callback && this.callback(t3, s5)), this.unsubscribe = s5;
-    }, this.host = t2, void 0 !== s4.context) {
-      const t3 = s4;
-      this.context = t3.context, this.callback = t3.callback, this.subscribe = (_a = t3.subscribe) != null ? _a : false;
-    } else this.context = s4, this.callback = i2, this.subscribe = h != null ? h : false;
-    this.host.addController(this);
-  }
-  hostConnected() {
-    this.dispatchRequest();
-  }
-  hostDisconnected() {
-    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
-  }
-  dispatchRequest() {
-    this.host.dispatchEvent(new s(this.context, this.host, this.t, this.subscribe));
-  }
-};
-
-// node_modules/@lit/context/lib/value-notifier.js
-var s3 = class {
-  get value() {
-    return this.o;
-  }
-  set value(s4) {
-    this.setValue(s4);
-  }
-  setValue(s4, t2 = false) {
-    const i2 = t2 || !Object.is(s4, this.o);
-    this.o = s4, i2 && this.updateObservers();
-  }
-  constructor(s4) {
-    this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
-      for (const [s5, { disposer: t2 }] of this.subscriptions) s5(this.o, t2);
-    }, void 0 !== s4 && (this.value = s4);
-  }
-  addCallback(s4, t2, i2) {
-    if (!i2) return void s4(this.value);
-    this.subscriptions.has(s4) || this.subscriptions.set(s4, { disposer: () => {
-      this.subscriptions.delete(s4);
-    }, consumerHost: t2 });
-    const { disposer: h } = this.subscriptions.get(s4);
-    s4(this.value, h);
-  }
-  clearCallbacks() {
-    this.subscriptions.clear();
-  }
-};
-
-// node_modules/@lit/context/lib/controllers/context-provider.js
-var e = class extends Event {
-  constructor(t2, s4) {
-    super("context-provider", { bubbles: true, composed: true }), this.context = t2, this.contextTarget = s4;
-  }
-};
-var i = class extends s3 {
-  constructor(s4, e3, i2) {
-    var _a, _b;
-    super(void 0 !== e3.context ? e3.initialValue : i2), this.onContextRequest = (t2) => {
-      var _a2;
-      if (t2.context !== this.context) return;
-      const s5 = (_a2 = t2.contextTarget) != null ? _a2 : t2.composedPath()[0];
-      s5 !== this.host && (t2.stopPropagation(), this.addCallback(t2.callback, s5, t2.subscribe));
-    }, this.onProviderRequest = (s5) => {
-      var _a2;
-      if (s5.context !== this.context) return;
-      if (((_a2 = s5.contextTarget) != null ? _a2 : s5.composedPath()[0]) === this.host) return;
-      const e4 = /* @__PURE__ */ new Set();
-      for (const [s6, { consumerHost: i3 }] of this.subscriptions) e4.has(s6) || (e4.add(s6), i3.dispatchEvent(new s(this.context, i3, s6, true)));
-      s5.stopPropagation();
-    }, this.host = s4, void 0 !== e3.context ? this.context = e3.context : this.context = e3, this.attachListeners(), (_b = (_a = this.host).addController) == null ? void 0 : _b.call(_a, this);
-  }
-  attachListeners() {
-    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
-  }
-  hostConnected() {
-    this.host.dispatchEvent(new e(this.context, this.host));
-  }
-};
-
-// node_modules/@lit/context/lib/decorators/provide.js
-function e2({ context: e3 }) {
-  return (n2, i2) => {
-    const r = /* @__PURE__ */ new WeakMap();
-    if ("object" == typeof i2) return { get() {
-      return n2.get.call(this);
-    }, set(t2) {
-      return r.get(this).setValue(t2), n2.set.call(this, t2);
-    }, init(n3) {
-      return r.set(this, new i(this, { context: e3, initialValue: n3 })), n3;
-    } };
-    {
-      n2.constructor.addInitializer((n3) => {
-        r.set(n3, new i(n3, { context: e3 }));
-      });
-      const o = Object.getOwnPropertyDescriptor(n2, i2);
-      let s4;
-      if (void 0 === o) {
-        const t2 = /* @__PURE__ */ new WeakMap();
-        s4 = { get() {
-          return t2.get(this);
-        }, set(e4) {
-          r.get(this).setValue(e4), t2.set(this, e4);
-        }, configurable: true, enumerable: true };
-      } else {
-        const t2 = o.set;
-        s4 = __spreadProps(__spreadValues({}, o), { set(e4) {
-          r.get(this).setValue(e4), t2 == null ? void 0 : t2.call(this, e4);
-        } });
-      }
-      return void Object.defineProperty(n2, i2, s4);
-    }
-  };
-}
-
-// node_modules/@lit/context/lib/decorators/consume.js
-function c({ context: c2, subscribe: e3 }) {
-  return (o, n2) => {
-    "object" == typeof n2 ? n2.addInitializer(function() {
-      new s2(this, { context: c2, callback: (t2) => {
-        o.set.call(this, t2);
-      }, subscribe: e3 });
-    }) : o.constructor.addInitializer((o2) => {
-      new s2(o2, { context: c2, callback: (t2) => {
-        o2[n2] = t2;
-      }, subscribe: e3 });
-    });
-  };
-}
-
-// src/components/table/table.context.ts
-var tableContext = n("table-context");
-
-export {
-  e2 as e,
-  c,
-  tableContext
-};
-/*! Bundled license information:
-
-@lit/context/lib/context-request-event.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/create-context.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/controllers/context-consumer.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/value-notifier.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/controllers/context-provider.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/context-root.js:
-  (**
-   * @license
-   * Copyright 2021 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/decorators/provide.js:
-  (**
-   * @license
-   * Copyright 2017 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-
-@lit/context/lib/decorators/consume.js:
-  (**
-   * @license
-   * Copyright 2022 Google LLC
-   * SPDX-License-Identifier: BSD-3-Clause
-   *)
-*/