ngx-axis-appforge 0.0.1 → 0.0.3

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

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

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

@@ -1,29 +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: "低代码设计器",
-                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

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

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

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

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

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

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

@@ -1,9 +0,0 @@
-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 }>({});
-
-}