From 9bcce6c969c0bef7bdf4526407b2dfc56b7ff660 Mon Sep 17 00:00:00 2001 From: HyperLifelll9 Date: Wed, 17 Apr 2024 12:58:30 +0800 Subject: [PATCH] fix(module:slider): fix the style of markers in vertical mode (#8494) --- components/slider/marks.component.ts | 21 ++--- components/slider/slider.component.ts | 125 +++++++++++++------------- components/slider/slider.spec.ts | 14 +-- components/slider/step.component.ts | 21 ++--- components/slider/style/entry.less | 1 + components/slider/style/patch.less | 3 + 6 files changed, 93 insertions(+), 92 deletions(-) create mode 100644 components/slider/style/patch.less diff --git a/components/slider/marks.component.ts b/components/slider/marks.component.ts index 32ee13c1ab..f2021cd7e6 100644 --- a/components/slider/marks.component.ts +++ b/components/slider/marks.component.ts @@ -18,18 +18,19 @@ import { NzDisplayedMark, NzExtendedMark, NzMark, NzMarkObj } from './typings'; selector: 'nz-slider-marks', exportAs: 'nzSliderMarks', template: ` -
- -
+ `, imports: [NgStyle, NgForOf], - standalone: true + standalone: true, + host: { + class: 'ant-slider-mark' + } }) export class NzSliderMarksComponent implements OnChanges { static ngAcceptInputType_vertical: BooleanInput; diff --git a/components/slider/slider.component.ts b/components/slider/slider.component.ts index 479bc43423..7b85992d1a 100644 --- a/components/slider/slider.component.ts +++ b/components/slider/slider.component.ts @@ -13,7 +13,6 @@ import { Component, ElementRef, EventEmitter, - forwardRef, Input, OnChanges, OnDestroy, @@ -23,25 +22,25 @@ import { QueryList, SimpleChanges, TemplateRef, - ViewChild, ViewChildren, - ViewEncapsulation + ViewEncapsulation, + forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { fromEvent, merge, Observable, Subject, Subscription } from 'rxjs'; +import { Observable, Subject, Subscription, fromEvent, merge } 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'; @@ -66,63 +65,51 @@ import { NzExtendedMark, NzMarks, NzSliderHandler, NzSliderShowTooltip, NzSlider }, NzSliderService ], - host: { - '(keydown)': 'onKeyDown($event)' - }, template: ` -
-
- - - - -
+
+ + + + `, imports: [ NzSliderTrackComponent, @@ -132,7 +119,15 @@ import { NzExtendedMark, NzMarks, NzSliderHandler, NzSliderShowTooltip, NzSlider NzSliderMarksComponent, NgIf ], - standalone: true + standalone: true, + host: { + class: 'ant-slider', + '[class.ant-slider-rtl]': `dir === 'rtl'`, + '[class.ant-slider-disabled]': 'nzDisabled', + '[class.ant-slider-vertical]': 'nzVertical', + '[class.ant-slider-with-marks]': 'marksArray', + '(keydown)': 'onKeyDown($event)' + } }) export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChanges, OnDestroy { static ngAcceptInputType_nzDisabled: BooleanInput; @@ -145,7 +140,6 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange static ngAcceptInputType_nzStep: NumberInput; static ngAcceptInputType_nzReverse: BooleanInput; - @ViewChild('slider', { static: true }) slider!: ElementRef; @ViewChildren(NzSliderHandleComponent) handlerComponents!: QueryList; @Input() @InputBoolean() nzDisabled = false; @@ -185,6 +179,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange private isNzDisableFirstChange = true; constructor( + public slider: ElementRef, private sliderService: NzSliderService, private cdr: ChangeDetectorRef, private platform: Platform, diff --git a/components/slider/slider.spec.ts b/components/slider/slider.spec.ts index f0dd7e6460..0c92fff21e 100644 --- a/components/slider/slider.spec.ts +++ b/components/slider/slider.spec.ts @@ -863,17 +863,17 @@ describe('nz-slider', () => { it('should be disable initially even if nzDisable is set to false', () => { testComponent.disable(); fixture.detectChanges(); - const firstElementChildSlider = sliderDebugElement.nativeElement.firstElementChild; + const sliderElement = sliderDebugElement.nativeElement; - expect(firstElementChildSlider!.classList).toContain('ant-slider-disabled'); + expect(sliderElement!.classList).toContain('ant-slider-disabled'); expect(sliderInstance.nzDisabled).toBe(true); }); it('should disable work', () => { testComponent.disabled = true; fixture.detectChanges(); - const firstElementChildSlider = sliderDebugElement.nativeElement.firstElementChild; + const sliderElement = sliderDebugElement.nativeElement; - expect(firstElementChildSlider!.classList).toContain('ant-slider-disabled'); + expect(sliderElement!.classList).toContain('ant-slider-disabled'); expect(sliderInstance.nzDisabled).toBe(true); expect(sliderControl.value).toBe(42); dispatchClickEventSequence(sliderNativeElement, 0.76); @@ -882,7 +882,7 @@ describe('nz-slider', () => { testComponent.enable(); fixture.detectChanges(); - expect(firstElementChildSlider!.classList).not.toContain('ant-slider-disabled'); + expect(sliderElement!.classList).not.toContain('ant-slider-disabled'); expect(sliderInstance.nzDisabled).toBe(false); dispatchClickEventSequence(sliderNativeElement, 0.76); fixture.detectChanges(); @@ -890,7 +890,7 @@ describe('nz-slider', () => { testComponent.disable(); fixture.detectChanges(); - expect(firstElementChildSlider!.classList).toContain('ant-slider-disabled'); + expect(sliderElement!.classList).toContain('ant-slider-disabled'); expect(sliderInstance.nzDisabled).toBe(true); dispatchSlideEventSequence(sliderNativeElement, 0.42, 0.19); fixture.detectChanges(); @@ -1076,7 +1076,7 @@ describe('nz-slider', () => { }); const styles = ` - ::ng-deep .ant-slider { position: relative; width: 100px; height: 12px; } + ::ng-deep .ant-slider { display: block; position: relative; width: 100px; height: 12px; } ::ng-deep .ant-slider .ant-slider-rail { position: absolute; width: 100%; height: 4px; } ::ng-deep .ant-slider .ant-slider-track { position: absolute; height: 4px; } ::ng-deep .ant-slider .ant-slider-handle { position: absolute; margin-left: -7px; margin-top: -5px; width: 14px; height: 14px; } diff --git a/components/slider/step.component.ts b/components/slider/step.component.ts index c83314f549..186940e762 100644 --- a/components/slider/step.component.ts +++ b/components/slider/step.component.ts @@ -18,17 +18,18 @@ import { NzDisplayedStep, NzExtendedMark } from './typings'; exportAs: 'nzSliderStep', preserveWhitespaces: false, template: ` -
- -
+ `, imports: [NgStyle, NgForOf], - standalone: true + standalone: true, + host: { + class: 'ant-slider-step' + } }) export class NzSliderStepComponent implements OnChanges { static ngAcceptInputType_vertical: BooleanInput; @@ -79,7 +80,7 @@ export class NzSliderStepComponent implements OnChanges { active: false, style: { [orient]: `${offset}%`, - transform: 'translateX(-50%)' + transform: this.vertical ? 'translateY(50%)' : 'translateX(-50%)' } }; }); diff --git a/components/slider/style/entry.less b/components/slider/style/entry.less index f017363455..a1ec677a4c 100644 --- a/components/slider/style/entry.less +++ b/components/slider/style/entry.less @@ -1,3 +1,4 @@ @import './index.less'; +@import './patch.less'; // style dependencies @import '../../tooltip/style/entry.less'; diff --git a/components/slider/style/patch.less b/components/slider/style/patch.less new file mode 100644 index 0000000000..487a601b26 --- /dev/null +++ b/components/slider/style/patch.less @@ -0,0 +1,3 @@ +.ant-slider { + display: block; +}