From 53b24267b0222cd9d3ace8313c0fcb0713a4ca68 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 27 Dec 2020 17:46:56 +0800
Subject: [PATCH] feat(slider): make active dots have active color

---
 src/slider/src/Slider.vue                 | 37 ++++++++++++++++++-----
 src/slider/src/styles/themed-base.cssr.js | 22 ++++++++++----
 src/slider/styles/dark.js                 |  3 +-
 src/slider/styles/light.js                |  3 +-
 4 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/src/slider/src/Slider.vue b/src/slider/src/Slider.vue
index 2d2b6b6a5..7237c427b 100644
--- a/src/slider/src/Slider.vue
+++ b/src/slider/src/Slider.vue
@@ -12,11 +12,20 @@
   >
     <div ref="railRef" class="n-slider-rail" @click="handleRailClick">
       <div class="n-slider-rail__fill" :style="fillStyle" />
-      <div v-if="marks" class="n-slider-dots">
+      <div
+        v-if="marks"
+        class="n-slider-dots"
+        :class="{
+          'n-slider-dots--transition-disabled': dotTransitionDisabled
+        }"
+      >
         <div
           v-for="mark in computedMarks"
           :key="mark.label"
           class="n-slider-dot"
+          :class="{
+            'n-slider-dot--active': mark.active
+          }"
           :style="{
             ...mark.style
           }"
@@ -261,6 +270,7 @@ export default {
       active: activeRef,
       prevActive: prevActiveRef,
       clicked: clickedRef,
+      dotTransitionDisabled: ref(false),
       // https://github.com/vuejs/vue-next/issues/2283
       handleRef1: ref(null),
       handleRef2: ref(null),
@@ -272,17 +282,21 @@ export default {
   },
   computed: {
     computedMarks () {
-      const marks = []
-      for (const value of Object.keys(this.marks)) {
-        marks.push({
-          label: this.marks[value],
+      const mergedMarks = []
+      const { marks, max, min, range, mergedValue } = this
+      for (const key of Object.keys(marks)) {
+        const num = Number(key)
+        mergedMarks.push({
+          active: range
+            ? mergedValue[0] <= num && mergedValue[1] >= num
+            : mergedValue >= num,
+          label: marks[key],
           style: {
-            left:
-              ((Number(value) - this.min) / (this.max - this.min)) * 100 + '%'
+            left: ((num - min) / (max - min)) * 100 + '%'
           }
         })
       }
-      return marks
+      return mergedMarks
     },
     fillStyle () {
       if (this.range) {
@@ -351,6 +365,13 @@ export default {
   watch: {
     mergedValue (newValue, oldValue) {
       const { changeSource } = this
+      if (this.marks) {
+        if (this.dotTransitionDisabled) return
+        this.dotTransitionDisabled = true
+        this.$nextTick(() => {
+          this.dotTransitionDisabled = false
+        })
+      }
       if (this.range && newValue) {
         if (oldValue && oldValue[1] !== newValue[1]) {
           this.$nextTick(() => {
diff --git a/src/slider/src/styles/themed-base.cssr.js b/src/slider/src/styles/themed-base.cssr.js
index 4a68555f4..0a5f77b1c 100644
--- a/src/slider/src/styles/themed-base.cssr.js
+++ b/src/slider/src/styles/themed-base.cssr.js
@@ -28,7 +28,8 @@ export default c([
         dotWidth,
         dotBorderRadius,
         indicatorBorderRadius,
-        fontSize
+        fontSize,
+        dotBorderActive
       },
       $global: {
         cubicBezierEaseInOut,
@@ -50,8 +51,8 @@ export default c([
           raw: `
             position: absolute;
             top: 18px;
-            left: 0;
-            right: 0;
+            left: calc(${handleSize} / 2);
+            right: calc(${handleSize} / 2);
           `
         }, [
           cB('slider-mark', {
@@ -137,11 +138,16 @@ export default c([
         cB('slider-dots', {
           raw: `
             position: absolute;
-            left: 0;
             top: 50%;
-            right: 0;
+            left: calc(${handleSize} / 2);
+            right: calc(${handleSize} / 2);
           `
         }, [
+          cM('transition-disabled', [
+            cB('slider-dot', {
+              transition: 'none'
+            })
+          ]),
           cB('slider-dot', {
             raw: `
               transition:
@@ -159,7 +165,11 @@ export default c([
             border: dotBorder,
             backgroundColor: dotColor,
             boxShadow: dotBoxShadow
-          })
+          }, [
+            cM('active', {
+              border: dotBorderActive
+            })
+          ])
         ])
       ]),
       cTB('slider-handle-indicator', {
diff --git a/src/slider/styles/dark.js b/src/slider/styles/dark.js
index d5efc7e47..01e89c807 100644
--- a/src/slider/styles/dark.js
+++ b/src/slider/styles/dark.js
@@ -36,7 +36,8 @@ export default create({
       indicatorBoxShadow: boxShadow,
       indicatorTextColor: textColor2Overlay,
       indicatorBorderRadius: borderRadius,
-      dotBorder: `2px solid ${primaryColorSuppl}`,
+      dotBorder: `2px solid ${railColorOverlay}`,
+      dotBorderActive: `2px solid ${primaryColorSuppl}`,
       dotBoxShadow: null
     }
   }
diff --git a/src/slider/styles/light.js b/src/slider/styles/light.js
index fa99d2570..1b8140be2 100644
--- a/src/slider/styles/light.js
+++ b/src/slider/styles/light.js
@@ -39,7 +39,8 @@ export default create({
       indicatorBoxShadow: boxShadow,
       indicatorTextColor: baseColor,
       indicatorBorderRadius: borderRadius,
-      dotBorder: `2px solid ${primaryColor}`,
+      dotBorder: `2px solid ${railColorOverlay}`,
+      dotBorderActive: `2px solid ${primaryColor}`,
       dotBoxShadow: null
     }
   }