@dignite-ng/expand.dynamic-form 3.0.0-rc.6 → 3.0.0-rc.7

package/src/lib/components/form/select/select-config.ts

@@ -1,24 +0,0 @@
-import { FormArray, FormControl, Validators } from "@angular/forms";
-
-export class SelectConfig {
-
-
-    /**空值文本 */
-    'Select.NullText': any = ['', []];
-    //多选
-    'Select.Multiple': any = [false, []];
-    // 选项
-    'Select.Options': any = new FormArray([])
-
-    constructor(data?: SelectConfig) {
-        if (data) {
-            for (const key in data) {
-                if (data.hasOwnProperty(key)) {
-                    this[key] = data[key];
-                }
-            }
-        }
-
-
-    }
-}

package/src/lib/components/form/select/select-control.component.html

@@ -1,32 +0,0 @@
-<form [formGroup]="_entity">
-    <div formGroupName="extraProperties" class="selectcontrol">
-        <div class="mb-3">
-            <label class="form-label" *ngIf="_fields.displayName">{{ _fields.displayName }}</label>
-            <ng-container *ngIf="formConfiguration['Select.Multiple']; else elseTemplate">
-                <!-- <select class="form-select" multiple formControlName="{{_fields.field.name}}">
-                    <ng-container *ngFor="let item of _fields.field.formConfiguration['Select.Options'];let i =index">
-                        <option [value]="item.Value">{{item.Text}}</option>
-                    </ng-container>
-                </select> -->
-                <nz-select class="form-select form-select-multiple" [nzMaxTagCount]="1"
-                    nzShowSearch nzMode="multiple"
-                    formControlName="{{_fields.field.name}}">
-                    <nz-option *ngFor="let item of _fields.field.formConfiguration['Select.Options']"
-                        [nzLabel]="item.Text" [nzValue]="item.Value"></nz-option>
-                </nz-select>
-            </ng-container>
-            <ng-template #elseTemplate>
-                <select class="form-select" [multiple]="false" formControlName="{{_fields.field.name}}">
-                    <option [value]="">{{formConfiguration['Select.NullText']}}</option>
-                    <ng-container *ngFor="let item of _fields.field.formConfiguration['Select.Options'];let i =index">
-                        <option [value]="item.Value">{{item.Text}}</option>
-                    </ng-container>
-                </select>
-            </ng-template>
-            <small class="form-text text-muted d-block"
-                *ngIf="_fields.field.description">{{_fields.field.description}}</small>
-        </div>
-
-    </div>
-    <button type="submit" style="display: none;" #submitclick></button>
-</form>

package/src/lib/components/form/select/select-control.component.scss

@@ -1,32 +0,0 @@
-::ng-deep .selectcontrol {
- 
-
-    nz-select {
-        width: 100%;
-
-        .ant-select-selector {
-            background: transparent !important;
-            border: none !important;
-            padding: .275rem 1.25rem !important;
-            box-shadow: none !important;
-            height: auto !important
-        }
-
-        .anticon-search,
-        .anticon-down {
-            display: none
-        }
-    }
-    .ant-select-multiple .ant-select-selection-item{
-        max-width: 40% !important;
-    }
-}
-
-::ng-deep .was-validated .form-select-multiple {
-    border-color: #4fbf67;
-    padding-right: calc(1.5em + 1.35rem);
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234fbf67' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: right calc(0.375em + 0.3375rem) center;
-    background-size: calc(0.75em + 0.675rem) calc(0.75em + 0.675rem);
-}

package/src/lib/components/form/select/select-control.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SelectControlComponent } from './select-control.component';
-
-describe('SelectControlComponent', () => {
-  let component: SelectControlComponent;
-  let fixture: ComponentFixture<SelectControlComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [SelectControlComponent]
-    });
-    fixture = TestBed.createComponent(SelectControlComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/form/select/select-control.component.ts

@@ -1,86 +0,0 @@
-import { ChangeDetectorRef, Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-
-@Component({
-  selector: 'df-select-control',
-  templateUrl: './select-control.component.html',
-  styleUrls: ['./select-control.component.scss'],
-})
-export class SelectControlComponent {
-  constructor(private fb: FormBuilder) {}
-
-  /**字段配置列表 */
-  _fields: any = '';
-  @Input()
-  public set fields(v: any) {
-    this._fields = v;
-  }
-
-  /**父级字段名称，用于为表单设置控件赋值 */
-  _parentFiledName: any;
-  @Input()
-  public set parentFiledName(v: any) {
-    this._parentFiledName = v;
-  }
-  /**父级字段名称，用于为表单设置控件赋值 */
-  _selected: any;
-  @Input()
-  public set selected(v: any) {
-    this._selected = v;
-  }
-
-  /**表单实体 */
-  _entity: FormGroup | undefined;
-  @Input()
-  public set entity(v: any) {
-    this._entity = v;
-    this.dataLoaded();
-  }
-  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
-
-  get extraProperties() {
-    return this._entity?.get('extraProperties') as FormGroup;
-  }
-  private cdr = inject(ChangeDetectorRef);
-  /**数据加载完成 */
-  async dataLoaded() {
-    if (this._fields && this._entity) {
-      await this.AfterInit();
-      this.cdr.detectChanges(); // 手动触发变更检测
-      this.submitclick?.nativeElement?.click();
-    }
-  }
- 
-  formConfiguration: any = '';
-  AfterInit() {
-    return new Promise((resolve, rejects) => {
-      let ValidatorsArray:any[] = [];
-      if (this._fields.required) {
-        ValidatorsArray.push(Validators.required);
-      }
-      this.formConfiguration = this._fields.field.formConfiguration;
-      if (!this._selected) {
-        const isMultiple = this.formConfiguration['Select.Multiple'];
-
-        let selectValue:any = isMultiple ? [] : '';
-        this.formConfiguration['Select.Options'].forEach(el => {
-          if (el.Selected) {
-            selectValue = isMultiple
-              ? [...selectValue, el.value || el.Value]
-              : [el.value || el.Value];
-          }
-        });
-
-        this._selected = selectValue;
-      }
-      let newControl = this.fb.control(this._selected, ValidatorsArray);
-      this.extraProperties.setControl(this._fields.field.name, newControl);
-      resolve(true);
-    });
-  }
-  ngOnDestroy(): void {
-    //Called once, before the instance is destroyed.
-    //Add 'implements OnDestroy' to the class.
-    this.extraProperties.removeControl(this._fields.field.name);
-  }
-}

package/src/lib/components/form/switch/index.ts

@@ -1,2 +0,0 @@
-export * from './switch-config.component'
-export * from './switch-control.component'

package/src/lib/components/form/switch/switch-config.component.html

@@ -1,17 +0,0 @@
-<form [formGroup]="_Entity">
-    <div formGroupName="formConfiguration">
-        <div class="mb-3">
-            <div>
-                <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="checkbox" formControlName="Switch.Default"
-                        id="flexRadioDefault1">
-                    <label class="form-check-label" for="flexRadioDefault1">
-                        {{'DigniteAbpForms::DefaultValue' | abpLocalization}}
-                    </label>
-                </div>
-                
-            </div>
-        </div>
-        <button type="submit" (abpInit)="submitclick?.nativeElement?.click()" style="display: none;" #submitclick></button>
-    </div>
-</form>

package/src/lib/components/form/switch/switch-config.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SwitchConfigComponent } from './switch-config.component';
-
-describe('SwitchConfigComponent', () => {
-  let component: SwitchConfigComponent;
-  let fixture: ComponentFixture<SwitchConfigComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [SwitchConfigComponent]
-    });
-    fixture = TestBed.createComponent(SwitchConfigComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/form/switch/switch-config.component.ts

@@ -1,58 +0,0 @@
-import { ChangeDetectorRef, Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { SwitchConfig } from './switch-config';
-@Component({
-  selector: 'df-switch-config',
-  templateUrl: './switch-config.component.html',
-  styleUrls: ['./switch-config.component.scss'],
-})
-export class SwitchConfigComponent {
-  constructor(private fb: FormBuilder) {}
-  /**表单控件类型 */
-  _type: any;
-  @Input()
-  public set type(v: any) {
-    this._type = v;
-    this.dataLoaded();
-  }
-  /**表单实体 */
-  _Entity: FormGroup | undefined;
-  @Input()
-  public set Entity(v: FormGroup) {
-    this._Entity = v;
-    this.dataLoaded();
-  }
-  /**选择的表单信息 */
-  _selected: any;
-  @Input()
-  public set selected(v: any) {
-    this._selected = v;
-
-    this.dataLoaded();
-  }
-  get formConfiguration() {
-    return this._Entity.get('formConfiguration') as FormGroup;
-  }
-  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
-
-  private cdr = inject(ChangeDetectorRef);
-  async dataLoaded() {
-    if (this._Entity && this._type) {
-      await this.AfterInit();
-      this.cdr.detectChanges(); // 手动触发变更检测
-      this.submitclick?.nativeElement?.click();
-    }
-  }
-
-  AfterInit() {
-    return new Promise((resolve, rejects) => {
-      this._Entity.setControl('formConfiguration', this.fb.group(new SwitchConfig()));
-      if (this._selected && this._selected.formControlName == this._type) {
-        this.formConfiguration.patchValue({
-          ...this._selected.formConfiguration,
-        });
-      }
-      resolve(true);
-    });
-  }
-}

package/src/lib/components/form/switch/switch-config.ts

@@ -1,17 +0,0 @@
-import { FormControl, Validators } from "@angular/forms";
-
-export class SwitchConfig {
-
-
-    /**默认值 */
-    'Switch.Default': any = [false, []];
-    constructor(data?: SwitchConfig) {
-        if (data) {
-            for (const key in data) {
-                if (data.hasOwnProperty(key)) {
-                    this[key] = data[key];
-                }
-            }
-        }
-    }
-}

package/src/lib/components/form/switch/switch-control.component.html

@@ -1,13 +0,0 @@
-<form [formGroup]="_entity">
-    <div formGroupName="extraProperties">
-        <div class="mb-3">
-            <label class="form-label" *ngIf="_fields.displayName">{{ _fields.displayName }}</label>
-            <div class="form-check form-switch">
-                <input class="form-check-input" type="checkbox" role="switch" formControlName="{{_fields.field.name}}">
-            </div>
-            <small class="form-text text-muted d-block" *ngIf="_fields.field.description">{{_fields.field.description}}</small>
-        </div>
-
-    </div>
-    <button type="submit" style="display: none;" #submitclick></button>
-</form>

package/src/lib/components/form/switch/switch-control.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SwitchControlComponent } from './switch-control.component';
-
-describe('SwitchControlComponent', () => {
-  let component: SwitchControlComponent;
-  let fixture: ComponentFixture<SwitchControlComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [SwitchControlComponent]
-    });
-    fixture = TestBed.createComponent(SwitchControlComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/form/switch/switch-control.component.ts

@@ -1,81 +0,0 @@
-import { ChangeDetectorRef, Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-
-@Component({
-  selector: 'df-switch-control',
-  templateUrl: './switch-control.component.html',
-  styleUrls: ['./switch-control.component.scss'],
-})
-export class SwitchControlComponent {
-  constructor(private fb: FormBuilder) {}
-
-  /**表单实体 */
-  _entity: FormGroup | undefined;
-  @Input()
-  public set entity(v: any) {
-    this._entity = v;
-    this.dataLoaded();
-  }
-
-  /**字段配置列表 */
-  _fields: any = '';
-  @Input()
-  public set fields(v: any) {
-    this._fields = v;
-    this.dataLoaded();
-  }
-
-  /**父级字段名称，用于为表单设置控件赋值 */
-  _parentFiledName: any;
-  @Input()
-  public set parentFiledName(v: any) {
-    this._parentFiledName = v;
-    this.dataLoaded();
-  }
-  /** */
-  _selected: any;
-  @Input()
-  public set selected(v: any) {
-    // ?v:false;
-    this._selected = v;
-    this.dataLoaded();
-  }
-  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
-
-  get extraProperties() {
-    return this._entity.get('extraProperties') as FormGroup;
-  }
-  private cdr = inject(ChangeDetectorRef);
-  /**数据加载完成 */
-  async dataLoaded() {
-    if (this._fields && this._entity) {
-      await this.AfterInit();
-      this.cdr.detectChanges(); // 手动触发变更检测
-      this.submitclick?.nativeElement?.click();
-    }
-  }
-
-  AfterInit() {
-    return new Promise((resolve, rejects) => {
-      let ValidatorsArray = [];
-      if (this._fields.required) {
-        ValidatorsArray.push(Validators.required);
-      }
-      let newControl = this.fb.control(
-        this._selected
-          ? this._selected
-          : this._selected === false
-          ? this._selected
-          : this._fields.field.formConfiguration['Switch.Default'],
-        ValidatorsArray
-      );
-      this.extraProperties.setControl(this._fields.field.name, newControl);
-      resolve(true);
-    });
-  }
-  ngOnDestroy(): void {
-    //Called once, before the instance is destroyed.
-    //Add 'implements OnDestroy' to the class.
-    this.extraProperties.removeControl(this._fields.field.name);
-  }
-}

package/src/lib/components/form/text-edit/index.ts

@@ -1,3 +0,0 @@
-export * from './text-edit-config.component'
-export * from './text-edit-config'
-export * from './text-edit.component'

package/src/lib/components/form/text-edit/text-edit-config.component.html

@@ -1,32 +0,0 @@
-<form [formGroup]="_Entity">
-    <div formGroupName="formConfiguration">
-        <div class="mb-3">
-            <label class="form-label">{{'DigniteAbpForms::Placeholder' | abpLocalization}}</label>
-            <input type="text" class="form-control" formControlName="TextEdit.Placeholder">
-        </div>
-        <div class="mb-3">
-            <label class="form-label">{{'DigniteAbpForms::TextEditMode' | abpLocalization}}</label>
-            <div>
-                <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="radio" [value]="_TextEditMode.SingleLine" formControlName="TextEdit.Mode"
-                        id="flexRadioDefault1">
-                    <label class="form-check-label" for="flexRadioDefault1">
-                        {{'DigniteAbpForms::SingleLine' | abpLocalization}}
-                    </label>
-                </div>
-                <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="radio" [value]="_TextEditMode.MultipleLine" formControlName="TextEdit.Mode"
-                        id="flexRadioDefault2">
-                    <label class="form-check-label" for="flexRadioDefault2">
-                        {{'DigniteAbpForms::MultipleLine' | abpLocalization}}
-                    </label>
-                </div>
-            </div>
-        </div>
-        <div class="mb-3">
-            <label class="form-label">{{'DigniteAbpForms::CharLimit' | abpLocalization}}</label>
-            <input type="number" class="form-control" formControlName="TextEdit.CharLimit">
-        </div>
-        <button type="submit" (abpInit)="submitclick?.nativeElement?.click()" style="display: none;" #submitclick></button>
-    </div>
-</form>

package/src/lib/components/form/text-edit/text-edit-config.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TextEditConfigComponent } from './text-edit-config.component';
-
-describe('TextEditConfigComponent', () => {
-  let component: TextEditConfigComponent;
-  let fixture: ComponentFixture<TextEditConfigComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [TextEditConfigComponent]
-    });
-    fixture = TestBed.createComponent(TextEditConfigComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/components/form/text-edit/text-edit-config.component.ts

@@ -1,59 +0,0 @@
-import { ChangeDetectorRef, Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { TextEditConfig } from './text-edit-config';
-import { TextEditMode } from '../../../enums/text-edit-mode';
-
-@Component({
-  selector: 'df-text-edit-config',
-  templateUrl: './text-edit-config.component.html',
-  styleUrls: ['./text-edit-config.component.scss'],
-})
-export class TextEditConfigComponent {
-  constructor(private fb: FormBuilder) {}
-  _TextEditMode = TextEditMode;
-  /**表单控件类型 */
-  _type: any;
-  @Input()
-  public set type(v: any) {
-    this._type = v;
-    this.dataLoaded();
-  }
-  /**表单实体 */
-  _Entity: FormGroup | undefined;
-  @Input()
-  public set Entity(v: FormGroup) {
-    this._Entity = v;
-    this.dataLoaded();
-  }
-  /**选择的表单信息 */
-  _selected: any;
-  @Input()
-  public set selected(v: any) {
-    this._selected = v;
-    this.dataLoaded();
-  }
-  get formConfiguration() {
-    return this._Entity.get('formConfiguration') as FormGroup;
-  }
-  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
-  private cdr = inject(ChangeDetectorRef);
-  async dataLoaded() {
-    if (this._Entity && this._type) {
-      await this.AfterInit();
-      this.cdr.detectChanges(); // 手动触发变更检测
-      this.submitclick?.nativeElement?.click();
-    }
-  }
-
-  AfterInit() {
-    return new Promise((resolve, rejects) => {
-      this._Entity.setControl('formConfiguration', this.fb.group(new TextEditConfig()));
-      if (this._selected && this._selected.formControlName == this._type) {
-        this.formConfiguration.patchValue({
-          ...this._selected.formConfiguration,
-        });
-      }
-      resolve(true);
-    });
-  }
-}

package/src/lib/components/form/text-edit/text-edit-config.ts

@@ -1,24 +0,0 @@
-import { FormControl, Validators } from "@angular/forms";
-
-export class TextEditConfig {
-
-
-   /**占位符 */
-    'TextEdit.Placeholder': any = ['', []];
-    //字段类型，单行文本，多行文本
-    'TextEdit.Mode': any = [0, []];
-    // 字数限制
-    'TextEdit.CharLimit': any = ['265', []];
-
-    constructor(data?: TextEditConfig) {
-        if (data) {
-            for (const key in data) {
-                if (data.hasOwnProperty(key)) {
-                    this[key] = data[key];
-                }
-            }
-        }
-
-
-    }
-}

package/src/lib/components/form/text-edit/text-edit.component.html

@@ -1,17 +0,0 @@
-<form [formGroup]="_entity">
-    <div [formGroupName]="_parentFiledName">
-        <div class="mb-3">
-            <label class="form-label" *ngIf="_fields.displayName">{{ _fields.displayName }}</label>
-            <ng-container *ngIf="_fields.field.formConfiguration['TextEdit.Mode'] ===_TextEditMode.SingleLine">
-                <input type="text" class="form-control" formControlName="{{_fields.field.name}}"
-                    [placeholder]="_fields.field.formConfiguration['TextEdit.Placeholder']" />
-            </ng-container>
-            <ng-container *ngIf="_fields.field.formConfiguration['TextEdit.Mode'] === _TextEditMode.MultipleLine">
-                <textarea class="form-control" formControlName="{{_fields.field.name}}"
-                    [placeholder]="_fields.field.formConfiguration['TextEdit.Placeholder']" rows="3"></textarea>
-            </ng-container>
-            <small class="form-text text-muted d-block" *ngIf="_fields.field.description">{{_fields.field.description}}</small>
-        </div>
-    </div>
-    <button type="submit" style="display: none;" #submitclick></button>
-</form>

package/src/lib/components/form/text-edit/text-edit.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TextEditComponent } from './text-edit.component';
-
-describe('TextEditComponent', () => {
-  let component: TextEditComponent;
-  let fixture: ComponentFixture<TextEditComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [TextEditComponent]
-    });
-    fixture = TestBed.createComponent(TextEditComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});