ngx-axis-appforge 0.0.3 → 0.0.4

package/axis-components/dynamic-container/design/ng-package.json

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

package/axis-components/dynamic-container/design/setting/setting.html

@@ -0,0 +1,20 @@
+<form [formGroup]="fg" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="基本设置" nzActive>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    组件配置
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="child">
+                        <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-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/dynamic-container/design/setting/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 { BaseDesignSetting, baseFbConfig, baseFunField, DynamicDirective, FunField, FunFieldOptions, FunFieldValueBase, InputTrigger, ValueDesignSetting, valueFbConfig, valueFunField } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-text-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, BaseDesignSetting, DynamicDirective, FunField, ValueDesignSetting, InputTrigger],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    ...valueFbConfig,
+    child: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    ...valueFunField,
+    child: {
+      defaultValue: undefined
+    }
+  };
+
+}

package/axis-components/dynamic-container/dynamic-container.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

package/axis-components/dynamic-container/dynamic-container.html

@@ -0,0 +1,2 @@
+<ng-container [axisDynamic]="options.child()" [standalone]="true" [(ngModel)]="value"
+    (ngModelChange)="onChange?.($event)"></ng-container>

package/axis-components/dynamic-container/dynamic-container.options.ts

@@ -0,0 +1,6 @@
+import { signal } from "@angular/core";
+import { ValueAccessOptions } from "ngx-axis-appforge/core";
+
+export class DynamicContainerOptions extends ValueAccessOptions {
+    child = signal<any>(undefined);
+}

package/axis-components/dynamic-container/dynamic-container.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DynamicContainerOptions } from './dynamic-container.options';
+import { DynamicDirective, ValueAccess } from 'ngx-axis-appforge/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'axis-dynamic-container',
+  imports: [DynamicDirective, FormsModule],
+  templateUrl: './dynamic-container.html',
+  styleUrl: './dynamic-container.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DynamicContainer extends ValueAccess<DynamicContainerOptions> {
+
+  override options: DynamicContainerOptions = new DynamicContainerOptions();
+
+}

package/axis-components/dynamic-container/ng-package.json

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

package/axis-components/editor/editor.css

@@ -0,0 +1,47 @@
+:host {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: white;
+    position: relative;
+}
+
+nz-code-editor {
+    height: 100%;
+    width: 100%;
+    flex: 1;
+}
+
+.full-screen {
+    position: fixed;
+    z-index: 999;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+}
+
+.toolBar {
+    display: flex;
+    justify-content: end;
+    padding: 4px 20px;
+    position: absolute;
+    top: 20px;
+    right: 50px;
+    border-radius: 8px;
+    z-index: 1000;
+}
+
+.toolBar:hover {
+    background-color: white;
+    box-shadow: 2px 2px 5px 0 #00000026;
+    transition: all 0.2s ease-in-out;
+}

package/axis-components/editor/editor.html

@@ -0,0 +1,10 @@
+<div class="container" [class.full-screen]="fullScreen()">
+    <div class="toolBar">
+        <a nz-button nzType="link" nzSize="small" (click)="toggleFullScreen()">
+            <nz-icon [class.active]="fullScreen()" nz-tooltip nzTooltipTitle="切换全屏"
+                [nzType]="fullScreen() ? 'fullscreen-exit' : 'fullscreen'" />
+        </a>
+    </div>
+    <nz-code-editor [(ngModel)]="value" (ngModelChange)="onChange?.($event)"
+        [nzEditorOption]="config()"></nz-code-editor>
+</div>

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

@@ -0,0 +1,10 @@
+import { signal } from "@angular/core";
+import { ValueAccessOptions } from "ngx-axis-appforge/core";
+
+export class EditorOptions extends ValueAccessOptions {
+
+    readonly mode = signal<"json" | "javascript" | "plain_text" | "sql" | "html">("plain_text");
+    readonly otherOptions = signal<any>({});
+    readonly typescriptExtLibs = signal<{ content: string; filePath?: string; }[]>([]);
+
+}

package/axis-components/editor/editor.ts

@@ -0,0 +1,86 @@
+import { ChangeDetectionStrategy, Component, computed, DOCUMENT, HostListener, inject, Renderer2, signal, ViewChild } from '@angular/core';
+import { EditorOptions } from './editor.options';
+import { NzCodeEditorComponent, NzCodeEditorModule } from 'ng-zorro-antd/code-editor';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { FormsModule } from '@angular/forms';
+import { ValueAccess, EventHandlerOptions } from 'ngx-axis-appforge/core';
+import type { languages } from 'monaco-editor';
+import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { Observable, of } from 'rxjs';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTooltipDirective, NzToolTipModule } from 'ng-zorro-antd/tooltip';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+declare const monaco: NzSafeAny;
+
+@Component({
+  selector: 'axis-editor',
+  imports: [NzCodeEditorModule, NzFormModule, FormsModule, NzIconModule, NzToolTipModule, NzButtonModule],
+  templateUrl: './editor.html',
+  styleUrl: './editor.css',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class Editor extends ValueAccess<EditorOptions> {
+
+  protected override options: EditorOptions = new EditorOptions();
+
+  override writeValue(value: any): void {
+    super.writeValue(value ?? "");
+  }
+
+  config = computed(() => ({
+    language: this.options.mode(),
+    readOnly: this.options.readonly() || this.options.disabled(),
+    domReadOnly: this.options.readonly() || this.options.disabled(),
+    fixedOverflowWidgets: true,
+    ...this.options.otherOptions(),
+  }));
+
+  readonly fullScreen = signal(false);
+  private document: Document = inject(DOCUMENT);
+  private renderer: Renderer2 = inject(Renderer2);
+  @ViewChild(NzTooltipDirective, { static: false })
+  tooltip?: NzTooltipDirective;
+
+
+  @ViewChild(NzCodeEditorComponent, { static: true })
+  editor!: NzCodeEditorComponent;
+
+  @HostListener("mouseenter")
+  mouseenter() {
+    if (this.config().language == "javascript") {
+      const lsd: languages.typescript.LanguageServiceDefaults = monaco.languages.typescript.javascriptDefaults;
+      lsd.setExtraLibs(this.options.typescriptExtLibs());
+    }
+  }
+
+  @HostListener("keydown", ['$event'])
+  keydown(e: KeyboardEvent) {
+    if (e.key == "Escape" && this.fullScreen()) {
+      this.toggleFullScreen();
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }
+
+  override onEvents(e: EventHandlerOptions<any>): Observable<boolean> | undefined {
+    const obs = super.onEvents?.(e);
+    if (obs) {
+      return obs;
+    }
+    switch (e.name) {
+      case "layout":
+        this.editor?.layout();
+        return of(true);
+    }
+    return undefined;
+  }
+
+  toggleFullScreen(): void {
+    this.fullScreen.set(!this.fullScreen());
+    this.renderer.setStyle(this.document.body, 'overflow-y', this.fullScreen() ? 'hidden' : null);
+    this.tooltip?.hide();
+    setTimeout(() => {
+      this.editor?.layout();
+    });
+  }
+}

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

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

package/axis-components/examples/examples/badge.ts

@@ -0,0 +1,17 @@
+import { ExampleDesc } from "ngx-axis-appforge/core";
+
+export const badgeExampleDesc: ExampleDesc = {
+    component: "徽标",
+    coverImg: "assets/axis-components-covers/badge.svg",
+    span: 24,
+    height: 60,
+    tags: ["wrap"],
+    example: {
+        builder: (componentIdBuilder) => ({
+            component: "axis-components/badge",
+            id: componentIdBuilder?.("axis-components/badge"),
+            inuse: true,
+            standalone: true,
+        }),
+    }
+};

package/axis-components/examples/examples/button.ts

@@ -0,0 +1,38 @@
+import { ExampleDesc } from "ngx-axis-appforge/core";
+
+export const buttonExampleDesc: ExampleDesc = {
+    component: "按钮",
+    coverImg: "assets/axis-components-covers/button.svg",
+    span: 12,
+    height: 78,
+    example: {
+        builder: (componentIdBuilder) => ({
+            component: "axis-components/button",
+            id: componentIdBuilder?.("axis-components/button"),
+            inuse: true,
+            title: "未命名按钮",
+            confirm: false,
+            confirmText: "是否确认？",
+            confirmType: "modal",
+            disabledBtn: false,
+            styleType: "primary",
+            block: false,
+            danger: false,
+            ghost: false,
+            size: "default",
+            shape: ""
+        }),
+    },
+    moreExamples: [
+        {
+            name: "链接按钮",
+            builder: (componentIdBuilder) => ({
+                component: "axis-components/button",
+                id: componentIdBuilder?.("axis-components/button"),
+                inuse: true,
+                title: "未命名按钮",
+                styleType: "link"
+            }),
+        }
+    ]
+};

package/axis-components/examples/examples/desc.ts

@@ -0,0 +1,31 @@
+import { ExampleDesc } from "ngx-axis-appforge/core";
+
+export const descExampleDesc: ExampleDesc = {
+    component: "描述",
+    coverImg: "assets/axis-components-covers/desc.svg",
+    span: 24,
+    height: 90,
+    example: {
+        builder: (componentIdBuilder) => ({
+            component: "axis-components/desc",
+            id: componentIdBuilder?.("axis-components/desc"),
+            inuse: true,
+            title: "未命名",
+            data: {
+                field1: "字段1",
+                field2: "字段2"
+            },
+            items: [
+                {
+                    inuse: true,
+                    title: "字段1",
+                    field: "field1"
+                }, {
+                    inuse: true,
+                    title: "字段2",
+                    field: "field2"
+                }
+            ]
+        }),
+    }
+};

package/axis-components/examples/examples/design.ts

@@ -0,0 +1,15 @@
+import { ExampleDesc } from "ngx-axis-appforge/core";
+
+export const designExampleDesc: ExampleDesc = {
+    component: "低代码设计器",
+    coverImg: "assets/axis-components-covers/design.jpg",
+    span: 24,
+    height: 120,
+    example: {
+        builder: (componentIdBuilder) => ({
+            component: "axis-components/design",
+            id: componentIdBuilder?.("axis-components/design"),
+            inuse: true
+        }),
+    }
+};

package/axis-components/examples/examples/dynamic-container.ts

@@ -0,0 +1,21 @@
+import { ExampleDesc } from "ngx-axis-appforge/core";
+
+export const dynamicContainerExampleDesc: ExampleDesc = {
+    component: "动态容器",
+    coverImg: "assets/axis-components-covers/dynamic-container.svg",
+    span: 24,
+    height: 120,
+    example: {
+        builder: (componentIdBuilder) => ({
+            component: "axis-components/dynamic-container",
+            id: componentIdBuilder?.("axis-components/dynamic-container"),
+            inuse: true,
+            child: {
+                component: "axis-components/text",
+                id: componentIdBuilder?.("axis-components/text"),
+                inuse: true,
+                data: "动态容器中的文本"
+            }
+        }),
+    }
+};

package/axis-components/examples/examples/flex.ts

@@ -0,0 +1,18 @@
+import { ExampleDesc } from "ngx-axis-appforge/core";
+
+export const flexExampleDesc: ExampleDesc = {
+    component: "响应布局",
+    coverImg: "assets/axis-components-covers/flex.svg",
+    span: 24,
+    height: 120,
+    tags: ["wrap"],
+    example: {
+        builder: (componentIdBuilder) => ({
+            component: "axis-components/flex",
+            id: componentIdBuilder?.("axis-components/flex"),
+            inuse: true,
+            direction: "horizontal",
+            children: []
+        }),
+    }
+};

package/axis-components/examples/examples/form-item.ts

@@ -0,0 +1,39 @@
+import { ExampleDesc } from "ngx-axis-appforge/core";
+
+export const formItemExampleDesc: ExampleDesc = {
+    component: "表单项",
+    coverImg: "assets/axis-components-covers/form-item.svg",
+    span: 24,
+    height: 60,
+    tags: ["wrap"],
+    example: {
+        builder: (componentIdBuilder) => ({
+            component: "axis-components/form-item",
+            id: componentIdBuilder?.("axis-components/form-item"),
+            inuse: true,
+            name: "field",
+            label: "字段",
+            labelWidth: "120px",
+            validators: [],
+            child: {
+                component: "axis-components/input",
+                inuse: true,
+                id: componentIdBuilder?.("axis-components/input"),
+            }
+        }),
+    },
+    moreExamples: [
+        {
+            name: "空表单项",
+            builder: (componentIdBuilder) => ({
+                component: "axis-components/form-item",
+                id: componentIdBuilder?.("axis-components/form-item"),
+                inuse: true,
+                name: "field",
+                label: "",
+                labelWidth: "",
+                validators: [],
+            }),
+        }
+    ]
+};