feat: 添加 tag-picker

Author: rmlzy

Diff for: package-lock.json

@@ -1,4 +1,4 @@
-import { NgModule } from "@angular/core";
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 import { FormsModule } from "@angular/forms";
 import { HttpClientModule } from "@angular/common/http";
@@ -27,5 +27,6 @@ registerLocaleData(zh);
   ],
   providers: [{ provide: NZ_I18N, useValue: zh_CN }],
   bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AppModule {}

Diff for: src/app/app.module.ts

@@ -0,0 +1,2 @@
+export * from "./example/example.component";
+export * from "./tag-picker/tag-picker.component";

Diff for: src/app/components/index.ts

@@ -0,0 +1,22 @@
+<nz-tag
+  *ngFor="let tag of innerValue; let i = index"
+  [nzMode]="disabled ? 'default' : 'closeable'"
+  (nzOnClose)="remove(tag)"
+>
+  {{ tag }}
+</nz-tag>
+<nz-tag *ngIf="!disabled && !inputVisible" class="editable-tag" nzNoAnimation (click)="showInput()">
+  <i nz-icon nzType="plus"></i>
+  添加标签
+</nz-tag>
+<input
+  #inputElement
+  nz-input
+  nzSize="small"
+  type="text"
+  style="width: 78px"
+  *ngIf="inputVisible"
+  [(ngModel)]="inputValue"
+  (blur)="confirm()"
+  (keydown.enter)="confirm()"
+/>

Diff for: src/app/components/tag-picker/tag-picker.component.html

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { TagPickerComponent } from "./tag-picker.component";
+
+describe("TagPickerComponent", () => {
+  let component: TagPickerComponent;
+  let fixture: ComponentFixture<TagPickerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [TagPickerComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TagPickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

Diff for: src/app/components/tag-picker/tag-picker.component.less

@@ -0,0 +1,72 @@
+import { Component, ElementRef, ViewChild, forwardRef, Input } from "@angular/core";
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
+
+type ITags = string[];
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: "tag-picker",
+  templateUrl: "./tag-picker.component.html",
+  styleUrls: ["./tag-picker.component.less"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TagPickerComponent),
+      multi: true,
+    },
+  ],
+})
+export class TagPickerComponent implements ControlValueAccessor {
+  innerValue: ITags = [];
+  inputVisible = false;
+  inputValue = "";
+  @Input() disabled = false;
+  @ViewChild("inputElement", { static: false }) inputElement?: ElementRef;
+
+  public get value(): ITags {
+    return this.innerValue;
+  }
+
+  public set value(v: ITags) {
+    this.innerValue = v;
+    this.onChange(v);
+  }
+
+  onChange: any = () => {};
+
+  onTouched: any = () => {};
+
+  writeValue(v: any) {
+    this.innerValue = v;
+  }
+
+  registerOnChange(fn: any) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any) {
+    this.onTouched = fn;
+  }
+
+  showInput() {
+    this.inputVisible = true;
+    setTimeout(() => {
+      this.inputElement?.nativeElement.focus();
+    }, 10);
+  }
+
+  remove(tag: string) {
+    this.value = this.innerValue.filter((item) => item !== tag);
+  }
+
+  confirm() {
+    if (this.inputValue) {
+      const idx = this.inputValue.indexOf(this.inputValue);
+      if (idx !== -1) {
+        this.value = [...this.innerValue, this.inputValue];
+      }
+    }
+    this.inputValue = "";
+    this.inputVisible = false;
+  }
+}

Diff for: src/app/components/tag-picker/tag-picker.component.spec.ts

@@ -22,6 +22,7 @@ export const APP_MENUS: IAppMenu = [
       { level: 2, title: "500", link: "/general/500" },
       { level: 2, title: "Maintenance", link: "/general/maintenance" },
       { level: 2, title: "Ajax", link: "/general/ajax" },
+      { level: 2, title: "Custom Components", link: "/general/custom-components" },
     ],
   },
   {

Diff for: src/app/components/tag-picker/tag-picker.component.ts

@@ -5,6 +5,6 @@
     <button nz-button nzType="dashed">Dashed Button</button>
     <button nz-button nzType="text">Text Button</button>
     <a nz-button nzType="link">Link Button</a>
-    <code name="code">{{code1}}</code>
+    <code name="code">{{ code1 }}</code>
   </div>
 </nz-card>

Diff for: src/app/config/app-menu.ts

@@ -1,16 +1,15 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 
-import { ButtonsComponent } from './buttons.component';
+import { ButtonsComponent } from "./buttons.component";
 
-describe('ButtonsComponent', () => {
+describe("ButtonsComponent", () => {
   let component: ButtonsComponent;
   let fixture: ComponentFixture<ButtonsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ButtonsComponent ]
-    })
-    .compileComponents();
+      declarations: [ButtonsComponent],
+    }).compileComponents();
   });
 
   beforeEach(() => {
@@ -19,7 +18,7 @@ describe('ButtonsComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it("should create", () => {
     expect(component).toBeTruthy();
   });
 });

Diff for: src/app/pages/general/buttons/buttons.component.html

@@ -0,0 +1,5 @@
+<nz-card nzTitle="TagPicker">
+  tags: {{ tags }}
+  <hr />
+  <tag-picker [disabled]="false" [(ngModel)]="tags"></tag-picker>
+</nz-card>

Diff for: src/app/pages/general/buttons/buttons.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { CustomComponentsComponent } from "./custom-components.component";
+
+describe("CustomComponentsComponent", () => {
+  let component: CustomComponentsComponent;
+  let fixture: ComponentFixture<CustomComponentsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CustomComponentsComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomComponentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

Diff for: src/app/pages/general/custom-components/custom-components.component.html

@@ -0,0 +1,14 @@
+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-custom-components",
+  templateUrl: "./custom-components.component.html",
+  styleUrls: ["./custom-components.component.less"],
+})
+export class CustomComponentsComponent implements OnInit {
+  tags = ["A", "B"];
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

Diff for: src/app/pages/general/custom-components/custom-components.component.less

@@ -1,16 +1,15 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 
-import { E404Component } from './e404.component';
+import { E404Component } from "./e404.component";
 
-describe('E404Component', () => {
+describe("E404Component", () => {
   let component: E404Component;
   let fixture: ComponentFixture<E404Component>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ E404Component ]
-    })
-    .compileComponents();
+      declarations: [E404Component],
+    }).compileComponents();
   });
 
   beforeEach(() => {
@@ -19,7 +18,7 @@ describe('E404Component', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it("should create", () => {
     expect(component).toBeTruthy();
   });
 });

Diff for: src/app/pages/general/custom-components/custom-components.component.spec.ts

@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
 
 @Component({
-  selector: 'app-e404',
-  templateUrl: './e404.component.html',
-  styleUrls: ['./e404.component.less']
+  selector: "app-e404",
+  templateUrl: "./e404.component.html",
+  styleUrls: ["./e404.component.less"],
 })
 export class E404Component implements OnInit {
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+  ngOnInit(): void {}
 }

Diff for: src/app/pages/general/custom-components/custom-components.component.ts

@@ -1,16 +1,15 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from "@angular/core/testing";
 
-import { E500Component } from './e500.component';
+import { E500Component } from "./e500.component";
 
-describe('E500Component', () => {
+describe("E500Component", () => {
   let component: E500Component;
   let fixture: ComponentFixture<E500Component>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ E500Component ]
-    })
-    .compileComponents();
+      declarations: [E500Component],
+    }).compileComponents();
   });
 
   beforeEach(() => {
@@ -19,7 +18,7 @@ describe('E500Component', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it("should create", () => {
     expect(component).toBeTruthy();
   });
 });

Diff for: src/app/pages/general/e404/e404.component.spec.ts

@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
 
 @Component({
-  selector: 'app-e500',
-  templateUrl: './e500.component.html',
-  styleUrls: ['./e500.component.less']
+  selector: "app-e500",
+  templateUrl: "./e500.component.html",
+  styleUrls: ["./e500.component.less"],
 })
 export class E500Component implements OnInit {
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
+  ngOnInit(): void {}
 }

Diff for: src/app/pages/general/e404/e404.component.ts

@@ -6,6 +6,7 @@ import { MaintenanceComponent } from "./maintenance/maintenance.component";
 import { AjaxComponent } from "./ajax/ajax.component";
 import { ButtonsComponent } from "./buttons/buttons.component";
 import { TypographyComponent } from "./typography/typography.component";
+import { CustomComponentsComponent } from "./custom-components/custom-components.component";
 
 const routes: Routes = [
   { path: "typography", component: TypographyComponent },
@@ -14,6 +15,7 @@ const routes: Routes = [
   { path: "500", component: E500Component },
   { path: "maintenance", component: MaintenanceComponent },
   { path: "ajax", component: AjaxComponent },
+  { path: "custom-components", component: CustomComponentsComponent },
 ];
 
 @NgModule({

Diff for: src/app/pages/general/e500/e500.component.spec.ts

@@ -9,6 +9,7 @@ import { MaintenanceComponent } from "./maintenance/maintenance.component";
 import { AjaxComponent } from "./ajax/ajax.component";
 import { ButtonsComponent } from "./buttons/buttons.component";
 import { TypographyComponent } from "./typography/typography.component";
+import { CustomComponentsComponent } from "./custom-components/custom-components.component";
 
 @NgModule({
   declarations: [
@@ -18,6 +19,7 @@ import { TypographyComponent } from "./typography/typography.component";
     AjaxComponent,
     ButtonsComponent,
     TypographyComponent,
+    CustomComponentsComponent,
   ],
   imports: [CommonModule, SharedModule, GeneralRoutingModule],
 })

Diff for: src/app/pages/general/e500/e500.component.ts

@@ -1,9 +1,12 @@
 <div class="error">
   <div class="error__header">
-    <img height="128" src="../../../../assets/images/maintenance.svg">
+    <img height="128" src="../../../../assets/images/maintenance.svg" />
   </div>
   <div class="error__title">Temporarily down for maintenance</div>
-  <div class="error__desc">Sorry for the inconvenience but we’re performing some maintenance at the moment. We’ll be back online shortly!</div>
+  <div class="error__desc">
+    Sorry for the inconvenience but we’re performing some maintenance at the moment. We’ll be back
+    online shortly!
+  </div>
   <div class="error__action">
     <button nz-button nzType="primary">
       <i nz-icon nzType="left" nzTheme="outline"></i>Take me home