ngx-axis-appforge 0.0.3 → 0.0.4

package/axis-components/tree-selector/tree-selector.css

@@ -0,0 +1,43 @@
+:host {
+    display: block;
+    width: 100%;
+}
+
+.title-container {
+    padding: 20px;
+    border-bottom: 0.5px solid rgba(128, 128, 128, 0.3);
+    font-weight: 500;
+    font-size: 16px;
+}
+
+::ng-deep .highlight {
+    color: #f50;
+}
+
+.tree-box {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.tree-body {
+    flex: 1;
+    overflow: auto;
+}
+
+.expand-button {
+    opacity: 0;
+}
+
+.node-item {
+    width: 100%;
+}
+
+.node-item:hover .expand-button {
+    opacity: 1;
+}
+
+.node-item span {
+    flex: 1;
+    white-space: nowrap;
+}

package/axis-components/tree-selector/tree-selector.html

@@ -0,0 +1,65 @@
+@switch (options.type() ) {
+@case ("tree") {
+<div class="tree-box">
+    @if (options.title()) {
+    <div class="title-container">{{options.title()}}</div>
+    }
+    @if (options.showSearch()) {
+    <div class="search-inp">
+        <input type="text" nz-input placeholder="搜索" [(ngModel)]="searchValue" nzVariant="borderless" nzSize="small" />
+    </div>
+    }
+    <div class="tree-body">
+        <nz-tree [nzSearchValue]="searchValue()??''" [nzTreeTemplate]="optionItem"
+            [nzHideUnMatched]="options.hideUnMatched()" [nzData]="treeData()" nzBlockNode
+            [nzSelectedKeys]="selectedKeys()" [nzMultiple]="options.multiple()" [nzShowLine]="options.showLine()"
+            (nzClick)="nodeClick($event)" (nzContextMenu)="onContextMenu($event)">
+        </nz-tree>
+    </div>
+</div>
+<nz-dropdown-menu>
+    <ul nz-menu>
+        @for (m of menus(); track $index) {
+        @if (m.inuse()) {
+        <li nz-menu-item [nzDisabled]="m.disabled()" [nzDanger]="m.danger()" (click)="menuClick(m)">
+            @if (m.icon()) {
+            <ng-container [axisDynamic]="m.icon()"></ng-container>
+            }
+            {{m.title()}}
+        </li>
+        }
+        }
+    </ul>
+</nz-dropdown-menu>
+}
+@case ("input-tree") {
+<nz-tree-select [nzNodes]="treeData()" [nzAllowClear]="options.allowClear()" [nzSize]="options.size()"
+    [nzVariant]="options.variant()" [nzShowSearch]="options.showSearch()" [nzShowLine]="options.showLine()"
+    [nzPlaceHolder]="options.placeHolder()" [nzTreeTemplate]="optionItem" [nzCheckable]="options.multiple()"
+    [nzMaxTagCount]="options.maxSelectCount()" [nzHideUnMatched]="options.hideUnMatched()"
+    [nzDisabled]="options.disabled()" [(ngModel)]="selectValue" (ngModelChange)="onInputTreeChange()"></nz-tree-select>
+}
+@case ("cascader"){
+<nz-cascader style="width: 100%;" [nzOptions]="treeData()" [(ngModel)]="selectValue"
+    (ngModelChange)="onCascaderChange($event)" [nzMultiple]="options.multiple()"
+    [nzMaxTagCount]="options.maxSelectCount()" [nzAllowClear]="options.allowClear()" [nzChangeOn]="changeOn"
+    [nzDisabled]="options.disabled()" nzLabelProperty="title" [nzPlaceHolder]="options.placeHolder()"
+    [nzShowSearch]="options.showSearch()" [nzSize]="options.size()" nzValueProperty="key"
+    [nzVariant]="options.variant()" [nzExpandTrigger]="options.expandTrigger()"
+    [nzOptionRender]="optionItem"></nz-cascader>
+}
+}
+<ng-template #optionItem let-option>
+    <div class="node-item" nz-flex nzGap="4px">
+        @if (option.icon) {
+        <ng-container [axisDynamic]="option.icon"></ng-container>
+        }
+        <span [innerHTML]="option.title | nzHighlight: searchValue()??'' : 'i' : 'highlight'"></span>
+        @if (options.type() != 'cascader' && option.children.length) {
+        <a class="expand-button" nz-button nzType="text" nzSize="small" nzShape="circle"
+            (click)="$event.stopPropagation(); expand(option,!hasExpanded(option))">
+            <nz-icon [nzType]="hasExpanded(option)?'shrink':'arrows-alt'"></nz-icon>
+        </a>
+        }
+    </div>
+</ng-template>

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

@@ -0,0 +1,50 @@
+import { signal } from "@angular/core";
+import { ValueAccessOptions, TriggeEventsOptions } from "ngx-axis-appforge/core";
+
+export class TreeSelectorOptions extends ValueAccessOptions {
+
+
+    readonly labelField = signal("title");
+    readonly valueField = signal("key");
+    readonly selectableField = signal("selectable");
+    readonly iconField = signal("icon");
+    readonly fullValue = signal(false);
+    readonly levelStart = signal(0);
+    readonly levelEnd = signal<number | null>(null);
+    readonly data = signal<any>(undefined);
+    readonly nodeFn = signal<string | undefined>(undefined);
+
+    readonly selectAbleLevel = signal<string>("");
+    readonly multiple = signal(false);
+    readonly maxSelectCount = signal(Number.MAX_VALUE);
+    readonly defaultFirst = signal(false);
+    readonly allowClear = signal(true);
+
+    readonly type = signal<"tree" | "input-tree" | "cascader">("tree");
+    readonly showSearch = signal(true);
+    readonly hideUnMatched = signal(true);
+    readonly showLine = signal(false);
+
+    readonly title = signal("");
+    readonly expandedLevel = signal<number | null>(null);
+
+    readonly placeHolder = signal("");
+    readonly size = signal<'large' | 'small' | 'default'>("default");
+    readonly variant = signal<'outlined' | 'borderless' | 'filled' | 'underlined'>("outlined");
+
+    readonly expandTrigger = signal<'click' | 'hover'>("click");
+
+    readonly menus = signal<TreeNodeMenuOptions[]>([]);
+
+}
+
+export class TreeNodeMenuOptions {
+    inuse = signal(true);
+    title = signal("未命名");
+    icon = signal<any>(undefined);
+    danger = signal(false);
+    confirm = signal(false);
+    confirmText = signal("是否确认？");
+    disabled = signal(false);
+    triggeEvents = signal<TriggeEventsOptions | undefined>(undefined);
+}

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

@@ -0,0 +1,252 @@
+import { ChangeDetectionStrategy, Component, computed, effect, inject, model, signal, untracked, ViewChild } from '@angular/core';
+import { TreeNodeMenuOptions, TreeSelectorOptions } from './tree-selector.options';
+import { copy, DynamicDirective, fn, recursionArray, ValueAccess } from 'ngx-axis-appforge/core';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzTreeModule, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
+import { NzContextMenuService, NzDropdownMenuComponent, NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { FormsModule } from '@angular/forms';
+import { NzFormatEmitEvent, NzTreeNode, NzTreeNodeKey } from 'ng-zorro-antd/core/tree';
+import { NzHighlightPipe } from 'ng-zorro-antd/core/highlight';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+import { NzTreeSelectComponent, NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
+import { NzCascaderModule, NzCascaderOption } from 'ng-zorro-antd/cascader';
+import { NzModalModule, NzModalService } from 'ng-zorro-antd/modal';
+
+@Component({
+  selector: 'axis-tree-selector',
+  imports: [NzInputModule, DynamicDirective, NzTreeModule, NzDropDownModule, FormsModule, NzHighlightPipe, NzIconModule, NzButtonModule, NzFlexModule, NzTreeSelectModule, NzCascaderModule, NzModalModule],
+  templateUrl: './tree-selector.html',
+  styleUrl: './tree-selector.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TreeSelector extends ValueAccess<TreeSelectorOptions> {
+
+  constructor() {
+    super();
+    effect(() => {
+      if (untracked(this.options.defaultFirst)) {
+        let fullArray: any[] = [];
+        recursionArray(this.treeData(), {
+          before: n => {
+            if (n.selectable) {
+              fullArray.push(n.data);
+              return false;
+            }
+            return undefined;
+          }
+        });
+        const value = this.fullArrayToValue(fullArray);
+        if (value != null) {
+          this.setInitValue(value);
+          this.initComponentValue();
+        }
+      }
+    });
+    effect(() => this.initComponentValue());
+  }
+
+  @ViewChild(NzTreeSelectComponent)
+  private treeSelect?: NzTreeSelectComponent;
+
+  @ViewChild(NzDropdownMenuComponent)
+  private menu?: NzDropdownMenuComponent;
+  private readonly menuService = inject(NzContextMenuService);
+  private readonly modal = inject(NzModalService);
+  private menuNodeDs?: any;
+
+  protected override options: TreeSelectorOptions = new TreeSelectorOptions();
+  readonly menus = computed(() => this.options.menus().map(_ => new TreeNodeMenuOptions()));
+  readonly searchValue = model<string>();
+  readonly treeData = computed(() => this.buildTreeData());
+  readonly selectedKeys = signal<NzTreeNodeKey[]>([]);
+  readonly selectValue = model<any>();
+  readonly treeNodeMap = computed(() => {
+    const map = new Map<NzTreeNodeKey, NzTreeNodeOptions>();
+    recursionArray(this.treeData(), {
+      before: n => {
+        map.set(n.key, n);
+      }
+    });
+    return map;
+  });
+
+  readonly changeOn = (option: NzCascaderOption, level: number): boolean => {
+    return option['selectable'];
+  }
+
+  override writeValue(value: any): void {
+    super.writeValue(value);
+    this.initComponentValue();
+  }
+
+  private buildTreeData(): NzTreeNodeOptions[] {
+    let data = this.options.data() ? copy(this.options.data(), true) : [];
+    if (this.options.levelStart() < 0) {
+      data = [{
+        [this.options.labelField()]: "全部",
+        [this.options.valueField()]: "",
+        children: data,
+      }];
+    }
+    const selectableLevels = this.options.selectAbleLevel()?.split(",").filter(l => l).map(l => +l.trim());
+    const treeData: NzTreeNodeOptions[] = [];
+    recursionArray(data, {
+      before: (n, l, parent) => {
+        const nodeData: any = {};
+        if (this.options.nodeFn()) {
+          fn(this.options.nodeFn()!, { node: n, level: l });
+        }
+        for (const key in n) {
+          if (key !== "children") {
+            nodeData[key] = n[key];
+            delete n[key];
+          }
+        }
+        if (l >= this.options.levelStart() || l <= (this.options.levelEnd() ?? Infinity)) {
+          if (l == this.options.levelStart()) {
+            treeData.push(n);
+          }
+          if (l == (this.options.levelEnd() ?? Infinity) || (this.options.type() == 'cascader' && selectableLevels?.length && selectableLevels[selectableLevels.length - 1] == l)) {
+            n.isLeaf = true;
+            n.expanded = false;
+            delete n.children;
+          } else {
+            n.isLeaf = !n.children?.length;
+            n.expanded = l < (this.options.expandedLevel() ?? Infinity);
+          }
+          n.selectable = n[this.options.selectableField()] ?? true;
+          if (n.selectable && this.options.selectAbleLevel()) {
+            if (!selectableLevels.includes(l)) {
+              n.selectable = false;
+            }
+          }
+          n.key = nodeData[this.options.valueField()];
+          n.title = nodeData[this.options.labelField()];
+          n.icon = nodeData[this.options.iconField()];
+          n.keys = (parent?.keys ?? []).concat([n.key]);
+          n.data = nodeData;
+        }
+      }
+    }, this.options.levelStart() < 0 ? -1 : 0);
+    return treeData;
+  }
+
+  private initComponentValue() {
+    let value = untracked(this.value);
+    if (!untracked(this.options.multiple)) {
+      value = [value];
+    }
+    if (untracked(this.options.fullValue)) {
+      value = value.map((e: any) => e[untracked(this.options.valueField)]);
+    }
+    if (value) {
+      switch (untracked(this.options.type)) {
+        case "tree":
+          this.selectedKeys.set(value);
+          break;
+        case "input-tree":
+          if (!untracked(this.options.multiple)) {
+            value = value[0];
+          }
+          this.selectValue.set(value);
+          break;
+        case "cascader":
+          value = value.map((e: any) => this.treeNodeMap().get(e)?.['keys']);
+          if (!untracked(this.options.multiple)) {
+            value = value[0];
+          }
+          this.selectValue.set(value);
+          break;
+      }
+    }
+  }
+
+  nodeClick(e: NzFormatEmitEvent) {
+    if (!e.node!.isSelectable) {
+      if (e.node && !e.node.isLeaf) {
+        e.node!.isExpanded = !e.node!.isExpanded;
+      }
+      return;
+    } else if (!e.node!.isSelected && e.keys?.length == 0 && !this.options.allowClear()) {
+      e.node!.isSelected = true;
+      return;
+    }
+    if (this.options.readonly() || this.options.disabled()) {
+      e.node!.isSelected = false;
+      return;
+    }
+    const value = this.treeNodeToValue(e.selectedKeys?.filter(e => e.isSelected) ?? []);
+    this.value.set(value);
+    this.onChange?.(this.value());
+  }
+
+  private treeNodeToValue(nodes: NzTreeNode[]): any {
+    return this.fullArrayToValue(nodes.map(n => n.origin['data']));
+  }
+
+  private fullArrayToValue(fullArray: any[]): any {
+    let value: any = fullArray.map(n => {
+      const res: any = {};
+      for (const key in n) {
+        if (key !== "children") {
+          res[key] = n[key];
+        }
+      }
+      return res;
+    });
+    if (!untracked(this.options.fullValue)) {
+      value = fullArray.map(r => r[untracked(this.options.valueField)]);
+    }
+    if (!this.options.multiple()) {
+      value = value?.[0];
+    }
+    return value;
+  }
+
+  hasExpanded(node: NzTreeNode): boolean {
+    return node.isExpanded || node.children.some(c => this.hasExpanded(c));
+  }
+
+  expand(node: NzTreeNode, expanded: boolean) {
+    node.isExpanded = expanded;
+    node.children.forEach(c => this.expand(c, expanded));
+  }
+
+  onContextMenu(e: NzFormatEmitEvent) {
+    if (this.menu) {
+      this.menuNodeDs = { node: e.node?.origin["data"], level: e.node?.level };
+      this.menus().forEach((m, i) => {
+        this.bindWithConfig(this.options.menus()[i], { options: m, snapshot: true, tempDataSource: this.menuNodeDs });
+      });
+      this.menuService.create(e.event as MouseEvent, this.menu);
+    }
+  }
+
+  menuClick(options: TreeNodeMenuOptions) {
+    if (options.confirm()) {
+      this.modal.confirm({
+        nzContent: options.confirmText(),
+        nzOnOk: () => {
+          this.triggeEvents("treeNodeMenuClick", this.menuNodeDs, options.triggeEvents()).subscribe();
+        }
+      })
+    } else {
+      this.triggeEvents("treeNodeMenuClick", this.menuNodeDs, options.triggeEvents()).subscribe();
+    }
+  }
+
+  onInputTreeChange() {
+    const value = this.treeNodeToValue((this.options.multiple() ? this.treeSelect?.getCheckedNodeList() : this.treeSelect?.getSelectedNodeList()) ?? []);
+    this.value.set(value);
+    this.onChange?.(this.value());
+  }
+
+  onCascaderChange(v: any[]) {
+    const value = this.fullArrayToValue(this.options.multiple() ? v.map((e: any[]) => this.treeNodeMap().get(e[e.length - 1])!['data']) : [this.treeNodeMap().get(v[v.length - 1])!['data']]);
+    this.value.set(value);
+    this.onChange?.(this.value());
+  }
+
+}

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

@@ -0,0 +1,37 @@
+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: "upload",
+                children: [],
+            }),
+            next: [{
+                parentId: nextInfo.currentObject.id,
+                parentObject: nextInfo.currentObject,
+                scopeId: nextInfo.scopeId,
+                indexOfParent: "child"
+            }]
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element }
+        }
+    },
+};

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

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