feat(module:slider-select): add tooltip template

close #85
NG-NEST · Nov 7, 2023 · a0e79c2 · a0e79c2
1 parent 555ce07
commit a0e79c2
Show file tree

Hide file tree

Showing 30 changed files with 220 additions and 48 deletions.
diff --git a/lib/ng-nest/ui/slider-select/examples/en_US/default/custom-value/custom-value.component.html b/lib/ng-nest/ui/slider-select/examples/en_US/default/custom-value/custom-value.component.html
@@ -0,0 +1,12 @@
+<x-row>
+  <x-col span="12">
+    <x-slider-select [(ngModel)]="model1" [tooltipCustom]="customTpl"></x-slider-select>
+  </x-col>
+  <x-col span="12">
+    <x-slider-select [(ngModel)]="model2" range [tooltipCustom]="customTpl"></x-slider-select>
+  </x-col>
+</x-row>
+
+<ng-template #customTpl let-value="$value">
+  <x-icon type="fto-user"></x-icon> {{ value }} %
+</ng-template>
diff --git a/lib/ng-nest/ui/slider-select/examples/en_US/default/custom-value/custom-value.component.scss b/lib/ng-nest/ui/slider-select/examples/en_US/default/custom-value/custom-value.component.scss
@@ -0,0 +1,5 @@
+:host {
+  x-row:not(:first-child) {
+    margin-top: 1rem;
+  }
+}
diff --git a/lib/ng-nest/ui/slider-select/examples/en_US/default/custom-value/custom-value.component.ts b/lib/ng-nest/ui/slider-select/examples/en_US/default/custom-value/custom-value.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ex-custom-value',
+  templateUrl: './custom-value.component.html',
+  styleUrls: ['./custom-value.component.scss']
+})
+export class ExCustomValueComponent {
+  model1 = 60;
+  model2: number[] = [20, 50];
+}
diff --git a/lib/ng-nest/ui/slider-select/examples/en_US/default/custom-value/readme.md b/lib/ng-nest/ui/slider-select/examples/en_US/default/custom-value/readme.md
@@ -0,0 +1,6 @@
+---
+order: 10
+label: 'Value'
+---
+
+- Use the `tooltipCustom` attribute to customize the tooltip display value.
diff --git a/lib/ng-nest/ui/slider-select/examples/zh_CN/default/custom-value/custom-value.component.html b/lib/ng-nest/ui/slider-select/examples/zh_CN/default/custom-value/custom-value.component.html
@@ -0,0 +1,12 @@
+<x-row>
+  <x-col span="12">
+    <x-slider-select [(ngModel)]="model1" [tooltipCustom]="customTpl"></x-slider-select>
+  </x-col>
+  <x-col span="12">
+    <x-slider-select [(ngModel)]="model2" range [tooltipCustom]="customTpl"></x-slider-select>
+  </x-col>
+</x-row>
+
+<ng-template #customTpl let-value="$value">
+  <x-icon type="fto-user"></x-icon> {{ value }} %
+</ng-template>
diff --git a/lib/ng-nest/ui/slider-select/examples/zh_CN/default/custom-value/custom-value.component.scss b/lib/ng-nest/ui/slider-select/examples/zh_CN/default/custom-value/custom-value.component.scss
@@ -0,0 +1,5 @@
+:host {
+  x-row:not(:first-child) {
+    margin-top: 1rem;
+  }
+}
diff --git a/lib/ng-nest/ui/slider-select/examples/zh_CN/default/custom-value/custom-value.component.ts b/lib/ng-nest/ui/slider-select/examples/zh_CN/default/custom-value/custom-value.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ex-custom-value',
+  templateUrl: './custom-value.component.html',
+  styleUrls: ['./custom-value.component.scss']
+})
+export class ExCustomValueComponent {
+  model1 = 60;
+  model2: number[] = [20, 50];
+}
diff --git a/lib/ng-nest/ui/slider-select/examples/zh_CN/default/custom-value/readme.md b/lib/ng-nest/ui/slider-select/examples/zh_CN/default/custom-value/readme.md
@@ -0,0 +1,6 @@
+---
+order: 10
+label: '显示值'
+---
+
+- 使用 `tooltipCustom` 属性自定义 tooltip 显示值。
diff --git a/lib/ng-nest/ui/slider-select/examples/zh_CN/default/vertical/vertical.component.scss b/lib/ng-nest/ui/slider-select/examples/zh_CN/default/vertical/vertical.component.scss
@@ -1,7 +1,4 @@
 :host {
-  x-row {
-    margin-top: 10rem;
-  }
   x-row:not(:first-child) {
     margin-top: 1rem;
   }

diff --git a/lib/ng-nest/ui/slider-select/slider-select.component.html b/lib/ng-nest/ui/slider-select/slider-select.component.html
@@ -58,12 +58,17 @@
           [class.x-slider-select-custom-button]="customButton"
           placement="top"
           [disabled]="!showTooltip && !showStartTooltip"
-          [content]="startDisplayValue"
+          [content]="tooltipStartTpl"
           [visible]="startVisible"
           [manual]="startManual"
         >
           <ng-container *xOutlet="customButton">{{ customButton }}</ng-container>
         </div>
+        <ng-template #tooltipStartTpl>
+          <ng-container *xOutlet="tooltipCustom; context: { $value: startDisplayValue }">{{
+            startDisplayValue
+          }}</ng-container>
+        </ng-template>
       </div>
       <div
         [hidden]="!range"
@@ -86,12 +91,17 @@
           [class.x-slider-select-custom-button]="customButton"
           placement="top"
           [disabled]="!showTooltip && !showEndTooltip"
-          [content]="endDisplayValue"
+          [content]="tooltipEndTpl"
           [visible]="endVisible"
           [manual]="endManual"
         >
           <ng-container *xOutlet="customButton">{{ customButton }}</ng-container>
         </div>
+        <ng-template #tooltipEndTpl>
+          <ng-container *xOutlet="tooltipCustom; context: { $value: endDisplayValue }">{{
+            endDisplayValue
+          }}</ng-container>
+        </ng-template>
       </div>
     </div>
   </div>

diff --git a/lib/ng-nest/ui/slider-select/slider-select.component.ts b/lib/ng-nest/ui/slider-select/slider-select.component.ts
@@ -61,7 +61,7 @@ export class XSliderSelectComponent
 
   @ViewChild(CdkDrag) cdkDrag!: CdkDrag;
 
-  override value: number | number[] = Number(this.min);
+  override value: number | number[] = 0;
 
   startOffset: number = 0;
   startVisible: boolean = false;
@@ -179,9 +179,11 @@ export class XSliderSelectComponent
   }
 
   getOffset(val: number) {
-    return Math.round(
-      ((val + (this.reverse ? -Number(this.min) : Number(this.min))) * 100) /
-        (Number(this.max) - Number(this.min))
+    return Math.abs(
+      Math.round(
+        ((val + (this.reverse ? -Number(this.min) : Number(this.min))) * 100) /
+          (Number(this.max) - Number(this.min))
+      )
     );
   }
 
@@ -199,6 +201,7 @@ export class XSliderSelectComponent
       const end = this.endOffset;
       this.end = end;
     }
+
     this.startOffset = this.getOffset(startVal);
     const start = this.startOffset;
     this.start = start;

diff --git a/lib/ng-nest/ui/slider-select/slider-select.property.ts b/lib/ng-nest/ui/slider-select/slider-select.property.ts
@@ -68,6 +68,11 @@ export class XSliderSelectProperty
    * @en_US Scale marking, key is the actual number, in [min, max], you can set style through style
    */
   @Input() marks: XSliderSelectMark[] = [];
+  /**
+   * @zh_CN 自定义 tooltip
+   * @en_US Custom tooltip
+   */
+  @Input() tooltipCustom!: XTemplate;
   /**
    * @zh_CN 开始拖动的事件
    * @en_US Start drag event

diff --git a/lib/ng-nest/ui/slider-select/style/mixin.scss b/lib/ng-nest/ui/slider-select/style/mixin.scss
@@ -88,8 +88,8 @@
     &::before {
       content: ' ';
       position: absolute;
-      width: math.div($--x-slider-select-button-size, 4/3);
-      height: math.div($--x-slider-select-button-size, 4/3);
+      width: calc(#{$--x-slider-select-button-size} * 0.75);
+      height: calc(#{$--x-slider-select-button-size} * 0.75);
       border: calc(#{$--x-border-width} * 2) solid $--x-primary;
       background-color: $--x-background-a100;
       border-radius: $--x-slider-select-button-size;

diff --git a/lib/ng-nest/ui/tooltip/tooltip-portal.component.html b/lib/ng-nest/ui/tooltip/tooltip-portal.component.html
@@ -1,5 +1,11 @@
 <div #tooltipPortal class="x-tooltip-portal" [ngClass]="classMap">
-  <div class="x-tooltip-portal-inner" [style.backgroundColor]="backgroundColor" [style.color]="color" [innerHTML]="content"></div>
+  <div
+    class="x-tooltip-portal-inner"
+    [style.backgroundColor]="backgroundColor"
+    [style.color]="color"
+  >
+    <ng-container *xOutlet="content"><div [innerHTML]="content"></div></ng-container>
+  </div>
   <div #tooltipArrow class="x-tooltip-portal-arrow">
     <div #tooltipArrowAfter class="x-tooltip-portal-arrow-after"></div>
   </div>

diff --git a/lib/ng-nest/ui/tooltip/tooltip-portal.component.ts b/lib/ng-nest/ui/tooltip/tooltip-portal.component.ts
@@ -14,7 +14,7 @@ import {
 } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { XTooltipPortalPrefix } from './tooltip.property';
-import { XPlacement, XClassMap, XFadeAnimation } from '@ng-nest/ui/core';
+import { XPlacement, XClassMap, XFadeAnimation, XTemplate } from '@ng-nest/ui/core';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
@@ -49,7 +49,7 @@ export class XTooltipPortalComponent implements OnInit, OnDestroy, OnDestroy, Af
   destroy!: Function;
   placement!: XPlacement;
   previousPlacement!: XPlacement;
-  content!: string;
+  content!: XTemplate;
   color!: string;
   backgroundColor!: string;
   positionChange: Subject<any> = new Subject();

diff --git a/lib/ng-nest/ui/tooltip/tooltip.module.ts b/lib/ng-nest/ui/tooltip/tooltip.module.ts
@@ -4,10 +4,11 @@ import { XTooltipDirective } from './tooltip.directive';
 import { XTooltipPortalComponent } from './tooltip-portal.component';
 import { XPortalModule } from '@ng-nest/ui/portal';
 import { XTooltipProperty } from './tooltip.property';
+import { XOutletModule } from '@ng-nest/ui/outlet';
 
 @NgModule({
-    declarations: [XTooltipDirective, XTooltipPortalComponent, XTooltipProperty],
-    exports: [XTooltipDirective, XTooltipPortalComponent],
-    imports: [CommonModule, XPortalModule]
+  declarations: [XTooltipDirective, XTooltipPortalComponent, XTooltipProperty],
+  exports: [XTooltipDirective, XTooltipPortalComponent],
+  imports: [CommonModule, XPortalModule, XOutletModule]
 })
 export class XTooltipModule {}
diff --git a/lib/ng-nest/ui/tooltip/tooltip.property.ts b/lib/ng-nest/ui/tooltip/tooltip.property.ts
@@ -1,4 +1,4 @@
-import { XPlacement, XInputBoolean, XBoolean, XWithConfig } from '@ng-nest/ui/core';
+import { XPlacement, XInputBoolean, XBoolean, XWithConfig, XTemplate } from '@ng-nest/ui/core';
 import { Input, Directive, ElementRef } from '@angular/core';
 
 /**
@@ -18,7 +18,7 @@ export class XTooltipProperty {
    * @zh_CN 内容
    * @en_US Content
    */
-  @Input() content?: string;
+  @Input() content!: XTemplate;
   /**
    * @zh_CN 显示位置
    * @en_US Display position

diff --git a/lib/ng-nest/ui/tree/tree.component.ts b/lib/ng-nest/ui/tree/tree.component.ts
@@ -27,7 +27,13 @@ import {
 import { debounceTime, map, Observable, Subject, takeUntil } from 'rxjs';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { XTreeNodeComponent } from './tree-node.component';
-import { CdkDrag, CdkDragEnd, CdkDragMove, CdkDragStart, CdkDropList } from '@angular/cdk/drag-drop';
+import {
+  CdkDrag,
+  CdkDragEnd,
+  CdkDragMove,
+  CdkDragStart,
+  CdkDropList
+} from '@angular/cdk/drag-drop';
 import { XTreeService } from './tree.service';
 
 @Component({
@@ -134,7 +140,12 @@ export class XTreeComponent extends XTreeProperty implements OnChanges {
         this.insertNode(event.source.data, this.hoverTreeNode, this.dragPosition);
       }
       this.hoverTreeNode.change && this.hoverTreeNode.change();
-      this.nodeDragEnded.emit({ event, from: event.source.data, to: this.hoverTreeNode, position: this.dragPosition });
+      this.nodeDragEnded.emit({
+        event,
+        from: event.source.data,
+        to: this.hoverTreeNode,
+        position: this.dragPosition
+      });
     }
   }
 
@@ -157,7 +168,12 @@ export class XTreeComponent extends XTreeProperty implements OnChanges {
       this.dragPosition = 1;
     }
     this.hoverTreeNode.change && this.hoverTreeNode.change();
-    this.nodeDragMoved.emit({ event, from: this.draggingTreeNode!, to: this.hoverTreeNode, position: this.dragPosition });
+    this.nodeDragMoved.emit({
+      event,
+      from: this.draggingTreeNode!,
+      to: this.hoverTreeNode,
+      position: this.dragPosition
+    });
   }
 
   predicate(_drag: CdkDrag<XTreeNode>, _drop: CdkDropList<XTreeNode>) {
@@ -184,12 +200,22 @@ export class XTreeComponent extends XTreeProperty implements OnChanges {
     });
   }
 
-  private setDataChange(value: XTreeNode[], regetChildren = false, init = true, parentOpen = true, lazyParant?: XTreeNode) {
+  private setDataChange(
+    value: XTreeNode[],
+    regetChildren = false,
+    init = true,
+    parentOpen = true,
+    lazyParant?: XTreeNode
+  ) {
     if (XIsEmpty(this.checked)) this.checked = [];
     const getChildren = (node: XTreeNode, level: number) => {
       if (init) {
         node.level = level;
-        node.open = Boolean(this.expandedAll) || level <= Number(this.expandedLevel) || this.expanded.includes(node.id) || node.open;
+        node.open =
+          Boolean(this.expandedAll) ||
+          level <= Number(this.expandedLevel) ||
+          this.expanded.includes(node.id) ||
+          node.open;
         node.checked = this.checked.includes(node.id) || node.checked;
         node.childrenLoaded = node.open;
       }
@@ -202,7 +228,10 @@ export class XTreeComponent extends XTreeProperty implements OnChanges {
           }
         }
       }
-      if ((!this.lazy && (XIsUndefined(node.leaf) || regetChildren)) || node.id === lazyParant?.id) {
+      if (
+        (!this.lazy && (XIsUndefined(node.leaf) || regetChildren)) ||
+        node.id === lazyParant?.id
+      ) {
         node.leaf = (node.children?.length as number) === 0;
       }
       if (!node.leaf) node.children?.map((y) => getChildren(y, level + 1));
@@ -329,7 +358,6 @@ export class XTreeComponent extends XTreeProperty implements OnChanges {
         this.setVirtualExpandedAll(item, this.expandedAll as boolean);
       }
     }
-    this.virtualBody?.checkViewportSize();
   }
 
   setExpanded() {
@@ -341,7 +369,6 @@ export class XTreeComponent extends XTreeProperty implements OnChanges {
       item.change && item.change();
     }
     this.nodes = [...this.nodes];
-    this.virtualBody?.checkViewportSize();
   }
 
   setVirtualExpandedAll(item: XTreeNode, expandedAll: boolean) {
@@ -388,6 +415,8 @@ export class XTreeComponent extends XTreeProperty implements OnChanges {
 
     this.addOrRemoveExpanded(node);
     this.nodes = [...this.nodes];
+    this.virtualBody?.checkViewportSize();
+    this.cdr.detectChanges();
   }
 
   addOrRemoveExpanded(node: XTreeNode) {
@@ -409,7 +438,9 @@ export class XTreeComponent extends XTreeProperty implements OnChanges {
     let before = this.activatedNode;
     if (this.multiple) {
       if (this.activatedId.length > 0) {
-        let ids = this.objectArray ? this.activatedId.map((x: XTreeNode) => x.id) : this.activatedId;
+        let ids = this.objectArray
+          ? this.activatedId.map((x: XTreeNode) => x.id)
+          : this.activatedId;
         for (let i = 0; i < ids.length; i++) {
           let node = nodes.find((x) => x.id === ids[i]) as XTreeNode;
           if (node) {

diff --git a/src/main/test/modules/slider-select/custom-value/custom-value.component.html b/src/main/test/modules/slider-select/custom-value/custom-value.component.html
@@ -0,0 +1,12 @@
+<x-row>
+  <x-col span="12">
+    <x-slider-select [(ngModel)]="model1" [tooltipCustom]="customTpl"></x-slider-select>
+  </x-col>
+  <x-col span="12">
+    <x-slider-select [(ngModel)]="model2" range [tooltipCustom]="customTpl"></x-slider-select>
+  </x-col>
+</x-row>
+
+<ng-template #customTpl let-value="$value">
+  <x-icon type="fto-user"></x-icon> {{ value }} %
+</ng-template>
diff --git a/src/main/test/modules/slider-select/custom-value/custom-value.component.scss b/src/main/test/modules/slider-select/custom-value/custom-value.component.scss
@@ -0,0 +1,5 @@
+:host {
+  x-row:not(:first-child) {
+    margin-top: 1rem;
+  }
+}
diff --git a/src/main/test/modules/slider-select/custom-value/custom-value.component.ts b/src/main/test/modules/slider-select/custom-value/custom-value.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ex-custom-value',
+  templateUrl: './custom-value.component.html',
+  styleUrls: ['./custom-value.component.scss']
+})
+export class ExCustomValueComponent {
+  model1 = 60;
+  model2: number[] = [20, 50];
+}