hisonvue 1.1.18 → 1.1.20

package/dist/{HInput-DpyeWPGZ.mjs → HInput-B7jIOO-G.mjs}

@@ -1,7 +1,7 @@
-import { defineComponent as en, ref as r, computed as g, inject as de, onMounted as nn, onBeforeUnmount as on, watch as a, unref as tn, nextTick as ge, createElementBlock as b, openBlock as y, normalizeClass as f, normalizeStyle as I, createElementVNode as P, Fragment as be, renderList as un, toDisplayString as ye, withDirectives as $e, vShow as Te } from "vue";
-import { T as sn, y as x, N as ln, h as M, g as rn, u as dn, O as u, l as d, P as c, w as h, e as an, t as mn, a as vn, b as Ce, Q as ae, R as pn, U as fn, r as Mn, c as gn, d as bn } from "./index-CwT_wDHc.mjs";
-import { _ as yn } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
-const $n = {
+import { defineComponent as tn, ref as r, computed as f, inject as ae, onMounted as un, onBeforeUnmount as sn, watch as a, unref as ln, nextTick as be, createElementBlock as b, openBlock as y, normalizeClass as M, normalizeStyle as P, createElementVNode as I, Fragment as ye, renderList as rn, toDisplayString as $e, withDirectives as Ce, vShow as Te } from "vue";
+import { T as dn, y as c, N as an, h as g, g as mn, u as vn, O as u, l as d, P as _, w as N, e as pn, t as fn, a as Mn, b as ke, Q as me, R as gn, U as bn, r as yn, c as $n, d as Cn } from "./index-C4_ZZ_fO.mjs";
+import { _ as Tn } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const kn = {
   /**
    * Unique identifier for the input.
    * - You can later retrieve its methods via `hison.component.getInput(id)`
@@ -76,7 +76,7 @@ const $n = {
   inputType: {
     type: String,
     required: !1,
-    validator: (e) => ln.includes(e)
+    validator: (e) => an.includes(e)
   },
   /**
    * Format string used for displaying or formatting the value.
@@ -126,6 +126,16 @@ const $n = {
    * - Maps to the `placeholder` attribute
    */
   placeholder: { type: String, required: !1 },
+  /**
+   * Placeholder text color.
+   * - Semantic tokens: 'primary' | 'muted' | 'info' | 'success' | 'danger' | 'warning'
+   * - Or any valid CSS color string (e.g. '#fff', '#ffffff', 'rgb(...)', 'rgba(...)').
+   * - Default: 'primary'
+   */
+  placeholderColor: {
+    type: String,
+    default: "primary"
+  },
   /**
    * Edit mode of the input.
    * - Values: `'editable'`, `'readonly'`, `'disable'`
@@ -134,7 +144,7 @@ const $n = {
    */
   editMode: {
     type: String,
-    default: x.editable,
+    default: c.editable,
     validator: (e) => ["editable", "disable", "readonly"].includes(e)
   },
   /**
@@ -175,7 +185,7 @@ const $n = {
   textAlign: {
     type: String,
     default: null,
-    validator: (e) => e == null || sn.includes(e)
+    validator: (e) => e == null || dn.includes(e)
   },
   /**
    * Whether to show border (rendered as subtle box-shadow).
@@ -275,70 +285,70 @@ const $n = {
     default: "default",
     validator: (e) => ["default", "switch"].includes(e)
   }
-}, _ = /* @__PURE__ */ new WeakSet(), ee = /* @__PURE__ */ new WeakSet(), ke = (e) => {
+}, ee = /* @__PURE__ */ new WeakSet(), ne = /* @__PURE__ */ new WeakSet(), we = (e) => {
   const n = e.currentTarget;
-  if (M.event.cssEvent.input_onBeforeFocus(e) === !1) {
+  if (g.event.cssEvent.input_onBeforeFocus(e) === !1) {
     e.stopPropagation(), e.preventDefault();
     return;
   }
-  n.classList.add("hison-input-on-active"), M.event.cssEvent.input_onAfterFocus(e);
-}, we = (e) => {
+  n.classList.add("hison-input-on-active"), g.event.cssEvent.input_onAfterFocus(e);
+}, he = (e) => {
   const n = e.currentTarget;
-  if (M.event.cssEvent.input_onBeforeBlur(e) === !1) {
+  if (g.event.cssEvent.input_onBeforeBlur(e) === !1) {
     e.stopPropagation(), e.preventDefault();
     return;
   }
-  n.classList.remove("hison-input-on-active"), n.classList.remove("hison-input-on-mouseover"), M.event.cssEvent.input_onAfterBlur(e);
+  n.classList.remove("hison-input-on-active"), n.classList.remove("hison-input-on-mouseover"), g.event.cssEvent.input_onAfterBlur(e);
 }, Ne = (e) => {
   const n = e.currentTarget;
   if (!n.readOnly) {
-    if (M.event.cssEvent.input_onBeforeMouseover(e) === !1) {
+    if (g.event.cssEvent.input_onBeforeMouseover(e) === !1) {
       e.stopPropagation(), e.preventDefault();
       return;
     }
-    n.classList.add("hison-input-on-mouseover"), M.event.cssEvent.input_onAfterMouseover(e);
+    n.classList.add("hison-input-on-mouseover"), g.event.cssEvent.input_onAfterMouseover(e);
   }
-}, he = (e) => {
+}, Le = (e) => {
   const n = e.currentTarget;
   if (!n.readOnly) {
-    if (M.event.cssEvent.input_onBeforeMouseout(e) === !1) {
+    if (g.event.cssEvent.input_onBeforeMouseout(e) === !1) {
       e.stopPropagation(), e.preventDefault();
       return;
     }
-    n.classList.remove("hison-input-on-mouseover"), M.event.cssEvent.input_onAfterMouseout(e);
+    n.classList.remove("hison-input-on-mouseover"), g.event.cssEvent.input_onAfterMouseout(e);
   }
-}, Le = (e) => {
+}, Be = (e) => {
   const n = e.currentTarget;
   if (!n.readOnly) {
-    if (M.event.cssEvent.input_onBeforeTouchstart(e) === !1) {
+    if (g.event.cssEvent.input_onBeforeTouchstart(e) === !1) {
       e.stopPropagation(), e.preventDefault();
       return;
     }
-    n.classList.add("hison-input-on-mouseover"), M.event.cssEvent.input_onAfterTouchstart(e);
+    n.classList.add("hison-input-on-mouseover"), g.event.cssEvent.input_onAfterTouchstart(e);
   }
-}, Be = (e) => {
+}, Fe = (e) => {
   const n = e.currentTarget;
   if (!n.readOnly) {
-    if (M.event.cssEvent.input_onBeforeTouchend(e) === !1) {
+    if (g.event.cssEvent.input_onBeforeTouchend(e) === !1) {
       e.stopPropagation(), e.preventDefault();
       return;
     }
-    n.classList.remove("hison-input-on-mouseover"), M.event.cssEvent.input_onAfterTouchend(e);
+    n.classList.remove("hison-input-on-mouseover"), g.event.cssEvent.input_onAfterTouchend(e);
   }
-}, Fe = (e) => {
+}, Pe = (e) => {
   const n = e.currentTarget;
   n.readOnly || n.classList.remove("hison-input-on-mouseover");
-}, Tn = (e) => {
-  _.has(e) || (_.add(e), e.addEventListener("mouseenter", Ne), e.addEventListener("mouseleave", he), e.addEventListener("touchstart", Le, { passive: !1, capture: !0 }), e.addEventListener("touchend", Be, { passive: !1, capture: !0 }), e.addEventListener("touchcancel", Fe, { passive: !1, capture: !0 }));
-}, Cn = (e) => {
-  _.has(e) && (_.delete(e), e.removeEventListener("mouseenter", Ne), e.removeEventListener("mouseleave", he), e.removeEventListener("touchstart", Le, { capture: !0 }), e.removeEventListener("touchend", Be, { capture: !0 }), e.removeEventListener("touchcancel", Fe, { capture: !0 }), e.classList.remove("hison-input-on-mouseover"));
-}, kn = (e) => {
-  ee.has(e) || (ee.add(e), e.addEventListener("focus", ke), e.addEventListener("blur", we));
 }, wn = (e) => {
-  ee.has(e) && (ee.delete(e), e.removeEventListener("focus", ke), e.removeEventListener("blur", we), e.classList.remove("hison-input-on-active"), e.classList.remove("hison-input-on-mouseover"));
-}, Nn = en({
+  ee.has(e) || (ee.add(e), e.addEventListener("mouseenter", Ne), e.addEventListener("mouseleave", Le), e.addEventListener("touchstart", Be, { passive: !1, capture: !0 }), e.addEventListener("touchend", Fe, { passive: !1, capture: !0 }), e.addEventListener("touchcancel", Pe, { passive: !1, capture: !0 }));
+}, hn = (e) => {
+  ee.has(e) && (ee.delete(e), e.removeEventListener("mouseenter", Ne), e.removeEventListener("mouseleave", Le), e.removeEventListener("touchstart", Be, { capture: !0 }), e.removeEventListener("touchend", Fe, { capture: !0 }), e.removeEventListener("touchcancel", Pe, { capture: !0 }), e.classList.remove("hison-input-on-mouseover"));
+}, Nn = (e) => {
+  ne.has(e) || (ne.add(e), e.addEventListener("focus", we), e.addEventListener("blur", he));
+}, Ln = (e) => {
+  ne.has(e) && (ne.delete(e), e.removeEventListener("focus", we), e.removeEventListener("blur", he), e.classList.remove("hison-input-on-active"), e.classList.remove("hison-input-on-mouseover"));
+}, Bn = tn({
   name: "HInput",
-  props: $n,
+  props: kn,
   inheritAttrs: !1,
   emits: [
     "update:modelValue",
@@ -382,9 +392,9 @@ const $n = {
     "contextmenu"
   ],
   setup(e, { emit: n }) {
-    const $ = r(null), L = r(null), C = r(null), p = e.id ? e.id : rn(), o = r(e.name ?? p), Ie = g(() => o.value), ne = `hinput:${p}`, me = dn(), D = r([]), oe = () => {
-      D.value = an(mn(e.class) || "", me.value), vn(D.value, "col") === -1 && D.value.push("hison-col-12"), Ce(D.value, "size", M.componentStyle.size), Ce(D.value, "color", "primary");
-    }, l = r(e.inputType ?? u.text), te = g(() => {
+    const $ = r(null), L = r(null), T = r(null), p = e.id ? e.id : mn(), o = r(e.name ?? p), Ie = f(() => o.value), oe = `hinput:${p}`, ve = vn(), V = r([]), te = () => {
+      V.value = pn(fn(e.class) || "", ve.value), Mn(V.value, "col") === -1 && V.value.push("hison-col-12"), ke(V.value, "size", g.componentStyle.size), ke(V.value, "color", "primary");
+    }, l = r(e.inputType ?? u.text), ie = f(() => {
       switch (l.value) {
         case u.checkbox:
           return "checkbox";
@@ -399,7 +409,7 @@ const $n = {
         default:
           return "text";
       }
-    }), Pe = g(() => {
+    }), Se = f(() => {
       switch (l.value) {
         case u.mask:
         case u.digit:
@@ -407,20 +417,20 @@ const $n = {
         default:
           return l.value;
       }
-    }), K = r(e.toggleStyle ?? "default"), w = r(e.format ?? null), B = r(d.utils.isNumeric(e.maxNumber) ? Number(e.maxNumber) : null), F = r(d.utils.isNumeric(e.minNumber) ? Number(e.minNumber) : null), V = r(d.utils.isInteger(e.roundNumber) || d.utils.isNegativeInteger(e.roundNumber) || e.roundNumber === "0" ? Number(e.roundNumber) : null), A = r(d.utils.isPositiveInteger(e.maxLength) ? Number(e.maxLength) : null), S = r(d.utils.isPositiveInteger(e.maxByte) ? Number(e.maxByte) : null), ie = (t) => {
+    }), K = r(e.toggleStyle ?? "default"), w = r(e.format ?? null), B = r(d.utils.isNumeric(e.maxNumber) ? Number(e.maxNumber) : null), F = r(d.utils.isNumeric(e.minNumber) ? Number(e.minNumber) : null), q = r(d.utils.isInteger(e.roundNumber) || d.utils.isNegativeInteger(e.roundNumber) || e.roundNumber === "0" ? Number(e.roundNumber) : null), S = r(d.utils.isPositiveInteger(e.maxLength) ? Number(e.maxLength) : null), A = r(d.utils.isPositiveInteger(e.maxByte) ? Number(e.maxByte) : null), ue = (t) => {
       switch (t) {
         case u.number:
         case u.digit:
-          return h.right;
+          return N.right;
         case u.date:
         case u.month:
         case u.time:
-          return h.center;
+          return N.center;
         default:
-          return h.left;
+          return N.left;
       }
-    }, E = r(e.textAlign ?? ie(l.value)), Ae = g(() => ({ textAlign: E.value })), U = r(e.border ?? !0), Se = (t) => (t = String(t), A.value && (t = t.substring(0, A.value)), S.value && (t = d.utils.getCutByteLength(t, S.value)), t), Ee = (t) => (t = Number(t), B.value && t > B.value && (t = B.value), F.value && t < F.value && (t = F.value), V.value && (t = d.utils.getRound(t, V.value)), t), ue = (t) => {
-      if (c(t))
+    }, E = r(e.textAlign ?? ue(l.value)), Ae = f(() => ({ textAlign: E.value })), U = r(e.border ?? !0), Ee = (t) => (t = String(t), S.value && (t = t.substring(0, S.value)), A.value && (t = d.utils.getCutByteLength(t, A.value)), t), De = (t) => (t = Number(t), B.value && t > B.value && (t = B.value), F.value && t < F.value && (t = F.value), q.value && (t = d.utils.getRound(t, q.value)), t), se = (t) => {
+      if (_(t))
         return l.value === u.checkbox || l.value === u.radio ? !1 : t;
       try {
         switch (l.value) {
@@ -430,19 +440,19 @@ const $n = {
           case u.mask:
           case u.digit:
           case u.textarea:
-            l.value === u.mask && (t = pn(t, w.value ?? "")), l.value === u.digit && (t = fn(t)), t = Se(t);
+            l.value === u.mask && (t = gn(t, w.value ?? "")), l.value === u.digit && (t = bn(t)), t = Ee(t);
             break;
           case u.number:
-            l.value === u.number && (t = Ee(t));
+            l.value === u.number && (t = De(t));
             break;
           case u.date:
-            t && (t = d.utils.getDateWithFormat(t, ae.DateFormat["yyyy-MM-dd"]));
+            t && (t = d.utils.getDateWithFormat(t, me.DateFormat["yyyy-MM-dd"]));
             break;
           case u.month:
-            t && (t = d.utils.getDateWithFormat(t, ae.YearMonthFormat["yyyy-MM"]));
+            t && (t = d.utils.getDateWithFormat(t, me.YearMonthFormat["yyyy-MM"]));
             break;
           case u.time:
-            t && (t = d.utils.getDateWithFormat(t, ae.TimeFormat["HH:mm:ss"]));
+            t && (t = d.utils.getDateWithFormat(t, me.TimeFormat["HH:mm:ss"]));
             break;
           case u.checkbox:
           case u.radio:
@@ -454,20 +464,39 @@ const $n = {
         console.warn("[HInput] Failed to format value", t, i);
       }
       return t;
-    }, s = r(ue(e.modelValue)), De = g(() => s.value), T = r(null), H = r(e.visible), O = r(e.title ?? ""), W = r(e.nullText ?? ""), k = r(e.editMode), Ve = g(() => k.value === x.disable), se = g(() => k.value === x.readonly), qe = g(() => U.value && !se.value ? "hison-border" : ""), Re = g(() => k.value !== x.editable ? [`hison-input-${k.value}`, `hison-input-${te.value}-${k.value}`] : []), j = r(e.required), Ke = g(() => j.value ? ["hison-input-required", `hison-input-${te.value}-required`] : []), z = r(e.placeholder ?? ""), Y = r(e.fontBold), Ue = g(() => {
-      if (Y.value) return "hison-font-bold";
-    }), Q = r(e.fontItalic), He = g(() => {
-      if (Q.value) return "hison-font-italic";
-    }), X = r(e.fontThruline), Oe = g(() => {
-      if (X.value) return "hison-font-thruline";
-    }), J = r(e.fontUnderline), We = g(() => {
-      if (J.value) return "hison-font-underline";
-    }), je = g(() => H.value ? "" : "hison-display-none"), le = r(!1), N = r(!1), Z = r(
+    }, s = r(se(e.modelValue)), Ve = f(() => s.value), C = r(null), H = r(e.visible), O = r(e.title ?? ""), W = r(e.nullText ?? ""), k = r(e.editMode), qe = f(() => k.value === c.disable), le = f(() => k.value === c.readonly), Re = f(() => U.value && !le.value ? "hison-border" : ""), Ke = f(() => k.value !== c.editable ? [`hison-input-${k.value}`, `hison-input-${ie.value}-${k.value}`] : []), j = r(e.required), Ue = f(() => j.value ? ["hison-input-required", `hison-input-${ie.value}-required`] : []), z = r(e.placeholder ?? ""), Y = r(e.placeholderColor ?? "primary"), He = (t) => {
+      if (!t) return null;
+      const i = t.trim();
+      return [
+        "primary",
+        "muted",
+        "info",
+        "success",
+        "danger",
+        "warning",
+        "custom1",
+        "custom2",
+        "custom3",
+        "custom4",
+        "custom5"
+      ].includes(i) ? `var(--hison-${i}-emptyTextColor)` : i;
+    }, Oe = f(() => {
+      const t = He(Y.value);
+      return t ? { "--hison-input-placeholder-color": t } : {};
+    }), Q = r(e.fontBold), We = f(() => {
+      if (Q.value) return "hison-font-bold";
+    }), X = r(e.fontItalic), je = f(() => {
+      if (X.value) return "hison-font-italic";
+    }), J = r(e.fontThruline), ze = f(() => {
+      if (J.value) return "hison-font-thruline";
+    }), Z = r(e.fontUnderline), Ye = f(() => {
+      if (Z.value) return "hison-font-underline";
+    }), Qe = f(() => H.value ? "" : "hison-display-none"), re = r(!1), h = r(!1), G = r(
       e.tabIndex !== null && e.tabIndex !== "" ? Number(e.tabIndex) : null
-    ), ve = de("registerToInputGroup", null), m = de("notifyInputGroupStatus", null), q = de("radioMembershipChanged", null), re = (t) => {
+    ), pe = ae("registerToInputGroup", null), m = ae("notifyInputGroupStatus", null), R = ae("radioMembershipChanged", null), de = (t) => {
       if (l.value === u.checkbox || l.value === u.radio)
         return t ? e.checkedText : e.uncheckedText;
-      if (c(t) || t === "") return W.value ?? "";
+      if (_(t) || t === "") return W.value ?? "";
       if (e.inputTextdHandler)
         return e.inputTextdHandler(t);
       let i = String(t);
@@ -489,53 +518,53 @@ const $n = {
             i = d.utils.getDateWithFormat(t, w.value ?? d.getTimeFormat());
             break;
           case u.select:
-            const R = $.value, Me = R.selectedIndex;
-            i = Me >= 0 ? R.options[Me].text : "";
+            const D = $.value, ge = D.selectedIndex;
+            i = ge >= 0 ? D.options[ge].text : "";
             break;
         }
-      } catch (R) {
-        console.warn("[HInput] Failed to format value", t, R), i = "";
+      } catch (D) {
+        console.warn("[HInput] Failed to format value", t, D), i = "";
       }
       return i;
-    }, G = r(""), ze = (t) => {
-      k.value === x.editable && (le.value = !0), ge(() => {
+    }, x = r(""), Xe = (t) => {
+      k.value === c.editable && (re.value = !0), be(() => {
         var i;
         (i = $.value) == null || i.focus();
       });
-    }, Ye = (t) => {
-      let i = $.value.value;
-      (l.value === u.mask || l.value === u.digit || (A.value || S.value) && (l.value === u.text || l.value === u.email || l.value === u.password || l.value === u.textarea)) && (i = ue(i), $.value.value = i), s.value = i, N.value = !0, m == null || m(p, s.value), n("input", t, C.value, s.value), n("update:modelValue", s.value);
-    }, Qe = (t) => {
-      T.value = s.value, n("focus", t, C.value);
-    }, Xe = (t) => {
-      T.value !== s.value && (v(s.value, !0, !0), N.value = !0, m == null || m(p, s.value)), le.value = !1, n("blur", t, C.value);
-    }, v = (t, i = !0, R = !1) => {
-      s.value = i ? ue(t) : t, G.value = re(s.value), l.value === u.checkbox || l.value === u.radio ? $.value.checked = !!s.value : $.value.value = s.value, R && n("change", T.value, s.value, C.value);
     }, Je = (t) => {
-      const i = t.target;
-      v(i.value, !1, !0), N.value = !0, m == null || m(p, s.value), n("update:modelValue", s.value);
+      let i = $.value.value;
+      (l.value === u.mask || l.value === u.digit || (S.value || A.value) && (l.value === u.text || l.value === u.email || l.value === u.password || l.value === u.textarea)) && (i = se(i), $.value.value = i), s.value = i, h.value = !0, m == null || m(p, s.value), n("input", t, T.value, s.value), n("update:modelValue", s.value);
     }, Ze = (t) => {
-      const i = t.target;
-      v(i.value, !1, !0), N.value = !0, m == null || m(p, s.value), n("update:modelValue", s.value);
+      C.value = s.value, n("focus", t, T.value);
     }, Ge = (t) => {
-      const i = t.target;
-      v(i.checked, !1, !0), N.value = !0, m == null || m(p, s.value), n("update:modelValue", s.value);
+      C.value !== s.value && (v(s.value, !0, !0), h.value = !0, m == null || m(p, s.value)), re.value = !1, n("blur", t, T.value);
+    }, v = (t, i = !0, D = !1) => {
+      s.value = i ? se(t) : t, x.value = de(s.value), l.value === u.checkbox || l.value === u.radio ? $.value.checked = !!s.value : $.value.value = s.value, D && n("change", C.value, s.value, T.value);
     }, xe = (t) => {
       const i = t.target;
-      v(i.checked, !1, !0), N.value = !0, m && o.value ? m(o.value, i.checked ? p : null) : m == null || m(p, s.value), n("update:modelValue", s.value);
+      v(i.value, !1, !0), h.value = !0, m == null || m(p, s.value), n("update:modelValue", s.value);
     }, ce = (t) => {
       const i = t.target;
-      v(i.value, !1, !0), N.value = !0, m == null || m(p, s.value), n("update:modelValue", s.value);
+      v(i.value, !1, !0), h.value = !0, m == null || m(p, s.value), n("update:modelValue", s.value);
     }, _e = (t) => {
-      if (se.value && (t.code === "Space" || t.code === "Enter")) {
+      const i = t.target;
+      v(i.checked, !1, !0), h.value = !0, m == null || m(p, s.value), n("update:modelValue", s.value);
+    }, en = (t) => {
+      const i = t.target;
+      v(i.checked, !1, !0), h.value = !0, m && o.value ? m(o.value, i.checked ? p : null) : m == null || m(p, s.value), n("update:modelValue", s.value);
+    }, nn = (t) => {
+      const i = t.target;
+      v(i.value, !1, !0), h.value = !0, m == null || m(p, s.value), n("update:modelValue", s.value);
+    }, on = (t) => {
+      if (le.value && (t.code === "Space" || t.code === "Enter")) {
         t.preventDefault(), t.stopPropagation();
         return;
       }
-      n("keydown", t, C.value);
-    }, pe = () => {
-      M.component.inputList[p] && M.component.inputList[p].isHisonvueComponent && console.warn(`[Hisonvue] The input ID is at risk of being duplicated. ${p}`), Mn(ne, () => {
-        fe(), ge(pe);
-      }), $.value && (oe(), L.value && Tn(L.value), l.value !== u.checkbox && l.value !== u.radio && l.value !== u.range && l.value !== u.color && kn($.value), v(s.value, !1), C.value = {
+      n("keydown", t, T.value);
+    }, fe = () => {
+      g.component.inputList[p] && g.component.inputList[p].isHisonvueComponent && console.warn(`[Hisonvue] The input ID is at risk of being duplicated. ${p}`), yn(oe, () => {
+        Me(), be(fe);
+      }), $.value && (te(), L.value && wn(L.value), l.value !== u.checkbox && l.value !== u.radio && l.value !== u.range && l.value !== u.color && Nn($.value), v(s.value, !1), T.value = {
         isHisonvueComponent: !0,
         getId: () => p,
         getType: () => "input",
@@ -543,12 +572,12 @@ const $n = {
         setName: (t) => {
           if (t === o.value) return;
           const i = o.value;
-          o.value = t, l.value === u.radio && (q == null || q(p, i, t, !!s.value));
+          o.value = t, l.value === u.radio && (R == null || R(p, i, t, !!s.value));
         },
-        getText: () => G.value,
+        getText: () => x.value,
         getValue: () => s.value,
         setValue: (t) => {
-          T.value = s.value, s.value = t, v(s.value);
+          C.value = s.value, s.value = t, v(s.value);
         },
         getTitle: () => O.value,
         setTitle: (t) => {
@@ -560,15 +589,15 @@ const $n = {
         },
         getInputType: () => l.value,
         setInputType: (t) => {
-          l.value = u[t], T.value = s.value, v(s.value), e.textAlign == null && (E.value = ie(l.value));
+          l.value = u[t], C.value = s.value, v(s.value), e.textAlign == null && (E.value = ue(l.value));
         },
         getFormat: () => w.value ?? "",
         setFormat: (t) => {
-          w.value = t, T.value = s.value, v(s.value);
+          w.value = t, C.value = s.value, v(s.value);
         },
         getNullText: () => W.value,
         setNullText: (t) => {
-          W.value = t, (c(s.value) || s.value === "") && (G.value = re(s.value));
+          W.value = t, (_(s.value) || s.value === "") && (x.value = de(s.value));
         },
         getEditMode: () => k.value,
         setEditMode: (t) => {
@@ -576,23 +605,23 @@ const $n = {
         },
         getMaxNumber: () => B.value,
         setMaxNumber: (t) => {
-          d.utils.isNumeric(t) && (B.value = t, T.value = s.value, l.value === u.number && v(s.value));
+          d.utils.isNumeric(t) && (B.value = t, C.value = s.value, l.value === u.number && v(s.value));
         },
         getMinNumber: () => F.value,
         setMinNumber: (t) => {
-          d.utils.isNumeric(t) && (F.value = t, T.value = s.value, l.value === u.number && v(s.value));
+          d.utils.isNumeric(t) && (F.value = t, C.value = s.value, l.value === u.number && v(s.value));
         },
-        getRoundNumber: () => V.value,
+        getRoundNumber: () => q.value,
         setRoundNumber: (t) => {
-          !d.utils.isPositiveInteger(t) && !d.utils.isNegativeInteger(t) && t !== 0 || (V.value = t, T.value = s.value, l.value === u.number && v(s.value));
+          !d.utils.isPositiveInteger(t) && !d.utils.isNegativeInteger(t) && t !== 0 || (q.value = t, C.value = s.value, l.value === u.number && v(s.value));
         },
-        getMaxLength: () => A.value,
+        getMaxLength: () => S.value,
         setMaxLength: (t) => {
-          d.utils.isPositiveInteger(t) && (A.value = t), T.value = s.value, v(s.value);
+          d.utils.isPositiveInteger(t) && (S.value = t), C.value = s.value, v(s.value);
         },
-        getMaxByte: () => S.value,
+        getMaxByte: () => A.value,
         setMaxByte: (t) => {
-          d.utils.isPositiveInteger(t) && (S.value = t), T.value = s.value, v(s.value);
+          d.utils.isPositiveInteger(t) && (A.value = t), C.value = s.value, v(s.value);
         },
         getRequired: () => j.value,
         setRequired: (t) => {
@@ -602,59 +631,64 @@ const $n = {
         setPlaceholder: (t) => {
           z.value = t;
         },
-        isFontBold: () => Y.value,
+        getPlaceholderColor: () => Y.value,
+        setPlaceholderColor: (t) => {
+          const i = (t ?? "").trim();
+          Y.value = i.length > 0 ? i : "primary";
+        },
+        isFontBold: () => Q.value,
         setFontBold: (t) => {
-          Y.value = t;
+          Q.value = t;
         },
-        isFontItalic: () => Q.value,
+        isFontItalic: () => X.value,
         setFontItalic: (t) => {
-          Q.value = t;
+          X.value = t;
         },
-        isFontThruline: () => X.value,
+        isFontThruline: () => J.value,
         setFontThruline: (t) => {
-          X.value = t;
+          J.value = t;
         },
-        isFontUnderline: () => J.value,
+        isFontUnderline: () => Z.value,
         setFontUnderline: (t) => {
-          J.value = t;
+          Z.value = t;
         },
         getTextAlign: () => E.value,
         setTextAlign: (t) => {
-          (t === h.left || t === h.center || t === h.right) && (E.value = t);
+          (t === N.left || t === N.center || t === N.right) && (E.value = t);
         },
         isBorder: () => U.value,
         setBorder: (t) => {
           U.value = t;
         },
-        isModified: () => N.value,
+        isModified: () => h.value,
         setModified: (t) => {
-          N.value = t;
+          h.value = t;
         },
         getToggleStyle: () => K.value,
         setToggleStyle: (t) => {
           (t === "default" || t === "switch") && (K.value = t);
         },
-        getTabIndex: () => Z.value,
+        getTabIndex: () => G.value,
         setTabIndex: (t) => {
-          Z.value = t != null ? Number(t) : null;
+          G.value = t != null ? Number(t) : null;
         },
         focus: () => {
           var t;
           L.value ? L.value.focus() : (t = $.value) == null || t.focus();
         },
-        reload: () => gn(ne)
-      }, M.component.inputList[p] = C.value, ve && ve(p), n("mounted", C.value));
-    }, fe = () => {
-      bn(ne), delete M.component.inputList[p], l.value !== u.checkbox && l.value !== u.radio && l.value !== u.range && l.value !== u.color && wn($.value), L.value && Cn(L.value);
+        reload: () => $n(oe)
+      }, g.component.inputList[p] = T.value, pe && pe(p), n("mounted", T.value));
+    }, Me = () => {
+      Cn(oe), delete g.component.inputList[p], l.value !== u.checkbox && l.value !== u.radio && l.value !== u.range && l.value !== u.color && Ln($.value), L.value && hn(L.value);
     };
-    return nn(pe), on(fe), a(me, (t) => {
-      oe(), n("responsive-change", t);
+    return un(fe), sn(Me), a(ve, (t) => {
+      te(), n("responsive-change", t);
     }), a(() => e.modelValue, (t) => {
       v(t, !1);
     }), a(() => e.name, (t) => {
       if (t && t !== o.value) {
         const i = o.value;
-        o.value = t, l.value === u.radio && (q == null || q(p, i, t, !!s.value));
+        o.value = t, l.value === u.radio && (R == null || R(p, i, t, !!s.value));
       }
     }), a(() => e.visible, (t) => {
       const i = !!t;
@@ -664,9 +698,9 @@ const $n = {
       i !== O.value && (O.value = i);
     }), a(() => e.nullText, (t) => {
       const i = t ?? "";
-      i !== W.value && (W.value = i, (c(s.value) || s.value === "") && (G.value = re(s.value)));
+      i !== W.value && (W.value = i, (_(s.value) || s.value === "") && (x.value = de(s.value)));
     }), a(() => e.inputType, (t) => {
-      t && t !== l.value && (l.value = t, e.textAlign == null && (E.value = ie(l.value)), v(s.value));
+      t && t !== l.value && (l.value = t, e.textAlign == null && (E.value = ue(l.value)), v(s.value));
     }), a(() => e.format, (t) => {
       const i = t ?? null;
       i !== w.value && (w.value = i, v(s.value));
@@ -678,93 +712,97 @@ const $n = {
       i !== F.value && (F.value = i, l.value === u.number && v(s.value));
     }), a(() => e.roundNumber, (t) => {
       const i = d.utils.isInteger(t) || d.utils.isNegativeInteger(t) || t === "0" ? Number(t) : null;
-      i !== V.value && (V.value = i, l.value === u.number && v(s.value));
+      i !== q.value && (q.value = i, l.value === u.number && v(s.value));
     }), a(() => e.maxLength, (t) => {
       const i = d.utils.isPositiveInteger(t) ? Number(t) : null;
-      i !== A.value && (A.value = i, v(s.value));
+      i !== S.value && (S.value = i, v(s.value));
     }), a(() => e.maxByte, (t) => {
       const i = d.utils.isPositiveInteger(t) ? Number(t) : null;
-      i !== S.value && (S.value = i, v(s.value));
+      i !== A.value && (A.value = i, v(s.value));
     }), a(() => e.textAlign, (t) => {
-      t && t !== E.value && (t === h.left || t === h.center || t === h.right) && (E.value = t);
+      t && t !== E.value && (t === N.left || t === N.center || t === N.right) && (E.value = t);
     }), a(() => e.border, (t) => {
       const i = !!t;
       i !== U.value && (U.value = i);
     }), a(() => e.placeholder, (t) => {
       const i = t ?? "";
       i !== z.value && (z.value = i);
+    }), a(() => e.placeholderColor, (t) => {
+      const i = t ?? "primary";
+      i !== Y.value && (Y.value = i);
     }), a(() => e.required, (t) => {
       const i = !!t;
       i !== j.value && (j.value = i);
     }), a(() => e.fontBold, (t) => {
       const i = !!t;
-      i !== Y.value && (Y.value = i);
+      i !== Q.value && (Q.value = i);
     }), a(() => e.fontItalic, (t) => {
       const i = !!t;
-      i !== Q.value && (Q.value = i);
+      i !== X.value && (X.value = i);
     }), a(() => e.fontThruline, (t) => {
       const i = !!t;
-      i !== X.value && (X.value = i);
+      i !== J.value && (J.value = i);
     }), a(() => e.fontUnderline, (t) => {
       const i = !!t;
-      i !== J.value && (J.value = i);
+      i !== Z.value && (Z.value = i);
     }), a(() => e.editMode, (t) => {
       t && t !== k.value && (k.value = t);
     }), a(() => e.tabIndex, (t) => {
       const i = t === null || t === "" ? null : Number(t);
-      i !== Z.value && (Z.value = i);
+      i !== G.value && (G.value = i);
     }), a(() => e.class, () => {
-      oe();
+      te();
     }), a(() => e.toggleStyle, (t) => {
       const i = t ?? "default";
       i !== K.value && (i === "default" || i === "switch") && (K.value = i);
     }), {
       inputRef: $,
       inputTextRef: L,
-      inputMethods: g(() => tn(C)),
-      inputValue: De,
-      editing: le,
+      inputMethods: f(() => ln(T)),
+      inputValue: Ve,
+      editing: re,
       props: e,
       id: p,
       nameAttr: Ie,
-      responsiveClassList: D,
-      visibleClass: je,
-      editModeClassList: Re,
-      requiredClassList: Ke,
-      fontBoldClass: Ue,
-      fontItalicClass: He,
-      fontThrulineClass: Oe,
-      fontUnderlineClass: We,
+      responsiveClassList: V,
+      visibleClass: Qe,
+      editModeClassList: Ke,
+      requiredClassList: Ue,
+      fontBoldClass: We,
+      fontItalicClass: je,
+      fontThrulineClass: ze,
+      fontUnderlineClass: Ye,
       textAlignStyle: Ae,
-      borderClass: qe,
-      disable: Ve,
-      readonly: se,
+      placeholderColorStyle: Oe,
+      borderClass: Re,
+      disable: qe,
+      readonly: le,
       inputType: l,
-      inputExpressionType: te,
-      inputAttrType: Pe,
+      inputExpressionType: ie,
+      inputAttrType: Se,
       title: O,
       placeholder: z,
       maxNumber: B,
       minNumber: F,
-      spanText: G,
+      spanText: x,
       toggleStyle: K,
-      tabIndex: Z,
-      onInput: Ye,
-      onTextInputFocus: ze,
-      onFocus: Qe,
-      onBlur: Xe,
-      onRangeChange: Je,
-      onColorChange: Ze,
-      onCheckboxChange: Ge,
-      onRadioChange: xe,
-      onSelectChange: ce,
-      onKeydown: _e
+      tabIndex: G,
+      onInput: Je,
+      onTextInputFocus: Xe,
+      onFocus: Ze,
+      onBlur: Ge,
+      onRangeChange: xe,
+      onColorChange: ce,
+      onCheckboxChange: _e,
+      onRadioChange: en,
+      onSelectChange: nn,
+      onKeydown: on
     };
   }
-}), hn = ["id", "name", "value", "disabled", "readonly", "title", "tabindex"], Ln = ["id", "name", "value", "disabled", "readonly", "checked", "title", "tabindex"], Bn = ["id", "name", "disabled", "readonly", "checked", "title", "tabindex"], Fn = ["id", "name", "disabled", "readonly", "checked", "title", "tabindex"], In = ["id", "name", "disabled", "readonly", "checked", "title", "tabindex"], Pn = ["id", "name", "disabled", "readonly", "checked", "title", "tabindex"], An = ["id", "name", "value", "disabled", "readonly", "title", "tabindex"], Sn = ["value"], En = ["id", "name", "value", "disabled", "readonly", "placeholder", "title", "maxlength", "tabindex"], Dn = ["id", "name", "value", "disabled", "readonly", "title", "placeholder", "tabindex"], Vn = ["id", "name", "value", "disabled", "readonly", "type", "title", "placeholder", "max", "min", "tabindex"];
-function qn(e, n, $, L, C, p) {
+}), Fn = ["id", "name", "value", "disabled", "readonly", "title", "tabindex"], Pn = ["id", "name", "value", "disabled", "readonly", "checked", "title", "tabindex"], In = ["id", "name", "disabled", "readonly", "checked", "title", "tabindex"], Sn = ["id", "name", "disabled", "readonly", "checked", "title", "tabindex"], An = ["id", "name", "disabled", "readonly", "checked", "title", "tabindex"], En = ["id", "name", "disabled", "readonly", "checked", "title", "tabindex"], Dn = ["id", "name", "value", "disabled", "readonly", "title", "tabindex"], Vn = ["value"], qn = ["id", "name", "value", "disabled", "readonly", "placeholder", "title", "maxlength", "tabindex"], Rn = ["id", "name", "value", "disabled", "readonly", "title", "placeholder", "tabindex"], Kn = ["id", "name", "value", "disabled", "readonly", "type", "title", "placeholder", "max", "min", "tabindex"];
+function Un(e, n, $, L, T, p) {
   return y(), b("div", {
-    class: f([
+    class: M([
       "hison-wrapper",
       "hison-s-input-margin-adjustment",
       ...e.responsiveClassList,
@@ -773,18 +811,18 @@ function qn(e, n, $, L, C, p) {
   }, [
     e.inputType === "range" ? (y(), b("div", {
       key: 0,
-      class: f([
+      class: M([
         "hison-input",
         "hison-input-range-div"
       ]),
-      style: I([e.textAlignStyle, e.props.style])
+      style: P([e.textAlignStyle, e.props.style])
     }, [
-      P("input", {
+      I("input", {
         ref: "inputRef",
         id: `${e.id}`,
         name: `${e.nameAttr}`,
         type: "range",
-        class: f([
+        class: M([
           `hison-input-${e.inputType}`,
           ...e.editModeClassList,
           ...e.requiredClassList
@@ -816,21 +854,21 @@ function qn(e, n, $, L, C, p) {
         onTouchmove: n[19] || (n[19] = (o) => e.$emit("touchmove", o, e.inputMethods)),
         onTouchcancel: n[20] || (n[20] = (o) => e.$emit("touchcancel", o, e.inputMethods)),
         onContextmenu: n[21] || (n[21] = (o) => e.$emit("contextmenu", o, e.inputMethods))
-      }, null, 42, hn)
+      }, null, 42, Fn)
     ], 4)) : e.inputType === "color" ? (y(), b("div", {
       key: 1,
-      class: f([
+      class: M([
         "hison-input",
         "hison-input-color-div"
       ]),
-      style: I([e.textAlignStyle, e.props.style])
+      style: P([e.textAlignStyle, e.props.style])
     }, [
-      P("input", {
+      I("input", {
         ref: "inputRef",
         id: `${e.id}`,
         name: `${e.nameAttr}`,
         type: "color",
-        class: f([
+        class: M([
           `hison-input-${e.inputType}`,
           ...e.editModeClassList,
           ...e.requiredClassList
@@ -863,14 +901,14 @@ function qn(e, n, $, L, C, p) {
         onTouchmove: n[41] || (n[41] = (o) => e.$emit("touchmove", o, e.inputMethods)),
         onTouchcancel: n[42] || (n[42] = (o) => e.$emit("touchcancel", o, e.inputMethods)),
         onContextmenu: n[43] || (n[43] = (o) => e.$emit("contextmenu", o, e.inputMethods))
-      }, null, 42, Ln)
+      }, null, 42, Pn)
     ], 4)) : e.inputType === "checkbox" ? (y(), b("div", {
       key: 2,
-      class: f([
+      class: M([
         "hison-input",
         "hison-input-checkbox-div"
       ]),
-      style: I([e.textAlignStyle, e.props.style])
+      style: P([e.textAlignStyle, e.props.style])
     }, [
       e.toggleStyle !== "switch" ? (y(), b("input", {
         key: 0,
@@ -878,7 +916,7 @@ function qn(e, n, $, L, C, p) {
         id: `${e.id}`,
         name: `${e.nameAttr}`,
         type: "checkbox",
-        class: f([
+        class: M([
           `hison-input-${e.inputType}`,
           ...e.editModeClassList,
           ...e.requiredClassList
@@ -910,11 +948,11 @@ function qn(e, n, $, L, C, p) {
         onTouchmove: n[63] || (n[63] = (o) => e.$emit("touchmove", o, e.inputMethods)),
         onTouchcancel: n[64] || (n[64] = (o) => e.$emit("touchcancel", o, e.inputMethods)),
         onContextmenu: n[65] || (n[65] = (o) => e.$emit("contextmenu", o, e.inputMethods))
-      }, null, 42, Bn)) : (y(), b("label", {
+      }, null, 42, In)) : (y(), b("label", {
         key: 1,
-        class: f(["hison-input-checkbox-switch", ...e.editModeClassList])
+        class: M(["hison-input-checkbox-switch", ...e.editModeClassList])
       }, [
-        P("input", {
+        I("input", {
           ref: "inputRef",
           id: `${e.id}`,
           name: `${e.nameAttr}`,
@@ -947,9 +985,9 @@ function qn(e, n, $, L, C, p) {
           onTouchmove: n[85] || (n[85] = (o) => e.$emit("touchmove", o, e.inputMethods)),
           onTouchcancel: n[86] || (n[86] = (o) => e.$emit("touchcancel", o, e.inputMethods)),
           onContextmenu: n[87] || (n[87] = (o) => e.$emit("contextmenu", o, e.inputMethods))
-        }, null, 40, Fn),
-        P("span", {
-          class: f(["hison-switch-visual", [
+        }, null, 40, Sn),
+        I("span", {
+          class: M(["hison-switch-visual", [
             ...e.editModeClassList,
             ...e.requiredClassList
           ]]),
@@ -958,8 +996,8 @@ function qn(e, n, $, L, C, p) {
       ], 2))
     ], 4)) : e.inputType === "radio" ? (y(), b("div", {
       key: 3,
-      class: f(["hison-input", "hison-input-radio-div"]),
-      style: I([e.textAlignStyle, e.props.style])
+      class: M(["hison-input", "hison-input-radio-div"]),
+      style: P([e.textAlignStyle, e.props.style])
     }, [
       e.toggleStyle !== "switch" ? (y(), b("input", {
         key: 0,
@@ -967,7 +1005,7 @@ function qn(e, n, $, L, C, p) {
         id: `${e.id}`,
         name: `${e.nameAttr}`,
         type: "radio",
-        class: f([
+        class: M([
           `hison-input-${e.inputType}`,
           "hison-input-radio--default",
           ...e.editModeClassList,
@@ -1000,11 +1038,11 @@ function qn(e, n, $, L, C, p) {
         onTouchmove: n[107] || (n[107] = (o) => e.$emit("touchmove", o, e.inputMethods)),
         onTouchcancel: n[108] || (n[108] = (o) => e.$emit("touchcancel", o, e.inputMethods)),
         onContextmenu: n[109] || (n[109] = (o) => e.$emit("contextmenu", o, e.inputMethods))
-      }, null, 42, In)) : (y(), b("label", {
+      }, null, 42, An)) : (y(), b("label", {
         key: 1,
-        class: f(["hison-input-radio-switch", ...e.editModeClassList])
+        class: M(["hison-input-radio-switch", ...e.editModeClassList])
       }, [
-        P("input", {
+        I("input", {
           ref: "inputRef",
           id: `${e.id}`,
           name: `${e.nameAttr}`,
@@ -1037,9 +1075,9 @@ function qn(e, n, $, L, C, p) {
           onTouchmove: n[129] || (n[129] = (o) => e.$emit("touchmove", o, e.inputMethods)),
           onTouchcancel: n[130] || (n[130] = (o) => e.$emit("touchcancel", o, e.inputMethods)),
           onContextmenu: n[131] || (n[131] = (o) => e.$emit("contextmenu", o, e.inputMethods))
-        }, null, 40, Pn),
-        P("span", {
-          class: f(["hison-switch-visual", [
+        }, null, 40, En),
+        I("span", {
+          class: M(["hison-switch-visual", [
             ...e.editModeClassList,
             ...e.requiredClassList
           ]]),
@@ -1051,8 +1089,8 @@ function qn(e, n, $, L, C, p) {
       ref: "inputRef",
       id: `${e.id}`,
       name: `${e.nameAttr}`,
-      style: I([e.textAlignStyle, e.props.style]),
-      class: f([
+      style: P([e.textAlignStyle, e.placeholderColorStyle, e.props.style]),
+      class: M([
         "hison-input",
         `hison-input-${e.inputType}`,
         ...e.editModeClassList,
@@ -1091,16 +1129,16 @@ function qn(e, n, $, L, C, p) {
       onTouchcancel: n[152] || (n[152] = (o) => e.$emit("touchcancel", o, e.inputMethods)),
       onContextmenu: n[153] || (n[153] = (o) => e.$emit("contextmenu", o, e.inputMethods))
     }, [
-      (y(!0), b(be, null, un(e.props.options, (o) => (y(), b("option", {
+      (y(!0), b(ye, null, rn(e.props.options, (o) => (y(), b("option", {
         key: o.value,
         value: o.value
-      }, ye(o.text), 9, Sn))), 128))
-    ], 46, An)) : e.inputType === "textarea" ? (y(), b("textarea", {
+      }, $e(o.text), 9, Vn))), 128))
+    ], 46, Dn)) : e.inputType === "textarea" ? (y(), b("textarea", {
       key: 5,
       ref: "inputRef",
       id: `${e.id}`,
       name: `${e.nameAttr}`,
-      class: f([
+      class: M([
         "hison-input",
         `hison-input-${e.inputType}`,
         ...e.editModeClassList,
@@ -1112,7 +1150,7 @@ function qn(e, n, $, L, C, p) {
         e.borderClass
       ]),
       value: e.inputValue,
-      style: I([e.textAlignStyle, e.props.style]),
+      style: P([e.textAlignStyle, e.placeholderColorStyle, e.props.style]),
       disabled: e.disable,
       readonly: e.readonly,
       placeholder: e.placeholder || void 0,
@@ -1122,12 +1160,12 @@ function qn(e, n, $, L, C, p) {
       onInput: n[154] || (n[154] = (...o) => e.onInput && e.onInput(...o)),
       onFocus: n[155] || (n[155] = (...o) => e.onFocus && e.onFocus(...o)),
       onBlur: n[156] || (n[156] = (...o) => e.onBlur && e.onBlur(...o))
-    }, ye(e.inputValue), 47, En)) : (y(), b(be, { key: 6 }, [
-      $e(P("input", {
+    }, $e(e.inputValue), 47, qn)) : (y(), b(ye, { key: 6 }, [
+      Ce(I("input", {
         ref: "inputTextRef",
         id: `input_text_${e.id}`,
         name: `input_text_${e.nameAttr}`,
-        class: f([
+        class: M([
           "hison-input",
           `hison-input-text-${e.inputType}`,
           ...e.editModeClassList,
@@ -1140,7 +1178,7 @@ function qn(e, n, $, L, C, p) {
         ]),
         type: "text",
         value: e.spanText,
-        style: I([e.textAlignStyle, e.props.style]),
+        style: P([e.textAlignStyle, e.placeholderColorStyle, e.props.style]),
         disabled: e.disable,
         readonly: e.readonly,
         title: e.title || void 0,
@@ -1165,21 +1203,21 @@ function qn(e, n, $, L, C, p) {
         onTouchend: n[173] || (n[173] = (o) => e.$emit("touchend", o, e.inputMethods)),
         onTouchmove: n[174] || (n[174] = (o) => e.$emit("touchmove", o, e.inputMethods)),
         onTouchcancel: n[175] || (n[175] = (o) => e.$emit("touchcancel", o, e.inputMethods))
-      }, null, 46, Dn), [
+      }, null, 46, Rn), [
         [Te, !e.editing]
       ]),
-      $e(P("input", {
+      Ce(I("input", {
         ref: "inputRef",
         id: `${e.id}`,
         name: `${e.nameAttr}`,
-        class: f([
+        class: M([
           "hison-input",
           `hison-input-${e.inputType}`,
           ...e.editModeClassList,
           e.borderClass
         ]),
         value: e.inputValue,
-        style: I([e.textAlignStyle, e.props.style]),
+        style: P([e.textAlignStyle, e.placeholderColorStyle, e.props.style]),
         disabled: e.disable,
         readonly: e.readonly,
         type: e.inputType,
@@ -1205,13 +1243,13 @@ function qn(e, n, $, L, C, p) {
         onPaste: n[190] || (n[190] = (o) => e.$emit("paste", o, e.inputMethods)),
         onWheel: n[191] || (n[191] = (o) => e.$emit("wheel", o, e.inputMethods)),
         onContextmenu: n[192] || (n[192] = (o) => e.$emit("contextmenu", o, e.inputMethods))
-      }, null, 46, Vn), [
+      }, null, 46, Kn), [
         [Te, e.editing]
       ])
     ], 64))
   ], 2);
 }
-const Hn = /* @__PURE__ */ yn(Nn, [["render", qn]]);
+const jn = /* @__PURE__ */ Tn(Bn, [["render", Un], ["__scopeId", "data-v-f3c99304"]]);
 export {
-  Hn as default
+  jn as default
 };