Skip to content

Commit adc5e94

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:mention): support standalone component (#8243)
* feat(module:mention): support standalone component * feat(module:mention): support standalone component
1 parent 128f4c0 commit adc5e94

File tree

6 files changed

+76
-87
lines changed

6 files changed

+76
-87
lines changed

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

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -19,68 +19,64 @@ import { NzMentionModule } from 'ng-zorro-antd/mention';
1919

2020
```html
2121
<nz-mention [nzSuggestions]="suggestions">
22-
<textarea
23-
nz-input
24-
[(ngModel)]="value"
25-
nzMentionTrigger>
26-
</textarea>
22+
<textarea nz-input [(ngModel)]="value" nzMentionTrigger> </textarea>
2723
</nz-mention>
2824
```
2925

30-
### nz-mention
31-
32-
| Property | Description | Type | Default |
33-
| --- | --- | --- | --- |
34-
| `[nzMentionTrigger]` | Trigger element **(required)** | `HTMLTextAreaElement \| HTMLInputElement` | - |
35-
| `[nzMentionSuggestion]` | Customize the suggestion template | `TemplateRef<any>` | - |
36-
| `[nzLoading]` | Loading mode | `boolean` | `false` |
37-
| `[nzNotFoundContent]` | Suggestion when suggestions empty | `string` | `'无匹配结果，轻敲空格完成输入'` |
38-
| `[nzPlacement]` | The position of the suggestion relative to the target, which can be one of top and bottom | `'button' \| 'top'` | `'bottom'` |
39-
| `[nzPrefix]` | Character which will trigger Mention to show mention list | `string \| string[]` | `'@'` |
40-
| `[nzSuggestions]` | Suggestion content | `any[]` | `[]` |
41-
| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
42-
| `[nzValueWith]` | Function that maps an suggestion's value | `(any) => string \| (value: string) => string` |
43-
| `(nzOnSelect)` | Callback function called when select from suggestions | `EventEmitter<any>` | - |
44-
| `(nzOnSearchChange)` | Callback function called when search content changes| `EventEmitter<MentionOnSearchTypes>` | - |
26+
### nz-mention:standalone
27+
28+
| Property | Description | Type | Default |
29+
| ----------------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------- | -------------------------------- |
30+
| `[nzMentionTrigger]` | Trigger element **(required)** | `HTMLTextAreaElement \| HTMLInputElement` | - |
31+
| `[nzMentionSuggestion]` | Customize the suggestion template | `TemplateRef<any>` | - |
32+
| `[nzLoading]` | Loading mode | `boolean` | `false` |
33+
| `[nzNotFoundContent]` | Suggestion when suggestions empty | `string` | `'无匹配结果，轻敲空格完成输入'` |
34+
| `[nzPlacement]` | The position of the suggestion relative to the target, which can be one of top and bottom | `'button' \| 'top'` | `'bottom'` |
35+
| `[nzPrefix]` | Character which will trigger Mention to show mention list | `string \| string[]` | `'@'` |
36+
| `[nzSuggestions]` | Suggestion content | `any[]` | `[]` |
37+
| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - |
38+
| `[nzValueWith]` | Function that maps an suggestion's value | `(any) => string \| (value: string) => string` |
39+
| `(nzOnSelect)` | Callback function called when select from suggestions | `EventEmitter<any>` | - |
40+
| `(nzOnSearchChange)` | Callback function called when search content changes | `EventEmitter<MentionOnSearchTypes>` | - |
4541

4642
#### Methods
4743

48-
| Name | Description |
49-
| --- |--- |
44+
| Name | Description |
45+
| ----------- | ------------------------------------------------------- |
5046
| getMentions | Get the mentions array in the `input[nzMentionTrigger]` |
5147

5248
### nzMentionTrigger
49+
5350
Trigger element
5451

5552
```html
5653
<nz-mention>
57-
<textarea nzMentionTrigger></textarea>
54+
<textarea nzMentionTrigger></textarea>
5855
</nz-mention>
5956
```
6057

6158
```html
6259
<nz-mention>
63-
<input nzMentionTrigger>
60+
<input nzMentionTrigger />
6461
</nz-mention>
6562
```
6663

6764
### nzMentionSuggestion
65+
6866
Customize the suggestion template
6967

7068
```html
71-
<nz-mention
72-
[nzSuggestions]="items"
73-
[nzValueWith]="valueWith">
74-
<input nz-input nzMentionTrigger>
75-
<ng-container *nzMentionSuggestion="let item">
76-
<span>{{ item.label }} - {{ item.value }}</span>
77-
</ng-container>
78-
</nz-mention>
69+
<nz-mention [nzSuggestions]="items" [nzValueWith]="valueWith">
70+
<input nz-input nzMentionTrigger />
71+
<ng-container *nzMentionSuggestion="let item">
72+
<span>{{ item.label }} - {{ item.value }}</span>
73+
</ng-container>
74+
</nz-mention>
7975
```
8076

8177
### MentionOnSearchTypes
8278

83-
| Property | Description | Type | Default |
84-
| -------- | ----------- | ---- | ------- |
85-
| value | Search keyword | `string` | - |
86-
| prefix | prefix | `string` | - |
79+
| Property | Description | Type | Default |
80+
| -------- | -------------- | -------- | ------- |
81+
| value | Search keyword | `string` | - |
82+
| prefix | prefix | `string` | - |

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

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -20,68 +20,64 @@ import { NzMentionModule } from 'ng-zorro-antd/mention';
2020

2121
```html
2222
<nz-mention [nzSuggestions]="suggestions">
23-
<textarea
24-
nz-input
25-
[(ngModel)]="value"
26-
nzMentionTrigger>
27-
</textarea>
23+
<textarea nz-input [(ngModel)]="value" nzMentionTrigger> </textarea>
2824
</nz-mention>
2925
```
3026

31-
### nz-mention
32-
33-
| 参数 | 说明 | 类型 | 默认值 |
34-
| --- | --- | --- | --- |
35-
| `[nzMentionTrigger]` | 用于指定提及的触发元素 **(必须)** | `HTMLTextAreaElement \| HTMLInputElement` | - |
36-
| `[nzMentionSuggestion]` | 自定义建议渲染模板 | `TemplateRef<any>` | - |
37-
| `[nzLoading]` | 加载中 | `boolean` | `false` |
38-
| `[nzNotFoundContent]` | 未找到时的内容 | `string` | `'无匹配结果，轻敲空格完成输入'` |
39-
| `[nzPlacement]` | 建议框位置 | `'bottom' \| 'top'` | `'bottom'` |
40-
| `[nzPrefix]` | 触发弹出下拉框的字符 | `string \| string[]` | `'@'` |
41-
| `[nzSuggestions]` | 建议内容 | `any[]` | `[]` |
42-
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
43-
| `[nzValueWith]` | 建议选项的取值方法 | `(any) => string \| (value: string) => string` |
44-
| `(nzOnSelect)` | 下拉框选择建议时回调 | `EventEmitter<any>` | - |
45-
| `(nzOnSearchChange)` | 输入框中 @ 变化时回调 | `EventEmitter<MentionOnSearchTypes>` | - |
27+
### nz-mention:standalone
28+
29+
| 参数 | 说明 | 类型 | 默认值 |
30+
| ----------------------- | --------------------------------- | ---------------------------------------------- | -------------------------------- |
31+
| `[nzMentionTrigger]` | 用于指定提及的触发元素 **(必须)** | `HTMLTextAreaElement \| HTMLInputElement` | - |
32+
| `[nzMentionSuggestion]` | 自定义建议渲染模板 | `TemplateRef<any>` | - |
33+
| `[nzLoading]` | 加载中 | `boolean` | `false` |
34+
| `[nzNotFoundContent]` | 未找到时的内容 | `string` | `'无匹配结果，轻敲空格完成输入'` |
35+
| `[nzPlacement]` | 建议框位置 | `'bottom' \| 'top'` | `'bottom'` |
36+
| `[nzPrefix]` | 触发弹出下拉框的字符 | `string \| string[]` | `'@'` |
37+
| `[nzSuggestions]` | 建议内容 | `any[]` | `[]` |
38+
| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - |
39+
| `[nzValueWith]` | 建议选项的取值方法 | `(any) => string \| (value: string) => string` |
40+
| `(nzOnSelect)` | 下拉框选择建议时回调 | `EventEmitter<any>` | - |
41+
| `(nzOnSearchChange)` | 输入框中 @ 变化时回调 | `EventEmitter<MentionOnSearchTypes>` | - |
4642

4743
#### 方法
4844

49-
| 方法名 | 说明 |
50-
| --- |--- |
45+
| 方法名 | 说明 |
46+
| ----------- | ------------------------------------------- |
5147
| getMentions | 获取 `input[nzMentionTrigger]` 中的提及数组 |
5248

5349
### nzMentionTrigger
50+
5451
用于指定提及的触发元素
5552

5653
```html
5754
<nz-mention>
58-
<textarea nzMentionTrigger></textarea>
55+
<textarea nzMentionTrigger></textarea>
5956
</nz-mention>
6057
```
6158

6259
```html
6360
<nz-mention>
64-
<input nzMentionTrigger>
61+
<input nzMentionTrigger />
6562
</nz-mention>
6663
```
6764

6865
### nzMentionSuggestion
66+
6967
自定义建议渲染模板
7068

7169
```html
72-
<nz-mention
73-
[nzSuggestions]="items"
74-
[nzValueWith]="valueWith">
75-
<input nz-input nzMentionTrigger>
76-
<ng-container *nzMentionSuggestion="let item">
77-
<span>{{ item.label }} - {{ item.value }}</span>
78-
</ng-container>
79-
</nz-mention>
70+
<nz-mention [nzSuggestions]="items" [nzValueWith]="valueWith">
71+
<input nz-input nzMentionTrigger />
72+
<ng-container *nzMentionSuggestion="let item">
73+
<span>{{ item.label }} - {{ item.value }}</span>
74+
</ng-container>
75+
</nz-mention>
8076
```
8177

8278
### MentionOnSearchTypes
8379

84-
| 参数 | 说明 | 类型 | 默认值 |
85-
| --- | --- | --- | --- |
86-
| value | 搜索关键词 | `string` | - |
87-
| prefix | 触发前缀 | `string` | - |
80+
| 参数 | 说明 | 类型 | 默认值 |
81+
| ------ | ---------- | -------- | ------ |
82+
| value | 搜索关键词 | `string` | - |
83+
| prefix | 触发前缀 | `string` | - |

‎components/mention/mention-suggestions.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Directive } from '@angular/core';
77

88
@Directive({
99
selector: '[nzMentionSuggestion]',
10-
exportAs: 'nzMentionSuggestion'
10+
exportAs: 'nzMentionSuggestion',
11+
standalone: true
1112
})
1213
export class NzMentionSuggestionDirective {}

‎components/mention/mention-trigger.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ export const NZ_MENTION_TRIGGER_ACCESSOR: ExistingProvider = {
3838
providers: [NzDestroyService, NZ_MENTION_TRIGGER_ACCESSOR],
3939
host: {
4040
autocomplete: 'off'
41-
}
41+
},
42+
standalone: true
4243
})
4344
export class NzMentionTriggerDirective implements ControlValueAccessor, OnDestroy, AfterViewInit {
4445
onChange: OnChangeType = () => {};

‎components/mention/mention.component.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
PositionStrategy
1515
} from '@angular/cdk/overlay';
1616
import { TemplatePortal } from '@angular/cdk/portal';
17-
import { DOCUMENT } from '@angular/common';
17+
import { DOCUMENT, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
1818
import {
1919
AfterViewInit,
2020
ChangeDetectionStrategy,
@@ -42,11 +42,13 @@ import {
4242
import { fromEvent, merge, Observable, of as observableOf, Subscription } from 'rxjs';
4343
import { distinctUntilChanged, map, startWith, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
4444

45-
import { NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form';
45+
import { NzFormNoStatusService, NzFormPatchModule, NzFormStatusService } from 'ng-zorro-antd/core/form';
4646
import { DEFAULT_MENTION_BOTTOM_POSITIONS, DEFAULT_MENTION_TOP_POSITIONS } from 'ng-zorro-antd/core/overlay';
4747
import { NzDestroyService } from 'ng-zorro-antd/core/services';
4848
import { BooleanInput, NgClassInterface, NzSafeAny, NzStatus, NzValidateStatus } from 'ng-zorro-antd/core/types';
4949
import { getCaretCoordinates, getMentions, getStatusClassNames, InputBoolean } from 'ng-zorro-antd/core/util';
50+
import { NzEmptyModule } from 'ng-zorro-antd/empty';
51+
import { NzIconModule } from 'ng-zorro-antd/icon';
5052

5153
import { NZ_MENTION_CONFIG } from './config';
5254
import { NzMentionSuggestionDirective } from './mention-suggestions';
@@ -113,7 +115,9 @@ export type MentionPlacement = 'top' | 'bottom';
113115
host: {
114116
class: 'ant-mentions',
115117
'[class.ant-mentions-rtl]': `dir === 'rtl'`
116-
}
118+
},
119+
imports: [NgForOf, NgIf, NgTemplateOutlet, NzIconModule, NzEmptyModule, NzFormPatchModule],
120+
standalone: true
117121
})
118122
export class NzMentionComponent implements OnDestroy, OnInit, AfterViewInit, OnChanges {
119123
static ngAcceptInputType_nzLoading: BooleanInput;

‎components/mention/mention.module.ts

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

6-
import { BidiModule } from '@angular/cdk/bidi';
7-
import { OverlayModule } from '@angular/cdk/overlay';
8-
import { CommonModule } from '@angular/common';
96
import { NgModule } from '@angular/core';
10-
import { FormsModule } from '@angular/forms';
11-
12-
import { NzFormPatchModule } from 'ng-zorro-antd/core/form';
13-
import { NzEmptyModule } from 'ng-zorro-antd/empty';
14-
import { NzIconModule } from 'ng-zorro-antd/icon';
157

168
import { NzMentionSuggestionDirective } from './mention-suggestions';
179
import { NzMentionTriggerDirective } from './mention-trigger';
@@ -20,8 +12,7 @@ import { NzMentionComponent } from './mention.component';
2012
const COMPONENTS = [NzMentionComponent, NzMentionTriggerDirective, NzMentionSuggestionDirective];
2113

2214
@NgModule({
23-
imports: [BidiModule, CommonModule, FormsModule, OverlayModule, NzIconModule, NzEmptyModule, NzFormPatchModule],
24-
declarations: [...COMPONENTS],
15+
imports: [...COMPONENTS],
2516
exports: [...COMPONENTS]
2617
})
2718
export class NzMentionModule {}

0 commit comments

Comments
 (0)