@kdcloudjs/shoelace 1.0.50 → 1.0.52

package/dist/chunks/chunk.M2IHOV63.js

@@ -0,0 +1,234 @@
+import {
+  time_panel_styles_default
+} from "./chunk.V6H6NNYA.js";
+import {
+  SlButton
+} from "./chunk.YIZ5SSNG.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.735URR7H.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/time-panel/time-panel.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+var locale = {
+  confirmText: "\u786E\u5B9A"
+};
+var SlTimePanel = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.value = null;
+    this.noHeader = false;
+    this.withFooter = false;
+    this.showHour = true;
+    this.showMinute = true;
+    this.showSecond = true;
+    this.isTimeUpdating = false;
+  }
+  async handleValueChange() {
+    if (this.value && !this.isTimeUpdating) {
+      await this.updateComplete;
+      if (this.showHour) this.scrollToTime("hour", "instant");
+      if (this.showMinute) this.scrollToTime("minute", "instant");
+      if (this.showSecond) this.scrollToTime("second", "instant");
+    }
+  }
+  async resetScroll(behavior = "auto") {
+    var _a;
+    await this.updateComplete;
+    if (this.value) {
+      if (this.showHour) this.scrollToTime("hour", behavior);
+      if (this.showMinute) this.scrollToTime("minute", behavior);
+      if (this.showSecond) this.scrollToTime("second", behavior);
+    } else {
+      const columns = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".timepicker__column");
+      columns == null ? void 0 : columns.forEach((col) => col.scrollTo({ top: 0, behavior }));
+    }
+  }
+  padStart(num, length = 2) {
+    return String(num).padStart(length, "0");
+  }
+  scrollToTime(part, behavior = "smooth") {
+    var _a;
+    const column = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(`.timepicker__column[part~="${part}"]`);
+    if (!column) return;
+    const selectedItem = column.querySelector(`.timepicker__item--selected`);
+    if (selectedItem) {
+      const columnRect = column.getBoundingClientRect();
+      const itemRect = selectedItem.getBoundingClientRect();
+      const offset = itemRect.top - columnRect.top;
+      const targetScrollTop = column.scrollTop + offset;
+      column.scrollTo({
+        top: Math.max(0, targetScrollTop),
+        behavior
+      });
+    }
+  }
+  async updateTime(part, val) {
+    let base = this.value ? new Date(this.value) : /* @__PURE__ */ new Date();
+    if (!this.value) {
+      const today = /* @__PURE__ */ new Date();
+      base = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
+    }
+    if (part === "hour") {
+      base.setHours(val);
+    } else if (part === "minute") {
+      base.setMinutes(val);
+    } else if (part === "second") {
+      base.setSeconds(val);
+    }
+    this.isTimeUpdating = true;
+    this.value = base;
+    this.emit("sl-change", {
+      detail: { value: base, column: part }
+    });
+    await this.updateComplete;
+    this.scrollToTime(part, "smooth");
+    setTimeout(() => {
+      this.isTimeUpdating = false;
+    }, 0);
+  }
+  render() {
+    const activeDate = this.value ? new Date(this.value) : null;
+    const activeHour = activeDate ? activeDate.getHours() : null;
+    const activeMinute = activeDate ? activeDate.getMinutes() : null;
+    const activeSecond = activeDate ? activeDate.getSeconds() : null;
+    const hours = Array.from({ length: 24 }, (_, index) => index);
+    const minutes = Array.from({ length: 60 }, (_, index) => index);
+    const seconds = Array.from({ length: 60 }, (_, index) => index);
+    return html`
+      <div class="timepicker" part="base">
+        ${!this.noHeader ? html`
+              <div class="timepicker__header" part="header">
+                ${this.showHour ? html`<span class="timepicker__header-item">
+                      ${activeHour !== null ? this.padStart(activeHour) : "--"}
+                    </span>` : ""}
+                ${this.showHour && this.showMinute ? html`<span class="timepicker__header-separator">:</span>` : ""}
+                ${this.showMinute ? html`<span class="timepicker__header-item">
+                      ${activeMinute !== null ? this.padStart(activeMinute) : "--"}
+                    </span>` : ""}
+                ${(this.showHour || this.showMinute) && this.showSecond ? html`<span class="timepicker__header-separator">:</span>` : ""}
+                ${this.showSecond ? html`<span class="timepicker__header-item">
+                      ${activeSecond !== null ? this.padStart(activeSecond) : "--"}
+                    </span>` : ""}
+              </div>
+            ` : ""}
+        <div class="timepicker__margin">
+          <div part="margin-cell-first"></div>
+          ${this.showMinute ? html`<div part="margin-cell"></div>` : ""}
+          ${this.showSecond ? html`<div part="margin-cell"></div>` : ""}
+        </div>
+        <div class="timepicker__columns" part="columns">
+          ${this.showHour ? html`
+                <div class="timepicker__column" part="column hour">
+                  ${hours.map(
+      (hour) => html`
+                      <div
+                        class="timepicker__item ${classMap({
+        "timepicker__item--selected": hour === activeHour
+      })}"
+                        part="item hour"
+                        @click="${() => this.updateTime("hour", hour)}"
+                      >
+                        ${this.padStart(hour)}
+                      </div>
+                    `
+    )}
+                  <div class="timepicker__pad"></div>
+                </div>
+              ` : ""}
+          ${this.showMinute ? html`
+                <div class="timepicker__column" part="column minute">
+                  ${minutes.map(
+      (minute) => html`
+                      <div
+                        class="timepicker__item ${classMap({
+        "timepicker__item--selected": minute === activeMinute
+      })}"
+                        part="item minute"
+                        @click="${() => this.updateTime("minute", minute)}"
+                      >
+                        ${this.padStart(minute)}
+                      </div>
+                    `
+    )}
+                  <div class="timepicker__pad"></div>
+                </div>
+              ` : ""}
+          ${this.showSecond ? html`
+                <div class="timepicker__column" part="column second">
+                  ${seconds.map(
+      (second) => html`
+                      <div
+                        class="timepicker__item ${classMap({
+        "timepicker__item--selected": second === activeSecond
+      })}"
+                        part="item second"
+                        @click="${() => this.updateTime("second", second)}"
+                      >
+                        ${this.padStart(second)}
+                      </div>
+                    `
+    )}
+                  <div class="timepicker__pad"></div>
+                </div>
+              ` : ""}
+        </div>
+
+        ${this.withFooter ? html`
+              <div class="timepicker__footer" part="footer">
+                <sl-button
+                  size="small"
+                  variant="primary"
+                  @click=${() => {
+      this.emit("sl-select", { detail: { value: this.value } });
+    }}
+                >
+                  ${locale.confirmText}
+                </sl-button>
+              </div>
+            ` : ""}
+      </div>
+    `;
+  }
+};
+SlTimePanel.styles = [component_styles_default, time_panel_styles_default];
+SlTimePanel.dependencies = { "sl-button": SlButton };
+__decorateClass([
+  property({ attribute: false })
+], SlTimePanel.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "no-header" })
+], SlTimePanel.prototype, "noHeader", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "with-footer" })
+], SlTimePanel.prototype, "withFooter", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-hour" })
+], SlTimePanel.prototype, "showHour", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-minute" })
+], SlTimePanel.prototype, "showMinute", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-second" })
+], SlTimePanel.prototype, "showSecond", 2);
+__decorateClass([
+  state()
+], SlTimePanel.prototype, "isTimeUpdating", 2);
+__decorateClass([
+  watch("value")
+], SlTimePanel.prototype, "handleValueChange", 1);
+
+export {
+  SlTimePanel
+};

package/dist/chunks/chunk.M5XHYZSQ.js

@@ -0,0 +1,125 @@
+import {
+  thought_chain_styles_default
+} from "./chunk.3NUDKZJS.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.735URR7H.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/thought-chain/thought-chain.component.ts
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+var SlThoughtChain = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.size = "middle";
+    this.line = true;
+    this.defaultExpandedKeys = [];
+    this.internalExpandedKeys = [];
+    this.hasInitialized = false;
+  }
+  firstUpdated() {
+    if (!this.hasInitialized) {
+      this.internalExpandedKeys = [...this.defaultExpandedKeys];
+      this.hasInitialized = true;
+    }
+    this.updateChildNodes();
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("line") || changedProperties.has("size") || changedProperties.has("expandedKeys") || changedProperties.has("internalExpandedKeys") || changedProperties.has("defaultExpandedKeys")) {
+      this.updateChildNodes();
+    }
+  }
+  /** Get the effective expanded keys */
+  getExpandedKeys() {
+    var _a;
+    return (_a = this.expandedKeys) != null ? _a : this.internalExpandedKeys;
+  }
+  /** Normalize line value to a consistent CSS-friendly string */
+  getLineStyleValue() {
+    const line = this.line;
+    if (line === false) return "none";
+    if (line === true || line === "solid") return "solid";
+    return line;
+  }
+  /** Propagate context to child sl-thought-chain-node elements */
+  async updateChildNodes() {
+    await customElements.whenDefined("sl-thought-chain-node");
+    const nodes = this.querySelectorAll(":scope > sl-thought-chain-node");
+    const expandedKeys = this.getExpandedKeys();
+    const total = nodes.length;
+    const lineStyleValue = this.getLineStyleValue();
+    nodes.forEach((node, index) => {
+      node._lineStyle = lineStyleValue;
+      node._isLast = index === total - 1;
+      node._index = index;
+      node._size = this.size;
+      node._expandedKeys = expandedKeys;
+      node._onExpand = (key) => this.handleItemExpand(key);
+    });
+  }
+  /** Handle slot changes to update newly added nodes */
+  handleSlotChange() {
+    this.updateChildNodes();
+  }
+  /** Handle expand/collapse toggle from child node */
+  handleItemExpand(key) {
+    const currentKeys = this.getExpandedKeys();
+    const isExpanded = currentKeys.includes(key);
+    const newKeys = isExpanded ? currentKeys.filter((k) => k !== key) : [...currentKeys, key];
+    if (this.expandedKeys === void 0) {
+      this.internalExpandedKeys = newKeys;
+    }
+    this.emit("sl-expand", {
+      detail: { key, expandedKeys: newKeys }
+    });
+  }
+  render() {
+    return html`
+      <div part="base" class="thought-chain">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+};
+SlThoughtChain.styles = [component_styles_default, thought_chain_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], SlThoughtChain.prototype, "size", 2);
+__decorateClass([
+  property({
+    reflect: true,
+    converter: {
+      fromAttribute(value) {
+        if (value === null || value === "true" || value === "") return true;
+        if (value === "false" || value === "none") return false;
+        if (value === "solid" || value === "dashed" || value === "dotted") return value;
+        return true;
+      },
+      toAttribute(value) {
+        if (value === true) return "true";
+        if (value === false) return "none";
+        return String(value);
+      }
+    }
+  })
+], SlThoughtChain.prototype, "line", 2);
+__decorateClass([
+  property({ attribute: "default-expanded-keys", type: Array })
+], SlThoughtChain.prototype, "defaultExpandedKeys", 2);
+__decorateClass([
+  property({ attribute: "expanded-keys", type: Array })
+], SlThoughtChain.prototype, "expandedKeys", 2);
+__decorateClass([
+  state()
+], SlThoughtChain.prototype, "internalExpandedKeys", 2);
+
+export {
+  SlThoughtChain
+};