easy-component-ui 3.0.12 → 3.0.14

package/dist/components/ea-skeleton.js

@@ -1,263 +0,0 @@
-var q = Object.defineProperty;
-var E = (e) => {
-  throw TypeError(e);
-};
-var x = (e, a, t) => a in e ? q(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t;
-var w = (e, a, t) => x(e, typeof a != "symbol" ? a + "" : a, t), k = (e, a, t) => a.has(e) || E("Cannot " + t);
-var s = (e, a, t) => (k(e, a, "read from private field"), t ? t.call(e) : a.get(e)), r = (e, a, t) => a.has(e) ? E("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, t), u = (e, a, t, i) => (k(e, a, "write to private field"), i ? i.call(e, t) : a.set(e, t), t), c = (e, a, t) => (k(e, a, "access private method"), t);
-import { B as S } from "./Base.js";
-import { s as H } from "../css/ea-skeleton.style.js";
-import { E as N } from "../utils/Utils.js";
-import { s as $ } from "../css/ea-skeleton-item.style.js";
-var f, C, h, m, n, l, v, T, A, L, y, p;
-class B extends S {
-  constructor() {
-    super();
-    r(this, l);
-    /** @type {HTMLElement} */
-    r(this, f);
-    /** @type {HTMLSlotElement} */
-    r(this, C);
-    /** @type {HTMLSlotElement} */
-    r(this, h);
-    /** @type {AbortController} */
-    r(this, m);
-    r(this, n, {
-      isChildrenReady: !1,
-      templateNode: null,
-      loadingThrottle: null
-    });
-    w(this, "state", this.properties({
-      rows: {
-        type: Number,
-        default: 4,
-        observer: async (t) => {
-          await c(this, l, v).call(this), s(this, y).call(this, t), s(this, p).call(this, this.animated);
-        }
-      },
-      animated: {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          await c(this, l, v).call(this), s(this, p).call(this, t);
-        }
-      },
-      count: {
-        type: Number,
-        default: 1,
-        observer: async (t) => {
-          await c(this, l, v).call(this);
-          const i = c(this, l, T).call(this), o = c(this, l, L).call(this, t, i), [d] = i, b = i.length > 1, M = (d == null ? void 0 : d.tagName) === "EA-SKELETON-ITEM";
-          b || M ? (i.forEach((R) => R.remove()), this.appendChild(o)) : (d.innerHTML = "", d.appendChild(o));
-        }
-      },
-      "throttle-leading": {
-        type: Number,
-        default: 0,
-        observer: () => {
-        }
-      },
-      "throttle-trailing": {
-        type: Number,
-        default: 0,
-        observer: () => {
-        }
-      },
-      loading: {
-        type: Boolean,
-        default: !0,
-        observer: (t) => {
-          if (this["throttle-trailing"] || this["throttle-leading"])
-            try {
-              clearTimeout(s(this, n).loadingThrottle), s(this, n).loadingThrottle = null;
-            } catch {
-            }
-          s(this, n).loadingThrottle = N.timeout(
-            () => {
-              this.updateContainerClasslist();
-            },
-            (t ? this["throttle-trailing"] : this["throttle-leading"]) || 0
-          );
-        }
-      }
-    }));
-    /**
-     * 初始化默认骨架屏
-     * @param {Number} rows
-     * @returns
-     */
-    r(this, y, (t = this.rows) => {
-      this.querySelectorAll("ea-skeleton-item").length || (s(this, h).innerHTML = this.html(`
-      ${Array.from({ length: t }).map(
-        () => N.EaElement.h("ea-skeleton-item", null, {
-          variant: "p",
-          animated: this.animated
-        })
-      ).join("")}`));
-    });
-    /**
-     * 更新动画状态
-     * @param {boolean} isAnimated
-     */
-    r(this, p, (t) => {
-      s(this, h).assignedElements().filter((o) => o.tagName.toLocaleLowerCase() === "ea-skeleton-item").concat([...s(this, h).querySelectorAll("ea-skeleton-item")]).forEach((o) => o.toggleAttribute("animated", t));
-    });
-    this.stylesheet = H, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "rows",
-      "animated",
-      "count",
-      "loading",
-      "throttle",
-      "throttle-trailing",
-      "throttle-leading"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-skeleton",
-      {},
-      {
-        loading: this.loading
-      }
-    );
-    return s(this, f).className = t, t;
-  }
-  async $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-skeleton' part='container'>
-        <slot id="default" part="default-slot"></slot>
-        <slot id="template" name="template" part="template-slot"></slot>
-      </div>
-    `, u(this, f, this.shadowRoot.querySelector(".ea-skeleton")), u(this, C, this.shadowRoot.querySelector("#default")), u(this, h, this.shadowRoot.querySelector("#template")), this.updateContainerClasslist();
-  }
-  async connectedCallback() {
-    var i;
-    super.connectedCallback(), (i = s(this, m)) == null || i.abort(), u(this, m, new AbortController());
-    const t = () => {
-      s(this, p).call(this, this.animated);
-    };
-    s(this, y).call(this), s(this, h).addEventListener("slotchange", t, {
-      signal: s(this, m).signal
-    });
-  }
-  $beforeUnmounted() {
-    var t;
-    (t = s(this, m)) == null || t.abort();
-  }
-}
-f = new WeakMap(), C = new WeakMap(), h = new WeakMap(), m = new WeakMap(), n = new WeakMap(), l = new WeakSet(), v = async function() {
-  s(this, n).isChildrenReady || (await customElements.whenDefined("ea-skeleton-item"), s(this, n).isChildrenReady = !0);
-}, /**
- * 获取模板元素
- * @returns {HTMLElement[]}
- */
-T = function() {
-  const t = [...this.querySelectorAll("[slot='template']")];
-  return t.length ? t : [s(this, h)];
-}, /**
- * 克隆模板元素
- * @param {HTMLElement[]} elements
- * @returns {DocumentFragment}
- */
-A = function(t) {
-  if (s(this, n).templateNode) return s(this, n).templateNode;
-  const i = document.createDocumentFragment();
-  return t.forEach((o) => i.appendChild(o.cloneNode(!0))), s(this, n).templateNode = i, i;
-}, /**
- * 渲染模板元素
- * @param {number} count
- * @param {HTMLElement[]} elements
- * @returns {DocumentFragment}
- */
-L = function(t, i) {
-  const o = c(this, l, A).call(this, i), d = document.createDocumentFragment();
-  for (let b = 0; b < t; b++)
-    d.appendChild(o.cloneNode(!0));
-  return d;
-}, y = new WeakMap(), p = new WeakMap();
-window.customElements.get("ea-skeleton") || window.customElements.define("ea-skeleton", B);
-const I = `
-    <svg id="skeletonImagePlaceholder" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" part="image-svg">
-        <path fill="#c0c4cc" d="M0 0h100v100H0z" />
-        <path fill="#fff" d="M15 20h70v60H15z" />
-        <circle r="8" cx="32" cy="35" fill="#c0c4cc" />
-        <path d="M60 42.5L39 75h42z" fill="#c0c4cc" />
-        <path d="M35 52.5L20 75h-4 32z" fill="#c0c4cc" />
-    </svg>
-`;
-var g;
-class z extends S {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    r(this, g);
-    w(this, "state", this.properties({
-      variant: {
-        type: [
-          "p",
-          "text",
-          "h1",
-          "h3",
-          "caption",
-          "button",
-          "image",
-          "circle",
-          "rect"
-        ],
-        default: "p",
-        observer: (t) => {
-          t === "image" && (s(this, g).innerHTML = I), this.updateContainerClasslist();
-        }
-      },
-      animated: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      }
-    }));
-    this.stylesheet = $, this.$render();
-  }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "variant", "animated"];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-skeleton-item",
-      {
-        ["--" + this.variant]: this.variant
-      },
-      {
-        animated: this.animated
-      }
-    );
-    return s(this, g).className = t, t;
-  }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-skeleton-item' part='container'></div>
-    `, u(this, g, this.shadowRoot.querySelector(".ea-skeleton-item"));
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-}
-g = new WeakMap();
-window.customElements.get("ea-skeleton-item") || window.customElements.define("ea-skeleton-item", z);
-export {
-  B as EaSkeleton,
-  z as EaSkeletonItem
-};

package/dist/components/ea-slider.js

@@ -1,421 +0,0 @@
-var z = Object.defineProperty;
-var B = (a) => {
-  throw TypeError(a);
-};
-var I = (a, r, t) => r in a ? z(a, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[r] = t;
-var E = (a, r, t) => I(a, typeof r != "symbol" ? r + "" : r, t), F = (a, r, t) => r.has(a) || B("Cannot " + t);
-var e = (a, r, t) => (F(a, r, "read from private field"), t ? t.call(a) : r.get(a)), i = (a, r, t) => r.has(a) ? B("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, t), c = (a, r, t, s) => (F(a, r, "write to private field"), s ? s.call(a, t) : r.set(a, t), t);
-import { F as P } from "../core/FormBase.js";
-import { s as H } from "../css/ea-slider.style.js";
-import { E as X } from "../utils/Variables.js";
-import "./ea-tooltip.js";
-import "./ea-input-number.js";
-import { n as Y } from "./ea-calendar2.js";
-import { E as O } from "../utils/Utils.js";
-var k, v, l, b, g, y, p, $, h, w, u, C, V, N, x, d, M, S, A, D, L, q, R;
-class U extends P {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    i(this, k);
-    /** @type {HTMLElement} */
-    i(this, v);
-    /** @type {HTMLElement} */
-    i(this, l);
-    /** @type {HTMLElement} */
-    i(this, b);
-    /** @type {HTMLElement} */
-    i(this, g);
-    /** @type {HTMLElement} */
-    i(this, y);
-    /** @type {HTMLElement} */
-    i(this, p);
-    /** @type {HTMLElement} */
-    i(this, $);
-    /** @type {AbortController} */
-    i(this, h, new AbortController());
-    i(this, w, {
-      /** @type {AbortController} */
-      input: null
-    });
-    i(this, u, {
-      isInputNumberDefined: !1,
-      isDragging: !1,
-      startX: 0,
-      startY: 0
-    });
-    E(this, "state", this.properties({
-      label: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          e(this, $).textContent = t;
-        }
-      },
-      value: {
-        type: Number,
-        default: 0,
-        observer: (t) => {
-          const s = Math.max(this.min, Math.min(this.max, t));
-          this.setValue(s), e(this, d).call(this);
-        }
-      },
-      min: {
-        type: Number,
-        default: 0,
-        observer: () => {
-          e(this, d).call(this);
-        }
-      },
-      max: {
-        type: Number,
-        default: 100,
-        observer: () => {
-          e(this, d).call(this);
-        }
-      },
-      "show-stops": {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.updateContainerClasslist(), t && e(this, C).call(this);
-        }
-      },
-      step: {
-        type: Number,
-        default: 1,
-        observer: (t) => {
-          e(this, d).call(this);
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.updateContainerClasslist();
-        }
-      },
-      vertical: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          e(this, d).call(this);
-        }
-      },
-      "show-tooltip": {
-        type: Boolean,
-        default: !0,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      placement: {
-        type: [
-          "top",
-          "top-start",
-          "top-end",
-          "bottom",
-          "bottom-start",
-          "bottom-end",
-          "left",
-          "left-start",
-          "left-end",
-          "right",
-          "right-start",
-          "right-end"
-        ],
-        default: "top",
-        observer: (t) => {
-          e(this, l).setAttribute("placement", t);
-        }
-      },
-      "show-input": {
-        type: Boolean,
-        default: !1,
-        observer: async (t) => {
-          var s;
-          e(this, u).isInputNumberDefined || (await customElements.whenDefined("ea-input-number"), e(this, u).isInputNumberDefined = !0), (s = e(this, w).input) == null || s.abort(), e(this, d).call(this), t && (e(this, w).input = new AbortController(), e(this, p).addEventListener("ea-change", e(this, D), {
-            signal: e(this, w).input.signal
-          }));
-        }
-      },
-      size: {
-        type: X,
-        default: "",
-        observer: async (t) => {
-          this.updateContainerClasslist(), this["show-input"] && e(this, p).setAttribute("size", t);
-        }
-      },
-      required: {
-        type: Boolean,
-        default: !1
-      }
-    }));
-    E(this, "propState", this.properties({
-      marks: {
-        props: !0,
-        type: Object,
-        default: null,
-        observer: () => {
-          e(this, N).call(this);
-        }
-      }
-    }));
-    E(this, "funcStates", this.properties({
-      formatTooltip: {
-        rawFunction: !0,
-        props: !0,
-        type: Function,
-        default: (t) => (s) => s,
-        observer: () => {
-          e(this, d).call(this);
-        }
-      }
-    }));
-    /**
-     * 渲染 stop 元素（包括步长节点和 marks 节点）
-     */
-    i(this, C, () => {
-      const t = [], s = this.step, m = (this.max - this.min) / s + 1;
-      if (this["show-stops"])
-        for (let n = 0; n < m; n++) {
-          const o = this.min + s * n, T = (o - this.min) / (this.max - this.min) * 100;
-          t.push({
-            value: o,
-            percentage: T,
-            type: "stop",
-            className: this.ns.e("stop"),
-            part: "stop"
-          });
-        }
-      if (this.marks)
-        for (const n in this.marks) {
-          const o = parseFloat(n);
-          if (isNaN(o) || o < this.min || o > this.max) continue;
-          const T = (o - this.min) / (this.max - this.min) * 100;
-          t.push({
-            value: o,
-            percentage: T,
-            type: "mark-stop",
-            className: `${this.ns.e("stop")} ${this.ns.e("mark-stop")}`,
-            part: "stop mark-stop",
-            label: this.marks[n]
-          });
-        }
-      t.sort((n, o) => n.value - o.value);
-      const f = t.map(
-        (n) => O.EaElement.h("div", n.className, {
-          part: n.part,
-          style: [`${this.vertical ? "top" : "left"}: ${n.percentage}%;`]
-        })
-      );
-      e(this, v).innerHTML = this.html(f.join(""));
-    });
-    /**
-     * 渲染 marks 标签
-     */
-    i(this, V, () => {
-      if (!this.marks) {
-        e(this, y).innerHTML = "";
-        return;
-      }
-      let t = "";
-      for (const s in this.marks) {
-        const m = parseFloat(s);
-        if (isNaN(m) || m < this.min || m > this.max) continue;
-        const f = (m - this.min) / (this.max - this.min) * 100, n = this.marks[s];
-        this.vertical ? t += `
-          <div class='${this.ns.e("mark")}' style="top: ${f}%;">
-            <div class='${this.ns.e("mark-label")}'>${n}</div>
-          </div>
-        ` : t += `
-          <div class='${this.ns.e("mark")}' style="left: ${f}%;">
-            <div class='${this.ns.e("mark-label")}'>${n}</div>
-          </div>
-        `;
-      }
-      e(this, y).innerHTML = this.html(t);
-    });
-    /**
-     * 统一渲染 marks 和 stops
-     */
-    i(this, N, () => {
-      e(this, C).call(this), e(this, V).call(this);
-    });
-    /**
-     * 根据鼠标位置计算滑块值
-     * @param {number} position 鼠标位置
-     * @returns {number} 滑块值
-     */
-    i(this, x, (t) => {
-      const s = e(this, v).getBoundingClientRect(), m = this.vertical ? (t - s.top) / s.height : (t - s.left) / s.width, f = Math.max(0, Math.min(1, m)), n = this.min + f * (this.max - this.min), o = Math.round(n / this.step) * this.step;
-      return Math.max(this.min, Math.min(this.max, o));
-    });
-    /**
-     * 更新滑块位置和 tooltip 内容
-     */
-    i(this, d, () => {
-      const t = this.value, s = (t - this.min) / (this.max - this.min) * 100;
-      this.vertical ? (e(this, l).style.top = `${s}%`, e(this, l).style.left = "50%") : (e(this, l).style.left = `${s}%`, e(this, l).style.top = "50%"), e(this, g).textContent = this.formatTooltip(t), e(this, g).style.display = this["show-tooltip"] ? "block" : "none", this["show-input"] && (e(this, p).value = t, e(this, p).min = this.min, e(this, p).max = this.max, e(this, p).step = this.step), this.updateContainerClasslist();
-    });
-    /**
-     * 鼠标按下时，更新滑块值
-     * @param {MouseEvent} e
-     */
-    i(this, M, (t) => {
-      if (this.disabled) return;
-      t.preventDefault(), t.stopPropagation(), e(this, u).isDragging = !0, e(this, u).startX = t.clientX, e(this, u).startY = t.clientY, e(this, l).setAttribute("visible", "true");
-      const s = e(this, x).call(this, this.vertical ? t.clientY : t.clientX);
-      this.value = s, this.emit("input", { detail: { value: this.value } });
-    });
-    /**
-     * 鼠标移动时，更新滑块值
-     * @param {MouseEvent} e
-     */
-    i(this, S, (t) => {
-      if (!e(this, u).isDragging || this.disabled) return;
-      t.preventDefault(), t.stopPropagation();
-      const s = e(this, x).call(this, this.vertical ? t.clientY : t.clientX);
-      this.value = s, this.emit("input", { detail: { value: this.value } });
-    });
-    /**
-     * 鼠标松开时，更新滑块值
-     */
-    i(this, A, () => {
-      e(this, u).isDragging && (e(this, u).isDragging = !1, e(this, l).setAttribute("visible", "false"), this.emit("change", { detail: { value: this.value } }));
-    });
-    /**
-     * 输入框值改变时，更新滑块值
-     * @param {CustomEvent} e
-     */
-    i(this, D, (t) => {
-      t.preventDefault(), t.stopImmediatePropagation();
-      const s = parseFloat(t.detail.currentValue), m = Math.max(this.min, Math.min(this.max, s));
-      this.value = m, this.emit("change", { detail: { value: this.value } });
-    });
-    /**
-     * 鼠标进入滑块时，显示 tooltip 的 触发 元素
-     */
-    i(this, L, () => {
-      this.disabled || e(this, l).setAttribute("visible", "true");
-    });
-    /**
-     * 鼠标离开滑块时，隐藏 tooltip 的 触发 元素
-     */
-    i(this, q, () => {
-      this.disabled || e(this, u).isDragging || e(this, l).setAttribute("visible", "false");
-    });
-    i(this, R, () => {
-      var t;
-      (t = e(this, h)) == null || t.abort(), c(this, h, new AbortController()), e(this, v).addEventListener("mousedown", e(this, M), {
-        signal: e(this, h).signal
-      }), e(this, b).addEventListener("mousedown", e(this, M), {
-        signal: e(this, h).signal
-      }), e(this, b).addEventListener("mouseenter", e(this, L), {
-        signal: e(this, h).signal
-      }), e(this, b).addEventListener("mouseleave", e(this, q), {
-        signal: e(this, h).signal
-      }), document.addEventListener("mousemove", e(this, S), {
-        signal: e(this, h).signal
-      }), document.addEventListener("mouseup", e(this, A), {
-        signal: e(this, h).signal
-      });
-    });
-    this.stylesheet = H, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "label",
-      "value",
-      "min",
-      "max",
-      "step",
-      "disabled",
-      "vertical",
-      "show-tooltip",
-      "placement",
-      "size",
-      "show-stops",
-      "show-input",
-      "required"
-    ];
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-slider",
-      {
-        ["--" + this.size]: this.size
-      },
-      {
-        disabled: this.disabled,
-        vertical: this.vertical,
-        "show-tooltip": this["show-tooltip"],
-        "show-stops": this["show-stops"],
-        "show-input": this["show-input"]
-      }
-    );
-    return e(this, k).className = t, t;
-  }
-  $render() {
-    const t = Y("slider");
-    this.ns = t, this.shadowRoot.innerHTML = `
-      <label class='${t.e("form-label")}' part='form-label'></label>
-      <div class='${t.b()}' part='container'>
-        <div class='${t.e("runway")}' part='runway'>
-          <div class='${t.e("rail")}' part='rail'></div>
-          <ea-tooltip class='${t.e("trigger")}' part='trigger' flip="false" trigger="customized">
-            <div class='${t.e("thumb")}' part='thumb' slot="reference"></div>
-            <div class='${t.e("tooltip")}' part='tooltip'></div>
-          </ea-tooltip>
-          <div class='${t.e("marks")}' part='marks'></div>
-        </div>
-        <ea-input-number class='${t.e("input")}' part='input'></ea-input-number>
-      </div>
-    `, c(this, $, this.shadowRoot.querySelector(t.ce("form-label"))), c(this, k, this.shadowRoot.querySelector(t.cb())), c(this, v, this.shadowRoot.querySelector(t.ce("rail"))), c(this, l, this.shadowRoot.querySelector(t.ce("trigger"))), c(this, b, this.shadowRoot.querySelector(t.ce("thumb"))), c(this, g, this.shadowRoot.querySelector(t.ce("tooltip"))), c(this, y, this.shadowRoot.querySelector(t.ce("marks"))), c(this, p, this.shadowRoot.querySelector(t.ce("input")));
-  }
-  /**
-   * 获取验证目标元素
-   * @returns {HTMLElement}
-   */
-  get validationTarget() {
-    return e(this, p);
-  }
-  /**
-   * 更新表单验证状态
-   */
-  updateValidity() {
-    const t = this.value !== null && this.value !== void 0;
-    this.required && !t ? this.internals.setValidity({ valueMissing: !0 }, "请设置一个值", this) : this.internals.setValidity({}, "", this);
-  }
-  /**
-   * 检查表单字段的有效性
-   * @returns {boolean}
-   */
-  checkValidity() {
-    return this.updateValidity(), this.internals.validity.valid;
-  }
-  /**
-   * 报告表单字段的有效性（显示验证提示）
-   * @returns {boolean}
-   */
-  reportValidity() {
-    return this.updateValidity(), this.internals.reportValidity();
-  }
-  connectedCallback() {
-    super.connectedCallback(), e(this, R).call(this), e(this, d).call(this);
-  }
-  $beforeUnmounted() {
-    var t;
-    (t = e(this, h)) == null || t.abort();
-  }
-}
-k = new WeakMap(), v = new WeakMap(), l = new WeakMap(), b = new WeakMap(), g = new WeakMap(), y = new WeakMap(), p = new WeakMap(), $ = new WeakMap(), h = new WeakMap(), w = new WeakMap(), u = new WeakMap(), C = new WeakMap(), V = new WeakMap(), N = new WeakMap(), x = new WeakMap(), d = new WeakMap(), M = new WeakMap(), S = new WeakMap(), A = new WeakMap(), D = new WeakMap(), L = new WeakMap(), q = new WeakMap(), R = new WeakMap();
-window.customElements.get("ea-slider") || window.customElements.define("ea-slider", U);
-export {
-  U as EaSlider
-};