fix(module:slider): fix the style of markers in vertical mode (#8494)

NG-ZORRO · Apr 17, 2024 · 9bcce6c · 9bcce6c
1 parent 31b90fa
commit 9bcce6c
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 92 deletions.
diff --git 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: `
-    <div class="ant-slider-mark">
-      <span
-        class="ant-slider-mark-text"
-        *ngFor="let attr of marks; trackBy: trackById"
-        [class.ant-slider-mark-active]="attr.active"
-        [ngStyle]="attr.style!"
-        [innerHTML]="attr.label"
-      ></span>
-    </div>
+    <span
+      class="ant-slider-mark-text"
+      *ngFor="let attr of marks; trackBy: trackById"
+      [class.ant-slider-mark-active]="attr.active"
+      [ngStyle]="attr.style!"
+      [innerHTML]="attr.label"
+    ></span>
   `,
   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
@@ -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: `
-    <div
-      #slider
-      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"
-    >
-      <div class="ant-slider-rail"></div>
-      <nz-slider-track
-        [vertical]="nzVertical"
-        [included]="nzIncluded"
-        [offset]="track.offset!"
-        [length]="track.length!"
-        [reverse]="nzReverse"
-        [dir]="dir"
-      ></nz-slider-track>
-      <nz-slider-step
-        *ngIf="marksArray"
-        [vertical]="nzVertical"
-        [min]="nzMin"
-        [max]="nzMax"
-        [lowerBound]="$any(bounds.lower)"
-        [upperBound]="$any(bounds.upper)"
-        [marksArray]="marksArray"
-        [included]="nzIncluded"
-        [reverse]="nzReverse"
-      ></nz-slider-step>
-      <nz-slider-handle
-        *ngFor="let handle of handles; index as handleIndex"
-        [vertical]="nzVertical"
-        [reverse]="nzReverse"
-        [offset]="handle.offset!"
-        [value]="handle.value!"
-        [active]="handle.active"
-        [tooltipFormatter]="nzTipFormatter"
-        [tooltipVisible]="nzTooltipVisible"
-        [tooltipPlacement]="nzTooltipPlacement"
-        [dir]="dir"
-        (focusin)="onHandleFocusIn(handleIndex)"
-      ></nz-slider-handle>
-      <nz-slider-marks
-        *ngIf="marksArray"
-        [vertical]="nzVertical"
-        [min]="nzMin"
-        [max]="nzMax"
-        [lowerBound]="$any(bounds.lower)"
-        [upperBound]="$any(bounds.upper)"
-        [marksArray]="marksArray"
-        [included]="nzIncluded"
-        [reverse]="nzReverse"
-      ></nz-slider-marks>
-    </div>
+    <div class="ant-slider-rail"></div>
+    <nz-slider-track
+      [vertical]="nzVertical"
+      [included]="nzIncluded"
+      [offset]="track.offset!"
+      [length]="track.length!"
+      [reverse]="nzReverse"
+      [dir]="dir"
+    ></nz-slider-track>
+    <nz-slider-step
+      *ngIf="marksArray"
+      [vertical]="nzVertical"
+      [min]="nzMin"
+      [max]="nzMax"
+      [lowerBound]="$any(bounds.lower)"
+      [upperBound]="$any(bounds.upper)"
+      [marksArray]="marksArray"
+      [included]="nzIncluded"
+      [reverse]="nzReverse"
+    ></nz-slider-step>
+    <nz-slider-handle
+      *ngFor="let handle of handles; index as handleIndex"
+      [vertical]="nzVertical"
+      [reverse]="nzReverse"
+      [offset]="handle.offset!"
+      [value]="handle.value!"
+      [active]="handle.active"
+      [tooltipFormatter]="nzTipFormatter"
+      [tooltipVisible]="nzTooltipVisible"
+      [tooltipPlacement]="nzTooltipPlacement"
+      [dir]="dir"
+      (focusin)="onHandleFocusIn(handleIndex)"
+    ></nz-slider-handle>
+    <nz-slider-marks
+      *ngIf="marksArray"
+      [vertical]="nzVertical"
+      [min]="nzMin"
+      [max]="nzMax"
+      [lowerBound]="$any(bounds.lower)"
+      [upperBound]="$any(bounds.upper)"
+      [marksArray]="marksArray"
+      [included]="nzIncluded"
+      [reverse]="nzReverse"
+    ></nz-slider-marks>
   `,
   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<HTMLDivElement>;
   @ViewChildren(NzSliderHandleComponent) handlerComponents!: QueryList<NzSliderHandleComponent>;
 
   @Input() @InputBoolean() nzDisabled = false;
@@ -185,6 +179,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
   private isNzDisableFirstChange = true;
 
   constructor(
+    public slider: ElementRef<HTMLDivElement>,
     private sliderService: NzSliderService,
     private cdr: ChangeDetectorRef,
     private platform: Platform,

diff --git 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,15 +882,15 @@ 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();
       expect(sliderControl.value).toBe(76);
 
       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
@@ -18,17 +18,18 @@ import { NzDisplayedStep, NzExtendedMark } from './typings';
   exportAs: 'nzSliderStep',
   preserveWhitespaces: false,
   template: `
-    <div class="ant-slider-step">
-      <span
-        class="ant-slider-dot"
-        *ngFor="let mark of steps; trackBy: trackById"
-        [class.ant-slider-dot-active]="mark.active"
-        [ngStyle]="mark.style!"
-      ></span>
-    </div>
+    <span
+      class="ant-slider-dot"
+      *ngFor="let mark of steps; trackBy: trackById"
+      [class.ant-slider-dot-active]="mark.active"
+      [ngStyle]="mark.style!"
+    ></span>
   `,
   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
@@ -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
@@ -0,0 +1,3 @@
+.ant-slider {
+  display: block;
+}