@kdcloudjs/shoelace 1.0.42 → 1.0.43

package/dist/chunks/chunk.Z4AKIAK3.js

@@ -1,212 +0,0 @@
-import {
-  col_styles_default
-} from "./chunk.DCUBK6Y2.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.HDL3N2D6.js";
-import {
-  __decorateClass
-} from "./chunk.W5KB6T3Z.js";
-
-// src/components/col/col.component.ts
-import { html } from "lit";
-import { property, state } from "lit/decorators.js";
-var breakpoints = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 992,
-  xl: 1200,
-  xxl: 1600
-};
-var responsiveArray = ["xxl", "xl", "lg", "md", "sm", "xs"];
-var SlCol = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.mediaQueryLists = /* @__PURE__ */ new Map();
-    this.currentBreakpoint = "xs";
-    this.rowContext = { gutter: [0, 0], wrap: true };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setupResponsiveObserver();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.cleanupResponsiveObserver();
-  }
-  setupResponsiveObserver() {
-    Object.entries(breakpoints).forEach(([key, minWidth]) => {
-      const breakpoint = key;
-      const mediaQuery = minWidth === 0 ? "(min-width: 0px)" : `(min-width: ${minWidth}px)`;
-      const mql = window.matchMedia(mediaQuery);
-      const handler = (e) => {
-        if (e.matches) {
-          this.currentBreakpoint = breakpoint;
-          this.requestUpdate();
-        }
-      };
-      mql.addEventListener("change", handler);
-      this.mediaQueryLists.set(breakpoint, mql);
-      if (mql.matches) {
-        this.currentBreakpoint = breakpoint;
-      }
-    });
-  }
-  cleanupResponsiveObserver() {
-    this.mediaQueryLists.forEach((mql) => {
-      mql.removeEventListener("change", () => {
-      });
-    });
-    this.mediaQueryLists.clear();
-  }
-  getResponsiveProps() {
-    for (const bp of responsiveArray) {
-      const bpIndex = responsiveArray.indexOf(bp);
-      const currentIndex = responsiveArray.indexOf(this.currentBreakpoint);
-      if (bpIndex >= currentIndex) {
-        const config = this[bp];
-        if (config !== void 0) {
-          if (typeof config === "number" || typeof config === "string") {
-            return { span: config };
-          }
-          return config;
-        }
-      }
-    }
-    return {};
-  }
-  parseFlex(flex) {
-    if (flex === "auto") {
-      return "1 1 auto";
-    }
-    if (typeof flex === "number") {
-      return `${flex} ${flex} auto`;
-    }
-    if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(String(flex))) {
-      return `0 0 ${flex}`;
-    }
-    return String(flex);
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    this.updateHostStyles();
-  }
-  updateHostStyles() {
-    var _a, _b, _c, _d, _e, _f;
-    const responsiveProps = this.getResponsiveProps();
-    const mergedSpan = (_a = this.span) != null ? _a : responsiveProps.span;
-    const mergedOffset = (_b = this.offset) != null ? _b : responsiveProps.offset;
-    const mergedOrder = (_c = this.order) != null ? _c : responsiveProps.order;
-    const mergedPush = (_d = this.push) != null ? _d : responsiveProps.push;
-    const mergedPull = (_e = this.pull) != null ? _e : responsiveProps.pull;
-    const mergedFlex = (_f = this.flex) != null ? _f : responsiveProps.flex;
-    const hostStyle = this.style;
-    hostStyle.flex = "";
-    hostStyle.maxWidth = "";
-    hostStyle.marginLeft = "";
-    hostStyle.order = "";
-    hostStyle.left = "";
-    hostStyle.right = "";
-    hostStyle.paddingLeft = "";
-    hostStyle.paddingRight = "";
-    hostStyle.display = "";
-    hostStyle.minWidth = "";
-    if (mergedSpan !== void 0) {
-      const spanNum = Number(mergedSpan);
-      if (spanNum === 0) {
-        hostStyle.display = "none";
-      } else {
-        const percentage = spanNum / 24 * 100;
-        hostStyle.flex = `0 0 ${percentage}%`;
-        hostStyle.maxWidth = `${percentage}%`;
-      }
-    }
-    if (mergedOffset !== void 0 && mergedOffset !== 0) {
-      const offsetNum = Number(mergedOffset);
-      const percentage = offsetNum / 24 * 100;
-      hostStyle.marginLeft = `${percentage}%`;
-    }
-    if (mergedOrder !== void 0) {
-      hostStyle.order = String(mergedOrder);
-    }
-    if (mergedPush !== void 0 && mergedPush !== 0) {
-      const pushNum = Number(mergedPush);
-      const percentage = pushNum / 24 * 100;
-      hostStyle.left = `${percentage}%`;
-    }
-    if (mergedPull !== void 0 && mergedPull !== 0) {
-      const pullNum = Number(mergedPull);
-      const percentage = pullNum / 24 * 100;
-      hostStyle.right = `${percentage}%`;
-    }
-    if (mergedFlex !== void 0) {
-      hostStyle.flex = this.parseFlex(mergedFlex);
-      if (!this.rowContext.wrap) {
-        hostStyle.minWidth = "0";
-      }
-    }
-    const [gutterH] = this.rowContext.gutter;
-    if (gutterH) {
-      hostStyle.paddingLeft = `${gutterH / 2}px`;
-      hostStyle.paddingRight = `${gutterH / 2}px`;
-    }
-  }
-  render() {
-    return html`
-      <div part="base" class="col">
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-SlCol.styles = [component_styles_default, col_styles_default];
-__decorateClass([
-  state()
-], SlCol.prototype, "currentBreakpoint", 2);
-__decorateClass([
-  state()
-], SlCol.prototype, "rowContext", 2);
-__decorateClass([
-  property({ type: Number })
-], SlCol.prototype, "span", 2);
-__decorateClass([
-  property({ type: Number })
-], SlCol.prototype, "offset", 2);
-__decorateClass([
-  property({ type: Number })
-], SlCol.prototype, "order", 2);
-__decorateClass([
-  property({ type: Number })
-], SlCol.prototype, "push", 2);
-__decorateClass([
-  property({ type: Number })
-], SlCol.prototype, "pull", 2);
-__decorateClass([
-  property()
-], SlCol.prototype, "flex", 2);
-__decorateClass([
-  property({ type: Object })
-], SlCol.prototype, "xs", 2);
-__decorateClass([
-  property({ type: Object })
-], SlCol.prototype, "sm", 2);
-__decorateClass([
-  property({ type: Object })
-], SlCol.prototype, "md", 2);
-__decorateClass([
-  property({ type: Object })
-], SlCol.prototype, "lg", 2);
-__decorateClass([
-  property({ type: Object })
-], SlCol.prototype, "xl", 2);
-__decorateClass([
-  property({ type: Object })
-], SlCol.prototype, "xxl", 2);
-
-export {
-  SlCol
-};

package/dist/chunks/chunk.ZEIGDMZY.js

@@ -1,11 +0,0 @@
-import {
-  SlNavSubmenu
-} from "./chunk.ICM7Y4L3.js";
-
-// src/components/nav-submenu/nav-submenu.ts
-var nav_submenu_default = SlNavSubmenu;
-SlNavSubmenu.define("sl-nav-submenu");
-
-export {
-  nav_submenu_default
-};

package/dist/chunks/chunk.ZEVFDIKC.js

@@ -1,231 +0,0 @@
-import {
-  timepicker_styles_default
-} from "./chunk.72LPYABC.js";
-import {
-  PickerBase
-} from "./chunk.SGVII4SS.js";
-import {
-  SlDatePanel
-} from "./chunk.NJC4NREC.js";
-import {
-  SlInput
-} from "./chunk.SFGRSHKM.js";
-import {
-  SlDrawer
-} from "./chunk.DKI25Y7A.js";
-import {
-  formatDatetime,
-  parseDatetime
-} from "./chunk.NMHNVTUG.js";
-import {
-  SlTimePanel
-} from "./chunk.AWE55MFU.js";
-import {
-  SlPopup
-} from "./chunk.4D3UWWAO.js";
-import {
-  watch
-} from "./chunk.55S3OOTM.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  __decorateClass
-} from "./chunk.W5KB6T3Z.js";
-
-// src/components/timepicker/timepicker.component.ts
-import { html } from "lit";
-import { property, query } from "lit/decorators.js";
-var SlTimepicker = class extends PickerBase {
-  constructor() {
-    super(...arguments);
-    this.format = "HH:mm:ss";
-  }
-  handleOpenChange() {
-    if (this.open) {
-      if (this.timePanel) {
-        requestAnimationFrame(async () => {
-          await this.timePanel.resetScroll();
-        });
-      }
-    } else {
-      this.handleValueChange();
-    }
-  }
-  parseValue(value) {
-    return parseDatetime(value, this.format);
-  }
-  formatValue(date) {
-    return formatDatetime(date, this.format);
-  }
-  isValidFormat(value) {
-    if (this.format === "HH:mm:ss") {
-      return /^\d{2}:\d{2}:\d{2}$/.test(value);
-    }
-    return !!this.parseValue(value);
-  }
-  getInputPattern() {
-    return this.pattern;
-  }
-  async handleInputInput(event) {
-    event.stopPropagation();
-    const target = event.target;
-    const value = target.value;
-    if (this.isValidFormat(value) && this.parseValue(value) || !this.open && value === "") {
-      this.updateValue(value, { emitInput: true });
-    }
-    await this.updateComplete;
-    if (!this.open && value !== "") {
-      this.open = true;
-    }
-  }
-  handleTimeChange(event) {
-    const selectedDate = event.detail.value;
-    const formattedTime = this.formatValue(selectedDate);
-    this.updateValue(formattedTime, { emitInput: true });
-  }
-  handleDateChange(event) {
-    const selectedDate = event.detail.date;
-    const formattedTime = this.formatValue(selectedDate);
-    this.updateValue(formattedTime, { emitInput: true, emitChange: false });
-  }
-  handleTimeSelect(event) {
-    event.stopPropagation();
-    const selectedDate = event.detail.value;
-    const formattedTime = formatDatetime(selectedDate, this.format);
-    this.updateValue(formattedTime, { emitInput: true, emitChange: true });
-    this.open = false;
-  }
-  handleInputChange(event) {
-    event.stopPropagation();
-    const target = event.target;
-    this.updateValue(target.value, { emitInput: true, emitChange: !this.open });
-  }
-  handleInputKeyDown(event) {
-    super.handleInputKeyDown(event);
-    if (event.key === "Enter") {
-      const parsedDate = this.parseValue(this.value);
-      if (this.open && this.timePanel) {
-        event.stopPropagation();
-        const selectedDate = this.timePanel.value;
-        if (selectedDate) {
-          const formattedTime = this.formatValue(selectedDate);
-          this.updateValue(formattedTime, { emitChange: true });
-          this.open = false;
-        }
-        return;
-      }
-      if (parsedDate) {
-        const formattedTime = this.formatValue(parsedDate);
-        this.updateValue(formattedTime, { emitChange: true });
-        this.open = false;
-      }
-    }
-  }
-  getInputSuffixIconName() {
-    return "clock";
-  }
-  shouldRevertOnBlur(wasOpen) {
-    return wasOpen;
-  }
-  handleValueChange() {
-    const validDate = this.parseValue(this.value);
-    if (!this.open) {
-      if (validDate) {
-        const formattedTime = formatDatetime(validDate, this.format);
-        this.lastValidValue = formattedTime;
-      } else if (this.value === "") {
-        this.lastValidValue = "";
-      }
-    }
-    if (!this.input) {
-      return;
-    }
-    this.formControlController.updateValidity();
-  }
-  render() {
-    if (this.isMobile) {
-      return html`
-        ${this.renderInput()}
-        <sl-date-panel
-          exportparts="
-            time-panel-base: time-base,
-            time-panel-columns: time-columns,
-            time-panel-column: time-column,
-            time-panel-item: time-item,
-            time-panel-footer: time-footer
-          "
-          .value=${this.value}
-          .open=${this.open}
-          type="time"
-          @sl-date-change=${this.handleDateChange}
-          @sl-confirm=${this.handleMobileConfirm}
-          @sl-cancel=${this.handleMobileCancel}
-          @sl-clear=${this.handleMobileClear}
-        ></sl-date-panel>
-      `;
-    }
-    const parsedDate = this.parseValue(this.value) ? this.parseValue(this.value) : this.parseValue(this.lastValidValue);
-    return html`
-      <sl-popup
-        part="popup"
-        class="timepicker__popup"
-        ?active=${this.open}
-        strategy=${this.hoist ? "fixed" : "absolute"}
-        flip
-        shift
-        placement="bottom-start"
-        auto-size="vertical"
-        auto-size-padding="10"
-      >
-        ${this.renderInput("anchor")}
-
-        <sl-time-panel
-          part="panel"
-          exportparts="
-            base: time-base,
-            header:time-header,
-            columns:time-columns,
-            column:time-column,
-            item:time-item,
-            footer:time-footer
-          "
-          class="timepicker__panel"
-          .value=${parsedDate}
-          no-header
-          with-footer
-          @sl-change=${this.handleTimeChange}
-          @sl-select=${this.handleTimeSelect}
-          @mousedown=${(event) => event.preventDefault()}
-        ></sl-time-panel>
-      </sl-popup>
-    `;
-  }
-};
-SlTimepicker.styles = [component_styles_default, timepicker_styles_default];
-SlTimepicker.dependencies = {
-  "sl-input": SlInput,
-  "sl-popup": SlPopup,
-  "sl-time-panel": SlTimePanel,
-  "sl-date-panel": SlDatePanel,
-  "sl-drawer": SlDrawer
-};
-__decorateClass([
-  query("sl-time-panel")
-], SlTimepicker.prototype, "timePanel", 2);
-__decorateClass([
-  property()
-], SlTimepicker.prototype, "format", 2);
-__decorateClass([
-  property()
-], SlTimepicker.prototype, "pattern", 2);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], SlTimepicker.prototype, "handleOpenChange", 1);
-__decorateClass([
-  watch("value")
-], SlTimepicker.prototype, "handleValueChange", 1);
-
-export {
-  SlTimepicker
-};

package/dist/chunks/chunk.ZN333G4I.js

@@ -1,45 +0,0 @@
-import {
-  card_styles_default
-} from "./chunk.I7MMOPXT.js";
-import {
-  HasSlotController
-} from "./chunk.NYIIDP5N.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.HDL3N2D6.js";
-
-// src/components/card/card.component.ts
-import { classMap } from "lit/directives/class-map.js";
-import { html } from "lit";
-var SlCard = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.hasSlotController = new HasSlotController(this, "footer", "header", "image");
-  }
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-      card: true,
-      "card--has-footer": this.hasSlotController.test("footer"),
-      "card--has-image": this.hasSlotController.test("image"),
-      "card--has-header": this.hasSlotController.test("header")
-    })}
-      >
-        <slot name="image" part="image" class="card__image"></slot>
-        <slot name="header" part="header" class="card__header"></slot>
-        <slot part="body" class="card__body"></slot>
-        <slot name="footer" part="footer" class="card__footer"></slot>
-      </div>
-    `;
-  }
-};
-SlCard.styles = [component_styles_default, card_styles_default];
-
-export {
-  SlCard
-};

package/dist/chunks/chunk.ZN63BJSE.js

@@ -1,24 +0,0 @@
-import {
-  SlCarousel
-} from "./chunk.5PWPGYLP.js";
-
-// src/react/carousel/index.ts
-import * as React from "react";
-import { createComponent } from "@lit/react";
-import "@lit/react";
-var tagName = "sl-carousel";
-SlCarousel.define("sl-carousel");
-var reactWrapper = createComponent({
-  tagName,
-  elementClass: SlCarousel,
-  react: React,
-  events: {
-    onSlSlideChange: "sl-slide-change"
-  },
-  displayName: "SlCarousel"
-});
-var carousel_default = reactWrapper;
-
-export {
-  carousel_default
-};

package/dist/chunks/chunk.ZNOXLXL2.js

@@ -1,11 +0,0 @@
-import {
-  SlDropdown
-} from "./chunk.DOOR5QZX.js";
-
-// src/components/dropdown/dropdown.ts
-var dropdown_default = SlDropdown;
-SlDropdown.define("sl-dropdown");
-
-export {
-  dropdown_default
-};

package/dist/chunks/chunk.ZOMIS4CM.js

@@ -1,167 +0,0 @@
-import {
-  gridstack_styles_default
-} from "./chunk.MY3GNSET.js";
-import {
-  screen_styles_default
-} from "./chunk.74VPT7ZS.js";
-import {
-  watch
-} from "./chunk.55S3OOTM.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.HDL3N2D6.js";
-import {
-  __decorateClass,
-  __spreadValues
-} from "./chunk.W5KB6T3Z.js";
-
-// src/components/screen/screen.component.ts
-import { GridStack } from "gridstack";
-import { html } from "lit";
-import { property, query } from "lit/decorators.js";
-var SlScreen = class extends ShoelaceElement {
-  constructor() {
-    super(...arguments);
-    this.grid = null;
-    this.options = {};
-    this.data = [];
-    this.removable = false;
-    this.static = false;
-    this.selector = "";
-  }
-  /**
-   * 获取 GridStack 实例的序列化数据
-   * @returns 序列化后的网格数据
-   */
-  getGridData() {
-    var _a;
-    return ((_a = this == null ? void 0 : this.grid) == null ? void 0 : _a.save()) || [];
-  }
-  /**
-   * 获取 GridStack 实例的序列化数据
-   * @returns GridStack 实例
-   */
-  getInstance() {
-    return this.grid;
-  }
-  handleDataChange() {
-    this.loadGrid();
-  }
-  handleSelectorChange() {
-    this.setupDragIn();
-  }
-  handleStaticGridChange() {
-    this.loadGrid();
-  }
-  firstUpdated() {
-    this.initGrid();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.grid) {
-      this.grid.destroy();
-    }
-  }
-  setupDragIn() {
-    if (this.selector) {
-      GridStack.setupDragIn(this.selector);
-    }
-  }
-  initGrid() {
-    const _options = __spreadValues({
-      cellHeight: 80,
-      margin: 14,
-      acceptWidgets: true,
-      staticGrid: false,
-      removable: false
-    }, this.options);
-    if (!this.static && this.removable) {
-      _options.removable = true;
-    }
-    if (this.static) {
-      _options.staticGrid = true;
-    }
-    this.grid = GridStack.init(_options, this.gridElement);
-    this.grid.on("dropped", (_event, _previousNode, newNode) => {
-      if (newNode == null ? void 0 : newNode.el) {
-        this.addDeleteButton(newNode.el);
-      }
-    });
-    if (this.data.length > 0) {
-      this.loadGrid();
-    }
-    this.setupDragIn();
-  }
-  loadGrid() {
-    var _a;
-    if (!this.grid) return;
-    this.grid.removeAll();
-    this.grid.load(this.data, true);
-    const items = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".grid-stack-item");
-    items == null ? void 0 : items.forEach((el) => {
-      const itemEl = el;
-      const node = itemEl.gridstackNode;
-      if (node == null ? void 0 : node.content) {
-        const contentDiv = itemEl.querySelector(".grid-stack-item-content");
-        if (contentDiv) {
-          contentDiv.innerHTML = node.content;
-        }
-      }
-      this.addDeleteButton(itemEl);
-    });
-  }
-  addDeleteButton(itemEl) {
-    if (itemEl.querySelector(".del-btn") || !this.removable || this.static) return;
-    const btn = document.createElement("sl-button");
-    btn.setAttribute("variant", "danger");
-    btn.setAttribute("size", "small");
-    btn.setAttribute("circle", "");
-    btn.className = "del-btn";
-    btn.innerHTML = `<sl-icon name="x-lg"></sl-icon>`;
-    btn.onclick = (e) => {
-      e.stopPropagation();
-      if (this.grid) {
-        this.grid.removeWidget(itemEl);
-      }
-    };
-    itemEl.appendChild(btn);
-  }
-  render() {
-    return html`<div part="base" class="grid-stack"></div>`;
-  }
-};
-SlScreen.styles = [component_styles_default, gridstack_styles_default, screen_styles_default];
-__decorateClass([
-  query(".grid-stack")
-], SlScreen.prototype, "gridElement", 2);
-__decorateClass([
-  property({ type: Object, reflect: true })
-], SlScreen.prototype, "options", 2);
-__decorateClass([
-  property({ type: Array })
-], SlScreen.prototype, "data", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SlScreen.prototype, "removable", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SlScreen.prototype, "static", 2);
-__decorateClass([
-  property({ reflect: true })
-], SlScreen.prototype, "selector", 2);
-__decorateClass([
-  watch("data")
-], SlScreen.prototype, "handleDataChange", 1);
-__decorateClass([
-  watch("selector")
-], SlScreen.prototype, "handleSelectorChange", 1);
-__decorateClass([
-  watch("static")
-], SlScreen.prototype, "handleStaticGridChange", 1);
-
-export {
-  SlScreen
-};