easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-slider.js

@@ -1,430 +1,476 @@
-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), P = (a, r, t) => r.has(a) || B("Cannot " + t);
-var e = (a, r, t) => (P(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) => (P(a, r, "write to private field"), s ? s.call(a, t) : r.set(a, t), t);
-import { F as H } from "../core/FormBase.js";
-import { s as X } from "../css/ea-slider.style.js";
-import { E as Y } from "../utils/Variables.js";
-import "./ea-tooltip.js";
 import "./ea-input-number.js";
-import { n as O } from "./ea-calendar2.js";
-import { E as U } from "../utils/Utils.js";
-var k, v, l, b, g, y, d, x, u, w, p, $, V, S, N, C, m, M, A, D, L, q, F, R;
-class j extends H {
+import "./ea-tooltip.js";
+import "../core/EaBase.ts.js";
+import { E as f } from "../core/EaFormAssociatedBase.ts.js";
+import { q as p, a as h, l as u, C as y, p as b } from "../core/decorator.js";
+import { E as g } from "../utils/Enum.ts.js";
+import { h as v } from "../utils/html.ts.js";
+import { s as w } from "../css/ea-slider.style.js";
+import { c as x } from "../utils/bem.ts.js";
+class d extends Event {
+  constructor(e) {
+    super("change", { bubbles: !0, cancelable: !0, composed: !0 }), this.detail = e;
+  }
+}
+class c extends Event {
+  constructor(e) {
+    super("input", { bubbles: !0, cancelable: !0, composed: !0 }), this.detail = e;
+  }
+}
+var M = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (t, e, o, n) => {
+  for (var r = n > 1 ? void 0 : n ? k(e, o) : e, l = t.length - 1, m; l >= 0; l--)
+    (m = t[l]) && (r = (n ? m(e, o, r) : m(r)) || r);
+  return n && r && M(e, o, r), r;
+};
+const _ = "ea-slider", a = x(_);
+let s = class extends f {
   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, d);
-    /** @type {HTMLElement} */
-    i(this, x);
-    /** @type {AbortController} */
-    i(this, u, new AbortController());
-    i(this, w, {
-      /** @type {AbortController} */
-      input: null
-    });
-    i(this, p, {
-      isInputNumberDefined: !1,
+    super(...arguments), this._states = {
       isDragging: !1,
       startX: 0,
-      startY: 0
-    });
-    E(this, "state", this.properties({
-      label: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          e(this, x).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, m).call(this);
-        }
-      },
-      min: {
-        type: Number,
-        default: 0,
-        observer: () => {
-          e(this, m).call(this);
-        }
-      },
-      max: {
-        type: Number,
-        default: 100,
-        observer: () => {
-          e(this, m).call(this);
-        }
-      },
-      "show-stops": {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.updateContainerClasslist(), t && e(this, $).call(this);
-        }
-      },
-      step: {
-        type: Number,
-        default: 1,
-        observer: (t) => {
-          e(this, m).call(this);
-        }
-      },
-      disabled: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          this.updateContainerClasslist();
-        }
-      },
-      vertical: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          e(this, m).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, p).isInputNumberDefined || (await customElements.whenDefined("ea-input-number"), e(this, p).isInputNumberDefined = !0), (s = e(this, w).input) == null || s.abort(), e(this, m).call(this), t && (e(this, w).input = new AbortController(), e(this, d).addEventListener("ea-change", e(this, L), {
-            signal: e(this, w).input.signal
-          }));
-        }
-      },
-      size: {
-        type: Y,
-        default: "",
-        observer: async (t) => {
-          this.updateContainerClasslist(), this["show-input"] && e(this, d).setAttribute("size", t);
-        }
-      },
-      required: {
-        type: Boolean,
-        default: !1
-      }
-    }));
-    E(this, "propState", this.properties({
-      marks: {
-        props: !0,
-        type: Object,
-        default: null,
-        observer: () => {
-          e(this, S).call(this);
-        }
-      }
-    }));
-    E(this, "funcStates", this.properties({
-      formatTooltip: {
-        rawFunction: !0,
-        props: !0,
-        type: Function,
-        default: (t) => (s) => s,
-        observer: () => {
-          e(this, m).call(this);
-        }
-      }
-    }));
-    /**
-     * 渲染 stop 元素（包括步长节点和 marks 节点）
-     */
-    i(this, $, () => {
-      const t = [], s = this.step, o = (this.max - this.min) / s + 1;
-      if (this["show-stops"])
-        for (let n = 0; n < o; n++) {
-          const h = this.min + s * n, T = (h - this.min) / (this.max - this.min) * 100;
-          t.push({
-            value: h,
-            percentage: T,
-            type: "stop",
-            className: this.ns.e("stop"),
-            part: "stop"
-          });
-        }
-      if (this.marks)
-        for (const n in this.marks) {
-          const h = parseFloat(n);
-          if (isNaN(h) || h < this.min || h > this.max) continue;
-          const T = (h - this.min) / (this.max - this.min) * 100;
-          t.push({
-            value: h,
-            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, h) => n.value - h.value);
-      const f = t.map(
-        (n) => U.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 o = parseFloat(s);
-        if (isNaN(o) || o < this.min || o > this.max) continue;
-        const f = (o - 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, S, () => {
-      e(this, $).call(this), e(this, V).call(this);
-    });
-    /**
-     * 修复浮点数精度问题
-     * @param {number} value 原始值
-     * @returns {number} 修复精度后的值
-     */
-    i(this, N, (t) => {
-      const s = this.step.toString(), o = s.includes(".") ? s.split(".")[1].length : 0;
-      return parseFloat(t.toFixed(o));
-    });
-    /**
-     * 根据鼠标位置计算滑块值
-     * @param {number} position 鼠标位置
-     * @returns {number} 滑块值
-     */
-    i(this, C, (t) => {
-      const s = e(this, v).getBoundingClientRect(), o = this.vertical ? (t - s.top) / s.height : (t - s.left) / s.width, f = Math.max(0, Math.min(1, o)), n = this.min + f * (this.max - this.min), h = Math.round(n / this.step) * this.step;
-      return e(this, N).call(this, Math.max(this.min, Math.min(this.max, h)));
-    });
-    /**
-     * 更新滑块位置和 tooltip 内容
-     */
-    i(this, m, () => {
-      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, d).value = t, e(this, d).min = this.min, e(this, d).max = this.max, e(this, d).step = this.step), this.updateContainerClasslist();
-    });
-    /**
-     * 鼠标按下时，更新滑块值
-     * @param {MouseEvent} e
-     */
-    i(this, M, (t) => {
-      if (this.disabled) return;
-      t.preventDefault(), t.stopPropagation(), e(this, p).isDragging = !0, e(this, p).startX = t.clientX, e(this, p).startY = t.clientY, e(this, l).setAttribute("visible", "true");
-      const s = e(this, C).call(this, this.vertical ? t.clientY : t.clientX);
-      this.value = s, this.emit("input", { detail: { value: this.value } });
-    });
-    /**
-     * 鼠标移动时，更新滑块值
-     * @param {MouseEvent} e
-     */
-    i(this, A, (t) => {
-      if (!e(this, p).isDragging || this.disabled) return;
-      t.preventDefault(), t.stopPropagation();
-      const s = e(this, C).call(this, this.vertical ? t.clientY : t.clientX);
-      this.value = s, this.emit("input", { detail: { value: this.value } });
-    });
-    /**
-     * 鼠标松开时，更新滑块值
-     */
-    i(this, D, () => {
-      e(this, p).isDragging && (e(this, p).isDragging = !1, e(this, l).setAttribute("visible", "false"), this.emit("change", { detail: { value: this.value } }));
-    });
-    /**
-     * 输入框值改变时，更新滑块值
-     * @param {CustomEvent} e
-     */
-    i(this, L, (t) => {
+      startY: 0,
+      isInputNumberDefined: !1
+    }, this.label = "", this.value = 0, this.min = 0, this.max = 100, this.showStops = !1, this.step = 1, this.disabled = !1, this.vertical = !1, this.showTooltip = !0, this.placement = "top", this.showInput = !1, this.size = "", this.required = !1, this.marks = null, this.formatTooltip = (t) => t, this._onInputChange = (t) => {
       t.preventDefault(), t.stopImmediatePropagation();
-      const s = parseFloat(t.detail.currentValue), o = Math.max(this.min, Math.min(this.max, s));
-      this.value = o, this.emit("change", { detail: { value: this.value } });
-    });
-    /**
-     * 鼠标进入滑块时，显示 tooltip 的 触发 元素
-     */
-    i(this, q, () => {
-      this.disabled || e(this, l).setAttribute("visible", "true");
-    });
-    /**
-     * 鼠标离开滑块时，隐藏 tooltip 的 触发 元素
-     */
-    i(this, F, () => {
-      this.disabled || e(this, p).isDragging || e(this, l).setAttribute("visible", "false");
-    });
-    i(this, R, () => {
-      var t;
-      (t = e(this, u)) == null || t.abort(), c(this, u, new AbortController()), e(this, v).addEventListener("mousedown", e(this, M), {
-        signal: e(this, u).signal
-      }), e(this, b).addEventListener("mousedown", e(this, M), {
-        signal: e(this, u).signal
-      }), e(this, b).addEventListener("mouseenter", e(this, q), {
-        signal: e(this, u).signal
-      }), e(this, b).addEventListener("mouseleave", e(this, F), {
-        signal: e(this, u).signal
-      }), document.addEventListener("mousemove", e(this, A), {
-        signal: e(this, u).signal
-      }), document.addEventListener("mouseup", e(this, D), {
-        signal: e(this, u).signal
-      });
-    });
-    this.stylesheet = X, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "label",
-      "value",
-      "min",
-      "max",
-      "step",
-      "disabled",
-      "vertical",
-      "show-tooltip",
-      "placement",
-      "size",
-      "show-stops",
-      "show-input",
-      "required"
-    ];
+      const e = parseFloat(t.detail.currentValue), o = Math.max(this.min, Math.min(this.max, e));
+      o !== this.value && (this.value = o, this.dispatchEvent(new d({ value: this.value })));
+    };
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
   updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-slider",
+    const t = a(
       {
-        ["--" + this.size]: this.size
+        [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"]
+        "show-tooltip": this.showTooltip,
+        "show-stops": this.showStops,
+        "show-input": this.showInput
       }
     );
-    return e(this, k).className = t, t;
+    return this._container && (this._container.className = t), t;
   }
-  $render() {
-    const t = O("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>
+  html() {
+    return `
+      <label class='${a.e("form-label")}' part='form-label'></label>
+      <div class='${a()}' part='container'>
+        <div class='${a.e("runway")}' part='runway'>
+          <div class='${a.e("rail")}' part='rail'></div>
+          <div class='${a.e("bar")}' part='bar'></div>
+          <ea-tooltip class='${a.e("trigger")}' part='trigger' flip="false" trigger="customized" placement="${this.placement}">
+            <div class='${a.e("thumb")}' part='thumb' slot="reference"></div>
+            <div class='${a.e("tooltip")}' part='tooltip'></div>
           </ea-tooltip>
-          <div class='${t.e("marks")}' part='marks'></div>
+          <div class='${a.e("marks")}' part='marks'></div>
         </div>
-        <ea-input-number class='${t.e("input")}' part='input'></ea-input-number>
+        <ea-input-number class='${a.e("input")}' part='input'></ea-input-number>
       </div>
-    `, c(this, x, 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, d, this.shadowRoot.querySelector(t.ce("input")));
+    `;
+  }
+  /** 渲染 stops 和 mark-stop 节点到 rail 中 */
+  _renderStops() {
+    if (!this._rail) return;
+    const t = [], e = (this.max - this.min) / this.step + 1;
+    if (this.showStops)
+      for (let r = 0; r < e; r++) {
+        const l = this.min + this.step * r, m = (l - this.min) / (this.max - this.min) * 100;
+        t.push({
+          value: l,
+          percentage: m,
+          type: "stop",
+          className: a.e("stop"),
+          part: "stop"
+        });
+      }
+    if (this.marks)
+      for (const r in this.marks) {
+        const l = parseFloat(r);
+        if (isNaN(l) || l < this.min || l > this.max) continue;
+        const m = (l - this.min) / (this.max - this.min) * 100;
+        t.push({
+          value: l,
+          percentage: m,
+          type: "mark-stop",
+          className: `${a.e("stop")} ${a.e("mark-stop")}`,
+          part: "stop mark-stop",
+          label: this.marks[r]
+        });
+      }
+    t.sort((r, l) => r.value - l.value);
+    const o = this.vertical ? "top" : "left", n = t.map(
+      (r) => `<div class="${r.className}" part="${r.part}" style="${o}: ${r.percentage}%;"></div>`
+    );
+    this._rail.innerHTML = v(n.join(""));
+  }
+  /** 渲染 mark 标签到 marks 容器中 */
+  _renderMarkLabels() {
+    if (!this._marks) return;
+    if (!this.marks) {
+      this._marks.innerHTML = "";
+      return;
+    }
+    const t = this.vertical ? "top" : "left";
+    let e = "";
+    for (const o in this.marks) {
+      const n = parseFloat(o);
+      if (isNaN(n) || n < this.min || n > this.max) continue;
+      const r = (n - this.min) / (this.max - this.min) * 100, l = this.marks[o];
+      e += `
+        <div class='${a.e("mark")}' style="${t}: ${r}%;">
+          <div class='${a.e("mark-label")}'>${l}</div>
+        </div>
+      `;
+    }
+    this._marks.innerHTML = v(e);
+  }
+  /** 统一渲染 stops 和 marks */
+  _renderMarks() {
+    this._renderStops(), this._renderMarkLabels();
   }
   /**
-   * 获取验证目标元素
-   * @returns {HTMLElement}
+   * 根据步长精度修正数值
+   * @param value - 需要修正精度的数值
+   * @returns 修正精度后的数值
    */
-  get validationTarget() {
-    return e(this, d);
+  _fixPrecision(t) {
+    const e = this.step.toString(), o = e.includes(".") ? e.split(".")[1].length : 0;
+    return parseFloat(t.toFixed(o));
   }
   /**
-   * 更新表单验证状态
+   * 根据鼠标位置计算滑块值
+   * @param position - 鼠标的 clientX 或 clientY 坐标
+   * @returns 计算并修正精度后的滑块值
    */
+  _getValueFromPosition(t) {
+    const e = this._rail.getBoundingClientRect(), o = this.vertical ? (t - e.top) / e.height : (t - e.left) / e.width, n = Math.max(0, Math.min(1, o)), r = this.min + n * (this.max - this.min), l = Math.round(r / this.step) * this.step;
+    return this._fixPrecision(
+      Math.max(this.min, Math.min(this.max, l))
+    );
+  }
+  /** 更新滑块位置、bar 宽度、tooltip 内容、输入框值及容器类名 */
+  _updateSlider() {
+    if (!this._trigger) return;
+    const t = this.value, e = (t - this.min) / (this.max - this.min) * 100;
+    this.vertical ? (this._trigger.style.top = `${e}%`, this._trigger.style.left = "50%", this._bar.style.width = "", this._bar.style.height = `${e}%`) : (this._trigger.style.left = `${e}%`, this._trigger.style.top = "50%", this._bar.style.width = `${e}%`, this._bar.style.height = ""), this._tooltip.textContent = String(this.formatTooltip(t)), this.showInput && this._input && (this._input.value = t, this._input.min = this.min, this._input.max = this.max, this._input.step = this.step), this.updateContainerClasslist();
+  }
+  /**
+   * 处理 showInput 属性变化，管理输入框事件监听
+   * @param newVal - showInput 的新值
+   */
+  async _handleShowInputChange(t) {
+    var e;
+    this._states.isInputNumberDefined || (await customElements.whenDefined("ea-input-number"), this._states.isInputNumberDefined = !0), (e = this._inputAbortController) == null || e.abort(), this._updateSlider(), t && (this._inputAbortController = new AbortController(), this._input.addEventListener("ea-change", this._onInputChange, {
+      signal: this._inputAbortController.signal
+    }));
+  }
+  _onMouseDown(t) {
+    if (this.disabled) return;
+    t.preventDefault(), t.stopPropagation(), this._states.isDragging = !0, this._states.startX = t.clientX, this._states.startY = t.clientY, this._trigger.toggleAttribute("visible", !0);
+    const e = this._getValueFromPosition(
+      this.vertical ? t.clientY : t.clientX
+    );
+    this.value = e, this.dispatchEvent(new c({ value: this.value }));
+  }
+  _onThumbMouseDown(t) {
+    if (this.disabled) return;
+    t.preventDefault(), t.stopPropagation(), this._states.isDragging = !0, this._states.startX = t.clientX, this._states.startY = t.clientY, this._trigger.toggleAttribute("visible", !0);
+    const e = this._getValueFromPosition(
+      this.vertical ? t.clientY : t.clientX
+    );
+    this.value = e, this.dispatchEvent(new c({ value: this.value }));
+  }
+  _onMouseMove(t) {
+    if (!this._states.isDragging || this.disabled) return;
+    t.preventDefault(), t.stopPropagation();
+    const e = this._getValueFromPosition(
+      this.vertical ? t.clientY : t.clientX
+    );
+    this.value = e, this.dispatchEvent(new c({ value: this.value }));
+  }
+  _onMouseUp() {
+    this._states.isDragging && (this._states.isDragging = !1, this._trigger.toggleAttribute("visible", !1), this.dispatchEvent(new d({ value: this.value })));
+  }
+  _onKeyDown(t) {
+    if (this.disabled) return;
+    let e = null;
+    const o = this.step * 10;
+    switch (t.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        t.preventDefault(), e = this._fixPrecision(
+          Math.min(this.max, this.value + this.step)
+        );
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        t.preventDefault(), e = this._fixPrecision(
+          Math.max(this.min, this.value - this.step)
+        );
+        break;
+      case "Home":
+        t.preventDefault(), e = this.min;
+        break;
+      case "End":
+        t.preventDefault(), e = this.max;
+        break;
+      case "PageUp":
+        t.preventDefault(), e = this._fixPrecision(Math.min(this.max, this.value + o));
+        break;
+      case "PageDown":
+        t.preventDefault(), e = this._fixPrecision(Math.max(this.min, this.value - o));
+        break;
+      default:
+        return;
+    }
+    e !== null && e !== this.value && (this.value = e, this._trigger.toggleAttribute("visible", !0), this.dispatchEvent(new c({ value: this.value })), this.dispatchEvent(new d({ value: this.value })));
+  }
+  _onBlur() {
+    this._trigger.toggleAttribute("visible", !1);
+  }
+  _onThumbMouseEnter() {
+    this.disabled || this._trigger.toggleAttribute("visible", !0);
+  }
+  _onThumbMouseLeave() {
+    this.disabled || this._states.isDragging || this._trigger.toggleAttribute("visible", !1);
+  }
+  get validationTarget() {
+    return this._input;
+  }
   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, m).call(this);
+  $mount() {
+    this.setAttribute("role", "slider"), this.tabIndex = 0, this._updateSlider();
   }
-  $beforeUnmounted() {
+  $beforeUnmount() {
     var t;
-    (t = e(this, u)) == null || t.abort();
+    (t = this._inputAbortController) == null || t.abort();
   }
-}
-k = new WeakMap(), v = new WeakMap(), l = new WeakMap(), b = new WeakMap(), g = new WeakMap(), y = new WeakMap(), d = new WeakMap(), x = new WeakMap(), u = new WeakMap(), w = new WeakMap(), p = new WeakMap(), $ = new WeakMap(), V = new WeakMap(), S = new WeakMap(), N = new WeakMap(), C = new WeakMap(), m = new WeakMap(), M = new WeakMap(), A = new WeakMap(), D = new WeakMap(), L = new WeakMap(), q = new WeakMap(), F = new WeakMap(), R = new WeakMap();
-window.customElements.get("ea-slider") || window.customElements.define("ea-slider", j);
+};
+i([
+  p(a.ce("form-label"))
+], s.prototype, "_label", 2);
+i([
+  p(a.cb())
+], s.prototype, "_container", 2);
+i([
+  p(a.ce("rail"))
+], s.prototype, "_rail", 2);
+i([
+  p(a.ce("bar"))
+], s.prototype, "_bar", 2);
+i([
+  p(a.ce("trigger"))
+], s.prototype, "_trigger", 2);
+i([
+  p(a.ce("thumb"))
+], s.prototype, "_thumb", 2);
+i([
+  p(a.ce("tooltip"))
+], s.prototype, "_tooltip", 2);
+i([
+  p(a.ce("marks"))
+], s.prototype, "_marks", 2);
+i([
+  p(a.ce("input"))
+], s.prototype, "_input", 2);
+i([
+  h({
+    type: String,
+    default: "",
+    a11y: {
+      ariaAttr: "aria-label",
+      map: (t) => t || null
+    },
+    observer(t) {
+      this._label && (this._label.textContent = t);
+    }
+  })
+], s.prototype, "label", 2);
+i([
+  h({
+    type: Number,
+    default: 0,
+    a11y: { ariaAttr: "aria-valuenow" },
+    observer(t) {
+      const e = Math.max(this.min, Math.min(this.max, t));
+      this.setValue(String(e)), this._updateSlider();
+    }
+  })
+], s.prototype, "value", 2);
+i([
+  h({
+    type: Number,
+    default: 0,
+    a11y: { ariaAttr: "aria-valuemin" },
+    observer() {
+      this._updateSlider();
+    }
+  })
+], s.prototype, "min", 2);
+i([
+  h({
+    type: Number,
+    default: 100,
+    a11y: { ariaAttr: "aria-valuemax" },
+    observer() {
+      this._updateSlider();
+    }
+  })
+], s.prototype, "max", 2);
+i([
+  h({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist(), this._renderStops();
+    }
+  })
+], s.prototype, "showStops", 2);
+i([
+  h({
+    type: Number,
+    default: 1,
+    observer() {
+      this._updateSlider();
+    }
+  })
+], s.prototype, "step", 2);
+i([
+  h({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-disabled",
+      map: (t) => String(t)
+    },
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "disabled", 2);
+i([
+  h({
+    type: Boolean,
+    default: !1,
+    a11y: {
+      ariaAttr: "aria-orientation",
+      map: (t) => t ? "vertical" : null
+    },
+    observer() {
+      this._updateSlider();
+    }
+  })
+], s.prototype, "vertical", 2);
+i([
+  h({
+    type: Boolean,
+    default: !0,
+    observer() {
+      this._updateSlider();
+    }
+  })
+], s.prototype, "showTooltip", 2);
+i([
+  h({
+    type: g([
+      "top",
+      "top-start",
+      "top-end",
+      "bottom",
+      "bottom-start",
+      "bottom-end",
+      "left",
+      "left-start",
+      "left-end",
+      "right",
+      "right-start",
+      "right-end"
+    ]),
+    default: "top",
+    observer(t) {
+      this._trigger && this._trigger.setAttribute("placement", t);
+    }
+  })
+], s.prototype, "placement", 2);
+i([
+  h({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this._handleShowInputChange(t);
+    }
+  })
+], s.prototype, "showInput", 2);
+i([
+  h({
+    type: g(["large", "default", "small"]),
+    default: "",
+    observer(t) {
+      this.updateContainerClasslist(), this.showInput && this._input && this._input.setAttribute("size", t);
+    }
+  })
+], s.prototype, "size", 2);
+i([
+  h({
+    type: Boolean,
+    default: !1
+  })
+], s.prototype, "required", 2);
+i([
+  b({
+    type: Object,
+    default: null,
+    observer() {
+      this._renderMarks();
+    }
+  })
+], s.prototype, "marks", 2);
+i([
+  b({
+    type: Function,
+    default: (t) => t,
+    rawFunction: !0,
+    observer() {
+      this._updateSlider();
+    }
+  })
+], s.prototype, "formatTooltip", 2);
+i([
+  u("mousedown", a.ce("rail"))
+], s.prototype, "_onMouseDown", 1);
+i([
+  u("mousedown", a.ce("thumb"))
+], s.prototype, "_onThumbMouseDown", 1);
+i([
+  u("mousemove", "document")
+], s.prototype, "_onMouseMove", 1);
+i([
+  u("mouseup", "document")
+], s.prototype, "_onMouseUp", 1);
+i([
+  u("keydown")
+], s.prototype, "_onKeyDown", 1);
+i([
+  u("blur")
+], s.prototype, "_onBlur", 1);
+i([
+  u("mouseenter", a.ce("thumb"))
+], s.prototype, "_onThumbMouseEnter", 1);
+i([
+  u("mouseleave", a.ce("thumb"))
+], s.prototype, "_onThumbMouseLeave", 1);
+s = i([
+  y(_, { styles: [w] })
+], s);
 export {
-  j as EaSlider
+  s as EaSlider
 };