From ed0de779cfe63f1ca68b4b8dedbba40a5ad59e95 Mon Sep 17 00:00:00 2001 From: Parsa Arvaneh <62149413+ParsaArvanehPA@users.noreply.github.com> Date: Tue, 5 Dec 2023 11:29:47 +0330 Subject: [PATCH] feat(module:select): support standalone component (#8222) * feat(module:select): support standalone component * feat(module:select): support standalone component * feat(module:select): support standalone component --- components/select/doc/index.en-US.md | 128 ++++++++-------- components/select/doc/index.zh-CN.md | 138 +++++++++--------- .../select/option-container.component.ts | 25 +++- components/select/option-group.component.ts | 3 +- .../select/option-item-group.component.ts | 5 +- components/select/option-item.component.ts | 6 +- components/select/option.component.ts | 3 +- components/select/select-arrow.component.ts | 7 +- components/select/select-clear.component.ts | 6 +- components/select/select-item.component.ts | 7 +- .../select/select-placeholder.component.ts | 5 +- components/select/select-search.component.ts | 7 +- .../select/select-top-control.component.ts | 16 +- components/select/select.component.ts | 26 +++- components/select/select.module.ts | 33 ----- 15 files changed, 229 insertions(+), 186 deletions(-) diff --git a/components/select/doc/index.en-US.md b/components/select/doc/index.en-US.md index 539262b29e..23d0fbaa94 100644 --- a/components/select/doc/index.en-US.md +++ b/components/select/doc/index.en-US.md @@ -24,76 +24,76 @@ import { NzSelectModule } from 'ng-zorro-antd/select'; ``` -### nz-select +### nz-select:standalone -| Property | Description | Type | Default | Global Config | -| -------- | ----------- | ---- | ------- | ------- | -| `[nzId]` | input id attribute inside the component| `string` | - | -| `[ngModel]` | Current selected nz-option value, double binding. | `any \| any[]` | - | -| `[compareWith]` | Same as [SelectControlValueAccessor](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection) | `(o1: any, o2: any) => boolean` | `(o1: any, o2: any) => o1===o2` | -| `[nzAutoClearSearchValue]` | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags`. | `boolean` | `true` | -| `[nzAllowClear]` | Show clear button. | `boolean` | `false` | -| `[nzBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` | -| `[nzBorderless]` | whether has borderless style | `boolean` | `false` | ✅ | -| `[nzOpen]` | dropdown expand state, double binding | `boolean` | `false` | -| `[nzAutoFocus]` | Get focus by default | `boolean` | `false` | -| `[nzDisabled]` | Whether disabled select | `boolean` | `false` | -| `[nzDropdownClassName]` | className of dropdown menu | `string \| string[]` | - | -| `[nzDropdownMatchSelectWidth]` | Whether dropdown's width is same width than select. | `boolean` | `true` | -| `[nzDropdownStyle]` | style of dropdown menu | `object` | - | -| `[nzCustomTemplate]` | The custom template of select | `TemplateRef<{ $implicit: NzOptionComponent }>` | - | -| `[nzServerSearch]` | nz-option will not be filtered when set to true | `boolean` | `false` | -| `[nzFilterOption]` | Filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | `(input?: string, option?: NzOptionComponent) => boolean;` | - | -| `[nzMaxMultipleCount]` | Max selected option can be selected | `number` | `Infinity` | -| `[nzMode]` | Set mode of Select | `'multiple' \| 'tags' \| 'default'` | `'default'` | -| `[nzNotFoundContent]` | Specify content to show when no result matches.. | `string \| TemplateRef` | `'Not Found'` | -| `[nzPlaceHolder]` | Placeholder of select | `string` | - | -| `[nzShowArrow]` | Whether to show the drop-down arrow | `boolean` | `true`(for single select), `false`(for multiple select) | -| `[nzShowSearch]` | Whether show search input in single mode. | `boolean` | `false` | -| `[nzSize]` | Size of Select input | `'large' \| 'small' \| 'default'` | `'default'` | -| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | -| `[nzSuffixIcon]` | The custom suffix icon | `TemplateRef \| string` | - | ✅ | -| `[nzRemoveIcon]` | The custom remove icon | `TemplateRef` | - | -| `[nzClearIcon]` | The custom clear icon | `TemplateRef` | - | -| `[nzMenuItemSelectedIcon]` | The custom menuItemSelected icon | `TemplateRef` | - | -| `[nzTokenSeparators]` | Separator used to tokenize on tag/multiple mode | `string[]` | `[]` | -| `[nzLoading]` | indicate loading state | `boolean` | false | -| `[nzMaxTagCount]` | Max tag count to show| `number` | - | -| `[nzOptions]` | use nzOptions or `nz-option` to pass options to the select | `Array<{ label: string \| number \| TemplateRef; value: any; key?: string \| number; disabled?: boolean; hide?: boolean; groupLabel?: string \| TemplateRef;}>` | - | -| `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | `TemplateRef<{ $implicit: any[] }>` | - | -| `[nzOptionHeightPx]` | Each option height inside the dropdown | `number` | `32` | -| `[nzOptionOverflowSize]` | Max option size inside the dropdown, overflow when exceed the size | `number` | `8` | -| `[nzSelectOnTab]` | Allows to select an item with TAB key | `boolean` | `false` | -| `(ngModelChange)` | Current selected nz-option value change callback. | `EventEmitter` | - | -| `(nzOpenChange)` | dropdown expand change callback | `EventEmitter` | `false` | -| `(nzScrollToBottom)` | Called when dropdown scrolls to bottom | `EventEmitter` | - | -| `(nzOnSearch)` | Callback function that is fired when input changed. | `EventEmitter` | - | -| `(nzFocus)` | focus callback | `EventEmitter` | - | -| `(nzBlur)` | blur callback | `EventEmitter` | - | +| Property | Description | Type | Default | Global Config | +| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------- | +| `[nzId]` | input id attribute inside the component | `string` | - | +| `[ngModel]` | Current selected nz-option value, double binding. | `any \| any[]` | - | +| `[compareWith]` | Same as [SelectControlValueAccessor](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection) | `(o1: any, o2: any) => boolean` | `(o1: any, o2: any) => o1===o2` | +| `[nzAutoClearSearchValue]` | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags`. | `boolean` | `true` | +| `[nzAllowClear]` | Show clear button. | `boolean` | `false` | +| `[nzBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` | +| `[nzBorderless]` | whether has borderless style | `boolean` | `false` | ✅ | +| `[nzOpen]` | dropdown expand state, double binding | `boolean` | `false` | +| `[nzAutoFocus]` | Get focus by default | `boolean` | `false` | +| `[nzDisabled]` | Whether disabled select | `boolean` | `false` | +| `[nzDropdownClassName]` | className of dropdown menu | `string \| string[]` | - | +| `[nzDropdownMatchSelectWidth]` | Whether dropdown's width is same width than select. | `boolean` | `true` | +| `[nzDropdownStyle]` | style of dropdown menu | `object` | - | +| `[nzCustomTemplate]` | The custom template of select | `TemplateRef<{ $implicit: NzOptionComponent }>` | - | +| `[nzServerSearch]` | nz-option will not be filtered when set to true | `boolean` | `false` | +| `[nzFilterOption]` | Filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | `(input?: string, option?: NzOptionComponent) => boolean;` | - | +| `[nzMaxMultipleCount]` | Max selected option can be selected | `number` | `Infinity` | +| `[nzMode]` | Set mode of Select | `'multiple' \| 'tags' \| 'default'` | `'default'` | +| `[nzNotFoundContent]` | Specify content to show when no result matches.. | `string \| TemplateRef` | `'Not Found'` | +| `[nzPlaceHolder]` | Placeholder of select | `string` | - | +| `[nzShowArrow]` | Whether to show the drop-down arrow | `boolean` | `true`(for single select), `false`(for multiple select) | +| `[nzShowSearch]` | Whether show search input in single mode. | `boolean` | `false` | +| `[nzSize]` | Size of Select input | `'large' \| 'small' \| 'default'` | `'default'` | +| `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | +| `[nzSuffixIcon]` | The custom suffix icon | `TemplateRef \| string` | - | ✅ | +| `[nzRemoveIcon]` | The custom remove icon | `TemplateRef` | - | +| `[nzClearIcon]` | The custom clear icon | `TemplateRef` | - | +| `[nzMenuItemSelectedIcon]` | The custom menuItemSelected icon | `TemplateRef` | - | +| `[nzTokenSeparators]` | Separator used to tokenize on tag/multiple mode | `string[]` | `[]` | +| `[nzLoading]` | indicate loading state | `boolean` | false | +| `[nzMaxTagCount]` | Max tag count to show | `number` | - | +| `[nzOptions]` | use nzOptions or `nz-option` to pass options to the select | `Array<{ label: string \| number \| TemplateRef; value: any; key?: string \| number; disabled?: boolean; hide?: boolean; groupLabel?: string \| TemplateRef;}>` | - | +| `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | `TemplateRef<{ $implicit: any[] }>` | - | +| `[nzOptionHeightPx]` | Each option height inside the dropdown | `number` | `32` | +| `[nzOptionOverflowSize]` | Max option size inside the dropdown, overflow when exceed the size | `number` | `8` | +| `[nzSelectOnTab]` | Allows to select an item with TAB key | `boolean` | `false` | +| `(ngModelChange)` | Current selected nz-option value change callback. | `EventEmitter` | - | +| `(nzOpenChange)` | dropdown expand change callback | `EventEmitter` | `false` | +| `(nzScrollToBottom)` | Called when dropdown scrolls to bottom | `EventEmitter` | - | +| `(nzOnSearch)` | Callback function that is fired when input changed. | `EventEmitter` | - | +| `(nzFocus)` | focus callback | `EventEmitter` | - | +| `(nzBlur)` | blur callback | `EventEmitter` | - | -### nz-option +### nz-option:standalone -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| `[nzDisabled]` | Disable this option | `boolean` | `false` | -| `[nzTitle]` | Native title hint on this option | `string \| number` | - | -| `[nzLabel]` | The text show in nz-select and dropdown menu | `string \| number` | - | -| `[nzValue]` | The value passed to ngModel of nz-select | `any ` | - | -| `[nzKey]` | Should be passed when typeof nzValue - Object. Key will be used for performance optimizations | `string \| number ` | - | -| `[nzHide]` | Whether hide the option in the option list | `boolean` | `false` | -| `[nzCustomContent]` | Whether custom nz-option content in drodown menu, the ng-content in nz-option will replace nzLabel when it was set to true | `boolean` | `false` | +| Property | Description | Type | Default | +| ------------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------- | ------- | +| `[nzDisabled]` | Disable this option | `boolean` | `false` | +| `[nzTitle]` | Native title hint on this option | `string \| number` | - | +| `[nzLabel]` | The text show in nz-select and dropdown menu | `string \| number` | - | +| `[nzValue]` | The value passed to ngModel of nz-select | `any ` | - | +| `[nzKey]` | Should be passed when typeof nzValue - Object. Key will be used for performance optimizations | `string \| number ` | - | +| `[nzHide]` | Whether hide the option in the option list | `boolean` | `false` | +| `[nzCustomContent]` | Whether custom nz-option content in drodown menu, the ng-content in nz-option will replace nzLabel when it was set to true | `boolean` | `false` | -### nz-option-group +### nz-option-group:standalone -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| `[nzLabel]` | Group label | `string \| number \| TemplateRef` | - | +| Property | Description | Type | Default | +| ----------- | ----------- | --------------------------------------- | ------- | +| `[nzLabel]` | Group label | `string \| number \| TemplateRef` | - | ## Methods -### nz-select +### nz-select:standalone -| Name | Description | -| --- | --- | -| blur() | Remove focus | -| focus() | Get focus | +| Name | Description | +| ------- | ------------ | +| blur() | Remove focus | +| focus() | Get focus | diff --git a/components/select/doc/index.zh-CN.md b/components/select/doc/index.zh-CN.md index 96596b7e5e..b2247fc765 100644 --- a/components/select/doc/index.zh-CN.md +++ b/components/select/doc/index.zh-CN.md @@ -25,78 +25,76 @@ import { NzSelectModule } from 'ng-zorro-antd/select'; ``` -### nz-select - -| 参数 | 说明 | 类型 | 默认值 | 全局配置 | -| --- | --- | --- | --- | --- | -| `[nzId]` | 组件内部 input 的 id 值 | `string` | - | -| `[ngModel]` | 当前选中的 nz-option 的 nzValue 值，可双向绑定，当 `nzMode` 为 `multiple` 或 `tags` 时，ngModel 为数组 | `any \| any[]` | - | -| `[compareWith]` | 与 [SelectControlValueAccessor](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection) 相同 | `(o1: any, o2: any) => boolean` | `(o1: any, o2: any) => o1===o2` | -| `[nzAutoClearSearchValue]` | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效。 | `boolean` | `true` | -| `[nzAllowClear]` | 支持清除 | `boolean` | `false` | -| `[nzBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` | -| `[nzBorderless]` | 是否无边框 | `boolean` | `false` | ✅ | -| `[nzOpen]` | 下拉菜单是否打开，可双向绑定 | `boolean` | `false` | -| `[nzAutoFocus]` | 默认获取焦点 | `boolean` | `false` | -| `[nzDisabled]` | 是否禁用 | `boolean` | `false` | -| `[nzDropdownClassName]` | 下拉菜单的 className 属性 | `string \| string[]` | - | -| `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` | -| `[nzDropdownStyle]` | 下拉菜单的 style 属性 | `object` | - | -| `[nzCustomTemplate]` | 自定义选择框的 Template 内容 | `TemplateRef<{ $implicit: NzOptionComponent }>` | - | -| `[nzServerSearch]` | 是否使用服务端搜索，当为 true 时，将不再在前端对 nz-option 进行过滤 | `boolean` | `false` | -| `[nzFilterOption]` | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `(input?: string, option?: NzOptionComponent) => boolean;` | - | -| `[nzMaxMultipleCount]` | 最多选中多少个标签| `number` | `Infinity` | -| `[nzMode]` | 设置 nz-select 的模式 | `'multiple' \| 'tags' \| 'default'` | `'default'` | -| `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | `string \| TemplateRef` | - | -| `[nzPlaceHolder]` | 选择框默认文字 | `string` | - | -| `[nzShowArrow]` | 是否显示下拉小箭头 | `boolean` | 单选为 `true`，多选为 `false` | -| `[nzShowSearch]` | 使单选模式可搜索 | `boolean` | `false` | -| `[nzSize]` | 选择框大小 | `'large' \| 'small' \| 'default'` | `'default'` | -| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | -| `[nzSuffixIcon]` | 自定义的选择框后缀图标 | `TemplateRef \| string` | - | ✅ | -| `[nzRemoveIcon]` | 自定义的多选框清除图标 | `TemplateRef` | - | -| `[nzClearIcon]` | 自定义的多选框清空图标 | `TemplateRef` | - | -| `[nzMenuItemSelectedIcon]` | 自定义当前选中的条目图标 | `TemplateRef` | - | -| `[nzTokenSeparators]` | 在 tags 和 multiple 模式下自动分词的分隔符 | `string[]` | `[]` | -| `[nzLoading]` | 加载中状态 | `boolean` | `false` | -| `[nzMaxTagCount]` | 最多显示多少个 tag | `number` | - | -| `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | `TemplateRef<{ $implicit: any[] }>` | - | -| `[nzOptions]` | option 列表，可以取代 nz-option，用法参见例子 | `Array<{ label: string \| number \| TemplateRef; value: any; key?: string \| number; disabled?: boolean; hide?: boolean; groupLabel?: string \| TemplateRef;}>` | - | -| `[nzOptionHeightPx]` | 下拉菜单中每个 Option 的高度 | `number` | `32` | -| `[nzOptionOverflowSize]` | 下拉菜单中最多展示的 Option 个数，超出部分滚动 | `number` | `8` | -| `[nzSelectOnTab]` | 允许使用 TAB 键选择项目 | `boolean` | `false` | -| `(ngModelChange)` | 选中的 nz-option 发生变化时，调用此函数 | `EventEmitter` | - | -| `(nzOpenChange)` | 下拉菜单打开状态变化回调 | `EventEmitter` | - | -| `(nzScrollToBottom)` | 下拉列表滚动到底部的回调 | `EventEmitter` | - | -| `(nzOnSearch)` | 文本框值变化时回调 | `EventEmitter` | - | -| `(nzFocus)` | focus时回调 | `EventEmitter` | - | -| `(nzBlur)` | blur时回调 | `EventEmitter` | - | - -### nz-option - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| `[nzDisabled]` | 是否禁用 | `boolean` | `false` | -| `[nzTitle]` | 选项上的原生 title 提示 | `string \| number` | - | -| `[nzLabel]` | 选中该 nz-option 后，nz-select 中显示的文字 | `string \| number` | - | -| `[nzValue]` | nz-select 中 ngModel 的值 | `any` | - | -| `[nzKey]` | nz-select 中 ngModel 的值 | `string \| number` | - | -| `[nzHide]` | 是否在选项列表中隐藏该选项 | `boolean` | `false` | -| `[nzCustomContent]` | 是否自定义在下拉菜单中的 Template 内容，当为 true 时，nz-option 包裹的内容将直接渲染在下拉菜单中 | `boolean` | `false` | - -### nz-option-group - -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| `[nzLabel]` | 组名 | `string \| number \| TemplateRef` | - | - +### nz-select:standalone + +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------- | +| `[nzId]` | 组件内部 input 的 id 值 | `string` | - | +| `[ngModel]` | 当前选中的 nz-option 的 nzValue 值，可双向绑定，当 `nzMode` 为 `multiple` 或 `tags` 时，ngModel 为数组 | `any \| any[]` | - | +| `[compareWith]` | 与 [SelectControlValueAccessor](https://angular.io/api/forms/SelectControlValueAccessor#caveat-option-selection) 相同 | `(o1: any, o2: any) => boolean` | `(o1: any, o2: any) => o1===o2` | +| `[nzAutoClearSearchValue]` | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效。 | `boolean` | `true` | +| `[nzAllowClear]` | 支持清除 | `boolean` | `false` | +| `[nzBackdrop]` | 浮层是否应带有背景板 | `boolean` | `false` | +| `[nzBorderless]` | 是否无边框 | `boolean` | `false` | ✅ | +| `[nzOpen]` | 下拉菜单是否打开，可双向绑定 | `boolean` | `false` | +| `[nzAutoFocus]` | 默认获取焦点 | `boolean` | `false` | +| `[nzDisabled]` | 是否禁用 | `boolean` | `false` | +| `[nzDropdownClassName]` | 下拉菜单的 className 属性 | `string \| string[]` | - | +| `[nzDropdownMatchSelectWidth]` | 下拉菜单和选择器同宽 | `boolean` | `true` | +| `[nzDropdownStyle]` | 下拉菜单的 style 属性 | `object` | - | +| `[nzCustomTemplate]` | 自定义选择框的 Template 内容 | `TemplateRef<{ $implicit: NzOptionComponent }>` | - | +| `[nzServerSearch]` | 是否使用服务端搜索，当为 true 时，将不再在前端对 nz-option 进行过滤 | `boolean` | `false` | +| `[nzFilterOption]` | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | `(input?: string, option?: NzOptionComponent) => boolean;` | - | +| `[nzMaxMultipleCount]` | 最多选中多少个标签 | `number` | `Infinity` | +| `[nzMode]` | 设置 nz-select 的模式 | `'multiple' \| 'tags' \| 'default'` | `'default'` | +| `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | `string \| TemplateRef` | - | +| `[nzPlaceHolder]` | 选择框默认文字 | `string` | - | +| `[nzShowArrow]` | 是否显示下拉小箭头 | `boolean` | 单选为 `true`，多选为 `false` | +| `[nzShowSearch]` | 使单选模式可搜索 | `boolean` | `false` | +| `[nzSize]` | 选择框大小 | `'large' \| 'small' \| 'default'` | `'default'` | +| `[nzStatus]` | 设置校验状态 | `'error' \| 'warning'` | - | +| `[nzSuffixIcon]` | 自定义的选择框后缀图标 | `TemplateRef \| string` | - | ✅ | +| `[nzRemoveIcon]` | 自定义的多选框清除图标 | `TemplateRef` | - | +| `[nzClearIcon]` | 自定义的多选框清空图标 | `TemplateRef` | - | +| `[nzMenuItemSelectedIcon]` | 自定义当前选中的条目图标 | `TemplateRef` | - | +| `[nzTokenSeparators]` | 在 tags 和 multiple 模式下自动分词的分隔符 | `string[]` | `[]` | +| `[nzLoading]` | 加载中状态 | `boolean` | `false` | +| `[nzMaxTagCount]` | 最多显示多少个 tag | `number` | - | +| `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | `TemplateRef<{ $implicit: any[] }>` | - | +| `[nzOptions]` | option 列表，可以取代 nz-option，用法参见例子 | `Array<{ label: string \| number \| TemplateRef; value: any; key?: string \| number; disabled?: boolean; hide?: boolean; groupLabel?: string \| TemplateRef;}>` | - | +| `[nzOptionHeightPx]` | 下拉菜单中每个 Option 的高度 | `number` | `32` | +| `[nzOptionOverflowSize]` | 下拉菜单中最多展示的 Option 个数，超出部分滚动 | `number` | `8` | +| `[nzSelectOnTab]` | 允许使用 TAB 键选择项目 | `boolean` | `false` | +| `(ngModelChange)` | 选中的 nz-option 发生变化时，调用此函数 | `EventEmitter` | - | +| `(nzOpenChange)` | 下拉菜单打开状态变化回调 | `EventEmitter` | - | +| `(nzScrollToBottom)` | 下拉列表滚动到底部的回调 | `EventEmitter` | - | +| `(nzOnSearch)` | 文本框值变化时回调 | `EventEmitter` | - | +| `(nzFocus)` | focus 时回调 | `EventEmitter` | - | +| `(nzBlur)` | blur 时回调 | `EventEmitter` | - | + +### nz-option:standalone + +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | ------------------------------------------------------------------------------------------------ | ------------------ | ------- | +| `[nzDisabled]` | 是否禁用 | `boolean` | `false` | +| `[nzTitle]` | 选项上的原生 title 提示 | `string \| number` | - | +| `[nzLabel]` | 选中该 nz-option 后，nz-select 中显示的文字 | `string \| number` | - | +| `[nzValue]` | nz-select 中 ngModel 的值 | `any` | - | +| `[nzKey]` | nz-select 中 ngModel 的值 | `string \| number` | - | +| `[nzHide]` | 是否在选项列表中隐藏该选项 | `boolean` | `false` | +| `[nzCustomContent]` | 是否自定义在下拉菜单中的 Template 内容，当为 true 时，nz-option 包裹的内容将直接渲染在下拉菜单中 | `boolean` | `false` | + +### nz-option-group:standalone + +| 参数 | 说明 | 类型 | 默认值 | +| ----------- | ---- | --------------------------------------- | ------ | +| `[nzLabel]` | 组名 | `string \| number \| TemplateRef` | - | ## 方法 -### nz-select +### nz-select:standalone -| 名称 | 说明 | -| --- | --- | -| blur() | 取消焦点 | +| 名称 | 说明 | +| ------- | -------- | +| blur() | 取消焦点 | | focus() | 获取焦点 | - diff --git a/components/select/option-container.component.ts b/components/select/option-container.component.ts index dca195502d..cb86903839 100644 --- a/components/select/option-container.component.ts +++ b/components/select/option-container.component.ts @@ -3,13 +3,15 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +import { OverlayModule } from '@angular/cdk/overlay'; import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; -import { isPlatformBrowser } from '@angular/common'; +import { isPlatformBrowser, NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common'; import { AfterViewInit, ChangeDetectionStrategy, Component, EventEmitter, + inject, Input, NgZone, OnChanges, @@ -18,12 +20,15 @@ import { SimpleChanges, TemplateRef, ViewChild, - ViewEncapsulation, - inject + ViewEncapsulation } from '@angular/core'; +import { NzOverlayModule } from 'ng-zorro-antd/core/overlay'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; +import { NzEmptyModule } from 'ng-zorro-antd/empty'; +import { NzOptionItemGroupComponent } from './option-item-group.component'; +import { NzOptionItemComponent } from './option-item.component'; import { NzSelectItemInterface, NzSelectModeType } from './select.types'; @Component({ @@ -78,7 +83,19 @@ import { NzSelectItemInterface, NzSelectModeType } from './select.types'; `, - host: { class: 'ant-select-dropdown' } + host: { class: 'ant-select-dropdown' }, + imports: [ + NzEmptyModule, + NgIf, + NgSwitch, + NzOptionItemGroupComponent, + NgSwitchCase, + NzOptionItemComponent, + NgTemplateOutlet, + OverlayModule, + NzOverlayModule + ], + standalone: true }) export class NzOptionContainerComponent implements OnChanges, AfterViewInit { @Input() notFoundContent: string | TemplateRef | undefined = undefined; diff --git a/components/select/option-group.component.ts b/components/select/option-group.component.ts index 19df9c7acb..11dca46bda 100644 --- a/components/select/option-group.component.ts +++ b/components/select/option-group.component.ts @@ -13,7 +13,8 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types'; exportAs: 'nzOptionGroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, - template: ` ` + template: ` `, + standalone: true }) export class NzOptionGroupComponent implements OnChanges { @Input() nzLabel: string | number | TemplateRef | null = null; diff --git a/components/select/option-item-group.component.ts b/components/select/option-item-group.component.ts index d89157204b..76c00f021f 100644 --- a/components/select/option-item-group.component.ts +++ b/components/select/option-item-group.component.ts @@ -5,6 +5,7 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; @Component({ @@ -14,7 +15,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types'; encapsulation: ViewEncapsulation.None, host: { class: 'ant-select-item ant-select-item-group' - } + }, + imports: [NzOutletModule], + standalone: true }) export class NzOptionItemGroupComponent { @Input() nzLabel: string | number | TemplateRef | null = null; diff --git a/components/select/option-item.component.ts b/components/select/option-item.component.ts index 6acd310755..85fd738b3a 100644 --- a/components/select/option-item.component.ts +++ b/components/select/option-item.component.ts @@ -3,6 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +import { NgIf, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -22,6 +23,7 @@ import { takeUntil } from 'rxjs/operators'; import { NzDestroyService } from 'ng-zorro-antd/core/services'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; +import { NzIconModule } from 'ng-zorro-antd/icon'; @Component({ selector: 'nz-option-item', @@ -46,7 +48,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types'; '[class.ant-select-item-option-disabled]': 'disabled', '[class.ant-select-item-option-active]': 'activated && !disabled' }, - providers: [NzDestroyService] + providers: [NzDestroyService], + imports: [NgIf, NgTemplateOutlet, NzIconModule], + standalone: true }) export class NzOptionItemComponent implements OnChanges, OnInit { selected = false; diff --git a/components/select/option.component.ts b/components/select/option.component.ts index 7bdc7e130d..e104f40515 100644 --- a/components/select/option.component.ts +++ b/components/select/option.component.ts @@ -33,7 +33,8 @@ import { NzOptionGroupComponent } from './option-group.component'; - ` + `, + standalone: true }) export class NzOptionComponent implements OnChanges, OnInit { static ngAcceptInputType_nzDisabled: BooleanInput; diff --git a/components/select/select-arrow.component.ts b/components/select/select-arrow.component.ts index 74347e5a30..13a07860d8 100644 --- a/components/select/select-arrow.component.ts +++ b/components/select/select-arrow.component.ts @@ -3,9 +3,12 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +import { NgIf } from '@angular/common'; import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; +import { NzIconModule } from 'ng-zorro-antd/icon'; @Component({ selector: 'nz-select-arrow', @@ -29,7 +32,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types'; host: { class: 'ant-select-arrow', '[class.ant-select-arrow-loading]': 'loading' - } + }, + imports: [NzIconModule, NgIf, NzOutletModule], + standalone: true }) export class NzSelectArrowComponent { @Input() loading = false; diff --git a/components/select/select-clear.component.ts b/components/select/select-clear.component.ts index 492b3cbaf1..0c531d9c0f 100644 --- a/components/select/select-clear.component.ts +++ b/components/select/select-clear.component.ts @@ -3,6 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +import { NgIf } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -14,6 +15,7 @@ import { } from '@angular/core'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; +import { NzIconModule } from 'ng-zorro-antd/icon'; @Component({ selector: 'nz-select-clear', @@ -31,7 +33,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types'; host: { class: 'ant-select-clear', '(click)': 'onClick($event)' - } + }, + imports: [NzIconModule, NgIf], + standalone: true }) export class NzSelectClearComponent { @Input() clearIcon: TemplateRef | null = null; diff --git a/components/select/select-item.component.ts b/components/select/select-item.component.ts index d9e1d5d078..3651862173 100644 --- a/components/select/select-item.component.ts +++ b/components/select/select-item.component.ts @@ -3,6 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ +import { NgIf } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -13,7 +14,9 @@ import { ViewEncapsulation } from '@angular/core'; +import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; +import { NzIconModule } from 'ng-zorro-antd/icon'; @Component({ selector: 'nz-select-item', @@ -32,7 +35,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types'; class: 'ant-select-selection-item', '[attr.title]': 'label', '[class.ant-select-selection-item-disabled]': 'disabled' - } + }, + imports: [NzOutletModule, NgIf, NzIconModule], + standalone: true }) export class NzSelectItemComponent { @Input() disabled = false; diff --git a/components/select/select-placeholder.component.ts b/components/select/select-placeholder.component.ts index 59b6a076f8..6ca5013824 100644 --- a/components/select/select-placeholder.component.ts +++ b/components/select/select-placeholder.component.ts @@ -5,6 +5,7 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; @Component({ @@ -16,7 +17,9 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types'; {{ placeholder }} `, - host: { class: 'ant-select-selection-placeholder' } + host: { class: 'ant-select-selection-placeholder' }, + imports: [NzOutletModule], + standalone: true }) export class NzSelectPlaceholderComponent { @Input() placeholder: TemplateRef | string | null = null; diff --git a/components/select/select-search.component.ts b/components/select/select-search.component.ts index 60df01c6e1..e08971c8dd 100644 --- a/components/select/select-search.component.ts +++ b/components/select/select-search.component.ts @@ -4,6 +4,7 @@ */ import { FocusMonitor } from '@angular/cdk/a11y'; +import { NgIf } from '@angular/common'; import { AfterViewInit, ChangeDetectionStrategy, @@ -18,7 +19,7 @@ import { ViewChild, ViewEncapsulation } from '@angular/core'; -import { COMPOSITION_BUFFER_MODE } from '@angular/forms'; +import { COMPOSITION_BUFFER_MODE, FormsModule } from '@angular/forms'; @Component({ selector: 'nz-select-search', @@ -41,7 +42,9 @@ import { COMPOSITION_BUFFER_MODE } from '@angular/forms'; `, host: { class: 'ant-select-selection-search' }, - providers: [{ provide: COMPOSITION_BUFFER_MODE, useValue: false }] + providers: [{ provide: COMPOSITION_BUFFER_MODE, useValue: false }], + imports: [FormsModule, NgIf], + standalone: true }) export class NzSelectSearchComponent implements AfterViewInit, OnChanges { @Input() nzId: string | null = null; diff --git a/components/select/select-top-control.component.ts b/components/select/select-top-control.component.ts index f6a2cf6336..6840c33af7 100644 --- a/components/select/select-top-control.component.ts +++ b/components/select/select-top-control.component.ts @@ -4,6 +4,7 @@ */ import { BACKSPACE } from '@angular/cdk/keycodes'; +import { NgFor, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -28,6 +29,8 @@ import { takeUntil } from 'rxjs/operators'; import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; +import { NzSelectItemComponent } from './select-item.component'; +import { NzSelectPlaceholderComponent } from './select-placeholder.component'; import { NzSelectSearchComponent } from './select-search.component'; import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } from './select.types'; @@ -89,7 +92,18 @@ import { NzSelectItemInterface, NzSelectModeType, NzSelectTopControlItemType } f `, - host: { class: 'ant-select-selector' } + host: { class: 'ant-select-selector' }, + imports: [ + NgSwitch, + NzSelectSearchComponent, + NgSwitchCase, + NzSelectItemComponent, + NgIf, + NgSwitchDefault, + NgFor, + NzSelectPlaceholderComponent + ], + standalone: true }) export class NzSelectTopControlComponent implements OnChanges, OnInit, OnDestroy { @Input() nzId: string | null = null; diff --git a/components/select/select.component.ts b/components/select/select.component.ts index 5f12060fa2..f44666625d 100644 --- a/components/select/select.component.ts +++ b/components/select/select.component.ts @@ -13,6 +13,7 @@ import { ConnectionPositionPair } from '@angular/cdk/overlay'; import { Platform } from '@angular/cdk/platform'; +import { NgIf, NgStyle } from '@angular/common'; import { AfterContentInit, ChangeDetectionStrategy, @@ -43,9 +44,9 @@ import { distinctUntilChanged, map, startWith, switchMap, takeUntil, withLatestF import { slideMotion } from 'ng-zorro-antd/core/animation'; import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; -import { NzFormNoStatusService, NzFormStatusService } from 'ng-zorro-antd/core/form'; -import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation'; -import { getPlacementName, POSITION_MAP, POSITION_TYPE } from 'ng-zorro-antd/core/overlay'; +import { NzFormNoStatusService, NzFormPatchModule, NzFormStatusService } from 'ng-zorro-antd/core/form'; +import { NzNoAnimationDirective, NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation'; +import { getPlacementName, NzOverlayModule, POSITION_MAP, POSITION_TYPE } from 'ng-zorro-antd/core/overlay'; import { cancelRequestAnimationFrame, reqAnimFrame } from 'ng-zorro-antd/core/polyfill'; import { NzDestroyService } from 'ng-zorro-antd/core/services'; import { @@ -59,8 +60,11 @@ import { } from 'ng-zorro-antd/core/types'; import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/util'; +import { NzOptionContainerComponent } from './option-container.component'; import { NzOptionGroupComponent } from './option-group.component'; import { NzOptionComponent } from './option.component'; +import { NzSelectArrowComponent } from './select-arrow.component'; +import { NzSelectClearComponent } from './select-clear.component'; import { NzSelectTopControlComponent } from './select-top-control.component'; import { NzFilterOptionType, @@ -195,7 +199,21 @@ export type NzSelectSizeType = 'large' | 'default' | 'small'; '[class.ant-select-single]': `nzMode === 'default'`, '[class.ant-select-multiple]': `nzMode !== 'default'`, '[class.ant-select-rtl]': `dir === 'rtl'` - } + }, + imports: [ + NzSelectTopControlComponent, + CdkOverlayOrigin, + NzNoAnimationModule, + NzSelectArrowComponent, + NgIf, + NzFormPatchModule, + NzSelectClearComponent, + CdkConnectedOverlay, + NzOverlayModule, + NzOptionContainerComponent, + NgStyle + ], + standalone: true }) export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterContentInit, OnChanges, OnDestroy { readonly _nzModuleName: NzConfigKey = NZ_CONFIG_MODULE_NAME; diff --git a/components/select/select.module.ts b/components/select/select.module.ts index 93a30a37f3..e7c71c7bff 100644 --- a/components/select/select.module.ts +++ b/components/select/select.module.ts @@ -3,23 +3,7 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { A11yModule } from '@angular/cdk/a11y'; -import { BidiModule } from '@angular/cdk/bidi'; -import { OverlayModule } from '@angular/cdk/overlay'; -import { PlatformModule } from '@angular/cdk/platform'; -import { ScrollingModule } from '@angular/cdk/scrolling'; -import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; -import { FormsModule } from '@angular/forms'; - -import { NzFormPatchModule } from 'ng-zorro-antd/core/form'; -import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation'; -import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; -import { NzOverlayModule } from 'ng-zorro-antd/core/overlay'; -import { ɵNzTransitionPatchModule as NzTransitionPatchModule } from 'ng-zorro-antd/core/transition-patch'; -import { NzEmptyModule } from 'ng-zorro-antd/empty'; -import { NzI18nModule } from 'ng-zorro-antd/i18n'; -import { NzIconModule } from 'ng-zorro-antd/icon'; import { NzOptionContainerComponent } from './option-container.component'; import { NzOptionGroupComponent } from './option-group.component'; @@ -36,23 +20,6 @@ import { NzSelectComponent } from './select.component'; @NgModule({ imports: [ - BidiModule, - CommonModule, - NzI18nModule, - FormsModule, - PlatformModule, - OverlayModule, - NzIconModule, - NzOutletModule, - NzEmptyModule, - NzOverlayModule, - NzNoAnimationModule, - NzTransitionPatchModule, - NzFormPatchModule, - ScrollingModule, - A11yModule - ], - declarations: [ NzOptionComponent, NzSelectComponent, NzOptionContainerComponent,