feat(module:space): add space compact component

NG-ZORRO · Sep 21, 2024 · 3c1cbd5 · 3c1cbd5
1 parent c64e1a1
commit 3c1cbd5
Show file tree

Hide file tree

Showing 27 changed files with 580 additions and 19 deletions.
diff --git a/components/button/button-group.component.ts b/components/button/button-group.component.ts
@@ -10,6 +10,9 @@ import { takeUntil } from 'rxjs/operators';
 
 export type NzButtonGroupSize = 'large' | 'default' | 'small';
 
+/**
+ * @deprecated Will be removed in v20. Use `NzSpaceCompactComponent` instead.
+ */
 @Component({
   selector: 'nz-button-group',
   exportAs: 'nzButtonGroup',

diff --git a/components/button/button.component.ts b/components/button/button.component.ts
@@ -27,6 +27,7 @@ import { filter, startWith, takeUntil } from 'rxjs/operators';
 
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzIconDirective, NzIconModule } from 'ng-zorro-antd/icon';
+import { NZ_SPACE_COMPACT_ITEM_TYPE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space';
 
 export type NzButtonType = 'primary' | 'default' | 'dashed' | 'link' | 'text' | null;
 export type NzButtonShape = 'circle' | 'round' | null;
@@ -37,6 +38,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'button';
 @Component({
   selector: 'button[nz-button], a[nz-button]',
   exportAs: 'nzButton',
+  standalone: true,
+  imports: [NzIconModule],
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -67,8 +70,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'button';
     '[attr.tabindex]': 'disabled ? -1 : (tabIndex === null ? null : tabIndex)',
     '[attr.disabled]': 'disabled || null'
   },
-  imports: [NzIconModule],
-  standalone: true
+  hostDirectives: [NzSpaceCompactItemDirective],
+  providers: [{ provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'btn' }]
 })
 export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, AfterContentInit, OnInit {
   readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME;

diff --git a/components/button/demo/button-group.md b/components/button/demo/button-group.md
@@ -11,8 +11,12 @@ title:
 
 通过设置 `nzSize` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `nzSize`，则尺寸为中。
 
+警告：在 v19.0.0 中被弃用，请使用 `<nz-space-compact>` 组件替代。
+
 ## en-US
 
 Buttons can be grouped by placing multiple `nz-button` components into a `nz-button-group`.
 
 The `nzSize` can be set to `large`, `small` or left unset resulting in a default size.
+
+Warning: Deprecated in v19.0.0, use `<nz-space-compact>` instead.
diff --git a/components/cascader/cascader.component.ts b/components/cascader/cascader.component.ts
@@ -55,6 +55,7 @@ import { getStatusClassNames, toArray } from 'ng-zorro-antd/core/util';
 import { NzEmptyModule } from 'ng-zorro-antd/empty';
 import { NzCascaderI18nInterface, NzI18nService } from 'ng-zorro-antd/i18n';
 import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NZ_SPACE_COMPACT_ITEM_TYPE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space';
 
 import { NzCascaderOptionComponent } from './cascader-li.component';
 import { NzCascaderService } from './cascader.service';
@@ -217,6 +218,7 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
       useExisting: forwardRef(() => NzCascaderComponent),
       multi: true
     },
+    { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'select' },
     NzCascaderService,
     NzDestroyService
   ],
@@ -234,6 +236,7 @@ const defaultDisplayRender = (labels: string[]): string => labels.join(' / ');
     '[class.ant-select-single]': 'true',
     '[class.ant-select-rtl]': `dir === 'rtl'`
   },
+  hostDirectives: [NzSpaceCompactItemDirective],
   imports: [
     OverlayModule,
     FormsModule,

diff --git a/components/core/types/size.ts b/components/core/types/size.ts
@@ -5,5 +5,6 @@
 
 // TODO: replace other size with this type.
 export type NzSizeLDSType = 'large' | 'default' | 'small';
+export type NzSizeLMSType = 'large' | 'middle' | 'small';
 export type NzSizeMDSType = 'middle' | 'default' | 'small';
 export type NzSizeDSType = 'default' | 'small';
diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
@@ -69,6 +69,7 @@ import {
   NzI18nService
 } from 'ng-zorro-antd/i18n';
 import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NZ_SPACE_COMPACT_ITEM_TYPE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space';
 
 import { DatePickerService } from './date-picker.service';
 import { DateRangePopupComponent } from './date-range-popup.component';
@@ -249,9 +250,11 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
     '[class.ant-picker-inline]': `nzInline`,
     '(click)': 'onClickInputBox($event)'
   },
+  hostDirectives: [NzSpaceCompactItemDirective],
   providers: [
     NzDestroyService,
     DatePickerService,
+    { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'picker' },
     {
       provide: NG_VALUE_ACCESSOR,
       multi: true,

diff --git a/components/input-number/input-number.component.ts b/components/input-number/input-number.component.ts
@@ -44,6 +44,7 @@ import {
 } from 'ng-zorro-antd/core/types';
 import { getStatusClassNames, isNotNil } from 'ng-zorro-antd/core/util';
 import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NZ_SPACE_COMPACT_ITEM_TYPE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space';
 
 @Component({
   selector: 'nz-input-number',
@@ -97,6 +98,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
       useExisting: forwardRef(() => NzInputNumberComponent),
       multi: true
     },
+    { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input-number' },
     NzDestroyService
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -113,7 +115,8 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
     '[class.ant-input-number-borderless]': `nzBorderless`
   },
   imports: [NzIconModule, FormsModule, NzFormPatchModule],
-  standalone: true
+  standalone: true,
+  hostDirectives: [NzSpaceCompactItemDirective]
 })
 export class NzInputNumberComponent implements ControlValueAccessor, AfterViewInit, OnChanges, OnInit, OnDestroy {
   private autoStepTimer?: ReturnType<typeof setTimeout>;

diff --git a/components/input/input.directive.ts b/components/input/input.directive.ts
@@ -25,6 +25,7 @@ import { distinctUntilChanged, filter, takeUntil } from 'rxjs/operators';
 import { NzFormItemFeedbackIconComponent, NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form';
 import { NgClassInterface, NzSizeLDSType, NzStatus, NzValidateStatus } from 'ng-zorro-antd/core/types';
 import { getStatusClassNames } from 'ng-zorro-antd/core/util';
+import { NZ_SPACE_COMPACT_ITEM_TYPE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space';
 
 @Directive({
   selector: 'input[nz-input],textarea[nz-input]',
@@ -39,7 +40,9 @@ import { getStatusClassNames } from 'ng-zorro-antd/core/util';
     '[class.ant-input-rtl]': `dir=== 'rtl'`,
     '[class.ant-input-stepperless]': `nzStepperless`
   },
-  standalone: true
+  standalone: true,
+  hostDirectives: [NzSpaceCompactItemDirective],
+  providers: [{ provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'input' }]
 })
 export class NzInputDirective implements OnChanges, OnInit, OnDestroy {
   @Input({ transform: booleanAttribute }) nzBorderless = false;

diff --git a/components/select/select.component.ts b/components/select/select.component.ts
@@ -58,6 +58,7 @@ import {
   OnTouchedType
 } from 'ng-zorro-antd/core/types';
 import { getStatusClassNames, isNotNil } from 'ng-zorro-antd/core/util';
+import { NZ_SPACE_COMPACT_ITEM_TYPE, NzSpaceCompactItemDirective } from 'ng-zorro-antd/space';
 
 import { NzOptionContainerComponent } from './option-container.component';
 import { NzOptionGroupComponent } from './option-group.component';
@@ -95,7 +96,8 @@ export type NzSelectSizeType = 'large' | 'default' | 'small';
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => NzSelectComponent),
       multi: true
-    }
+    },
+    { provide: NZ_SPACE_COMPACT_ITEM_TYPE, useValue: 'select' }
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -204,6 +206,7 @@ export type NzSelectSizeType = 'large' | 'default' | 'small';
     '[class.ant-select-multiple]': `nzMode !== 'default'`,
     '[class.ant-select-rtl]': `dir === 'rtl'`
   },
+  hostDirectives: [NzSpaceCompactItemDirective],
   imports: [
     NzSelectTopControlComponent,
     CdkOverlayOrigin,

diff --git a/components/space/demo/compact-button-vertical.md b/components/space/demo/compact-button-vertical.md
@@ -0,0 +1,14 @@
+---
+order: 8
+title:
+  zh-CN: 垂直方向紧凑布局
+  en-US: Vertical Compact Mode
+---
+
+## zh-CN
+
+垂直方向的紧凑布局，目前仅支持 Button 组合。
+
+## en-US
+
+Vertical Mode for Space.Compact, support Button only.
diff --git a/components/space/demo/compact-button-vertical.ts b/components/space/demo/compact-button-vertical.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-space-compact-button-vertical',
+  template: `
+    <nz-space>
+      <nz-space-compact *nzSpaceItem nzDirection="vertical">
+        <button nz-button>Button 1</button>
+        <button nz-button>Button 2</button>
+        <button nz-button>Button 3</button>
+      </nz-space-compact>
+      <nz-space-compact *nzSpaceItem nzDirection="vertical">
+        <button nz-button nzType="dashed">Button 1</button>
+        <button nz-button nzType="dashed">Button 2</button>
+        <button nz-button nzType="dashed">Button 3</button>
+      </nz-space-compact>
+      <nz-space-compact *nzSpaceItem nzDirection="vertical">
+        <button nz-button nzType="primary">Button 1</button>
+        <button nz-button nzType="primary">Button 2</button>
+        <button nz-button nzType="primary">Button 3</button>
+      </nz-space-compact>
+    </nz-space>
+  `
+})
+export class NzDemoSpaceCompactButtonVerticalComponent {}
diff --git a/components/space/demo/compact-buttons.md b/components/space/demo/compact-buttons.md
@@ -0,0 +1,14 @@
+---
+order: 7
+title:
+  zh-CN: Button 紧凑布局
+  en-US: Button Compact Mode
+---
+
+## zh-CN
+
+Button 组件紧凑排列的示例。
+
+## en-US
+
+Button component compact example.
diff --git a/components/space/demo/compact-buttons.ts b/components/space/demo/compact-buttons.ts
@@ -0,0 +1,86 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-space-compact-buttons',
+  template: `
+    <nz-space-compact nzBlock>
+      <button nz-button nz-tooltip nzTooltipTitle="Like">
+        <span nz-icon nzType="like"></span>
+      </button>
+      <button nz-button nz-tooltip nzTooltipTitle="Comment">
+        <span nz-icon nzType="comment"></span>
+      </button>
+      <button nz-button nz-tooltip nzTooltipTitle="Star">
+        <span nz-icon nzType="star"></span>
+      </button>
+      <button nz-button nz-tooltip nzTooltipTitle="Heart">
+        <span nz-icon nzType="heart"></span>
+      </button>
+      <button nz-button nz-tooltip nzTooltipTitle="Share">
+        <span nz-icon nzType="share-alt"></span>
+      </button>
+      <button nz-button nz-tooltip nzTooltipTitle="Download">
+        <span nz-icon nzType="download"></span>
+      </button>
+      <nz-dropdown-menu #menu>
+        <ul nz-menu>
+          <li nz-menu-item>
+            <a>1st item</a>
+          </li>
+          <li nz-menu-item>
+            <a>2nd item</a>
+          </li>
+          <li nz-menu-item>
+            <a>3rd item</a>
+          </li>
+        </ul>
+      </nz-dropdown-menu>
+      <button nz-button nz-dropdown [nzDropdownMenu]="menu">
+        <span nz-icon nzType="ellipsis"></span>
+      </button>
+    </nz-space-compact>
+    <br />
+    <nz-space-compact nzBlock>
+      <button nz-button nzType="primary">Button 1</button>
+      <button nz-button nzType="primary">Button 2</button>
+      <button nz-button nzType="primary">Button 3</button>
+      <button nz-button nzType="primary">Button 4</button>
+      <button nz-button nzType="primary" disabled nz-tooltip nzTooltipTitle="Tooltip">
+        <span nz-icon nzType="download"></span>
+      </button>
+      <button nz-button nzType="primary" nz-tooltip nzTooltipTitle="Tooltip">
+        <span nz-icon nzType="download"></span>
+      </button>
+    </nz-space-compact>
+    <br />
+    <nz-space-compact nzBlock>
+      <button nz-button>Button 1</button>
+      <button nz-button>Button 2</button>
+      <button nz-button>Button 3</button>
+      <button nz-button disabled nz-tooltip nzTooltipTitle="Tooltip">
+        <span nz-icon nzType="download"></span>
+      </button>
+      <button nz-button nz-tooltip nzTooltipTitle="Tooltip">
+        <span nz-icon nzType="download"></span>
+      </button>
+      <button nz-button nzType="primary">Button 4</button>
+      <nz-dropdown-menu #menu>
+        <ul nz-menu>
+          <li nz-menu-item>
+            <a>1st item</a>
+          </li>
+          <li nz-menu-item>
+            <a>2nd item</a>
+          </li>
+          <li nz-menu-item>
+            <a>3rd item</a>
+          </li>
+        </ul>
+      </nz-dropdown-menu>
+      <button nz-button nzType="primary" nz-dropdown [nzDropdownMenu]="menu">
+        <span nz-icon nzType="ellipsis"></span>
+      </button>
+    </nz-space-compact>
+  `
+})
+export class NzDemoSpaceCompactButtonsComponent {}
diff --git a/components/space/demo/compact.md b/components/space/demo/compact.md
@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 紧凑布局组合
+  en-US: Compact Mode
+---
+
+## zh-CN
+
+使用 `<nz-space-compact>` 让表单组件之间紧凑连接且合并边框。
+
+## en-US
+
+Compact Mode for form component.