ng-alain 21.0.5 → 21.1.0

package/application/files/root/.vscode/settings.json

@@ -2,16 +2,17 @@
   "typescript.tsdk": "./node_modules/typescript/lib",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
+    "source.fixAll.eslint": "always",
     "source.fixAll.stylelint": "explicit"
   },
+  "eslint.validate": ["typescript", "html"],
   "[html]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.formatOnSave": false,
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
   "[typescript]": {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": false,
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   },
   "[markdown]": {
     "editor.formatOnSave": false

package/application/files/root/eslint.config.mjs

@@ -15,12 +15,7 @@ export default defineConfig(
       '.*/',
       'dist/',
       'coverage/',
-      'junit/',
-      'ng-alain/',
-      'schematics/**/files/**/*',
-      'src/dist/**/*',
-      'src/templates/**/*',
-      'src/app/routes/gen/**/*'
+      'junit/'
     ]
   },
   {
@@ -135,7 +130,15 @@ export default defineConfig(
       // ...angular.configs.templateAccessibility,
     ],
     rules: {
-      "prettier/prettier": ["error"],
+      'prettier/prettier': [
+        'error',
+        {
+          parser: 'angular'
+        },
+        {
+          usePrettierrc: true
+        }
+      ],
       "@angular-eslint/template/eqeqeq": "off",
       "@angular-eslint/template/prefer-self-closing-tags": "error"
     }

package/application/files/src/app/app.config.ts

@@ -1,6 +1,12 @@
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { default as ngLang } from '@angular/common/locales/zh';
-import { ApplicationConfig, EnvironmentProviders, Provider } from '@angular/core';
+import {
+  ApplicationConfig,
+  EnvironmentProviders,
+  provideBrowserGlobalErrorListeners,
+  Provider,
+  provideZonelessChangeDetection
+} from '@angular/core';
 import { provideRouter, withComponentInputBinding, withViewTransitions, withInMemoryScrolling, withHashLocation, RouterFeatures } from '@angular/router';
 import { <% if (i18n) { %>I18NService, <% } %>defaultInterceptor, provideStartup } from '@core';
 import { provideCellWidgets } from '@delon/abc/cell';
@@ -43,6 +49,8 @@ const routerFeatures: RouterFeatures[] = [
 if (environment.useHash) routerFeatures.push(withHashLocation());
 
 const providers: Array<Provider | EnvironmentProviders> = [
+  provideBrowserGlobalErrorListeners(),
+  provideZonelessChangeDetection(),
   provideHttpClient(withInterceptors([...(environment.interceptorFns ?? []), authSimpleInterceptor, defaultInterceptor])),
   provideRouter(routes, ...routerFeatures),<% if (reuseTab) { %>
   provideReuseTabConfig(),<% } %>

package/application/files/src/app/{app.component.ts → app.ts}

@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { NavigationEnd, NavigationError, RouteConfigLoadStart, Router, RouterOutlet } from '@angular/router';
 import { TitleService, VERSION as VERSION_ALAIN, stepPreloader } from '@delon/theme';
 import { environment } from '@env/environment';
@@ -14,16 +14,16 @@ import { VERSION as VERSION_ZORRO } from 'ng-zorro-antd/version';
     '[attr.ng-zorro-version]': 'ngZorroVersion'
   }
 })
-export class AppComponent implements OnInit {
+export class App {
   private readonly router = inject(Router);
   private readonly titleSrv = inject(TitleService);
   private readonly modalSrv = inject(NzModalService);
-  ngAlainVersion = VERSION_ALAIN.full;
-  ngZorroVersion = VERSION_ZORRO.full;
+  protected ngAlainVersion = VERSION_ALAIN.full;
+  protected ngZorroVersion = VERSION_ZORRO.full;
 
   private donePreloader = stepPreloader();
 
-  ngOnInit(): void {
+  constructor() {
     let configLoad = false;
     this.router.events.subscribe(ev => {
       if (ev instanceof RouteConfigLoadStart) {

package/application/files/src/app/core/startup/startup.service.ts

@@ -1,4 +1,4 @@
-import { APP_INITIALIZER, Injectable, Provider, inject } from '@angular/core';
+import { EnvironmentProviders, Injectable, Provider, inject, provideAppInitializer } from '@angular/core';
 import { Router } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
 import { DA_SERVICE_TOKEN } from '@delon/auth';
@@ -12,15 +12,16 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
  * Used for application startup
  * Generally used to get the basic data of the application, like: Menu Data, User Data, etc.
  */
-export function provideStartup(): Provider[] {
+export function provideStartup(): Array<Provider | EnvironmentProviders> {
   return [
     StartupService,
-    {
-      provide: APP_INITIALIZER,
-      useFactory: (startupService: StartupService) => () => startupService.load(),
-      deps: [StartupService],
-      multi: true
-    }
+    provideAppInitializer(() => {
+      const initializerFn = (
+        (startupService: StartupService) => () =>
+          startupService.load()
+      )(inject(StartupService));
+      return initializerFn();
+    })
   ];
 }
 
@@ -44,6 +45,14 @@ export class StartupService {
     })
   );
 
+  load(): Observable<void> {
+    // http
+    // return this.viaHttp();
+    // mock: Don’t use it in a production environment. ViaMock is just to simulate some data to make the scaffolding work normally
+    // mock：请勿在生产环境中这么使用，viaMock 单纯只是为了模拟一些数据使脚手架一开始能正常运行
+    return <% if (i18n) { %>this.viaMockI18n();<% } else { %>this.viaMock();<% } %>
+  }
+
   private handleAppData(res: NzSafeAny): void {
     // Application information: including site name, description, year
     this.settingService.setApp(res.app);
@@ -129,12 +138,4 @@ export class StartupService {
 
     return of(void 0);
   }
-
-  load(): Observable<void> {
-    // http
-    // return this.viaHttp();
-    // mock: Don’t use it in a production environment. ViaMock is just to simulate some data to make the scaffolding work normally
-    // mock：请勿在生产环境中这么使用，viaMock 单纯只是为了模拟一些数据使脚手架一开始能正常运行
-    return <% if (i18n) { %>this.viaMockI18n();<% } else { %>this.viaMock();<% } %>
-  }
 }

package/application/files/src/app/layout/basic/{basic.component.ts → basic.ts}

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { RouterLink, RouterOutlet } from '@angular/router';
 import { I18nPipe, SettingsService, User } from '@delon/theme';
 import { LayoutDefaultModule, LayoutDefaultOptions } from '@delon/theme/layout-default';
@@ -11,11 +11,11 @@ import { NzDropdownModule } from 'ng-zorro-antd/dropdown';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzMenuModule } from 'ng-zorro-antd/menu';
 
-import { HeaderClearStorageComponent } from './widgets/clear-storage.component';
-import { HeaderFullScreenComponent } from './widgets/fullscreen.component';
-import { HeaderSearchComponent } from './widgets/search.component';
-import { HeaderUserComponent } from './widgets/user.component';<% if (i18n) { %>
-import { HeaderI18nComponent } from './widgets/i18n.component';<% } %>
+import { HeaderClearStorage } from './widgets/clear-storage';
+import { HeaderFullScreen } from './widgets/fullscreen';
+import { HeaderSearch } from './widgets/search';
+import { HeaderUser } from './widgets/user';<% if (i18n) { %>
+import { HeaderI18n } from './widgets/i18n';<% } %>
 
 @Component({
   selector: 'layout-basic',
@@ -32,12 +32,12 @@ import { HeaderI18nComponent } from './widgets/i18n.component';<% } %>
         </a>
       </layout-default-header-item>
       <layout-default-header-item direction="left" hidden="pc">
-        <div layout-default-header-item-trigger (click)="searchToggleStatus = !searchToggleStatus">
+        <div layout-default-header-item-trigger (click)="searchToggleStatus.set(!searchToggleStatus())">
           <nz-icon nzType="search" />
         </div>
       </layout-default-header-item>
       <layout-default-header-item direction="middle">
-        <header-search class="alain-default__search" [toggleChange]="searchToggleStatus" />
+        <header-search [(toggleChange)]="searchToggleStatus" />
       </layout-default-header-item>
       <layout-default-header-item direction="right" hidden="mobile">
         <div layout-default-header-item-trigger nz-dropdown [nzDropdownMenu]="settingsMenu" nzTrigger="click" nzPlacement="bottomRight">
@@ -98,22 +98,19 @@ import { HeaderI18nComponent } from './widgets/i18n.component';<% } %>
     NzMenuModule,
     NzDropdownModule,
     NzAvatarModule,
-    HeaderSearchComponent,
-    HeaderClearStorageComponent,
-    HeaderFullScreenComponent,
-    HeaderUserComponent<% if (i18n) { %>,
-    HeaderI18nComponent<% } %>
+    HeaderSearch,
+    HeaderClearStorage,
+    HeaderFullScreen,
+    HeaderUser<% if (i18n) { %>,
+    HeaderI18n<% } %>
   ]
 })
-export class LayoutBasicComponent {
-  private readonly settings = inject(SettingsService);
-  options: LayoutDefaultOptions = {
+export class LayoutBasic {
+  readonly user = inject(SettingsService).user;
+  protected options: LayoutDefaultOptions = {
     logoExpanded: `./assets/logo-full.svg`,
     logoCollapsed: `./assets/logo.svg`
   };
-  searchToggleStatus = false;
-  showSettingDrawer = !environment.production;
-  get user(): User {
-    return this.settings.user;
-  }
+  protected searchToggleStatus = signal(false);
+  protected showSettingDrawer = !environment.production;
 }

package/application/files/src/app/layout/basic/widgets/{clear-storage.component.ts → clear-storage.ts}

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, HostListener, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { I18nPipe } from '@delon/theme';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzMessageService } from 'ng-zorro-antd/message';
@@ -11,17 +11,17 @@ import { NzModalService } from 'ng-zorro-antd/modal';
     {{ 'menu.clear.local.storage' | i18n }}
   `,
   host: {
-    '[class.flex-1]': 'true'
+    class: 'flex-1',
+    '(click)': '_click()'
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [NzIconModule, I18nPipe]
 })
-export class HeaderClearStorageComponent {
+export class HeaderClearStorage {
   private readonly modalSrv = inject(NzModalService);
   private readonly messageSrv = inject(NzMessageService);
 
-  @HostListener('click')
-  _click(): void {
+  protected _click(): void {
     this.modalSrv.confirm({
       nzTitle: 'Make sure clear all local storage?',
       nzOnOk: () => {

package/application/files/src/app/layout/basic/widgets/fullscreen.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { I18nPipe } from '@delon/theme';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import screenfull from 'screenfull';
+
+@Component({
+  selector: 'header-fullscreen',
+  template: `
+    @let s = status();
+    <nz-icon [nzType]="s ? 'fullscreen-exit' : 'fullscreen'" />
+    {{ (s ? 'menu.fullscreen.exit' : 'menu.fullscreen') | i18n }}
+  `,
+  host: {
+    class: 'flex-1',
+    '(window:resize)': '_resize()',
+    '(click)': '_click()'
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NzIconModule, I18nPipe]
+})
+export class HeaderFullScreen {
+  protected status = signal(false);
+
+  protected _resize(): void {
+    this.status.set(screenfull.isFullscreen);
+  }
+
+  protected _click(): void {
+    if (screenfull.isEnabled) {
+      screenfull.toggle();
+    }
+  }
+}

package/application/files/src/app/layout/basic/widgets/{i18n.component.ts → i18n.ts}

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, booleanAttribute, inject, DOCUMENT } from '@angular/core';
+import { ChangeDetectionStrategy, Component, booleanAttribute, inject, DOCUMENT, input } from '@angular/core';
 import { I18NService } from '@core';
 import { ALAIN_I18N_TOKEN, I18nPipe, SettingsService } from '@delon/theme';
 import { NzDropdownModule } from 'ng-zorro-antd/dropdown';
@@ -8,7 +8,7 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
 @Component({
   selector: 'header-i18n',
   template: `
-    @if (showLangText) {
+    @if (showLangText()) {
       <div nz-dropdown [nzDropdownMenu]="langMenu" nzPlacement="bottomRight">
         <nz-icon nzType="global" />
         {{ 'menu.lang' | i18n }}
@@ -29,27 +29,23 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
     </nz-dropdown-menu>
   `,
   host: {
-    '[class.flex-1]': 'true'
+    class: 'flex-1'
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [I18nPipe, NzDropdownModule, NzIconModule, NzMenuModule]
 })
-export class HeaderI18nComponent {
+export class HeaderI18n {
   private readonly settings = inject(SettingsService);
   private readonly i18n = inject<I18NService>(ALAIN_I18N_TOKEN);
   private readonly doc = inject(DOCUMENT);
-  /** Whether to display language text */
-  @Input({ transform: booleanAttribute }) showLangText = true;
 
-  get langs(): Array<{ code: string; text: string; abbr: string }> {
-    return this.i18n.getLangs();
-  }
+  /** Whether to display language text */
+  readonly showLangText = input(true, { transform: booleanAttribute });
 
-  get curLangCode(): string {
-    return this.settings.layout.lang;
-  }
+  protected readonly langs = this.i18n.getLangs();
+  protected readonly curLangCode = this.settings.layout.lang;
 
-  change(lang: string): void {
+  protected change(lang: string): void {
     const spinEl = this.doc.createElement('div');
     spinEl.setAttribute('class', `page-loading ant-spin ant-spin-lg ant-spin-spinning`);
     spinEl.innerHTML = `<span class="ant-spin-dot ant-spin-dot-spin"><i></i><i></i><i></i><i></i></span>`;

package/application/files/src/app/layout/basic/widgets/search.ts

@@ -0,0 +1,98 @@
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, afterNextRender, effect, inject, model, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { HotkeyDirective } from '@delon/abc/hotkey';
+import { I18nPipe } from '@delon/theme';
+import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { BehaviorSubject, debounceTime, delay, distinctUntilChanged, filter, tap } from 'rxjs';
+
+@Component({
+  selector: 'header-search',
+  template: `
+    <nz-input-wrapper>
+      <nz-icon nzInputPrefix [nzType]="focus() ? 'arrow-down' : 'search'" />
+      @if (loading()) {
+        <nz-icon nzInputSuffix nzType="loading" />
+      }
+      <input
+        type="text"
+        nz-input
+        [nzAutocomplete]="auto"
+        (input)="search($event)"
+        (focus)="qFocus()"
+        (blur)="qBlur()"
+        hotkey="F1"
+        [attr.placeholder]="'menu.search.placeholder' | i18n"
+      />
+    </nz-input-wrapper>
+    <nz-autocomplete nzBackfill #auto>
+      @for (i of options(); track $index) {
+        <nz-auto-option [nzValue]="i">{{ i }}</nz-auto-option>
+      }
+    </nz-autocomplete>
+  `,
+  host: {
+    class: 'alain-default__search',
+    '[class.alain-default__search-focus]': 'focus()',
+    '[class.alain-default__search-toggled]': 'searchToggled()'
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [I18nPipe, NzInputModule, NzIconModule, NzAutocompleteModule, HotkeyDirective]
+})
+export class HeaderSearch {
+  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;
+  private readonly d$ = inject(DestroyRef);
+  private readonly search$ = new BehaviorSubject('');
+  protected options = signal<string[]>([]);
+  protected loading = signal(false);
+  protected focus = signal(false);
+  protected searchToggled = signal(false);
+
+  readonly toggleChange = model(false);
+
+  constructor() {
+    afterNextRender(() => {
+      this.search$
+        .pipe(
+          debounceTime(500),
+          distinctUntilChanged(),
+          filter(value => value.length > 0),
+          tap(() => this.loading.set(true)),
+          delay(500), // Mock http
+          takeUntilDestroyed(this.d$)
+        )
+        .subscribe(value => {
+          this.loading.set(false);
+          this.options.set(value ? [value, value + value, value + value + value] : []);
+        });
+    });
+
+    effect(() => {
+      const v = this.searchToggled();
+      if (v == null) return;
+
+      this.searchToggled.set(v);
+      this.focus.set(v);
+      const ipt = this.el.querySelector<HTMLInputElement>('.ant-input');
+      if (v && ipt) {
+        ipt.focus();
+      }
+    });
+  }
+
+  protected qFocus(): void {
+    this.focus.set(true);
+  }
+
+  protected qBlur(): void {
+    this.focus.set(false);
+    this.searchToggled.set(false);
+    this.options.set([]);
+    this.toggleChange.set(false);
+  }
+
+  protected search(ev: Event): void {
+    this.search$.next((ev.target as HTMLInputElement).value);
+  }
+}

package/application/files/src/app/layout/basic/widgets/{user.component.ts → user.ts}

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
 import { DA_SERVICE_TOKEN } from '@delon/auth';
-import { I18nPipe, SettingsService, User } from '@delon/theme';
+import { I18nPipe, SettingsService } from '@delon/theme';
 import { NzAvatarModule } from 'ng-zorro-antd/avatar';
 import { NzDropdownModule } from 'ng-zorro-antd/dropdown';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -39,15 +39,12 @@ import { NzMenuModule } from 'ng-zorro-antd/menu';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [RouterLink, NzDropdownModule, NzMenuModule, NzIconModule, I18nPipe, NzAvatarModule]
 })
-export class HeaderUserComponent {
-  private readonly settings = inject(SettingsService);
+export class HeaderUser {
+  protected readonly user = inject(SettingsService).user;
   private readonly router = inject(Router);
   private readonly tokenService = inject(DA_SERVICE_TOKEN);
-  get user(): User {
-    return this.settings.user;
-  }
 
-  logout(): void {
+  protected logout(): void {
     this.tokenService.clear();
     this.router.navigateByUrl(this.tokenService.login_url!);
   }

package/application/files/src/app/layout/blank/{blank.component.ts → blank.ts}

@@ -5,8 +5,8 @@ import { RouterOutlet } from '@angular/router';
   selector: 'layout-blank',
   template: `<router-outlet />`,
   host: {
-    '[class.alain-blank]': 'true'
+    class: 'alain-blank'
   },
   imports: [RouterOutlet]
 })
-export class LayoutBlankComponent {}
+export class LayoutBlank {}

package/application/files/src/app/layout/index.ts

@@ -1,3 +1,3 @@
-export * from './basic/basic.component';
-export * from './blank/blank.component';
-export * from './passport/passport.component';
+export * from './basic/basic';
+export * from './blank/blank';
+export * from './passport/passport';

package/application/files/src/app/layout/passport/{passport.component.ts → passport.ts}

@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { GlobalFooterModule } from '@delon/abc/global-footer';
 import { DA_SERVICE_TOKEN } from '@delon/auth';
@@ -28,11 +28,11 @@ import { HeaderI18nComponent } from '../basic/widgets/i18n.component';<% } %>
       </div>
     </div>
   `,
-  styleUrls: ['./passport.component.less'],
+  styleUrls: ['./passport.less'],
   imports: [RouterOutlet<% if (i18n) { %>, HeaderI18nComponent<% } %>, GlobalFooterModule, NzIconModule]
 })
-export class LayoutPassportComponent implements OnInit {
-  private tokenService = inject(DA_SERVICE_TOKEN);
+export class LayoutPassport {
+  private tokenSrv = inject(DA_SERVICE_TOKEN);
 
   links = [
     {
@@ -49,7 +49,7 @@ export class LayoutPassportComponent implements OnInit {
     }
   ];
 
-  ngOnInit(): void {
-    this.tokenService.clear();
+  constructor() {
+    this.tokenSrv.clear();
   }
 }

package/application/files/src/app/routes/passport/routes.ts

@@ -5,13 +5,13 @@ import { UserLockComponent } from './lock/lock.component';
 import { UserLoginComponent } from './login/login.component';
 import { UserRegisterComponent } from './register/register.component';
 import { UserRegisterResultComponent } from './register-result/register-result.component';
-import { LayoutPassportComponent } from '../../layout';
+import { LayoutPassport } from '../../layout';
 
 export const routes: Routes = [
   // passport
   {
     path: 'passport',
-    component: LayoutPassportComponent,
+    component: LayoutPassport,
     children: [
       {
         path: 'login',

package/application/files/src/app/routes/routes.ts

@@ -3,12 +3,12 @@ import { startPageGuard } from '@core';
 import { authSimpleCanActivate, authSimpleCanActivateChild } from '@delon/auth';
 
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { LayoutBasicComponent } from '../layout';
+import { LayoutBasic } from '../layout';
 
 export const routes: Routes = [
   {
     path: '',
-    component: LayoutBasicComponent,
+    component: LayoutBasic,
     canActivate: [startPageGuard, authSimpleCanActivate],
     canActivateChild: [authSimpleCanActivateChild],
     data: {},