ngx-axis-appforge 0.0.3 → 0.0.4

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

@@ -0,0 +1,76 @@
+<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="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="column">
+                        <nz-input-number style="width:100%;" nzMin="1" ngModel
+                            [ngModelOptions]="{standalone:true}"></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="bordered">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue()?.bordered.funMode || formValue()?.bordered.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    大小
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="size">
+                        <nz-radio-group ngModel [ngModelOptions]="{standalone:true}" nzSize="small">
+                            <label nz-radio-button nzValue="small">小</label>
+                            <label nz-radio-button nzValue="middle">中</label>
+                            <label nz-radio-button nzValue="default">大</label>
+                        </nz-radio-group>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }@else {
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    冒号
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="colon">
+                        <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">
+                    数据
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="data" #dataFunField>
+                        <ng-container [axisDynamic]="{component:'axis-components/input-json',inuse:true}"
+                            [standalone]="true" ngModel [ngModelOptions]="{standalone:true}"></ng-container>
+                    </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/desc/design/desc-setting/desc-setting.ts

@@ -0,0 +1,51 @@
+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 { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { BaseDesignSetting, baseFbConfig, baseFunField, DynamicDirective, FormValidators, FunField, FunFieldOptions, FunFieldValueBase } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-desc-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, BaseDesignSetting, FunField, NzInputModule, NzInputNumberModule, NzSwitchModule, NzRadioModule, DynamicDirective],
+  templateUrl: './desc-setting.html',
+  styleUrl: './desc-setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DescSetting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    title: [],
+    column: [undefined, FormValidators.requiredFun],
+    bordered: [undefined, FormValidators.requiredFun],
+    size: [undefined, FormValidators.requiredFun],
+    colon: [undefined, FormValidators.requiredFun],
+    data: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    title: {
+      defaultValue: ""
+    },
+    column: {
+      defaultValue: 3
+    },
+    bordered: {
+      defaultValue: true
+    },
+    size: {
+      defaultValue: "default"
+    },
+    colon: {
+      defaultValue: true
+    },
+    data: {
+      defaultValue: undefined
+    },
+  };
+}

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

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

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

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

package/axis-components/design/cmplib/cmplib.css

@@ -0,0 +1,5 @@
+.dragElementContainer {
+    position: absolute;
+    z-index: -9999;
+    top: 100px;
+}

package/axis-components/design/cmplib/cmplib.html

@@ -0,0 +1,52 @@
+<div nz-flex nzAlign="center">
+    <input style="flex:1" type="text" nz-input placeholder="搜索" nzBorderless ngModel
+        (ngModelChange)="searchValue$.next($event)" />
+    <nz-select [(ngModel)]="cmplib" nzSize="small" nzBorderless style="width: auto;">
+        @for (lib of cmplibs; track $index) {
+        <nz-option [nzValue]="lib.lib" [nzLabel]="lib.libName"></nz-option>
+        }
+    </nz-select>
+</div>
+<nz-collapse nzAccordion>
+    @for (group of displayCmpLib(); track group.groupName) {
+    <nz-collapse-panel [nzHeader]="`${group.groupName}(${group.children.length})`">
+        <div nz-row [nzGutter]="[8,8]">
+            @for (item of group.children; track item.component) {
+            <div nz-col [nzSpan]="item.span">
+                <nz-card nzSize="small" nzHoverable [nzCover]="coverTemplate" [nzTitle]="item.component"
+                    [nzExtra]="item.moreExamples? more:''" [nzBodyStyle]="{padding:0}" (click)="onClick(item.example)"
+                    [draggable]="selectMode()=='drag'" (mouseenter)="preloadDragElement(item.example)"
+                    (dragstart)="onDragStart($event)" (dragend)="onDragEnd($event)">
+                </nz-card>
+                <ng-template #coverTemplate>
+                    <img style="margin: 4px;object-fit: contain;" [style.height.px]="item.height"
+                        [src]="item.coverImg" />
+                </ng-template>
+                <ng-template #more>
+                    <a nz-button nzType="link" nzSize="small" nz-dropdown [nzDropdownMenu]="examples">
+                        <nz-icon nzType="ellipsis"></nz-icon>
+                    </a>
+                    <nz-dropdown-menu #examples="nzDropdownMenu">
+                        <ul nz-menu nzSelectable>
+                            @for (item of item.moreExamples; track item.name) {
+                            <li nz-menu-item (click)="onClick(item)" [draggable]="selectMode()=='drag'"
+                                (mouseenter)="preloadDragElement(item)" (dragstart)="onDragStart($event)"
+                                (dragend)="onDragEnd($event)">{{item.name}}</li>
+                            }
+                        </ul>
+                    </nz-dropdown-menu>
+                </ng-template>
+            </div>
+            }
+        </div>
+    </nz-collapse-panel>
+    }
+</nz-collapse>
+<div class="dragElementContainer">
+    <div #dragElement>
+        @if (dragOptions()) {
+        <ng-container [axisDynamic]="dragOptions()" [standalone]="true"></ng-container>
+        {{dragOptions().type}}
+        }
+    </div>
+</div>

package/axis-components/design/cmplib/cmplib.ts

@@ -0,0 +1,96 @@
+import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, model, OnInit, output, signal, ViewChild } from '@angular/core';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzCardModule } from 'ng-zorro-antd/card';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { AXIS_DESIGN_CMPLIBS_TOKEN, DynamicDirective, Example, ExampleGroup } from 'ngx-axis-appforge/core';
+import { auditTime, BehaviorSubject, map } from 'rxjs';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { FormsModule } from '@angular/forms';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+
+@Component({
+  selector: 'axis-cmplib',
+  imports: [NzCollapseModule, NzCardModule, NzGridModule, DynamicDirective, NzButtonModule, NzDropDownModule, NzInputModule, FormsModule, NzIconModule, NzFlexModule, NzSelectModule],
+  templateUrl: './cmplib.html',
+  styleUrl: './cmplib.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Cmplib implements OnInit {
+
+  constructor() {
+    effect(() => {
+      this.tags();
+      this.cmplib();
+      this.searchValue$.next(this.searchValue$.value);
+    });
+  }
+  readonly cmplibs = inject(AXIS_DESIGN_CMPLIBS_TOKEN, { optional: true });
+  readonly cmplib = model<ExampleGroup[]>();
+  readonly dragOptions = signal<any>(undefined);
+  readonly selectMode = input.required<"drag" | "click">();
+  readonly tags = input<string[]>();
+  dragExample?: Example;
+  readonly clickExample = output<any>();
+  readonly dragStart = output<{ example: Example, element: HTMLElement }>();
+  readonly dragEnd = output<void>();
+  @ViewChild("dragElement", { read: ElementRef, static: true })
+  dragElement?: ElementRef;
+  readonly searchValue$ = new BehaviorSubject<string>('');
+  readonly displayCmpLib = toSignal(this.searchValue$.pipe(auditTime(300), map(v => {
+    if (v || this.tags()?.length) {
+      v = v.toLowerCase();
+      return this.cmplib()?.map(group => ({
+        groupName: group.groupName,
+        children: group.children.filter(c => (!v || c.component.includes(v)) && (!this.tags()?.length || c.tags?.some(t => this.tags()!.includes(t))))
+      })).filter(group => group.children.length);
+    } else {
+      return this.cmplib();
+    }
+  })));
+
+  ngOnInit(): void {
+    if (this.cmplibs?.length) {
+      this.cmplib.set(this.cmplibs[0].lib);
+    }
+  }
+
+  onClick(example: Example) {
+    if (this.selectMode() == "click") {
+      this.clickExample.emit(example);
+    }
+  }
+
+  preloadDragElement(example: Example) {
+    if (this.selectMode() == "drag") {
+      this.dragOptions.set(example.builder());
+      this.dragExample = example;
+    }
+  }
+
+  onDragStart(e: DragEvent) {
+    if (this.selectMode() == "drag") {
+      e.stopPropagation();
+      if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = 'move';
+      }
+      e.dataTransfer?.setDragImage(this.dragElement?.nativeElement, 0, 0);
+      setTimeout(() => {
+        this.dragStart.emit({ example: this.dragExample!, element: this.dragElement?.nativeElement });
+      });
+    }
+  }
+
+  onDragEnd(e: DragEvent) {
+    if (this.selectMode() == "drag") {
+      e.stopPropagation();
+      e.preventDefault();
+      this.dragEnd.emit();
+    }
+  }
+
+}

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

@@ -0,0 +1,29 @@
+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: "低代码设计器",
+                canSetting: true,
+                canDrag: true,
+                dragType: "component",
+                parentObj: nextInfo.parentObject,
+                indexOfParentObj: nextInfo.indexOfParent,
+                rootOptions: nextInfo.currentObject,
+                settingType: Setting,
+                contextMenu: SimpleMenu,
+                icon: "deployment-unit"
+            })
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element }
+        }
+    },
+};

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

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

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

@@ -0,0 +1,33 @@
+<form [formGroup]="fg" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="基本设置" nzActive>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzTooltipTitle="注入的数据对象，格式：{数据名:数据}">
+                    数据注入
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="injectData">
+                        <ng-container ngModel [ngModelOptions]="{standalone:true}"
+                            [axisDynamic]="{component:'axis-components/input-json',inuse:true}"
+                            [standalone]="true"></ng-container>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzTooltipTitle="可以选择的权限列表，格式：{权限编码:权限名字}">
+                    权限列表
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="allPermissions">
+                        <ng-container ngModel [ngModelOptions]="{standalone:true}"
+                            [axisDynamic]="{component:'axis-components/input-json',inuse:true}"
+                            [standalone]="true"></ng-container>
+                    </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" [internalTriggers]="['valueChange']"></axis-input-trigger>
+    </nz-collapse>
+</form>

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

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

package/axis-components/design/design.css

@@ -0,0 +1,15 @@
+nz-tabs,
+::ng-deep .ant-tabs-content,
+::ng-deep .ant-tabs-tabpane {
+    height: 100%;
+}
+
+::ng-deep .ant-tabs-content {
+    overflow: auto;
+}
+
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+}

package/axis-components/design/design.html

@@ -0,0 +1,51 @@
+<nz-splitter (nzResize)="layoutEditor($event)">
+    <nz-splitter-panel [nzCollapsible]="!tools.onlyPreview()" [nzDefaultSize]="cacheSized[0]" nzMin="15%" nzMax="40%"
+        [nzSize]="tools.onlyPreview()?0:undefined">
+        <nz-tabs nzCentered>
+            <nz-tab nzTitle="组件树">
+                <axis-design-tree #tree [node]="treeNode()" [optionsNodes]="optionsNodes"
+                    (onSelect)="onTreeSelect($event)" (onChange)="onChangeOptionsConfig($event)"
+                    (onContextMenu)="onContextMenu($event.event,$event.nodeId)"></axis-design-tree>
+            </nz-tab>
+            <nz-tab nzTitle="组件库">
+                <axis-cmplib selectMode="drag" (dragStart)="onCmplibDragStart($event.example,$event.element)"
+                    (dragEnd)="onCmplibDragEnd()"></axis-cmplib>
+            </nz-tab>
+        </nz-tabs>
+    </nz-splitter-panel>
+    <nz-splitter-panel>
+        <div nz-flex nzVertical style="height: 100%;width: 100%;position: relative;">
+            <h2 style="text-align: center;margin-top: 4px;">预览</h2>
+            <axis-toolbar #tools></axis-toolbar>
+            <axis-design-preview #preview style="flex:1;overflow: auto;" [loadAndOptions]="loadAndOptions()"
+                [optionsNodes]="optionsNodes" [injectData]="injectDataObs" (onChange)="onChangeOptionsConfig()"
+                (onSelect)="onPreviewSelect($event)"
+                (onContextMenu)="onContextMenu($event.event,$event.nodeId)"></axis-design-preview>
+        </div>
+    </nz-splitter-panel>
+    <nz-splitter-panel [nzCollapsible]="!tools.onlyPreview()" [nzDefaultSize]="cacheSized[1]" nzMin="15%" nzMax="40%"
+        [nzSize]="tools.onlyPreview()?0:undefined" style="position: relative;">
+        <nz-tabs nzCentered style="height: 100%;">
+            <nz-tab nzTitle="属性设置" (nzClick)="syncToSetting()">
+                <ng-container #setting></ng-container>
+                @if (!settingOptionsStr()){
+                <nz-empty style="height: 300px;" nzNotFoundContent="请先选择一个组件"></nz-empty>
+                }
+            </nz-tab>
+            <nz-tab nzTitle="代码" nzForceRender (nzSelect)="syncToCode();">
+                <ng-container #codeEditor="axisDynamic"
+                    [axisDynamic]="{component:'axis-components/editor',inuse:true,mode:'json',readonly:!settingOptionsStr(),otherOptions:{tabSize:2}}"
+                    [standalone]="true" [(ngModel)]="settingOptionsStr"
+                    (ngModelChange)="onEditorChange($event)"></ng-container>
+            </nz-tab>
+        </nz-tabs>
+    </nz-splitter-panel>
+</nz-splitter>
+<ng-container #menu></ng-container>
+<nz-drawer [(nzVisible)]="chooseComponentVisible" nzTitle="选择组件" [nzBodyStyle]="{padding:0}"
+    (nzOnClose)="chooseComponentVisible.set(false);chooseComponentSubject.next(undefined)">
+    <ng-container *nzDrawerContent>
+        <axis-cmplib selectMode="click" [tags]="chooseComponentTags()"
+            (clickExample)="chooseComponentVisible.set(false);chooseComponentSubject.next($event)"></axis-cmplib>
+    </ng-container>
+</nz-drawer>

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

@@ -0,0 +1,9 @@
+import { signal } from "@angular/core";
+import { ValueAccessOptions } from "ngx-axis-appforge/core";
+
+export class DesignOptions extends ValueAccessOptions {
+
+    readonly injectData = signal<any>({});
+    readonly allPermissions = signal<{ [permission: string]: string }>({});
+
+}