@kdcloudjs/shoelace 1.0.22 → 1.0.23

package/dist/chunks/chunk.AFKKZTRN.js

@@ -0,0 +1,293 @@
+import {
+  SlSpinner
+} from "./chunk.L2UWHTF3.js";
+import {
+  FormControlController,
+  validValidityState
+} from "./chunk.WBWPWG4N.js";
+import {
+  button_styles_default
+} from "./chunk.HPOVPECL.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  SlIcon
+} from "./chunk.DV3VJNQR.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.HDUK6LJG.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/button/button.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html, literal } from "lit/static-html.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property, query, state } from "lit/decorators.js";
+var SlButton = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["click"]
+    });
+    this.hasSlotController = new HasSlotController(this, "[default]", "prefix", "suffix");
+    this.localize = new LocalizeController(this);
+    this.hasFocus = false;
+    this.invalid = false;
+    this.title = "";
+    this.variant = "default";
+    this.size = "medium";
+    this.caret = false;
+    this.disabled = false;
+    this.loading = false;
+    this.outline = false;
+    this.pill = false;
+    this.circle = false;
+    this.type = "button";
+    this.name = "";
+    this.value = "";
+    this.href = "";
+    this.rel = "noreferrer noopener";
+  }
+  /** Gets the validity state object */
+  get validity() {
+    if (this.isButton()) {
+      return this.button.validity;
+    }
+    return validValidityState;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    if (this.isButton()) {
+      return this.button.validationMessage;
+    }
+    return "";
+  }
+  firstUpdated() {
+    if (this.isButton()) {
+      this.formControlController.updateValidity();
+    }
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("sl-blur");
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sl-focus");
+  }
+  handleClick() {
+    if (this.type === "submit") {
+      this.formControlController.submit(this);
+    }
+    if (this.type === "reset") {
+      this.formControlController.reset(this);
+    }
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  isButton() {
+    return this.href ? false : true;
+  }
+  isLink() {
+    return this.href ? true : false;
+  }
+  handleDisabledChange() {
+    if (this.isButton()) {
+      this.formControlController.setValidity(this.disabled);
+    }
+  }
+  /** Simulates a click on the button. */
+  click() {
+    this.button.click();
+  }
+  /** Sets focus on the button. */
+  focus(options) {
+    this.button.focus(options);
+  }
+  /** Removes focus from the button. */
+  blur() {
+    this.button.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    if (this.isButton()) {
+      return this.button.checkValidity();
+    }
+    return true;
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    if (this.isButton()) {
+      return this.button.reportValidity();
+    }
+    return true;
+  }
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message) {
+    if (this.isButton()) {
+      this.button.setCustomValidity(message);
+      this.formControlController.updateValidity();
+    }
+  }
+  render() {
+    const isLink = this.isLink();
+    const tag = isLink ? literal`a` : literal`button`;
+    return html`
+      <${tag}
+        part="base"
+        class=${classMap({
+      button: true,
+      "button--default": this.variant === "default",
+      "button--primary": this.variant === "primary",
+      "button--success": this.variant === "success",
+      "button--neutral": this.variant === "neutral",
+      "button--warning": this.variant === "warning",
+      "button--danger": this.variant === "danger",
+      "button--text": this.variant === "text",
+      "button--small": this.size === "small",
+      "button--medium": this.size === "medium",
+      "button--large": this.size === "large",
+      "button--caret": this.caret,
+      "button--circle": this.circle,
+      "button--disabled": this.disabled,
+      "button--focused": this.hasFocus,
+      "button--loading": this.loading,
+      "button--standard": !this.outline,
+      "button--outline": this.outline,
+      "button--pill": this.pill,
+      "button--rtl": this.localize.dir() === "rtl",
+      "button--has-label": this.hasSlotController.test("[default]"),
+      "button--has-prefix": this.hasSlotController.test("prefix"),
+      "button--has-suffix": this.hasSlotController.test("suffix")
+    })}
+        ?disabled=${ifDefined(isLink ? void 0 : this.disabled)}
+        type=${ifDefined(isLink ? void 0 : this.type)}
+        title=${this.title}
+        name=${ifDefined(isLink ? void 0 : this.name)}
+        value=${ifDefined(isLink ? void 0 : this.value)}
+        href=${ifDefined(isLink && !this.disabled ? this.href : void 0)}
+        target=${ifDefined(isLink ? this.target : void 0)}
+        download=${ifDefined(isLink ? this.download : void 0)}
+        rel=${ifDefined(isLink ? this.rel : void 0)}
+        role=${ifDefined(isLink ? void 0 : "button")}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        tabindex=${this.disabled ? "-1" : "0"}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @invalid=${this.isButton() ? this.handleInvalid : null}
+        @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>
+        ${this.caret ? html` <sl-icon part="caret" class="button__caret" library="system" name="caret"></sl-icon> ` : ""}
+        ${this.loading ? html`<sl-spinner part="spinner"></sl-spinner>` : ""}
+      </${tag}>
+    `;
+  }
+};
+SlButton.styles = [component_styles_default, button_styles_default];
+SlButton.dependencies = {
+  "sl-icon": SlIcon,
+  "sl-spinner": SlSpinner
+};
+__decorateClass([
+  query(".button")
+], SlButton.prototype, "button", 2);
+__decorateClass([
+  state()
+], SlButton.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], SlButton.prototype, "invalid", 2);
+__decorateClass([
+  property()
+], SlButton.prototype, "title", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlButton.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlButton.prototype, "caret", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlButton.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlButton.prototype, "outline", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlButton.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlButton.prototype, "circle", 2);
+__decorateClass([
+  property()
+], SlButton.prototype, "type", 2);
+__decorateClass([
+  property()
+], SlButton.prototype, "name", 2);
+__decorateClass([
+  property()
+], SlButton.prototype, "value", 2);
+__decorateClass([
+  property()
+], SlButton.prototype, "href", 2);
+__decorateClass([
+  property()
+], SlButton.prototype, "target", 2);
+__decorateClass([
+  property()
+], SlButton.prototype, "rel", 2);
+__decorateClass([
+  property()
+], SlButton.prototype, "download", 2);
+__decorateClass([
+  property()
+], SlButton.prototype, "form", 2);
+__decorateClass([
+  property({ attribute: "formaction" })
+], SlButton.prototype, "formAction", 2);
+__decorateClass([
+  property({ attribute: "formenctype" })
+], SlButton.prototype, "formEnctype", 2);
+__decorateClass([
+  property({ attribute: "formmethod" })
+], SlButton.prototype, "formMethod", 2);
+__decorateClass([
+  property({ attribute: "formnovalidate", type: Boolean })
+], SlButton.prototype, "formNoValidate", 2);
+__decorateClass([
+  property({ attribute: "formtarget" })
+], SlButton.prototype, "formTarget", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SlButton.prototype, "handleDisabledChange", 1);
+
+export {
+  SlButton
+};

package/dist/chunks/chunk.AHSK5FGW.js

@@ -0,0 +1,11 @@
+import {
+  SlNavSubmenu
+} from "./chunk.FOPZDGIK.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.AWL5Y4C7.js

@@ -0,0 +1,11 @@
+import {
+  SlMenuItem
+} from "./chunk.WBGEGLPV.js";
+
+// src/components/menu-item/menu-item.ts
+var menu_item_default = SlMenuItem;
+SlMenuItem.define("sl-menu-item");
+
+export {
+  menu_item_default
+};

package/dist/chunks/chunk.B4FPH3I4.js

@@ -0,0 +1,126 @@
+import {
+  SlMenu
+} from "./chunk.MNGF4CJK.js";
+import {
+  SlMenuItem
+} from "./chunk.WBGEGLPV.js";
+import {
+  SlDropdown
+} from "./chunk.LM6FQJOW.js";
+import {
+  SlIcon
+} from "./chunk.DV3VJNQR.js";
+import {
+  ShoelaceElement
+} from "./chunk.HDUK6LJG.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/pagination/custom-select.ts
+import { css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+var CustomSelect = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.options = [10, 20, 50, 100];
+    this.selected = 20;
+    this.disabled = false;
+    this.open = false;
+  }
+  selectItem(option) {
+    this.selected = option;
+    this.open = false;
+    this.dispatchEvent(
+      new CustomEvent("select-change", {
+        detail: option,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return html`
+      <sl-dropdown
+        @sl-show=${() => this.open = true}
+        @sl-hide=${() => this.open = false}
+        ?disabled=${this.disabled}
+        placement="bottom-end"
+        hoist
+      >
+        <div class="select-box" slot="trigger">
+          ${this.selected}条/页
+          <sl-icon class="arrow" name="${this.open ? "chevron-up" : "chevron-down"}"></sl-icon>
+        </div>
+        <sl-menu>
+          ${this.options.map(
+      (option) => html`<sl-menu-item @click=${() => this.selectItem(option)} value=${option}>${option}条/页</sl-menu-item>`
+    )}
+        </sl-menu>
+      </sl-dropdown>
+    `;
+  }
+};
+CustomSelect.styles = css`
+    :host {
+      display: inline-block;
+      position: relative;
+      font-family: sans-serif;
+    }
+    .select-box {
+      padding: 2px;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      color: var(--sl-pagination-page-size-color);
+      font-size: var(--sl-pagination-font-size);
+    }
+    .arrow {
+      margin-left: 2px;
+      &:hover {
+        color: #5582f3;
+      }
+    }
+    span.menu-item__check {
+      width: 0;
+    }
+    sl-menu-item::part(checked-icon) {
+      width: 8px;
+    }
+    sl-menu-item::part(base) {
+      color: var(--sl-pagination-page-size-color);
+      font-size: var(--sl-pagination-font-size);
+    }
+    sl-menu-item::part(base):focus-visible,
+    sl-menu-item::part(base):hover {
+      color: #5582f3;
+      background-color: #f5f7fa;
+    }
+  `;
+CustomSelect.dependencies = {
+  "sl-dropdown": SlDropdown,
+  "sl-menu": SlMenu,
+  "sl-menu-item": SlMenuItem,
+  "sl-icon": SlIcon
+};
+__decorateClass([
+  property({ type: Array })
+], CustomSelect.prototype, "options", 2);
+__decorateClass([
+  property({ type: Number })
+], CustomSelect.prototype, "selected", 2);
+__decorateClass([
+  property({ type: Boolean })
+], CustomSelect.prototype, "disabled", 2);
+__decorateClass([
+  state()
+], CustomSelect.prototype, "open", 2);
+CustomSelect = __decorateClass([
+  customElement("custom-select")
+], CustomSelect);
+
+export {
+  CustomSelect
+};

package/dist/chunks/chunk.B5REC6O3.js

@@ -0,0 +1,11 @@
+import {
+  SlVisuallyHidden
+} from "./chunk.FKM5DZ7H.js";
+
+// src/components/visually-hidden/visually-hidden.ts
+var visually_hidden_default = SlVisuallyHidden;
+SlVisuallyHidden.define("sl-visually-hidden");
+
+export {
+  visually_hidden_default
+};

package/dist/chunks/chunk.B6GLUTUE.js

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

package/dist/chunks/chunk.BCUNBHQP.js

@@ -0,0 +1,85 @@
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  ShoelaceElement
+} from "./chunk.HDUK6LJG.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/format-date/format-date.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var SlFormatDate = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.date = /* @__PURE__ */ new Date();
+    this.hourFormat = "auto";
+  }
+  render() {
+    const date = new Date(this.date);
+    const hour12 = this.hourFormat === "auto" ? void 0 : this.hourFormat === "12";
+    if (isNaN(date.getMilliseconds())) {
+      return void 0;
+    }
+    return html`
+      <time datetime=${date.toISOString()}>
+        ${this.localize.date(date, {
+      weekday: this.weekday,
+      era: this.era,
+      year: this.year,
+      month: this.month,
+      day: this.day,
+      hour: this.hour,
+      minute: this.minute,
+      second: this.second,
+      timeZoneName: this.timeZoneName,
+      timeZone: this.timeZone,
+      hour12
+    })}
+      </time>
+    `;
+  }
+};
+__decorateClass([
+  property()
+], SlFormatDate.prototype, "date", 2);
+__decorateClass([
+  property()
+], SlFormatDate.prototype, "weekday", 2);
+__decorateClass([
+  property()
+], SlFormatDate.prototype, "era", 2);
+__decorateClass([
+  property()
+], SlFormatDate.prototype, "year", 2);
+__decorateClass([
+  property()
+], SlFormatDate.prototype, "month", 2);
+__decorateClass([
+  property()
+], SlFormatDate.prototype, "day", 2);
+__decorateClass([
+  property()
+], SlFormatDate.prototype, "hour", 2);
+__decorateClass([
+  property()
+], SlFormatDate.prototype, "minute", 2);
+__decorateClass([
+  property()
+], SlFormatDate.prototype, "second", 2);
+__decorateClass([
+  property({ attribute: "time-zone-name" })
+], SlFormatDate.prototype, "timeZoneName", 2);
+__decorateClass([
+  property({ attribute: "time-zone" })
+], SlFormatDate.prototype, "timeZone", 2);
+__decorateClass([
+  property({ attribute: "hour-format" })
+], SlFormatDate.prototype, "hourFormat", 2);
+
+export {
+  SlFormatDate
+};

package/dist/chunks/chunk.BDDMBJWR.js

@@ -0,0 +1,27 @@
+import {
+  SlDatePanel
+} from "./chunk.S3PEX4EJ.js";
+
+// src/react/date-panel/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "sl-date-panel";
+SlDatePanel.define("sl-date-panel");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: SlDatePanel,
+  react: React,
+  events: {
+    onSlCancel: "sl-cancel",
+    onSlClear: "sl-clear",
+    onSlConfirm: "sl-confirm",
+    onSlDateChange: "sl-date-change"
+  },
+  displayName: "SlDatePanel"
+});
+var date_panel_default = reactWrapper;
+
+export {
+  date_panel_default
+};

package/dist/chunks/chunk.BDO4JUTY.js

@@ -0,0 +1,93 @@
+import {
+  tag_styles_default
+} from "./chunk.LVBOFYKS.js";
+import {
+  SlIconButton
+} from "./chunk.4FWKHFOF.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.HDUK6LJG.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/tag/tag.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var SlTag = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.variant = "neutral";
+    this.size = "medium";
+    this.pill = false;
+    this.removable = false;
+  }
+  handleRemoveClick() {
+    this.emit("sl-remove");
+  }
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+      tag: true,
+      // Types
+      "tag--primary": this.variant === "primary",
+      "tag--success": this.variant === "success",
+      "tag--neutral": this.variant === "neutral",
+      "tag--warning": this.variant === "warning",
+      "tag--danger": this.variant === "danger",
+      "tag--text": this.variant === "text",
+      // Sizes
+      "tag--small": this.size === "small",
+      "tag--medium": this.size === "medium",
+      "tag--large": this.size === "large",
+      // Modifiers
+      "tag--pill": this.pill,
+      "tag--removable": this.removable
+    })}
+      >
+        <slot part="content" class="tag__content"></slot>
+
+        ${this.removable ? html`
+              <sl-icon-button
+                part="remove-button"
+                exportparts="base:remove-button__base"
+                name="x-lg"
+                library="system"
+                label=${this.localize.term("remove")}
+                class="tag__remove"
+                @click=${this.handleRemoveClick}
+                tabindex="-1"
+              ></sl-icon-button>
+            ` : ""}
+      </span>
+    `;
+  }
+};
+SlTag.styles = [component_styles_default, tag_styles_default];
+SlTag.dependencies = { "sl-icon-button": SlIconButton };
+__decorateClass([
+  property({ reflect: true })
+], SlTag.prototype, "variant", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlTag.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlTag.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTag.prototype, "removable", 2);
+
+export {
+  SlTag
+};

package/dist/chunks/chunk.BK4GAHAX.js

@@ -0,0 +1,11 @@
+import {
+  SlMenu
+} from "./chunk.MNGF4CJK.js";
+
+// src/components/menu/menu.ts
+var menu_default = SlMenu;
+SlMenu.define("sl-menu");
+
+export {
+  menu_default
+};