ngx-axis-appforge 0.0.3 → 0.0.4

package/axis-components/form-item/design/config.ts

@@ -0,0 +1,43 @@
+import { NextInfo, DesignBuildResult, DesignBindElementsResult, DesignConfig, OptionsNode, nameCode, SimpleMenu } from "ngx-axis-appforge/core";
+import { Setting } from "./setting/setting";
+
+export const Config: DesignConfig = {
+
+    componentName: "表单项",
+    buildOptionsNodes(nextInfo: NextInfo): DesignBuildResult {
+        return {
+            treeNode: new OptionsNode({
+                parentId: nextInfo.parentId,
+                scopeId: nextInfo.scopeId,
+                name: nameCode("表单项", nextInfo.currentObject.name),
+                canSetting: true,
+                canDrag: true,
+                dragType: "component",
+                canDrop: true,
+                dropType: "component",
+                dropObj: nextInfo.currentObject,
+                defaultDropIndex: "child",
+                parentObj: nextInfo.parentObject,
+                indexOfParentObj: nextInfo.indexOfParent,
+                rootOptions: nextInfo.currentObject,
+                children: [],
+                settingType: Setting,
+                contextMenu: SimpleMenu,
+                icon: "form"
+            }),
+            next: [
+                {
+                    parentObject: nextInfo.currentObject,
+                    indexOfParent: "child",
+                    parentId: nextInfo.currentObject.id,
+                    scopeId: nextInfo.scopeId
+                }
+            ],
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element, dropElement: element.querySelector(".ant-form-item-control-input-content") as HTMLElement ?? element }
+        }
+    },
+};

package/axis-components/form-item/design/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "config.ts"
+    }
+}

package/axis-components/form-item/design/setting/input-validator/input-validator.css

@@ -0,0 +1,8 @@
+.validator-desc {
+    flex: 1;
+    font-size: 12px;
+    color: rgba(0, 0, 0, 0.45);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/axis-components/form-item/design/setting/input-validator/input-validator.html

@@ -0,0 +1,140 @@
+<nz-collapse [nzBordered]="false">
+    <ng-template #addButton>
+        <a nz-button nzType="link" style="float: right;" (click)="$event.stopPropagation();openWithCreate()">
+            <nz-icon nzType="plus"></nz-icon>
+            添加
+        </a>
+    </ng-template>
+    <nz-collapse-panel nzHeader="表单项验证" nzActive [nzExtra]="addButton">
+        @if (!value()?.length) {
+        <nz-empty nzNotFoundContent="暂无验证器"></nz-empty>
+        }@else{
+        <div nz-flex nzVertical nzGap="8px" style="padding: 6px;">
+            @for (item of value()??[]; track item;let i=$index) {
+            <div nz-flex nzGap="8px" nzAlign="center">
+                <div style="width: 64px;">
+                    @switch (item.type) {
+                    @case ("required") {
+                    <nz-tag nzColor="magenta">必填验证</nz-tag>
+                    }
+                    @case ("length") {
+                    <nz-tag nzColor="blue">长度验证</nz-tag>
+                    }
+                    @case ("value") {
+                    <nz-tag nzColor="purple">值验证</nz-tag>
+                    }
+                    @case ("regex") {
+                    <nz-tag nzColor="cyan">正则验证</nz-tag>
+                    }
+                    }
+                </div>
+                <div class="validator-desc">{{validatorDesc()?.[i]}}</div>
+                <div>
+                    <a nz-button nzType="link" nzSize="small" (click)="openWithUpdate(i)">
+                        <i nz-icon nzType="edit" nzTheme="outline"></i>
+                    </a>
+                    <a nz-button nzType="link" nzSize="small" nzDanger (click)="deleteValidator(i)">
+                        <i nz-icon nzType="delete" nzTheme="outline"></i>
+                    </a>
+                </div>
+            </div>
+            }
+        </div>
+        }
+    </nz-collapse-panel>
+    @if (showLine()) {
+    <div></div>
+    }
+</nz-collapse>
+
+<nz-modal [(nzVisible)]="showModal" nzTitle="验证器" nzWidth="450px" (nzOnCancel)="showModal.set(false)" (nzOnOk)="save()">
+    <ng-container *nzModalContent>
+        <form [formGroup]="fg" nz-form>
+            <nz-form-item>
+                <nz-form-label nzSpan="6" nzRequired>
+                    验证类型
+                </nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <nz-select formControlName="type">
+                        <nz-option nzValue="required" nzLabel="必填验证"></nz-option>
+                        <nz-option nzValue="length" nzLabel="长度验证"></nz-option>
+                        <nz-option nzValue="value" nzLabel="值验证"></nz-option>
+                        <nz-option nzValue="regex" nzLabel="正则验证"></nz-option>
+                    </nz-select>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="6" nzRequired>
+                    禁用
+                </nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <axis-fun-field formControlName="disabled">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @switch (fg.value.type) {
+            @case ("length") {
+            <nz-form-item>
+                <nz-form-label nzSpan="6">
+                    最小长度
+                </nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <axis-fun-field formControlName="minLength">
+                        <nz-input-number style="width: 100%" nzPlaceHolder="不限制" nzMin="0" ngModel
+                            [ngModelOptions]="{standalone:true}"></nz-input-number>
+                    </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="maxLength">
+                        <nz-input-number style="width: 100%" nzPlaceHolder="不限制" nzMin="0" ngModel
+                            [ngModelOptions]="{standalone:true}"></nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            @case ("value") {
+            <nz-form-item>
+                <nz-form-label nzSpan="6">
+                    最小值
+                </nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <axis-fun-field formControlName="minValue">
+                        <nz-input-number style="width: 100%" nzPlaceHolder="不限制" ngModel
+                            [ngModelOptions]="{standalone:true}"></nz-input-number>
+                    </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="maxValue">
+                        <nz-input-number style="width: 100%" nzPlaceHolder="不限制" ngModel
+                            [ngModelOptions]="{standalone:true}"></nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            @case ("regex") {
+            <nz-form-item>
+                <nz-form-label nzSpan="6">
+                    正则表达式
+                </nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <axis-fun-field formControlName="pattern">
+                        <input nz-input nzPlaceHolder="输入正则表达式" ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            }
+        </form>
+    </ng-container>
+</nz-modal>

package/axis-components/form-item/design/setting/input-validator/input-validator.ts

@@ -0,0 +1,158 @@
+import { ChangeDetectionStrategy, Component, computed, ElementRef, forwardRef, model, signal } from "@angular/core";
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, UntypedFormGroup } from "@angular/forms";
+import { copy, FormValidators, FunField, FunFieldBase, FunFieldOptions, updateAndValidAll } from "ngx-axis-appforge/core";
+import { NzGridModule } from "ng-zorro-antd/grid";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { NzListModule } from "ng-zorro-antd/list";
+import { NzSpaceModule } from "ng-zorro-antd/space";
+import { NzTagModule } from "ng-zorro-antd/tag";
+import { NzEmptyModule } from "ng-zorro-antd/empty";
+import { NzButtonModule } from "ng-zorro-antd/button";
+import { NzModalModule } from "ng-zorro-antd/modal";
+import { NzCollapseModule } from "ng-zorro-antd/collapse";
+import { NzFormModule } from "ng-zorro-antd/form";
+import { NzSelectModule } from "ng-zorro-antd/select";
+import { NzInputModule } from "ng-zorro-antd/input";
+import { NzSwitchModule } from "ng-zorro-antd/switch";
+import { CommonModule } from "@angular/common";
+import { NzFlexModule } from "ng-zorro-antd/flex";
+import { NzInputNumberModule } from "ng-zorro-antd/input-number";
+
+@Component({
+    selector: 'axis-design-form-item-setting-input-validator',
+    imports: [NzListModule, NzTagModule, NzSpaceModule, NzGridModule, NzIconModule, NzEmptyModule, NzButtonModule, NzModalModule, FormsModule, NzCollapseModule, NzFormModule, ReactiveFormsModule, FunField, NzSelectModule, NzInputModule, NzSwitchModule, CommonModule, NzFlexModule, NzInputNumberModule],
+    templateUrl: './input-validator.html',
+    styleUrl: './input-validator.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => InputValidator),
+            multi: true
+        },
+    ]
+})
+export class InputValidator extends FunFieldBase implements ControlValueAccessor {
+
+    constructor(private element: ElementRef) {
+        super();
+    }
+
+    readonly value = model<any[]>();
+    readonly showLine = signal(false);
+    onChange: any;
+    editIndex = -1;
+    readonly showModal = model(false);
+    readonly validatorDesc = computed(() => this.buildValidatorsDesc());
+
+    override fg: UntypedFormGroup = this.fb.group({
+        type: ["required", FormValidators.required],
+        disabled: [undefined, FormValidators.requiredFun],
+        minLength: [],
+        maxLength: [],
+        minValue: [],
+        maxValue: [],
+        pattern: [],
+    });
+
+    protected override funFields: FunFieldOptions = {
+        disabled: {
+            defaultValue: false
+        },
+        minLength: {
+            defaultValue: null
+        },
+        maxLength: {
+            defaultValue: null
+        },
+        minValue: {
+            defaultValue: null
+        },
+        maxValue: {
+            defaultValue: null
+        },
+        pattern: {
+            defaultValue: ""
+        }
+    };
+
+    writeValue(v: any): void {
+        this.value.set(v);
+    }
+    registerOnChange(fn: any): void {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn: any): void { }
+
+    ngAfterViewInit(): void {
+        if (this.element.nativeElement.nextElementSibling) {
+            this.showLine.set(true);
+        }
+    }
+
+    private buildValidatorsDesc(): string[] | undefined {
+        return this.value()?.map(v => {
+            switch (v.type) {
+                case "required":
+                    return "此项必填";
+                case "length":
+                    return `长度范围:${this.wrapNumberField(v, "minLength")} ~ ${this.wrapNumberField(v, "maxLength")}`;
+                case "value":
+                    return `值范围:${this.wrapNumberField(v, "minValue")} ~ ${this.wrapNumberField(v, "maxValue")}`;
+                case "regex":
+                    return `表达式:${this.wrapFunField(v, "pattern")}`;
+                default:
+                    return "";
+            }
+        })
+    }
+
+    private wrapFunField(obj: any, field: string): any {
+        if (obj.hasOwnProperty(`$${field}`)) {
+            return "[动态值]";
+        }
+        return obj[field];
+    }
+
+    private wrapNumberField(obj: any, field: string): any {
+        const value = this.wrapFunField(obj, field);
+        if (typeof value != "number" && !value) {
+            return "[不限制]";
+        }
+        return value;
+    }
+
+    openWithCreate() {
+        this.editIndex = -1;
+        this.reset();
+        this.showModal.set(true);
+    }
+
+    openWithUpdate(index: number) {
+        this.editIndex = index;
+        this.reset(this.value()![this.editIndex]);
+        this.showModal.set(true);
+    }
+
+    save() {
+        if (updateAndValidAll(this.fg)) {
+            const nextValue = copy(this.value() ?? [], true);
+            const validator = this.recoverFunField(this.fg.value)
+            if (this.editIndex == -1) {
+                nextValue.push(validator);
+            } else {
+                nextValue[this.editIndex] = validator;
+            }
+            this.showModal.set(false);
+            this.value.set(nextValue);
+            this.onChange(this.value());
+        }
+    }
+
+    deleteValidator(index: number) {
+        this.value()!.splice(index, 1);
+        this.value.set([...this.value()!]);
+        this.onChange(this.value());
+    }
+
+}

package/axis-components/form-item/design/setting/setting.html

@@ -0,0 +1,39 @@
+<form [formGroup]="fg" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="基本设置" nzActive>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    表单项名
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="name">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    表单项标签
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="label">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </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="labelWidth">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <axis-design-form-item-setting-input-validator
+            formControlName="validators"></axis-design-form-item-setting-input-validator>
+        <axis-base-design-setting [fg]="fg"></axis-base-design-setting>
+    </nz-collapse>
+</form>

package/axis-components/form-item/design/setting/setting.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { BaseDesignSetting, baseFbConfig, baseFunField, FunFieldValueBase, FunFieldOptions, FormValidators, FunField } from 'ngx-axis-appforge/core';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { InputValidator } from "./input-validator/input-validator";
+
+@Component({
+  selector: 'axis-design-form-item-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, BaseDesignSetting, FunField, NzSwitchModule, NzInputModule, InputValidator],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    name: [],
+    label: [],
+    labelWidth: [undefined, FormValidators.requiredFun],
+    validators: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    name: {
+      defaultValue: "unknown",
+    },
+    label: {
+      defaultValue: "未命名",
+    },
+    labelWidth: {
+      defaultValue: "120px",
+    },
+  };
+
+}

package/axis-components/form-item/form-item.css

@@ -0,0 +1,4 @@
+:host {
+    display: block;
+    width: 100%;
+}

package/axis-components/form-item/form-item.html

@@ -0,0 +1,16 @@
+@if (options.label()) {
+<nz-form-item style="width: 100%;">
+    <nz-form-label [style.width]="options.labelWidth()" [nzRequired]="isRequired()">
+        {{options.label()}}
+    </nz-form-label>
+    <nz-form-control style="flex:1" [nzValidateStatus]="control">
+        <ng-container [axisDynamic]="options.child()" [(ngModel)]="value"
+            (ngModelChange)="onModelChange($event)"></ng-container>
+    </nz-form-control>
+</nz-form-item>
+}@else {
+<div>
+    <ng-container [axisDynamic]="options.child()" [(ngModel)]="value"
+        (ngModelChange)="onModelChange($event)"></ng-container>
+</div>
+}

package/axis-components/form-item/form-item.options.ts

@@ -0,0 +1,12 @@
+import { signal } from "@angular/core";
+import { BaseOptions } from "ngx-axis-appforge/core";
+
+export class FormItemOptions extends BaseOptions {
+
+    readonly name = "";
+    readonly label = signal("");
+    readonly labelWidth = signal("120px");
+    readonly validators = signal<any[]>([]);
+    readonly child = signal<any>(undefined);
+
+}

package/axis-components/form-item/form-item.ts

@@ -0,0 +1,128 @@
+import { ChangeDetectionStrategy, Component, computed, effect, inject, model, OnInit, signal } from '@angular/core';
+import { FormItemOptions } from './form-item.options';
+import { AXIS_FORM_REGISTE_CONTROL_TOKEN, AXIS_FORMITEM_REGISTE_VALUE_ACCESS_TOKEN, Base, DynamicDirective, FormValidators, RegisteValueAccessOptions } from 'ngx-axis-appforge/core';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { FormBuilder, FormsModule, ValidatorFn } from '@angular/forms';
+import { debounceTime, merge, NEVER } from 'rxjs';
+
+@Component({
+  selector: 'axis-form-item',
+  imports: [NzFormModule, DynamicDirective, FormsModule],
+  templateUrl: './form-item.html',
+  styleUrl: './form-item.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: AXIS_FORMITEM_REGISTE_VALUE_ACCESS_TOKEN,
+      useFactory: (formItem: FormItem) => {
+        return formItem.registeValueAccess.bind(formItem);
+      },
+      deps: [FormItem]
+    }
+  ]
+})
+export class FormItem extends Base<FormItemOptions> implements OnInit {
+
+  constructor() {
+    super();
+    if (this.getScope()) {
+      effect(() => {
+        this.control.setValidators(this.validatorSignal() ?? null);
+      });
+      effect(() => {
+        this.validatorSignal.set(this.buildSnapshotValidators());
+        this.unsubscribe(["validatorsChange"]);
+        this.addSubscribe(merge(...this.options.validators().map(v => this.getScope()!.dynamicOptions(v)?.obs ?? NEVER))
+          .pipe(debounceTime(50))
+          .subscribe(_ => {
+            this.validatorSignal.set(this.buildSnapshotValidators());
+          }), "validatorsChange");
+      });
+    }
+  }
+
+  protected override options: FormItemOptions = new FormItemOptions();
+  private readonly registe = inject(AXIS_FORM_REGISTE_CONTROL_TOKEN, { optional: true });
+  private readonly fb = inject(FormBuilder);
+  readonly control = this.fb.control([]);
+  readonly value = model<any>();
+  readonly validatorSignal = signal<ValidatorFn[]>([]);
+  readonly isRequired = computed(() => this.validatorSignal().includes(FormValidators.required));
+  private valueAccessValidFn?: ValidatorFn;
+
+  ngOnInit(): void {
+    if (this.options.name) {
+      this.control.registerOnChange((v: any) => {
+        this.value.set(v);
+      });
+      this.registe?.({
+        name: this.options.name,
+        control: this.control,
+      });
+    }
+  }
+
+  onModelChange(value: any) {
+    if (this.options.name) {
+      this.control.markAsDirty();
+      this.control.setValue(value);
+    }
+  }
+
+  private buildSnapshotValidators(): ValidatorFn[] {
+    return this.buildValidators(this.options.validators().map(v => this.getScope()!.snapshotOptions(v)));
+  }
+
+  private buildValidators(validators: any[]): ValidatorFn[] {
+    const output: ValidatorFn[] = [];
+    if (this.valueAccessValidFn) {
+      output.push(this.valueAccessValidFn);
+    }
+    for (const v of validators) {
+      if (v.disabled) {
+        continue;
+      }
+      switch (v.type) {
+        case "required":
+          output.push(FormValidators.required);
+          break;
+        case "length":
+          if (v.minLength || v.minLength == 0) {
+            output.push(FormValidators.minLength(v.minLength));
+          }
+          if (v.maxLength || v.maxLength == 0) {
+            output.push(FormValidators.maxLength(v.maxLength));
+          }
+          break;
+        case "value":
+          if (v.minValue || v.minValue == 0) {
+            output.push(FormValidators.min(v.minValue));
+          }
+          if (v.maxValue || v.maxValue == 0) {
+            output.push(FormValidators.max(v.maxValue));
+          }
+          break;
+        case "regex":
+          if (v.pattern) {
+            output.push(FormValidators.pattern(v.pattern));
+          }
+          break;
+      }
+    }
+    return output;
+  }
+
+  registeValueAccess(opt: RegisteValueAccessOptions) {
+    if (opt.initValue !== undefined) {
+      this.registe?.({
+        name: this.options.name,
+        initValue: opt.initValue
+      });
+    }
+    if (opt.validFn) {
+      this.valueAccessValidFn = (c) => opt.validFn!(c) ? null : { error: true };
+      this.validatorSignal.set(this.buildSnapshotValidators());
+    }
+  }
+
+}

package/axis-components/form-item/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "form-item.ts"
+  }
+}

package/axis-components/icon/design/config.ts

@@ -0,0 +1,29 @@
+import { NextInfo, DesignBuildResult, DesignBindElementsResult, DesignConfig, OptionsNode, nameCode, SimpleMenu } from "ngx-axis-appforge/core";
+import { Setting } from "./setting/setting";
+
+export const Config: DesignConfig = {
+    componentName: "图标",
+    buildOptionsNodes(nextInfo: NextInfo): DesignBuildResult {
+        return {
+            treeNode: new OptionsNode({
+                parentId: nextInfo.parentId,
+                scopeId: nextInfo.scopeId,
+                name: nameCode("图标", nextInfo.currentObject.icon),
+                canSetting: true,
+                canDrag: true,
+                dragType: "component",
+                parentObj: nextInfo.parentObject,
+                indexOfParentObj: nextInfo.indexOfParent,
+                rootOptions: nextInfo.currentObject,
+                settingType: Setting,
+                contextMenu: SimpleMenu,
+                icon: "fire"
+            })
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element }
+        }
+    },
+};

package/axis-components/icon/design/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "config.ts"
+    }
+}