refactor(module:badge): migrate demo to standalone mode (#8736)

NG-ZORRO · Sep 10, 2024 · 4748f9f · 4748f9f
1 parent 2a5e06e
commit 4748f9f
Show file tree

Hide file tree

Showing 14 changed files with 96 additions and 54 deletions.
diff --git a/components/badge/badge.spec.ts b/components/badge/badge.spec.ts
@@ -1,4 +1,4 @@
-import { BidiModule, Dir } from '@angular/cdk/bidi';
+import { BidiModule, Dir, Direction } from '@angular/cdk/bidi';
 import { Component, DebugElement, ViewChild } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
@@ -221,7 +221,7 @@ export class NzTestBadgeBasicComponent {
   text!: string;
   title?: string | null;
   offset?: [number, number];
-  size?: NzSizeDSType = 'default';
+  size: NzSizeDSType = 'default';
   noAnimation = true;
 }
 
@@ -234,6 +234,6 @@ export class NzTestBadgeBasicComponent {
 })
 export class NzTestBadgeRtlComponent {
   @ViewChild(Dir) dir!: Dir;
-  direction = 'rtl';
+  direction: Direction = 'rtl';
   count = 5;
 }
diff --git a/components/badge/demo/basic.ts b/components/badge/demo/basic.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-badge-basic',
+  imports: [NzBadgeModule, NzIconModule],
   template: `
     <nz-badge [nzCount]="5">
       <a class="head-example"></a>

diff --git a/components/badge/demo/change.ts b/components/badge/demo/change.ts
@@ -1,14 +1,22 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
 
 @Component({
+  standalone: true,
   selector: 'nz-demo-badge-change',
+  imports: [FormsModule, NzBadgeModule, NzButtonModule, NzIconModule, NzSwitchModule],
   template: `
     <div>
       <nz-badge [nzCount]="count">
         <a class="head-example"></a>
       </nz-badge>
       <nz-button-group>
-        <button nz-button (click)="minCount()"><span nz-icon nzType="minus"></span></button>
+        <button nz-button (click)="minusCount()"><span nz-icon nzType="minus"></span></button>
         <button nz-button (click)="addCount()"><span nz-icon nzType="plus"></span></button>
       </nz-button-group>
     </div>
@@ -50,10 +58,7 @@ export class NzDemoBadgeChangeComponent {
     this.count++;
   }
 
-  minCount(): void {
-    this.count--;
-    if (this.count < 0) {
-      this.count = 0;
-    }
+  minusCount(): void {
+    this.count = Math.max(0, this.count - 1);
   }
 }
diff --git a/components/badge/demo/colorful.ts b/components/badge/demo/colorful.ts
@@ -1,29 +1,29 @@
 import { Component } from '@angular/core';
 
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-badge-colorful',
+  imports: [NzBadgeModule],
   template: `
-    <div>
-      <h4>Presets:</h4>
-      @for (color of colors; track color) {
-        <div>
-          <nz-badge [nzColor]="color" [nzText]="color"></nz-badge>
-        </div>
-      }
-      <br />
-      <h4>Custom:</h4>
-      <nz-badge nzColor="#f50" nzText="#f50"></nz-badge>
-      <br />
-      <nz-badge nzColor="#2db7f5" nzText="#2db7f5"></nz-badge>
-      <br />
-      <nz-badge nzColor="#87d068" nzText="#87d068"></nz-badge>
-      <br />
-      <nz-badge nzColor="#108ee9" nzText="#108ee9"></nz-badge>
-    </div>
+    <h4>Presets:</h4>
+    @for (color of presets; track color) {
+      <div>
+        <nz-badge [nzColor]="color" [nzText]="color"></nz-badge>
+      </div>
+    }
+    <br />
+    <h4>Custom:</h4>
+    @for (color of customColors; track color) {
+      <div>
+        <nz-badge [nzColor]="color" [nzText]="color"></nz-badge>
+      </div>
+    }
   `
 })
 export class NzDemoBadgeColorfulComponent {
-  colors = [
+  readonly presets = [
     'pink',
     'red',
     'yellow',
@@ -38,4 +38,5 @@ export class NzDemoBadgeColorfulComponent {
     'gold',
     'lime'
   ];
+  readonly customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];
 }
diff --git a/components/badge/demo/dot.ts b/components/badge/demo/dot.ts
@@ -1,10 +1,19 @@
 import { Component } from '@angular/core';
 
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-badge-dot',
+  imports: [NzBadgeModule, NzIconModule],
   template: `
-    <nz-badge nzDot><span nz-icon nzType="notification"></span></nz-badge>
-    <nz-badge nzDot [nzShowDot]="false"><span nz-icon nzType="notification"></span></nz-badge>
+    <nz-badge nzDot>
+      <span nz-icon nzType="notification"></span>
+    </nz-badge>
+    <nz-badge nzDot [nzShowDot]="false">
+      <span nz-icon nzType="notification"></span>
+    </nz-badge>
     <nz-badge nzDot>
       <a>Link something</a>
     </nz-badge>

diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
@@ -7,7 +7,7 @@ title:
 
 ## zh-CN
 
-用 a 标签进行包裹即可。
+用 `a` 标签进行包裹即可。
 
 ## en-US
 

diff --git a/components/badge/demo/link.ts b/components/badge/demo/link.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-badge-link',
+  imports: [NzBadgeModule],
   template: `
     <a>
       <nz-badge [nzCount]="5">

diff --git a/components/badge/demo/module b/components/badge/demo/module
diff --git a/components/badge/demo/no-wrapper.ts b/components/badge/demo/no-wrapper.ts
@@ -1,24 +1,29 @@
 import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
 
 @Component({
+  standalone: true,
   selector: 'nz-demo-badge-no-wrapper',
+  imports: [FormsModule, NzBadgeModule, NzIconModule, NzSwitchModule],
   template: `
-    <nz-space>
-      <nz-switch [(ngModel)]="show"></nz-switch>
-      <nz-badge nzStandalone [nzCount]="show ? 25 : 0"></nz-badge>
-      <nz-badge
-        nzStandalone
-        [nzCount]="show ? 4 : 0"
-        [nzStyle]="{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }"
-      ></nz-badge>
-      <nz-badge [nzCount]="show ? iconTemplate : 0" nzStandalone>
-        <a class="head-example"></a>
-      </nz-badge>
-      <ng-template #iconTemplate>
-        <span nz-icon nzType="clock-circle" class="ant-scroll-number-custom-component" style="color: #f5222d"></span>
-      </ng-template>
-      <nz-badge nzStandalone [nzCount]="show ? 109 : 0" [nzStyle]="{ backgroundColor: '#52c41a' }"></nz-badge>
-    </nz-space>
+    <nz-switch [(ngModel)]="show"></nz-switch>
+    <nz-badge nzStandalone [nzCount]="show ? 25 : 0"></nz-badge>
+    <nz-badge
+      nzStandalone
+      [nzCount]="show ? 4 : 0"
+      [nzStyle]="{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }"
+    ></nz-badge>
+    <nz-badge [nzCount]="show ? iconTemplate : 0" nzStandalone>
+      <a class="head-example"></a>
+    </nz-badge>
+    <ng-template #iconTemplate>
+      <span nz-icon nzType="clock-circle" class="ant-scroll-number-custom-component" style="color: #f5222d"></span>
+    </ng-template>
+    <nz-badge nzStandalone [nzCount]="show ? 109 : 0" [nzStyle]="{ backgroundColor: '#52c41a' }"></nz-badge>
   `,
   styles: [
     `

diff --git a/components/badge/demo/offset.ts b/components/badge/demo/offset.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-badge-offset',
+  imports: [NzBadgeModule],
   template: `
     <a>
       <nz-badge [nzCount]="5" [nzOffset]="[10, 10]">

diff --git a/components/badge/demo/overflow.ts b/components/badge/demo/overflow.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-badge-overflow',
+  imports: [NzBadgeModule],
   template: `
     <nz-badge [nzCount]="99">
       <a class="head-example"></a>

diff --git a/components/badge/demo/ribbon.ts b/components/badge/demo/ribbon.ts
@@ -1,7 +1,12 @@
 import { Component } from '@angular/core';
 
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+import { NzCardModule } from 'ng-zorro-antd/card';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-badge-ribbon',
+  imports: [NzBadgeModule, NzCardModule],
   template: `
     <nz-ribbon nzText="Hippies">
       <nz-card nzTitle="Pushes open the window" nzSize="small"> And raises the spyglass. </nz-card>

diff --git a/components/badge/demo/size.ts b/components/badge/demo/size.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-badge-size',
+  imports: [NzBadgeModule],
   template: `
     <nz-badge nzSize="default" [nzCount]="5">
       <a class="head-example"></a>

diff --git a/components/badge/demo/status.ts b/components/badge/demo/status.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
 
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+
 @Component({
+  standalone: true,
   selector: 'nz-demo-badge-status',
+  imports: [NzBadgeModule],
   template: `
     <nz-badge nzStatus="success"></nz-badge>
     <nz-badge nzStatus="error"></nz-badge>