easy-component-ui 2.1.1 → 3.0.1

package/dist/components/ea-input-number.js

@@ -0,0 +1,367 @@
+var _ = Object.defineProperty;
+var C = (s) => {
+  throw TypeError(s);
+};
+var E = (s, i, e) => i in s ? _(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
+var p = (s, i, e) => E(s, typeof i != "symbol" ? i + "" : i, e), N = (s, i, e) => i.has(s) || C("Cannot " + e);
+var t = (s, i, e) => (N(s, i, "read from private field"), e ? e.call(s) : i.get(s)), n = (s, i, e) => i.has(s) ? C("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), l = (s, i, e, a) => (N(s, i, "write to private field"), a ? a.call(s, e) : i.set(s, e), e);
+import { F as A } from "../core/FormBase.js";
+import { s as F } from "../css/ea-input-number.style.js";
+class S extends Event {
+  constructor(i) {
+    super("ea-change", { bubbles: !0, cancelable: !0, composed: !0 }), this.detail = i;
+  }
+}
+var c, r, d, b, m, o, u, f, v, y;
+class M extends A {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    n(this, c);
+    /** @type {HTMLInputElement} */
+    n(this, r);
+    /** @type {HTMLElement} */
+    n(this, d);
+    /** @type {HTMLElement} */
+    n(this, b);
+    /** @type {HTMLLabelElement} */
+    n(this, m);
+    /** @type {AbortController} */
+    n(this, o, new AbortController());
+    p(this, "state", this.properties({
+      label: {
+        type: String,
+        default: "",
+        observer: async (e) => {
+          t(this, m).textContent = e;
+        }
+      },
+      value: {
+        type: Number,
+        default: 0,
+        /** @param {number} newVal */
+        observer: (e, a) => {
+          e = Number(e).toFixed(this.precision), a = Number(a).toFixed(this.precision), t(this, r).value = e, this.setValue(e), e >= this.max ? this.isMax = !0 : this.isMax = !1, e <= this.min ? this.isMin = !0 : this.isMin = !1, this.dispatchEvent(
+            new S({
+              currentValue: Number(e),
+              oldValue: Number(a)
+            })
+          ), this.updateContainerClasslist();
+        }
+      },
+      min: {
+        type: Number,
+        default: Number.MIN_SAFE_INTEGER,
+        observer: (e) => {
+          t(this, r) && (t(this, r).min = e);
+        }
+      },
+      max: {
+        type: Number,
+        default: Number.MAX_SAFE_INTEGER,
+        observer: (e) => {
+          t(this, r) && (t(this, r).max = e);
+        }
+      },
+      required: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          t(this, r) && (t(this, r).required = e);
+        }
+      },
+      step: {
+        type: Number,
+        default: 1,
+        observer: () => {
+        }
+      },
+      "step-strictly": {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+        }
+      },
+      precision: {
+        type: Number,
+        default: 0,
+        observer: () => {
+        }
+      },
+      size: {
+        type: ["large", "default", "small"],
+        default: "",
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      readonly: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          t(this, r).readOnly = e;
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      controls: {
+        type: Boolean,
+        default: !0,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      "value-on-clear": {
+        type: Number,
+        default: "",
+        observer: () => {
+        }
+      },
+      align: {
+        type: ["left", "center", "right"],
+        default: "center",
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      name: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          t(this, r).setAttribute("name", e), t(this, r).setAttribute("id", e);
+        }
+      },
+      placeholder: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          t(this, r).setAttribute("placeholder", e);
+        }
+      },
+      inputmode: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          t(this, r).setAttribute("inputmode", e);
+        }
+      }
+    }));
+    p(this, "componentStatusState", this.properties({
+      defaultValue: {
+        props: !0,
+        type: Number,
+        default: this.getAttrNumber("value", 0).toFixed(this.precision),
+        observer: () => {
+        }
+      },
+      isFocus: {
+        props: !0,
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      isMin: {
+        props: !0,
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      isMax: {
+        props: !0,
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      }
+    }));
+    /**
+     * 获取焦点
+     */
+    p(this, "focus", () => {
+      t(this, r).focus();
+    });
+    /**
+     * 失去焦点
+     */
+    p(this, "blur", () => {
+      t(this, r).blur();
+    });
+    /**
+     * 处理数值的安全边界
+     * @param {Number} value
+     * @param {Object} param1
+     * @param {Number} [param1.precision]
+     * @param {Number} [param1.min]
+     * @param {Number} [param1.max]
+     * @param {Number | String} [param1.defaultValue]
+     */
+    n(this, u, (e = this.value, { precision: a, min: h, max: x, defaultValue: g }) => (e = Number(e), isNaN(e) || !Number.isFinite(e) ? (g == null ? void 0 : g.toFixed(a)) || "" : (e < h ? e = h : e > x && (e = x), e.toFixed(a))));
+    /**
+     * 加
+     */
+    n(this, f, () => {
+      this.setAttribute(
+        "value",
+        t(this, u).call(this, this.value - this.step, {
+          precision: this.precision,
+          min: this.min,
+          max: this.max,
+          defaultValue: this.defaultValue
+        })
+      );
+    });
+    /**
+     * 减
+     */
+    n(this, v, () => {
+      this.setAttribute(
+        "value",
+        t(this, u).call(this, this.value + this.step, {
+          precision: this.precision,
+          min: this.min,
+          max: this.max,
+          defaultValue: this.defaultValue
+        })
+      );
+    });
+    /**
+     * 当用户可能进行过手动输入时，进行输入框值校验
+     */
+    n(this, y, (e) => {
+      let a = t(this, u).call(this, e.target.value, {
+        precision: this.precision,
+        min: this.min,
+        max: this.max,
+        defaultValue: this.defaultValue
+      });
+      this["step-strictly"] && Number(a) % this.step !== 0 && (a = t(this, u).call(this, Number(a) + a % this.step, {
+        precision: this.precision,
+        min: this.min,
+        max: this.max,
+        defaultValue: this.defaultValue
+      })), this.setAttribute("value", a), a !== e.target.value && (e.target.value = a), this.isFocus = !1;
+    });
+    this.stylesheet = F, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "value",
+      "label",
+      "value-on-clear",
+      "min",
+      "max",
+      "required",
+      "step",
+      "step-strictly",
+      "precision",
+      "size",
+      "name",
+      "align",
+      "placeholder",
+      "inputmode",
+      "readonly",
+      "disabled",
+      "controls"
+    ];
+  }
+  /**
+   * 获取验证目标元素
+   * @returns {HTMLElement}
+   */
+  get validationTarget() {
+    return t(this, r);
+  }
+  /**
+   * 表单重置回调，处理表单重置事件
+   */
+  formResetCallback() {
+    this.value = this.min, this.internals.setValidity({});
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-input-number",
+      {
+        ["--" + this.align]: this.align,
+        ["--" + this.size]: this.size
+      },
+      {
+        focus: this.isFocus,
+        min: this.isMin,
+        max: this.isMax,
+        disabled: this.disabled,
+        "no-controls": !this.controls
+      }
+    );
+    return t(this, c).className = e, e;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <label class="ea-input-number" part="container">
+        <span class="ea-input-number__form-label" part="label"></span>
+        <section class="ea-input-number__region" part="region">
+          <ea-icon class="ea-input-number__operator decrease" part="decrease" icon="icon-minus"></ea-icon>
+          <span class="ea-input-number__prefix" part="prefix">
+            <slot name="prefix"></slot>
+          </span>
+          <input class="ea-input-number__inner" part="input" type="number" />
+          <span class="ea-input-number__suffix" part="suffix">
+            <slot name="suffix"></slot>
+          </span>
+          <ea-icon class="ea-input-number__operator increase" part="increase" icon="icon-plus"></ea-icon>
+        </section>
+      </label>
+    `, l(this, c, this.shadowRoot.querySelector(".ea-input-number")), l(this, m, this.shadowRoot.querySelector(".ea-input-number__form-label")), l(this, r, this.shadowRoot.querySelector(".ea-input-number__inner")), l(this, d, this.shadowRoot.querySelector(
+      ".ea-input-number__operator.decrease"
+    )), l(this, b, this.shadowRoot.querySelector(
+      ".ea-input-number__operator.increase"
+    )), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    var h;
+    super.connectedCallback(), this.value = this.getAttrNumber("value", 0).toFixed(this.precision), this.name || this.setAttribute("name", Math.random().toString(36).substring(2, 15)), (h = t(this, o)) == null || h.abort(), l(this, o, new AbortController());
+    const e = () => {
+      this.disabled || !this.controls || t(this, f).call(this);
+    }, a = () => {
+      this.disabled || !this.controls || t(this, v).call(this);
+    };
+    t(this, d).addEventListener("click", e, {
+      signal: t(this, o).signal
+    }), t(this, b).addEventListener("click", a, {
+      signal: t(this, o).signal
+    }), t(this, r).addEventListener("blur", t(this, y), {
+      signal: t(this, o).signal
+    }), t(this, r).addEventListener(
+      "focus",
+      () => {
+        this.isFocus = !0;
+      },
+      {
+        signal: t(this, o).signal
+      }
+    );
+  }
+  $beforeUnmounted() {
+    var e;
+    (e = t(this, o)) == null || e.abort();
+  }
+}
+c = new WeakMap(), r = new WeakMap(), d = new WeakMap(), b = new WeakMap(), m = new WeakMap(), o = new WeakMap(), u = new WeakMap(), f = new WeakMap(), v = new WeakMap(), y = new WeakMap();
+window.customElements.get("ea-input-number") || window.customElements.define("ea-input-number", M);
+export {
+  M as EaInputNumber
+};