@kdcloudjs/shoelace 1.0.49 → 1.0.50

package/dist/chunks/chunk.57VB4U7K.js

@@ -0,0 +1,392 @@
+import {
+  PickerBase
+} from "./chunk.RC4B25HB.js";
+import {
+  SlDatePanel
+} from "./chunk.BPEYF252.js";
+import {
+  SlInput
+} from "./chunk.RYPUFWTD.js";
+import {
+  SlDrawer
+} from "./chunk.FV7WTJDS.js";
+import {
+  SlCalendarPicker,
+  formatDatetime,
+  getTimeColumnsFromFormat,
+  parseDatetime
+} from "./chunk.XMHJORH6.js";
+import {
+  SlButton
+} from "./chunk.64O3HKQJ.js";
+import {
+  SlPopup
+} from "./chunk.BMJNOJA2.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/datepicker/datepicker.component.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+
+// src/components/datepicker/datepicker.style.ts
+import { css } from "lit";
+var datepicker_style_default = css`
+  :host {
+    display: inline-block;
+  }
+
+  .datepicker__popup::part(popup) {
+    z-index: var(--sl-z-index-dropdown, 900);
+  }
+
+  .datepicker__calendar {
+    display: block;
+  }
+`;
+
+// src/components/datepicker/datepicker.component.ts
+var SlDatepicker = class extends PickerBase {
+  constructor() {
+    super(...arguments);
+    this._timeColumns = { showHour: false, showMinute: false, showSecond: false };
+    this.type = "date";
+    this.min = "0001-01-01";
+    this.max = "9999-12-31";
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      if (this.calendar) {
+        this.calendar.resetView();
+      }
+      const { showHour, showMinute, showSecond } = this.getTimeColumns();
+      if (this.type === "datetime" && (showHour || showMinute || showSecond) && this.calendar) {
+        await this.updateComplete;
+        this.calendar.resetTimeScroll("instant");
+      }
+    }
+    if (!this.open) {
+      this.handleValueChange();
+    }
+  }
+  parseValue(value) {
+    const formats = this.getEffectiveFormats();
+    for (const fmt of formats) {
+      const parsed = parseDatetime(value, fmt);
+      if (parsed) return parsed;
+    }
+    return null;
+  }
+  formatValue(date) {
+    const format = this.getDisplayFormat();
+    return formatDatetime(date, format);
+  }
+  /**
+   * 将自定义格式的值转换为标准格式，供 calendar-picker 使用。
+   * calendar-picker 只能解析标准格式（如 YYYY-MM-DD 或 YYYY-MM-DD HH:mm:ss），
+   * 因此需要先 parse 再用标准格式 format。
+   */
+  toCalendarValue(value) {
+    if (!value) return "";
+    const parsed = this.parseValue(value);
+    if (!parsed) return "";
+    return formatDatetime(parsed, this.type);
+  }
+  /** 获取所有有效的格式数组（有自定义 format 时返回 format 数组，否则返回 [type]） */
+  getEffectiveFormats() {
+    if (this.format) {
+      return Array.isArray(this.format) ? this.format : [this.format];
+    }
+    return [this.type];
+  }
+  /** 获取用于显示的格式（第一个格式） */
+  getDisplayFormat() {
+    return this.getEffectiveFormats()[0];
+  }
+  isValidFormat(value) {
+    return this.parseValue(value) !== null;
+  }
+  isValidValue(date) {
+    let isValid = !!date;
+    if (date) {
+      const minDate = this.parseValue(String(this.min));
+      const maxDate = this.parseValue(String(this.max));
+      if (minDate && date < minDate) {
+        isValid = false;
+      }
+      if (maxDate && date > maxDate) {
+        isValid = false;
+      }
+    }
+    return isValid;
+  }
+  getInputPattern() {
+    return this.pattern;
+  }
+  getInputSuffixIconName() {
+    return "calendar4";
+  }
+  /**
+   * 根据显示格式计算时间列可见性
+   */
+  getTimeColumns() {
+    const displayFormat = this.getDisplayFormat();
+    return getTimeColumnsFromFormat(displayFormat);
+  }
+  shouldRevertOnBlur() {
+    const { showHour, showMinute, showSecond } = this.getTimeColumns();
+    return this.type === "datetime" && (showHour || showMinute || showSecond);
+  }
+  async handleInputInput(event) {
+    event.stopPropagation();
+    const target = event.target;
+    const value = target.value;
+    if (this.parseValue(value) || value === "") {
+      this.updateValue(value, { emitInput: true });
+    }
+    await this.updateComplete;
+    if (!this.open && value !== "") {
+      this.open = true;
+    }
+  }
+  handleDateSelect(event) {
+    const selectedDate = event.detail.date;
+    const formattedDate = this.formatValue(selectedDate);
+    this.updateValue(formattedDate, { emitInput: true, emitChange: true });
+    if (this.input) {
+      this.input.focus();
+    }
+    if (!this.isMobile) {
+      this.open = false;
+    }
+  }
+  handleDateChange(event) {
+    const selectedDate = event.detail.date;
+    const formattedDate = this.formatValue(selectedDate);
+    this.updateValue(formattedDate, { emitInput: true, emitChange: false });
+  }
+  blur() {
+    if (this.isMobile && this.open) {
+      return;
+    }
+    super.blur();
+  }
+  handleInputKeyDown(event) {
+    super.handleInputKeyDown(event);
+    if (event.key === "Enter") {
+      const parsedDate = this.parseValue(this.value);
+      const isValid = this.isValidValue(parsedDate);
+      if (!isValid) {
+        return;
+      }
+      if (this.open && this.calendar) {
+        event.stopPropagation();
+        this.calendar.handleKeyDown(event);
+        return;
+      }
+      if (parsedDate) {
+        const formattedDate = this.formatValue(parsedDate);
+        this.updateValue(formattedDate, { emitChange: true });
+        this.open = false;
+      }
+    }
+  }
+  handleValueChange() {
+    const validDate = this.parseValue(this.value);
+    const isValid = this.isValidValue(validDate);
+    if (!this.open || (this.type === "date" || this.type === "year" || this.type === "month") && !this.isMobile) {
+      if (validDate && isValid) {
+        const formattedDate = this.formatValue(validDate);
+        this.lastValidValue = formattedDate;
+      } else if (this.value === "") {
+        this.lastValidValue = "";
+      }
+    }
+    if (!this.value) {
+      if (this.calendar) {
+        this.calendar.value = "";
+      }
+      return;
+    }
+    if (!this.calendar || !isValid || !this.input) {
+      return;
+    }
+    this.formControlController.updateValidity();
+    if (this.valueChangeDebounceTimer) {
+      window.clearTimeout(this.valueChangeDebounceTimer);
+    }
+    this.valueChangeDebounceTimer = window.setTimeout(() => {
+      if (validDate) {
+        this.calendar.value = this.toCalendarValue(this.value);
+      }
+      this.valueChangeDebounceTimer = void 0;
+    }, 300);
+  }
+  renderCalendar() {
+    this._timeColumns = this.getTimeColumns();
+    return html`
+      <sl-calendar-picker
+        part="calendar"
+        exportparts="
+          base:calendar-base,
+          header:calendar-header,
+          nav-button:calendar-nav-button,
+          title:calendar-title,
+          title-year:calendar-title-year,
+          title-month:calendar-title-month,
+          body:calendar-body,
+          date-panel:calendar-date-panel,
+          day-header:calendar-day-header,
+          day:calendar-day,
+          day-footer:calendar-day-footer,
+          month-grid:calendar-month-grid,
+          month-item:calendar-month-item,
+          year-grid:calendar-year-grid,
+          year-item:calendar-year-item,
+          time-panel-base: calendar-time-base,
+          time-panel-header: calendar-time-header,
+          time-panel-columns: calendar-time-columns,
+          time-panel-column: calendar-time-column,
+          time-panel-item: calendar-time-item,
+        "
+        class="datepicker__calendar"
+        .value=${this.toCalendarValue(this.value) || this.toCalendarValue(this.lastValidValue)}
+        type=${this.type}
+        .showHour=${this._timeColumns.showHour}
+        .showMinute=${this._timeColumns.showMinute}
+        .showSecond=${this._timeColumns.showSecond}
+        min=${this.min}
+        max=${this.max}
+        @sl-date-select=${this.handleDateSelect}
+        @sl-date-change=${this.handleDateChange}
+        @click=${(event) => event.stopPropagation()}
+      ></sl-calendar-picker>
+    `;
+  }
+  renderPopup() {
+    return html`
+      <sl-popup
+        part="popup"
+        class="datepicker__popup"
+        ?active=${this.open}
+        strategy=${this.hoist ? "fixed" : "absolute"}
+        flip
+        shift
+        placement="bottom-start"
+        auto-size="vertical"
+        auto-size-padding="10"
+      >
+        ${this.renderInput("anchor")} ${this.renderCalendar()}
+      </sl-popup>
+    `;
+  }
+  render() {
+    if (this.isMobile) {
+      return html`
+        ${this.renderInput()}
+        <sl-date-panel
+          exportparts="
+            calendar-base,
+            calendar-header,
+            calendar-nav-button,
+            calendar-title,
+            calendar-title-year,
+            calendar-title-month,
+            calendar-body,
+            calendar-date-panel,
+            calendar-day-header,
+            calendar-day,
+            calendar-day-footer,
+            calendar-month-grid,
+            calendar-month-item,
+            calendar-year-grid,
+            calendar-year-item,
+            calendar-time-footer,
+            time-panel-base,
+            time-panel-header,
+            time-panel-margin-cell-first,
+            time-panel-margin-cell,
+            time-panel-columns,
+            time-panel-column,
+            time-panel-hour,
+            time-panel-minute,
+            time-panel-second,
+            time-panel-item,
+            time-panel-footer
+          "
+          .value=${this.value}
+          .open=${this.open}
+          .min=${this.min}
+          .max=${this.max}
+          .type=${this.type}
+          .format=${this.getDisplayFormat()}
+          @sl-date-select=${this.handleDateSelect}
+          @sl-date-change=${this.handleDateChange}
+          @sl-confirm=${this.handleMobileConfirm}
+          @sl-cancel=${this.handleMobileCancel}
+          @sl-clear=${this.handleMobileClear}
+        ></sl-date-panel>
+      `;
+    }
+    return this.renderPopup();
+  }
+};
+SlDatepicker.styles = [component_styles_default, datepicker_style_default];
+SlDatepicker.dependencies = {
+  "sl-button": SlButton,
+  "sl-calendar-picker": SlCalendarPicker,
+  "sl-date-panel": SlDatePanel,
+  "sl-drawer": SlDrawer,
+  "sl-popup": SlPopup,
+  "sl-input": SlInput
+};
+__decorateClass([
+  query("sl-calendar-picker")
+], SlDatepicker.prototype, "calendar", 2);
+__decorateClass([
+  state()
+], SlDatepicker.prototype, "valueChangeDebounceTimer", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlDatepicker.prototype, "type", 2);
+__decorateClass([
+  property({
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) return void 0;
+        return value.split(",").map((f) => f.trim());
+      },
+      toAttribute: (value) => {
+        if (!value) return null;
+        if (Array.isArray(value)) return value.join(",");
+        return value;
+      }
+    }
+  })
+], SlDatepicker.prototype, "format", 2);
+__decorateClass([
+  property()
+], SlDatepicker.prototype, "pattern", 2);
+__decorateClass([
+  property()
+], SlDatepicker.prototype, "min", 2);
+__decorateClass([
+  property()
+], SlDatepicker.prototype, "max", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlDatepicker.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("value")
+], SlDatepicker.prototype, "handleValueChange", 1);
+
+export {
+  SlDatepicker
+};

package/dist/chunks/chunk.5D7A6ABR.js

@@ -0,0 +1,11 @@
+import {
+  SlDialog
+} from "./chunk.7Z6NSFO3.js";
+
+// src/components/dialog/dialog.ts
+var dialog_default = SlDialog;
+SlDialog.define("sl-dialog");
+
+export {
+  dialog_default
+};

package/dist/chunks/chunk.5DIPM3AI.js

@@ -0,0 +1,27 @@
+import {
+  SlDetails
+} from "./chunk.WYR76H5S.js";
+
+// src/react/details/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-details";
+SlDetails.define("sl-details");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlDetails,
+  react: React,
+  events: {
+    onSlShow: "sl-show",
+    onSlAfterShow: "sl-after-show",
+    onSlHide: "sl-hide",
+    onSlAfterHide: "sl-after-hide"
+  },
+  displayName: "SlDetails"
+});
+var details_default = reactWrapper;
+
+export {
+  details_default
+};

package/dist/chunks/chunk.5LWQQ2P6.js

@@ -0,0 +1,25 @@
+import {
+  SlTabGroup
+} from "./chunk.MRNFJSND.js";
+
+// src/react/tab-group/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-tab-group";
+SlTabGroup.define("sl-tab-group");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlTabGroup,
+  react: React,
+  events: {
+    onSlTabShow: "sl-tab-show",
+    onSlTabHide: "sl-tab-hide"
+  },
+  displayName: "SlTabGroup"
+});
+var tab_group_default = reactWrapper;
+
+export {
+  tab_group_default
+};

package/dist/chunks/chunk.5NMZPYHY.js

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

package/dist/chunks/chunk.5PXHZTW5.js

@@ -0,0 +1,11 @@
+import {
+  SlProgressRing
+} from "./chunk.KPDMETXN.js";
+
+// src/components/progress-ring/progress-ring.ts
+var progress_ring_default = SlProgressRing;
+SlProgressRing.define("sl-progress-ring");
+
+export {
+  progress_ring_default
+};

package/dist/chunks/chunk.5QNVSX6H.js

@@ -0,0 +1,32 @@
+import {
+  SlCascader
+} from "./chunk.TTZUHZOS.js";
+
+// src/react/cascader/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-cascader";
+SlCascader.define("sl-cascader");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlCascader,
+  react: React,
+  events: {
+    onSlChange: "sl-change",
+    onSlClear: "sl-clear",
+    onSlInput: "sl-input",
+    onSlFocus: "sl-focus",
+    onSlBlur: "sl-blur",
+    onSlShow: "sl-show",
+    onSlAfterShow: "sl-after-show",
+    onSlHide: "sl-hide",
+    onSlAfterHide: "sl-after-hide"
+  },
+  displayName: "SlCascader"
+});
+var cascader_default = reactWrapper;
+
+export {
+  cascader_default
+};

package/dist/chunks/chunk.5SARMXGP.js

@@ -0,0 +1,29 @@
+import {
+  SlDatepicker
+} from "./chunk.57VB4U7K.js";
+
+// src/react/datepicker/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-datepicker";
+SlDatepicker.define("sl-datepicker");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlDatepicker,
+  react: React,
+  events: {
+    onSlBlur: "sl-blur",
+    onSlChange: "sl-change",
+    onSlFocus: "sl-focus",
+    onSlInput: "sl-input",
+    onSlInvalid: "sl-invalid",
+    onSlClear: "sl-clear"
+  },
+  displayName: "SlDatepicker"
+});
+var datepicker_default = reactWrapper;
+
+export {
+  datepicker_default
+};

package/dist/chunks/chunk.5UPHKVK6.js

@@ -0,0 +1,11 @@
+import {
+  SlCopyButton
+} from "./chunk.4FRNETJ4.js";
+
+// src/components/copy-button/copy-button.ts
+var copy_button_default = SlCopyButton;
+SlCopyButton.define("sl-copy-button");
+
+export {
+  copy_button_default
+};