hisonvue 1.1.22 → 1.1.24

package/dist/{HInput-DoSKCROI.mjs → HInput-Ci-U8Ydv.mjs}

@@ -1,37 +1,37 @@
-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-CGr5-mvg.mjs";
-import { _ as Tn } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
-const kn = {
+import { defineComponent as un, ref as r, computed as M, inject as me, onMounted as sn, onBeforeUnmount as ln, watch as m, unref as rn, nextTick as ye, createElementBlock as y, openBlock as $, normalizeClass as g, normalizeStyle as S, createElementVNode as A, Fragment as $e, renderList as dn, toDisplayString as Ce, withDirectives as Te, vShow as ke } from "vue";
+import { T as an, y as _, N as mn, h as b, g as vn, u as pn, O as i, l as a, P as ee, w as B, e as fn, t as Mn, a as gn, b as we, Q as ve, R as bn, U as yn, r as $n, c as Cn, d as Tn } from "./index-jeMy6Ys3.mjs";
+import { _ as kn } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const wn = {
   /**
    * Unique identifier for the input.
    * - You can later retrieve its methods via `hison.component.getInput(id)`
-   * - ⚠️ Duplicate `id` values will throw an error at mount time
+   * - Duplicate `id` values can cause unexpected behavior if kept in a global registry.
    */
   id: { type: String, required: !1 },
+  /**
+   * Data extraction key for `HInputGroup`.
+   * - Used as the key when `HInputGroup.getDataObject()` / `getDataModel()` extracts values.
+   * - If omitted or empty, it falls back to `id`.
+   * - `id` is still the runtime identifier for `hison.component.getInput(id)`.
+   */
+  dataKey: { type: String, required: !1 },
   /**
    * HTML `name` attribute.
    * - Default: same as `id` when omitted.
    * - Radio usage (`inputType: 'radio'`):
    *   - All `HInput` with the same `name` form one radio group.
-   *   - Each radio’s own `id` is treated as the group’s candidate value.
+   *   - Each radio’s own `id` is the runtime identifier, while `dataKey` is the data candidate value
+   *     (falls back to `id` when `dataKey` is empty).
    *   - The radio’s local `modelValue` is boolean (`true`/`false`) and drives its `checked` state.
    *   - When wrapped by `HInputGroup`, radios are aggregated per `name` and exposed as
-   *     `{ [name]: selectedRadioId | null }` via `getDataObject()` / `v-model`.
-   *   - To set a selection programmatically (load/set), pass `{ [name]: <radioId> }` to `HInputGroup`.
+   *     `{ [name]: selectedRadioDataKey | null }`.
+   *   - To set a selection programmatically (load/set), pass `{ [name]: <radioDataKey> }` to `HInputGroup`.
    *   - Changing `name` at runtime via `setName()` re-registers group membership with `HInputGroup`.
    * - Non-radio inputs: `name` only sets the underlying HTML attribute (no grouping behavior).
    */
   name: { type: String, required: !1 },
   /**
    * Bound value for the input field.
-   * - Controlled via `v-model`
-   * - Supports multiple types depending on `inputType`:
-   *    - `text`, `email`, `mask`, `digit`, `textarea` → `string`
-   *    - `number` → `number`
-   *    - `checkbox` → `boolean`
-   *    - `select` → `string | number | boolean`
-   *    - `date`, `month`, `time` → `string` or `Date`
-   * - Internally processed and formatted based on `inputType` and `format`
    */
   modelValue: {
     type: [String, Number, Boolean, Object, Array, Date],
@@ -39,8 +39,6 @@ const kn = {
   },
   /**
    * Custom class string applied to the input container.
-   * - Supports responsive classes like `hison-col-*`, `hison-pos-*`, `hison-size-*`
-   * - Accepts string / array / object (Vue standard) form
    */
   class: {
     type: [String, Array, Object],
@@ -48,8 +46,6 @@ const kn = {
   },
   /**
    * Inline style for the input element.
-   * - Accepts string, CSSProperties object, or an array of objects
-   * - Merged with internal dynamic styles
    */
   style: {
     type: [String, Object, Array],
@@ -57,80 +53,54 @@ const kn = {
   },
   /**
    * Controls visibility of the input field.
-   * - Boolean only. Use `:visible="false"`
-   * - Default: `true`
    */
   visible: { type: Boolean, default: !0 },
   /**
    * Tooltip text shown on hover.
-   * - Maps to the `title` attribute
-   * - Modifiable at runtime via `HInputMethods.setTitle()`
    */
   title: { type: String, required: !1 },
   /**
    * Input type.
-   * - Available values: `'text'`, `'mask'`, `'number'`, `'digit'`, `'date'`, `'month'`, `'time'`, `'email'`, `'password'`, `'checkbox'`, `'range'`, `'color'`, `'textarea'`, `'select'`
-   * - Accepts enum `InputType` or its literal strings
-   * - Affects input formatting and behavior
    */
   inputType: {
     type: String,
     required: !1,
-    validator: (e) => an.includes(e)
+    validator: (e) => mn.includes(e)
   },
   /**
    * Format string used for displaying or formatting the value.
-   * - Used when `type` is `'number'`, `'mask'`, `'date'`, or `'month'`
    */
   format: { type: String, required: !1 },
   /**
    * Placeholder text to show when value is null or empty.
-   * - Used as a display fallback in span mode
    */
   nullText: { type: String, default: "" },
   /**
    * Maximum numeric value.
-   * - Only applicable when `type` is `'number'`
-   * - Enforced during input and formatting
-   * - Accepts string or number
    */
   maxNumber: { type: [String, Number], required: !1 },
   /**
    * Minimum numeric value.
-   * - Only applicable when `type` is `'number'`
-   * - Accepts string or number
    */
   minNumber: { type: [String, Number], required: !1 },
   /**
    * Rounding precision for numeric inputs.
-   * - Only applies when `type` is `'number'`
-   * - Accepts positive or negative integers (string or number)
    */
   roundNumber: { type: [String, Number], required: !1 },
   /**
    * Maximum number of characters allowed.
-   * - Truncates string if exceeded
-   * - Does not consider byte size
-   * - Accepts string or number
    */
   maxLength: { type: [String, Number], required: !1 },
   /**
    * Maximum number of bytes allowed.
-   * - Truncates string based on UTF-8 byte size
-   * - Uses `hison.utils.getCutByteLength()` internally
-   * - Accepts string or number
    */
   maxByte: { type: [String, Number], required: !1 },
   /**
    * Placeholder string shown inside the input when empty.
-   * - 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,
@@ -138,69 +108,46 @@ const kn = {
   },
   /**
    * Edit mode of the input.
-   * - Values: `'editable'`, `'readonly'`, `'disable'`
-   * - Accepts enum `EditMode` or its literal strings
-   * - `'readonly'` and `'disable'` both prevent editing but differ in styling
    */
   editMode: {
     type: String,
-    default: c.editable,
+    default: _.editable,
     validator: (e) => ["editable", "disable", "readonly"].includes(e)
   },
   /**
    * Whether the input is required.
-   * - Boolean only
-   * - Adds `hison-input-required` class when `true`
    */
   required: { type: Boolean, default: !1 },
   /**
    * Bold font style toggle.
-   * - Boolean only
-   * - Adds `hison-font-bold` class when enabled
    */
   fontBold: { type: Boolean, default: !1 },
   /**
    * Italic font style toggle.
-   * - Boolean only
-   * - Adds `hison-font-italic` class when enabled
    */
   fontItalic: { type: Boolean, default: !1 },
   /**
    * Strikethrough font style toggle.
-   * - Boolean only
-   * - Adds `hison-font-thruline` class when enabled
    */
   fontThruline: { type: Boolean, default: !1 },
   /**
    * Underline font style toggle.
-   * - Boolean only
-   * - Adds `hison-font-underline` class when enabled
    */
   fontUnderline: { type: Boolean, default: !1 },
   /**
    * Text alignment for the input’s display text.
-   * - 'left' | 'center' | 'right'
-   * - Accepts enum `TextAlign` or its literal strings
    */
   textAlign: {
     type: String,
     default: null,
-    validator: (e) => e == null || dn.includes(e)
+    validator: (e) => e == null || an.includes(e)
   },
   /**
    * Whether to show border (rendered as subtle box-shadow).
-   * - Default: false (no border)
    */
   border: { type: Boolean, default: !0 },
   /**
    * List of selectable options for `inputType: 'select'`.
-   * - Each option should be an object with `text` (label shown to the user) and `value` (actual value to bind).
-   * - Used only when `inputType === 'select'`.
-   * example
-   * options: [
-   *   { text: 'Active', value: 'A' },
-   *   { text: 'Inactive', value: 'I' }
-   * ]
    */
   options: {
     type: Array,
@@ -209,146 +156,99 @@ const kn = {
   },
   /**
    * Output value when checkbox is checked (used in display mode).
-   * - Used only when `inputType === 'checkbox'`.
-   * - Affects the display text returned by `getText()` and the span view when not editing.
    */
   checkedText: { type: String, default: "Y" },
   /**
    * Output value when checkbox is unchecked (used in display mode).
-   * - Used only when `inputType === 'checkbox'`.
-   * - Affects the display text returned by `getText()` and the span view when not editing.
    */
   uncheckedText: { type: String, default: "N" },
-  /**
-   * Controls keyboard focus order of the element.
-   * - `0` enables natural tab navigation, positive numbers set custom order.
-   * - `null` or `''` removes tabindex (not focusable).
-   */
-  tabIndex: {
-    type: [Number, String],
-    default: null,
-    validator: (e) => e === null || e === "" || !isNaN(+e) && isFinite(+e)
-  },
   /**
    * Custom formatter function for display text (span text) of the input component.
-   *
-   * It overrides the default formatting logic based on `inputType`, allowing full control
-   * over the rendered text content of the input.
-   *
-   * If this prop is provided, it takes priority over any built-in format logic
-   * such as number/date formatting, checkbox label mapping, or select label resolution.
-   *
-   * @example
-   * // 1. Formatting numbers as currency
-   * <HInput
-   *   v-model="form.price"
-   *   inputTextdHandler={(val) => `$${Number(val).toLocaleString()}`}
-   * />
-   * // modelValue = 1200 => "$1,200"
-   *
-   * @example
-   * // 2. Showing 'Yes' or 'No' instead of true/false
-   * <HInput
-   *   v-model="form.enabled"
-   *   inputType="checkbox"
-   *   inputTextdHandler={(val) => val ? 'Yes' : 'No'}
-   * />
-   * // modelValue = true => "Yes"
-   *
-   * @example
-   * // 3. Applying custom date formatting
-   * <HInput
-   *   v-model="form.hireDate"
-   *   inputType="date"
-   *   inputTextdHandler={(val) => dayjs(val).format('MMMM D, YYYY')}
-   * />
-   * // modelValue = '2025-07-03' => "July 3, 2025"
-   *
-   * @remarks
-   * This only affects the `spanText` used in display mode. It does **not** modify the actual value
-   * bound via `v-model`, nor the value shown in the actual input box when in editing mode.
    */
   inputTextdHandler: {
     type: Function,
     default: void 0
   },
   /**
-   * Defines the **visual style** for toggle-type inputs (`checkbox` or `radio`).
-   * 
-   * - `'default'` : Uses the standard circular (radio) or square (checkbox) design.
-   * - `'switch'`  : Renders a modern switch-style toggle (sliding thumb on a track).
-   * 
-   * @default 'default'
+   * Defines the visual style for toggle-type inputs (`checkbox` or `radio`).
    */
   toggleStyle: {
     type: String,
     default: "default",
     validator: (e) => ["default", "switch"].includes(e)
+  },
+  /**
+   * Controls keyboard focus order of the element.
+   */
+  tabIndex: {
+    type: [Number, String],
+    default: null,
+    validator: (e) => e === null || e === "" || !isNaN(+e) && isFinite(+e)
   }
-}, ee = /* @__PURE__ */ new WeakSet(), ne = /* @__PURE__ */ new WeakSet(), we = (e) => {
+}, ne = /* @__PURE__ */ new WeakSet(), oe = /* @__PURE__ */ new WeakSet(), he = (e) => {
   const n = e.currentTarget;
-  if (g.event.cssEvent.input_onBeforeFocus(e) === !1) {
+  if (b.event.cssEvent.input_onBeforeFocus(e) === !1) {
     e.stopPropagation(), e.preventDefault();
     return;
   }
-  n.classList.add("hison-input-on-active"), g.event.cssEvent.input_onAfterFocus(e);
-}, he = (e) => {
+  n.classList.add("hison-input-on-active"), b.event.cssEvent.input_onAfterFocus(e);
+}, Ne = (e) => {
   const n = e.currentTarget;
-  if (g.event.cssEvent.input_onBeforeBlur(e) === !1) {
+  if (b.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"), g.event.cssEvent.input_onAfterBlur(e);
-}, Ne = (e) => {
+  n.classList.remove("hison-input-on-active"), n.classList.remove("hison-input-on-mouseover"), b.event.cssEvent.input_onAfterBlur(e);
+}, Le = (e) => {
   const n = e.currentTarget;
   if (!n.readOnly) {
-    if (g.event.cssEvent.input_onBeforeMouseover(e) === !1) {
+    if (b.event.cssEvent.input_onBeforeMouseover(e) === !1) {
       e.stopPropagation(), e.preventDefault();
       return;
     }
-    n.classList.add("hison-input-on-mouseover"), g.event.cssEvent.input_onAfterMouseover(e);
+    n.classList.add("hison-input-on-mouseover"), b.event.cssEvent.input_onAfterMouseover(e);
   }
-}, Le = (e) => {
+}, Be = (e) => {
   const n = e.currentTarget;
   if (!n.readOnly) {
-    if (g.event.cssEvent.input_onBeforeMouseout(e) === !1) {
+    if (b.event.cssEvent.input_onBeforeMouseout(e) === !1) {
       e.stopPropagation(), e.preventDefault();
       return;
     }
-    n.classList.remove("hison-input-on-mouseover"), g.event.cssEvent.input_onAfterMouseout(e);
+    n.classList.remove("hison-input-on-mouseover"), b.event.cssEvent.input_onAfterMouseout(e);
   }
-}, Be = (e) => {
+}, Fe = (e) => {
   const n = e.currentTarget;
   if (!n.readOnly) {
-    if (g.event.cssEvent.input_onBeforeTouchstart(e) === !1) {
+    if (b.event.cssEvent.input_onBeforeTouchstart(e) === !1) {
       e.stopPropagation(), e.preventDefault();
       return;
     }
-    n.classList.add("hison-input-on-mouseover"), g.event.cssEvent.input_onAfterTouchstart(e);
+    n.classList.add("hison-input-on-mouseover"), b.event.cssEvent.input_onAfterTouchstart(e);
   }
-}, Fe = (e) => {
+}, Pe = (e) => {
   const n = e.currentTarget;
   if (!n.readOnly) {
-    if (g.event.cssEvent.input_onBeforeTouchend(e) === !1) {
+    if (b.event.cssEvent.input_onBeforeTouchend(e) === !1) {
       e.stopPropagation(), e.preventDefault();
       return;
     }
-    n.classList.remove("hison-input-on-mouseover"), g.event.cssEvent.input_onAfterTouchend(e);
+    n.classList.remove("hison-input-on-mouseover"), b.event.cssEvent.input_onAfterTouchend(e);
   }
-}, Pe = (e) => {
+}, Ie = (e) => {
   const n = e.currentTarget;
   n.readOnly || n.classList.remove("hison-input-on-mouseover");
-}, wn = (e) => {
-  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"));
+  ne.has(e) || (ne.add(e), e.addEventListener("mouseenter", Le), e.addEventListener("mouseleave", Be), e.addEventListener("touchstart", Fe, { passive: !1, capture: !0 }), e.addEventListener("touchend", Pe, { passive: !1, capture: !0 }), e.addEventListener("touchcancel", Ie, { passive: !1, capture: !0 }));
 }, Nn = (e) => {
-  ne.has(e) || (ne.add(e), e.addEventListener("focus", we), e.addEventListener("blur", he));
+  ne.has(e) && (ne.delete(e), e.removeEventListener("mouseenter", Le), e.removeEventListener("mouseleave", Be), e.removeEventListener("touchstart", Fe, { capture: !0 }), e.removeEventListener("touchend", Pe, { capture: !0 }), e.removeEventListener("touchcancel", Ie, { capture: !0 }), e.classList.remove("hison-input-on-mouseover"));
 }, 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({
+  oe.has(e) || (oe.add(e), e.addEventListener("focus", he), e.addEventListener("blur", Ne));
+}, Bn = (e) => {
+  oe.has(e) && (oe.delete(e), e.removeEventListener("focus", he), e.removeEventListener("blur", Ne), e.classList.remove("hison-input-on-active"), e.classList.remove("hison-input-on-mouseover"));
+}, Fn = un({
   name: "HInput",
-  props: kn,
+  props: wn,
   inheritAttrs: !1,
   emits: [
     "update:modelValue",
@@ -392,81 +292,81 @@ const kn = {
     "contextmenu"
   ],
   setup(e, { emit: n }) {
-    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(() => {
+    const C = r(null), F = r(null), k = r(null), v = e.id ? e.id : vn(), o = r(e.name ?? v), Se = M(() => o.value), N = r((e.dataKey ?? "").trim() || v), te = `hinput:${v}`, pe = pn(), q = r([]), ue = () => {
+      q.value = fn(Mn(e.class) || "", pe.value), gn(q.value, "col") === -1 && q.value.push("hison-col-12"), we(q.value, "size", b.componentStyle.size), we(q.value, "color", "primary");
+    }, l = r(e.inputType ?? i.text), ie = M(() => {
       switch (l.value) {
-        case u.checkbox:
+        case i.checkbox:
           return "checkbox";
-        case u.radio:
+        case i.radio:
           return "radio";
-        case u.select:
+        case i.select:
           return "select";
-        case u.range:
+        case i.range:
           return "range";
-        case u.color:
+        case i.color:
           return "color";
         default:
           return "text";
       }
-    }), Se = f(() => {
+    }), Ae = M(() => {
       switch (l.value) {
-        case u.mask:
-        case u.digit:
+        case i.mask:
+        case i.digit:
           return "text";
         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), 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) => {
+    }), U = r(e.toggleStyle ?? "default"), L = r(e.format ?? null), P = r(a.utils.isNumeric(e.maxNumber) ? Number(e.maxNumber) : null), I = r(a.utils.isNumeric(e.minNumber) ? Number(e.minNumber) : null), K = r(a.utils.isInteger(e.roundNumber) || a.utils.isNegativeInteger(e.roundNumber) || e.roundNumber === "0" ? Number(e.roundNumber) : null), E = r(a.utils.isPositiveInteger(e.maxLength) ? Number(e.maxLength) : null), D = r(a.utils.isPositiveInteger(e.maxByte) ? Number(e.maxByte) : null), se = (t) => {
       switch (t) {
-        case u.number:
-        case u.digit:
-          return N.right;
-        case u.date:
-        case u.month:
-        case u.time:
-          return N.center;
+        case i.number:
+        case i.digit:
+          return B.right;
+        case i.date:
+        case i.month:
+        case i.time:
+          return B.center;
         default:
-          return N.left;
+          return B.left;
       }
-    }, 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;
+    }, V = r(e.textAlign ?? se(l.value)), Ee = M(() => ({ textAlign: V.value })), H = r(e.border ?? !0), De = (t) => (t = String(t), E.value && (t = t.substring(0, E.value)), D.value && (t = a.utils.getCutByteLength(t, D.value)), t), Ve = (t) => (t = Number(t), P.value && t > P.value && (t = P.value), I.value && t < I.value && (t = I.value), K.value && (t = a.utils.getRound(t, K.value)), t), le = (t) => {
+      if (ee(t))
+        return l.value === i.checkbox || l.value === i.radio ? !1 : t;
       try {
         switch (l.value) {
-          case u.text:
-          case u.password:
-          case u.email:
-          case u.mask:
-          case u.digit:
-          case u.textarea:
-            l.value === u.mask && (t = gn(t, w.value ?? "")), l.value === u.digit && (t = bn(t)), t = Ee(t);
+          case i.text:
+          case i.password:
+          case i.email:
+          case i.mask:
+          case i.digit:
+          case i.textarea:
+            l.value === i.mask && (t = bn(t, L.value ?? "")), l.value === i.digit && (t = yn(t)), t = De(t);
             break;
-          case u.number:
-            l.value === u.number && (t = De(t));
+          case i.number:
+            l.value === i.number && (t = Ve(t));
             break;
-          case u.date:
-            t && (t = d.utils.getDateWithFormat(t, me.DateFormat["yyyy-MM-dd"]));
+          case i.date:
+            t && (t = a.utils.getDateWithFormat(t, ve.DateFormat["yyyy-MM-dd"]));
             break;
-          case u.month:
-            t && (t = d.utils.getDateWithFormat(t, me.YearMonthFormat["yyyy-MM"]));
+          case i.month:
+            t && (t = a.utils.getDateWithFormat(t, ve.YearMonthFormat["yyyy-MM"]));
             break;
-          case u.time:
-            t && (t = d.utils.getDateWithFormat(t, me.TimeFormat["HH:mm:ss"]));
+          case i.time:
+            t && (t = a.utils.getDateWithFormat(t, ve.TimeFormat["HH:mm:ss"]));
             break;
-          case u.checkbox:
-          case u.radio:
+          case i.checkbox:
+          case i.radio:
             t = !!t;
           default:
             break;
         }
-      } catch (i) {
-        console.warn("[HInput] Failed to format value", t, i);
+      } catch (u) {
+        console.warn("[HInput] Failed to format value", t, u);
       }
       return t;
-    }, 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) => {
+    }, s = r(le(e.modelValue)), qe = M(() => s.value), T = r(null), O = r(e.visible), W = r(e.title ?? ""), j = r(e.nullText ?? ""), w = r(e.editMode), Ke = M(() => w.value === _.disable), re = M(() => w.value === _.readonly), Re = M(() => H.value && !re.value ? "hison-border" : ""), Ue = M(() => w.value !== _.editable ? [`hison-input-${w.value}`, `hison-input-${ie.value}-${w.value}`] : []), z = r(e.required), He = M(() => z.value ? ["hison-input-required", `hison-input-${ie.value}-required`] : []), Y = r(e.placeholder ?? ""), Q = r(e.placeholderColor ?? "primary"), Oe = (t) => {
       if (!t) return null;
-      const i = t.trim();
+      const u = t.trim();
       return [
         "primary",
         "muted",
@@ -479,350 +379,369 @@ const kn = {
         "custom3",
         "custom4",
         "custom5"
-      ].includes(i) ? `var(--hison-${i}-emptyTextColor)` : i;
-    }, Oe = f(() => {
-      const t = He(Y.value);
+      ].includes(u) ? `var(--hison-${u}-emptyTextColor)` : u;
+    }, We = M(() => {
+      const t = Oe(Q.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(
+    }), X = r(e.fontBold), je = M(() => {
+      if (X.value) return "hison-font-bold";
+    }), J = r(e.fontItalic), ze = M(() => {
+      if (J.value) return "hison-font-italic";
+    }), Z = r(e.fontThruline), Ye = M(() => {
+      if (Z.value) return "hison-font-thruline";
+    }), G = r(e.fontUnderline), Qe = M(() => {
+      if (G.value) return "hison-font-underline";
+    }), Xe = M(() => O.value ? "" : "hison-display-none"), de = r(!1), h = r(!1), x = r(
       e.tabIndex !== null && e.tabIndex !== "" ? Number(e.tabIndex) : null
-    ), pe = ae("registerToInputGroup", null), m = ae("notifyInputGroupStatus", null), R = ae("radioMembershipChanged", null), de = (t) => {
-      if (l.value === u.checkbox || l.value === u.radio)
+    ), fe = me("registerToInputGroup", null), d = me("notifyInputGroupStatus", null), R = me("radioMembershipChanged", null), ae = (t) => {
+      if (l.value === i.checkbox || l.value === i.radio)
         return t ? e.checkedText : e.uncheckedText;
-      if (_(t) || t === "") return W.value ?? "";
+      if (ee(t) || t === "") return j.value ?? "";
       if (e.inputTextdHandler)
         return e.inputTextdHandler(t);
-      let i = String(t);
+      let u = String(t);
       try {
         switch (l.value) {
-          case u.password:
-            i = "•".repeat(t.length);
+          case i.password:
+            u = "•".repeat(t.length);
             break;
-          case u.number:
-            i = d.utils.getNumberFormat(t, w.value ?? d.getNumberFormat());
+          case i.number:
+            u = a.utils.getNumberFormat(t, L.value ?? a.getNumberFormat());
             break;
-          case u.date:
-            i = d.utils.getDateWithFormat(t, w.value ?? d.getDateFormat());
+          case i.date:
+            u = a.utils.getDateWithFormat(t, L.value ?? a.getDateFormat());
             break;
-          case u.month:
-            i = d.utils.getDateWithFormat(t, w.value ?? d.getYearMonthFormat());
+          case i.month:
+            u = a.utils.getDateWithFormat(t, L.value ?? a.getYearMonthFormat());
             break;
-          case u.time:
-            i = d.utils.getDateWithFormat(t, w.value ?? d.getTimeFormat());
+          case i.time:
+            u = a.utils.getDateWithFormat(t, L.value ?? a.getTimeFormat());
             break;
-          case u.select:
-            const D = $.value, ge = D.selectedIndex;
-            i = ge >= 0 ? D.options[ge].text : "";
+          case i.select:
+            const f = C.value, be = f.selectedIndex;
+            u = be >= 0 ? f.options[be].text : "";
             break;
         }
-      } catch (D) {
-        console.warn("[HInput] Failed to format value", t, D), i = "";
+      } catch (f) {
+        console.warn("[HInput] Failed to format value", t, f), u = "";
       }
-      return i;
-    }, x = r(""), Xe = (t) => {
-      k.value === c.editable && (re.value = !0), be(() => {
-        var i;
-        (i = $.value) == null || i.focus();
+      return u;
+    }, c = r(""), Je = (t) => {
+      w.value === _.editable && (de.value = !0), ye(() => {
+        var u;
+        (u = C.value) == null || u.focus();
       });
-    }, Je = (t) => {
-      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) => {
-      C.value = s.value, n("focus", t, T.value);
+      let u = C.value.value;
+      (l.value === i.mask || l.value === i.digit || (E.value || D.value) && (l.value === i.text || l.value === i.email || l.value === i.password || l.value === i.textarea)) && (u = le(u), C.value.value = u), s.value = u, h.value = !0, d == null || d(v, s.value), n("input", t, k.value, s.value), n("update:modelValue", s.value);
     }, Ge = (t) => {
-      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);
+      T.value = s.value, n("focus", t, k.value);
     }, xe = (t) => {
-      const i = t.target;
-      v(i.value, !1, !0), h.value = !0, m == null || m(p, s.value), n("update:modelValue", s.value);
+      T.value !== s.value && (p(s.value, !0, !0), h.value = !0, d == null || d(v, s.value)), de.value = !1, n("blur", t, k.value);
+    }, p = (t, u = !0, f = !1) => {
+      s.value = u ? le(t) : t, c.value = ae(s.value), l.value === i.checkbox || l.value === i.radio ? C.value.checked = !!s.value : C.value.value = s.value, f && n("change", T.value, s.value, k.value);
     }, ce = (t) => {
-      const i = t.target;
-      v(i.value, !1, !0), h.value = !0, m == null || m(p, s.value), n("update:modelValue", s.value);
+      const u = t.target;
+      p(u.value, !1, !0), h.value = !0, d == null || d(v, s.value), n("update:modelValue", s.value);
     }, _e = (t) => {
-      const i = t.target;
-      v(i.checked, !1, !0), h.value = !0, m == null || m(p, s.value), n("update:modelValue", s.value);
+      const u = t.target;
+      p(u.value, !1, !0), h.value = !0, d == null || d(v, 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);
+      const u = t.target;
+      p(u.checked, !1, !0), h.value = !0, d == null || d(v, 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);
+      const u = t.target;
+      if (p(u.checked, !1, !0), h.value = !0, d && o.value) {
+        const f = u.checked ? N.value || v : null;
+        d(o.value, f);
+      } else
+        d == null || d(v, s.value);
+      n("update:modelValue", s.value);
     }, on = (t) => {
-      if (le.value && (t.code === "Space" || t.code === "Enter")) {
+      const u = t.target;
+      p(u.value, !1, !0), h.value = !0, d == null || d(v, s.value), n("update:modelValue", s.value);
+    }, tn = (t) => {
+      if (re.value && (t.code === "Space" || t.code === "Enter")) {
         t.preventDefault(), t.stopPropagation();
         return;
       }
-      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 = {
+      n("keydown", t, k.value);
+    }, Me = () => {
+      b.component.inputList[v] && b.component.inputList[v].isHisonvueComponent && console.warn(`[Hisonvue] The input ID is at risk of being duplicated. ${v}`), $n(te, () => {
+        ge(), ye(Me);
+      }), C.value && (ue(), F.value && hn(F.value), l.value !== i.checkbox && l.value !== i.radio && l.value !== i.range && l.value !== i.color && Ln(C.value), p(s.value, !1), k.value = {
         isHisonvueComponent: !0,
-        getId: () => p,
+        getId: () => v,
         getType: () => "input",
+        getDataKey: () => N.value,
+        setDataKey: (t) => {
+          const u = (t ?? "").trim(), f = u.length > 0 ? u : v;
+          f !== N.value && (N.value = f, l.value === i.radio && s.value && d && o.value && d(o.value, N.value));
+        },
         getName: () => o.value,
         setName: (t) => {
           if (t === o.value) return;
-          const i = o.value;
-          o.value = t, l.value === u.radio && (R == null || R(p, i, t, !!s.value));
+          const u = o.value;
+          o.value = t, l.value === i.radio && (R == null || R(v, u, t, !!s.value));
         },
-        getText: () => x.value,
+        getText: () => c.value,
         getValue: () => s.value,
-        setValue: (t) => {
-          C.value = s.value, s.value = t, v(s.value);
+        setValue: (t, u) => {
+          if (T.value = s.value, s.value = t, p(s.value, !0, !!(u != null && u.emitChange)), u != null && u.markModified && (h.value = !0), u != null && u.notifyGroup)
+            if (l.value === i.radio && d && o.value) {
+              const f = s.value ? N.value || v : null;
+              d(o.value, f);
+            } else
+              d == null || d(v, s.value);
+          u != null && u.emitModelValue && n("update:modelValue", s.value);
         },
-        getTitle: () => O.value,
+        getTitle: () => W.value,
         setTitle: (t) => {
-          O.value = t;
+          W.value = t;
         },
-        isVisible: () => H.value,
+        isVisible: () => O.value,
         setVisible: (t) => {
-          H.value = t;
+          O.value = t;
         },
         getInputType: () => l.value,
         setInputType: (t) => {
-          l.value = u[t], C.value = s.value, v(s.value), e.textAlign == null && (E.value = ue(l.value));
+          l.value = i[t], T.value = s.value, p(s.value), e.textAlign == null && (V.value = se(l.value));
         },
-        getFormat: () => w.value ?? "",
+        getFormat: () => L.value ?? "",
         setFormat: (t) => {
-          w.value = t, C.value = s.value, v(s.value);
+          L.value = t, T.value = s.value, p(s.value);
         },
-        getNullText: () => W.value,
+        getNullText: () => j.value,
         setNullText: (t) => {
-          W.value = t, (_(s.value) || s.value === "") && (x.value = de(s.value));
+          j.value = t, (ee(s.value) || s.value === "") && (c.value = ae(s.value));
         },
-        getEditMode: () => k.value,
+        getEditMode: () => w.value,
         setEditMode: (t) => {
-          k.value = t;
+          w.value = t;
         },
-        getMaxNumber: () => B.value,
+        getMaxNumber: () => P.value,
         setMaxNumber: (t) => {
-          d.utils.isNumeric(t) && (B.value = t, C.value = s.value, l.value === u.number && v(s.value));
+          a.utils.isNumeric(t) && (P.value = t, T.value = s.value, l.value === i.number && p(s.value));
         },
-        getMinNumber: () => F.value,
+        getMinNumber: () => I.value,
         setMinNumber: (t) => {
-          d.utils.isNumeric(t) && (F.value = t, C.value = s.value, l.value === u.number && v(s.value));
+          a.utils.isNumeric(t) && (I.value = t, T.value = s.value, l.value === i.number && p(s.value));
         },
-        getRoundNumber: () => q.value,
+        getRoundNumber: () => K.value,
         setRoundNumber: (t) => {
-          !d.utils.isPositiveInteger(t) && !d.utils.isNegativeInteger(t) && t !== 0 || (q.value = t, C.value = s.value, l.value === u.number && v(s.value));
+          !a.utils.isPositiveInteger(t) && !a.utils.isNegativeInteger(t) && t !== 0 || (K.value = t, T.value = s.value, l.value === i.number && p(s.value));
         },
-        getMaxLength: () => S.value,
+        getMaxLength: () => E.value,
         setMaxLength: (t) => {
-          d.utils.isPositiveInteger(t) && (S.value = t), C.value = s.value, v(s.value);
+          a.utils.isPositiveInteger(t) && (E.value = t), T.value = s.value, p(s.value);
         },
-        getMaxByte: () => A.value,
+        getMaxByte: () => D.value,
         setMaxByte: (t) => {
-          d.utils.isPositiveInteger(t) && (A.value = t), C.value = s.value, v(s.value);
+          a.utils.isPositiveInteger(t) && (D.value = t), T.value = s.value, p(s.value);
         },
-        getRequired: () => j.value,
+        getRequired: () => z.value,
         setRequired: (t) => {
-          j.value = t;
+          z.value = t;
         },
-        getPlaceholder: () => z.value,
+        getPlaceholder: () => Y.value,
         setPlaceholder: (t) => {
-          z.value = t;
+          Y.value = t;
         },
-        getPlaceholderColor: () => Y.value,
+        getPlaceholderColor: () => Q.value,
         setPlaceholderColor: (t) => {
-          const i = (t ?? "").trim();
-          Y.value = i.length > 0 ? i : "primary";
+          const u = (t ?? "").trim();
+          Q.value = u.length > 0 ? u : "primary";
         },
-        isFontBold: () => Q.value,
+        isFontBold: () => X.value,
         setFontBold: (t) => {
-          Q.value = t;
+          X.value = t;
         },
-        isFontItalic: () => X.value,
+        isFontItalic: () => J.value,
         setFontItalic: (t) => {
-          X.value = t;
+          J.value = t;
         },
-        isFontThruline: () => J.value,
+        isFontThruline: () => Z.value,
         setFontThruline: (t) => {
-          J.value = t;
+          Z.value = t;
         },
-        isFontUnderline: () => Z.value,
+        isFontUnderline: () => G.value,
         setFontUnderline: (t) => {
-          Z.value = t;
+          G.value = t;
         },
-        getTextAlign: () => E.value,
+        getTextAlign: () => V.value,
         setTextAlign: (t) => {
-          (t === N.left || t === N.center || t === N.right) && (E.value = t);
+          (t === B.left || t === B.center || t === B.right) && (V.value = t);
         },
-        isBorder: () => U.value,
+        isBorder: () => H.value,
         setBorder: (t) => {
-          U.value = t;
+          H.value = t;
         },
         isModified: () => h.value,
         setModified: (t) => {
           h.value = t;
         },
-        getToggleStyle: () => K.value,
+        getToggleStyle: () => U.value,
         setToggleStyle: (t) => {
-          (t === "default" || t === "switch") && (K.value = t);
+          (t === "default" || t === "switch") && (U.value = t);
         },
-        getTabIndex: () => G.value,
+        getTabIndex: () => x.value,
         setTabIndex: (t) => {
-          G.value = t != null ? Number(t) : null;
+          x.value = t != null ? Number(t) : null;
         },
         focus: () => {
           var t;
-          L.value ? L.value.focus() : (t = $.value) == null || t.focus();
+          F.value ? F.value.focus() : (t = C.value) == null || t.focus();
         },
-        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);
+        reload: () => Cn(te)
+      }, b.component.inputList[v] = k.value, fe && fe(v), n("mounted", k.value));
+    }, ge = () => {
+      Tn(te), delete b.component.inputList[v], l.value !== i.checkbox && l.value !== i.radio && l.value !== i.range && l.value !== i.color && Bn(C.value), F.value && Nn(F.value);
     };
-    return un(fe), sn(Me), a(ve, (t) => {
-      te(), n("responsive-change", t);
-    }), a(() => e.modelValue, (t) => {
-      v(t, !1);
-    }), a(() => e.name, (t) => {
+    return sn(Me), ln(ge), m(pe, (t) => {
+      ue(), n("responsive-change", t);
+    }), m(() => e.modelValue, (t) => {
+      p(t, !1);
+    }), m(() => e.name, (t) => {
       if (t && t !== o.value) {
-        const i = o.value;
-        o.value = t, l.value === u.radio && (R == null || R(p, i, t, !!s.value));
+        const u = o.value;
+        o.value = t, l.value === i.radio && (R == null || R(v, u, t, !!s.value));
       }
-    }), a(() => e.visible, (t) => {
-      const i = !!t;
-      i !== H.value && (H.value = i);
-    }), a(() => e.title, (t) => {
-      const i = t ?? "";
-      i !== O.value && (O.value = i);
-    }), a(() => e.nullText, (t) => {
-      const i = t ?? "";
-      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 = ue(l.value)), v(s.value));
-    }), a(() => e.format, (t) => {
-      const i = t ?? null;
-      i !== w.value && (w.value = i, v(s.value));
-    }), a(() => e.maxNumber, (t) => {
-      const i = d.utils.isNumeric(t) ? Number(t) : null;
-      i !== B.value && (B.value = i, l.value === u.number && v(s.value));
-    }), a(() => e.minNumber, (t) => {
-      const i = d.utils.isNumeric(t) ? Number(t) : null;
-      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 !== 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 !== S.value && (S.value = i, v(s.value));
-    }), a(() => e.maxByte, (t) => {
-      const i = d.utils.isPositiveInteger(t) ? Number(t) : null;
-      i !== A.value && (A.value = i, v(s.value));
-    }), a(() => e.textAlign, (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 !== Q.value && (Q.value = i);
-    }), a(() => e.fontItalic, (t) => {
-      const i = !!t;
-      i !== X.value && (X.value = i);
-    }), a(() => e.fontThruline, (t) => {
-      const i = !!t;
-      i !== J.value && (J.value = i);
-    }), a(() => e.fontUnderline, (t) => {
-      const i = !!t;
-      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 !== G.value && (G.value = i);
-    }), a(() => e.class, () => {
-      te();
-    }), a(() => e.toggleStyle, (t) => {
-      const i = t ?? "default";
-      i !== K.value && (i === "default" || i === "switch") && (K.value = i);
+    }), m(() => e.dataKey, (t) => {
+      const u = (t ?? "").trim(), f = u.length > 0 ? u : v;
+      f !== N.value && (N.value = f, l.value === i.radio && s.value && d && o.value && d(o.value, N.value));
+    }), m(() => e.visible, (t) => {
+      const u = !!t;
+      u !== O.value && (O.value = u);
+    }), m(() => e.title, (t) => {
+      const u = t ?? "";
+      u !== W.value && (W.value = u);
+    }), m(() => e.nullText, (t) => {
+      const u = t ?? "";
+      u !== j.value && (j.value = u, (ee(s.value) || s.value === "") && (c.value = ae(s.value)));
+    }), m(() => e.inputType, (t) => {
+      t && t !== l.value && (l.value = t, e.textAlign == null && (V.value = se(l.value)), p(s.value));
+    }), m(() => e.format, (t) => {
+      const u = t ?? null;
+      u !== L.value && (L.value = u, p(s.value));
+    }), m(() => e.maxNumber, (t) => {
+      const u = a.utils.isNumeric(t) ? Number(t) : null;
+      u !== P.value && (P.value = u, l.value === i.number && p(s.value));
+    }), m(() => e.minNumber, (t) => {
+      const u = a.utils.isNumeric(t) ? Number(t) : null;
+      u !== I.value && (I.value = u, l.value === i.number && p(s.value));
+    }), m(() => e.roundNumber, (t) => {
+      const u = a.utils.isInteger(t) || a.utils.isNegativeInteger(t) || t === "0" ? Number(t) : null;
+      u !== K.value && (K.value = u, l.value === i.number && p(s.value));
+    }), m(() => e.maxLength, (t) => {
+      const u = a.utils.isPositiveInteger(t) ? Number(t) : null;
+      u !== E.value && (E.value = u, p(s.value));
+    }), m(() => e.maxByte, (t) => {
+      const u = a.utils.isPositiveInteger(t) ? Number(t) : null;
+      u !== D.value && (D.value = u, p(s.value));
+    }), m(() => e.textAlign, (t) => {
+      t && t !== V.value && (t === B.left || t === B.center || t === B.right) && (V.value = t);
+    }), m(() => e.border, (t) => {
+      const u = !!t;
+      u !== H.value && (H.value = u);
+    }), m(() => e.placeholder, (t) => {
+      const u = t ?? "";
+      u !== Y.value && (Y.value = u);
+    }), m(() => e.placeholderColor, (t) => {
+      const u = t ?? "primary";
+      u !== Q.value && (Q.value = u);
+    }), m(() => e.required, (t) => {
+      const u = !!t;
+      u !== z.value && (z.value = u);
+    }), m(() => e.fontBold, (t) => {
+      const u = !!t;
+      u !== X.value && (X.value = u);
+    }), m(() => e.fontItalic, (t) => {
+      const u = !!t;
+      u !== J.value && (J.value = u);
+    }), m(() => e.fontThruline, (t) => {
+      const u = !!t;
+      u !== Z.value && (Z.value = u);
+    }), m(() => e.fontUnderline, (t) => {
+      const u = !!t;
+      u !== G.value && (G.value = u);
+    }), m(() => e.editMode, (t) => {
+      t && t !== w.value && (w.value = t);
+    }), m(() => e.tabIndex, (t) => {
+      const u = t === null || t === "" ? null : Number(t);
+      u !== x.value && (x.value = u);
+    }), m(() => e.class, () => {
+      ue();
+    }), m(() => e.toggleStyle, (t) => {
+      const u = t ?? "default";
+      u !== U.value && (u === "default" || u === "switch") && (U.value = u);
     }), {
-      inputRef: $,
-      inputTextRef: L,
-      inputMethods: f(() => ln(T)),
-      inputValue: Ve,
-      editing: re,
+      inputRef: C,
+      inputTextRef: F,
+      inputMethods: M(() => rn(k)),
+      inputValue: qe,
+      editing: de,
       props: e,
-      id: p,
-      nameAttr: Ie,
-      responsiveClassList: V,
-      visibleClass: Qe,
-      editModeClassList: Ke,
-      requiredClassList: Ue,
-      fontBoldClass: We,
-      fontItalicClass: je,
-      fontThrulineClass: ze,
-      fontUnderlineClass: Ye,
-      textAlignStyle: Ae,
-      placeholderColorStyle: Oe,
+      id: v,
+      nameAttr: Se,
+      responsiveClassList: q,
+      visibleClass: Xe,
+      editModeClassList: Ue,
+      requiredClassList: He,
+      fontBoldClass: je,
+      fontItalicClass: ze,
+      fontThrulineClass: Ye,
+      fontUnderlineClass: Qe,
+      textAlignStyle: Ee,
+      placeholderColorStyle: We,
       borderClass: Re,
-      disable: qe,
-      readonly: le,
+      disable: Ke,
+      readonly: re,
       inputType: l,
       inputExpressionType: ie,
-      inputAttrType: Se,
-      title: O,
-      placeholder: z,
-      maxNumber: B,
-      minNumber: F,
-      spanText: x,
-      toggleStyle: K,
-      tabIndex: G,
-      onInput: Je,
-      onTextInputFocus: Xe,
-      onFocus: Ze,
-      onBlur: Ge,
-      onRangeChange: xe,
-      onColorChange: ce,
-      onCheckboxChange: _e,
-      onRadioChange: en,
-      onSelectChange: nn,
-      onKeydown: on
+      inputAttrType: Ae,
+      title: W,
+      placeholder: Y,
+      maxNumber: P,
+      minNumber: I,
+      spanText: c,
+      toggleStyle: U,
+      tabIndex: x,
+      onInput: Ze,
+      onTextInputFocus: Je,
+      onFocus: Ge,
+      onBlur: xe,
+      onRangeChange: ce,
+      onColorChange: _e,
+      onCheckboxChange: en,
+      onRadioChange: nn,
+      onSelectChange: on,
+      onKeydown: tn
     };
   }
-}), 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: M([
+}), Pn = ["id", "name", "value", "disabled", "readonly", "title", "tabindex"], In = ["id", "name", "value", "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", "disabled", "readonly", "checked", "title", "tabindex"], Vn = ["id", "name", "value", "disabled", "readonly", "title", "tabindex"], qn = ["value"], Kn = ["id", "name", "value", "disabled", "readonly", "placeholder", "title", "maxlength", "tabindex"], Rn = ["id", "name", "value", "disabled", "readonly", "title", "placeholder", "tabindex"], Un = ["id", "name", "value", "disabled", "readonly", "type", "title", "placeholder", "max", "min", "tabindex"];
+function Hn(e, n, C, F, k, v) {
+  return $(), y("div", {
+    class: g([
       "hison-wrapper",
       "hison-s-input-margin-adjustment",
       ...e.responsiveClassList,
       e.visibleClass
     ])
   }, [
-    e.inputType === "range" ? (y(), b("div", {
+    e.inputType === "range" ? ($(), y("div", {
       key: 0,
-      class: M([
+      class: g([
         "hison-input",
         "hison-input-range-div"
       ]),
-      style: P([e.textAlignStyle, e.props.style])
+      style: S([e.textAlignStyle, e.props.style])
     }, [
-      I("input", {
+      A("input", {
         ref: "inputRef",
         id: `${e.id}`,
         name: `${e.nameAttr}`,
         type: "range",
-        class: M([
+        class: g([
           `hison-input-${e.inputType}`,
           ...e.editModeClassList,
           ...e.requiredClassList
@@ -854,21 +773,21 @@ function Un(e, n, $, L, T, 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, Fn)
-    ], 4)) : e.inputType === "color" ? (y(), b("div", {
+      }, null, 42, Pn)
+    ], 4)) : e.inputType === "color" ? ($(), y("div", {
       key: 1,
-      class: M([
+      class: g([
         "hison-input",
         "hison-input-color-div"
       ]),
-      style: P([e.textAlignStyle, e.props.style])
+      style: S([e.textAlignStyle, e.props.style])
     }, [
-      I("input", {
+      A("input", {
         ref: "inputRef",
         id: `${e.id}`,
         name: `${e.nameAttr}`,
         type: "color",
-        class: M([
+        class: g([
           `hison-input-${e.inputType}`,
           ...e.editModeClassList,
           ...e.requiredClassList
@@ -901,22 +820,22 @@ function Un(e, n, $, L, T, 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, Pn)
-    ], 4)) : e.inputType === "checkbox" ? (y(), b("div", {
+      }, null, 42, In)
+    ], 4)) : e.inputType === "checkbox" ? ($(), y("div", {
       key: 2,
-      class: M([
+      class: g([
         "hison-input",
         "hison-input-checkbox-div"
       ]),
-      style: P([e.textAlignStyle, e.props.style])
+      style: S([e.textAlignStyle, e.props.style])
     }, [
-      e.toggleStyle !== "switch" ? (y(), b("input", {
+      e.toggleStyle !== "switch" ? ($(), y("input", {
         key: 0,
         ref: "inputRef",
         id: `${e.id}`,
         name: `${e.nameAttr}`,
         type: "checkbox",
-        class: M([
+        class: g([
           `hison-input-${e.inputType}`,
           ...e.editModeClassList,
           ...e.requiredClassList
@@ -948,11 +867,11 @@ function Un(e, n, $, L, T, 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, In)) : (y(), b("label", {
+      }, null, 42, Sn)) : ($(), y("label", {
         key: 1,
-        class: M(["hison-input-checkbox-switch", ...e.editModeClassList])
+        class: g(["hison-input-checkbox-switch", ...e.editModeClassList])
       }, [
-        I("input", {
+        A("input", {
           ref: "inputRef",
           id: `${e.id}`,
           name: `${e.nameAttr}`,
@@ -985,27 +904,27 @@ function Un(e, n, $, L, T, 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, Sn),
-        I("span", {
-          class: M(["hison-switch-visual", [
+        }, null, 40, An),
+        A("span", {
+          class: g(["hison-switch-visual", [
             ...e.editModeClassList,
             ...e.requiredClassList
           ]]),
           "aria-hidden": "true"
         }, null, 2)
       ], 2))
-    ], 4)) : e.inputType === "radio" ? (y(), b("div", {
+    ], 4)) : e.inputType === "radio" ? ($(), y("div", {
       key: 3,
-      class: M(["hison-input", "hison-input-radio-div"]),
-      style: P([e.textAlignStyle, e.props.style])
+      class: g(["hison-input", "hison-input-radio-div"]),
+      style: S([e.textAlignStyle, e.props.style])
     }, [
-      e.toggleStyle !== "switch" ? (y(), b("input", {
+      e.toggleStyle !== "switch" ? ($(), y("input", {
         key: 0,
         ref: "inputRef",
         id: `${e.id}`,
         name: `${e.nameAttr}`,
         type: "radio",
-        class: M([
+        class: g([
           `hison-input-${e.inputType}`,
           "hison-input-radio--default",
           ...e.editModeClassList,
@@ -1038,11 +957,11 @@ function Un(e, n, $, L, T, 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, An)) : (y(), b("label", {
+      }, null, 42, En)) : ($(), y("label", {
         key: 1,
-        class: M(["hison-input-radio-switch", ...e.editModeClassList])
+        class: g(["hison-input-radio-switch", ...e.editModeClassList])
       }, [
-        I("input", {
+        A("input", {
           ref: "inputRef",
           id: `${e.id}`,
           name: `${e.nameAttr}`,
@@ -1075,22 +994,22 @@ function Un(e, n, $, L, T, 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, En),
-        I("span", {
-          class: M(["hison-switch-visual", [
+        }, null, 40, Dn),
+        A("span", {
+          class: g(["hison-switch-visual", [
             ...e.editModeClassList,
             ...e.requiredClassList
           ]]),
           "aria-hidden": "true"
         }, null, 2)
       ], 2))
-    ], 4)) : e.inputType === "select" ? (y(), b("select", {
+    ], 4)) : e.inputType === "select" ? ($(), y("select", {
       key: 4,
       ref: "inputRef",
       id: `${e.id}`,
       name: `${e.nameAttr}`,
-      style: P([e.textAlignStyle, e.placeholderColorStyle, e.props.style]),
-      class: M([
+      style: S([e.textAlignStyle, e.placeholderColorStyle, e.props.style]),
+      class: g([
         "hison-input",
         `hison-input-${e.inputType}`,
         ...e.editModeClassList,
@@ -1129,16 +1048,16 @@ function Un(e, n, $, L, T, 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(ye, null, rn(e.props.options, (o) => (y(), b("option", {
+      ($(!0), y($e, null, dn(e.props.options, (o) => ($(), y("option", {
         key: o.value,
         value: o.value
-      }, $e(o.text), 9, Vn))), 128))
-    ], 46, Dn)) : e.inputType === "textarea" ? (y(), b("textarea", {
+      }, Ce(o.text), 9, qn))), 128))
+    ], 46, Vn)) : e.inputType === "textarea" ? ($(), y("textarea", {
       key: 5,
       ref: "inputRef",
       id: `${e.id}`,
       name: `${e.nameAttr}`,
-      class: M([
+      class: g([
         "hison-input",
         `hison-input-${e.inputType}`,
         ...e.editModeClassList,
@@ -1150,7 +1069,7 @@ function Un(e, n, $, L, T, p) {
         e.borderClass
       ]),
       value: e.inputValue,
-      style: P([e.textAlignStyle, e.placeholderColorStyle, e.props.style]),
+      style: S([e.textAlignStyle, e.placeholderColorStyle, e.props.style]),
       disabled: e.disable,
       readonly: e.readonly,
       placeholder: e.placeholder || void 0,
@@ -1160,12 +1079,12 @@ function Un(e, n, $, L, T, 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))
-    }, $e(e.inputValue), 47, qn)) : (y(), b(ye, { key: 6 }, [
-      Ce(I("input", {
+    }, Ce(e.inputValue), 47, Kn)) : ($(), y($e, { key: 6 }, [
+      Te(A("input", {
         ref: "inputTextRef",
         id: `input_text_${e.id}`,
         name: `input_text_${e.nameAttr}`,
-        class: M([
+        class: g([
           "hison-input",
           `hison-input-text-${e.inputType}`,
           ...e.editModeClassList,
@@ -1178,7 +1097,7 @@ function Un(e, n, $, L, T, p) {
         ]),
         type: "text",
         value: e.spanText,
-        style: P([e.textAlignStyle, e.placeholderColorStyle, e.props.style]),
+        style: S([e.textAlignStyle, e.placeholderColorStyle, e.props.style]),
         disabled: e.disable,
         readonly: e.readonly,
         title: e.title || void 0,
@@ -1204,20 +1123,20 @@ function Un(e, n, $, L, T, p) {
         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, Rn), [
-        [Te, !e.editing]
+        [ke, !e.editing]
       ]),
-      Ce(I("input", {
+      Te(A("input", {
         ref: "inputRef",
         id: `${e.id}`,
         name: `${e.nameAttr}`,
-        class: M([
+        class: g([
           "hison-input",
           `hison-input-${e.inputType}`,
           ...e.editModeClassList,
           e.borderClass
         ]),
         value: e.inputValue,
-        style: P([e.textAlignStyle, e.placeholderColorStyle, e.props.style]),
+        style: S([e.textAlignStyle, e.placeholderColorStyle, e.props.style]),
         disabled: e.disable,
         readonly: e.readonly,
         type: e.inputType,
@@ -1243,13 +1162,13 @@ function Un(e, n, $, L, T, 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, Kn), [
-        [Te, e.editing]
+      }, null, 46, Un), [
+        [ke, e.editing]
       ])
     ], 64))
   ], 2);
 }
-const jn = /* @__PURE__ */ Tn(Bn, [["render", Un], ["__scopeId", "data-v-f3c99304"]]);
+const zn = /* @__PURE__ */ kn(Fn, [["render", Hn], ["__scopeId", "data-v-0b8c03f7"]]);
 export {
-  jn as default
+  zn as default
 };