feat(module:slider-select): add marks

close #86
NG-NEST · Nov 6, 2023 · 78b9eed · 78b9eed
1 parent b6912db
commit 78b9eed
Show file tree

Hide file tree

Showing 17 changed files with 383 additions and 33 deletions.
diff --git a/lib/ng-nest/ui/slider-select/examples/en_US/default/marks/marks.component.html b/lib/ng-nest/ui/slider-select/examples/en_US/default/marks/marks.component.html
@@ -0,0 +1,30 @@
+<x-row>
+  <x-col span="24">
+    <x-slider-select [style.width.rem]="20" [(ngModel)]="model1" [marks]="marks"></x-slider-select>
+  </x-col>
+  <x-col span="24">
+    <x-slider-select
+      [style.width.rem]="20"
+      [(ngModel)]="model2"
+      [marks]="marks"
+      reverse
+    ></x-slider-select>
+  </x-col>
+  <x-col span="6">
+    <x-slider-select
+      [style.height.rem]="20"
+      [(ngModel)]="model3"
+      [marks]="marks"
+      vertical
+    ></x-slider-select>
+  </x-col>
+  <x-col span="6">
+    <x-slider-select
+      [style.height.rem]="20"
+      [(ngModel)]="model4"
+      [marks]="marks"
+      reverse
+      vertical
+    ></x-slider-select>
+  </x-col>
+</x-row>
diff --git a/lib/ng-nest/ui/slider-select/examples/en_US/default/marks/marks.component.scss b/lib/ng-nest/ui/slider-select/examples/en_US/default/marks/marks.component.scss
@@ -0,0 +1,5 @@
+:host {
+  x-col {
+    margin-top: 1rem;
+  }
+}
diff --git a/lib/ng-nest/ui/slider-select/examples/en_US/default/marks/marks.component.ts b/lib/ng-nest/ui/slider-select/examples/en_US/default/marks/marks.component.ts
@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { XSliderSelectMark } from '@ng-nest/ui/slider-select';
+
+@Component({
+  selector: 'ex-marks',
+  templateUrl: './marks.component.html',
+  styleUrls: ['./marks.component.scss']
+})
+export class ExMarksComponent {
+  model1 = 60;
+
+  model2 = 70;
+
+  model3 = 10;
+
+  model4 = 20;
+
+  marks: XSliderSelectMark[] = [
+    {
+      value: 0,
+      label: '0°C'
+    },
+    {
+      value: 37,
+      label: '37°C'
+    },
+    {
+      value: 60,
+      label: '60°C'
+    },
+    {
+      value: 100,
+      label: '100°C',
+      style: {
+        color: '#f56c6c'
+      }
+    }
+  ];
+}
diff --git a/lib/ng-nest/ui/slider-select/examples/en_US/default/marks/readme.md b/lib/ng-nest/ui/slider-select/examples/en_US/default/marks/readme.md
@@ -0,0 +1,6 @@
+---
+order: 9
+label: 'Marks'
+---
+
+- Use the `marks` attribute to set labels.
diff --git a/lib/ng-nest/ui/slider-select/examples/zh_CN/default/marks/marks.component.html b/lib/ng-nest/ui/slider-select/examples/zh_CN/default/marks/marks.component.html
@@ -0,0 +1,30 @@
+<x-row>
+  <x-col span="24">
+    <x-slider-select [style.width.rem]="20" [(ngModel)]="model1" [marks]="marks"></x-slider-select>
+  </x-col>
+  <x-col span="24">
+    <x-slider-select
+      [style.width.rem]="20"
+      [(ngModel)]="model2"
+      [marks]="marks"
+      reverse
+    ></x-slider-select>
+  </x-col>
+  <x-col span="6">
+    <x-slider-select
+      [style.height.rem]="20"
+      [(ngModel)]="model3"
+      [marks]="marks"
+      vertical
+    ></x-slider-select>
+  </x-col>
+  <x-col span="6">
+    <x-slider-select
+      [style.height.rem]="20"
+      [(ngModel)]="model4"
+      [marks]="marks"
+      reverse
+      vertical
+    ></x-slider-select>
+  </x-col>
+</x-row>
diff --git a/lib/ng-nest/ui/slider-select/examples/zh_CN/default/marks/marks.component.scss b/lib/ng-nest/ui/slider-select/examples/zh_CN/default/marks/marks.component.scss
@@ -0,0 +1,5 @@
+:host {
+  x-col {
+    margin-top: 1rem;
+  }
+}
diff --git a/lib/ng-nest/ui/slider-select/examples/zh_CN/default/marks/marks.component.ts b/lib/ng-nest/ui/slider-select/examples/zh_CN/default/marks/marks.component.ts
@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { XSliderSelectMark } from '@ng-nest/ui/slider-select';
+
+@Component({
+  selector: 'ex-marks',
+  templateUrl: './marks.component.html',
+  styleUrls: ['./marks.component.scss']
+})
+export class ExMarksComponent {
+  model1 = 60;
+
+  model2 = 70;
+
+  model3 = 10;
+
+  model4 = 20;
+
+  marks: XSliderSelectMark[] = [
+    {
+      value: 0,
+      label: '0°C'
+    },
+    {
+      value: 37,
+      label: '37°C'
+    },
+    {
+      value: 60,
+      label: '60°C'
+    },
+    {
+      value: 100,
+      label: '100°C',
+      style: {
+        color: '#f56c6c'
+      }
+    }
+  ];
+}
diff --git a/lib/ng-nest/ui/slider-select/examples/zh_CN/default/marks/readme.md b/lib/ng-nest/ui/slider-select/examples/zh_CN/default/marks/readme.md
@@ -0,0 +1,6 @@
+---
+order: 9
+label: '定义标签'
+---
+
+- 使用 `marks` 属性设置标签。
diff --git a/lib/ng-nest/ui/slider-select/slider-select.component.html b/lib/ng-nest/ui/slider-select/slider-select.component.html
@@ -33,6 +33,11 @@
           (cdkDragMoved)="moved($event, 'both')"
         ></div>
       </div>
+      <div class="x-slider-select-marks">
+        <div class="x-slider-select-mark" [ngStyle]="mark.style" *ngFor="let mark of markList">
+          <span class="x-slider-select-mark-label">{{ mark.label }}</span>
+        </div>
+      </div>
       <div
         #dragStartRef
         class="x-slider-select-drag"

diff --git a/lib/ng-nest/ui/slider-select/slider-select.component.ts b/lib/ng-nest/ui/slider-select/slider-select.component.ts
@@ -14,7 +14,11 @@ import {
   ViewChildren,
   QueryList
 } from '@angular/core';
-import { XSliderSelectProperty, XSliderSelectPrefix } from './slider-select.property';
+import {
+  XSliderSelectProperty,
+  XSliderSelectPrefix,
+  XSliderSelectMark
+} from './slider-select.property';
 import {
   XIsEmpty,
   XIsUndefined,
@@ -57,7 +61,7 @@ export class XSliderSelectComponent
 
   @ViewChild(CdkDrag) cdkDrag!: CdkDrag;
 
-  override value: number | number[] = 0;
+  override value: number | number[] = Number(this.min);
 
   startOffset: number = 0;
   startVisible: boolean = false;
@@ -73,6 +77,8 @@ export class XSliderSelectComponent
   endDisplayValue = '0';
   showEndTooltip = true;
 
+  markList: XSliderSelectMark[] = [];
+
   private _unSubject = new Subject<void>();
   private _resizeObserver!: XResizeObserver;
   isNumber = true;
@@ -85,9 +91,9 @@ export class XSliderSelectComponent
   override writeValue(value: number | number[]) {
     if (XIsNull(value) || XIsUndefined(value)) {
       if (this.range) {
-        value = [0, 0];
+        value = [Number(this.min), Number(this.min)];
       } else {
-        value = 0;
+        value = Number(this.min);
       }
     }
     this.value = value;
@@ -115,6 +121,7 @@ export class XSliderSelectComponent
       this.direction
     );
     this.setPrecision();
+    this.setMarks();
     this.setClassMap();
   }
 
@@ -171,27 +178,28 @@ export class XSliderSelectComponent
     this.labelMap[`x-text-align-${this.labelAlign}`] = this.labelAlign ? true : false;
   }
 
+  getOffset(val: number) {
+    return Math.round(
+      ((val + (this.reverse ? -Number(this.min) : Number(this.min))) * 100) /
+        (Number(this.max) - Number(this.min))
+    );
+  }
+
   setLeft() {
     let startVal = 0,
       endVal = 0;
-    const getOffset = (val: number) => {
-      return Math.round(
-        ((val + (this.reverse ? Number(this.min) : -Number(this.min))) * 100) /
-          (Number(this.max) - Number(this.min))
-      );
-    };
 
     if (this.isNumber) {
       startVal = this.value as number;
     } else if (XIsArray(this.value) && this.value.length > 1) {
       startVal = this.value[0];
       endVal = this.value[1];
 
-      this.endOffset = getOffset(endVal);
+      this.endOffset = this.getOffset(endVal);
       const end = this.endOffset;
       this.end = end;
     }
-    this.startOffset = getOffset(startVal);
+    this.startOffset = this.getOffset(startVal);
     const start = this.startOffset;
     this.start = start;
 
@@ -231,6 +239,33 @@ export class XSliderSelectComponent
     }
   }
 
+  setMarks() {
+    if (!this.marks) return;
+    for (let mark of this.marks) {
+      const mk: XSliderSelectMark = {
+        value: mark.value,
+        label: mark.label,
+        style: { ...mark.style }
+      };
+      mk.offset = this.getOffset(mark.value);
+
+      if (this.reverse) {
+        if (this.vertical) {
+          mk.style!['top'] = `${mk.offset}%`;
+        } else {
+          mk.style!['right'] = `${mk.offset}%`;
+        }
+      } else {
+        if (this.vertical) {
+          mk.style!['bottom'] = `${mk.offset}%`;
+        } else {
+          mk.style!['left'] = `${mk.offset}%`;
+        }
+      }
+      this.markList.push(mk);
+    }
+  }
+
   started(drag: CdkDragStart, type: 'start' | 'end' | 'both' = 'start') {
     if (['start', 'both'].includes(type)) {
       const start = this.startOffset;

diff --git a/lib/ng-nest/ui/slider-select/slider-select.property.ts b/lib/ng-nest/ui/slider-select/slider-select.property.ts
@@ -63,6 +63,11 @@ export class XSliderSelectProperty
    * @en_US Custom button
    */
   @Input() customButton?: XTemplate;
+  /**
+   * @zh_CN 刻度标记，key 为实际数字，在 [min,max] 内，可通过 style 设置样式
+   * @en_US Scale marking, key is the actual number, in [min, max], you can set style through style
+   */
+  @Input() marks: XSliderSelectMark[] = [];
   /**
    * @zh_CN 开始拖动的事件
    * @en_US Start drag event
@@ -121,3 +126,30 @@ export interface XSliderSelectOption extends XFormOption {
    */
   dragEnd?: (dragEnd: CdkDragEnd) => void;
 }
+
+/**
+ * @zh_CN 刻度标记
+ * @en_US Scale marking
+ */
+export interface XSliderSelectMark {
+  /**
+   * @zh_CN 数值
+   * @en_US Value
+   */
+  value: number;
+  /**
+   * @zh_CN 显示标签
+   * @en_US Label
+   */
+  label: string;
+  /**
+   * @zh_CN 标签样式
+   * @en_US style
+   */
+  style?: { [style: string]: any };
+  /**
+   * @zh_CN 实际偏移量（自动计算）
+   * @en_US Offset. automatic calculation
+   */
+  offset?: number;
+}