@lcap/nasl 3.4.0-alpha.1 → 3.4.0-beta.1

package/src/concepts/ValidationRule__.ts

@@ -11,589 +11,580 @@ import BindAttribute from './BindAttribute__';
 // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
 //================================================================================
 import { EventPayload, Params } from '../common/EventEmitter';
-import { concept, excludedInJSON, property } from '../decorators';
+import { concept, excludedInJSON, property, className } from '../decorators';
 
 import * as utils from '../utils';
 import BaseNode from '../common/BaseNode';
-import classMap from '../common/classMap';
 import Argument from './Argument__';
 import LogicItem from './LogicItem__';
 
 /**
  * 验证规则
  */
+@className
 @concept('验证规则')
+// @ts-ignore
 export class ValidationRule extends LogicItem {
-    /**
-     * 产品概念
-     */
-    @property()
-    concept: 'ValidationRule' = 'ValidationRule';
-
-    /**
-     * 验证规则标题
-     */
-    @property()
-    label: string = '验证规则';
-
-    /**
-     * calleeNamespace
-     */
-    @property()
-    calleeNamespace: string = undefined;
-
-    /**
-     * calleeName
-     */
-    @property()
-    calleeName: string = undefined;
-
-    /**
-     * 实际参数
-     */
-    @property('Argument')
-    arguments: Array<Argument> = [];
-
-    /**
-     * 错误信息
-     */
-    @property('LogicItem')
-    errorMessage: LogicItem = undefined;
-
-    /**
-     * 验证对象
-     */
-    @property('LogicItem')
-    target: LogicItem = undefined;
-
-    /**
-     * 是否启用服务端验证
-     */
-    @property()
-    enableServerValidation: boolean = true;
-
-
-
-    /**
-     * @param source 需要合并的部分参数
-     */
-    constructor(source?: Partial<ValidationRule>) {
-        source = Object.assign({}, ValidationRule.getDefaultOptions(), source);
-        super(source);
-        super.subConstructor(source);
+  /** 类名 */
+  static readonly ConceptName = 'ValidationRule';
+
+  /**
+   * 产品概念
+   */
+  // @ts-ignore
+  readonly concept!: 'ValidationRule';
+
+  /**
+   * 验证规则标题
+   */
+  @property()
+  label: string = '验证规则';
+
+  /**
+   * calleeNamespace
+   */
+  @property()
+  // @ts-ignore
+  calleeNamespace!: string;
+
+  /**
+   * calleeName
+   */
+  @property()
+  // @ts-ignore
+  calleeName!: string;
+
+  /**
+   * 实际参数
+   */
+  @property({
+    objectRef: 'Argument',
+    isArray: true,
+  })
+  arguments: Array<Argument> = [];
+
+  /**
+   * 错误信息
+   */
+  @property({
+    objectRef: 'LogicItem',
+  })
+  // @ts-ignore
+  errorMessage!: LogicItem;
+
+  /**
+   * 验证对象
+   */
+  @property({
+    objectRef: 'LogicItem',
+  })
+  // @ts-ignore
+  target!: LogicItem;
+
+  /**
+   * 是否启用服务端验证
+   */
+  @property()
+  enableServerValidation: boolean = true;
+
+  /**
+   * @param source 需要合并的部分参数
+   */
+  constructor(source?: Partial<ValidationRule>) {
+    source = Object.assign({}, ValidationRule.getDefaultOptions(), source);
+    super(source);
+    super.subConstructor(source);
+  }
+
+  static from(source: any, parentNode?: any, parentKey?: string): ValidationRule {
+    return super.from(source, parentNode, parentKey) as ValidationRule;
+  }
+
+  /**
+   * 设置错误信息
+   */
+  setErrorMessage(errorMessage: LogicItem) {
+    errorMessage._delete();
+    const relationOptions = { parentNode: this, parentKey: 'errorMessage' };
+    Object.assign(errorMessage, relationOptions);
+    const object = {
+      errorMessage,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置验证对象
+   */
+  setTarget(target: LogicItem) {
+    target._delete();
+    const relationOptions = { parentNode: this, parentKey: 'target' };
+    Object.assign(target, relationOptions);
+    const object = {
+      target,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 设置是否启用服务端验证
+   */
+  setEnableServerValidation(enableServerValidation: boolean) {
+    const object = {
+      enableServerValidation,
+    };
+    this.update({
+      ...object,
+    });
+  }
+
+  /**
+   * 插入实际参数
+   * @internal
+   * @param argumentOptions 实际参数参数
+   */
+  _insertArgumentAt(argumentOptions: Partial<Argument>, index: number): Argument;
+
+  /**
+   * 插入实际参数
+   * @internal
+   * @param argument 已有的实际参数实例
+   */
+  _insertArgumentAt(argument: Argument, index: number): Argument;
+
+  _insertArgumentAt(options: Partial<Argument> | Argument, index: number) {
+    const argumentOptions: any = {};
+    const relationOptions = { parentNode: this, parentKey: 'arguments' };
+    let argument: Argument;
+    if (options instanceof Argument) {
+      options.ensureDelete(); // 同一实例不支持多处存在
+      argument = options;
+      Object.assign(argument, relationOptions);
+    } else {
+      argument = Argument.from(
+        {
+          ...argumentOptions,
+          ...options,
+        },
+        this,
+        'arguments',
+      );
     }
-    getClassName() {
-        return 'ValidationRule';
+    this.arguments.splice(index, 0, argument);
+    return argument;
+  }
+
+  /**
+   * 插入实际参数
+   * @param argumentOptions 实际参数参数
+   */
+  insertArgumentAt(argumentOptions: Partial<Argument>, index: number): Argument;
+
+  /**
+   * 插入实际参数
+   * @param argument 已有的实际参数实例
+   */
+  insertArgumentAt(argument: Argument, index: number): Argument;
+
+  insertArgumentAt(options: Partial<Argument> | Argument, index: number) {
+    const node = this._insertArgumentAt(options as any, index);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'arguments',
+    });
+    return node;
+  }
+
+  /**
+   * 添加实际参数
+   * @internal
+   * @param argumentOptions 实际参数参数
+   */
+  _addArgument(argumentOptions: Partial<Argument>): Argument;
+
+  /**
+   * 添加实际参数
+   * @internal
+   * @param argument 已有的实际参数实例
+   */
+  _addArgument(argument: Argument): Argument;
+
+  _addArgument(options?: Partial<Argument> | Argument) {
+    const index = this.arguments.length;
+    return this._insertArgumentAt(options as any, index);
+  }
+
+  /**
+   * 添加实际参数
+   * @param argumentOptions 实际参数参数
+   */
+  addArgument(argumentOptions: Partial<Argument>): Argument;
+
+  /**
+   * 添加实际参数
+   * @param argument 已有的实际参数实例
+   */
+  addArgument(argument: Argument): Argument;
+
+  addArgument(options?: Partial<Argument> | Argument) {
+    const node = this._addArgument(options as any);
+    const index = this.arguments.indexOf(node);
+    node.create({
+      index,
+      parentNode: this,
+      parentKey: 'arguments',
+    });
+    return node;
+  }
+
+  /**
+   * 删除实际参数
+   * @param argument 已有的实际参数实例
+   */
+  removeArgumentInArguments(argument: Argument): void;
+
+  removeArgumentInArguments(options: Argument) {
+    let argument: Argument = options;
+    return argument.delete();
+  }
+
+  /**
+   * 删除逻辑项
+   * @param name 逻辑项名称
+   */
+  removeErrorMessage(name: string): void;
+
+  /**
+   * 删除逻辑项
+   * @param errorMessage 已有的逻辑项实例
+   */
+  removeErrorMessage(errorMessage: LogicItem): void;
+
+  removeErrorMessage(options: string | LogicItem) {
+    let errorMessage: LogicItem;
+    if (typeof options === 'string') {
+      errorMessage = this.errorMessage;
+      if (!errorMessage) {
+        throw new Error('找不到逻辑项 ' + options);
+      }
+    } else {
+      errorMessage = options;
     }
-
-    static from(source: any, parentNode?: any, parentKey?: string): ValidationRule {
-        return super.from(source, parentNode, parentKey) as ValidationRule;
+    return errorMessage.delete();
+  }
+
+  /**
+   * 删除逻辑项
+   * @param name 逻辑项名称
+   */
+  removeTarget(name: string): void;
+
+  /**
+   * 删除逻辑项
+   * @param target 已有的逻辑项实例
+   */
+  removeTarget(target: LogicItem): void;
+
+  removeTarget(options: string | LogicItem) {
+    let target: LogicItem;
+    if (typeof options === 'string') {
+      target = this.target;
+      if (!target) {
+        throw new Error('找不到逻辑项 ' + options);
+      }
+    } else {
+      target = options;
     }
-
-
-    /**
-     * 设置错误信息
-     */
-    setErrorMessage(errorMessage: LogicItem) {
-        errorMessage._delete();
-        const relationOptions = { parentNode: this, parentKey: 'errorMessage' };
-        Object.assign(errorMessage, relationOptions);
-        const object = {
-            errorMessage,
-        };
-        this.update({
-            ...object,
-        });
+    return target.delete();
+  }
+
+  __removeLogicItem(logicItem: LogicItem) {
+    const parentKey = logicItem.parentKey;
+    const params: Params = {
+      parentNode: this,
+      parentKey,
+      index: -1,
+      object: null,
+      oldObject: logicItem,
+    };
+    if (parentKey) {
+      params.parentKey = parentKey;
+      if (Array.isArray((this as any)[parentKey])) {
+        const index = (this as any)[parentKey].indexOf(logicItem);
+        ~index && (this as any)[parentKey].splice(index, 1);
+        params.index = index;
+      } else if ((this as any)[parentKey] === logicItem) {
+        params.index = 0;
+        (this as any)[parentKey] = undefined;
+      }
     }
-
-    /**
-     * 设置验证对象
-     */
-    setTarget(target: LogicItem) {
-        target._delete();
-        const relationOptions = { parentNode: this, parentKey: 'target' };
-        Object.assign(target, relationOptions);
-        const object = {
-            target,
-        };
-        this.update({
-            ...object,
-        });
+    return params;
+  }
+
+  //================================================================================
+  // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
+  // 自动生成的代码已结束。下面可以手动编写。
+  //================================================================================
+
+  public static getDefaultOptions() {
+    return {
+      target: {
+        concept: 'Identifier',
+        name: '',
+      },
+    };
+  }
+
+  toInViewMethod() {
+    let code = '{';
+    // 兼容就得简写模式
+    if (this.calleeName && this.calleeName.includes('(')) {
+      return `'${this.calleeName}'`;
+    } else if (this.calleeName === 'unique') {
+      code += `validate: 'excluded',`;
+    } else if (this.calleeName === 'confirmed') {
+      code += `validate: 'is',`;
+    } else {
+      code += `validate: '${this.calleeName}',`;
     }
-
-    /**
-     * 设置是否启用服务端验证
-     */
-    setEnableServerValidation(enableServerValidation: boolean) {
-        const object = {
-            enableServerValidation,
-        };
-        this.update({
-            ...object,
-        });
+    if (this.arguments.length) {
+      let args = '[';
+      this.arguments?.forEach((arg, index) => {
+        args += arg?.toJS();
+        if (index !== this.arguments?.length - 1) args += ', ';
+      });
+      args += ']';
+      code += `args: ${args} ,`;
     }
-
-
-
-
-
-    /**
-    * 插入实际参数
-    * @internal
-    * @param argumentOptions 实际参数参数
-    */
-    _insertArgumentAt(argumentOptions: Partial<Argument>, index: number): Argument;
-
-    /**
-    * 插入实际参数
-    * @internal
-    * @param argument 已有的实际参数实例
-    */
-    _insertArgumentAt(argument: Argument, index: number): Argument;
-
-    _insertArgumentAt(options: Partial<Argument> | Argument, index: number) {
-        const argumentOptions: any = {};
-        const relationOptions = { parentNode: this, parentKey: 'arguments' };
-        let argument: Argument;
-        if (options instanceof Argument) {
-            options.ensureDelete(); // 同一实例不支持多处存在
-            argument = options;
-            Object.assign(argument, relationOptions);
-        } else {
-            argument = Argument.from({
-                ...argumentOptions,
-                ...options,
-            }, this, 'arguments');
-        }
-        this.arguments.splice(index, 0, argument);
-        return argument;
+    if (this.errorMessage) {
+      code += `message: ${this.errorMessage?.toJS()},`;
+    } else {
+      let defaultError = (defaultErrorMessage as Record<string, string>)[this.calleeName];
+      let index = 0;
+      while (defaultError && defaultError.indexOf(`{args}`) !== -1) {
+        defaultError = defaultError.replace(`{args}`, `\${${this.arguments[index]?.toJS()}}`);
+        index++;
+      }
+      const itemTitle = (this?.parentNode as any)?.parentNode?.bindAttrs?.find(
+        (item: BindAttribute) => item.name === 'label',
+      );
+      let labelName;
+      if (itemTitle?.expression?.toJS()) {
+        labelName = `\${${itemTitle?.expression?.toJS()}}`;
+      } else {
+        labelName = itemTitle?.value || '表单项';
+      }
+      defaultError = defaultError && defaultError.replace(`{label}`, labelName);
+      code += `message: \`${defaultError}\`,`;
     }
-
-
-
-    /**
-     * 插入实际参数
-     * @param argumentOptions 实际参数参数
-     */
-    insertArgumentAt(argumentOptions: Partial<Argument>, index: number): Argument;
-
-    /**
-     * 插入实际参数
-     * @param argument 已有的实际参数实例
-     */
-    insertArgumentAt(argument: Argument, index: number): Argument;
-
-    insertArgumentAt(options: Partial<Argument> | Argument, index: number) {
-        const node = this._insertArgumentAt(options as any, index);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'arguments',
-        });
-        return node;
+    code += `trigger: 'input+blur'`;
+    if (['required', 'filled', 'notEmpty'].includes(this.calleeName)) {
+      code += ',required: true';
     }
-
-
-
-    /**
-     * 添加实际参数
-     * @internal
-     * @param argumentOptions 实际参数参数
-     */
-    _addArgument(argumentOptions: Partial<Argument>): Argument;
-
-    /**
-     * 添加实际参数
-     * @internal
-     * @param argument 已有的实际参数实例
-     */
-    _addArgument(argument: Argument): Argument;
-
-    _addArgument(options?: Partial<Argument> | Argument) {
-        const index = this.arguments.length;
-        return this._insertArgumentAt(options as any, index);
+    code += '}';
+    return code;
+  }
+
+  toVue(options?: ElementToVueOptions) {
+    let code = '{';
+    // 兼容就得简写模式
+    if (this.calleeName && this.calleeName.includes('(')) {
+      return `'${this.calleeName}'`;
+    } else if (this.calleeName === 'unique') {
+      code += `validate: 'excluded',`;
+    } else if (this.calleeName === 'confirmed') {
+      code += `validate: 'is',`;
+    } else {
+      code += `validate: '${this.calleeName}',`;
     }
-
-
-
-    /**
-     * 添加实际参数
-     * @param argumentOptions 实际参数参数
-     */
-    addArgument(argumentOptions: Partial<Argument>): Argument;
-
-    /**
-     * 添加实际参数
-     * @param argument 已有的实际参数实例
-     */
-    addArgument(argument: Argument): Argument;
-
-    addArgument(options?: Partial<Argument> | Argument) {
-        const node = this._addArgument(options as any);
-        const index = this.arguments.indexOf(node);
-        node.create({
-            index,
-            parentNode: this,
-            parentKey: 'arguments',
-        });
-        return node;
+    if (this.arguments.length) {
+      let args = '[';
+      this.arguments?.forEach((arg, index) => {
+        args += arg?.toVue(options);
+        if (index !== this.arguments?.length - 1) args += ', ';
+      });
+      args += ']';
+      code += `args: ${args} ,`;
     }
-
-
-
-
-    /**
-     * 删除实际参数
-     * @param argument 已有的实际参数实例
-     */
-    removeArgumentInArguments(argument: Argument): void;
-
-    removeArgumentInArguments(options: Argument) {
-        let argument: Argument = options;
-        return argument.delete();
-    }
-
-
-
-    /**
-    * 删除逻辑项
-    * @param name 逻辑项名称
-    */
-    removeErrorMessage(name: string): void;
-
-    /**
-     * 删除逻辑项
-     * @param errorMessage 已有的逻辑项实例
-     */
-    removeErrorMessage(errorMessage: LogicItem): void;
-
-    removeErrorMessage(options: string | LogicItem) {
-        let errorMessage: LogicItem;
-        if (typeof options === 'string') {
-            errorMessage = this.errorMessage;
-            if (!errorMessage) {
-                throw new Error('找不到逻辑项 ' + options);
-            }
-        } else {
-            errorMessage = options;
-        }
-        return errorMessage.delete();
-    }
-
-
-
-    /**
-    * 删除逻辑项
-    * @param name 逻辑项名称
-    */
-    removeTarget(name: string): void;
-
-    /**
-     * 删除逻辑项
-     * @param target 已有的逻辑项实例
-     */
-    removeTarget(target: LogicItem): void;
-
-    removeTarget(options: string | LogicItem) {
-        let target: LogicItem;
-        if (typeof options === 'string') {
-            target = this.target;
-            if (!target) {
-                throw new Error('找不到逻辑项 ' + options);
-            }
-        } else {
-            target = options;
-        }
-        return target.delete();
-    }
-
-    __removeLogicItem(logicItem: LogicItem) {
-        const parentKey = logicItem.parentKey;
-        const params: Params = {
-            parentNode: this,
-            parentKey,
-            index: -1,
-            object: null,
-            oldObject: logicItem,
-        };
-        if (parentKey) {
-            params.parentKey = parentKey;
-            if (Array.isArray((this as any)[parentKey])) {
-                const index = (this as any)[parentKey].indexOf(logicItem);
-                ~index && (this as any)[parentKey].splice(index, 1);
-                params.index = index;
-            } else if ((this as any)[parentKey] === logicItem) {
-                params.index = 0;
-                (this as any)[parentKey] = undefined;
-            }
-        }
-        return params;
-    }
-
-    //================================================================================
-    // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
-    // 自动生成的代码已结束。下面可以手动编写。
-    //================================================================================
-
-    public static getDefaultOptions() {
-        return {
-            target: {
-                concept: 'Identifier',
-                name: '',
-            },
-        };
-    }
-
-    toInViewMethod() {
-        let code = '{';
-        // 兼容就得简写模式
-        if (this.calleeName && this.calleeName.includes('(')) {
-            return `'${this.calleeName}'`;
-        } else if (this.calleeName === 'unique') {
-            code += `validate: 'excluded',`;
-        } else if (this.calleeName === 'confirmed') {
-            code += `validate: 'is',`;
-        } else {
-            code += `validate: '${this.calleeName}',`;
-        }
-        if (this.arguments.length) {
-            let args = '[';
-            this.arguments?.forEach((arg, index) => {
-                args += arg?.toJS();
-                if (index !== this.arguments?.length - 1)
-                    args += ', ';
-            });
-            args += ']';
-            code += `args: ${args} ,`;
-        }
-        if (this.errorMessage) {
-            code += `message: ${this.errorMessage?.toJS()},`;
-        } else {
-            let defaultError = (defaultErrorMessage as Record<string, string>)[this.calleeName];
-            let index = 0;
-            while (defaultError && defaultError.indexOf(`{args}`) !== -1) {
-                defaultError = defaultError.replace(`{args}`, `\${${this.arguments[index]?.toJS()}}`);
-                index++;
-            }
-            const itemTitle = (this?.parentNode as any)?.parentNode?.bindAttrs?.find((item: BindAttribute) => item.name === 'label');
-            let labelName;
-            if (itemTitle?.expression?.toJS()) {
-                labelName = `\${${itemTitle?.expression?.toJS()}}`;
-            } else {
-                labelName = itemTitle?.value || '表单项';
-            }
-            defaultError = defaultError && defaultError.replace(`{label}`, labelName);
-            code += `message: \`${defaultError}\`,`;
-        }
-        code += `trigger: 'input+blur'`;
-        if (['required', 'filled', 'notEmpty'].includes(this.calleeName)) {
-            code += ',required: true';
-        }
-        code += '}';
-        return code;
-    }
-
-    toVue(options?: ElementToVueOptions) {
-        let code = '{';
-        // 兼容就得简写模式
-        if (this.calleeName && this.calleeName.includes('(')) {
-            return `'${this.calleeName}'`;
-        } else if (this.calleeName === 'unique') {
-            code += `validate: 'excluded',`;
-        } else if (this.calleeName === 'confirmed') {
-            code += `validate: 'is',`;
-        } else {
-            code += `validate: '${this.calleeName}',`;
-        }
-        if (this.arguments.length) {
-            let args = '[';
-            this.arguments?.forEach((arg, index) => {
-                args += arg?.toVue(options);
-                if (index !== this.arguments?.length - 1)
-                    args += ', ';
-            });
-            args += ']';
-            code += `args: ${args} ,`;
-        }
-        if (this.errorMessage) {
-            code += `message: ${this.errorMessage?.toVue(options)},`;
-        } else {
-            let defaultError = (defaultErrorMessage as Record<string, string>)[this.calleeName];
-            let index = 0;
-            while (defaultError && defaultError.indexOf(`{args}`) !== -1) {
-                defaultError = defaultError.replace(`{args}`, `\${${this.arguments[index]?.toVue(options)}}`);
-                index++;
-            }
-            const itemTitle = (this?.parentNode as any)?.parentNode?.bindAttrs?.find((item: BindAttribute) => item.name === 'label');
-            let labelName;
-            if (itemTitle?.expression?.toVue()) {
-                labelName = `\${${itemTitle?.expression?.toVue()}}`;
-            } else {
-                labelName = itemTitle?.value || '表单项';
-            }
-            defaultError = defaultError && defaultError.replace(`{label}`, labelName);
-            code += `message: \`${defaultError}\`,`;
-        }
-        code += `trigger: 'input+blur'`;
-        if (['required', 'filled', 'notEmpty'].includes(this.calleeName)) {
-            code += ',required: true';
-        }
-        code += '}';
-        return code;
+    if (this.errorMessage) {
+      code += `message: ${this.errorMessage?.toVue(options)},`;
+    } else {
+      let defaultError = (defaultErrorMessage as Record<string, string>)[this.calleeName];
+      let index = 0;
+      while (defaultError && defaultError.indexOf(`{args}`) !== -1) {
+        defaultError = defaultError.replace(`{args}`, `\${${this.arguments[index]?.toVue(options)}}`);
+        index++;
+      }
+      const itemTitle = (this?.parentNode as any)?.parentNode?.bindAttrs?.find(
+        (item: BindAttribute) => item.name === 'label',
+      );
+      let labelName;
+      if (itemTitle?.expression?.toVue()) {
+        labelName = `\${${itemTitle?.expression?.toVue()}}`;
+      } else {
+        labelName = itemTitle?.value || '表单项';
+      }
+      defaultError = defaultError && defaultError.replace(`{label}`, labelName);
+      code += `message: \`${defaultError}\`,`;
     }
-
-    toUI(state?: TranslatorState): string {
-        let code = this.calleeName;
-        if (this.arguments?.length) {
-            code += '(';
-            this.arguments?.forEach((arg, index) => {
-                code += arg?.toUI(shiftState(state, code));
-                if (index !== this.arguments?.length - 1)
-                    code += ', ';
-            });
-            code += ')';
-        }
-        return code;
+    code += `trigger: 'input+blur'`;
+    if (['required', 'filled', 'notEmpty'].includes(this.calleeName)) {
+      code += ',required: true';
     }
-
-    toJS(state?: TranslatorState): string {
-        let code = '{';
-        code += `validate: '${this.calleeName}',`;
-        if (this.arguments.length) {
-            let args = '[';
-            this.arguments?.forEach((arg, index) => {
-                args += arg?.toJS(shiftState(state, code));
-                if (index !== this.arguments?.length - 1)
-                    args += ', ';
-            });
-            args += ']';
-            code += `args: ${args},`;
-        }
-        code += `trigger: 'input+blur',`;
-        code += `message: ${this.errorMessage?.toJS(shiftState(state, code))}`;
-        code += '}';
-        return code;
+    code += '}';
+    return code;
+  }
+
+  toUI(state?: TranslatorState): string {
+    let code = this.calleeName;
+    if (this.arguments?.length) {
+      code += '(';
+      this.arguments?.forEach((arg, index) => {
+        code += arg?.toUI(shiftState(state, code));
+        if (index !== this.arguments?.length - 1) code += ', ';
+      });
+      code += ')';
     }
-
-    @withSourceMap()
-    toEmbeddedTS(state?: TranslatorState): string {
-        let code = '';
-
-        const {
-            calleeName,
-            target,
-            calleeKey,
-            arguments: args,
-            errorMessage,
-            view,
-        } = this;
-
-        if (calleeName) {
-            // 调用逻辑时绑定的验证器
-            if (this.getAncestor('CallLogic') || !view) {
-                code += target.toEmbeddedTS(shiftState(state, code));
-                code += ';\n';
-            }
-
-            if (args.length > 0) {
-                const validationInFunction = getValidationInFunction(calleeName);
-                code += calleeKey;
-                code += '(';
-                args.forEach((arg, index) => {
-                    const param = validationInFunction?.params?.[index];
-
-                    // 当前参数缺失 keyword，且原始形参中有名称，则补充参数
-                    if (!arg.keyword && param.name) {
-                        arg.keyword = param.name;
-                    }
-
-                    // 如果找到函数而且有参数，就用参数的必填非必填
-                    if (validationInFunction && param) {
-                        code += arg.toEmbeddedTS(shiftState(state, code), param.required, false);
-                    }
-                    // 如果没有就默认不必填
-                    else {
-                        code += arg.toEmbeddedTS(shiftState(state, code), false, false);
-                    }
-
-                    if (index !== args.length - 1) {
-                        code += ', ';
-                    }
-                });
-                code += ');';
-            }
-
-            if (errorMessage) {
-                code += 'nasl.validation.errorMessage(';
-                code += errorMessage.toEmbeddedTS(shiftState(state, code));
-                code += ')';
-            }
-        } else {
-            code += '__ValidationRule__';
-        }
-        return code;
+    return code;
+  }
+
+  toJS(state?: TranslatorState): string {
+    let code = '{';
+    code += `validate: '${this.calleeName}',`;
+    if (this.arguments.length) {
+      let args = '[';
+      this.arguments?.forEach((arg, index) => {
+        args += arg?.toJS(shiftState(state, code));
+        if (index !== this.arguments?.length - 1) args += ', ';
+      });
+      args += ']';
+      code += `args: ${args},`;
     }
-
-    toBrief(): string {
-        return this.arguments.map((a) => a.toBrief()).join('<br />');
-    }
-
-    get calleeKey(): string {
-        return `${this.calleeNamespace}.${this.calleeName}`;
-    }
-
-    _setCallee(func: Function) {
-        this.calleeNamespace = func.getNamespace();
-        this.calleeName = func.name;
-        this.arguments = [];
-        func.params.forEach((param) => {
-            this._addArgument(undefined);
+    code += `trigger: 'input+blur',`;
+    code += `message: ${this.errorMessage?.toJS(shiftState(state, code))}`;
+    code += '}';
+    return code;
+  }
+
+  @withSourceMap()
+  toEmbeddedTS(state?: TranslatorState): string {
+    let code = '';
+
+    const { calleeName, target, calleeKey, arguments: args, errorMessage, view } = this;
+
+    if (calleeName) {
+      // 调用逻辑时绑定的验证器
+      if (this.getAncestor('CallLogic') || !view) {
+        code += target.toEmbeddedTS(shiftState(state, code));
+        code += ';\n';
+      }
+
+      if (args.length > 0) {
+        const validationInFunction = getValidationInFunction(calleeName);
+        code += calleeKey;
+        code += '(';
+        args.forEach((arg, index) => {
+          const param = validationInFunction?.params?.[index];
+
+          // 当前参数缺失 keyword，且原始形参中有名称，则补充参数
+          if (!arg.keyword && param.name) {
+            arg.keyword = param.name;
+          }
+
+          // 如果找到函数而且有参数，就用参数的必填非必填
+          if (validationInFunction && param) {
+            code += arg.toEmbeddedTS(shiftState(state, code), param.required, false);
+          }
+          // 如果没有就默认不必填
+          else {
+            code += arg.toEmbeddedTS(shiftState(state, code), false, false);
+          }
+
+          if (index !== args.length - 1) {
+            code += ', ';
+          }
         });
+        code += ');';
+      }
+
+      if (errorMessage) {
+        code += 'nasl.validation.errorMessage(';
+        code += errorMessage.toEmbeddedTS(shiftState(state, code));
+        code += ')';
+      }
+    } else {
+      code += '__ValidationRule__';
     }
-
-    setCallee(func: Function) {
-        const calleeNamespace = func.getNamespace();
-        const calleeName = func.name;
-        const params = func.params.map((param) => {
-            const relationOptions = { parentNode: this, parentKey: 'arguments' };
-            const argument = Argument.from({
-                keyword: param.name,
-            }, this);
-            Object.assign(argument, relationOptions);
-            return argument;
-        });
-        if (this.app) {
-            this.app.emit('collect:start', {
-                actionMsg: `切换调用逻辑`,
-            });
-            const parentNode: any = this.parentNode;
-            this.update({
-                calleeNamespace,
-                calleeName,
-                arguments: params,
-                folded: false,
-            });
-            if (parentNode.concept === 'MemberExpression') {
-                const topNode = parentNode.firstMemberExpressionNode();
-                topNode.replaceNode(this);
-            }
-            this.app.emit('collect:end');
-        } else {
-            this.update({
-                calleeNamespace,
-                calleeName,
-                arguments: params,
-                folded: false,
-            });
-        }
+    return code;
+  }
+
+  toBrief(): string {
+    return this.arguments.map((a) => a.toBrief()).join('<br />');
+  }
+
+  get calleeKey(): string {
+    return `${this.calleeNamespace}.${this.calleeName}`;
+  }
+
+  _setCallee(func: Function) {
+    this.calleeNamespace = func.getNamespace();
+    this.calleeName = func.name;
+    this.arguments = [];
+    func.params.forEach((param) => {
+      this._addArgument(undefined);
+    });
+  }
+
+  setCallee(func: Function) {
+    const calleeNamespace = func.getNamespace();
+    const calleeName = func.name;
+    const params = func.params.map((param) => {
+      const relationOptions = { parentNode: this, parentKey: 'arguments' };
+      const argument = Argument.from(
+        {
+          keyword: param.name,
+        },
+        this,
+      );
+      Object.assign(argument, relationOptions);
+      return argument;
+    });
+    if (this.app) {
+      this.app.emit('collect:start', {
+        actionMsg: `切换调用逻辑`,
+      });
+      const parentNode: any = this.parentNode;
+      this.update({
+        calleeNamespace,
+        calleeName,
+        arguments: params,
+        folded: false,
+      });
+      if (parentNode.concept === 'MemberExpression') {
+        const topNode = parentNode.firstMemberExpressionNode();
+        topNode.replaceNode(this);
+      }
+      this.app.emit('collect:end');
+    } else {
+      this.update({
+        calleeNamespace,
+        calleeName,
+        arguments: params,
+        folded: false,
+      });
     }
-    //================================================================================
-    // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
-    // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
-    //================================================================================
+  }
+  //================================================================================
+  // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
+  // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
+  //================================================================================
 }
 
-classMap.ValidationRule = ValidationRule;
 export default ValidationRule;
 //================================================================================
 // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑