easy-component-ui 2.1.0 → 3.0.0

package/dist/components/ea-skeleton.js

@@ -0,0 +1,246 @@
+var N = Object.defineProperty;
+var y = (t) => {
+  throw TypeError(t);
+};
+var S = (t, s, e) => s in t ? N(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var v = (t, s, e) => S(t, typeof s != "symbol" ? s + "" : s, e), w = (t, s, e) => s.has(t) || y("Cannot " + e);
+var a = (t, s, e) => (w(t, s, "read from private field"), e ? e.call(t) : s.get(t)), o = (t, s, e) => s.has(t) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), c = (t, s, e, i) => (w(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e);
+import { B as E } from "./Base.js";
+import { s as T } from "../css/ea-skeleton.style.js";
+import { E as k } from "../utils/Utils.js";
+import { s as A } from "../css/ea-skeleton-item.style.js";
+var u, f, r, h, l, g, p;
+class M extends E {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    o(this, u);
+    /** @type {HTMLElement} */
+    o(this, f);
+    /** @type {HTMLElement} */
+    o(this, r);
+    /** @type {AbortController} */
+    o(this, h);
+    o(this, l, {
+      isChildrenReady: !1,
+      templateNode: null,
+      loadingThrottle: null
+    });
+    v(this, "state", this.properties({
+      rows: {
+        type: Number,
+        default: 4,
+        observer: () => {
+        }
+      },
+      animated: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          a(this, p).call(this, e);
+        }
+      },
+      count: {
+        type: Number,
+        default: 1,
+        observer: async (e) => {
+          var C;
+          a(this, l).isChildrenReady || (await customElements.whenDefined("ea-skeleton-item"), a(this, l).isChildrenReady = !0);
+          let i = [...this.querySelectorAll("[slot='template']")];
+          if (i.length || (i = [a(this, r)]), !a(this, l).templateNode) {
+            const n = document.createDocumentFragment();
+            i.forEach((b) => {
+              n.appendChild(b.cloneNode(!0));
+            }), a(this, l).templateNode = n;
+          }
+          const d = document.createDocumentFragment();
+          for (let n = 0; n < e; n++) {
+            const b = a(this, l).templateNode.cloneNode(!0);
+            d.appendChild(b);
+          }
+          i.length > 1 ? (i.forEach((n) => {
+            n.remove();
+          }), this.appendChild(d)) : i.length === 1 && i[0].tagName === "EA-SKELETON-ITEM" ? ((C = i[0]) == null || C.remove(), this.appendChild(d)) : (i[0].innerHTML = "", i[0].appendChild(d));
+        }
+      },
+      "throttle-leading": {
+        type: Number,
+        default: 0,
+        observer: () => {
+        }
+      },
+      "throttle-trailing": {
+        type: Number,
+        default: 0,
+        observer: () => {
+        }
+      },
+      loading: {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+          if (this["throttle-trailing"] || this["throttle-leading"])
+            try {
+              clearTimeout(a(this, l).loadingThrottle), a(this, l).loadingThrottle = null;
+            } catch {
+            }
+          a(this, l).loadingThrottle = k.timeout(
+            () => {
+              this.updateContainerClasslist();
+            },
+            (e ? this["throttle-trailing"] : this["throttle-leading"]) || 0
+          );
+        }
+      }
+    }));
+    /**
+     * 初始化默认骨架屏
+     * @param {Number} rows
+     * @returns
+     */
+    o(this, g, (e = this.rows) => {
+      this.querySelectorAll("ea-skeleton-item").length || (a(this, r).innerHTML = `
+      ${Array.from({ length: e }).map(
+        () => k.EaElement.h("ea-skeleton-item", null, {
+          variant: "p",
+          animated: this.animated
+        })
+      ).join("")}`);
+    });
+    /**
+     * 更新动画状态
+     * @param {boolean} isAnimated
+     */
+    o(this, p, (e) => {
+      [...this.querySelectorAll("ea-skeleton-item")].forEach((d) => d.toggleAttribute("animated", e));
+    });
+    this.stylesheet = T, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "rows",
+      "animated",
+      "count",
+      "loading",
+      "throttle",
+      "throttle-trailing",
+      "throttle-leading"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-skeleton",
+      {},
+      {
+        loading: this.loading
+      }
+    );
+    return a(this, u).className = e, e;
+  }
+  async $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-skeleton' part='container'>
+        <slot id="default"></slot>
+        <slot id="template" name="template"></slot>
+      </div>
+    `, c(this, u, this.shadowRoot.querySelector(".ea-skeleton")), c(this, f, this.shadowRoot.querySelector("#default")), c(this, r, this.shadowRoot.querySelector("#template")), this.updateContainerClasslist();
+  }
+  async connectedCallback() {
+    var i;
+    super.connectedCallback(), (i = a(this, h)) == null || i.abort(), c(this, h, new AbortController());
+    const e = () => {
+      a(this, p).call(this, this.animated);
+    };
+    a(this, g).call(this), a(this, r).addEventListener("slotchange", e, {
+      signal: a(this, h).signal
+    });
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = a(this, h)) == null || e.abort();
+  }
+}
+u = new WeakMap(), f = new WeakMap(), r = new WeakMap(), h = new WeakMap(), l = new WeakMap(), g = new WeakMap(), p = new WeakMap();
+window.customElements.get("ea-skeleton") || window.customElements.define("ea-skeleton", M);
+const L = `
+    <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 m;
+class R extends E {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    o(this, m);
+    v(this, "state", this.properties({
+      variant: {
+        type: [
+          "p",
+          "text",
+          "h1",
+          "h3",
+          "caption",
+          "button",
+          "image",
+          "circle",
+          "rect"
+        ],
+        default: "p",
+        observer: (e) => {
+          e === "image" && (a(this, m).innerHTML = L), this.updateContainerClasslist();
+        }
+      },
+      animated: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      }
+    }));
+    this.stylesheet = A, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "variant", "animated"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-skeleton-item",
+      {
+        ["--" + this.variant]: this.variant
+      },
+      {
+        animated: this.animated
+      }
+    );
+    return a(this, m).className = e, e;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-skeleton-item' part='container'></div>
+    `, c(this, m, this.shadowRoot.querySelector(".ea-skeleton-item"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+m = new WeakMap();
+window.customElements.get("ea-skeleton-item") || window.customElements.define("ea-skeleton-item", R);
+export {
+  M as EaSkeleton,
+  R as EaSkeletonItem
+};

package/dist/components/ea-slider.js

@@ -0,0 +1,421 @@
+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
+};