From a4cfbc839beaf1dcab4a6e34bf351f742f3e31a2 Mon Sep 17 00:00:00 2001
From: kalykun <984757534@qq.com>
Date: Sun, 25 Jul 2021 14:59:39 +0800
Subject: [PATCH] fix(slider): prop disabled doesn't work (#642)

* fix(slider): prop disabled doesn't work

* Apply suggestions from code review

Co-authored-by: 07akioni <07akioni2@gmail.com>
---
 CHANGELOG.en-US.md                        |  1 +
 CHANGELOG.zh-CN.md                        |  1 +
 src/slider/demos/enUS/disabled.demo.md    | 17 +++++++++++++++++
 src/slider/demos/enUS/format.demo.md      | 12 ++++++++++++
 src/slider/demos/enUS/index.demo-entry.md |  1 +
 src/slider/demos/zhCN/disabled.demo.md    | 17 +++++++++++++++++
 src/slider/demos/zhCN/format.demo.md      | 12 ++++++++++++
 src/slider/demos/zhCN/index.demo-entry.md |  1 +
 src/slider/src/Slider.tsx                 |  3 +++
 src/slider/src/styles/index.cssr.ts       |  4 ++++
 src/slider/styles/dark.ts                 |  4 +++-
 src/slider/styles/light.ts                |  5 ++++-
 12 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 src/slider/demos/enUS/disabled.demo.md
 create mode 100644 src/slider/demos/zhCN/disabled.demo.md

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 3cbe7624a..081f52465 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -18,6 +18,7 @@
 
 - Fix `n-carousel` arrow buttons cannot be displayed in a specific browser, closes [#625](https://github.com/TuSimple/naive-ui/issues/625).
 - Fix `n-layout-sider`'s `width` prop can't be string, closes [#607](https://github.com/TuSimple/naive-ui/issues/607).
+- Fix `n-slider` prop `disabled` doesn't work, closes [#641](https://github.com/TuSimple/naive-ui/issues/641).
 
 ## 2.15.6 (2021-07-23)
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 145966dce..ff4b0bd5c 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -18,6 +18,7 @@
 
 - 修复 `n-carousel` 中箭头按钮在特定浏览器下无法显示问题，关闭 [#625](https://github.com/TuSimple/naive-ui/issues/625)
 - 修复 `n-layout-sider` `width` 不能为字符串，关闭 [#607](https://github.com/TuSimple/naive-ui/issues/607)
+- 修复 `n-slider` `disabled` 属性不生效，关闭 [#641](https://github.com/TuSimple/naive-ui/issues/641)
 
 ## 2.15.6 (2021-07-23)
 
diff --git a/src/slider/demos/enUS/disabled.demo.md b/src/slider/demos/enUS/disabled.demo.md
new file mode 100644
index 000000000..e71f87c51
--- /dev/null
+++ b/src/slider/demos/enUS/disabled.demo.md
@@ -0,0 +1,17 @@
+# Disabled
+
+```html
+<n-slider disabled v-model:value="value" />
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(50)
+    }
+  }
+})
+```
diff --git a/src/slider/demos/enUS/format.demo.md b/src/slider/demos/enUS/format.demo.md
index 8384e811e..d0ce21a03 100644
--- a/src/slider/demos/enUS/format.demo.md
+++ b/src/slider/demos/enUS/format.demo.md
@@ -7,3 +7,15 @@
   :format-tooltip="value => `${value}%`"
 />
 ```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(50)
+    }
+  }
+})
+```
diff --git a/src/slider/demos/enUS/index.demo-entry.md b/src/slider/demos/enUS/index.demo-entry.md
index a29f32734..963116c57 100644
--- a/src/slider/demos/enUS/index.demo-entry.md
+++ b/src/slider/demos/enUS/index.demo-entry.md
@@ -8,6 +8,7 @@ As far as I know, it is awalys used as volumn control.
 basic
 range
 mark
+disabled
 disable-tooltip
 format
 ```
diff --git a/src/slider/demos/zhCN/disabled.demo.md b/src/slider/demos/zhCN/disabled.demo.md
new file mode 100644
index 000000000..d7d575c65
--- /dev/null
+++ b/src/slider/demos/zhCN/disabled.demo.md
@@ -0,0 +1,17 @@
+# 禁用
+
+```html
+<n-slider disabled v-model:value="value" />
+```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(50)
+    }
+  }
+})
+```
diff --git a/src/slider/demos/zhCN/format.demo.md b/src/slider/demos/zhCN/format.demo.md
index a749b6987..b7ebc5d2f 100644
--- a/src/slider/demos/zhCN/format.demo.md
+++ b/src/slider/demos/zhCN/format.demo.md
@@ -7,3 +7,15 @@
   :format-tooltip="value => `${value}%`"
 />
 ```
+
+```js
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    return {
+      value: ref(50)
+    }
+  }
+})
+```
diff --git a/src/slider/demos/zhCN/index.demo-entry.md b/src/slider/demos/zhCN/index.demo-entry.md
index 23ca635b7..818999f56 100644
--- a/src/slider/demos/zhCN/index.demo-entry.md
+++ b/src/slider/demos/zhCN/index.demo-entry.md
@@ -8,6 +8,7 @@
 basic
 range
 mark
+disabled
 disable-tooltip
 format
 ```
diff --git a/src/slider/src/Slider.tsx b/src/slider/src/Slider.tsx
index 7b635a425..d0c4a6010 100644
--- a/src/slider/src/Slider.tsx
+++ b/src/slider/src/Slider.tsx
@@ -222,6 +222,7 @@ export default defineComponent({
       }
     })
     function doUpdateValue (value: number | [number, number]): void {
+      if (props.disabled) return
       const {
         onChange,
         'onUpdate:value': _onUpdateValue,
@@ -740,6 +741,7 @@ export default defineComponent({
             fillColor,
             fillColorHover,
             handleColor,
+            opacityDisabled,
             dotColor,
             dotColorModal,
             handleBoxShadow,
@@ -779,6 +781,7 @@ export default defineComponent({
           '--handle-box-shadow-hover': handleBoxShadowHover,
           '--handle-color': handleColor,
           '--handle-size': handleSize,
+          '--opacity-disabled': opacityDisabled,
           '--rail-color': railColor,
           '--rail-color-hover': railColorHover,
           '--rail-height': railHeight
diff --git a/src/slider/src/styles/index.cssr.ts b/src/slider/src/styles/index.cssr.ts
index 0676c17f6..991ac382c 100644
--- a/src/slider/src/styles/index.cssr.ts
+++ b/src/slider/src/styles/index.cssr.ts
@@ -48,6 +48,10 @@ export default c([
         transform: 'translateX(-50%)'
       })
     ]),
+    cM('disabled', {
+      cursor: 'not-allowed !important',
+      opacity: 'var(--opacity-disabled)'
+    }),
     cM('with-mark', `
       width: 100%;
       margin: 8px 0 32px 0;
diff --git a/src/slider/styles/dark.ts b/src/slider/styles/dark.ts
index 92707f3c9..1867b123f 100644
--- a/src/slider/styles/dark.ts
+++ b/src/slider/styles/dark.ts
@@ -15,7 +15,8 @@ const sliderDark: SliderTheme = {
       textColor2,
       cardColor,
       borderRadius,
-      fontSize
+      fontSize,
+      opacityDisabled
     } = vars
     return {
       ...sizeVariables,
@@ -24,6 +25,7 @@ const sliderDark: SliderTheme = {
       railColorHover: railColor,
       fillColor: primaryColorSuppl,
       fillColorHover: primaryColorSuppl,
+      opacityDisabled,
       handleColor: '#FFF',
       dotColor: cardColor,
       dotColorModal: modalColor,
diff --git a/src/slider/styles/light.ts b/src/slider/styles/light.ts
index 84639fca8..5c5d654ed 100644
--- a/src/slider/styles/light.ts
+++ b/src/slider/styles/light.ts
@@ -14,8 +14,10 @@ const self = (vars: ThemeCommonVars) => {
     modalColor,
     popoverColor,
     borderRadius,
-    fontSize
+    fontSize,
+    opacityDisabled
   } = vars
+
   return {
     ...sizeVariables,
     fontSize,
@@ -23,6 +25,7 @@ const self = (vars: ThemeCommonVars) => {
     railColorHover: railColor,
     fillColor: primaryColor,
     fillColorHover: primaryColor,
+    opacityDisabled,
     handleColor: '#FFF',
     dotColor: cardColor,
     dotColorModal: modalColor,