Skip to content

Commit

Permalink
feat(module:slider): support standalone component (#8219)
Browse files Browse the repository at this point in the history 
* feat(module:slider): support standalone component

* feat(module:slider): support standalone component
  • Loading branch information
@ParsaArvanehPA
ParsaArvanehPA committed Dec 1, 2023
1 parent 769f74c commit 428c53c
Show file tree
Hide file tree
Showing 9 changed files with 79 additions and 59 deletions.
38 changes: 19 additions & 19 deletions components/slider/doc/index.en-US.md
View file
Expand Up @@ -17,23 +17,23 @@ import { NzSliderModule } from 'ng-zorro-antd/slider';

## API

### nz-slider
### nz-slider:standalone

| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| `[nzDisabled]` | If true, the slider will not be interactable. | `boolean` | `false` |
| `[nzDots]` | Whether the thumb can drag over tick only. | `boolean` | `false` |
| `[nzIncluded]` | Make effect when `marks` not null，`true` means containment and `false` means coordinative | `boolean` | `true` |
| `[nzMarks]` | Tick mark of Slider, type of key must be `number`, and must in closed interval [min, max] ，each mark can declare its own style. | `object` | { number: string/HTML } or { number: { style: object, label: string/HTML } } |
| `[nzMax]` | The maximum value the slider can slide to | `number` | `100` |
| `[nzMin]` | The minimum value the slider can slide to. | `number` | `0` |
| `[nzRange]` | dual thumb mode | `boolean` | `false` |
| `[nzStep]` | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | `number \| null` | `1` |
| `[nzTipFormatter]` | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | `(value: number) => string \| TemplateRef<void>` | - |
| `[ngModel]` | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | `number \| number[]` | - |
| `[nzVertical]` | If true, the slider will be vertical. | `boolean` | `false` |
| `[nzReverse]` | Reverse the component | `boolean` | `false` |
| `[nzTooltipVisible]` | When set to `always` tooltips are always displayed. When set to `never` they are never displayed | `'default' \| 'always' \| 'never'` | `default` |
| `[nzTooltipPlacement]` | Set the default placement of Tooltip | `string` | |
| `(nzOnAfterChange)` | Fire when `onmouseup` is fired. | `EventEmitter<number[] \| number>` | - |
| `(ngModelChange)` | Callback function that is fired when the user changes the slider's value. | `EventEmitter<number[] \| number>` | - |
| Property | Description | Type | Default |
| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------- |
| `[nzDisabled]` | If true, the slider will not be interactable. | `boolean` | `false` |
| `[nzDots]` | Whether the thumb can drag over tick only. | `boolean` | `false` |
| `[nzIncluded]` | Make effect when `marks` not null，`true` means containment and `false` means coordinative | `boolean` | `true` |
| `[nzMarks]` | Tick mark of Slider, type of key must be `number`, and must in closed interval [min, max] ，each mark can declare its own style. | `object` | { number: string/HTML } or { number: { style: object, label: string/HTML } } |
| `[nzMax]` | The maximum value the slider can slide to | `number` | `100` |
| `[nzMin]` | The minimum value the slider can slide to. | `number` | `0` |
| `[nzRange]` | dual thumb mode | `boolean` | `false` |
| `[nzStep]` | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | `number \| null` | `1` |
| `[nzTipFormatter]` | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | `(value: number) => string \| TemplateRef<void>` | - |
| `[ngModel]` | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | `number \| number[]` | - |
| `[nzVertical]` | If true, the slider will be vertical. | `boolean` | `false` |
| `[nzReverse]` | Reverse the component | `boolean` | `false` |
| `[nzTooltipVisible]` | When set to `always` tooltips are always displayed. When set to `never` they are never displayed | `'default' \| 'always' \| 'never'` | `default` |
| `[nzTooltipPlacement]` | Set the default placement of Tooltip | `string` | |
| `(nzOnAfterChange)` | Fire when `onmouseup` is fired. | `EventEmitter<number[] \| number>` | - |
| `(ngModelChange)` | Callback function that is fired when the user changes the slider's value. | `EventEmitter<number[] \| number>` | - |
38 changes: 19 additions & 19 deletions components/slider/doc/index.zh-CN.md
View file
Expand Up @@ -18,23 +18,23 @@ import { NzSliderModule } from 'ng-zorro-antd/slider';

## API

### nz-slider
### nz-slider:standalone

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `[nzDisabled]` | 值为 `true` 时，滑块为禁用状态 | `boolean` | `false` |
| `[nzDots]` | 是否只能拖拽到刻度上 | `boolean` | `false` |
| `[nzIncluded]` | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | `boolean` | `true` |
| `[nzMarks]` | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式 | `object` | { number: string/HTML } or { number: { style: object, label: string/HTML } } |
| `[nzMax]` | 最大值 | `number` | `100` |
| `[nzMin]` | 最小值 | `number` | `0` |
| `[nzRange]` | 双滑块模式 | `boolean` | `false` |
| `[nzStep]` | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | `number \| null` | `1` |
| `[nzTipFormatter]` | Slider 会把当前值传给 `nzTipFormatter`，并在 Tooltip 中显示 `nzTipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | `(value: number) => string \| TemplateRef<void>` | - |
| `[ngModel]` | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | `number \| number[]` | - |
| `[nzVertical]` | 值为 `true` 时，Slider 为垂直方向 | `boolean` | `false` |
| `[nzReverse]` | 反向坐标轴 | `boolean` | `false` |
| `[nzTooltipVisible]` | 值为 `always` 时总是显示，值为 `never` 时在任何情况下都不显示 | `'default' \| 'always' \| 'never'` | `default` |
| `[nzTooltipPlacement]` | 设置 Tooltip 的默认位置。 | `string` | |
| `(nzOnAfterChange)` | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | `EventEmitter<number[] \| number>` | - |
| `(ngModelChange)` | 当 Slider 的值发生改变时，会触发 ngModelChange 事件，并把改变后的值作为参数传入。 | `EventEmitter<number[] \| number>>` | - |
| 参数 | 说明 | 类型 | 默认值 |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------- |
| `[nzDisabled]` | 值为 `true` 时，滑块为禁用状态 | `boolean` | `false` |
| `[nzDots]` | 是否只能拖拽到刻度上 | `boolean` | `false` |
| `[nzIncluded]` | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | `boolean` | `true` |
| `[nzMarks]` | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式 | `object` | { number: string/HTML } or { number: { style: object, label: string/HTML } } |
| `[nzMax]` | 最大值 | `number` | `100` |
| `[nzMin]` | 最小值 | `number` | `0` |
| `[nzRange]` | 双滑块模式 | `boolean` | `false` |
| `[nzStep]` | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | `number \| null` | `1` |
| `[nzTipFormatter]` | Slider 会把当前值传给 `nzTipFormatter`，并在 Tooltip 中显示 `nzTipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | `(value: number) => string \| TemplateRef<void>` | - |
| `[ngModel]` | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | `number \| number[]` | - |
| `[nzVertical]` | 值为 `true` 时，Slider 为垂直方向 | `boolean` | `false` |
| `[nzReverse]` | 反向坐标轴 | `boolean` | `false` |
| `[nzTooltipVisible]` | 值为 `always` 时总是显示，值为 `never` 时在任何情况下都不显示 | `'default' \| 'always' \| 'never'` | `default` |
| `[nzTooltipPlacement]` | 设置 Tooltip 的默认位置。 | `string` | |
| `(nzOnAfterChange)` | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | `EventEmitter<number[] \| number>` | - |
| `(ngModelChange)` | 当 Slider 的值发生改变时，会触发 ngModelChange 事件，并把改变后的值作为参数传入。 | `EventEmitter<number[] \| number>>` | - |
7 changes: 5 additions & 2 deletions components/slider/handle.component.ts
View file
Expand Up @@ -4,6 +4,7 @@
*/

import { Direction } from '@angular/cdk/bidi';
import { NgStyle } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Expand All @@ -19,7 +20,7 @@ import {

import { BooleanInput, NgStyleInterface, NzTSType } from 'ng-zorro-antd/core/types';
import { InputBoolean } from 'ng-zorro-antd/core/util';
import { NzTooltipDirective } from 'ng-zorro-antd/tooltip';
import { NzTooltipDirective, NzToolTipModule } from 'ng-zorro-antd/tooltip';

import { NzSliderService } from './slider.service';
import { NzSliderShowTooltip } from './typings';
Expand All @@ -46,7 +47,9 @@ import { NzSliderShowTooltip } from './typings';
host: {
'(mouseenter)': 'enterHandle()',
'(mouseleave)': 'leaveHandle()'
}
},
imports: [NzToolTipModule, NgStyle],
standalone: true
})
export class NzSliderHandleComponent implements OnChanges {
static ngAcceptInputType_active: BooleanInput;
Expand Down
5 changes: 4 additions & 1 deletion components/slider/marks.component.ts
View file
Expand Up @@ -3,6 +3,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { NgForOf, NgStyle } from '@angular/common';
import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';

import { BooleanInput, NgStyleInterface } from 'ng-zorro-antd/core/types';
Expand All @@ -26,7 +27,9 @@ import { NzDisplayedMark, NzExtendedMark, NzMark, NzMarkObj } from './typings';
[innerHTML]="attr.label"
></span>
</div>
`
`,
imports: [NgStyle, NgForOf],
standalone: true
})
export class NzSliderMarksComponent implements OnChanges {
static ngAcceptInputType_vertical: BooleanInput;
Expand Down
27 changes: 20 additions & 7 deletions components/slider/slider.component.ts
View file
Expand Up @@ -6,12 +6,14 @@
import { Direction, Directionality } from '@angular/cdk/bidi';
import { DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
import { Platform } from '@angular/cdk/platform';
import { NgForOf, NgIf } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
forwardRef,
Input,
OnChanges,
OnDestroy,
Expand All @@ -23,29 +25,31 @@ import {
TemplateRef,
ViewChild,
ViewChildren,
ViewEncapsulation,
forwardRef
ViewEncapsulation
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Observable, Subject, Subscription, fromEvent, merge } from 'rxjs';
import { fromEvent, merge, Observable, Subject, Subscription } from 'rxjs';
import { distinctUntilChanged, filter, map, takeUntil, tap } from 'rxjs/operators';

import { BooleanInput, NumberInput, NzSafeAny } from 'ng-zorro-antd/core/types';
import {
InputBoolean,
InputNumber,
MouseTouchObserverConfig,
arraysEqual,
ensureNumberInRange,
getElementOffset,
getPercent,
getPrecision,
InputBoolean,
InputNumber,
isNil,
MouseTouchObserverConfig,
silentEvent
} from 'ng-zorro-antd/core/util';

import { NzSliderHandleComponent } from './handle.component';
import { NzSliderMarksComponent } from './marks.component';
import { NzSliderService } from './slider.service';
import { NzSliderStepComponent } from './step.component';
import { NzSliderTrackComponent } from './track.component';
import { NzExtendedMark, NzMarks, NzSliderHandler, NzSliderShowTooltip, NzSliderValue } from './typings';

@Component({
Expand Down Expand Up @@ -119,7 +123,16 @@ import { NzExtendedMark, NzMarks, NzSliderHandler, NzSliderShowTooltip, NzSlider
[reverse]="nzReverse"
></nz-slider-marks>
</div>
`
`,
imports: [
NzSliderTrackComponent,
NzSliderStepComponent,
NzSliderHandleComponent,
NgForOf,
NzSliderMarksComponent,
NgIf
],
standalone: true
})
export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy {
static ngAcceptInputType_nzDisabled: BooleanInput;
Expand Down

0 comments on commit 428c53c

Please sign in to comment.