ngx-axis-appforge 0.0.4 → 0.0.6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/axis-components/splitter/splitter.css

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

package/axis-components/splitter/splitter.html

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

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

@@ -1,40 +0,0 @@
-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;
-  }
-}