@kdcloudjs/shoelace 1.0.38 → 1.0.39

package/dist/chunks/chunk.OOUWNKKR.js

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

package/dist/chunks/chunk.OOVE6ZHU.js

@@ -0,0 +1,50 @@
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  ShoelaceElement
+} from "./chunk.7KYGZCEZ.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/format-bytes/format-bytes.component.ts
+import { property } from "lit/decorators.js";
+var SlFormatBytes = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.value = 0;
+    this.unit = "byte";
+    this.display = "short";
+  }
+  render() {
+    if (isNaN(this.value)) {
+      return "";
+    }
+    const bitPrefixes = ["", "kilo", "mega", "giga", "tera"];
+    const bytePrefixes = ["", "kilo", "mega", "giga", "tera", "peta"];
+    const prefix = this.unit === "bit" ? bitPrefixes : bytePrefixes;
+    const index = Math.max(0, Math.min(Math.floor(Math.log10(this.value) / 3), prefix.length - 1));
+    const unit = prefix[index] + this.unit;
+    const valueToFormat = parseFloat((this.value / Math.pow(1e3, index)).toPrecision(3));
+    return this.localize.number(valueToFormat, {
+      style: "unit",
+      unit,
+      unitDisplay: this.display
+    });
+  }
+};
+__decorateClass([
+  property({ type: Number })
+], SlFormatBytes.prototype, "value", 2);
+__decorateClass([
+  property()
+], SlFormatBytes.prototype, "unit", 2);
+__decorateClass([
+  property()
+], SlFormatBytes.prototype, "display", 2);
+
+export {
+  SlFormatBytes
+};

package/dist/chunks/chunk.OPHWNCAP.js

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

package/dist/chunks/chunk.OQY2WME5.js

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

package/dist/chunks/chunk.OSHXB7QL.js

@@ -0,0 +1,24 @@
+import {
+  SlFloatButton
+} from "./chunk.L4M74QHD.js";
+
+// src/react/float-button/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-float-button";
+SlFloatButton.define("sl-float-button");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlFloatButton,
+  react: React,
+  events: {
+    onSlClick: "sl-click"
+  },
+  displayName: "SlFloatButton"
+});
+var float_button_default = reactWrapper;
+
+export {
+  float_button_default
+};

package/dist/chunks/chunk.OT7SZ2PL.js

@@ -0,0 +1,188 @@
+import {
+  pagination_styles_default
+} from "./chunk.TSVNQWUW.js";
+import {
+  SlIcon
+} from "./chunk.6CFYPOVU.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.7KYGZCEZ.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/pagination/pagination.component.ts
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+var SlPagination = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.pageSize = 20;
+    this.pageSizeOpts = [10, 20, 50, 100];
+    this.total = 5e3;
+    this.disabled = false;
+    this.className = "";
+    this.simpleMode = false;
+    this.direction = "ltr";
+    this.defaultCurrentPage = 1;
+    this.totalPage = 1;
+  }
+  willUpdate(changed) {
+    if (changed.has("total") || changed.has("pageSize")) {
+      this.totalPage = Math.max(1, Math.ceil(this.total / this.pageSize));
+      if (this.defaultCurrentPage > this.totalPage) {
+        this.defaultCurrentPage = this.totalPage;
+      }
+    }
+  }
+  handleInputChange(e) {
+    const input = e.target;
+    const value = input.value;
+    if (value === "") {
+      return;
+    }
+    const num = Number(value);
+    if (!Number.isNaN(num)) {
+      this.defaultCurrentPage = num;
+    }
+  }
+  handlePageChangePage(page) {
+    if (this.disabled) return;
+    const newPage = Math.min(Math.max(1, page), this.totalPage);
+    this.defaultCurrentPage = newPage;
+    this.emit("sl-page-change", {
+      detail: {
+        pageNumber: page,
+        pageSize: this.pageSize
+      }
+    });
+  }
+  handlePageSizeChange(e) {
+    this.pageSize = Number(e.detail);
+    let page = this.currentPage ? this.currentPage : this.defaultCurrentPage;
+    const totalPage = Math.max(1, Math.ceil(this.total / this.pageSize));
+    if (page > totalPage) page = totalPage;
+    this.defaultCurrentPage = page;
+    this.emit("sl-page-change", {
+      detail: {
+        pageNumber: page,
+        pageSize: this.pageSize
+      }
+    });
+  }
+  render() {
+    const page = this.currentPage ? this.currentPage : this.defaultCurrentPage;
+    const isRtl = this.direction === "rtl";
+    const prevIcon = isRtl ? "chevron-right" : "chevron-left";
+    const nextIcon = isRtl ? "chevron-left" : "chevron-right";
+    const firstIcon = isRtl ? "chevron-bar-right" : "chevron-bar-left";
+    const lastIcon = isRtl ? "chevron-bar-left" : "chevron-bar-right";
+    return this.simpleMode ? html`
+          <div class="pagination ${this.className}">
+            <sl-icon
+              name=${prevIcon}
+              class="page-btn ${page === 1 || this.disabled ? "page-btn--disabled" : ""}"
+              @click=${() => page !== 1 && this.handlePageChangePage(page - 1)}
+            ></sl-icon>
+            <sl-icon
+              name=${nextIcon}
+              class="page-btn ${page === this.totalPage || this.disabled ? "page-btn--disabled" : ""}"
+              @click=${() => page !== this.totalPage && this.handlePageChangePage(page + 1)}
+            ></sl-icon>
+            <custom-select
+              .options=${this.pageSizeOpts}
+              .selected=${this.pageSizeOpts.includes(this.pageSize) ? this.pageSize : 20}
+              .disabled=${this.disabled}
+              @select-change=${this.handlePageSizeChange}
+            >
+            </custom-select>
+          </div>
+        ` : html`
+          <div class="pagination ${this.className}">
+            <div class="page-info">
+              <span class="total">共${this.totalPage}页</span>
+              第
+              <input
+                class="page-input"
+                type="string"
+                .value=${String(page)}
+                min="1"
+                max=${this.total}
+                @input=${this.handleInputChange}
+                @change=${() => this.handlePageChangePage(this.defaultCurrentPage)}
+                ?disabled=${this.disabled}
+              />
+              页
+            </div>
+            <div class="page-btns">
+              <sl-icon
+                name=${firstIcon}
+                class="page-btn ${page === 1 || this.disabled ? "page-btn--disabled" : ""}"
+                @click=${() => page !== 1 && this.handlePageChangePage(1)}
+              ></sl-icon>
+              <sl-icon
+                name=${prevIcon}
+                class="page-btn ${page === 1 || this.disabled ? "page-btn--disabled" : ""}"
+                @click=${() => page !== 1 && this.handlePageChangePage(page - 1)}
+              ></sl-icon>
+              <sl-icon
+                name=${nextIcon}
+                class="page-btn ${page === this.totalPage || this.disabled ? "page-btn--disabled" : ""}"
+                @click=${() => page !== this.totalPage && this.handlePageChangePage(page + 1)}
+              ></sl-icon>
+              <sl-icon
+                name=${lastIcon}
+                class="page-btn ${page === this.totalPage || this.disabled ? "page-btn--disabled" : ""}"
+                @click=${() => page !== this.totalPage && this.handlePageChangePage(this.totalPage)}
+              ></sl-icon>
+            </div>
+            <custom-select
+              .options=${this.pageSizeOpts}
+              .selected=${this.pageSizeOpts.includes(this.pageSize) ? this.pageSize : 20}
+              .disabled=${this.disabled}
+              @select-change=${this.handlePageSizeChange}
+            >
+            </custom-select>
+          </div>
+        `;
+  }
+};
+SlPagination.styles = [component_styles_default, pagination_styles_default];
+SlPagination.dependencies = { "sl-icon": SlIcon };
+__decorateClass([
+  property({ type: Number })
+], SlPagination.prototype, "currentPage", 2);
+__decorateClass([
+  property({ type: Number })
+], SlPagination.prototype, "pageSize", 2);
+__decorateClass([
+  property({ type: Array })
+], SlPagination.prototype, "pageSizeOpts", 2);
+__decorateClass([
+  property({ type: Number })
+], SlPagination.prototype, "total", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlPagination.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String })
+], SlPagination.prototype, "className", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlPagination.prototype, "simpleMode", 2);
+__decorateClass([
+  property({ type: String })
+], SlPagination.prototype, "direction", 2);
+__decorateClass([
+  property({ type: Number })
+], SlPagination.prototype, "defaultCurrentPage", 2);
+__decorateClass([
+  state()
+], SlPagination.prototype, "totalPage", 2);
+
+export {
+  SlPagination
+};

package/dist/chunks/chunk.OTZKUNBI.js

@@ -0,0 +1,147 @@
+import {
+  option_styles_default
+} from "./chunk.L7RFQDK6.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.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/option/option.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+var SlOption = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    // @ts-expect-error - Controller is currently unused
+    this.localize = new LocalizeController(this);
+    this.isInitialized = false;
+    this.current = false;
+    this.selected = false;
+    this.hasHover = false;
+    this.value = "";
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "option");
+    this.setAttribute("aria-selected", "false");
+  }
+  handleDefaultSlotChange() {
+    if (this.isInitialized) {
+      customElements.whenDefined("sl-select").then(() => {
+        const controller = this.closest("sl-select");
+        if (controller) {
+          controller.handleDefaultSlotChange();
+        }
+      });
+    } else {
+      this.isInitialized = true;
+    }
+  }
+  handleMouseEnter() {
+    this.hasHover = true;
+  }
+  handleMouseLeave() {
+    this.hasHover = false;
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleSelectedChange() {
+    this.setAttribute("aria-selected", this.selected ? "true" : "false");
+  }
+  handleValueChange() {
+    if (typeof this.value !== "string") {
+      this.value = String(this.value);
+    }
+    if (this.value.includes(" ")) {
+      console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
+      this.value = this.value.replace(/ /g, "_");
+    }
+  }
+  /** Returns a plain text label based on the option's content. */
+  getTextLabel() {
+    const nodes = this.childNodes;
+    let label = "";
+    [...nodes].forEach((node) => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        if (!node.hasAttribute("slot")) {
+          label += node.textContent;
+        }
+      }
+      if (node.nodeType === Node.TEXT_NODE) {
+        label += node.textContent;
+      }
+    });
+    return label.trim();
+  }
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+      option: true,
+      "option--current": this.current,
+      "option--disabled": this.disabled,
+      "option--selected": this.selected,
+      "option--hover": this.hasHover
+    })}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        <sl-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></sl-icon>
+        <slot part="prefix" name="prefix" class="option__prefix"></slot>
+        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        <slot part="suffix" name="suffix" class="option__suffix"></slot>
+      </div>
+    `;
+  }
+};
+SlOption.styles = [component_styles_default, option_styles_default];
+SlOption.dependencies = { "sl-icon": SlIcon };
+__decorateClass([
+  query(".option__label")
+], SlOption.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], SlOption.prototype, "current", 2);
+__decorateClass([
+  state()
+], SlOption.prototype, "selected", 2);
+__decorateClass([
+  state()
+], SlOption.prototype, "hasHover", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlOption.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlOption.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled")
+], SlOption.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch("selected")
+], SlOption.prototype, "handleSelectedChange", 1);
+__decorateClass([
+  watch("value")
+], SlOption.prototype, "handleValueChange", 1);
+
+export {
+  SlOption
+};

package/dist/chunks/chunk.OU677MGP.js

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