ngx-axis-appforge 0.0.3 → 0.0.4

package/axis-components/examples/examples/textarea.ts

@@ -0,0 +1,15 @@
+import { ExampleDesc } from "ngx-axis-appforge/core";
+
+export const textareaExampleDesc: ExampleDesc = {
+    component: "文本输入框",
+    coverImg: "assets/axis-components-covers/textarea.svg",
+    span: 12,
+    height: 70,
+    example: {
+        builder: (componentIdBuilder) => ({
+            component: "axis-components/textarea",
+            id: componentIdBuilder?.("axis-components/textarea"),
+            inuse: true
+        }),
+    },
+};

package/axis-components/examples/examples/tree-selector.ts

@@ -0,0 +1,35 @@
+import { ExampleDesc } from "ngx-axis-appforge/core";
+
+export const treeSelectorExampleDesc: ExampleDesc = {
+    component: "树选择器",
+    coverImg: "assets/axis-components-covers/tree-selector.svg",
+    span: 12,
+    height: 70,
+    example: {
+        builder: (componentIdBuilder) => ({
+            component: "axis-components/tree-selector",
+            id: componentIdBuilder?.("axis-components/tree-selector"),
+            inuse: true,
+            menus: [],
+            data: [{
+                title: "节点1",
+                key: "1",
+                children: [
+                    {
+                        title: "节点1-1",
+                        key: "1-1"
+                    }, {
+                        title: "节点1-2",
+                        key: "1-2",
+                        children: [
+                            {
+                                title: "节点1-2-1",
+                                key: "1-2-1"
+                            }
+                        ]
+                    }
+                ]
+            }]
+        }),
+    }
+};

package/axis-components/examples/examples/upload.ts

@@ -0,0 +1,15 @@
+import { ExampleDesc } from "ngx-axis-appforge/core";
+
+export const uploadExampleDesc: ExampleDesc = {
+    component: "文件上传",
+    coverImg: "assets/axis-components-covers/upload.svg",
+    span: 12,
+    height: 70,
+    example: {
+        builder: (componentIdBuilder) => ({
+            component: "axis-components/upload",
+            id: componentIdBuilder?.("axis-components/upload"),
+            inuse: true,
+        }),
+    }
+};

package/axis-components/examples/examples.ts

@@ -0,0 +1,73 @@
+import { ExampleGroup } from "ngx-axis-appforge/core";
+import { buttonExampleDesc } from "./examples/button";
+import { formExampleDesc } from "./examples/form";
+import { formItemExampleDesc } from "./examples/form-item";
+import { flexExampleDesc } from "./examples/flex";
+import { inputExampleDesc } from "./examples/input";
+import { tableExampleDesc } from "./examples/table";
+import { designExampleDesc } from "./examples/design";
+import { textExampleDesc } from "./examples/text";
+import { singleSelectorExampleDesc } from "./examples/single-selector";
+import { treeSelectorExampleDesc } from "./examples/tree-selector";
+import { splitterExampleDesc } from "./examples/splitter";
+import { modalExampleDesc } from "./examples/modal";
+import { descExampleDesc } from "./examples/desc";
+import { badgeExampleDesc } from "./examples/badge";
+import { imageExampleDesc } from "./examples/image";
+import { iconExampleDesc } from "./examples/icon";
+import { inputIconExampleDesc } from "./examples/input-icon";
+import { inputNumberExampleDesc } from "./examples/input-number";
+import { uploadExampleDesc } from "./examples/upload";
+import { textareaExampleDesc } from "./examples/textarea";
+import { dynamicContainerExampleDesc } from "./examples/dynamic-container";
+import { scopeExampleDesc } from "./examples/scope";
+import { inputComponentExampleDesc } from "./examples/input-component";
+import { inputJsonExampleDesc } from "./examples/input-json";
+
+export const examples: ExampleGroup[] = [
+    {
+        groupName: "通用",
+        children: [
+            scopeExampleDesc,
+            buttonExampleDesc,
+            textExampleDesc,
+            modalExampleDesc,
+            iconExampleDesc,
+        ]
+    }, {
+        groupName: "布局",
+        children: [
+            flexExampleDesc,
+            splitterExampleDesc,
+        ]
+    }, {
+        groupName: "录入",
+        children: [
+            formExampleDesc,
+            formItemExampleDesc,
+            inputExampleDesc,
+            inputNumberExampleDesc,
+            singleSelectorExampleDesc,
+            treeSelectorExampleDesc,
+            inputIconExampleDesc,
+            textareaExampleDesc,
+            uploadExampleDesc,
+            inputComponentExampleDesc,
+            inputJsonExampleDesc,
+        ]
+    }, {
+        groupName: "数据",
+        children: [
+            tableExampleDesc,
+            descExampleDesc,
+            badgeExampleDesc,
+            imageExampleDesc,
+        ]
+    }, {
+        groupName: "其他",
+        children: [
+            designExampleDesc,
+            dynamicContainerExampleDesc,
+        ]
+    }
+];

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

@@ -0,0 +1,49 @@
+import { NextInfo, DesignBuildResult, DesignBindElementsResult, DesignConfig, OptionsNode, 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: "响应布局",
+                children: [],
+                canSetting: true,
+                canDrag: true,
+                dragType: "component",
+                canDrop: true,
+                childDirection: nextInfo.currentObject.direction,
+                dropType: "component",
+                dropObj: nextInfo.currentObject.children,
+                defaultDropIndex: nextInfo.currentObject.children.length,
+                parentObj: nextInfo.parentObject,
+                indexOfParentObj: nextInfo.indexOfParent,
+                rootOptions: nextInfo.currentObject,
+                settingType: Setting,
+                contextMenu: SimpleMenu,
+                icon: "pic-center"
+            }),
+            next: [
+                {
+                    parentObject: nextInfo.currentObject.children,
+                    parentId: nextInfo.currentObject.id,
+                    scopeId: nextInfo.scopeId,
+                }
+            ]
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: {
+                element: element,
+                dropElement: element.firstElementChild as HTMLElement
+            }
+        }
+    },
+};
+
+
+

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

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

package/axis-components/flex/design/setting/setting.html

@@ -0,0 +1,72 @@
+<form [formGroup]="fg" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="基本设置" nzActive>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    排列方向
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-radio-group formControlName="direction">
+                        <label nz-radio-button nzValue="horizontal">水平</label>
+                        <label nz-radio-button nzValue="vertical">垂直</label>
+                    </nz-radio-group>
+                </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="justify">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                            <nz-option nzValue="start" nzLabel="头部"></nz-option>
+                            <nz-option nzValue="center" nzLabel="居中"></nz-option>
+                            <nz-option nzValue="end" nzLabel="尾部"></nz-option>
+                            <nz-option nzValue="space-between" nzLabel="两端对齐"></nz-option>
+                            <nz-option nzValue="space-evenly" nzLabel="均等分"></nz-option>
+                        </nz-select>
+                    </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="align">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                            <nz-option nzValue="start" nzLabel="头部"></nz-option>
+                            <nz-option nzValue="center" nzLabel="居中"></nz-option>
+                            <nz-option nzValue="end" nzLabel="尾部"></nz-option>
+                        </nz-select>
+                    </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="wrap">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                            <nz-option nzValue="nowrap" nzLabel="不换行"></nz-option>
+                            <nz-option nzValue="wrap" nzLabel="换行"></nz-option>
+                            <nz-option nzValue="wrap-reverse" nzLabel="逆换行"></nz-option>
+                        </nz-select>
+                    </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="gap">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <axis-base-design-setting [fg]="fg"></axis-base-design-setting>
+    </nz-collapse>
+</form>

package/axis-components/flex/design/setting/setting.ts

@@ -0,0 +1,43 @@
+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 { NzInputModule } from 'ng-zorro-antd/input';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { BaseDesignSetting, baseFbConfig, baseFunField, FormValidators, FunField, FunFieldOptions, FunFieldValueBase } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-flex-setting',
+  imports: [FormsModule, ReactiveFormsModule, NzFormModule, NzCollapseModule, FunField, NzRadioModule, NzSelectModule, BaseDesignSetting, NzInputModule],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    direction: ["horizontal", FormValidators.required],
+    justify: [undefined, FormValidators.requiredFun],
+    align: [undefined, FormValidators.requiredFun],
+    wrap: [undefined, FormValidators.requiredFun],
+    gap: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    justify: {
+      defaultValue: "start",
+    },
+    align: {
+      defaultValue: "start",
+    },
+    wrap: {
+      defaultValue: "nowrap",
+    },
+    gap: {
+      defaultValue: "",
+    },
+  };
+}

package/axis-components/flex/flex.css

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

package/axis-components/flex/flex.html

@@ -0,0 +1,6 @@
+<div style="width: 100%;height:100%" nz-flex [nzVertical]="options.direction()=='vertical'" [nzJustify]="options.justify()"
+    [nzAlign]="options.align()" [nzGap]="options.gap()" [nzWrap]="options.wrap()">
+    @for (item of options.children(); track item.id;let i = $index) {
+    <ng-container [axisDynamic]="item"></ng-container>
+    }
+</div>

package/axis-components/flex/flex.options.ts

@@ -0,0 +1,12 @@
+import { signal } from "@angular/core";
+import { NzAlign, NzJustify, NzWrap } from "ng-zorro-antd/flex";
+import { BaseOptions } from "ngx-axis-appforge/core";
+
+export class FlexOptions extends BaseOptions {
+    readonly direction = signal<"horizontal" | "vertical">("horizontal");
+    readonly justify = signal<NzJustify>("start");
+    readonly align = signal<NzAlign>("normal");
+    readonly gap = signal<string>("0");
+    readonly wrap = signal<NzWrap>("nowrap");
+    readonly children = signal<any[]>([]);
+}

package/axis-components/flex/flex.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { FlexOptions } from './flex.options';
+import { DynamicDirective, Base } from 'ngx-axis-appforge/core';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+
+@Component({
+  selector: 'axis-flex',
+  imports: [DynamicDirective, NzFlexModule],
+  templateUrl: './flex.html',
+  styleUrl: './flex.css'
+})
+export class Flex extends Base<FlexOptions> {
+  
+  protected override options: FlexOptions = new FlexOptions();
+}

package/axis-components/flex/ng-package.json

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

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

@@ -0,0 +1,71 @@
+import { NextInfo, DesignBuildResult, DesignBindElementsResult, DesignConfig, OptionsNode, DataHandler, SimpleMenu } from "ngx-axis-appforge/core";
+import { Setting } from "./setting/setting";
+
+export const Config: DesignConfig = {
+
+    componentName: "表单",
+    eventHandlerDescs: {
+        validForm: {
+            name: "validForm",
+            title: "验证表单",
+            icon: "safety",
+            target: "component",
+            targetComponent: "axis-components/form",
+            events: [
+                {
+                    name: "formValid",
+                    title: "表单验证成功",
+                    ds: {
+                        formValue: {
+                            field: "示例数据"
+                        }
+                    }
+                }
+            ],
+        },
+        resetForm: {
+            name: "resetForm",
+            title: "重置表单",
+            dataComponent: DataHandler,
+            icon: "undo",
+            target: "component",
+            targetComponent: "axis-components/form",
+        },
+    },
+    buildOptionsNodes(nextInfo: NextInfo): DesignBuildResult {
+        return {
+            treeNode: new OptionsNode({
+                parentId: nextInfo.parentId,
+                scopeId: nextInfo.scopeId,
+                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 }
+        }
+    },
+};

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

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

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

@@ -0,0 +1,21 @@
+<form [formGroup]="fg" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="基本设置" nzActive>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    提交确认
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="submitConfirm">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <axis-value-design-setting [fg]="fg"></axis-value-design-setting>
+        <axis-base-design-setting [fg]="fg"></axis-base-design-setting>
+        <axis-input-trigger formControlName="triggeEvents"
+            [eventDesc]="[{name:'formStatusChange',title:'表单状态改变',ds:{status:{dirty:false,valid:true}}}]"
+            [internalTriggers]="['valueChange']"></axis-input-trigger>
+    </nz-collapse>
+</form>

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

@@ -0,0 +1,31 @@
+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, InputTrigger, ValueDesignSetting, valueFbConfig, valueFunField } from 'ngx-axis-appforge/core';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+
+@Component({
+  selector: 'axis-design-form-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, BaseDesignSetting, FunField, NzSwitchModule, InputTrigger, ValueDesignSetting],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    ...valueFbConfig,
+    submitConfirm: [undefined, FormValidators.requiredFun],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    ...valueFunField,
+    submitConfirm: {
+      defaultValue: true,
+    },
+  };
+
+}

package/axis-components/form/form.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

package/axis-components/form/form.html

@@ -0,0 +1,3 @@
+<form [formGroup]="fg">
+    <ng-container [axisDynamic]="options.child()"></ng-container>
+</form>

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

@@ -0,0 +1,9 @@
+import { signal } from "@angular/core";
+import { ValueAccessOptions } from "ngx-axis-appforge/core";
+
+export class FormOptions extends ValueAccessOptions {
+
+    readonly submitConfirm = signal(true);
+    readonly child = signal<any>(undefined);
+
+}

package/axis-components/form/form.ts

@@ -0,0 +1,121 @@
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { AXIS_FORM_REGISTE_CONTROL_TOKEN, DynamicDirective, EventHandlerOptions, RegisteFormControlOptions, updateAndValidAll, ValueAccess } from 'ngx-axis-appforge/core';
+import { FormOptions } from './form.options';
+import { AbstractControl, FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { bufferWhen, debounceTime, map, Observable, of, Subject } from 'rxjs';
+import { NzModalModule, NzModalService } from 'ng-zorro-antd/modal';
+
+@Component({
+  selector: 'axis-form',
+  imports: [ReactiveFormsModule, DynamicDirective, NzModalModule],
+  templateUrl: './form.html',
+  styleUrl: './form.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: AXIS_FORM_REGISTE_CONTROL_TOKEN,
+      useFactory: (form: Form) => {
+        return form.registerControl.bind(form);
+      },
+      deps: [Form]
+    }
+  ]
+})
+export class Form extends ValueAccess<FormOptions> implements OnInit {
+
+  constructor() {
+    super();
+    this.addSubscribe(this.fg.valueChanges.subscribe(v => {
+      this.onChange?.(v);
+    }));
+    this.addSubscribe(this.resetSubject.pipe(bufferWhen(() => this.resetSubject.pipe(debounceTime(50))), map(v => v.reduce((a, b) => a || b, false)))
+      .subscribe(emitEvent => this.reset(emitEvent)));
+    this.addSubscribe(this.fg.statusChanges.subscribe(_ => {
+      const { valid, dirty } = this.fg
+      this.triggeEvents("formStatusChange", { status: { valid, dirty } });
+    }))
+  }
+
+  protected override options: FormOptions = new FormOptions();
+  private readonly fb = inject(FormBuilder);
+  private readonly modal = inject(NzModalService);
+  readonly fg = this.fb.group({});
+  private oriValue: any;
+  private resetSubject = new Subject<boolean>();
+
+  override writeValue(value: any): void {
+    super.writeValue(value);
+    this.oriValue = value;
+    this.resetSubject.next(false);
+  }
+
+  override setInitValue(value: any): void {
+    super.setInitValue(value);
+    if (this.options.initValue() !== undefined) {
+      this.oriValue = this.options.initValue();
+      this.resetSubject.next(true);
+    }
+  }
+
+  ngOnInit(): void {
+    this.registValueAccess({
+      validFn: (control: AbstractControl) => {
+        return updateAndValidAll(this.fg, { markAsDirty: control.dirty })
+      }
+    })
+  }
+
+  registerControl(opt: RegisteFormControlOptions) {
+    if (opt.control) {
+      this.fg.setControl(opt.name, opt.control, { emitEvent: false });
+    }
+    let emitEvent = false;
+    if (opt.initValue !== undefined) {
+      this.oriValue = Object.assign({}, this.oriValue, { [opt.name]: opt.initValue });
+      this.registValueAccess({
+        initValue: this.oriValue
+      });
+      emitEvent = true;
+    }
+    this.resetSubject.next(emitEvent);
+  }
+
+  reset(emitEvent = false) {
+    this.fg.reset(this.oriValue, { emitEvent: emitEvent, onlySelf: true });
+  }
+
+  override onEvents(e: EventHandlerOptions<any>): Observable<boolean> | undefined {
+    const obs = super.onEvents(e);
+    if (obs) {
+      return;
+    }
+    switch (e.name) {
+      case "validForm":
+        if (updateAndValidAll(this.fg)) {
+          if (this.options.submitConfirm()) {
+            const subject = new Subject<boolean>();
+            this.modal.confirm({
+              nzTitle: "确定提交吗？",
+              nzOnOk: () => {
+                console.log(this.fg.value)
+                this.triggeEvents("formValid", { formValue: this.fg.value }, e.triggeEvents).subscribe(subject);
+              },
+              nzOnCancel: () => {
+                subject.next(false);
+                subject.complete();
+              }
+            });
+            return subject.asObservable();
+          } else {
+            return this.triggeEvents("formValid", { formValue: this.fg.value }, e.triggeEvents)
+          }
+        }
+        return of(false);
+      case "resetForm":
+        this.reset(true);
+        return of(true);
+    }
+    return undefined;
+  }
+
+}

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

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