ngx-axis-appforge 0.0.0

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

@@ -0,0 +1,67 @@
+<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="lib" #lib>
+                        <nz-radio-group ngModel [ngModelOptions]="{standalone:true}" nzSize="small">
+                            <label nz-radio-button nzValue="antdesign">antdesign</label>
+                            <label nz-radio-button nzValue="iconfont">iconfont</label>
+                        </nz-radio-group>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue()?.lib.funMode || formValue()?.lib.originValue == 'antdesign') {
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>图标主题</nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="theme" #theme>
+                        <nz-radio-group ngModel [ngModelOptions]="{standalone:true}" nzSize="small">
+                            <label nz-radio-button nzValue="outline">outline</label>
+                            <label nz-radio-button nzValue="fill">fill</label>
+                            <label nz-radio-button nzValue="twotone">twotone</label>
+                        </nz-radio-group>
+                    </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="icon" #icon>
+                        <nz-input-group style="max-width: 200px;" [nzSuffix]="iconPreview">
+                            <input autofocus placeholder="输入图标，如 edit" nz-input ngModel
+                                [ngModelOptions]="{standalone:true}" />
+                        </nz-input-group>
+                    </axis-fun-field>
+                    <ng-template #iconPreview>
+                        @if (value()) {
+                        <ng-container [axisDynamic]="preview()" [standalone]="true"></ng-container>
+                        }
+                    </ng-template>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    antdesign 图标库
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <a target="_blank"
+                        href="https://ng.ant.design/components/icon/zh">https://ng.ant.design/components/icon/zh</a>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    iconfont 图标库
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <a target="_blank" href="https://www.iconfont.cn/">https://www.iconfont.cn/</a>
+                </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/icon/design/setting/setting.ts

@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component, computed, ViewChild } 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 { NzRadioModule } from 'ng-zorro-antd/radio';
+import { BaseDesignSetting, baseFbConfig, baseFunField, DynamicDirective, FormValidators, FunField, FunFieldOptions, FunFieldValueBase } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-icon-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, BaseDesignSetting, FunField, NzRadioModule, NzInputModule, DynamicDirective],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    lib: [undefined, FormValidators.requiredFun],
+    theme: [undefined, FormValidators.requiredFun],
+    icon: [undefined, FormValidators.requiredFun],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    lib: {
+      defaultValue: "antdesign"
+    },
+    theme: {
+      defaultValue: "outline"
+    },
+    icon: {
+      defaultValue: undefined
+    },
+  };
+
+  @ViewChild("lib", { static: true })
+  lib!: FunField;
+
+  @ViewChild("theme")
+  theme?: FunField;
+
+  @ViewChild("icon", { static: true })
+  icon!: FunField;
+
+  readonly preview = computed(() => ({ component: "axis-components/icon", inuse: true, lib: this.lib.computeResult(), theme: this.theme?.computeResult(), icon: this.icon.computeResult() }));
+}

package/axis-components/icon/icon.html

@@ -0,0 +1,7 @@
+@if (options.icon()) {
+@if (options.lib()!='iconfont') {
+<nz-icon [nzType]="options.icon()" [nzTheme]="options.theme()"></nz-icon>
+}@else {
+<nz-icon [nzIconfont]="options.icon()"></nz-icon>
+}
+}

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

@@ -0,0 +1,10 @@
+import { signal } from "@angular/core";
+import { BaseOptions } from "ngx-axis-appforge/core";
+
+export class IconOptions extends BaseOptions {
+
+    readonly lib = signal<"antdesign" | "iconfont">("antdesign");
+    readonly icon = signal<string>("");
+    readonly theme = signal<"outline" | "fill" | "twotone">("outline");
+
+}

package/axis-components/icon/icon.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IconOptions } from './icon.options';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { Base } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-icon',
+  imports: [NzIconModule],
+  templateUrl: './icon.html',
+  styleUrl: './icon.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Icon extends Base<IconOptions> {
+
+  protected override options: IconOptions = new IconOptions();
+
+}

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

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

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

@@ -0,0 +1,30 @@
+import { NextInfo, DesignBuildResult, DesignBindElementsResult, DesignConfig, OptionsNode, nameCode, 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: nameCode("图片", nextInfo.currentObject.data),
+                canSetting: true,
+                canDrag: true,
+                dragType: "component",
+                parentObj: nextInfo.parentObject,
+                indexOfParentObj: nextInfo.indexOfParent,
+                rootOptions: nextInfo.currentObject,
+                settingType: Setting,
+                contextMenu: SimpleMenu,
+                icon: "file-image"
+            })
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element }
+        }
+    },
+};

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

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

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

@@ -0,0 +1,42 @@
+<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="mode">
+                        <nz-radio-group ngModel [ngModelOptions]="{standalone:true}" nzSize="small">
+                            <label nz-radio-button nzValue="aspectFit">包含</label>
+                            <label nz-radio-button nzValue="aspectFill">铺满</label>
+                            <label nz-radio-button nzValue="scaleToFill">拉伸</label>
+                        </nz-radio-group>
+                    </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="preview">
+                        <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" nzTooltipTitle="支持单个地址以及数组存放的多地址">
+                    图片地址
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="data" #dataFunField>
+                        <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>
+        <axis-base-design-setting [fg]="fg"></axis-base-design-setting>
+    </nz-collapse>
+</form>

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

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

package/axis-components/image/image.css

@@ -0,0 +1,58 @@
+:host {
+    display: block;
+    overflow: hidden;
+    position: relative;
+}
+
+.img-box {
+    position: relative;
+    overflow: hidden;
+    border-radius: 4px;
+    border: 1px solid #00000017;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+}
+
+.img-box.preview {
+    pointer-events: all;
+    cursor: pointer;
+}
+
+.img-box img {
+    width: 100%;
+    height: 100%;
+}
+
+.img-box img.aspectFill {
+    object-fit: cover;
+}
+
+.img-box img.scaleToFill {
+    object-fit: fill;
+}
+
+.img-box img.aspectFit {
+    object-fit: contain;
+}
+
+.pre {
+    pointer-events: none;
+    transition: all .3s;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    opacity: 0;
+}
+
+.img-box:hover .pre {
+    opacity: 1;
+}

package/axis-components/image/image.html

@@ -0,0 +1,14 @@
+<nz-image-group>
+    <nz-flex nzWrap="wrap" nzGap="4px" style="width: 100%;height: 100%;">
+        @for (i of imgList(); track $index) {
+        <div class="img-box" [class.preview]="options.preview()">
+            <img nz-image [nzSrc]="i" [class]="options.mode()" />
+            @if (options.preview()) {
+            <div class="pre">
+                <i nz-icon nzType="eye" nzTheme="outline"></i>
+            </div>
+            }
+        </div>
+        }
+    </nz-flex>
+</nz-image-group>

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

@@ -0,0 +1,8 @@
+import { signal } from "@angular/core";
+import { DataOptions } from "ngx-axis-appforge/core";
+
+export class ImageOptions extends DataOptions {
+
+    mode = signal<"aspectFit" | "aspectFill" | "scaleToFill">("aspectFit");
+    preview = signal(true);
+}

package/axis-components/image/image.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { Base } from 'ngx-axis-appforge/core';
+import { ImageOptions } from './image.options';
+import { NzImageModule } from 'ng-zorro-antd/image';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+
+@Component({
+  selector: 'axis-image',
+  imports: [NzImageModule, NzIconModule, NzFlexModule],
+  templateUrl: './image.html',
+  styleUrl: './image.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Image extends Base<ImageOptions> {
+
+  override options: ImageOptions = new ImageOptions();
+
+  readonly imgList = computed(() => {
+    const data = this.options.data();
+    if (Array.isArray(data)) {
+      return data;
+    } else if (data) {
+      return [data];
+    } else {
+      return [];
+    }
+  });
+}

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

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

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

@@ -0,0 +1,80 @@
+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 {
+        const children: OptionsNode[] = [];
+        const next: NextInfo[] = [];
+        if (!nextInfo.currentObject.variant || nextInfo.currentObject.variant == "outlined") {
+            children.push(new OptionsNode({
+                id: nextInfo.currentObject.id + ".prefix",
+                parentId: nextInfo.currentObject.id,
+                scopeId: nextInfo.scopeId,
+                name: "前缀",
+                contextMenu: SimpleMenu,
+                canDrop: true,
+                dropType: "component",
+                dropObj: nextInfo.currentObject,
+                defaultDropIndex: "prefix",
+                indexOfParentObj: "prefix",
+                rootOptions: nextInfo.currentObject,
+                children: [],
+            }));
+            next.push({
+                parentId: nextInfo.currentObject.id + ".prefix",
+                parentObject: nextInfo.currentObject,
+                indexOfParent: "prefix",
+                scopeId: nextInfo.scopeId,
+            });
+            children.push(new OptionsNode({
+                id: nextInfo.currentObject.id + ".suffix",
+                parentId: nextInfo.currentObject.id,
+                scopeId: nextInfo.scopeId,
+                name: "后缀",
+                contextMenu: SimpleMenu,
+                canDrop: true,
+                dropType: "component",
+                dropObj: nextInfo.currentObject,
+                defaultDropIndex: "suffix",
+                indexOfParentObj: "suffix",
+                rootOptions: nextInfo.currentObject,
+                children: [],
+            }));
+            next.push({
+                parentId: nextInfo.currentObject.id + ".suffix",
+                parentObject: nextInfo.currentObject,
+                indexOfParent: "suffix",
+                scopeId: nextInfo.scopeId,
+            });
+        }
+        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: "field-string",
+                children: children
+            }),
+            next: next,
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        const prefix: HTMLElement = element.querySelector(".prefix-container") as HTMLElement;
+        const suffix: HTMLElement = element.querySelector(".suffix-container") as HTMLElement;
+        return {
+            [options.id]: { element },
+            [`${options.id}.prefix`]: { element: prefix, dropElement: prefix },
+            [`${options.id}.suffix`]: { element: suffix, dropElement: suffix }
+        }
+    },
+};

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

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

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

@@ -0,0 +1,79 @@
+<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="type">
+                        <nz-radio-group ngModel [ngModelOptions]="{standalone:true}">
+                            <label nz-radio-button nzValue="text">文本</label>
+                            <label nz-radio-button nzValue="password">密码</label>
+                        </nz-radio-group>
+                    </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="maxlength">
+                        <nz-input-number style="width: 100%;" ngModel [ngModelOptions]="{standalone:true}" [nzMin]="1">
+                        </nz-input-number>
+                    </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="debounceTime">
+                        <nz-input-number style="width: 100%;" nzPlaceHolder="毫秒" ngModel
+                            [ngModelOptions]="{standalone:true}" [nzMin]="1">
+                        </nz-input-number>
+                    </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="autofocus">
+                        <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-select formControlName="variant">
+                        <nz-option nzValue="outlined" nzLabel="外边框"></nz-option>
+                        <nz-option nzValue="borderless" nzLabel="无边框"></nz-option>
+                        <nz-option nzValue="filled" nzLabel="填充"></nz-option>
+                        <nz-option nzValue="underlined" nzLabel="下边线"></nz-option>
+                    </nz-select>
+                </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-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']"
+            [eventDesc]="[{name:'enterKeydown',title:'按下回车'}]"></axis-input-trigger>
+    </nz-collapse>
+</form>

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

@@ -0,0 +1,51 @@
+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 { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { BaseDesignSetting, baseFbConfig, baseFunField, FormValidators, FunField, FunFieldOptions, FunFieldValueBase, InputTrigger, ValueDesignSetting, valueFbConfig, valueFunField } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-input-setting',
+  imports: [FormsModule, NzCollapseModule, ReactiveFormsModule, NzInputNumberModule, NzInputModule, NzFormModule, FunField, NzSwitchModule, BaseDesignSetting, InputTrigger, NzRadioModule, ValueDesignSetting, NzSelectModule],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    ...valueFbConfig,
+    type: [undefined, FormValidators.requiredFun],
+    placeholder: [],
+    variant: ["outlined", FormValidators.required],
+    maxlength: [null],
+    debounceTime: [],
+    autofocus: [undefined, FormValidators.requiredFun],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    ...valueFunField,
+    type: {
+      defaultValue: "text"
+    },
+    placeholder: {
+      defaultValue: ""
+    },
+    maxlength: {
+      defaultValue: null
+    },
+    debounceTime: {
+      defaultValue: ""
+    },
+    autofocus: {
+      defaultValue: false
+    }
+  };
+}

package/axis-components/input/input.css

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