@blueprint-ts/core 4.1.0-beta.2 → 4.1.0-beta.3

package/dist/vue/forms/BaseForm.js

@@ -0,0 +1,997 @@
+import { reactive, computed, toRaw, watch } from 'vue';
+import { camelCase, upperFirst, cloneDeep, isEqual } from 'lodash-es';
+import isEqualWith from 'lodash-es/isEqualWith';
+import { NonPersistentDriver } from '../../persistenceDrivers/NonPersistentDriver';
+import { PropertyAwareArray } from './PropertyAwareArray';
+import { ValidationMode } from './validation';
+function isRecord(value) {
+    return !!value && typeof value === 'object' && !Array.isArray(value);
+}
+function isErrorMessages(value) {
+    return Array.isArray(value) && (value.length === 0 || typeof value[0] === 'string');
+}
+function isErrorArray(value) {
+    return Array.isArray(value) && value.length > 0 && isRecord(value[0]);
+}
+function isErrorObject(value) {
+    return isRecord(value);
+}
+export function propertyAwareToRaw(propertyAwareObject) {
+    var _a;
+    if (Array.isArray(propertyAwareObject)) {
+        return propertyAwareObject.map((item) => propertyAwareToRaw(item));
+    }
+    if (!isRecord(propertyAwareObject)) {
+        return propertyAwareObject;
+    }
+    const result = {};
+    const record = propertyAwareObject;
+    for (const key in record) {
+        if (!Object.prototype.hasOwnProperty.call(record, key) || key.startsWith('_')) {
+            continue;
+        }
+        const value = record[key];
+        const modelValue = isRecord(value) ? (_a = value.model) === null || _a === void 0 ? void 0 : _a.value : undefined;
+        if (modelValue !== undefined) {
+            result[key] = modelValue;
+            continue;
+        }
+        if (value && typeof value === 'object') {
+            result[key] = propertyAwareToRaw(value);
+            continue;
+        }
+        result[key] = value;
+    }
+    return result;
+}
+/** Helper: shallow-merge source object into target. */
+function shallowMerge(target, source) {
+    Object.assign(target, source);
+    return target;
+}
+/** Helper: if both values are arrays, update each element if possible, otherwise replace. */
+function deepMergeArrays(target, source) {
+    if (target.length !== source.length) {
+        return source;
+    }
+    return target.map((t, i) => {
+        const s = source[i];
+        if (s === undefined) {
+            return t;
+        }
+        if (t && typeof t === 'object' && s && typeof s === 'object') {
+            return shallowMerge(Object.assign({}, t), s);
+        }
+        return s;
+    });
+}
+/**
+ * Helper: Given the defaults and a state object (or original),
+ * for every key where the default is a PropertyAwareArray, rewrap the value if needed.
+ */
+function restorePropertyAwareArrays(defaults, state) {
+    for (const key in defaults) {
+        const defVal = defaults[key];
+        if (defVal instanceof PropertyAwareArray) {
+            if (!(state[key] instanceof PropertyAwareArray)) {
+                const values = Array.isArray(state[key]) ? Array.from(state[key]) : [];
+                state[key] = new PropertyAwareArray(values);
+            }
+        }
+    }
+}
+/**
+ * Compare values while treating PropertyAwareArray as its underlying array.
+ * This avoids false negatives when comparing persisted state to defaults.
+ */
+function propertyAwareDeepEqual(a, b) {
+    const getInner = (val) => {
+        if (val instanceof PropertyAwareArray) {
+            return val;
+        }
+        return val;
+    };
+    return isEqualWith(a, b, (aValue, bValue) => {
+        const normA = getInner(aValue);
+        const normB = getInner(bValue);
+        if (normA !== aValue || normB !== bValue) {
+            return isEqual(normA, normB);
+        }
+        return undefined; // use default comparison
+    });
+}
+/**
+ * A generic base class for forms.
+ *
+ * @template RequestBody - The final payload shape (what is sent to the server).
+ * @template FormBody - The raw form data shape (before mutators are applied).
+ *
+ * (We assume that for every key in RequestBody there is a corresponding key in FormBody.)
+ */
+export class BaseForm {
+    /**
+     * Returns the persistence driver to use.
+     * The default is a NonPersistentDriver.
+     * Child classes can override this method to return a different driver.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getPersistenceDriver(_suffix) {
+        return new NonPersistentDriver();
+    }
+    /**
+     * Helper: recursively computes the dirty state for a value based on the original.
+     * For plain arrays we compare the entire array (a single flag), not each element.
+     */
+    computeDirtyState(current, original) {
+        if (Array.isArray(current) && Array.isArray(original)) {
+            return current.length !== original.length || !isEqual(current, original);
+        }
+        else if (current && typeof current === 'object' && original && typeof original === 'object') {
+            const dirty = {};
+            for (const key in current) {
+                if (Object.prototype.hasOwnProperty.call(current, key)) {
+                    dirty[key] = !isEqual(current[key], original[key]);
+                }
+            }
+            return dirty;
+        }
+        return !isEqual(current, original);
+    }
+    initDirtyTouched(defaults) {
+        const initDirty = {};
+        const initTouched = {};
+        for (const key in defaults) {
+            const value = defaults[key];
+            if (value instanceof PropertyAwareArray) {
+                initDirty[key] = Array.from(value).map((item) => {
+                    if (item && typeof item === 'object') {
+                        const obj = {};
+                        for (const k in item) {
+                            if (Object.prototype.hasOwnProperty.call(item, k)) {
+                                obj[k] = false;
+                            }
+                        }
+                        return obj;
+                    }
+                    return false;
+                });
+            }
+            else {
+                initDirty[key] = false;
+            }
+            initTouched[key] = false;
+        }
+        return {
+            dirty: reactive(initDirty),
+            touched: reactive(initTouched)
+        };
+    }
+    replacePropertyAwareArray(key, values) {
+        const current = this.state[key];
+        if (current instanceof PropertyAwareArray) {
+            current.length = 0;
+            values.forEach((item) => current.push(item));
+            return;
+        }
+        this.state[key] = new PropertyAwareArray(values);
+    }
+    persistState(driver) {
+        var _a, _b;
+        if (((_a = this.options) === null || _a === void 0 ? void 0 : _a.persist) === false) {
+            return;
+        }
+        const persistDriver = driver !== null && driver !== void 0 ? driver : this.getPersistenceDriver((_b = this.options) === null || _b === void 0 ? void 0 : _b.persistSuffix);
+        persistDriver.set(this.constructor.name, {
+            state: toRaw(this.state),
+            original: toRaw(this.original),
+            dirty: toRaw(this.dirty),
+            touched: toRaw(this.touched)
+        });
+    }
+    markFieldUpdated(key, driver) {
+        this.touched[key] = true;
+        this.validateField(key);
+        this.validateDependentFields(key);
+        this.persistState(driver);
+    }
+    updateField(key, value, driver) {
+        this.state[key] = value;
+        this.dirty[key] = this.computeDirtyState(value, this.original[key]);
+        this.markFieldUpdated(key, driver);
+    }
+    /**
+     * Build a map of field dependencies based on the rules
+     * This identifies which fields need to be revalidated when another field changes
+     */
+    buildFieldDependencies() {
+        var _a, _b, _c, _d;
+        for (const field in this.rules) {
+            if (Object.prototype.hasOwnProperty.call(this.rules, field)) {
+                const fieldRules = ((_a = this.rules[field]) === null || _a === void 0 ? void 0 : _a.rules) || [];
+                for (const rule of fieldRules) {
+                    for (const dependencyField of rule.dependsOn) {
+                        if (!this.fieldDependencies.has(dependencyField)) {
+                            this.fieldDependencies.set(dependencyField, new Set());
+                        }
+                        (_b = this.fieldDependencies.get(dependencyField)) === null || _b === void 0 ? void 0 : _b.add(field);
+                    }
+                    const bidirectionalFields = (_c = rule.getBidirectionalFields) === null || _c === void 0 ? void 0 : _c.call(rule);
+                    if (bidirectionalFields && bidirectionalFields.length > 0) {
+                        for (const bidirectionalField of bidirectionalFields) {
+                            if (!this.fieldDependencies.has(field)) {
+                                this.fieldDependencies.set(field, new Set());
+                            }
+                            (_d = this.fieldDependencies.get(field)) === null || _d === void 0 ? void 0 : _d.add(bidirectionalField);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Validate fields that depend on the changed field
+     */
+    validateDependentFields(changedField) {
+        const dependentFields = this.fieldDependencies.get(changedField);
+        if (dependentFields) {
+            const fieldsToValidate = new Set(dependentFields);
+            for (const field of dependentFields) {
+                const fieldDeps = this.fieldDependencies.get(field);
+                if (fieldDeps && fieldDeps.has(changedField)) {
+                    fieldsToValidate.add(field);
+                    fieldsToValidate.add(changedField);
+                }
+            }
+            for (const field of fieldsToValidate) {
+                this.validateField(field, {
+                    isDependentChange: true,
+                    isSubmitting: false
+                });
+            }
+        }
+    }
+    constructor(defaults, options) {
+        this.options = options;
+        this._errors = reactive({});
+        this.append = [];
+        this.ignore = [];
+        this.errorMap = {};
+        this.rules = {};
+        this.fieldDependencies = new Map();
+        const persist = (options === null || options === void 0 ? void 0 : options.persist) !== false;
+        let initialData;
+        const driver = this.getPersistenceDriver(options === null || options === void 0 ? void 0 : options.persistSuffix);
+        if (persist) {
+            const persisted = driver.get(this.constructor.name);
+            if (persisted && propertyAwareDeepEqual(defaults, persisted.original)) {
+                initialData = persisted.state;
+                this.original = cloneDeep(persisted.original);
+                this.dirty = reactive(persisted.dirty);
+                this.touched = reactive(persisted.touched || {});
+                restorePropertyAwareArrays(defaults, initialData);
+                restorePropertyAwareArrays(defaults, this.original);
+            }
+            else {
+                console.log('Discarding persisted data for ' + this.constructor.name + " because it doesn't match the defaults.");
+                initialData = defaults;
+                this.original = cloneDeep(defaults);
+                const init = this.initDirtyTouched(defaults);
+                this.dirty = init.dirty;
+                this.touched = init.touched;
+                driver.remove(this.constructor.name);
+            }
+        }
+        else {
+            initialData = defaults;
+            this.original = cloneDeep(defaults);
+            const init = this.initDirtyTouched(defaults);
+            this.dirty = init.dirty;
+            this.touched = init.touched;
+        }
+        this.rules = this.defineRules();
+        this.buildFieldDependencies();
+        this.state = reactive(initialData);
+        this._model = {};
+        for (const key in this.state) {
+            const value = this.state[key];
+            if (value instanceof PropertyAwareArray) {
+                this._model[key] = computed({
+                    get: () => this.state[key],
+                    set: (newVal) => {
+                        const next = Array.isArray(newVal) ? Array.from(newVal) : [];
+                        this.replacePropertyAwareArray(key, next);
+                        this.dirty[key] = next.map(() => false);
+                        this.markFieldUpdated(key, driver);
+                    }
+                });
+            }
+            else {
+                this._model[key] = computed({
+                    get: () => this.state[key],
+                    set: (value) => {
+                        this.updateField(key, value, driver);
+                    }
+                });
+            }
+        }
+        for (const key in this.state) {
+            const value = this.state[key];
+            if (Array.isArray(value) && !(value instanceof PropertyAwareArray)) {
+                watch(() => this.state[key], (newVal) => {
+                    this.dirty[key] = this.computeDirtyState(newVal, this.original[key]);
+                    this.touched[key] = true;
+                }, { deep: true });
+            }
+        }
+        this._hasErrors = computed(() => {
+            for (const field in this._errors) {
+                if (Object.prototype.hasOwnProperty.call(this._errors, field)) {
+                    const fieldErrors = this._errors[field];
+                    if (Array.isArray(fieldErrors) && fieldErrors.length > 0) {
+                        return true;
+                    }
+                    if (fieldErrors && typeof fieldErrors === 'object') {
+                        if (Array.isArray(fieldErrors)) {
+                            for (const item of fieldErrors) {
+                                if (item && typeof item === 'object' && Object.keys(item).length > 0) {
+                                    return true;
+                                }
+                            }
+                        }
+                        else if (Object.keys(fieldErrors).length > 0) {
+                            return true;
+                        }
+                    }
+                }
+            }
+            return false;
+        });
+        if (persist) {
+            watch(() => this.state, () => this.persistState(driver), { deep: true, immediate: true });
+        }
+        this.validate();
+    }
+    defineRules() {
+        return {};
+    }
+    clearErrors() {
+        for (const key in this._errors) {
+            delete this._errors[key];
+        }
+    }
+    getOrCreateErrorArray(key) {
+        const existing = this._errors[key];
+        if (isErrorArray(existing)) {
+            return existing;
+        }
+        const next = [];
+        this._errors[key] = next;
+        return next;
+    }
+    getOrCreateErrorObject(errors, index) {
+        const existing = errors[index];
+        if (isErrorObject(existing)) {
+            return existing;
+        }
+        const next = {};
+        errors[index] = next;
+        return next;
+    }
+    getFieldErrors(field) {
+        const errors = this._errors[field];
+        return isErrorMessages(errors) ? errors : [];
+    }
+    getOrCreateFieldErrors(field) {
+        const existing = this._errors[field];
+        if (isErrorMessages(existing)) {
+            return existing;
+        }
+        const next = [];
+        this._errors[field] = next;
+        return next;
+    }
+    getArrayItemErrors(field, index) {
+        const errors = this._errors[field];
+        if (!isErrorArray(errors)) {
+            return undefined;
+        }
+        const item = errors[index];
+        return isErrorObject(item) ? item : undefined;
+    }
+    getArrayItemFieldErrors(field, index, innerKey) {
+        const itemErrors = this.getArrayItemErrors(field, index);
+        if (!itemErrors) {
+            return [];
+        }
+        const fieldErrors = itemErrors[innerKey];
+        if (isErrorMessages(fieldErrors)) {
+            return fieldErrors;
+        }
+        if (isErrorObject(fieldErrors)) {
+            const nestedErrors = fieldErrors[''];
+            return isErrorMessages(nestedErrors) ? nestedErrors : [];
+        }
+        return [];
+    }
+    getArrayItemErrorMessages(field, index) {
+        const errors = this._errors[field];
+        if (!Array.isArray(errors)) {
+            return [];
+        }
+        const item = errors[index];
+        if (isErrorMessages(item)) {
+            return item;
+        }
+        if (isErrorObject(item)) {
+            const nestedErrors = item[''];
+            return isErrorMessages(nestedErrors) ? nestedErrors : [];
+        }
+        return [];
+    }
+    setArrayDirty(field, index, value) {
+        const dirtyState = this.dirty[field];
+        if (Array.isArray(dirtyState)) {
+            dirtyState[index] = this.normalizeItemDirtyState(value);
+        }
+    }
+    /**
+     * Collapse nested array dirty states into a single boolean/object for array entries.
+     */
+    normalizeItemDirtyState(value) {
+        if (!Array.isArray(value)) {
+            return value;
+        }
+        return value.some((entry) => {
+            if (typeof entry === 'boolean') {
+                return entry;
+            }
+            if (isRecord(entry)) {
+                return Object.values(entry).some((item) => item === true);
+            }
+            return false;
+        });
+    }
+    getArrayItemDirty(field, index, innerKey) {
+        const dirtyState = this.dirty[field];
+        if (!Array.isArray(dirtyState)) {
+            return false;
+        }
+        const entry = dirtyState[index];
+        if (typeof entry === 'boolean') {
+            return entry;
+        }
+        if (isRecord(entry)) {
+            return entry[innerKey] === true;
+        }
+        return false;
+    }
+    getArrayItemDirtyValue(field, index) {
+        const dirtyState = this.dirty[field];
+        if (!Array.isArray(dirtyState)) {
+            return false;
+        }
+        const entry = dirtyState[index];
+        return typeof entry === 'boolean' ? entry : false;
+    }
+    /**
+     * Map server-side errors (including dot-notation paths) into the form error bag.
+     */
+    fillErrors(errorsData) {
+        var _a, _b, _c;
+        this.clearErrors();
+        for (const serverKey in errorsData) {
+            if (Object.prototype.hasOwnProperty.call(errorsData, serverKey)) {
+                const errorMessage = errorsData[serverKey];
+                if (errorMessage === undefined) {
+                    continue;
+                }
+                let targetKeys = [serverKey];
+                const mapping = (_a = this.errorMap) === null || _a === void 0 ? void 0 : _a[serverKey];
+                if (mapping) {
+                    targetKeys = Array.isArray(mapping) ? mapping : [mapping];
+                }
+                for (const targetKey of targetKeys) {
+                    const parts = targetKey.split('.');
+                    if (parts.length > 1) {
+                        const topKey = (_b = parts[0]) !== null && _b !== void 0 ? _b : '';
+                        const indexPart = (_c = parts[1]) !== null && _c !== void 0 ? _c : '';
+                        const index = Number.parseInt(indexPart, 10);
+                        if (!topKey || !Number.isFinite(index)) {
+                            this._errors[targetKey] = errorMessage;
+                            continue;
+                        }
+                        const errorSubKey = parts.slice(2).join('.');
+                        const errors = this.getOrCreateErrorArray(topKey);
+                        const errorObject = this.getOrCreateErrorObject(errors, index);
+                        if (errorSubKey.length === 0) {
+                            errorObject[''] = errorMessage;
+                        }
+                        else {
+                            errorObject[errorSubKey] = errorMessage;
+                        }
+                    }
+                    else {
+                        this._errors[targetKey] = errorMessage;
+                    }
+                }
+            }
+        }
+    }
+    /**
+     * Mark a field as touched, which indicates user interaction
+     * Optionally triggers validation
+     * @param field The field to mark as touched
+     */
+    touch(field) {
+        var _a, _b, _c;
+        this.touched[field] = true;
+        const fieldConfig = this.rules[field];
+        if (fieldConfig) {
+            const mode = (_b = (_a = fieldConfig.options) === null || _a === void 0 ? void 0 : _a.mode) !== null && _b !== void 0 ? _b : ValidationMode.DEFAULT;
+            if (mode & ValidationMode.ON_TOUCH) {
+                this.validateField(field, {
+                    isSubmitting: false,
+                    isDependentChange: false
+                });
+            }
+        }
+        if (((_c = this.options) === null || _c === void 0 ? void 0 : _c.persist) !== false) {
+            this.persistState();
+        }
+    }
+    /**
+     * Check if a field has been touched (user interacted with it)
+     * @param field The field to check
+     * @returns boolean indicating if the field has been touched
+     */
+    isTouched(field) {
+        return !!this.touched[field];
+    }
+    validateField(field, context = {}) {
+        var _a, _b;
+        const emptyErrors = [];
+        const errorKey = String(field);
+        this._errors[errorKey] = emptyErrors;
+        const value = this.state[field];
+        const fieldConfig = this.rules[field];
+        if (!(fieldConfig === null || fieldConfig === void 0 ? void 0 : fieldConfig.rules) || fieldConfig.rules.length === 0) {
+            return; // No rules to validate
+        }
+        const mode = (_b = (_a = fieldConfig.options) === null || _a === void 0 ? void 0 : _a.mode) !== null && _b !== void 0 ? _b : ValidationMode.DEFAULT;
+        const isDirty = context.isDirty !== undefined ? context.isDirty : this.isDirty(field);
+        const isTouched = context.isTouched !== undefined ? context.isTouched : this.isTouched(field);
+        const shouldValidate = (context.isSubmitting && mode & ValidationMode.ON_SUBMIT) ||
+            (isDirty && mode & ValidationMode.ON_DIRTY) ||
+            (isTouched && mode & ValidationMode.ON_TOUCH) ||
+            mode & ValidationMode.INSTANTLY ||
+            (context.isDependentChange && mode & ValidationMode.ON_DEPENDENT_CHANGE);
+        if (shouldValidate) {
+            for (const rule of fieldConfig.rules) {
+                const isValid = rule.validate(value, this.state);
+                if (!isValid) {
+                    this.getOrCreateFieldErrors(errorKey).push(rule.getMessage());
+                }
+            }
+        }
+    }
+    validate(isSubmitting = false) {
+        let isValid = true;
+        for (const key in this._errors) {
+            delete this._errors[key];
+        }
+        for (const field in this.rules) {
+            if (Object.prototype.hasOwnProperty.call(this.rules, field)) {
+                this.validateField(field, {
+                    isSubmitting,
+                    isDependentChange: false,
+                    isTouched: this.isTouched(field)
+                });
+                const fieldErrors = this._errors[String(field)];
+                if (isErrorMessages(fieldErrors) && fieldErrors.length > 0) {
+                    isValid = false;
+                }
+            }
+        }
+        return isValid;
+    }
+    fillState(data) {
+        var _a;
+        const driver = this.getPersistenceDriver((_a = this.options) === null || _a === void 0 ? void 0 : _a.persistSuffix);
+        for (const key of Object.keys(data)) {
+            if (!Object.prototype.hasOwnProperty.call(data, key) || !(key in this.state)) {
+                continue;
+            }
+            const currentVal = this.state[key];
+            const newVal = data[key];
+            if (currentVal instanceof PropertyAwareArray) {
+                const values = newVal instanceof PropertyAwareArray || Array.isArray(newVal) ? Array.from(newVal) : [];
+                this.replacePropertyAwareArray(key, values);
+                this.dirty[key] = values.map(() => false);
+                this.touched[key] = true;
+                continue;
+            }
+            if (Array.isArray(newVal) && Array.isArray(currentVal)) {
+                const merged = newVal.length === currentVal.length ? deepMergeArrays(currentVal, newVal) : newVal;
+                this.state[key] = merged;
+                this.dirty[key] = this.computeDirtyState(this.state[key], this.original[key]);
+                this.touched[key] = true;
+                continue;
+            }
+            if (isRecord(newVal) && isRecord(currentVal)) {
+                this.state[key] = shallowMerge(Object.assign({}, currentVal), newVal);
+                this.dirty[key] = this.computeDirtyState(this.state[key], this.original[key]);
+                this.touched[key] = true;
+                continue;
+            }
+            this.state[key] = newVal;
+            this.dirty[key] = this.computeDirtyState(this.state[key], this.original[key]);
+            this.touched[key] = true;
+        }
+        this.persistState(driver);
+        for (const key in data) {
+            if (Object.prototype.hasOwnProperty.call(data, key) && key in this.state) {
+                this.validateField(key);
+                this.validateDependentFields(key);
+            }
+        }
+    }
+    getValueGetter(name) {
+        const candidate = this[name];
+        if (typeof candidate !== 'function') {
+            return undefined;
+        }
+        return candidate.bind(this);
+    }
+    getNoArgGetter(name) {
+        const candidate = this[name];
+        if (typeof candidate !== 'function') {
+            return undefined;
+        }
+        return candidate.bind(this);
+    }
+    transformValue(value, parentKey) {
+        if (value instanceof Date) {
+            return value;
+        }
+        if (typeof Blob !== 'undefined' && value instanceof Blob) {
+            return value;
+        }
+        if (value instanceof PropertyAwareArray) {
+            return [...value].map((item) => this.transformValue(item, parentKey));
+        }
+        if (Array.isArray(value)) {
+            return value.map((item) => this.transformValue(item, parentKey));
+        }
+        else if (isRecord(value)) {
+            const result = {};
+            for (const prop in value) {
+                if (parentKey) {
+                    const compositeMethod = 'get' + upperFirst(parentKey) + upperFirst(camelCase(prop));
+                    const getter = this.getValueGetter(compositeMethod);
+                    if (getter) {
+                        const transformed = getter(value[prop]);
+                        if (transformed !== undefined) {
+                            result[prop] = transformed;
+                        }
+                        continue;
+                    }
+                }
+                const transformed = this.transformValue(value[prop], parentKey);
+                if (transformed !== undefined) {
+                    result[prop] = transformed;
+                }
+            }
+            return result;
+        }
+        return value;
+    }
+    /**
+     * Build the request payload, applying field/composite/appended getters when present.
+     */
+    buildPayload() {
+        const payload = {};
+        for (const key of Object.keys(this.state)) {
+            if (this.ignore.includes(key)) {
+                continue;
+            }
+            const value = this.state[key];
+            const getterName = 'get' + upperFirst(camelCase(key));
+            const typedKey = key;
+            const getter = this.getValueGetter(getterName);
+            if (getter) {
+                const transformed = getter(value);
+                if (transformed !== undefined) {
+                    payload[typedKey] = transformed;
+                }
+            }
+            else {
+                const transformed = this.transformValue(value, key);
+                if (transformed !== undefined) {
+                    payload[typedKey] = transformed;
+                }
+            }
+        }
+        for (const fieldName of this.append) {
+            if (Array.isArray(this.ignore) && this.ignore.includes(fieldName)) {
+                console.warn(`Appended field '${fieldName}' is also in ignore list in ${this.constructor.name}. It will be skipped.`);
+                continue;
+            }
+            const getterName = 'get' + upperFirst(camelCase(fieldName));
+            const getter = this.getNoArgGetter(getterName);
+            if (getter) {
+                const transformed = getter();
+                if (transformed !== undefined) {
+                    payload[fieldName] = transformed;
+                }
+            }
+            else {
+                console.warn(`Getter method '${getterName}' not found for appended field '${fieldName}' in ${this.constructor.name}.`);
+            }
+        }
+        return payload;
+    }
+    reset() {
+        var _a;
+        const driver = this.getPersistenceDriver((_a = this.options) === null || _a === void 0 ? void 0 : _a.persistSuffix);
+        for (const key in this.state) {
+            if (this.state[key] instanceof PropertyAwareArray) {
+                const originalValue = this.original[key];
+                const values = [...originalValue].map((item) => cloneDeep(item));
+                const typedKey = key;
+                this.replacePropertyAwareArray(typedKey, values);
+                this.dirty[typedKey] = values.map(() => false);
+                this.touched[typedKey] = false;
+            }
+            else if (Array.isArray(this.original[key])) {
+                this.state[key] = cloneDeep(this.original[key]);
+                this.dirty[key] = this.computeDirtyState(this.state[key], this.original[key]);
+                this.touched[key] = false;
+            }
+            else {
+                this.state[key] = cloneDeep(this.original[key]);
+                this.dirty[key] = false;
+                this.touched[key] = false;
+            }
+        }
+        for (const key in this._errors) {
+            delete this._errors[key];
+        }
+        this.persistState(driver);
+        this.validate();
+    }
+    addToArrayProperty(property, newElement) {
+        var _a;
+        const driver = this.getPersistenceDriver((_a = this.options) === null || _a === void 0 ? void 0 : _a.persistSuffix);
+        const arr = this.state[property];
+        if (arr instanceof PropertyAwareArray) {
+            arr.push(newElement);
+            this.touched[property] = true;
+            this.persistState(driver);
+            return;
+        }
+        if (!Array.isArray(arr)) {
+            throw new Error(`Property "${String(property)}" is not an array.`);
+        }
+        arr.push(newElement);
+        this.dirty[property] = this.computeDirtyState(arr, this.original[property]);
+        this.touched[property] = true;
+        this.persistState(driver);
+        this.validateField(property);
+        this.validateDependentFields(property);
+    }
+    removeArrayItem(arrayIndex, filter) {
+        const current = this.state[arrayIndex];
+        if (current instanceof PropertyAwareArray) {
+            const filtered = [...current].filter(filter);
+            current.length = 0;
+            filtered.forEach((item) => current.push(item));
+        }
+        else if (Array.isArray(current)) {
+            this.state[arrayIndex] = current.filter(filter);
+        }
+        this.touched[arrayIndex] = true;
+        this.validateField(arrayIndex);
+        this.validateDependentFields(arrayIndex);
+    }
+    resetArrayCounter(arrayIndex, counterIndex) {
+        let count = 1;
+        const current = this.state[arrayIndex];
+        if (current instanceof PropertyAwareArray) {
+            ;
+            [...current].forEach((item) => {
+                if (isRecord(item)) {
+                    item[counterIndex] = count;
+                    count++;
+                }
+            });
+        }
+        else if (Array.isArray(current)) {
+            current.forEach((item) => {
+                if (isRecord(item)) {
+                    item[counterIndex] = count;
+                    count++;
+                }
+            });
+        }
+        this.touched[arrayIndex] = true;
+    }
+    get properties() {
+        const props = {};
+        for (const key of Object.keys(this.state)) {
+            const value = this.state[key];
+            if (value instanceof PropertyAwareArray) {
+                const arrayProps = [...value].map((item, index) => {
+                    if (isRecord(item)) {
+                        const elementProps = {};
+                        for (const innerKey of Object.keys(item)) {
+                            elementProps[innerKey] = {
+                                model: computed({
+                                    get: () => {
+                                        const current = value[index];
+                                        return isRecord(current) ? current[innerKey] : undefined;
+                                    },
+                                    set: (newVal) => {
+                                        const current = value[index];
+                                        if (isRecord(current)) {
+                                            current[innerKey] = newVal;
+                                        }
+                                        const updatedElement = value[index];
+                                        const originalElement = this.original[key][index];
+                                        this.setArrayDirty(key, index, this.computeDirtyState(updatedElement, originalElement));
+                                        this.touched[key] = true;
+                                        this.validateField(key);
+                                        this.validateDependentFields(key);
+                                    }
+                                }),
+                                errors: this.getArrayItemFieldErrors(key, index, innerKey),
+                                dirty: this.getArrayItemDirty(key, index, innerKey),
+                                touched: this.touched[key] || false
+                            };
+                        }
+                        return elementProps;
+                    }
+                    return {
+                        value: {
+                            model: computed({
+                                get: () => value[index],
+                                set: (newVal) => {
+                                    value[index] = newVal;
+                                    const updatedValue = value[index];
+                                    const originalValue = this.original[key][index];
+                                    this.setArrayDirty(key, index, this.computeDirtyState(updatedValue, originalValue));
+                                    this.touched[key] = true;
+                                    this.validateField(key);
+                                    this.validateDependentFields(key);
+                                }
+                            }),
+                            errors: this.getArrayItemErrorMessages(key, index),
+                            dirty: this.getArrayItemDirtyValue(key, index),
+                            touched: this.touched[key] || false
+                        }
+                    };
+                });
+                props[key] = arrayProps;
+                continue;
+            }
+            props[key] = {
+                model: this._model[key],
+                errors: this.getFieldErrors(key),
+                dirty: this.dirty[key] || false,
+                touched: this.touched[key] || false
+            };
+        }
+        return props;
+    }
+    /**
+     * Checks if the form or a specific field is dirty
+     * @param field Optional field name to check, if not provided checks the entire form
+     * @returns boolean indicating if the form or specified field is dirty
+     */
+    isDirty(field) {
+        if (field !== undefined) {
+            const dirtyState = this.dirty[field];
+            if (typeof dirtyState === 'boolean') {
+                return dirtyState;
+            }
+            if (Array.isArray(dirtyState)) {
+                return dirtyState.some((item) => {
+                    if (typeof item === 'boolean') {
+                        return item;
+                    }
+                    if (item && typeof item === 'object') {
+                        return Object.values(item).some((v) => v === true);
+                    }
+                    return false;
+                });
+            }
+            if (dirtyState && typeof dirtyState === 'object') {
+                return Object.values(dirtyState).some((v) => v === true);
+            }
+            return false;
+        }
+        for (const key in this.dirty) {
+            const dirtyState = this.dirty[key];
+            if (typeof dirtyState === 'boolean' && dirtyState) {
+                return true;
+            }
+            if (Array.isArray(dirtyState)) {
+                for (const item of dirtyState) {
+                    if (typeof item === 'boolean' && item) {
+                        return true;
+                    }
+                    if (item && typeof item === 'object' && Object.values(item).some((v) => v === true)) {
+                        return true;
+                    }
+                }
+            }
+            if (dirtyState && typeof dirtyState === 'object' && Object.values(dirtyState).some((v) => v === true)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Returns whether the form has validation errors
+     * @returns boolean indicating if the form has errors
+     */
+    hasErrors() {
+        return this._hasErrors.value;
+    }
+    /**
+     * Updates both the state and original value for a given property,
+     * keeping the field in a clean (not dirty) state.
+     * Supports all field types including PropertyAwareArray.
+     *
+     * @param key The property key to update
+     * @param value The new value to set
+     */
+    syncValue(key, value) {
+        var _a, _b;
+        const driver = this.getPersistenceDriver((_a = this.options) === null || _a === void 0 ? void 0 : _a.persistSuffix);
+        const currentVal = this.state[key];
+        if (currentVal instanceof PropertyAwareArray) {
+            const arr = this.state[key];
+            const originalArr = this.original[key];
+            arr.length = 0;
+            originalArr.length = 0;
+            if (Array.isArray(value)) {
+                value.forEach((item) => {
+                    arr.push(cloneDeep(item));
+                    originalArr.push(cloneDeep(item));
+                });
+            }
+            else if (value instanceof PropertyAwareArray) {
+                ;
+                [...value].forEach((item) => {
+                    arr.push(cloneDeep(item));
+                    originalArr.push(cloneDeep(item));
+                });
+            }
+            this.dirty[key] = Array.from(arr).map(() => false);
+            this.touched[key] = true;
+        }
+        else if (Array.isArray(currentVal)) {
+            this.state[key] = cloneDeep(value);
+            this.original[key] = cloneDeep(value);
+            this.dirty[key] = false;
+            this.touched[key] = true;
+        }
+        else if (typeof currentVal === 'object' && currentVal !== null) {
+            this.state[key] = cloneDeep(value);
+            this.original[key] = cloneDeep(value);
+            this.dirty[key] = false;
+            this.touched[key] = true;
+        }
+        else {
+            this.state[key] = value;
+            this.original[key] = value;
+            this.dirty[key] = false;
+            this.touched[key] = true;
+        }
+        if (((_b = this.options) === null || _b === void 0 ? void 0 : _b.persist) !== false) {
+            this.persistState(driver);
+        }
+        this.validateField(key);
+        this.validateDependentFields(key);
+    }
+}