ngx-axis-appforge 0.0.2 → 0.0.3

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

@@ -1,43 +0,0 @@
-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

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

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

@@ -1,8 +0,0 @@
-.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

@@ -1,140 +0,0 @@
-<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

@@ -1,158 +0,0 @@
-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

@@ -1,39 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-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

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

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

@@ -1,16 +0,0 @@
-@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

@@ -1,12 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

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

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

@@ -1,29 +0,0 @@
-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

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