ngx-axis-appforge 0.0.3 → 0.0.4

package/axis-components/textarea/textarea.html

@@ -0,0 +1,11 @@
+@if (options.readonly()) {
+<span>
+    {{value()}}
+</span>
+}@else {
+<textarea nz-input [nzVariant]="options.variant()" [disabled]="options.disabled()" [(ngModel)]="inputValue"
+    (ngModelChange)="inputSubject.next($event)" [placeholder]="options.placeholder()"
+    [maxLength]="options.maxlength()||9999999" [rows]="options.rows()" [nzAutosize]="options.autoResize()"
+    [style.resize]="options.resize()?'vertical':'none'">
+    </textarea>
+}

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

@@ -0,0 +1,13 @@
+import { signal } from "@angular/core";
+import { ValueAccessOptions } from "ngx-axis-appforge/core";
+
+export class TextareaOptions extends ValueAccessOptions {
+
+    readonly placeholder = signal("");
+    readonly maxlength = signal<number | null>(null);
+    readonly debounceTime = signal<number | null>(null);
+    readonly variant = signal<'outlined' | 'borderless' | 'filled' | 'underlined'>("outlined");
+    readonly rows = signal(5);
+    readonly autoResize = signal(false);
+    readonly resize = signal(true);
+}

package/axis-components/textarea/textarea.ts

@@ -0,0 +1,49 @@
+import { ChangeDetectionStrategy, Component, effect, model } from '@angular/core';
+import { TextareaOptions } from './textarea.options';
+import { FormsModule } from '@angular/forms';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { ValueAccess } from 'ngx-axis-appforge/core';
+import { debounceTime, Subject } from 'rxjs';
+
+@Component({
+  selector: 'axis-textarea',
+  imports: [NzInputModule, FormsModule],
+  templateUrl: './textarea.html',
+  styleUrl: './textarea.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Textarea extends ValueAccess<TextareaOptions> {
+  constructor() {
+    super();
+    effect(() => {
+      this.unsubscribe(["change"]);
+      if (this.options.debounceTime() ?? 0 > 0) {
+        this.addSubscribe(this.inputSubject.pipe(debounceTime(this.options.debounceTime()!)).subscribe(value => {
+          this.value.set(value);
+          this.onChange?.(value);
+        }), "change");
+      } else {
+        this.addSubscribe(this.inputSubject.subscribe(value => {
+          this.value.set(value);
+          this.onChange?.(value);
+        }), "change");
+      }
+    });
+    effect(() => {
+      if (this.options.initValue() !== undefined) {
+        this.inputValue.set(this.options.initValue());
+      }
+    })
+  }
+
+  override options: TextareaOptions = new TextareaOptions();
+
+  readonly inputValue = model<string>();
+  readonly inputSubject = new Subject();
+
+  override writeValue(value: any): void {
+    super.writeValue(value);
+    this.inputValue.set(value);
+  }
+
+}

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

@@ -0,0 +1,55 @@
+import { NextInfo, DesignBuildResult, DesignBindElementsResult, DesignConfig, OptionsNode, SimpleMenu, nameCode } from "ngx-axis-appforge/core";
+import { TreeSelectorMenuSetting } from "./tree-selector-menu-setting/tree-selector-menu-setting";
+import { TreeSelectorSetting } from "./tree-selector-setting/tree-selector-setting";
+import { TreeSelectorMenu } from "./tree-selector-menu/tree-selector-menu";
+
+export const Config: DesignConfig = {
+
+    componentName: "树选择器",
+    buildOptionsNodes(nextInfo: NextInfo): DesignBuildResult {
+        const children: OptionsNode[] = [];
+        nextInfo.currentObject.menus?.forEach((m: any, i: number) => {
+            children.push(new OptionsNode({
+                id: nextInfo.currentObject.id + "." + i,
+                parentId: nextInfo.currentObject.id,
+                parentObj: nextInfo.currentObject.menus,
+                scopeId: nextInfo.scopeId,
+                rootOptions: m,
+                indexOfParentObj: i,
+                name: nameCode("菜单", m.title),
+                icon: "menu",
+                canSetting: true,
+                settingType: TreeSelectorMenuSetting,
+                canDrag: true,
+                dragType: "axis-components/tree-selector/tree-selector-menu",
+                contextMenu: SimpleMenu,
+            }));
+        });
+        return {
+            treeNode: new OptionsNode({
+                parentId: nextInfo.parentId,
+                scopeId: nextInfo.scopeId,
+                name: "树选择器",
+                canSetting: true,
+                canDrag: true,
+                dragType: "component",
+                canDrop: true,
+                dropType: "axis-components/tree-selector/tree-selector-menu",
+                dropObj: nextInfo.currentObject.menus,
+                defaultDropIndex: nextInfo.currentObject.menus.length,
+                parentObj: nextInfo.parentObject,
+                indexOfParentObj: nextInfo.indexOfParent,
+                rootOptions: nextInfo.currentObject,
+                settingType: TreeSelectorSetting,
+                contextMenu: TreeSelectorMenu,
+                icon: "partition",
+                children: children
+            }),
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element },
+        }
+    },
+};

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

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

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

@@ -0,0 +1,9 @@
+<nz-dropdown-menu #menu="nzDropdownMenu">
+    <ul nz-menu>
+        <li nz-menu-item (click)="addMenu()">
+            <i nz-icon nzType="plus" nzTheme="outline"></i>
+            <nz-divider nzType="vertical"></nz-divider>
+            <span>添加菜单</span>
+        </li>
+    </ul>
+</nz-dropdown-menu>

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

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { BaseMenu } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-tree-selector-menu',
+  imports: [NzDropDownModule, NzDividerModule, NzIconModule],
+  templateUrl: './tree-selector-menu.html',
+  styleUrl: './tree-selector-menu.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TreeSelectorMenu extends BaseMenu {
+
+  addMenu() {
+    if (!this.optionsNodes.current.options.menus) {
+      this.optionsNodes.current.options.menus = [];
+    }
+    this.optionsNodes.current.options.menus.push({
+      title: "未命名",
+      inuse: true,
+    });
+    this.onChange();
+  }
+}

package/axis-components/tree-selector/design/tree-selector-menu-setting/tree-selector-menu-setting.html

@@ -0,0 +1,80 @@
+<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" [scopes]="menuScopes" [noListen]="true">
+                        <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="inuse" [scopes]="menuScopes" [noListen]="true">
+                        <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="icon" [scopes]="menuScopes" [noListen]="true">
+                        <ng-container [axisDynamic]="{component:'axis-components/input-icon',inuse:true}"
+                            [standalone]="true" ngModel [ngModelOptions]="{standalone:true}"></ng-container>
+                    </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="danger" [scopes]="menuScopes" [noListen]="true">
+                        <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="disabled" [scopes]="menuScopes" [noListen]="true">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="10" nzRequired>
+                    开启确认提示
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="confirm" [scopes]="menuScopes" [noListen]="true">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue()?.confirm.funMode || formValue()?.confirm.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="10">
+                    确认文本
+                </nz-form-label>
+                <nz-form-control nzSpan="14">
+                    <axis-fun-field formControlName="confirmText" [scopes]="menuScopes" [noListen]="true">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+        </nz-collapse-panel>
+        <axis-input-trigger formControlName="triggeEvents" [eventDesc]="menuDs"></axis-input-trigger>
+    </nz-collapse>
+</form>

package/axis-components/tree-selector/design/tree-selector-menu-setting/tree-selector-menu-setting.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { DynamicDirective, EventDesc, FormValidators, FunField, FunFieldOptions, FunFieldValueBase, InputTrigger, ScopeInfo } from 'ngx-axis-appforge/core';
+import { NzInputNumberModule } from "ng-zorro-antd/input-number";
+
+@Component({
+  selector: 'axis-design-tree-selector-menu-setting',
+  imports: [FormsModule, NzCollapseModule, ReactiveFormsModule, NzFormModule, NzAutocompleteModule, NzInputModule, NzSelectModule, FunField, DynamicDirective, NzSwitchModule, NzInputNumberModule, InputTrigger],
+  templateUrl: './tree-selector-menu-setting.html',
+  styleUrl: './tree-selector-menu-setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TreeSelectorMenuSetting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    title: [undefined, FormValidators.requiredFun],
+    inuse: [undefined, FormValidators.requiredFun],
+    icon: [],
+    danger: [undefined, FormValidators.requiredFun],
+    confirm: [undefined, FormValidators.requiredFun],
+    confirmText: [undefined, FormValidators.requiredFun],
+    disabled: [undefined, FormValidators.requiredFun],
+    triggeEvents: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    title: {
+      defaultValue: "未命名"
+    },
+    inuse: {
+      defaultValue: true
+    },
+    icon: {
+      defaultValue: undefined
+    },
+    danger: {
+      defaultValue: false
+    },
+    confirm: {
+      defaultValue: false
+    },
+    confirmText: {
+      defaultValue: "是否确认？"
+    },
+    disabled: {
+      defaultValue: false
+    },
+  };
+
+  readonly menuDs: EventDesc[] = [{ name: 'treeNodeMenuClick', title: '点击菜单', ds: { node: { tip: '模拟数据' }, level: 0 } }];
+  readonly menuScopes: ScopeInfo[] = [{ scopeId: '__treeNodeMenu__', scopeName: "树节点", ds: { node: { tip: '模拟数据' }, level: 0 } }];
+}

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

@@ -0,0 +1,235 @@
+<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">
+                    <input nz-input formControlName="valueField" [nzAutocomplete]="fieldAuto" />
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    名称字段
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <input nz-input formControlName="labelField" [nzAutocomplete]="fieldAuto" />
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    可选中字段
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <input nz-input formControlName="selectableField" [nzAutocomplete]="fieldAuto" />
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    图标字段
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <input nz-input formControlName="iconField" [nzAutocomplete]="fieldAuto" />
+                </nz-form-control>
+            </nz-form-item>
+            <nz-autocomplete #fieldAuto nzBackfill>
+                @for (f of fields(); track f) {
+                <nz-auto-option [nzLabel]="f" [nzValue]="f">
+                    {{f}}
+                </nz-auto-option>
+                }
+            </nz-autocomplete>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    完整对象值
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-switch formControlName="fullValue"></nz-switch>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired nzTooltipTitle="-1时，出现【全部】节点">
+                    开始层级
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-input-number formControlName="levelStart" style="width: 100%;" [nzMin]="-1"></nz-input-number>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    结束层级
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-input-number formControlName="levelEnd" style="width: 100%;" [nzMin]="-1"></nz-input-number>
+                </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 #data formControlName="data">
+                        <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-form-item>
+                <nz-form-label nzSpan="8">
+                    节点函数
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="nodeFn" [noListen]="true" [onlyFun]="true"
+                        [scopes]="[{scopeId:formValue().id+'.node',scopeName:'树节点',ds:{node:dataFunField.computeResult()?.[0]??{key:'模拟数据',title:'模拟数据'},level:0}}]"></axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <nz-collapse-panel nzHeader="选择设置">
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzTooltipTitle="用逗号分隔，例:1,2,3">
+                    可选层级
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <input nz-input formControlName="selectAbleLevel" placeholder="例:1,2,3" />
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    多选
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-switch formControlName="multiple"></nz-switch>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue()?.multiple) {
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    最大选中数
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-input-number formControlName="maxSelectCount" style="width: 100%;"
+                        [nzMin]="0"></nz-input-number>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    默认第一项
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-switch formControlName="defaultFirst"></nz-switch>
+                </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="allowClear">
+                        <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">
+                    <nz-select formControlName="type">
+                        <nz-option nzLabel="树视图" nzValue="tree"></nz-option>
+                        <nz-option nzLabel="树选择框" nzValue="input-tree"></nz-option>
+                        <nz-option nzLabel="级联选择器" nzValue="cascader"></nz-option>
+                    </nz-select>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue()?.type == "tree") {
+            <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>
+            }@else {
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    占位文本
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="placeHolder">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            @if ( formValue()?.type != "cascader") {
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    默认展开层级
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-input-number formControlName="expandedLevel" style="width: 100%;"
+                        [nzMin]="-1"></nz-input-number>
+                </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="showSearch">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue()?.showSearch.funMode || formValue()?.showSearch.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    隐藏未匹配
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="hideUnMatched">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            @if (formValue()?.type != "cascader"){
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    连接线
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="showLine">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </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="expandTrigger">
+                        <nz-radio-group ngModel [ngModelOptions]="{standalone:true}">
+                            <label nz-radio-button nzValue="click">点击</label>
+                            <label nz-radio-button nzValue="hover">触摸</label>
+                        </nz-radio-group>
+                    </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/tree-selector/design/tree-selector-setting/tree-selector-setting.ts

@@ -0,0 +1,87 @@
+import { ChangeDetectionStrategy, Component, computed, ViewChild } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { BaseDesignSetting, baseFbConfig, baseFunField, DynamicDirective, FormValidators, FunField, FunFieldOptions, FunFieldValueBase, InputTrigger, ValueDesignSetting, valueFbConfig, valueFunField } from 'ngx-axis-appforge/core';
+import { NzInputNumberModule } from "ng-zorro-antd/input-number";
+import { NzRadioModule } from "ng-zorro-antd/radio";
+
+@Component({
+  selector: 'axis-design-tree-selector-setting',
+  imports: [FormsModule, NzCollapseModule, ReactiveFormsModule, NzFormModule, BaseDesignSetting, ValueDesignSetting, NzAutocompleteModule, NzInputModule, NzSelectModule, FunField, DynamicDirective, NzSwitchModule, NzInputNumberModule, InputTrigger, NzRadioModule],
+  templateUrl: './tree-selector-setting.html',
+  styleUrl: './tree-selector-setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TreeSelectorSetting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    ...valueFbConfig,
+    labelField: ["title", FormValidators.required],
+    valueField: ["key", FormValidators.required],
+    selectableField: ["selectable", FormValidators.required],
+    iconField: ["icon", FormValidators.required],
+    fullValue: [false, FormValidators.required],
+    levelStart: [0, FormValidators.required],
+    levelEnd: [],
+    data: [],
+    nodeFn: [],
+    selectAbleLevel: [undefined, [FormValidators.pattern(/^\d+(?:,\d+)*$/)]],
+    multiple: [false, FormValidators.required],
+    maxSelectCount: [],
+    defaultFirst: [false, FormValidators.required],
+    allowClear: [undefined, FormValidators.requiredFun],
+    type: ["tree", FormValidators.required],
+    title: [],
+    placeHolder: [],
+    expandedLevel: [],
+    showSearch: [undefined, FormValidators.requiredFun],
+    hideUnMatched: [undefined, FormValidators.requiredFun],
+    showLine: [undefined, FormValidators.requiredFun],
+    expandTrigger: [undefined, FormValidators.requiredFun],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    ...valueFunField,
+    data: {
+      defaultValue: undefined
+    },
+    allowClear: {
+      defaultValue: true
+    },
+    title: {
+      defaultValue: ""
+    },
+    placeHolder: {
+      defaultValue: ""
+    },
+    showSearch: {
+      defaultValue: true
+    },
+    hideUnMatched: {
+      defaultValue: true
+    },
+    showLine: {
+      defaultValue: false
+    },
+    expandTrigger: {
+      defaultValue: "click"
+    },
+  };
+
+  @ViewChild("data", { static: true })
+  dataFunField!: FunField;
+
+  fields = computed(() => {
+    if (this.dataFunField.computeResult()?.length) {
+      return Object.keys(this.dataFunField.computeResult()[0]);
+    }
+    return [];
+  })
+}

package/axis-components/tree-selector/ng-package.json

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