ngx-axis-appforge 0.0.2 → 0.0.3

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

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

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

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

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

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

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

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

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

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

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

package/axis-components/flex/flex.html

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

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

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

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

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

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

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

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

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

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

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

package/axis-components/form/form.html

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

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

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

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

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