ngx-axis-appforge 0.0.0

package/core/share/set-data-source-handler/set-data-source-handler.html

@@ -0,0 +1,23 @@
+<form nz-form [formGroup]="fg">
+    <nz-form-item>
+        <nz-form-label [nzSpan]="6" nzRequired>
+            数据源名
+        </nz-form-label>
+        <nz-form-control nzSpan="18">
+            <axis-fun-field formControlName="name" [noListen]="noListen()">
+                <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+    <nz-form-item>
+        <nz-form-label [nzSpan]="6">
+            数据
+        </nz-form-label>
+        <nz-form-control nzSpan="18">
+            <axis-fun-field formControlName="data" [noListen]="noListen()">
+                <ng-container [axisDynamic]="{component:'axis-components/input-json',inuse:true}" [standalone]="true"
+                    ngModel [ngModelOptions]="{standalone:true}"></ng-container>
+            </axis-fun-field>
+        </nz-form-control>
+    </nz-form-item>
+</form>

package/core/share/set-data-source-handler/set-data-source-handler.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component, forwardRef, inject } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { FunField } from '../fun-field/fun-field';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { DynamicDirective } from '../../directives/dynamic';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { FunFieldValueBase } from '../../base/funfield-value-base';
+import { FormValidators } from '../../utils/form-validators';
+import { FunFieldOptions } from '../../models/fun-field.options';
+import { InputTrigger } from '../input-trigger/input-trigger';
+
+@Component({
+  selector: 'axis-set-data-source-handler',
+  imports: [NzFormModule, ReactiveFormsModule, FunField, FormsModule, NzSelectModule, DynamicDirective, NzInputModule, NzSwitchModule, NzRadioModule],
+  templateUrl: './set-data-source-handler.html',
+  styleUrl: './set-data-source-handler.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => SetDataSourceHandler),
+      multi: true
+    }
+  ]
+})
+export class SetDataSourceHandler extends FunFieldValueBase {
+  readonly noListen = inject(InputTrigger).noListen;
+  override fg: UntypedFormGroup = this.fb.group({
+    name: [undefined, FormValidators.requiredFun],
+    data: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    name: {
+      defaultValue: null,
+    },
+    data: {
+      defaultValue: null,
+    },
+  };
+}

package/core/share/simple-menu/simple-menu.html

@@ -0,0 +1,5 @@
+<nz-dropdown-menu #menu="nzDropdownMenu">
+    <ul nz-menu>
+        <axis-common-menu [baseMenu]="this"></axis-common-menu>
+    </ul>
+</nz-dropdown-menu>

package/core/share/simple-menu/simple-menu.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { CommonMenu } from '../common-menu/common-menu';
+import { BaseMenu } from '../../base/base-menu';
+
+@Component({
+  selector: 'axis-design-simple-menu',
+  imports: [NzDropDownModule, NzIconModule, CommonMenu],
+  templateUrl: './simple-menu.html',
+  styleUrl: './simple-menu.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SimpleMenu extends BaseMenu {
+
+
+}

package/core/share/tokens.ts

@@ -0,0 +1,29 @@
+import { InjectionToken } from "@angular/core";
+import { ScopeInfo } from "../models/design-build";
+import { OptionsNode } from "../models/options-node";
+import { ComponentsLoader } from "../utils/components-loader";
+import { BehaviorSubject, Observable } from "rxjs";
+import { EventHandlerDesc, EventHandlerDescGroup } from "../models/event-desc";
+import { RegisteFormControlOptions, RegisteValueAccessOptions } from "../models/form-registe.options";
+import { DesignConfig } from "../models/design-config";
+import { ExampleGroup } from "../models/examples";
+import { EventsHandler } from "../models/event-handler";
+
+export const AXIS_DESIGN_OPTIONS_NODE_FOR_MENU = new InjectionToken<{ current: OptionsNode, parent?: OptionsNode }>('axis.design.optionsNodeForMenu');
+export const AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN = new InjectionToken<(scopeId?: string) => BehaviorSubject<ScopeInfo[]>>('axis.design.scopeInfosGetter');
+export const AXIS_DESIGN_COMPONENT_INFO_FOR_SETTING_TOKEN = new InjectionToken<{ component: string, componentName: string, nodes: OptionsNode[], eventHandlerDescs: { [event: string]: EventHandlerDesc } }[]>('axis.design.optionsNodesForSetting');
+export const AXIS_DESIGN_ALL_PERMISSIONS_TOKEN = new InjectionToken<{ [permission: string]: string }>('axis.design.allPermissions');
+export const AXIS_DESIGN_CHOOSE_COMPONENT_FUNC_TOKEN = new InjectionToken<(...tags: string[]) => Observable<{ options?: any, config?: DesignConfig }>>('axis.design.chooseComponentFunc');
+export const AXIS_DESIGN_CMPLIBS_TOKEN = new InjectionToken<{ libName: string, lib: ExampleGroup[] }[]>('axis.design.cmplibs');
+
+export const AXIS_COMPONENTS_TOKEN = new InjectionToken<{ [module: string]: () => Promise<any> }>('axis.components');
+export const AXIS_COMPONENTS_LOADER_TOKEN = new InjectionToken<ComponentsLoader>('axis.componentsLoader');
+export const AXIS_SCRIPTS_TOKEN = new InjectionToken<{ [name: string]: string }>('axis.scripts');
+export const AXIS_EVENT_HANDLERS_TOKEN = new InjectionToken<EventsHandler[]>('axis.eventHandlers');
+export const AXIS_EVENT_HANDLER_DESCS_TOKEN = new InjectionToken<EventHandlerDescGroup[]>('axis.eventHandlersDescs');
+export const AXIS_INJECT_DATA_TOKEN = new InjectionToken<any>('axis.injectData');
+export const AXIS_INJECT_FUNC_TOKEN = new InjectionToken<{ [name: string]: Function }>('axis.injectFunc');
+export const AXIS_CURRENT_USER_PERMISSIONS_TOKEN = new InjectionToken<string[]>('axis.currentUserPermissions');
+
+export const AXIS_FORM_REGISTE_CONTROL_TOKEN = new InjectionToken<(opt: RegisteFormControlOptions) => void>('axis.form.registeControl');
+export const AXIS_FORMITEM_REGISTE_VALUE_ACCESS_TOKEN = new InjectionToken<(opt: RegisteValueAccessOptions) => void>('axis.form-item.registeValueAccess');

package/core/share/value-design-setting/value-design-setting.html

@@ -0,0 +1,48 @@
+<form [formGroup]="fg()" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="值组件设置">
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    初始值
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="initValue" [exclude]="exclude()" [scopeId]="scopeId()">
+                        <ng-container [axisDynamic]="{component:'axis-components/input-json',inuse:true}"
+                            [standalone]="true" ngModel [ngModelOptions]="{standalone:true}"></ng-container>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    初始事件
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-switch formControlName="emitInitEvent"></nz-switch>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    禁用
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="disabled" [exclude]="exclude()" [scopeId]="scopeId()">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    只读
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="readonly" [exclude]="exclude()" [scopeId]="scopeId()">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        @if (showLine()) {
+        <div></div>
+        }
+    </nz-collapse>
+</form>

package/core/share/value-design-setting/value-design-setting.ts

@@ -0,0 +1,54 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, input, signal } from '@angular/core';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { FunField } from '../fun-field/fun-field';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { DynamicDirective } from '../../directives/dynamic';
+import { FormValidators } from '../../utils/form-validators';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { FunFieldOptions } from '../../models/fun-field.options';
+
+@Component({
+  selector: 'axis-value-design-setting',
+  imports: [NzCollapseModule, NzFormModule, FunField, NzSwitchModule, FormsModule, NzInputModule, ReactiveFormsModule, DynamicDirective, NzSelectModule],
+  templateUrl: './value-design-setting.html',
+  styleUrl: './value-design-setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ValueDesignSetting implements AfterViewInit {
+
+  constructor(private element: ElementRef) { }
+
+  readonly showLine = signal(false);
+  readonly scopeId = input<string>();
+  readonly exclude = input<string[]>([]);
+
+  fg = input.required<UntypedFormGroup>();
+
+  ngAfterViewInit(): void {
+    if (this.element.nativeElement.nextElementSibling) {
+      this.showLine.set(true);
+    }
+  }
+}
+
+export const valueFbConfig = {
+  initValue: [],
+  emitInitEvent: [true, FormValidators.required],
+  disabled: [undefined, [FormValidators.requiredFun]],
+  readonly: [undefined, [FormValidators.requiredFun]],
+};
+
+export const valueFunField: FunFieldOptions = {
+  initValue: {
+    defaultValue: undefined
+  },
+  disabled: {
+    defaultValue: false
+  },
+  readonly: {
+    defaultValue: false
+  }
+}

package/core/utils/code-name.utils.ts

@@ -0,0 +1,19 @@
+export function codeName(code?: string, name?: string): string {
+    if (code && name) {
+        return `[${code}]${name}`
+    }
+    if (code) {
+        return `[${code}]`
+    }
+    return name || "";
+}
+
+export function nameCode(name?: string, code?: string): string {
+    if (code && name) {
+        return `${name}[${code}]`
+    }
+    if (code) {
+        return `[${code}]`
+    }
+    return name || "";
+}

package/core/utils/components-loader.ts

@@ -0,0 +1,29 @@
+import { inject, Injectable } from "@angular/core";
+import { AXIS_COMPONENTS_TOKEN } from "../share/tokens";
+
+@Injectable()
+export class ComponentsLoader {
+
+    private readonly components = inject(AXIS_COMPONENTS_TOKEN);
+    private readonly loadedMap = new Map<string, any>();
+    private readonly loadingMap = new Map<string, Promise<any>>();
+
+    loadComponent(component: string): Promise<any> {
+        if (this.loadedMap.has(component)) {
+            return Promise.resolve(this.loadedMap.get(component)!);
+        }
+        if (this.loadingMap.has(component)) {
+            return this.loadingMap.get(component)!;
+        }
+        if (!this.components[component]) {
+            return Promise.reject(`component ${component} not found`)
+        }
+        this.loadingMap.set(component, this.components[component]().then(module => {
+            const m = module[Object.keys(module)[0]];
+            this.loadedMap.set(component, m);
+            this.loadingMap.delete(component);
+            return m;
+        }));
+        return this.loadingMap.get(component)!;
+    }
+}

package/core/utils/declaration.utils.ts

@@ -0,0 +1,38 @@
+// 生成变量的类型声明
+export function generateDeclarations(args: any): string {
+    return Object.entries(args).map(([name, value]) =>
+        `declare const ${name}: ${convertToTsType(value)};`
+    ).join('\n');
+}
+
+// 将 JavaScript 值转换为 TypeScript 类型表达式
+function convertToTsType(value: any): string {
+    if (value === null) return 'null';
+    if (value === undefined) return 'undefined';
+
+    const type = typeof value;
+
+    if (type === 'string') return 'string';
+    if (type === 'number') return 'number';
+    if (type === 'boolean') return 'boolean';
+    if (type === 'function') return 'Function';
+
+    if (Array.isArray(value)) {
+        if (value.length > 0) {
+            return `Array<${convertToTsType(value[0])}>`;
+        }
+        return 'any[]';
+    }
+
+    if (type === 'object') {
+        const props = Object.entries(value)
+            .map(([key, val]) =>
+                `${key}: ${convertToTsType(val)};`
+            )
+            .join('\n  ');
+
+        return `{\n  ${props}\n}`;
+    }
+
+    return 'any';
+}

package/core/utils/dynamic.util.ts

@@ -0,0 +1,57 @@
+
+export interface DynamicFnOptions {
+    fnBody?: string;
+    args?: any[] | object;
+}
+
+const notDefinedRegDefault = /^(.*) is not defined$/;
+const notDefinedRegIOS = /^Can't find variable: (.*)$/;
+export function fn(fnBody: string, argsObj: any, ignoreUndefined = false, printError = true) {
+    let argsName: string[] = [];
+    let args: any[] = [];
+    if (argsObj) {
+        argsName = Object.keys(argsObj);
+        args = argsName.map(n => argsObj[n]);
+    }
+    while (true) {
+        try {
+            const fun = new Function(...argsName, fnBody);
+            if (fun && fun instanceof Function) {
+                return fun(...args);
+            } else if (printError) {
+                _consoleError(fnBody, args, argsName);
+            }
+        } catch (e) {
+            if (ignoreUndefined && e instanceof ReferenceError && (notDefinedRegDefault.test(e.message) || notDefinedRegIOS.test(e.message))) {
+                const defaultMatch = notDefinedRegDefault.exec(e.message);
+                const iosMatch = notDefinedRegIOS.exec(e.message);
+                if (defaultMatch) {
+                    argsName.push(defaultMatch[1]);
+                    continue;
+                } else if (iosMatch && iosMatch[1]) {
+                    argsName.push(iosMatch[1]);
+                    continue;
+                }
+            }
+            if (printError) {
+                _consoleError(fnBody, args, argsName, e as Error);
+            }
+        }
+        return null;
+    }
+
+}
+
+function _consoleError(fnBody: string, args: any[], argsName: string[], e?: Error) {
+    let ds: any[] = [];
+    args.forEach((e, i) => {
+        ds[i] = { name: argsName[i], value: e };
+    });
+    console.groupCollapsed(`%c 函数${e ? '编译' : '执行'}失败`, "color:red");
+    if (e) {
+        console.error("失败原因", e.message);
+    }
+    console.log("函数体", fnBody);
+    console.log("数据源", ds);
+    console.groupEnd();
+}

package/core/utils/form-validators.ts

@@ -0,0 +1,160 @@
+import { AbstractControl, UntypedFormControl, ValidationErrors, ValidatorFn, Validators } from "@angular/forms";
+import { NzSafeAny } from "ng-zorro-antd/core/types";
+
+export type MyErrorsOptions = { 'zh-cn': string } & Record<string, NzSafeAny>;
+export type MyValidationErrors = Record<string, MyErrorsOptions>;
+
+export class FormValidators extends Validators {
+
+  static override required(control: AbstractControl): ValidationErrors | null {
+    let error = Validators.required(control);
+    if (error) {
+      return { required: { 'zh-cn': "必填项" } };
+    }
+    return null;
+  }
+
+  static requiredFun(control: AbstractControl): ValidationErrors | null {
+    let error = FormValidators.required(control);
+    if (!error) {
+      error = FormValidators.required(new UntypedFormControl(control.value?.funMode ? control.value?.fnValue.fn : control.value?.originValue));
+    }
+    if (error) {
+      return { required: { 'zh-cn': "必填项" } };
+    }
+    return null;
+  }
+
+
+  static equal(comparedValue: string | (() => string | null)) {
+    return (control: AbstractControl): ValidationErrors | null => {
+      if (!control.value) {
+        return null;
+      }
+      let cv;
+      if (typeof (comparedValue) != "function") {
+        cv = comparedValue;
+      } else {
+        try { cv = comparedValue(); } catch { }
+      }
+      return control.value != cv ? { notEqual: true } : null;
+    }
+  }
+
+  static override minLength(minLength: number): ValidatorFn {
+    const validator = Validators.minLength(minLength);
+    return (control: AbstractControl): MyValidationErrors | null => {
+      if (validator(control) === null) {
+        return null;
+      }
+      return { minlength: { 'zh-cn': `最小长度为 ${minLength}` } };
+    };
+  }
+
+  static override maxLength(maxLength: number): ValidatorFn {
+    const validator = Validators.maxLength(maxLength);
+    return (control: AbstractControl): MyValidationErrors | null => {
+      if (validator(control) === null) {
+        return null;
+      }
+      return { minlength: { 'zh-cn': `最大长度为 ${maxLength}` } };
+    };
+  }
+
+  static override min(minvalue: number): ValidatorFn {
+    const validator = Validators.min(minvalue);
+    return (control: AbstractControl): MyValidationErrors | null => {
+      if (validator(control) === null) {
+        return null;
+      }
+      return { minlength: { 'zh-cn': `最小值为 ${minvalue}` } };
+    };
+  }
+
+  static override max(maxvalue: number): ValidatorFn {
+    const validator = Validators.max(maxvalue);
+    return (control: AbstractControl): MyValidationErrors | null => {
+      if (validator(control) === null) {
+        return null;
+      }
+      return { minlength: { 'zh-cn': `最大值为 ${maxvalue}` } };
+    };
+  }
+
+  static override pattern(pattern: string | RegExp): ValidatorFn {
+    const validator = Validators.pattern(pattern);
+    return (control: AbstractControl): MyValidationErrors | null => {
+      if (validator(control) === null) {
+        return null;
+      }
+      return { pattern: { 'zh-cn': "输入不正确" } };
+    };
+  }
+
+  // static uniqueConstraints(constraintsGroup: string, keyField: string | undefined, editTable: EditTableComponent): ValidatorFn {
+  //   const fields = editTable.fields.filter(f => f.validators?.some(v => v.startsWith(`uniqueConstraints:${constraintsGroup}`)));
+  //   const errText = fields.map(f => `[${f.title}]`).join("加") + "须唯一";
+  //   return (control: AbstractControl): MyValidationErrors | null => {
+  //     if (!control.parent) {
+  //       return null;
+  //     }
+  //     control.parent.updateValueAndValidity();
+  //     const rowValue = control.parent?.value;
+  //     const otherCtrl = Array.from(editTable.ctrlMap.values())
+  //       .filter(c => c != control.parent);
+  //     if (otherCtrl
+  //       .some(c => fields.every(f => {
+  //         let value1 = c.value[f.field];
+  //         let value2 = rowValue[f.field];
+  //         if (keyField) {
+  //           value1 = value1?.[keyField];
+  //           value2 = value2?.[keyField];
+  //         }
+  //         return value1 == value2;
+  //       }))) {
+  //       return { uniqueConstraints: { 'zh-cn': errText } };
+  //     }
+  //     return null;
+  //   };
+  // }
+
+  // static datasource(dataSourceName: string, host?: EditTableComponent | FormComponent, triggeEvent?: TriggeEventOptions): AsyncValidatorFn {
+  //   return (control: AbstractControl): Promise<MyValidationErrors | null> | Observable<MyValidationErrors | null> => {
+  //     return host?.triggeEvent("controlValid", { value: control.value }, triggeEvent)
+  //       .pipe(mergeMap(_ => host!.dataSource!.getDataSource(dataSourceName).pipe(take(1), map(error => error ? ({ datasource: { 'zh-cn': error } }) : null)))) || of(null);
+  //   };
+  // }
+
+  // static _mapValid(valid: string, host?: EditTableComponent | FormComponent): ValidatorFn | null {
+  //   const validParams = valid.split(":");
+  //   switch (validParams[0]) {
+  //     case "required":
+  //       return FormValidators.required;
+  //     case "minlength":
+  //       return FormValidators.minLength(+validParams[1]);
+  //     case "min":
+  //       return FormValidators.min(+validParams[1]);
+  //     case "max":
+  //       return FormValidators.max(+validParams[1]);
+  //     case "pattern":
+  //       return FormValidators.pattern(validParams[1]);
+  //     case "uniqueConstraints":
+  //       return FormValidators.uniqueConstraints(validParams[1], validParams[2], host as EditTableComponent);
+  //   }
+  //   return null;
+  // }
+
+  // static _mapAsyncValid(valid: string, host?: EditTableComponent | FormComponent, triggeEvent?: TriggeEventOptions): AsyncValidatorFn | null {
+  //   const validParams = valid.split(":");
+  //   switch (validParams[0]) {
+  //     case "datasource":
+  //       return FormValidators.datasource(validParams[1], host, triggeEvent);
+  //   }
+  //   return null;
+  // }
+
+
+  // static mapValidators(validators: string[], host?: EditTableComponent | FormComponent, triggeEvent?: TriggeEventOptions): [ValidatorFn[], AsyncValidatorFn[]] {
+  //   return [validators?.map(v => FormValidators._mapValid(v, host)).filter(e => e).map(e => e as ValidatorFn) || [], validators?.map(v => FormValidators._mapAsyncValid(v, host, triggeEvent)).filter(e => e).map(e => e as AsyncValidatorFn) || []];
+  // }
+}

package/core/utils/form.util.ts

@@ -0,0 +1,25 @@
+import { AbstractControl, FormArray, FormGroup } from "@angular/forms";
+
+export function updateAndValidAll(form: FormGroup | FormArray | AbstractControl, options: { markAsDirty?: boolean } = { markAsDirty: true }) {
+    let isValid = true;
+    if (form instanceof FormGroup) {
+        Object.values(form.controls).forEach(control => {
+            if (!updateAndValidAll(control, options)) {
+                isValid = false;
+            }
+        });
+    } else if (form instanceof FormArray) {
+        form.controls.forEach(control => {
+            if (!updateAndValidAll(control, options)) {
+                isValid = false;
+            }
+        })
+    } else {
+        if (options.markAsDirty ?? true) {
+            form.markAsDirty();
+        }
+        form.updateValueAndValidity({ onlySelf: true });
+        isValid = form.valid;
+    }
+    return isValid;
+}

package/core/utils/http.utils.ts

@@ -0,0 +1,8 @@
+import { HttpClient, HttpRequest } from "@angular/common/http";
+import { ApiOptions } from "../models/api.options";
+import { map, catchError, of, Observable } from "rxjs";
+
+export function sendApi(opt: ApiOptions, http: HttpClient): Observable<any> {
+    return http.request(new HttpRequest(opt.method?.toUpperCase() as any || "GET", opt.url, opt.body))
+        .pipe(map((h: any) => h.body), catchError(e => of(undefined)));
+}