@kdcloudjs/shoelace 1.0.13 → 1.0.14

package/dist/chunks/chunk.QRQNWKCY.js

@@ -0,0 +1,75 @@
+import {
+  include_styles_default
+} from "./chunk.FY7IKLNL.js";
+import {
+  requestInclude
+} from "./chunk.XNEONNEJ.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.AFYNEPK3.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/include/include.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var SlInclude = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "cors";
+    this.allowScripts = false;
+  }
+  executeScript(script) {
+    const newScript = document.createElement("script");
+    [...script.attributes].forEach((attr) => newScript.setAttribute(attr.name, attr.value));
+    newScript.textContent = script.textContent;
+    script.parentNode.replaceChild(newScript, script);
+  }
+  async handleSrcChange() {
+    try {
+      const src = this.src;
+      const file = await requestInclude(src, this.mode);
+      if (src !== this.src) {
+        return;
+      }
+      if (!file.ok) {
+        this.emit("sl-error", { detail: { status: file.status } });
+        return;
+      }
+      this.innerHTML = file.html;
+      if (this.allowScripts) {
+        [...this.querySelectorAll("script")].forEach((script) => this.executeScript(script));
+      }
+      this.emit("sl-load");
+    } catch (e) {
+      this.emit("sl-error", { detail: { status: -1 } });
+    }
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+SlInclude.styles = [component_styles_default, include_styles_default];
+__decorateClass([
+  property()
+], SlInclude.prototype, "src", 2);
+__decorateClass([
+  property()
+], SlInclude.prototype, "mode", 2);
+__decorateClass([
+  property({ attribute: "allow-scripts", type: Boolean })
+], SlInclude.prototype, "allowScripts", 2);
+__decorateClass([
+  watch("src")
+], SlInclude.prototype, "handleSrcChange", 1);
+
+export {
+  SlInclude
+};

package/dist/chunks/chunk.R6MBATBE.js

@@ -0,0 +1,11 @@
+import {
+  SlScreen
+} from "./chunk.KYH3L6IW.js";
+
+// src/components/screen/screen.ts
+var screen_default = SlScreen;
+SlScreen.define("sl-screen");
+
+export {
+  screen_default
+};

package/dist/chunks/chunk.RBKIJMEU.js

@@ -0,0 +1,11 @@
+import {
+  SlIconButton
+} from "./chunk.M77FW2XO.js";
+
+// src/components/icon-button/icon-button.ts
+var icon_button_default = SlIconButton;
+SlIconButton.define("sl-icon-button");
+
+export {
+  icon_button_default
+};

package/dist/chunks/chunk.RCTZNTPH.js

@@ -0,0 +1,80 @@
+import {
+  resize_observer_styles_default
+} from "./chunk.5VKIB4HA.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.AFYNEPK3.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/resize-observer/resize-observer.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var SlResizeObserver = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.observedElements = [];
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver((entries) => {
+      this.emit("sl-resize", { detail: { entries } });
+    });
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.stopObserver();
+  }
+  handleSlotChange() {
+    if (!this.disabled) {
+      this.startObserver();
+    }
+  }
+  startObserver() {
+    const slot = this.shadowRoot.querySelector("slot");
+    if (slot !== null) {
+      const elements = slot.assignedElements({ flatten: true });
+      this.observedElements.forEach((el) => this.resizeObserver.unobserve(el));
+      this.observedElements = [];
+      elements.forEach((el) => {
+        this.resizeObserver.observe(el);
+        this.observedElements.push(el);
+      });
+    }
+  }
+  stopObserver() {
+    this.resizeObserver.disconnect();
+  }
+  handleDisabledChange() {
+    if (this.disabled) {
+      this.stopObserver();
+    } else {
+      this.startObserver();
+    }
+  }
+  render() {
+    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;
+  }
+};
+SlResizeObserver.styles = [component_styles_default, resize_observer_styles_default];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlResizeObserver.prototype, "disabled", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SlResizeObserver.prototype, "handleDisabledChange", 1);
+
+export {
+  SlResizeObserver
+};

package/dist/chunks/chunk.RLVSTNCZ.js

@@ -0,0 +1,132 @@
+import {
+  nav_styles_default
+} from "./chunk.LE3RS4K3.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.AFYNEPK3.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/nav/nav.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property, query } from "lit/decorators.js";
+var SlNav = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.mode = "vertical";
+    this.handleNavSelect = (event) => {
+      const item = event.detail.item;
+      const previousActive = this.activeItem;
+      const valueChanged = this.value !== item.value;
+      this.value = item.value;
+      this.updateActiveItemFromValue(item);
+      if (valueChanged || previousActive !== item) {
+        this.emit("sl-change");
+      }
+    };
+    this.handleSlotChange = () => {
+      this.updateActiveItemFromValue();
+      this.updateMode();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("sl-nav-select", this.handleNavSelect);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("sl-nav-select", this.handleNavSelect);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("value")) {
+      this.updateActiveItem();
+    }
+    if (changedProperties.has("mode")) {
+      this.updateMode();
+    }
+  }
+  updateActiveItem() {
+    this.updateActiveItemFromValue();
+  }
+  updateMode() {
+    const elements = [...this.querySelectorAll("sl-nav-item, sl-nav-group, sl-nav-submenu")];
+    elements.forEach((el) => {
+      const closestSubmenu = el.closest("sl-nav-submenu");
+      if (closestSubmenu && closestSubmenu !== el) {
+        el.mode = "vertical";
+      } else {
+        el.mode = this.mode;
+      }
+    });
+  }
+  getItems() {
+    return [...this.querySelectorAll("sl-nav-item")];
+  }
+  setActiveItem(item) {
+    if (this.activeItem && this.activeItem !== item) {
+      this.activeItem.active = false;
+    }
+    if (item) {
+      item.active = true;
+    }
+    this.activeItem = item;
+  }
+  updateActiveItemFromValue(selectedItem) {
+    const items = this.getItems();
+    const groups = [...this.querySelectorAll("sl-nav-group")];
+    const submenus = [...this.querySelectorAll("sl-nav-submenu")];
+    let nextSelected = selectedItem;
+    if (!nextSelected && this.value !== "") {
+      nextSelected = items.find((item) => item.value === this.value);
+    }
+    this.setActiveItem(nextSelected);
+    items.forEach((item) => {
+      item.active = item === nextSelected;
+    });
+    [...groups, ...submenus].forEach((el) => el.active = false);
+    if (nextSelected) {
+      let currentElement = nextSelected.parentElement;
+      while (currentElement && currentElement !== this) {
+        const tagName = currentElement.tagName.toLowerCase();
+        if (tagName === "sl-nav-group" || tagName === "sl-nav-submenu") {
+          currentElement.active = true;
+        }
+        currentElement = currentElement.parentElement;
+      }
+    }
+  }
+  render() {
+    return html`
+      <nav
+        part="base"
+        class=${classMap({
+      nav: true,
+      "nav--horizontal": this.mode === "horizontal",
+      "nav--vertical": this.mode === "vertical"
+    })}
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+    `;
+  }
+};
+SlNav.styles = [component_styles_default, nav_styles_default];
+__decorateClass([
+  query("slot")
+], SlNav.prototype, "defaultSlot", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlNav.prototype, "value", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlNav.prototype, "mode", 2);
+
+export {
+  SlNav
+};

package/dist/chunks/chunk.RM3KSG2I.js

@@ -0,0 +1,25 @@
+import {
+  SlAnimatedImage
+} from "./chunk.J7VAKL5H.js";
+
+// src/react/animated-image/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-animated-image";
+SlAnimatedImage.define("sl-animated-image");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlAnimatedImage,
+  react: React,
+  events: {
+    onSlLoad: "sl-load",
+    onSlError: "sl-error"
+  },
+  displayName: "SlAnimatedImage"
+});
+var animated_image_default = reactWrapper;
+
+export {
+  animated_image_default
+};

package/dist/chunks/chunk.ROGCNVJZ.js

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

package/dist/chunks/chunk.RRXE4W6C.js

@@ -0,0 +1,134 @@
+import {
+  radio_button_styles_default
+} from "./chunk.BEKUM4BO.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.AFYNEPK3.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/radio-button/radio-button.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+var SlRadioButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix");
+    this.hasFocus = false;
+    this.checked = false;
+    this.disabled = false;
+    this.size = "medium";
+    this.pill = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "presentation");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("sl-blur");
+  }
+  handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    this.checked = true;
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sl-focus");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  /** Sets focus on the radio button. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the radio button. */
+  blur() {
+    this.input.blur();
+  }
+  render() {
+    return html`
+      <div part="base" role="presentation">
+        <button
+          part="${`button${this.checked ? " button--checked" : ""}`}"
+          role="radio"
+          aria-checked="${this.checked}"
+          class=${classMap({
+      button: true,
+      "button--default": true,
+      "button--small": this.size === "small",
+      "button--medium": this.size === "medium",
+      "button--large": this.size === "large",
+      "button--checked": this.checked,
+      "button--disabled": this.disabled,
+      "button--focused": this.hasFocus,
+      "button--outline": true,
+      "button--pill": this.pill,
+      "button--has-label": this.hasSlotController.test("[default]"),
+      "button--has-prefix": this.hasSlotController.test("prefix"),
+      "button--has-suffix": this.hasSlotController.test("suffix")
+    })}
+          aria-disabled=${this.disabled}
+          type="button"
+          value=${ifDefined(this.value)}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+          @click=${this.handleClick}
+        >
+          <slot name="prefix" part="prefix" class="button__prefix"></slot>
+          <slot part="label" class="button__label"></slot>
+          <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        </button>
+      </div>
+    `;
+  }
+};
+SlRadioButton.styles = [component_styles_default, radio_button_styles_default];
+__decorateClass([
+  query(".button")
+], SlRadioButton.prototype, "input", 2);
+__decorateClass([
+  query(".hidden-input")
+], SlRadioButton.prototype, "hiddenInput", 2);
+__decorateClass([
+  state()
+], SlRadioButton.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "checked", 2);
+__decorateClass([
+  property()
+], SlRadioButton.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlRadioButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlRadioButton.prototype, "pill", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SlRadioButton.prototype, "handleDisabledChange", 1);
+
+export {
+  SlRadioButton
+};

package/dist/chunks/chunk.RUO2Z6LX.js

@@ -0,0 +1,180 @@
+import {
+  pagination_styles_default
+} from "./chunk.TSVNQWUW.js";
+import {
+  SlIcon
+} from "./chunk.XRMWGB46.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.AFYNEPK3.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.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;
+    console.log(page, totalPage, "dahuigh");
+    this.defaultCurrentPage = page;
+    this.emit("sl-page-change", {
+      detail: {
+        pageNumber: page,
+        pageSize: this.pageSize
+      }
+    });
+  }
+  render() {
+    const page = this.currentPage ? this.currentPage : this.defaultCurrentPage;
+    return this.simpleMode ? html`
+          <div class="pagination ${this.className}">
+            <sl-icon
+              name="chevron-left"
+              class="page-btn ${page === 1 || this.disabled ? "page-btn--disabled" : ""}"
+              @click=${() => page !== 1 && this.handlePageChangePage(page - 1)}
+            ></sl-icon>
+            <sl-icon
+              name="chevron-right"
+              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="chevron-bar-left"
+                class="page-btn ${page === 1 || this.disabled ? "page-btn--disabled" : ""}"
+                @click=${() => page !== 1 && this.handlePageChangePage(1)}
+              ></sl-icon>
+              <sl-icon
+                name="chevron-left"
+                class="page-btn ${page === 1 || this.disabled ? "page-btn--disabled" : ""}"
+                @click=${() => page !== 1 && this.handlePageChangePage(page - 1)}
+              ></sl-icon>
+              <sl-icon
+                name="chevron-right"
+                class="page-btn ${page === this.totalPage || this.disabled ? "page-btn--disabled" : ""}"
+                @click=${() => page !== this.totalPage && this.handlePageChangePage(page + 1)}
+              ></sl-icon>
+              <sl-icon
+                name="chevron-bar-right"
+                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: Number })
+], SlPagination.prototype, "defaultCurrentPage", 2);
+__decorateClass([
+  state()
+], SlPagination.prototype, "totalPage", 2);
+
+export {
+  SlPagination
+};