ngx-axis-appforge 0.0.3 → 0.0.4

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

@@ -0,0 +1,8 @@
+:host {
+    display: block;
+    width: 100%;
+}
+
+nz-select{
+    width: 100%;
+}

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

@@ -0,0 +1,51 @@
+@if (options.readonly()) {
+{{displayValue()}}
+}@else {
+@if (options.type() == 'selector') {
+<nz-select #select [nzLoading]="loading()" [nzAutoFocus]="options.autofocus()" [nzShowSearch]="options.showSearch()"
+    [nzDisabled]="options.disabled()" [nzPlaceHolder]="options.placeholder()" [(ngModel)]="selectorValue"
+    (ngModelChange)="onSelectorChange($event)" [nzAllowClear]="options.allowClear()" (nzOnSearch)="searchChange($event)"
+    [nzDropdownStyle]="{display:(!options.showSearch() || !options.selectOnSearch() || (searchText() && searchText().length >= (options.searchLimitLength() || 1)))?'':'none'}"
+    [nzServerSearch]="options.backendSearch()">
+    @if (loading()) {
+    <nz-option nzDisabled nzCustomContent>
+        @if (searchText() && searchText().length >= (options.searchLimitLength() || 1)) {
+        <span nz-icon nzType="loading"></span>
+        加载中...
+        }@else {
+        <div style="color: rgba(0, 0, 0, 0.8);">
+            <span nz-icon nzType="info-circle"></span>
+            至少输入{{options.searchLimitLength() || 1}}个字符
+        </div>
+        }
+    </nz-option>
+    }@else {
+    @if (options.showAll()) {
+    <nz-option nzValue="" nzLabel="全部"></nz-option>
+    }
+    @for (o of options.data(); track o[options.valueField()]) {
+    <nz-option [nzValue]="o[options.valueField()]" [nzLabel]="o[options.labelField()]"></nz-option>
+    }
+    }
+</nz-select>
+}@else {
+<nz-radio-group [nzDisabled]="options.disabled()" [(ngModel)]="selectorValue" (ngModelChange)="onSelectorChange($event)"
+    nzButtonStyle="solid">
+    @if (options.type() == 'radio') {
+    @if (options.showAll()) {
+    <label nz-radio nzValue="">全部</label>
+    }
+    @for (o of options.data(); track o[options.valueField()]) {
+    <label nz-radio [nzValue]="o[options.valueField()]">{{o[options.labelField()]}}</label>
+    }
+    }@else {
+    @if (options.showAll()) {
+    <label nz-radio-button nz-radio nzValue="">全部</label>
+    }
+    @for (o of options.data(); track o[options.valueField()]) {
+    <label nz-radio-button nz-radio [nzValue]="o[options.labelField()]">{{o[options.labelField()]}}</label>
+    }
+    }
+</nz-radio-group>
+}
+}

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

@@ -0,0 +1,22 @@
+import { signal } from "@angular/core";
+import { ValueAccessOptions } from "ngx-axis-appforge/core";
+
+export class SingleSelectorOptions extends ValueAccessOptions {
+
+    readonly labelField = signal("title");
+    readonly valueField = signal("key");
+    readonly fullValue = signal(false);
+    readonly defaultFirst = signal(false);
+    readonly autofocus = signal(false);
+    readonly data = signal<any>(undefined);
+
+    readonly type = signal<"selector" | "radio" | "button">("selector");
+    readonly showAll = signal(false);
+    readonly allowClear = signal(true);
+    readonly placeholder = signal("");
+
+    readonly showSearch = signal(true);
+    readonly selectOnSearch = signal(false);
+    readonly backendSearch = signal(false);
+    readonly searchLimitLength = signal<number | null>(null);
+}

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

@@ -0,0 +1,80 @@
+import { ChangeDetectionStrategy, Component, effect, model, OnInit, signal, untracked } from '@angular/core';
+import { SingleSelectorOptions } from './single-selector.options';
+import { ValueAccess } from 'ngx-axis-appforge/core';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { FormsModule } from '@angular/forms';
+import { take } from 'rxjs';
+import { toObservable } from '@angular/core/rxjs-interop';
+
+@Component({
+  selector: 'axis-single-selector',
+  imports: [NzSelectModule, NzRadioModule, FormsModule],
+  templateUrl: './single-selector.html',
+  styleUrl: './single-selector.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SingleSelector extends ValueAccess<SingleSelectorOptions> implements OnInit {
+
+  constructor() {
+    super();
+    effect(() => {
+      if (untracked(this.options.defaultFirst)) {
+        const data = this.options.data();
+        if (data?.length) {
+          this.setInitValue(data[0][untracked(this.options.valueField)]);
+        }
+      }
+    });
+  }
+  override options: SingleSelectorOptions = new SingleSelectorOptions();
+
+  readonly displayValue = signal<any>(undefined);
+  readonly loading = signal(false);
+  readonly selectorValue = model<any>();
+  readonly searchText = signal<string>("");
+
+  override writeValue(value: any): void {
+    super.writeValue(value);
+    if (value != undefined) {
+      if (this.options.fullValue()) {
+        this.selectorValue.set(value[this.options.valueField()]);
+      } else {
+        this.selectorValue.set(value);
+      }
+    }
+  }
+
+  ngOnInit(): void {
+    if (this.options.defaultFirst()) {
+      if (this.options.data() !== undefined) {
+        if (this.options.data()?.length) {
+          this.selectorValue.set(this.options.data()[0][this.options.valueField()]);
+          this.onSelectorChange(this.selectorValue());
+          this.registValueAccess({ initValue: this.options.data()[0][this.options.valueField()] })
+        }
+      } else {
+        this.addSubscribe(toObservable(this.options.data).pipe(take(1)).subscribe(data => {
+          if (data?.length) {
+            this.selectorValue.set(data[0][this.options.valueField()]);
+            this.onSelectorChange(this.selectorValue());
+            this.registValueAccess({ initValue: this.selectorValue() });
+          }
+        }));
+      }
+    }
+  }
+
+  onSelectorChange(value: any) {
+    if (this.options.fullValue()) {
+      this.value.set(this.options.data().find((item: any) => item[this.options.valueField()] == value));
+    } else {
+      this.value.set(value);
+    }
+    this.onChange?.(this.value());
+  }
+
+  searchChange(input: string) {
+
+  }
+}

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

@@ -0,0 +1,84 @@
+import { NextInfo, DesignBuildResult, DesignBindElementsResult, DesignConfig, OptionsNode, SimpleMenu } from "ngx-axis-appforge/core";
+import { SplitterSetting } from "./splitter-setting/splitter-setting";
+import { SplitterPanelSetting } from "./splitter-panel-setting/splitter-panel-setting";
+import { SplitterMenu } from "./splitter-menu/splitter-menu";
+
+export const Config: DesignConfig = {
+
+    componentName: "分隔面板",
+    buildOptionsNodes(nextInfo: NextInfo): DesignBuildResult {
+        const next: NextInfo[] = [];
+        const children: OptionsNode[] = [];
+        nextInfo.currentObject.panels?.forEach((p: any, i: number) => {
+            next.push({
+                parentId: nextInfo.currentObject.id + "." + i,
+                parentObject: p,
+                indexOfParent: "child",
+                scopeId: nextInfo.scopeId
+            });
+            children.push(new OptionsNode({
+                id: nextInfo.currentObject.id + "." + i,
+                scopeId: nextInfo.scopeId,
+                parentId: nextInfo.currentObject.id,
+                parentObj: nextInfo.currentObject.panels,
+                indexOfParentObj: i,
+                rootOptions: p,
+                name: `面板[${i + 1}]`,
+                icon: "border-right",
+                canSetting: true,
+                settingType: SplitterPanelSetting,
+                contextMenu: SimpleMenu,
+                canDrag: true,
+                dragType: "axis-components/splitter/splitter-panel",
+                canDrop: true,
+                dropType: "component",
+                dropObj: p,
+                defaultDropIndex: "child",
+                children: []
+            }));
+        });
+        return {
+            treeNode: new OptionsNode({
+                parentId: nextInfo.parentId,
+                scopeId: nextInfo.scopeId,
+                name: "分隔面板",
+                children: children,
+                canSetting: true,
+                canDrag: true,
+                dragType: "component",
+                canDrop: true,
+                childDirection: nextInfo.currentObject.direction,
+                dropType: "axis-components/splitter/splitter-panel",
+                dropObj: nextInfo.currentObject.panels,
+                defaultDropIndex: nextInfo.currentObject.panels.length,
+                parentObj: nextInfo.parentObject,
+                indexOfParentObj: nextInfo.indexOfParent,
+                rootOptions: nextInfo.currentObject,
+                settingType: SplitterSetting,
+                contextMenu: SplitterMenu,
+                icon: "border-horizontal"
+            }),
+            next: next
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        const res: DesignBindElementsResult = {
+            [options.id]: {
+                element: element,
+                dropElement: element
+            }
+        };
+        const panels = element.querySelectorAll(".ant-splitter-panel>div[data-index]");
+        panels.forEach((e) => {
+            const element = e.parentElement;
+            res[`${options.id}.${(e as HTMLElement).dataset['index']}`] = {
+                element: element!,
+                dropElement: element!
+            }
+        });
+        return res;
+    },
+};
+
+
+

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

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

package/axis-components/splitter/design/splitter-menu/splitter-menu.html

@@ -0,0 +1,10 @@
+<nz-dropdown-menu #menu="nzDropdownMenu">
+    <ul nz-menu>
+        <li nz-menu-item (click)="addPanel()">
+            <i nz-icon nzType="plus" nzTheme="outline"></i>
+            <nz-divider nzType="vertical"></nz-divider>
+            <span>添加面板</span>
+        </li>
+        <axis-common-menu [baseMenu]="this"></axis-common-menu>
+    </ul>
+</nz-dropdown-menu>

package/axis-components/splitter/design/splitter-menu/splitter-menu.ts

@@ -0,0 +1,22 @@
+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, CommonMenu } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-splitter-menu',
+  imports: [NzDropDownModule, NzDividerModule, NzIconModule, CommonMenu],
+  templateUrl: './splitter-menu.html',
+  styleUrl: './splitter-menu.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SplitterMenu extends BaseMenu {
+
+  addPanel() {
+    this.optionsNodes.current.options.panels.push({
+      inuse: true,
+    });
+    this.onChange();
+  }
+}

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

@@ -0,0 +1,66 @@
+<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="inuse">
+                        <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="defaultSize">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </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="min">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </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="max">
+                        <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="collapsible">
+                        <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="resizable">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+    </nz-collapse>
+</form>

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

@@ -0,0 +1,47 @@
+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 { FormValidators, FunField, FunFieldOptions, FunFieldValueBase } from 'ngx-axis-appforge/core';
+import { NzSwitchComponent } from "ng-zorro-antd/switch";
+
+@Component({
+  selector: 'axis-design-splitter-panel-setting',
+  imports: [FormsModule, ReactiveFormsModule, NzFormModule, NzCollapseModule, FunField, NzInputModule, NzSwitchComponent],
+  templateUrl: './splitter-panel-setting.html',
+  styleUrl: './splitter-panel-setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SplitterPanelSetting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    inuse: [undefined, FormValidators.requiredFun],
+    defaultSize: [],
+    min: [],
+    max: [],
+    collapsible: [undefined, FormValidators.requiredFun],
+    resizable: [undefined, FormValidators.requiredFun],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    inuse: {
+      defaultValue: true
+    },
+    defaultSize: {
+      defaultValue: undefined
+    },
+    min: {
+      defaultValue: undefined
+    },
+    max: {
+      defaultValue: undefined
+    },
+    collapsible: {
+      defaultValue: true
+    },
+    resizable: {
+      defaultValue: true
+    },
+  };
+}

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

@@ -0,0 +1,28 @@
+<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">
+                    <nz-radio-group formControlName="direction">
+                        <label nz-radio-button nzValue="horizontal">水平</label>
+                        <label nz-radio-button nzValue="vertical">垂直</label>
+                    </nz-radio-group>
+                </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="lazy">
+                        <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>
+    </nz-collapse>
+</form>

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

@@ -0,0 +1,30 @@
+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 { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { BaseDesignSetting, baseFbConfig, baseFunField, FormValidators, FunField, FunFieldOptions, FunFieldValueBase } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-splitter-setting',
+  imports: [FormsModule, ReactiveFormsModule, NzFormModule, NzCollapseModule, FunField, NzRadioModule, BaseDesignSetting, NzSwitchModule],
+  templateUrl: './splitter-setting.html',
+  styleUrl: './splitter-setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SplitterSetting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    direction: ["horizontal", FormValidators.required],
+    lazy: [undefined, FormValidators.requiredFun],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    lazy: {
+      defaultValue: false
+    }
+  };
+}

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

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

package/axis-components/splitter/splitter.css

@@ -0,0 +1,7 @@
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}

package/axis-components/splitter/splitter.html

@@ -0,0 +1,12 @@
+<nz-splitter [nzLayout]="options.direction()" [nzLazy]="options.lazy()">
+    @for (item of panels(); track $index;let i=$index) {
+    @if (item.inuse()) {
+    <nz-splitter-panel [nzCollapsible]="item.collapsible()" [nzDefaultSize]="convertSize(item.defaultSize())"
+        [nzMin]="convertSize(item.min())" [nzMax]="convertSize(item.max())" [nzResizable]="item.resizable()">
+        <div [attr.data-index]="i" style="height: 100%;">
+            <ng-container [axisDynamic]="item.child()"></ng-container>
+        </div>
+    </nz-splitter-panel>
+    }
+    }
+</nz-splitter>

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

@@ -0,0 +1,18 @@
+import { signal } from "@angular/core";
+import { BaseOptions } from "ngx-axis-appforge/core";
+
+export class SplitterOptions extends BaseOptions {
+    readonly direction = signal<"horizontal" | "vertical">("horizontal");
+    readonly lazy = signal(false);
+    readonly panels = signal<any[]>([]);
+}
+
+export class SplitterPanelOptions {
+    readonly inuse = signal(true);
+    readonly defaultSize = signal<string | undefined>(undefined);
+    readonly min = signal<string | undefined>(undefined);
+    readonly max = signal<string | undefined>(undefined);
+    readonly collapsible = signal(true);
+    readonly resizable = signal(true);
+    readonly child = signal<any>(undefined);
+}

package/axis-components/splitter/splitter.ts

@@ -0,0 +1,40 @@
+import { Component, computed, effect } from '@angular/core';
+import { SplitterOptions, SplitterPanelOptions } from './splitter.options';
+import { DynamicDirective, Base } from 'ngx-axis-appforge/core';
+import { NzSplitterModule } from 'ng-zorro-antd/splitter';
+
+@Component({
+  selector: 'axis-splitter',
+  imports: [DynamicDirective, NzSplitterModule],
+  templateUrl: './splitter.html',
+  styleUrl: './splitter.css'
+})
+export class Splitter extends Base<SplitterOptions> {
+
+  constructor() {
+    super();
+    effect(() => {
+      this.panels().forEach((p, i) => {
+        this.bindWithConfig(this.options.panels()[i], { options: p, tag: `bindPanels.${i}` });
+      });
+    });
+  }
+
+  protected override options: SplitterOptions = new SplitterOptions();
+  readonly panels = computed(() => this.buildPanels());
+
+  private buildPanels(): SplitterPanelOptions[] {
+    return this.options.panels().map(_ => new SplitterPanelOptions());
+  }
+
+  convertSize(value: string | undefined): number | string | undefined {
+    if (value) {
+      if (value.endsWith("%")) {
+        return value;
+      } else {
+        return parseInt(value.replace("px", ""));
+      }
+    }
+    return undefined;
+  }
+}