hcui-package 1.9.31 → 1.9.32

package/dist/hcui-package.es.js

@@ -78077,7 +78077,25 @@ const OJ = {
 };
 class zJ extends HTMLElement {
   constructor() {
-    super(), this.inputTimestamps = [], this.timer = null, Object.assign(this, OJ), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
+    super(), this.inputTimestamps = [], this.timer = null, Object.assign(this, OJ), this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["placeholder", "value", "style", "params"];
+  }
+  isScanInput() {
+    const t = this.inputTimestamps, n = t.length, o = 100;
+    if (n < 4)
+      return !1;
+    const i = t[0];
+    return t[t.length - 1] - i <= o;
+  }
+  // 处理配置
+  attributeChangedCallback(t, n, o) {
+    if (n && !n.includes("{{") && (this[t] = n), o && !o.includes("{{") && (this[t] = o), t === "params" && o) {
+      const i = JSON.parse(o);
+      Object.assign(this, i);
+    }
+    this.shadowRoot.innerHTML = `
         <style>
         * {margin:0;padding:0;box-sizing: border-box;}
         @keyframes blink {
@@ -78086,11 +78104,11 @@ class zJ extends HTMLElement {
           100% { opacity: 1; }
         }
         .input-box { position: relative;width:${this.width};height:${this.height};display: grid;grid-template-columns: 1fr 20px;align-items: center;cursor: text; overflow: hidden;}
-        .input-box .before { color: #999;position: absolute;padding-left: 12px; display: none;top: 50%;transform: translateY(-50%); font-size: ${this.fontSize};  }
+        .input-box .before { color: rgba(194,194,194,1);position: absolute;padding-left: 12px; display: none;top: 50%;transform: translateY(-50%); font-size: ${this.fontSize};  }
         .input-box.empty .before { display: block; }
         .displayInput { position:relative;display:flex;align-items: center;height:100%;padding:${this.padding};font-size:${this.fontSize};width: fit-content;white-space: nowrap; }
         .displayInput.focus::after {content: '';position: absolute; right:-4px;top:50%;transform: translateY(-50%);width: 1px;height: 1em;background-color: #666;opacity: 1;animation: blink 1.2s infinite;}
-        .close-like { position: relative; display: inline-block; width: 12px; height: 12px; cursor: pointer; border-radius: 50%; border:1px solid #ccc; color: #fff; padding: 2px; display: none; }
+        .close-like { position: absolute; display: inline-block; width: 12px; height: 12px; cursor: pointer; border-radius: 50%; border:1px solid #ccc; color: #fff; padding: 2px; display: none; right: 4px; }
         .close-like::before,
         .close-like::after {content: '';position: absolute;top: 50%;left: 50%;width: 7px;height: 1px;background-color: #ccc;transform-origin: center;}
         .close-like::before {transform: translate(-50%, -50%) rotate(45deg);}
@@ -78107,40 +78125,26 @@ class zJ extends HTMLElement {
         <span class="displayInput"></span>
         <span class="close-like"></span>
         </div>
-      `, this.inputBox = this.shadowRoot.querySelector(".input-box"), this.realInput = this.shadowRoot.querySelector(".realInput"), this.displayInput = this.shadowRoot.querySelector(".displayInput"), this.closeDom = this.shadowRoot.querySelector(".close-like");
-    let t = !1;
+      `, this.inputBox = this.shadowRoot.querySelector(".input-box"), this.realInput = this.shadowRoot.querySelector(".realInput"), this.displayInput = this.shadowRoot.querySelector(".displayInput"), this.closeDom = this.shadowRoot.querySelector(".close-like"), this.placeholder && (this.shadowRoot.querySelector(".input-box .before").innerText = this.placeholder, this.inputBox.classList.add("empty")), this.value && (this.displayInput.innerText = this.value, this.realInput.value = this.value, this.inputBox.classList.remove("empty"));
+    let r = !1;
     this.inputBox.addEventListener("click", () => {
       this.displayInput.classList.add("focus"), this.realInput.focus({ preventScroll: !0 });
     }), this.realInput.addEventListener("blur", () => {
       this.displayInput.classList.remove("focus"), this.emitBlur();
     }), this.realInput.addEventListener("compositionstart", () => {
-      t = !0, this.realInput.value = "";
+      r = !0, this.realInput.value = "";
     }), this.realInput.addEventListener("compositionend", () => {
-      t = !1, this.realInput.value = "";
-    }), this.realInput.addEventListener("input", (n) => {
-      if (t) return;
-      const o = Date.now(), r = n.target.value;
-      r ? this.inputTimestamps.push(o) : this.inputTimestamps = [], r ? this.inputBox.classList.remove("empty") : this.inputBox.classList.add("empty"), this.displayInput.innerText = r, this.emitChange(r), this.isScanInput() && !this.timer && (this.timer = setTimeout(() => {
+      r = !1, this.realInput.value = "";
+    }), this.realInput.addEventListener("input", (i) => {
+      if (r) return;
+      const l = Date.now(), s = i.target.value;
+      s ? this.inputTimestamps.push(l) : this.inputTimestamps = [], s ? this.inputBox.classList.remove("empty") : this.inputBox.classList.add("empty"), this.displayInput.innerText = s, this.emitChange(s), this.isScanInput() && !this.timer && (this.timer = setTimeout(() => {
         console.log("扫码完毕"), this.emitScanend();
       }, 600));
-    }), this.realInput.addEventListener("paste", (n) => n.preventDefault()), this.closeDom.addEventListener("click", (n) => {
-      n.preventDefault(), t = !1, this.displayInput.innerText = "", this.realInput.value = "", this.inputBox.classList.add("empty"), this.emitChange("");
+    }), this.realInput.addEventListener("paste", (i) => i.preventDefault()), this.closeDom.addEventListener("click", (i) => {
+      i.preventDefault(), r = !1, this.displayInput.innerText = "", this.realInput.value = "", this.inputBox.classList.add("empty"), this.inputTimestamps = [], this.emitChange("");
     });
   }
-  static get observedAttributes() {
-    return ["placeholder", "value", "style"];
-  }
-  isScanInput() {
-    const t = this.inputTimestamps, n = t.length, o = 100;
-    if (n < 4)
-      return !1;
-    const i = t[0];
-    return t[t.length - 1] - i <= o;
-  }
-  // 处理配置
-  attributeChangedCallback(t, n, o) {
-    n && !n.includes("{{") && (this[t] = n), o && !o.includes("{{") && (this[t] = o), t === "placeholder" && this.placeholder && (this.shadowRoot.querySelector(".input-box .before").innerText = this.placeholder, this.inputBox.classList.add("empty")), t === "value" && this.value && (this.displayInput.innerText = this.value, this.realInput.value = this.value, this.inputBox.classList.remove("empty"));
-  }
   emitChange(t) {
     this.dispatchEvent(new CustomEvent("change", {
       bubbles: !1,