hisonvue 1.1.21 → 1.1.23

package/dist/hisonvue.d.ts

@@ -8245,6 +8245,10 @@ id: {
 type: StringConstructor;
 required: boolean;
 };
+dataKey: {
+type: StringConstructor;
+required: boolean;
+};
 name: {
 type: StringConstructor;
 required: boolean;
@@ -8360,11 +8364,6 @@ uncheckedText: {
 type: StringConstructor;
 default: string;
 };
-tabIndex: {
-type: PropType<number | string | null>;
-default: null;
-validator: (v: any) => boolean;
-};
 inputTextdHandler: {
 type: PropType<(value: any) => string>;
 default: undefined;
@@ -8374,6 +8373,11 @@ type: PropType<"default" | "switch">;
 default: string;
 validator: (v: any) => boolean;
 };
+tabIndex: {
+type: PropType<number | string | null>;
+default: null;
+validator: (v: any) => boolean;
+};
 }>, {
 inputRef: Ref<HTMLTextAreaElement | HTMLSelectElement | HTMLInputElement | null, HTMLTextAreaElement | HTMLSelectElement | HTMLInputElement | null>;
 inputTextRef: Ref<HTMLInputElement | null, HTMLInputElement | null>;
@@ -8381,6 +8385,8 @@ inputMethods: ComputedRef<HInputMethods | {
 getType: () => "input";
 getName: () => string;
 setName: (name: string) => void;
+getDataKey: () => string;
+setDataKey: (dataKey: string) => void;
 getText: () => string;
 getValue: () => any;
 setValue: (value: any) => void;
@@ -8442,6 +8448,10 @@ id: {
 type: StringConstructor;
 required: boolean;
 };
+dataKey: {
+type: StringConstructor;
+required: boolean;
+};
 name: {
 type: StringConstructor;
 required: boolean;
@@ -8557,11 +8567,6 @@ uncheckedText: {
 type: StringConstructor;
 default: string;
 };
-tabIndex: {
-type: PropType<number | string | null>;
-default: null;
-validator: (v: any) => boolean;
-};
 inputTextdHandler: {
 type: PropType<(value: any) => string>;
 default: undefined;
@@ -8571,6 +8576,11 @@ type: PropType<"default" | "switch">;
 default: string;
 validator: (v: any) => boolean;
 };
+tabIndex: {
+type: PropType<number | string | null>;
+default: null;
+validator: (v: any) => boolean;
+};
 }>> & Readonly<{
 onClick?: ((...args: any[]) => any) | undefined;
 onInput?: ((...args: any[]) => any) | undefined;
@@ -8654,6 +8664,10 @@ id: {
 type: StringConstructor;
 required: boolean;
 };
+dataKey: {
+type: StringConstructor;
+required: boolean;
+};
 name: {
 type: StringConstructor;
 required: boolean;
@@ -8769,11 +8783,6 @@ uncheckedText: {
 type: StringConstructor;
 default: string;
 };
-tabIndex: {
-type: PropType<number | string | null>;
-default: null;
-validator: (v: any) => boolean;
-};
 inputTextdHandler: {
 type: PropType<(value: any) => string>;
 default: undefined;
@@ -8783,6 +8792,11 @@ type: PropType<"default" | "switch">;
 default: string;
 validator: (v: any) => boolean;
 };
+tabIndex: {
+type: PropType<number | string | null>;
+default: null;
+validator: (v: any) => boolean;
+};
 }>> & Readonly<{
 onClick?: ((...args: any[]) => any) | undefined;
 onInput?: ((...args: any[]) => any) | undefined;
@@ -9133,6 +9147,18 @@ export declare interface HInputMethods extends ComponentMethods {
      * - Does **not** toggle the radio’s checked state by itself.
      */
     setName(name: string): void;
+    /**
+     * Gets the data extraction key for `HInputGroup`.
+     * - Used as the key when `HInputGroup` extracts data.
+     * - If empty, `HInput` falls back to `id`.
+     */
+    getDataKey(): string;
+    /**
+     * Sets the data extraction key for `HInputGroup`.
+     * - If empty, it falls back to `id`.
+     * - This does not change the runtime identifier (`id`).
+     */
+    setDataKey(dataKey: string): void;
     /**
      * Returns the formatted display text shown in the span layer.
      * - Applies `format`, `nullText`, and masking logic based on `type`.
@@ -18965,12 +18991,13 @@ declare module 'vue' {
          * - For `inputType="radio"`, the HTML `name` attribute **defines the group**.
          * - `HInputGroup` aggregates radios by `name` and exposes/accepts values in the shape:
          *   ```ts
-         *   { [name: string]: selectedRadioId | null }
+         *   { [name: string]: selectedRadioKey | null }
          *   ```
-         *   where `selectedRadioId` is the `id` of the checked `HInput` in that group.
+         *   where `selectedRadioKey` is the `dataKey` of the checked `HInput`
+         *   (falls back to `id` when `dataKey` is omitted or empty).
          * - When the user checks a radio:
          *   - The radio’s own `v-model` becomes `true` (others in the same group become `false`).
-         *   - The parent `HInputGroup` updates its mapping `{ [name]: id | null }`.
+         *   - The parent `HInputGroup` updates its mapping `{ [name]: dataKey | null }` (fallback to `id`).
          * - If there is **no initial value** (no `v-model` provided), radios/checkboxes default to:
          *   - `getValue() === false`
          *   - `getText() === uncheckedText`
@@ -18983,13 +19010,13 @@ declare module 'vue' {
          *   <HInput id="r3" inputType="radio" name="theme" />
          * </HInputGroup>
          * ```
-         * - Group `lang` → `{ lang: "r1" }`
+         * - Group `lang` → `{ lang: "r1" }` (or the checked radio’s `dataKey` if provided)
          * - Group `theme` → `{ theme: null }` (none selected)
          *
          * #### Dynamic re-grouping
          * - Calling `setName('newGroup')` on a radio **moves** it to another group at runtime.
          * - `HInputGroup` re-registers the membership and preserves the radio’s checked state,
-         *   updating its `{ [name]: id | null }` mapping accordingly.
+         *   updating its `{ [name]: dataKey | null }` mapping accordingly (fallback to `id`).
          *
          * ---
          *
@@ -19007,9 +19034,11 @@ declare module 'vue' {
          *
          * ---
          *
-         * ### 📛 About `id` and `name`
+         * ### 📛 About `id`, `name`, and `dataKey`
          * - `id` is applied to the **editable** input element and is used to access methods via
          *   `hison.component.getInput(id)`. If `name` is not provided, it **defaults to** `id`.
+         * - `dataKey` is used by `HInputGroup` when extracting data (`getDataObject()` / `getDataModel()`).
+         *   If `dataKey` is omitted or empty, it falls back to `id`.
          * - For the **readonly display** (span-text) that uses a hidden text input for layout consistency
          *   (i.e., for types other than `range`, `color`, `checkbox`, `radio`, `select`, `textarea`),
          *   the component renders:
@@ -19020,9 +19049,11 @@ declare module 'vue' {
          * ---
          *
          * @prop {string} id - Unique input identifier. Enables runtime access via `hison.component.getInput(id)`.
+         * @prop {string} [dataKey] - Data extraction key used by `HInputGroup`. Defaults to `id` when omitted/empty.
          * @prop {string} [name] - HTML `name` attribute. Defaults to `id`.
          *   For `inputType="radio"`, this acts as the **group key**. `HInputGroup` will expose/accept the current
-         *   selection as `{ [name]: selectedRadioId | null }`. When radios share the same `name`, only one can be `true`.
+         *   selection as `{ [name]: selectedRadioKey | null }`, where `selectedRadioKey` is the checked radio’s `dataKey`
+         *   (fallback to `id`). When radios share the same `name`, only one can be `true`.
          *
          * @prop {string | string[] | Record<string, boolean>} [class] - Additional class string. Supports `hison-*` responsive system.
          * @prop {string | CSSProperties | CSSProperties[]} [style] - Inline CSS style.
@@ -19082,9 +19113,8 @@ declare module 'vue' {
          * and provides group-level runtime control such as loading data, resetting values,
          * validating required fields, and checking modification state.
          *
-         * It is especially useful for handling structured form data such as
-         * `Record<string, any>`, `DataWrapper`, or `DataModel`, and integrates with
-         * `hison.component.getInputGroup(id)` to expose runtime control methods like
+         * It is designed to manage structured form data such as `Record<string, any>` and `DataModel`,
+         * and integrates with `hison.component.getInputGroup(id)` to expose runtime control methods like
          * `.load()`, `.clear()`, `.getDataObject()`, and more.
          *
          * ---
@@ -19093,7 +19123,6 @@ declare module 'vue' {
          * - Automatically registers all child `<HInput>` components rendered inside its `<slot />`.
          * - Supports loading data from:
          *   - `Record<string, any>`
-         *   - `InterfaceDataWrapper`
          *   - `InterfaceDataModel`
          * - Two-way binding with `v-model` for entire form data as `Record<string, any>`.
          * - Can reset all child inputs via `.clear()`.
@@ -19105,6 +19134,16 @@ declare module 'vue' {
          *
          * ---
          *
+         * ### 🧩 About `id` and `dataKey`
+         * - Every child `HInput` must have a unique **`id`**. This `id` is used for runtime access
+         *   (e.g., `hison.component.getInput(id)`), focus control, and internal registration.
+         * - For group-level data I/O (`v-model`, `getDataObject()`, `load()`, `setDataObject()`),
+         *   `HInputGroup` uses each child input’s **`dataKey`** (if provided). If `dataKey` is empty,
+         *   it falls back to the input’s `id`.
+         * - If duplicate `dataKey` values exist within the same group, a `console.warn` is emitted.
+         *
+         * ---
+         *
          * ### 🔘 Radio Grouping by `name`
          * - When a child `HInput` has `inputType="radio"`, its **HTML `name`** defines
          *   the radio **group key** within this `HInputGroup`.
@@ -19112,14 +19151,14 @@ declare module 'vue' {
          * - **Data shape (I/O)** for radios is normalized to:
          *   ```ts
          *   // Used in getDataObject(), v-model emits, load(), setDataObject()
-         *   { [radioGroupName: string]: selectedRadioId | null }
+         *   { [radioGroupName: string]: selectedRadioDataKey | null }
          *   ```
          *   - `radioGroupName`: the `name` of the radio group
-         *   - `selectedRadioId`: the `id` of the selected `HInput` in that group
+         *   - `selectedRadioDataKey`: the selected radio’s `dataKey` (fallback to `id`)
          *   - `null`: no selection in that group
-         * - Non-radio fields use their **input `id` as key**:
+         * - Non-radio fields use their **`dataKey` as key** (fallback to `id`):
          *   ```ts
-         *   { [inputId: string]: value }
+         *   { [dataKey: string]: value }
          *   ```
          * - If no initial value is provided, each radio’s local `v-model` is `false`,
          *   and the group entry becomes `{ [name]: null }` in the group-level object.
@@ -19128,32 +19167,27 @@ declare module 'vue' {
          * ```vue
          * <HInputGroup id="grp" v-model="form">
          *   <!-- group: 'lang' -->
-         *   <HInput id="r1" inputType="radio" name="lang" :modelValue="true" />
-         *   <HInput id="r2" inputType="radio" name="lang" />
-         *
-         *   <!-- group: 'theme' -->
-         *   <HInput id="r3" inputType="radio" name="theme" />
-         *   <HInput id="r4" inputType="radio" name="theme" />
+         *   <HInput id="r1" inputType="radio" name="lang" dataKey="lang_ko" :modelValue="true" />
+         *   <HInput id="r2" inputType="radio" name="lang" dataKey="lang_en" />
          *
-         *   <!-- normal inputs -->
-         *   <HInput id="email" inputType="email" />
+         *   <!-- normal input -->
+         *   <HInput id="email" inputType="email" dataKey="user_email" />
          * </HInputGroup>
          * ```
          * - Example result of `getDataObject()` (or v-model binding object):
          *   ```ts
          *   {
          *     // radios by group name
-         *     lang: "r1",
-         *     theme: null,
-         *     // non-radio by id
-         *     email: "user@example.com"
+         *     lang: "lang_ko",
+         *     // non-radio by dataKey
+         *     user_email: "user@example.com"
          *   }
          *   ```
          *
          * #### Dynamic re-grouping
          * - When `setName('newGroup')` is called on a radio, that radio moves
          *   **to the new group at runtime**. The `HInputGroup` re-registers membership
-         *   and immediately updates the `{ [name]: id | null }` mapping.
+         *   and immediately updates the `{ [name]: dataKey | null }` mapping.
          * - A previously checked radio will transfer to the new group,
          *   and the old group’s selection will be reset (leaving `null` if applicable).
          *
@@ -19162,12 +19196,12 @@ declare module 'vue' {
          * ### ⚙️ Usage
          * ```vue
          * <HInputGroup id="group1" v-model="formData" :editMode="'editable'">
-         *   <HInput id="userid" inputType="text" required />
-         *   <HInput id="email" inputType="email" />
+         *   <HInput id="userid" inputType="text" dataKey="user_id" required />
+         *   <HInput id="email" inputType="email" dataKey="email" />
          *
          *   <!-- radio group 'agree' -->
-         *   <HInput id="agreeY" inputType="radio" name="agree" />
-         *   <HInput id="agreeN" inputType="radio" name="agree" />
+         *   <HInput id="agreeY" inputType="radio" name="agree" dataKey="Y" />
+         *   <HInput id="agreeN" inputType="radio" name="agree" dataKey="N" />
          * </HInputGroup>
          * ```
          *
@@ -19176,30 +19210,29 @@ declare module 'vue' {
          * ### 🛠 Runtime Usage
          * Use `hison.component.getInputGroup(id)` to access and control the group:
          * ```ts
-         * const group = hison.component.getInputGroup('group1');
+         * const group = hison.component.getInputGroup('group1')
          * group.load({
-         *   userid: 'abc',
+         *   user_id: 'abc',
          *   email: 'test@example.com',
-         *   agree: 'agreeY'  // radio by group name → selected radio id
-         * });
-         *
-         * const data = group.getDataObject(); // { userid, email, agree }
-         * group.clear();
-         * group.setStatus('U');
-         * group.setEditMode('readonly');
-         * const dataModel = group.getDataModel(); // hison.data.DataModel
-         * const changed = group.isModified();
+         *   agree: 'Y' // radio by group name → selected radio dataKey (fallback to id)
+         * })
+         *
+         * const data = group.getDataObject() // { user_id, email, agree }
+         * group.clear()
+         * group.setStatus('U')
+         * group.setEditMode('readonly')
+         * const dataModel = group.getDataModel() // hison.data.DataModel
+         * const changed = group.isModified()
          * ```
          *
          * ---
          *
          * ### 🔒 Notes
          * - `v-model` is fully supported and emits changes whenever any child `HInput` updates.
-         * - Child `HInput` components must have an `id` matching their corresponding data key
-         *   (except radios, which are keyed by group `name`).
-         * - Radios default to `false` when not initialized; group mapping defaults to `null`.
+         * - Child `HInput` **`id`** is always required for runtime control and registration.
+         * - Group data keys use **`dataKey` first** (fallback to `id`) for non-radio fields.
+         * - Radios are keyed by group `name`, and store **selected radio `dataKey`** (fallback to `id`) or `null`.
          * - Inputs auto-sync their values from `v-model` on registration and emit changes upward.
-         * - Modification tracking reflects only user-triggered changes.
          * - Grouped `HInput` instances self-register via `provide('registerToInputGroup')`.
          *
          * ---
@@ -19208,8 +19241,8 @@ declare module 'vue' {
          * @prop {('editable' | 'disable' | 'readonly')} [editMode='editable'] - Edit mode.
          * @prop {('C' | 'R' | 'U' | 'D')} [status='R'] - Data status (`C`, `R`, `U`, `D`). Controlled via `.getStatus()` / `.setStatus()`.
          * @prop {Record<string, any>} [modelValue] - Used with `v-model` for two-way binding.
-         *   - **Non-radio**: keyed by child input **`id`** → value
-         *   - **Radio**: keyed by radio **`name`** → **selected radio `id`** or `null`
+         *   - **Non-radio**: keyed by child input **`dataKey`** (fallback to `id`) → value
+         *   - **Radio**: keyed by radio **`name`** → **selected radio `dataKey`** (fallback to `id`) or `null`
          *
          * @event mounted - Fired after mount with `HInputGroupMethods` instance.
          * @event update:modelValue - Fired whenever any child `HInput` changes, emitting the updated object.

package/dist/hisonvue.es.js

@@ -1,5 +1,5 @@
-import { Q as a, au as e, av as t } from "./index-Cvhi7T4w.mjs";
-import { B as aa, Y as ta, Z as ea, X as oa, ax as na, az as sa, ay as la, f as ia, G as ra, aJ as Aa, aw as ca, V as _a, D as Ea, W as ma, aK as Ca, x as Sa, E as Da, y as Oa, aH as pa, L as La, K as ya, J as Ta, a4 as Va, a5 as Ha, a6 as Fa, a7 as ga, a8 as ua, aL as Ia, m as Ua, a9 as Ma, aa as Na, ab as da, ac as Ga, aI as Pa, ad as Ra, ae as ha, aF as fa, aG as Ba, af as ka, ag as Wa, ah as Ya, ai as Ka, aj as wa, ak as xa, al as ba, am as va, an as za, ao as Xa, ap as $a, aq as ja, ar as Ja, as as qa, k as Qa, H as Za, z as at, A as tt, N as et, O as ot, aA as nt, aB as st, $ as lt, S as it, M as rt, aC as At, i as ct, v as _t, aD as Et, T as mt, _ as Ct, w as St, a1 as Dt, a2 as Ot, a0 as pt, aE as Lt, at as yt, l as Tt, a3 as Vt, I as Ht } from "./index-Cvhi7T4w.mjs";
+import { Q as a, au as e, av as t } from "./index-HfC1PNxb.mjs";
+import { B as aa, Y as ta, Z as ea, X as oa, ax as na, az as sa, ay as la, f as ia, G as ra, aJ as Aa, aw as ca, V as _a, D as Ea, W as ma, aK as Ca, x as Sa, E as Da, y as Oa, aH as pa, L as La, K as ya, J as Ta, a4 as Va, a5 as Ha, a6 as Fa, a7 as ga, a8 as ua, aL as Ia, m as Ua, a9 as Ma, aa as Na, ab as da, ac as Ga, aI as Pa, ad as Ra, ae as ha, aF as fa, aG as Ba, af as ka, ag as Wa, ah as Ya, ai as Ka, aj as wa, ak as xa, al as ba, am as va, an as za, ao as Xa, ap as $a, aq as ja, ar as Ja, as as qa, k as Qa, H as Za, z as at, A as tt, N as et, O as ot, aA as nt, aB as st, $ as lt, S as it, M as rt, aC as At, i as ct, v as _t, aD as Et, T as mt, _ as Ct, w as St, a1 as Dt, a2 as Ot, a0 as pt, aE as Lt, at as yt, l as Tt, a3 as Vt, I as Ht } from "./index-HfC1PNxb.mjs";
 const n = a.AllDateTimeFormat, s = a.ApiDelete, l = a.ApiDeleteUrl, i = a.ApiGet, r = a.ApiGetUrl, A = a.ApiPatch, c = a.ApiPatchUrl, _ = a.ApiPost, E = a.ApiPostUrl, m = a.ApiPut, C = a.ApiPutUrl, S = a.CachingModule, D = t.ColorSet, O = a.CountDateType, p = a.DataModel, L = a.DataWrapper, y = a.DateFormat, T = a.DateTimeFormat, V = a.DayFormat, H = a.DayOfWeekFormat, F = a.DayOfWeekFullName, g = a.DayOfWeekFullNameKR, u = a.DayOfWeekShortName, I = a.DayOfWeekShortNameKR, U = t.Align, M = t.BasicDataType, N = t.DateFormat, d = t.MonthFormat, G = t.RowStatus, P = t.VerticalAlign, R = a.HourFormat, h = a.HourMinuteFormat, f = a.MinuteFormat, B = a.MonthFormat, k = a.MonthFullName, W = a.MonthShortName, Y = e.NoteModeByDevice, K = e.ToolPosition, w = a.SecondFormat, x = t.SelectionPolicy, b = a.TimeFormat, v = a.YearFormat, z = a.YearMonthFormat, X = a.createHison, $ = t.getVanillagrid, j = t.getVanillagridConfig, J = e.getVanillanote, q = e.getVanillanoteConfig;
 export {
   n as AllDateTimeFormat,