Skip to content

Commit ff14ed0

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:resizable): support standalone component (#8225)
* feat(module:resizable): support standalone component * feat(module:resizable): support standalone component
1 parent adc5e94 commit ff14ed0

6 files changed

Lines changed: 87 additions & 86 deletions

File tree

‎components/resizable/doc/index.en-US.md‎

Lines changed: 39 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,14 @@ import { NzResizableModule } from 'ng-zorro-antd/resizable';
3030
### Import Style
3131

3232
```less
33-
@import "node_modules/ng-zorro-antd/resizable/style/entry.less"
33+
@import 'node_modules/ng-zorro-antd/resizable/style/entry.less';
3434
```
3535

36-
37-
3836
## API
3937

40-
### [nz-resizable]
38+
### [nz-resizable]:standalone
4139

42-
Resizable element the `position` attribute must be one of `'relative' | 'absolute' | 'fixed' |'sticky'`，default is `'relative'`.
40+
Resizable element the `position` attribute must be one of `'relative' | 'absolute' | 'fixed' |'sticky'`，default is `'relative'`.
4341

4442
```ts
4543
interface NzResizeEvent {
@@ -51,24 +49,24 @@ interface NzResizeEvent {
5149
}
5250
```
5351

54-
| Property | Description | Type | Default |
55-
| --- | --- | --- | --- |
56-
| [nzBounds] | Specifies resize boundaries. | `'window' \| 'parent' \| ElementRef<HTMLElement>` | `parent` |
57-
| [nzMaxHeight] | Maximum height of resizable element | `number` | - |
58-
| [nzMaxWidth] | Maximum width of resizable element | `number` | - |
59-
| [nzMinHeight] | Minimum height of resizable element | `number` | `40` |
60-
| [nzMinWidth] | Minimum width of resizable element | `number` | `40` |
61-
| [nzGridColumnCount] | Number of columns(-1 is not grid) | `number` | `-1` |
62-
| [nzMaxColumn] | Maximum Column | `number` | - |
63-
| [nzMinColumn] | Minimum Column | `number` | - |
64-
| [nzLockAspectRatio] | Lock the aspect ratio based on the initial size | `boolean` | `false` |
65-
| [nzPreview] | Enable preview when resizing | `boolean` | `false` |
66-
| [nzDisabled] | Disable resize | `boolean` | `false` |
67-
| (nzResize) | Calls when Resizing | `EventEmitter<NzResizeEvent>` | - |
68-
| (nzResizeStart) | Calls when resize start | `EventEmitter<NzResizeEvent>` | - |
69-
| (nzResizeEnd) | Calls when resize end | `EventEmitter<NzResizeEvent>` | - |
70-
71-
### nz-resize-handle
52+
| Property | Description | Type | Default |
53+
| ------------------- | ----------------------------------------------- | ------------------------------------------------- | -------- |
54+
| [nzBounds] | Specifies resize boundaries. | `'window' \| 'parent' \| ElementRef<HTMLElement>` | `parent` |
55+
| [nzMaxHeight] | Maximum height of resizable element | `number` | - |
56+
| [nzMaxWidth] | Maximum width of resizable element | `number` | - |
57+
| [nzMinHeight] | Minimum height of resizable element | `number` | `40` |
58+
| [nzMinWidth] | Minimum width of resizable element | `number` | `40` |
59+
| [nzGridColumnCount] | Number of columns(-1 is not grid) | `number` | `-1` |
60+
| [nzMaxColumn] | Maximum Column | `number` | - |
61+
| [nzMinColumn] | Minimum Column | `number` | - |
62+
| [nzLockAspectRatio] | Lock the aspect ratio based on the initial size | `boolean` | `false` |
63+
| [nzPreview] | Enable preview when resizing | `boolean` | `false` |
64+
| [nzDisabled] | Disable resize | `boolean` | `false` |
65+
| (nzResize) | Calls when Resizing | `EventEmitter<NzResizeEvent>` | - |
66+
| (nzResizeStart) | Calls when resize start | `EventEmitter<NzResizeEvent>` | - |
67+
| (nzResizeEnd) | Calls when resize end | `EventEmitter<NzResizeEvent>` | - |
68+
69+
### nz-resize-handle:standalone
7270

7371
Define handles and directions.
7472

@@ -77,12 +75,12 @@ type NzResizeDirection = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bot
7775
type NzCursorType = 'window' | 'grid';
7876
```
7977

80-
| Property | Description | Type | Default |
81-
| --- | --- | --- | --- |
82-
| [nzDirection] | Set the direction of resizable | `NzResizeDirection` | `'bottomRight'` |
83-
| [nzCursorType] | Cursor type for handle | `NzCursorType` | `'window'` |
78+
| Property | Description | Type | Default |
79+
| -------------- | ------------------------------ | ------------------- | --------------- |
80+
| [nzDirection] | Set the direction of resizable | `NzResizeDirection` | `'bottomRight'` |
81+
| [nzCursorType] | Cursor type for handle | `NzCursorType` | `'window'` |
8482

85-
### nz-resize-handles
83+
### nz-resize-handles:standalone
8684

8785
Simpler way to define handles.
8886

@@ -93,8 +91,8 @@ interface NzResizeHandleOption {
9391
}
9492
```
9593

96-
| Property | Description | Type | Default |
97-
| --- | --- | --- | --- |
94+
| Property | Description | Type | Default |
95+
| -------------- | ----------------------------------------- | ----------------------------------------------- | -------------- |
9896
| [nzDirections] | Allow handle directions or handle options | `(NzResizeDirection \| NzResizeHandleOption)[]` | ALL DIRECTIONS |
9997

10098
### Styling
@@ -104,16 +102,16 @@ The Component styles only contain the necessary positional properties and simple
104102
- `.nz-resizable` The `nz-resizable` component namespace
105103
- `.nz-resizable-resizing` This class name that is added to `nz-resizable` while resizing
106104
- `.nz-resizable-preview` The ghost element's class name when enable preview
107-
- `.nz-resizable-handle-box-hover` This class name that is added to `nz-resize-handle` while mouse hover on `nz-resizable`
105+
- `.nz-resizable-handle-box-hover` This class name that is added to `nz-resize-handle` while mouse hover on `nz-resizable`
108106
- `.nz-resizable-handle` The `nz-resize-handle` component namespace and directions class name
109-
* `.nz-resizable-handle-top`
110-
* `.nz-resizable-handle-left`
111-
* `.nz-resizable-handle-bottom`
112-
* `.nz-resizable-handle-right`
113-
* `.nz-resizable-handle-topRight`
114-
* `.nz-resizable-handle-topLeft`
115-
* `.nz-resizable-handle-bottomRight`
116-
* `.nz-resizable-handle-bottomLeft`
107+
- `.nz-resizable-handle-top`
108+
- `.nz-resizable-handle-left`
109+
- `.nz-resizable-handle-bottom`
110+
- `.nz-resizable-handle-right`
111+
- `.nz-resizable-handle-topRight`
112+
- `.nz-resizable-handle-topLeft`
113+
- `.nz-resizable-handle-bottomRight`
114+
- `.nz-resizable-handle-bottomLeft`
117115
- `.nz-resizable-handle-cursor-type` Cursor type namespace for handle
118-
* `.nz-resizable-handle-cursor-type-window`
119-
* `.nz-resizable-handle-cursor-type-grid`
116+
- `.nz-resizable-handle-cursor-type-window`
117+
- `.nz-resizable-handle-cursor-type-grid`

‎components/resizable/doc/index.zh-CN.md‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,12 @@ import { NzResizableModule } from 'ng-zorro-antd/resizable';
3131
### 引入样式
3232

3333
```less
34-
@import "node_modules/ng-zorro-antd/resizable/style/entry.less"
34+
@import 'node_modules/ng-zorro-antd/resizable/style/entry.less';
3535
```
3636

3737
## API
3838

39-
### [nz-resizable]
39+
### [nz-resizable]:standalone
4040

4141
声明在需要调整尺寸的元素上，元素 `position` 属性必须为 `'relative' | 'absolute' | 'fixed' |'sticky'` 之一，默认会自动设置为 `'relative'`。
4242

@@ -50,24 +50,24 @@ interface NzResizeEvent {
5050
}
5151
```
5252

53-
| 参数 | 说明 | 类型 | 默认值 |
54-
| --- | --- | --- | --- |
55-
| [nzBounds] | 调整尺寸的边界 | `'window' \| 'parent' \| ElementRef<HTMLElement>` | `parent` |
56-
| [nzMaxHeight] | 最大高度(超过边界部分忽略) | `number` | - |
57-
| [nzMaxWidth] | 最大宽度(超过边界部分忽略) | `number` | - |
58-
| [nzMinHeight] | 最小高度 | `number` | `40` |
59-
| [nzMinWidth] | 最小宽度 | `number` | `40` |
60-
| [nzGridColumnCount] | 栅格列数(-1 为不栅格) | `number` | `-1` |
61-
| [nzMaxColumn] | 栅格最大列数 | `number` | - |
62-
| [nzMinColumn] | 栅格最小列数 | `number` | - |
63-
| [nzLockAspectRatio] | 锁定宽高比 | `boolean` | `false` |
64-
| [nzPreview] | 开启预览 | `boolean` | `false` |
65-
| [nzDisabled] | 禁用 | `boolean` | `false` |
66-
| (nzResize) | 调整尺寸时的事件 | `EventEmitter<NzResizeEvent>` | - |
67-
| (nzResizeStart) | 开始调整尺寸时的事件 | `EventEmitter<NzResizeEvent>` | - |
68-
| (nzResizeEnd) | 结束调整尺寸时的事件 | `EventEmitter<NzResizeEvent>` | - |
69-
70-
### nz-resize-handle
53+
| 参数 | 说明 | 类型 | 默认值 |
54+
| ------------------- | -------------------------- | ------------------------------------------------- | -------- |
55+
| [nzBounds] | 调整尺寸的边界 | `'window' \| 'parent' \| ElementRef<HTMLElement>` | `parent` |
56+
| [nzMaxHeight] | 最大高度(超过边界部分忽略) | `number` | - |
57+
| [nzMaxWidth] | 最大宽度(超过边界部分忽略) | `number` | - |
58+
| [nzMinHeight] | 最小高度 | `number` | `40` |
59+
| [nzMinWidth] | 最小宽度 | `number` | `40` |
60+
| [nzGridColumnCount] | 栅格列数(-1 为不栅格) | `number` | `-1` |
61+
| [nzMaxColumn] | 栅格最大列数 | `number` | - |
62+
| [nzMinColumn] | 栅格最小列数 | `number` | - |
63+
| [nzLockAspectRatio] | 锁定宽高比 | `boolean` | `false` |
64+
| [nzPreview] | 开启预览 | `boolean` | `false` |
65+
| [nzDisabled] | 禁用 | `boolean` | `false` |
66+
| (nzResize) | 调整尺寸时的事件 | `EventEmitter<NzResizeEvent>` | - |
67+
| (nzResizeStart) | 开始调整尺寸时的事件 | `EventEmitter<NzResizeEvent>` | - |
68+
| (nzResizeEnd) | 结束调整尺寸时的事件 | `EventEmitter<NzResizeEvent>` | - |
69+
70+
### nz-resize-handle:standalone
7171

7272
定义调整手柄及方向。
7373

@@ -76,12 +76,12 @@ type NzResizeDirection = 'top' | 'right' | 'bottom' | 'left' | 'topRight' | 'bot
7676
type NzCursorType = 'window' | 'grid';
7777
```
7878

79-
| 参数 | 说明 | 类型 | 默认值 |
80-
| --- | --- | --- | --- |
81-
| [nzDirection] | 调整方向 | `NzResizeDirection` | `'bottomRight'` |
82-
| [nzCursorType] | 手柄的光标类型 | `NzCursorType` | `'window'` |
79+
| 参数 | 说明 | 类型 | 默认值 |
80+
| -------------- | -------------- | ------------------- | --------------- |
81+
| [nzDirection] | 调整方向 | `NzResizeDirection` | `'bottomRight'` |
82+
| [nzCursorType] | 手柄的光标类型 | `NzCursorType` | `'window'` |
8383

84-
### nz-resize-handles
84+
### nz-resize-handles:standalone
8585

8686
定义调整手柄的快捷组件。
8787

@@ -92,27 +92,27 @@ interface NzResizeHandleOption {
9292
}
9393
```
9494

95-
| 参数 | 说明 | 类型 | 默认值 |
96-
| --- | --- | --- | --- |
95+
| 参数 | 说明 | 类型 | 默认值 |
96+
| -------------- | ------------------------ | ----------------------------------------------- | -------- |
9797
| [nzDirections] | 需要的手柄方向或手柄选项 | `(NzResizeDirection \| NzResizeHandleOption)[]` | 所有方向 |
9898

9999
### 样式
100100

101101
组件样式只包含了必要的位置属性和简单的样式，你可以通过覆写下列类名自定义样式。
102102

103103
- `.nz-resizable` `nz-resizable` 组件命名空间
104-
- `.nz-resizable-resizing` 正在调整尺寸时被添加到 `nz-resizable` 上
104+
- `.nz-resizable-resizing` 正在调整尺寸时被添加到 `nz-resizable` 上
105105
- `.nz-resizable-preview` 开启预览时幽灵元素的类名
106106
- `.nz-resizable-handle-box-hover` 当鼠标悬停在 `nz-resizable` 上时被添加到 ` nz-resize-handle` 上。
107107
- `.nz-resizable-handle` 调整手柄命名空间及各方向类名
108-
* `.nz-resizable-handle-top`
109-
* `.nz-resizable-handle-left`
110-
* `.nz-resizable-handle-bottom`
111-
* `.nz-resizable-handle-right`
112-
* `.nz-resizable-handle-topRight`
113-
* `.nz-resizable-handle-topLeft`
114-
* `.nz-resizable-handle-bottomRight`
115-
* `.nz-resizable-handle-bottomLeft`
108+
- `.nz-resizable-handle-top`
109+
- `.nz-resizable-handle-left`
110+
- `.nz-resizable-handle-bottom`
111+
- `.nz-resizable-handle-right`
112+
- `.nz-resizable-handle-topRight`
113+
- `.nz-resizable-handle-topLeft`
114+
- `.nz-resizable-handle-bottomRight`
115+
- `.nz-resizable-handle-bottomLeft`
116116
- `.nz-resizable-handle-cursor-type` 手柄的光标类型命名空间
117-
* `.nz-resizable-handle-cursor-type-window`
118-
* `.nz-resizable-handle-cursor-type-grid`
117+
- `.nz-resizable-handle-cursor-type-window`
118+
- `.nz-resizable-handle-cursor-type-grid`

‎components/resizable/resizable.directive.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@ export interface NzResizeEvent {
4242
class: 'nz-resizable',
4343
'[class.nz-resizable-resizing]': 'resizing',
4444
'[class.nz-resizable-disabled]': 'nzDisabled'
45-
}
45+
},
46+
standalone: true
4647
})
4748
export class NzResizableDirective implements AfterViewInit, OnDestroy {
4849
static ngAcceptInputType_nzLockAspectRatio: BooleanInput;

‎components/resizable/resizable.module.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,14 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { CommonModule } from '@angular/common';
76
import { NgModule } from '@angular/core';
87

98
import { NzResizableDirective } from './resizable.directive';
109
import { NzResizeHandleComponent } from './resize-handle.component';
1110
import { NzResizeHandlesComponent } from './resize-handles.component';
1211

1312
@NgModule({
14-
imports: [CommonModule],
15-
declarations: [NzResizableDirective, NzResizeHandleComponent, NzResizeHandlesComponent],
13+
imports: [NzResizableDirective, NzResizeHandleComponent, NzResizeHandlesComponent],
1614
exports: [NzResizableDirective, NzResizeHandleComponent, NzResizeHandlesComponent]
1715
})
1816
export class NzResizableModule {}

‎components/resizable/resize-handle.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@ const passiveEventListenerOptions = <AddEventListenerOptions>normalizePassiveLis
5959
'[class.nz-resizable-handle-cursor-type-grid]': `nzCursorType === 'grid'`,
6060
'[class.nz-resizable-handle-cursor-type-window]': `nzCursorType === 'window'`
6161
},
62-
providers: [NzDestroyService]
62+
providers: [NzDestroyService],
63+
standalone: true
6364
})
6465
export class NzResizeHandleComponent implements OnInit {
6566
@Input() nzDirection: NzResizeDirection = 'bottomRight';

‎components/resizable/resize-handles.component.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6+
import { NgForOf } from '@angular/common';
67
import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
78

8-
import { NzCursorType, NzResizeDirection } from './resize-handle.component';
9+
import { NzCursorType, NzResizeDirection, NzResizeHandleComponent } from './resize-handle.component';
910

1011
export const DEFAULT_RESIZE_DIRECTION: NzResizeDirection[] = [
1112
'bottomRight',
@@ -46,7 +47,9 @@ function normalizeResizeHandleOptions(value: Array<NzResizeDirection | NzResizeH
4647
[nzCursorType]="option.cursorType"
4748
></nz-resize-handle>
4849
`,
49-
changeDetection: ChangeDetectionStrategy.OnPush
50+
changeDetection: ChangeDetectionStrategy.OnPush,
51+
imports: [NzResizeHandleComponent, NgForOf],
52+
standalone: true
5053
})
5154
export class NzResizeHandlesComponent implements OnChanges {
5255
@Input() nzDirections: Array<NzResizeDirection | NzResizeHandleOption> = DEFAULT_RESIZE_DIRECTION;

0 commit comments

Comments
 (0)