feat: update slider

Author: tangjinzhou

build/config.js

@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'icon', // dev components
+    componentName: 'slider', // dev components
   },
 };

components/icon/index.en-US.md

@@ -101,7 +101,7 @@ module.exports = {
 ```
 
 ```jsx
-import { Icon } from 'antd';
+import { Icon } from 'ant-design-vue';
 import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
 
 new Vue({

components/icon/index.zh-CN.md

@@ -23,7 +23,7 @@
 
 更多讨论可参考：[#10353](https://github.com/ant-design/ant-design/issues/10353)。
 
-> ⚠️ 1.2.0 之后我们全量引入了所有图标，导致 antd 默认的包体积有一定增加，我们会在不远的未来增加新的 API 来实现图标的按需使用，更多相关讨论可关注：[#12011](https://github.com/ant-design/ant-design/issues/12011)。在此之前，你可以通过来自社区同学的 [webpack 插件](https://github.com/Beven91/webpack-ant-icon-loader)将图标文件拆分。
+> ⚠️ 1.2.0 之后我们全量引入了所有图标，导致 ant-design-vue 默认的包体积有一定增加，我们会在不远的未来增加新的 API 来实现图标的按需使用，更多相关讨论可关注：[#12011](https://github.com/ant-design/ant-design/issues/12011)。在此之前，你可以通过来自社区同学的 [webpack 插件](https://github.com/Beven91/webpack-ant-icon-loader)将图标文件拆分。
 
 其中 `theme`, `component`, `twoToneColor` 是 `1.2.x` 版本新增加的属性。最佳实践是给使用的 `<Icon />` 组件传入属性 `theme` 以明确图标的主题风格。例如：
 

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Slider should show tooltip when hovering slider handler 1`] = `
 <div>
-  <div class="ant-tooltip  ant-tooltip-placement-top" style="left: -999px; top: -1003px; transform-origin: 50% 4px;">
+  <div class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top" style="left: -999px; top: -1003px; transform-origin: 50% 4px;">
     <div class="ant-tooltip-content">
       <div class="ant-tooltip-arrow"></div>
       <div role="tooltip" class="ant-tooltip-inner">30</div>
@@ -13,7 +13,7 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
 
 exports[`Slider should show tooltip when hovering slider handler 2`] = `
 <div>
-  <div class="ant-tooltip  ant-tooltip-placement-top" style="display: none;">
+  <div class="ant-tooltip ant-slider-tooltip ant-tooltip-placement-top" style="display: none;">
     <div class="ant-tooltip-content">
       <div class="ant-tooltip-arrow"></div>
       <div role="tooltip" class="ant-tooltip-inner">30</div>

components/slider/__tests__/__snapshots__/index.test.js.snap

@@ -1,8 +1,10 @@
 import { mount } from '@vue/test-utils';
 import { asyncExpect } from '@/tests/utils';
 import Slider from '..';
+import mountTest from '../../../tests/shared/mountTest';
 
 describe('Slider', () => {
+  mountTest(Slider);
   it('should show tooltip when hovering slider handler', async () => {
     const wrapper = mount(Slider, {
       propsData: {

components/slider/__tests__/index.test.js

@@ -7,6 +7,7 @@ import Event from './event.md';
 import Mark from './mark.md';
 import Vertical from './vertical.md';
 import ShowTooltip from './show-tooltip.md';
+import Reverse from './reverse';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 
@@ -40,6 +41,7 @@ export default {
         <Mark />
         <Vertical />
         <ShowTooltip />
+        <Reverse />
         <api>
           <template slot="cn">
             <CN />

components/slider/demo/index.vue

@@ -0,0 +1,33 @@
+<cn>
+#### 反向
+设置 `reverse` 可以将滑动条置反。
+</cn>
+
+<us>
+#### Reverse
+Using `reverse` to render slider reversely.
+</us>
+
+```tpl
+<template>
+  <div>
+    <a-slider :defaultValue="30" :reverse="reverse" />
+    <a-slider range :defaultValue="[20, 50]" :reverse="reverse" />
+    Reversed: <a-switch size="small" :checked="reverse" @change="handleReverseChange" />
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        reverse: true,
+      };
+    },
+    methods: {
+      handleReverseChange(reverse) {
+        this.reverse = reverse;
+      },
+    },
+  };
+</script>
+```

components/slider/demo/reverse.md

@@ -11,13 +11,13 @@ The vertical Slider.
 ```tpl
 <template>
   <div style="height: 300px">
-    <div style="float:left;height: 300px;marginLeft: 70px">
+    <div style="display: inline-block;height: 300px;marginLeft: 70px">
       <a-slider vertical :defaultValue="30" />
     </div>
-    <div style="float:left;height: 300px;marginLeft: 70px">
+    <div style="display: inline-block;height: 300px;marginLeft: 70px">
       <a-slider vertical range :step="10" :defaultValue="[20, 50]" />
     </div>
-    <div style="float:left;height: 300px;marginLeft: 70px">
+    <div style="display: inline-block;height: 300px;marginLeft: 70px">
       <a-slider vertical range :marks="marks" :defaultValue="[26, 37]" />
     </div>
   </div>

components/slider/demo/vertical.md

@@ -1,21 +1,24 @@
 ## API
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| autoFocus | get focus when component mounted | boolean | false |
-| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | 0 or \[0, 0] |
-| disabled | If true, the slider will not be interactable. | boolean | false |
-| dots | Whether the thumb can drag over tick only. | boolean | false |
-| included | Make effect when `marks` not null，`true` means containment and `false` means coordinative | boolean | true |
-| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style. | object | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } or { number: () => VNode } |
-| max | The maximum value the slider can slide to | number | 100 |
-| min | The minimum value the slider can slide to. | number | 0 |
-| range | dual thumb mode | boolean | false |
-| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1 |
-| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY |
-| value(v-model) | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] |  |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| autoFocus | get focus when component mounted | boolean | false |  |
+| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | 0 or \[0, 0] |  |
+| disabled | If true, the slider will not be interactable. | boolean | false |  |
+| dots | Whether the thumb can drag over tick only. | boolean | false |  |
+| included | Make effect when `marks` not null，`true` means containment and `false` means coordinative | boolean | true |  |
+| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style. | object | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } or { number: () => VNode } |  |
+| max | The maximum value the slider can slide to | number | 100 |  |
+| min | The minimum value the slider can slide to. | number | 0 |  |
+| range | dual thumb mode | boolean | false |  |
+| reverse | reverse the component | boolean | false | 1.5.0 |
+| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1 |  |
+| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY |  |
+| value(v-model) | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] |  |  |
 | vertical | If true, the slider will be vertical. | Boolean | false |
-| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean |  |
+| tooltipPlacement | Set Tooltip display position. Ref [`Tooltip`](/components/tooltip/). | string |  | 1.5.0 |
+| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean |  |  |
+| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body. | Function | () => document.body | 1.5.0 |
 
 ### events