ngx-axis-appforge 0.0.3 → 0.0.4

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

@@ -0,0 +1,139 @@
+<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="title">
+                        <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="width">
+                        <nz-input-number ngModel [ngModelOptions]="{standalone:true}" [nzMin]="100" [nzStep]="10"
+                            style="width: 100%;">
+                            <span nzInputAddonAfter>px</span>
+                        </nz-input-number>
+                    </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="visible">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    可拖动
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="draggable">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="确定按钮">
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    显示按钮
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="showOkButton">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().showOkButton?.funMode || formValue().showOkButton?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    按钮文本
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="okText">
+                        <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="closeOnOk">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    禁用
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="okDisabled">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="取消按钮">
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    显示按钮
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="showCancelButton">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().showCancelButton?.funMode || formValue().showCancelButton?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    按钮文本
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="cancelText">
+                        <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="closeOnCancel">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    禁用
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="cancelDisabled">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+        </nz-collapse-panel>
+        <axis-base-design-setting [fg]="fg"></axis-base-design-setting>
+        <axis-input-trigger formControlName="triggeEvents" [eventDesc]="eventDesc()"></axis-input-trigger>
+    </nz-collapse>
+</form>

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

@@ -0,0 +1,92 @@
+import { ChangeDetectionStrategy, Component, computed } 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 { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { BaseDesignSetting, baseFbConfig, baseFunField, EventDesc, FormValidators, FunField, FunFieldOptions, FunFieldValueBase, InputTrigger } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-text-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, BaseDesignSetting, FunField, NzInputModule, NzSwitchModule, InputTrigger, NzInputNumberModule],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    title: [undefined, FormValidators.requiredFun],
+    width: [undefined, FormValidators.requiredFun],
+    visible: [undefined, FormValidators.requiredFun],
+    draggable: [undefined, FormValidators.requiredFun],
+    showOkButton: [undefined, FormValidators.requiredFun],
+    showCancelButton: [undefined, FormValidators.requiredFun],
+    okText: [],
+    cancelText: [],
+    closeOnOk: [undefined, FormValidators.requiredFun],
+    closeOnCancel: [undefined, FormValidators.requiredFun],
+    okDisabled: [undefined, FormValidators.requiredFun],
+    cancelDisabled: [undefined, FormValidators.requiredFun],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    title: {
+      defaultValue: "未命名"
+    },
+    width: {
+      defaultValue: 400
+    },
+    visible: {
+      defaultValue: false
+    },
+    draggable: {
+      defaultValue: true
+    },
+    showOkButton: {
+      defaultValue: true
+    },
+    showCancelButton: {
+      defaultValue: true
+    },
+    okText: {
+      defaultValue: "确定"
+    },
+    cancelText: {
+      defaultValue: "取消"
+    },
+    closeOnOk: {
+      defaultValue: true
+    },
+    closeOnCancel: {
+      defaultValue: true
+    },
+    okDisabled: {
+      defaultValue: false
+    },
+    cancelDisabled: {
+      defaultValue: false
+    },
+  };
+
+  readonly eventDesc = computed(() => {
+    const res: EventDesc[] = [];
+    if (this.formValue()?.showOkButton.funMode || this.formValue()?.showOkButton.originValue) {
+      res.push({
+        name: "modalOk",
+        title: "点击确定"
+      });
+    }
+    if (this.formValue()?.showCancelButton.funMode || this.formValue()?.showCancelButton.originValue) {
+      res.push({
+        name: "modalCancel",
+        title: "点击取消"
+      });
+    }
+    return res;
+  });
+
+}

package/axis-components/modal/modal.html

@@ -0,0 +1,7 @@
+<nz-modal [(nzVisible)]="isVisible" [nzTitle]="options.title()" [nzWidth]="options.width()"
+    [nzDraggable]="options.draggable()" [nzOkText]="options.showOkButton()?options.okText():null"
+    [nzCancelText]="options.showCancelButton()?options.cnacelText():null" [nzOkDisabled]="options.okDisabled()"
+    [nzCancelDisabled]="options.cancelDisabled()" [nzOkLoading]="loading()" [nzCancelLoading]="loading()"
+    (nzOnOk)="handleOk()" (nzOnCancel)="handleCancel()">
+    <ng-container *nzModalContent [axisDynamic]="options.child()"></ng-container>
+</nz-modal>

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

@@ -0,0 +1,20 @@
+import { signal } from "@angular/core";
+import { BaseOptions } from "ngx-axis-appforge/core";
+
+export class ModalOptions extends BaseOptions {
+
+    readonly title = signal("未命名");
+    readonly visible = signal(false);
+    readonly width = signal(400);
+    readonly draggable = signal(true);
+    readonly showOkButton = signal(true);
+    readonly showCancelButton = signal(true);
+    readonly okText = signal("确定");
+    readonly cnacelText = signal("取消");
+    readonly closeOnOk = signal(true);
+    readonly closeOnCancel = signal(true);
+    readonly okDisabled = signal(false);
+    readonly cancelDisabled = signal(false);
+    readonly child = signal<any>(undefined);
+
+}

package/axis-components/modal/modal.ts

@@ -0,0 +1,57 @@
+import { ChangeDetectionStrategy, Component, effect, model, signal } from '@angular/core';
+import { ModalOptions } from './modal.options';
+import { Base, DynamicDirective, EventHandlerOptions } from 'ngx-axis-appforge/core';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import { finalize, Observable, of } from 'rxjs';
+
+@Component({
+  selector: 'axis-modal',
+  imports: [NzModalModule, DynamicDirective],
+  templateUrl: './modal.html',
+  styleUrl: './modal.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Text extends Base<ModalOptions> {
+
+  constructor() {
+    super();
+    effect(() => {
+      this.isVisible.set(this.options.visible());
+    })
+  }
+
+  override options: ModalOptions = new ModalOptions();
+
+  readonly isVisible = model(false);
+  readonly loading = signal(false);
+
+  handleOk() {
+    if (this.options.closeOnOk()) {
+      this.isVisible.set(false);
+    } else {
+      this.loading.set(true);
+    }
+    this.triggeEvents("modalOk").pipe(finalize(() => this.loading.set(false))).subscribe();
+  }
+
+  handleCancel() {
+    if (this.options.closeOnCancel()) {
+      this.isVisible.set(false);
+    }
+    this.triggeEvents("modalCancel").pipe(finalize(() => this.loading.set(false))).subscribe();
+  }
+
+  override onEvents(e: EventHandlerOptions<any>): Observable<boolean> | undefined {
+    const obs = super.onEvents?.(e);
+    if (obs) {
+      return;
+    }
+    switch (e.name) {
+      case "setModalVisible":
+        this.isVisible.set(e.data.visible);
+        return of(true);
+    }
+    return undefined;
+  }
+
+}

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

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

package/axis-components/ng-package.json

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

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

@@ -0,0 +1,59 @@
+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 {
+        const ds: any = {};
+        for (const d of nextInfo.currentObject.dataSources ?? []) {
+            if (d.type == "local" && d.data) {
+                ds[d.name] = d.data;
+            } else {
+                ds[d.name] = "示例数据";
+            }
+        }
+        return {
+            treeNode: new OptionsNode({
+                parentId: nextInfo.parentId,
+                scopeId: nextInfo.currentObject.id,
+                name: nameCode("组件域", nextInfo.currentObject.scopeName),
+                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: [],
+                contextMenu: SimpleMenu,
+                settingType: Setting,
+                icon: "group"
+            }),
+            next: [
+                {
+                    parentObject: nextInfo.currentObject,
+                    indexOfParent: "child",
+                    parentId: nextInfo.currentObject.id,
+                    scopeId: nextInfo.currentObject.id
+                }
+            ],
+            newScopes: [
+                {
+                    scopeId: nextInfo.currentObject.id,
+                    scopeName: nextInfo.currentObject.scopeName,
+                    parentScopeId: nextInfo.scopeId,
+                    ds: ds
+                }
+            ]
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element, dropElement: element }
+        }
+    },
+};

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

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

package/axis-components/scope/design/setting/datasource-editor/datasource-editor.css

@@ -0,0 +1,28 @@
+.cdk-drag-preview {
+    border: none;
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+        0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.ds-list.cdk-drop-list-dragging .ds-box:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+nz-icon[nzType="holder"]:hover {
+    color: var(--ant-primary-color);
+}
+
+nz-icon[nzType="holder"] {
+    cursor: move;
+}

package/axis-components/scope/design/setting/datasource-editor/datasource-editor.html

@@ -0,0 +1,188 @@
+<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 && !internalDataSources().length) {
+        <nz-empty nzNotFoundContent="暂无数据源"></nz-empty>
+        }@else{
+        <div class="ds-list" nz-flex nzVertical nzGap="8px" style="padding: 6px;" cdkDropList
+            (cdkDropListDropped)="onDsDrop($event)">
+            @for (item of value()??[]; track item.name;) {
+            <div class="ds-box" nz-flex nzGap="8px" cdkDrag cdkDragLockAxis="y" style="background: #fafafa;">
+                <nz-icon nzType="holder" cdkDragHandle></nz-icon>
+                <div>@switch (item.type) {
+                    @case ("api") {
+                    <nz-tag nzColor="magenta">接口</nz-tag>
+                    }
+                    @case ("local") {
+                    <nz-tag nzColor="blue">本地</nz-tag>
+                    }
+                    @case ("inject") {
+                    <nz-tag nzColor="purple">注入</nz-tag>
+                    }
+                    @case ("cache") {
+                    <nz-tag nzColor="volcano">缓存</nz-tag>
+                    }
+                    }
+                </div>
+                <div style="flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.name}}</div>
+                <div>
+                    <a nz-button nzType="link" nzSize="small" (click)="doShowDataSource(item.name)">
+                        <i nz-icon nzType="eye" nzTheme="outline"></i>
+                    </a>
+                    <a nz-button nzType="link" nzSize="small" (click)="updateDataSource(item.name)">
+                        <i nz-icon nzType="edit" nzTheme="outline"></i>
+                    </a>
+                    <a nz-button nzType="link" nzSize="small" nzDanger (click)="deleteDataSource(item.name)">
+                        <i nz-icon nzType="delete" nzTheme="outline"></i>
+                    </a>
+                </div>
+            </div>
+            }
+            @for (item of internalDataSources(); track item;) {
+            <div class="ds-box" nz-flex nzGap="8px">
+                <div style="width: 14px;"></div>
+                <div><nz-tag nzColor="blue">本地</nz-tag></div>
+                <div style="flex: 1;">{{item.name}}</div>
+                <div style="width: 72px;">
+                    <a nz-button nzType="link" nzSize="small" (click)="doShowDataSource(item.name)">
+                        <i nz-icon nzType="eye" nzTheme="outline"></i>
+                    </a>
+                </div>
+            </div>
+            }
+        </div>
+        }
+    </nz-collapse-panel>
+    @if (showLine()) {
+    <div></div>
+    }
+</nz-collapse>
+
+<nz-modal nzWidth="800px" [nzVisible]="!!showDataSource()" [nzTitle]="'查看数据源-'+showDataSource()?.name" [nzOkText]="null"
+    (nzOnCancel)="showDataSource.set(undefined)" [nzBodyStyle]="{padding:'0'}" nzCancelText="关闭">
+    <div *nzModalContent style="height: 400px;" nz-flex>
+        <ng-container [axisDynamic]="{component:'axis-components/editor',inuse:true,mode:'json',readonly:true}"
+            [ngModel]="showDataSource()?.data ??''"></ng-container>
+    </div>
+</nz-modal>
+
+<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">
+                    <input formControlName="name" nz-input (ngModelChange)="dataSourceValid($event)" />
+                    @if (dataSourceNameRepeat()) {
+                    <div class="ant-form-item-explain-warning">数据源名称重复</div>
+                    }
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="6" nzRequired>
+                    存在时忽略
+                </nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <nz-switch formControlName="skipOnExists"></nz-switch>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="6" nzRequired>
+                    数据源类型
+                </nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <nz-radio-group formControlName="type" (ngModelChange)="changeType()">
+                        <label nz-radio nzValue="local">本地</label>
+                        <label nz-radio nzValue="api">接口</label>
+                        <label nz-radio nzValue="inject">注入</label>
+                        <label nz-radio nzValue="cache">缓存</label>
+                    </nz-radio-group>
+                </nz-form-control>
+            </nz-form-item>
+            @switch (fg.value.type) {
+            @case ("api") {
+            <ng-container formGroupName="api">
+                <nz-form-item>
+                    <nz-form-label nzSpan="6" nzRequired>
+                        接口地址
+                    </nz-form-label>
+                    <nz-form-control nzSpan="18">
+                        <axis-fun-field formControlName="url" [exclude]="[fg.value.name]">
+                            <input ngModel [ngModelOptions]="{standalone:true}" nz-input />
+                        </axis-fun-field>
+                    </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="method" [exclude]="[fg.value.name]">
+                            <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                                <nz-option nzValue="get" nzLabel="GET"></nz-option>
+                                <nz-option nzValue="post" nzLabel="POST"></nz-option>
+                                <nz-option nzValue="put" nzLabel="PUT"></nz-option>
+                                <nz-option nzValue="delete" nzLabel="DELETE"></nz-option>
+                            </nz-select>
+                        </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="body" [exclude]="[fg.value.name]">
+                            <ng-container [axisDynamic]="{component:'axis-components/input-json',inuse:true}" ngModel
+                                [ngModelOptions]="{standalone:true}"></ng-container>
+                        </axis-fun-field>
+                    </nz-form-control>
+                </nz-form-item>
+            </ng-container>
+            }
+            @case ("local") {
+            <nz-form-item>
+                <nz-form-label nzSpan="6">
+                    数据
+                </nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <axis-fun-field formControlName="data" [exclude]="[fg.value.name]">
+                        <ng-container [axisDynamic]="{component:'axis-components/input-json',inuse:true}" ngModel
+                            [ngModelOptions]="{standalone:true}"></ng-container>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            @case ("inject") {
+            <nz-form-item>
+                <nz-form-label nzSpan="6" nzRequired>
+                    字段名
+                </nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <input nz-input formControlName="injectField" />
+                </nz-form-control>
+            </nz-form-item>
+            }
+            @case ("cache") {
+            <nz-form-item>
+                <nz-form-label nzSpan="6" nzRequired>
+                    缓存Key
+                </nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <axis-fun-field formControlName="cacheKey" [exclude]="[fg.value.name]">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            }
+        </form>
+    </ng-container>
+</nz-modal>