refactor(standalone): update some components to standalone components

includes: Affix Button Icon Badge Avatar Empty Link I18n Ripple
NG-NEST · Nov 21, 2023 · 3017658 · 3017658
1 parent c4e311d
commit 3017658
Show file tree

Hide file tree

Showing 414 changed files with 8,404 additions and 1,113 deletions.
diff --git a/docs/course/rbac/4-ui-navigation/demo/13__ui/src/layout/index/index.module.ts b/docs/course/rbac/4-ui-navigation/demo/13__ui/src/layout/index/index.module.ts
@@ -10,7 +10,7 @@ import { RouterModule } from '@angular/router';
 import { mainRoutes } from 'src/environments/routes';
 import { XMenuModule } from '@ng-nest/ui/menu';
 import { XSliderModule } from '@ng-nest/ui/slider';
-import { XIconModule } from '@ng-nest/ui/icon';
+import { XIconComponent } from '@ng-nest/ui/icon';
 import { XCrumbModule } from '@ng-nest/ui/crumb';
 
 @NgModule({
@@ -19,7 +19,7 @@ import { XCrumbModule } from '@ng-nest/ui/crumb';
     CommonModule,
     XMenuModule,
     XSliderModule,
-    XIconModule,
+    XIconComponent,
     XCrumbModule,
     RouterModule.forChild([
       {

diff --git a/docs/course/rbac/4-ui-navigation/demo/9__ui/src/layout/index/index.module.ts b/docs/course/rbac/4-ui-navigation/demo/9__ui/src/layout/index/index.module.ts
@@ -10,15 +10,15 @@ import { RouterModule } from '@angular/router';
 import { mainRoutes } from 'src/environments/routes';
 import { XMenuModule } from '@ng-nest/ui/menu';
 import { XSliderModule } from '@ng-nest/ui/slider';
-import { XIconModule } from '@ng-nest/ui/icon';
+import { XIconComponent } from '@ng-nest/ui/icon';
 
 @NgModule({
   declarations: [IndexComponent, ContentComponent, CrumbComponent, HeaderComponent, SidebarComponent, TabsComponent],
   imports: [
     CommonModule,
     XMenuModule,
     XSliderModule,
-    XIconModule,
+    XIconComponent,
     RouterModule.forChild([
       {
         path: '',

diff --git a/docs/course/rbac/5-user-manage/demo/23__ui/src/main/system/users/user.module.ts b/docs/course/rbac/5-user-manage/demo/23__ui/src/main/system/users/user.module.ts
@@ -4,14 +4,14 @@ import { UserComponent } from './user.component';
 import { RouterModule } from '@angular/router';
 import { XTableModule } from '@ng-nest/ui/table';
 import { UserDetailComponent } from './user-detail/user-detail.component';
-import { XButtonModule } from '@ng-nest/ui/button';
+import { XButtonComponent } from '@ng-nest/ui/button';
 
 @NgModule({
   declarations: [UserComponent, UserDetailComponent],
   imports: [
     CommonModule,
     XTableModule,
-    XButtonModule,
+    XButtonComponent,
     RouterModule.forChild([
       { path: '', component: UserComponent },
       { path: ':type', component: UserDetailComponent },

diff --git a/docs/course/rbac/5-user-manage/demo/24__ui/src/main/system/users/user.module.ts b/docs/course/rbac/5-user-manage/demo/24__ui/src/main/system/users/user.module.ts
@@ -4,7 +4,7 @@ import { UserComponent } from './user.component';
 import { RouterModule } from '@angular/router';
 import { XTableModule } from '@ng-nest/ui/table';
 import { UserDetailComponent } from './user-detail/user-detail.component';
-import { XButtonModule } from '@ng-nest/ui/button';
+import { XButtonComponent } from '@ng-nest/ui/button';
 import { XFormModule } from '@ng-nest/ui/form';
 import { XMessageModule } from '@ng-nest/ui/message';
 
@@ -13,7 +13,7 @@ import { XMessageModule } from '@ng-nest/ui/message';
   imports: [
     CommonModule,
     XTableModule,
-    XButtonModule,
+    XButtonComponent,
     XFormModule,
     XMessageModule,
     RouterModule.forChild([

diff --git a/docs/course/rbac/5-user-manage/demo/25__ui/src/main/system/users/user.module.ts b/docs/course/rbac/5-user-manage/demo/25__ui/src/main/system/users/user.module.ts
@@ -4,21 +4,21 @@ import { UserComponent } from './user.component';
 import { RouterModule } from '@angular/router';
 import { XTableModule } from '@ng-nest/ui/table';
 import { UserDetailComponent } from './user-detail/user-detail.component';
-import { XButtonModule } from '@ng-nest/ui/button';
+import { XButtonComponent } from '@ng-nest/ui/button';
 import { XFormModule } from '@ng-nest/ui/form';
 import { XMessageModule } from '@ng-nest/ui/message';
-import { XLinkModule } from '@ng-nest/ui/link';
+import { XLinkComponent } from '@ng-nest/ui/link';
 import { XMessageBoxModule } from '@ng-nest/ui/message-box';
 
 @NgModule({
   declarations: [UserComponent, UserDetailComponent],
   imports: [
     CommonModule,
     XTableModule,
-    XButtonModule,
+    XButtonComponent,
     XFormModule,
     XMessageModule,
-    XLinkModule,
+    XLinkComponent,
     XMessageBoxModule,
     RouterModule.forChild([
       { path: '', component: UserComponent },

diff --git a/docs/ui/getting-started/demo/3.1__my-app/src/app/app.module.ts b/docs/ui/getting-started/demo/3.1__my-app/src/app/app.module.ts
@@ -2,15 +2,15 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
-import { XButtonModule } from '@ng-nest/ui/button';
+import { XButtonComponent } from '@ng-nest/ui/button';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
-    XButtonModule
+    XButtonComponent
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/docs/ui/i18n/demo/3__module/module.ts b/docs/ui/i18n/demo/3__module/module.ts
@@ -1 +1 @@
-import { XI18nModule } from '@ng-nest/ui/i18n';
+import { XI18nModule } from '@ng-nest/ui/i18n';
diff --git a/lib/ng-nest/ui/affix/affix.component.spec.ts b/lib/ng-nest/ui/affix/affix.component.spec.ts
@@ -1,22 +1,27 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { XAffixComponent } from './affix.component';
 import { Component, DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { XAffixModule } from '@ng-nest/ui/affix';
+import { XAffixComponent } from '@ng-nest/ui/affix';
 import { XAffixPrefix } from './affix.property';
-import { XButtonModule } from '@ng-nest/ui/button';
+import { XButtonComponent } from '@ng-nest/ui/button';
 import { XThemeModule } from '@ng-nest/ui/theme';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe(XAffixPrefix, () => {
-  beforeEach((() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, HttpClientTestingModule, XAffixModule, XButtonModule, XThemeModule],
+      imports: [
+        BrowserAnimationsModule,
+        HttpClientTestingModule,
+        XAffixComponent,
+        XButtonComponent,
+        XThemeModule
+      ],
       declarations: [TestXAffixComponent]
     }).compileComponents();
-  }));
+  });
   describe(`default.`, () => {
     let fixture: ComponentFixture<TestXAffixComponent>;
     let affix: DebugElement;

diff --git a/lib/ng-nest/ui/affix/affix.component.ts b/lib/ng-nest/ui/affix/affix.component.ts
@@ -1,16 +1,16 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, inject } from '@angular/core';
 import { XAffixPrefix, XAffixProperty } from './affix.property';
 import { XConfigService } from '@ng-nest/ui/core';
 
 @Component({
   selector: `${XAffixPrefix}`,
+  standalone: true,
+  imports: [XAffixProperty],
   templateUrl: './affix.component.html',
   styleUrls: ['./affix.component.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class XAffixComponent extends XAffixProperty {
-  constructor(public configService: XConfigService) {
-    super();
-  }
+  configService = inject(XConfigService);
 }
diff --git a/lib/ng-nest/ui/affix/affix.module.ts b/lib/ng-nest/ui/affix/affix.module.ts
@@ -1,11 +1,8 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { XAffixComponent } from './affix.component';
-import { XAffixProperty } from './affix.property';
 
 @NgModule({
-  declarations: [XAffixComponent, XAffixProperty],
   exports: [XAffixComponent],
-  imports: [CommonModule]
+  imports: [XAffixComponent]
 })
 export class XAffixModule {}
diff --git a/lib/ng-nest/ui/affix/affix.property.ts b/lib/ng-nest/ui/affix/affix.property.ts
@@ -12,7 +12,7 @@ const X_CONFIG_NAME = 'affix';
 /**
  * Affix Property
  */
-@Component({ selector: `${XAffixPrefix}-property`, template: '' })
+@Component({ selector: `${XAffixPrefix}-property`, template: '', standalone: true })
 export class XAffixProperty extends XProperty {
   /**
    * @zh_CN 距离顶部距离

diff --git a/lib/ng-nest/ui/affix/examples/en_US/default/default/default.component.ts b/lib/ng-nest/ui/affix/examples/en_US/default/default/default.component.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
+import { XAffixComponent } from '@ng-nest/ui/affix';
+import { XButtonComponent } from '@ng-nest/ui/button';
 
 @Component({
   selector: 'ex-default',
+  standalone: true,
+  imports: [XAffixComponent, XButtonComponent],
   templateUrl: './default.component.html',
   styleUrls: ['./default.component.scss']
 })

diff --git a/lib/ng-nest/ui/affix/examples/en_US/default/scope/scope.component.ts b/lib/ng-nest/ui/affix/examples/en_US/default/scope/scope.component.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
+import { XAffixComponent } from '@ng-nest/ui/affix';
+import { XButtonComponent } from '@ng-nest/ui/button';
 
 @Component({
   selector: 'ex-scope',
+  standalone: true,
+  imports: [XAffixComponent, XButtonComponent],
   templateUrl: './scope.component.html',
   styleUrls: ['./scope.component.scss']
 })

diff --git a/lib/ng-nest/ui/affix/examples/zh_CN/default/default/default.component.ts b/lib/ng-nest/ui/affix/examples/zh_CN/default/default/default.component.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
+import { XAffixComponent } from '@ng-nest/ui/affix';
+import { XButtonComponent } from '@ng-nest/ui/button';
 
 @Component({
   selector: 'ex-default',
+  standalone: true,
+  imports: [XAffixComponent, XButtonComponent],
   templateUrl: './default.component.html',
   styleUrls: ['./default.component.scss']
 })

diff --git a/lib/ng-nest/ui/affix/examples/zh_CN/default/scope/scope.component.ts b/lib/ng-nest/ui/affix/examples/zh_CN/default/scope/scope.component.ts
@@ -1,7 +1,11 @@
 import { Component } from '@angular/core';
+import { XAffixComponent } from '@ng-nest/ui/affix';
+import { XButtonComponent } from '@ng-nest/ui/button';
 
 @Component({
   selector: 'ex-scope',
+  standalone: true,
+  imports: [XAffixComponent, XButtonComponent],
   templateUrl: './scope.component.html',
   styleUrls: ['./scope.component.scss']
 })

diff --git a/lib/ng-nest/ui/alert/alert.component.spec.ts b/lib/ng-nest/ui/alert/alert.component.spec.ts
@@ -1,24 +1,32 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { XAlertComponent } from './alert.component';
 import { Component, DebugElement, ChangeDetectorRef } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { XAlertModule } from '@ng-nest/ui/alert';
+import { XAlertComponent } from '@ng-nest/ui/alert';
 import { FormsModule } from '@angular/forms';
 import { XAlertPrefix } from './alert.property';
 import { XStatisticModule } from '@ng-nest/ui/statistic';
 import { XAddSeconds } from '@ng-nest/ui/core';
-import { XButtonModule } from '@ng-nest/ui/button';
+import { XButtonComponent } from '@ng-nest/ui/button';
 import { XThemeModule } from '@ng-nest/ui/theme';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe(XAlertPrefix, () => {
-  beforeEach((() => {
+  beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, HttpClientTestingModule, FormsModule, BrowserAnimationsModule, XButtonModule, XAlertModule, XStatisticModule, XThemeModule],
+      imports: [
+        BrowserAnimationsModule,
+        HttpClientTestingModule,
+        FormsModule,
+        BrowserAnimationsModule,
+        XButtonComponent,
+        XAlertComponent,
+        XStatisticModule,
+        XThemeModule
+      ],
       declarations: [TestXAlertComponent]
     }).compileComponents();
-  }));
+  });
   describe(`default.`, () => {
     let fixture: ComponentFixture<TestXAlertComponent>;
     let alert: DebugElement;
@@ -58,8 +66,16 @@ describe(XAlertPrefix, () => {
       <x-alert title="不可关闭" type="success" hideClose> </x-alert>
       <x-alert title="自定义关闭内容" type="info" closeText="知道了"> </x-alert>
       <x-alert title="关闭事件" type="warning" (close)="close()"> </x-alert>
-      <x-alert [title]="titleTpl" type="success" showIcon duration="10000" content="秒后关闭"></x-alert>
-      <ng-template #titleTpl> <x-countdown [value]="deadline" format="ss:SSS"></x-countdown></ng-template>
+      <x-alert
+        [title]="titleTpl"
+        type="success"
+        showIcon
+        duration="10000"
+        content="秒后关闭"
+      ></x-alert>
+      <ng-template #titleTpl>
+        <x-countdown [value]="deadline" format="ss:SSS"></x-countdown
+      ></ng-template>
     </div>
     <div class="row">
       <x-alert title="成功提示" type="success" showIcon> </x-alert>
@@ -77,7 +93,8 @@ describe(XAlertPrefix, () => {
       <x-alert title="错误提示" type="error" [content]="content" showIcon> </x-alert>
     </div>
     <div class="row">
-      <x-alert title="控制关闭" type="success" [hide]="hide" (close)="close()" manual showIcon> </x-alert>
+      <x-alert title="控制关闭" type="success" [hide]="hide" (close)="close()" manual showIcon>
+      </x-alert>
       <x-button (click)="toggle()">{{ hide ? '显示' : '隐藏' }}</x-button>
     </div>
   `,
@@ -99,7 +116,8 @@ describe(XAlertPrefix, () => {
 })
 class TestXAlertComponent {
   hide = false;
-  content = '天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。';
+  content =
+    '天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为也，所以动心忍性，增益其所不能。';
 
   deadline = XAddSeconds(new Date(), 10).getTime();
   constructor(private cdr: ChangeDetectorRef) {}

diff --git a/lib/ng-nest/ui/alert/alert.component.ts b/lib/ng-nest/ui/alert/alert.component.ts
@@ -6,16 +6,33 @@ import {
   ChangeDetectionStrategy,
   OnDestroy,
   SimpleChanges,
-  ViewChild
+  ViewChild,
+  inject
 } from '@angular/core';
 import { XAlertPrefix, XAlertProperty } from './alert.property';
 import { XFadeAnimation, XIsEmpty, XConfigService, XIsChange, XClearClass } from '@ng-nest/ui/core';
 import { of, Subject } from 'rxjs';
 import { delay, takeUntil } from 'rxjs/operators';
 import { CdkDrag } from '@angular/cdk/drag-drop';
+import { CommonModule } from '@angular/common';
+import { XIconComponent } from '@ng-nest/ui/icon';
+import { XOutletDirective } from '@ng-nest/ui/outlet';
+import { XButtonComponent } from '@ng-nest/ui/button';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { XResizableDirective } from '@ng-nest/ui/resizable';
 
 @Component({
   selector: `${XAlertPrefix}`,
+  standalone: true,
+  imports: [
+    CommonModule,
+    DragDropModule,
+    XIconComponent,
+    XButtonComponent,
+    XOutletDirective,
+    XResizableDirective,
+    XAlertProperty
+  ],
   templateUrl: './alert.component.html',
   styleUrls: ['./alert.component.scss'],
   encapsulation: ViewEncapsulation.None,
@@ -25,10 +42,8 @@ import { CdkDrag } from '@angular/cdk/drag-drop';
 export class XAlertComponent extends XAlertProperty implements OnInit, OnDestroy {
   @ViewChild('alert') alert!: CdkDrag;
   private _unSubject = new Subject<void>();
-
-  constructor(public cdr: ChangeDetectorRef, public configService: XConfigService) {
-    super();
-  }
+  private cdr = inject(ChangeDetectorRef);
+  configService = inject(XConfigService);
 
   ngOnInit() {
     this.setClassMap();
@@ -42,18 +57,18 @@ export class XAlertComponent extends XAlertProperty implements OnInit, OnDestroy
 
   ngOnChanges(changes: SimpleChanges): void {
     const { type, effect, title, content, showIcon, draggable } = changes;
-    XIsChange(type, effect, title, content, showIcon, draggable) && this.setClassMap(); 
+    XIsChange(type, effect, title, content, showIcon, draggable) && this.setClassMap();
   }
 
   setClassMap() {
     XClearClass(this.classMap);
     this.classMap = {
       [`${XAlertPrefix}-${this.type}`]: !XIsEmpty(this.type),
       [`x-${this.effect}`]: !XIsEmpty(this.effect),
-      [`${XAlertPrefix}-icon-medium`]: !XIsEmpty(this.title) && !XIsEmpty(this.content) && !XIsEmpty(this.showIcon),
+      [`${XAlertPrefix}-icon-medium`]:
+        !XIsEmpty(this.title) && !XIsEmpty(this.content) && !XIsEmpty(this.showIcon),
       [`${XAlertPrefix}-draggable`]: Boolean(this.draggable)
     };
-
   }
 
   setDuration() {
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		import { XI18nModule } from '@ng-nest/ui/i18n';
		import { XI18nModule } from '@ng-nest/ui/i18n';