@ticatec/uniface-flexi-module 0.2.0 → 0.2.2

package/dist/criteria-panel/lib/FlexiCriteriaField.js

@@ -14,7 +14,7 @@ export default class FlexiCriteriaField {
         this.#set = set;
         this.visible = schema.visible != false;
         this.size = schema.size;
-        this.label = schema.label.startsWith("@") ? utils.getVariable(schema.label) : schema.label;
+        this.label = utils.getScopeVariable(schema.label);
         if (schema.events) {
             for (let key in schema.events) {
                 let eventHandler = schema.events[key];
@@ -23,7 +23,10 @@ export default class FlexiCriteriaField {
         }
         const cellField = CriteriaComponentBuilder.getInstance().buildField(schema, (name) => this.#set.getDictionary(name));
         this.component = cellField.component;
-        this.#props = cellField.props;
+        this.#props = {};
+        for (let key of cellField.props) {
+            this.#props[key] = utils.getScopeVariable(cellField.props[key]);
+        }
         this.keys = cellField.keyFields;
     }
     get props() {

package/dist/flexi-datatable/FlexiDataTable.js

@@ -33,7 +33,7 @@ export default class FlexiDataTable {
             const render = colSchema.render ? this[colSchema.render] : null;
             const compareFunction = colSchema.compareFunction ? this[colSchema.compareFunction] : null;
             const column = {
-                text: colSchema.text.startsWith("@") ? utils.getVariable(colSchema.text) : colSchema.text,
+                text: colSchema.text.startsWith("@") ? utils.getScopeVariable(colSchema.text) : colSchema.text,
                 field: colSchema.field,
                 frozen: colSchema.frozen,
                 align: colSchema.align,

package/dist/flexi-form/flexi_field/FlexiField.js

@@ -24,7 +24,7 @@ export default class FlexiField {
     constructor(parent, data, mode, schema) {
         this.#parent = parent;
         this.mode = mode;
-        this.label = schema.label.startsWith("@") ? utils.getVariable(schema.label) : schema.label;
+        this.label = schema.label.startsWith("@") ? utils.getScopeVariable(schema.label) : schema.label;
         this.variant = schema.variant;
         this.isReadonly = schema.readonly == true;
         this.disabled = schema.disabled == true;
@@ -40,7 +40,10 @@ export default class FlexiField {
         this.#validation = this.parseValidationRule(schema.validation);
         const cellField = ComponentBuilder.getInstance().buildField(schema, (name) => card.form.getDictionary(name));
         this.component = cellField.component;
-        this.#props = cellField.props;
+        this.#props = {};
+        for (let key of cellField.props) {
+            this.#props[key] = utils.getScopeVariable(cellField.props[key]);
+        }
         const result = utils.getParentAndKey(data, schema.keyField);
         this.keyField = result?.key;
         this.data = result?.parent;

package/dist/flexi-form/flexi_form/FlexiForm.d.ts

@@ -54,6 +54,18 @@ export default abstract class FlexiForm {
     private _elements;
     private _style;
     protected constructor(data: any);
+    /**
+     * 创建响应式数据代理，只通知数据变化，不触发UI刷新
+     * @param data 原始数据对象
+     * @private
+     */
+    private createReactiveData;
+    /**
+     * 检查对象是否已经被代理
+     * @param obj
+     * @private
+     */
+    private isProxy;
     /**
      * 构造表单
      */
@@ -91,6 +103,18 @@ export default abstract class FlexiForm {
      * @param value
      */
     setInvalidateHandler(value?: FormInvalidateHandler): void;
+    /**
+     * 设置数据变化处理器（可选，用于监听字段级数据变化，不触发UI刷新）
+     * @param handler 回调函数，参数为(字段名, 新值, 旧值)
+     */
+    setDataChangeHandler(handler?: (fieldName: string, newValue: any, oldValue: any) => void): void;
+    /**
+     * 通知字段数据变化（由FlexiField内部调用）
+     * @param fieldName 字段名
+     * @param newValue 新值
+     * @param oldValue 旧值
+     */
+    notifyDataChange(fieldName: string, newValue: any, oldValue: any): void;
     /**
      * 刷新表单
      */

package/dist/flexi-form/flexi_form/FlexiForm.js

@@ -8,15 +8,72 @@ export default class FlexiForm {
     _props = {};
     _arrangement = "vertical";
     #data;
+    #rawData;
     _label$style = '';
     _variant;
     _elements;
     #invalidateHandler;
+    #dataChangeHandler;
     #actions;
     #dictionaries;
     _style;
     constructor(data) {
-        this.#data = data;
+        this.#rawData = data;
+        this.#data = this.createReactiveData(data);
+    }
+    /**
+     * 创建响应式数据代理，只通知数据变化，不触发UI刷新
+     * @param data 原始数据对象
+     * @private
+     */
+    createReactiveData(data) {
+        const self = this;
+        const createProxy = (target, path = '') => {
+            return new Proxy(target, {
+                set(obj, prop, value) {
+                    if (typeof prop === 'symbol') {
+                        obj[prop] = value;
+                        return true;
+                    }
+                    const oldValue = obj[prop];
+                    // 如果新值是对象，也包装成Proxy
+                    if (value !== null && typeof value === 'object' && !self.isProxy(value)) {
+                        value = createProxy(value, path ? `${path}.${prop}` : prop);
+                    }
+                    obj[prop] = value;
+                    // 只在值真正改变时通知（不触发invalidate）
+                    if (oldValue !== value) {
+                        const fieldPath = path ? `${path}.${prop}` : prop;
+                        self.notifyDataChange(fieldPath, value, oldValue);
+                    }
+                    return true;
+                },
+                get(obj, prop) {
+                    const value = obj[prop];
+                    // 如果是对象或数组，也包装成Proxy以支持嵌套属性监听
+                    if (value !== null && typeof value === 'object' && !self.isProxy(value)) {
+                        const fieldPath = path ? `${path}.${String(prop)}` : String(prop);
+                        return createProxy(value, fieldPath);
+                    }
+                    return value;
+                }
+            });
+        };
+        return createProxy(data);
+    }
+    /**
+     * 检查对象是否已经被代理
+     * @param obj
+     * @private
+     */
+    isProxy(obj) {
+        // 简单的检查：尝试给对象设置一个特殊属性，如果是Proxy会触发set trap
+        try {
+            return obj && obj.__isProxy === true;
+        }
+        catch {
+            return false;
+        }
     }
     /**
      * 构造表单
@@ -70,6 +127,22 @@ export default class FlexiForm {
     setInvalidateHandler(value) {
         this.#invalidateHandler = value;
     }
+    /**
+     * 设置数据变化处理器（可选，用于监听字段级数据变化，不触发UI刷新）
+     * @param handler 回调函数，参数为(字段名, 新值, 旧值)
+     */
+    setDataChangeHandler(handler) {
+        this.#dataChangeHandler = handler;
+    }
+    /**
+     * 通知字段数据变化（由FlexiField内部调用）
+     * @param fieldName 字段名
+     * @param newValue 新值
+     * @param oldValue 旧值
+     */
+    notifyDataChange(fieldName, newValue, oldValue) {
+        this.#dataChangeHandler?.(fieldName, newValue, oldValue);
+    }
     /**
      * 刷新表单
      */

package/dist/utils.d.ts

@@ -7,6 +7,6 @@ declare const _default: {
     };
     formatText: (s: string, obj: any) => string;
     propsFilter: (attrs: any, excludes?: Array<string>) => any;
-    getVariable: (key: string) => any;
+    getScopeVariable: (key: string) => any;
 };
 export default _default;

package/dist/utils.js

@@ -5,14 +5,20 @@ const propsFilter = (attrs, excludes = []) => {
     }
     return obj;
 };
-const getVariable = (key) => {
-    let attrs = key.split('.');
-    if (attrs.length == 2) {
-        // @ts-ignore
-        return window[attrs[0]]?.[attrs[1]] ?? `Missing value ${key}`;
+const getScopeVariable = (key) => {
+    if (key.startsWith("@")) {
+        let attrs = key.substring(1).split('.');
+        if (attrs.length == 2) {
+            let varName = attrs[0];
+            // @ts-ignore
+            return globalThis[varName]?.[attrs[1]] ?? `Missing value:${key}`;
+        }
+        else {
+            return `Missing key:${key}`;
+        }
     }
     else {
-        return `Invalid key: ${key}`;
+        return key;
     }
 };
 const copyAttrs = (src, attrs) => {
@@ -62,4 +68,4 @@ const formatText = (s, obj) => {
         return obj.hasOwnProperty(key) ? String(obj[key]) : `{{${key}}}`;
     });
 };
-export default { copyAttrs, extractExpression, getParentAndKey, formatText, propsFilter, getVariable };
+export default { copyAttrs, extractExpression, getParentAndKey, formatText, propsFilter, getScopeVariable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-flexi-module",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "A flexible form framework for Svelte applications with dynamic field types, criteria panels, and modular components",
   "keywords": [
     "svelte",