feat(abc:sv): support standalone

ng-alain · Jan 11, 2024 · f47192f · f47192f
1 parent 0f47ce4
commit f47192f
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 43 deletions.
diff --git a/packages/abc/sg/index.en-US.md b/packages/abc/sg/index.en-US.md
@@ -31,15 +31,15 @@ More friendly:
 
 ## API
 
-### sg-container
+### sg-container:standalone
 
 | Property | Description | Type | Default | Global Config |
 |----------|-------------|------|---------|---------------|
 | `[gutter]` | specify the distance between two items, unit is `px`, only `nzLayout:horizontal` | `number` | `32` | ✅ |
 | `[sg-container]` | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/theme/responsive) | `'1','2','3','4','5','6'` | - | - |
 | `[col]` | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/theme/responsive) | `'1','2','3','4','5','6'` | `2` | ✅ |
 
-### sg
+### sg:standalone
 
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|

diff --git a/packages/abc/sg/index.zh-CN.md b/packages/abc/sg/index.zh-CN.md
@@ -31,15 +31,15 @@ module: import { SGModule } from '@delon/abc/sg';
 
 ## API
 
-### sg-container
+### sg-container:standalone
 
 | 成员 | 说明 | 类型 | 默认值 | 全局配置 |
 |----|----|----|-----|------|
 | `[gutter]` | 间距，当 `nzLayout:horizontal` 时有效 | `number` | `32` | ✅ |
 | `[sg-container]` | 指定表单元素最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/theme/responsive)决定， | `'1','2','3','4','5','6'` | - | - |
 | `[col]` | 指定表单元素最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/theme/responsive)决定， | `'1','2','3','4','5','6'` | `2` | ✅ |
 
-### sg
+### sg:standalone
 
 | 成员 | 说明 | 类型 | 默认值 |
 |----|----|----|-----|

diff --git a/packages/abc/sv/sv-container.component.ts b/packages/abc/sv/sv-container.component.ts
@@ -1,3 +1,4 @@
+import { NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -14,6 +15,43 @@ import {
 import type { REP_TYPE } from '@delon/theme';
 import { AlainConfigService } from '@delon/util/config';
 import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator';
+import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
+
+@Component({
+  selector: 'sv-title, [sv-title]',
+  exportAs: 'svTitle',
+  template: '<ng-content />',
+  host: {
+    '[class.sv__title]': 'true'
+  },
+  preserveWhitespaces: false,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  standalone: true
+})
+export class SVTitleComponent implements OnInit {
+  constructor(
+    private el: ElementRef<HTMLElement>,
+    @Host() @Optional() private parent: SVContainerComponent,
+    private ren: Renderer2
+  ) {
+    if (parent == null) {
+      throw new Error(`[sv-title] must include 'sv-container' component`);
+    }
+  }
+
+  private setClass(): void {
+    const gutter = this.parent.gutter;
+    const el = this.el.nativeElement;
+    this.ren.setStyle(el, 'padding-left', `${gutter / 2}px`);
+    this.ren.setStyle(el, 'padding-right', `${gutter / 2}px`);
+  }
+
+  ngOnInit(): void {
+    this.setClass();
+  }
+}
+
 @Component({
   selector: 'sv-container, [sv-container]',
   exportAs: 'svContainer',
@@ -38,7 +76,9 @@ import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/uti
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [NgStyle, SVTitleComponent, NzStringTemplateOutletDirective]
 })
 export class SVContainerComponent {
   static ngAcceptInputType_gutter: NumberInput;
@@ -76,37 +116,3 @@ export class SVContainerComponent {
     });
   }
 }
-
-@Component({
-  selector: 'sv-title, [sv-title]',
-  exportAs: 'svTitle',
-  template: '<ng-content />',
-  host: {
-    '[class.sv__title]': 'true'
-  },
-  preserveWhitespaces: false,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
-})
-export class SVTitleComponent implements OnInit {
-  constructor(
-    private el: ElementRef<HTMLElement>,
-    @Host() @Optional() private parent: SVContainerComponent,
-    private ren: Renderer2
-  ) {
-    if (parent == null) {
-      throw new Error(`[sv-title] must include 'sv-container' component`);
-    }
-  }
-
-  private setClass(): void {
-    const gutter = this.parent.gutter;
-    const el = this.el.nativeElement;
-    this.ren.setStyle(el, 'padding-left', `${gutter / 2}px`);
-    this.ren.setStyle(el, 'padding-right', `${gutter / 2}px`);
-  }
-
-  ngOnInit(): void {
-    this.setClass();
-  }
-}
diff --git a/packages/abc/sv/sv-value.component.ts b/packages/abc/sv/sv-value.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
 
 import type { NzTSType } from 'ng-zorro-antd/core/types';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
 @Component({
   selector: 'sv-value, [sv-value]',
@@ -21,7 +22,9 @@ import type { NzTSType } from 'ng-zorro-antd/core/types';
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [NzToolTipModule]
 })
 export class SVValueComponent {
   @Input() prefix?: string;

diff --git a/packages/abc/sv/sv.component.ts b/packages/abc/sv/sv.component.ts
@@ -1,3 +1,4 @@
+import { ObserversModule } from '@angular/cdk/observers';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
@@ -16,6 +17,9 @@ import {
 import { ResponsiveService } from '@delon/theme';
 import { isEmpty } from '@delon/util/browser';
 import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator';
+import { NzStringTemplateOutletDirective } from 'ng-zorro-antd/core/outlet';
+import { NzIconDirective } from 'ng-zorro-antd/icon';
+import { NzToolTipModule } from 'ng-zorro-antd/tooltip';
 
 import { SVContainerComponent } from './sv-container.component';
 
@@ -31,7 +35,9 @@ const prefixCls = `sv`;
   },
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [NzStringTemplateOutletDirective, NzToolTipModule, NzIconDirective, ObserversModule]
 })
 export class SVComponent implements AfterViewInit, OnChanges {
   static ngAcceptInputType_col: NumberInput;

diff --git a/packages/abc/sv/sv.module.ts b/packages/abc/sv/sv.module.ts
@@ -13,8 +13,7 @@ import { SVComponent } from './sv.component';
 const COMPONENTS = [SVContainerComponent, SVComponent, SVTitleComponent, SVValueComponent];
 
 @NgModule({
-  imports: [CommonModule, ObserversModule, NzToolTipModule, NzIconModule, NzOutletModule],
-  declarations: COMPONENTS,
+  imports: [CommonModule, ObserversModule, NzToolTipModule, NzIconModule, NzOutletModule, ...COMPONENTS],
   exports: COMPONENTS
 })
 export class SVModule {}