ngx-axis-appforge 0.0.0

package/axis-components/scope/design/setting/datasource-editor/datasource-editor.ts

@@ -0,0 +1,245 @@
+import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, forwardRef, inject, input, model, signal } from "@angular/core";
+import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, UntypedFormGroup } from "@angular/forms";
+import { AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN, copy, DataSourceOptions, DynamicDirective, FormValidators, FunField, FunFieldBase, FunFieldOptions, ScopeInfo, updateAndValidAll } from "ngx-axis-appforge/core";
+import { NzGridModule } from "ng-zorro-antd/grid";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { NzListModule } from "ng-zorro-antd/list";
+import { NzSpaceModule } from "ng-zorro-antd/space";
+import { NzTagModule } from "ng-zorro-antd/tag";
+import { NzEmptyModule } from "ng-zorro-antd/empty";
+import { NzMessageService } from "ng-zorro-antd/message";
+import { NzButtonModule } from "ng-zorro-antd/button";
+import { NzModalModule } from "ng-zorro-antd/modal";
+import { NzCollapseModule } from "ng-zorro-antd/collapse";
+import { NzFormModule } from "ng-zorro-antd/form";
+import { NzRadioModule } from "ng-zorro-antd/radio";
+import { NzSelectModule } from "ng-zorro-antd/select";
+import { NzInputModule } from "ng-zorro-antd/input";
+import { NzSwitchModule } from "ng-zorro-antd/switch";
+import { CommonModule } from "@angular/common";
+import { BehaviorSubject, map, Subscription, tap } from "rxjs";
+import { CdkDragDrop, CdkDropList, CdkDrag, moveItemInArray, CdkDragHandle } from '@angular/cdk/drag-drop';
+import { NzFlexModule } from "ng-zorro-antd/flex";
+
+
+@Component({
+    selector: 'axis-design-scope-setting-datasource-editor',
+    imports: [NzListModule, NzTagModule, NzSpaceModule, NzGridModule, NzIconModule, NzEmptyModule, NzButtonModule, NzModalModule, DynamicDirective, FormsModule, NzCollapseModule, NzFormModule, ReactiveFormsModule, NzRadioModule, FunField, NzSelectModule, NzInputModule, NzSwitchModule, CommonModule, CdkDropList, CdkDrag, CdkDragHandle, NzFlexModule],
+    templateUrl: './datasource-editor.html',
+    styleUrl: './datasource-editor.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => DataSourceEditor),
+            multi: true
+        },
+    ]
+})
+export class DataSourceEditor extends FunFieldBase implements ControlValueAccessor {
+
+    constructor(private element: ElementRef) {
+        super();
+        effect(() => this.refreshCurrentScopeInfo());
+    }
+
+    readonly scopeId = input<string>();
+    private readonly msg = inject(NzMessageService);
+    readonly getScopeInfos = inject(AXIS_DESIGN_SCOPE_INFOS_GETTER_TOKEN);
+    readonly currentScopeInfo = signal<ScopeInfo | undefined>(undefined);
+    readonly value = model<DataSourceOptions[]>();
+    readonly ds = computed(() => this.buildDs());
+    readonly internalDataSources = computed(() => this.buildInternalDataSources());
+    readonly showDataSource = signal<any>(undefined);
+    readonly showLine = signal(false);
+    onChange: any;
+    sub?: Subscription;
+
+    override fg: UntypedFormGroup = this.fb.group({
+        name: [undefined, [FormValidators.required, FormValidators.pattern(/^[a-zA-Z_][a-zA-Z_0-9@\$]*$/)]],
+        skipOnExists: [false, FormValidators.required],
+        type: ['local', FormValidators.required],
+        api: this.fb.group({
+            url: [],
+            method: ["get", FormValidators.required],
+            body: [],
+        }),
+        data: [],
+        injectField: [],
+        cacheKey: [],
+    });
+    protected override funFields: FunFieldOptions = {
+        api: {
+            child: {
+                url: {
+                    defaultValue: "",
+                },
+                method: {
+                    defaultValue: "get",
+                },
+                body: {
+                    defaultValue: null,
+                },
+            },
+        },
+        data: {
+            defaultValue: undefined
+        },
+        cacheKey: {
+            defaultValue: "",
+        },
+    };
+
+    readonly showModal = model(false);
+    editIndex = -1;
+    oldDataSourceName?: string;
+    dataSourceNameRepeat = signal(false);
+
+    writeValue(v: any): void {
+        this.value.set(v);
+    }
+    registerOnChange(fn: any): void {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn: any): void { }
+
+    copySuccess() {
+        this.msg.info("已复制");
+    }
+
+    ngAfterViewInit(): void {
+        if (this.element.nativeElement.nextElementSibling) {
+            this.showLine.set(true);
+        }
+    }
+
+    refreshCurrentScopeInfo() {
+        this.sub?.unsubscribe();
+        this.sub = this.getScopeInfos(this.scopeId()).pipe(map(sis => sis.find(scope => scope.scopeId == this.scopeId())))
+            .subscribe(si => {
+                this.currentScopeInfo.set(si);
+            });
+    }
+
+    private buildDs(): any {
+        const ds = this.currentScopeInfo() ? copy(this.currentScopeInfo()!.ds, true) : {};
+        for (const d of this.value() ?? []) {
+            if (!ds.hasOwnProperty(d.name)) {
+                ds[d.name] = "示例数据";
+            }
+        }
+        return ds;
+    }
+
+    private buildInternalDataSources(): DataSourceOptions[] {
+        const list: DataSourceOptions[] = [];
+        for (const name in this.currentScopeInfo()?.ds ?? {}) {
+            if (!this.value()?.some(d => d.name == name)) {
+                list.push({
+                    name: name,
+                    skipOnExists: false,
+                    type: "local",
+                    data: this.currentScopeInfo()!.ds[name]
+                })
+            }
+        }
+        return list;
+    }
+
+    openWithCreate() {
+        this.editIndex = -1;
+        this.oldDataSourceName = "";
+        this.reset({
+            name: "",
+            skipOnExists: false,
+            type: 'local'
+        });
+        this.changeType();
+        this.showModal.set(true);
+    }
+
+    changeType() {
+        const apiCtrl = this.fg.get("api") as UntypedFormGroup;
+        switch (this.fg.value.type) {
+            case "local":
+                apiCtrl.get("url")?.setValidators([]);
+                this.fg.get("injectField")?.setValidators([]);
+                this.fg.get("cacheKey")?.setValidators([]);
+                break;
+            case "api":
+                apiCtrl.get("url")?.setValidators(FormValidators.requiredFun);
+                this.fg.get("injectField")?.setValidators([]);
+                this.fg.get("cacheKey")?.setValidators([]);
+                break;
+            case "inject":
+                apiCtrl.get("url")?.setValidators([]);
+                this.fg.get("injectField")?.setValidators([FormValidators.required]);
+                this.fg.get("cacheKey")?.setValidators([]);
+                break;
+            case "cache":
+                apiCtrl.get("url")?.setValidators([]);
+                this.fg.get("injectField")?.setValidators([]);
+                this.fg.get("cacheKey")?.setValidators([FormValidators.required]);
+                break;
+        }
+    }
+
+    doShowDataSource(name: string) {
+        this.showDataSource.set({
+            name: name,
+            data: JSON.stringify(this.ds()[name], undefined, '\t')
+        });
+    }
+
+    updateDataSource(name: string) {
+        this.editIndex = this.value()!.findIndex((e: any) => e.name == name);
+        this.oldDataSourceName = name;
+        this.reset(this.value()![this.editIndex]);
+        this.changeType();
+        this.showModal.set(true);
+    }
+
+    dataSourceValid(name: string) {
+        const allDataSourceNames = new Set<string>();
+        for (const ds of this.internalDataSources()) {
+            allDataSourceNames.add(ds.name);
+        }
+        for (const ds of this.value() ?? []) {
+            allDataSourceNames.add(ds.name);
+        }
+        this.dataSourceNameRepeat.set(!!name && name != this.oldDataSourceName && allDataSourceNames.has(name));
+    }
+
+    save() {
+        if (updateAndValidAll(this.fg)) {
+            const nextValue = copy(this.value() ?? [], true);
+            const dataSource = this.recoverFunField(this.fg.value)
+            if (this.editIndex == -1) {
+                nextValue.push(dataSource);
+            } else {
+                nextValue[this.editIndex] = dataSource;
+            }
+            this.showModal.set(false);
+            this.value.set(nextValue);
+            this.onChange(this.value());
+        }
+    }
+
+    deleteDataSource(name: string) {
+        const index = this.value()!.findIndex((e: any) => e.name == name);
+        if (index != -1) {
+            this.value()!.splice(index, 1);
+            this.value.set([...this.value()!]);
+            this.onChange(this.value());
+        }
+    }
+
+    onDsDrop(e: CdkDragDrop<string[]>) {
+        if (e.previousIndex != e.currentIndex) {
+            moveItemInArray(this.value()!, e.previousIndex, e.currentIndex);
+            this.value.set([...this.value()!]);
+            this.onChange(this.value());
+        }
+    }
+
+}

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

@@ -0,0 +1,19 @@
+<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="scopeName" />
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <axis-design-scope-setting-datasource-editor [scopeId]="value().id"
+            formControlName="dataSources"></axis-design-scope-setting-datasource-editor>
+        <axis-base-design-setting [fg]="fg" [exclude]="excludeDs()" [scopeId]="value().id"></axis-base-design-setting>
+        <axis-input-trigger formControlName="triggeEvents"
+            [eventDesc]="[{name:'dataChange',title:'数据变化',noListen:false}]"></axis-input-trigger>
+    </nz-collapse>
+</form>

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

@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, computed } 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 { BaseDesignSetting, baseFbConfig, baseFunField, FormValidators, FunFieldValueBase, FunFieldOptions, DataSourceOptions, InputTrigger } from 'ngx-axis-appforge/core';
+import { DataSourceEditor } from './datasource-editor/datasource-editor';
+
+@Component({
+  selector: 'axis-design-scope-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, BaseDesignSetting, NzInputModule, DataSourceEditor, InputTrigger],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    scopeName: ["未命名", FormValidators.required],
+    dataSources: []
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+  };
+
+  excludeDs = computed(() => this.value().dataSources?.map((e: DataSourceOptions) => e.name))
+
+}

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

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

package/axis-components/scope/scope.css

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

package/axis-components/scope/scope.html

@@ -0,0 +1,4 @@
+<ng-container [axisScope]="options.id" [scopeName]="options.scopeName()" [isRoot]="true"
+    [dataSources]="options.dataSources()">
+    <ng-container [axisDynamic]="options.child()"></ng-container>
+</ng-container>

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

@@ -0,0 +1,8 @@
+import { signal } from "@angular/core";
+import { BaseOptions, DataSourceOptions } from "ngx-axis-appforge/core";
+
+export class ScopeOptions extends BaseOptions {
+    readonly scopeName = signal("未命名");
+    readonly dataSources = signal<DataSourceOptions[]>([]);
+    readonly child = signal<any>(undefined);
+}

package/axis-components/scope/scope.ts

@@ -0,0 +1,48 @@
+import { Component, effect, OnInit, ViewChild } from '@angular/core';
+import { ScopeOptions } from './scope.options';
+import { ScopeDirective, DynamicDirective, Base, EventHandlerOptions } from 'ngx-axis-appforge/core';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'axis-scope',
+  imports: [ScopeDirective, DynamicDirective],
+  templateUrl: './scope.html',
+  styleUrl: './scope.css',
+})
+export class Scope extends Base<ScopeOptions> {
+
+  constructor() {
+    super();
+    effect(() => this.listenDataChange());
+  }
+
+  protected override options: ScopeOptions = new ScopeOptions();
+
+  @ViewChild(ScopeDirective, { static: true })
+  childScope!: ScopeDirective;
+
+  override triggeEvents(trigger: string, tempDataSource?: any, triggeEvents?: { [trigger: string]: EventHandlerOptions<any>[]; }, scope?: ScopeDirective): Observable<boolean> {
+    return super.triggeEvents(trigger, tempDataSource, triggeEvents, scope ?? this.childScope);
+  }
+
+  override triggeEvent(e: EventHandlerOptions<unknown>, scope?: ScopeDirective): Observable<boolean> {
+    return super.triggeEvent(e, scope ?? this.childScope);
+  }
+
+  listenDataChange(): void {
+    this.unsubscribe(["dataChange"]);
+    const dataChangeHandlers = this.options.triggeEvents()?.["dataChange"];
+    if (dataChangeHandlers) {
+      for (const handler of dataChangeHandlers) {
+        const io = this.childScope.dynamicOptions(handler, true);
+        if (io.init) {
+          this.triggeEvents("dataChange", undefined, { dataChange: [handler] }).subscribe();
+        }
+        if (io.obs) {
+          this.addSubscribe(io.obs.subscribe(_ => this.triggeEvents("dataChange", undefined, { dataChange: [handler] }).subscribe()), "dataChange");
+        }
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,30 @@
+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: "select",
+            }),
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element },
+        }
+    },
+};

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

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

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

@@ -0,0 +1,164 @@
+<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-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">
+                    <axis-fun-field formControlName="showAll">
+                        <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">
+                    <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">
+                    <nz-switch formControlName="fullValue"></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 #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-collapse-panel>
+        <nz-collapse-panel nzHeader="外观设置">
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    选择器类型
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="type">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                            <nz-option nzLabel="下拉选择" nzValue="selector"></nz-option>
+                            <nz-option nzLabel="Radio" nzValue="radio"></nz-option>
+                            <nz-option nzLabel="按钮选择" nzValue="button"></nz-option>
+                        </nz-select>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().type?.funMode || formValue()?.type?.originValue == 'selector') {
+            <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-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>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    自动获取焦点
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-switch formControlName="autofocus"></nz-switch>
+                </nz-form-control>
+            </nz-form-item>
+            }
+        </nz-collapse-panel>
+        @if (formValue().type?.funMode || formValue()?.type?.originValue == 'selector') {
+        <nz-collapse-panel nzHeader="选项搜索">
+            <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="selectOnSearch">
+                        <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="backendSearch">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().backendSearch?.funMode || formValue()?.backendSearch?.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    搜索最少字数
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="searchLimitLength">
+                        <nz-input-number style="width: 100%;" nzPlaceHolder="默认1位" ngModel
+                            [ngModelOptions]="{standalone:true}"></nz-input-number>
+                    </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/single-selector/design/setting/setting.ts

@@ -0,0 +1,80 @@
+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';
+
+@Component({
+  selector: 'axis-design-single-selector-setting',
+  imports: [FormsModule, NzCollapseModule, ReactiveFormsModule, NzFormModule, BaseDesignSetting, ValueDesignSetting, NzAutocompleteModule, NzInputModule, NzSelectModule, FunField, DynamicDirective, NzSwitchModule, InputTrigger],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    ...valueFbConfig,
+    labelField: ["title", FormValidators.required],
+    valueField: ["key", FormValidators.required],
+    fullValue: [false, FormValidators.required],
+    defaultFirst: [false, FormValidators.required],
+    data: [],
+    autofocus: [false, FormValidators.required],
+    type: [undefined, FormValidators.requiredFun],
+    showAll: [undefined, FormValidators.requiredFun],
+    allowClear: [undefined, FormValidators.requiredFun],
+    placeholder: [],
+    showSearch: [undefined, FormValidators.requiredFun],
+    selectOnSearch: [undefined, FormValidators.requiredFun],
+    backendSearch: [undefined, FormValidators.requiredFun],
+    searchLimitLength: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    ...valueFunField,
+    data: {
+      defaultValue: undefined
+    },
+    type: {
+      defaultValue: "selector"
+    },
+    showAll: {
+      defaultValue: false
+    },
+    allowClear: {
+      defaultValue: true
+    },
+    placeholder: {
+      defaultValue: ""
+    },
+    showSearch: {
+      defaultValue: true
+    },
+    selectOnSearch: {
+      defaultValue: false
+    },
+    backendSearch: {
+      defaultValue: false
+    },
+    searchLimitLength: {
+      defaultValue: null
+    },
+  };
+
+  @ViewChild("data", { static: true })
+  dataFunField!: FunField;
+
+  fields = computed(() => {
+    if (this.dataFunField.computeResult()?.length) {
+      return Object.keys(this.dataFunField.computeResult()[0]);
+    }
+    return [];
+  })
+}

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

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