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

@@ -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)
 

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)
 

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)
+    }
+  }
+})
+```

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)
+    }
+  }
+})
+```

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
 ```

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)
+    }
+  }
+})
+```

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)
+    }
+  }
+})
+```

src/slider/demos/zhCN/index.demo-entry.md

@@ -8,6 +8,7 @@
 basic
 range
 mark
+disabled
 disable-tooltip
 format
 ```

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

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;

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,

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,