Feat/new slider (#1192)

* feat(slider): using new style * feat(slider): support capsule theme * feat(slider): optimize capsule theme * fix(slider): update test and logic * test(slider): update snapshot * docs(slider): update
Tencent · Dec 9, 2022 · b7e2d3f · b7e2d3f
1 parent bd26edf
commit b7e2d3f
Show file tree

Hide file tree

Showing 32 changed files with 574 additions and 422 deletions.
diff --git a/src/slider/README.en-US.md b/src/slider/README.en-US.md
@@ -5,18 +5,19 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-colors | Array | ['#0052D9', 'rgba(220, 220, 220, 1)'] | Typescript：`Array<string>` | N
-custom-style `v0.25.0` | String | - | \- | N
+colors | Array | [] | Typescript：`Array<string>` | N
+custom-style | String | - | `0.25.0` | N
 disabled | Boolean | false | \- | N
-disabled-color | Array | ['#bbd3fb', '#dcdcdc'] | Typescript：`Array<string>` | N
+disabled-color | Array | [] | Typescript：`Array<string>` | N
 external-classes | Array | - | `['t-class', 't-class-bar', 't-class-bar-active', 't-class-bar-disabled', 't-class-cursor']` | N
-label | String / Boolean / Slot | false | \- | N
+label | String / Boolean | false | Typescript：`string \| boolean` | N
 marks | Object / Array | {} | Typescript：`Record<number, string> \| Array<number>` | N
 max | Number | 100 | \- | N
 min | Number | 0 | \- | N
 range | Boolean | false | \- | N
 show-extreme-value | Boolean | false | \- | N
 step | Number | 1 | \- | N
+theme | String | default | `0.30.0`。options：default/capsule | N
 value | Number / Array | 0 | Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N
 default-value | Number / Array | undefined | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N
 

diff --git a/src/slider/README.md b/src/slider/README.md
@@ -20,58 +20,54 @@ isComponent: true
 
 <img src="https://tdesign.gtimg.com/miniprogram/readme/slider.png" width="375px" height="50%">
 
-### 类型
+### 组件类型
 
-基础滑动选择器
+单游标滑块
 
 {{ base }}
 
-带数值滑动选择器
+双游标滑块
 
-{{ label }}
+{{ range }}
 
-起始非零滑动选择器
+带数值滑动选择器
 
-{{ max }}
+{{ label }}
 
 带刻度滑动选择器
 
 {{ step }}
 
-区间滑动选择器
-
-{{ range }}
-
-
-### 状态
+### 组件状态
 
-基础滑动选择器
+滑块禁用状态
 
 {{ disabled }}
 
-### 规格
+#### 特殊样式
 
-有标题滑动选择器
+胶囊型滑块
 
-{{ title }}
+{{ capsule }}
 
 ## API
 ### Slider Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
-colors | Array | ['#0052D9', 'rgba(220, 220, 220, 1)'] | 颜色，[已选择, 未选择]。TS 类型：`Array<string>` | N
-custom-style `v0.25.0` | String | - | 自定义组件样式 | N
+colors | Array | [] | 颜色，[已选择, 未选择]。TS 类型：`Array<string>` | N
+custom-style | String | - | `0.25.0`。自定义组件样式 | N
 disabled | Boolean | false | 是否禁用组件 | N
-disabled-color | Array | ['#bbd3fb', '#dcdcdc'] | 禁用状态滑动条的颜色，[已选, 未选]。TS 类型：`Array<string>` | N
+disabled-color | Array | [] | 禁用状态滑动条的颜色，[已选, 未选]。TS 类型：`Array<string>` | N
 external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、滑道底部、滑道激活态、滑道禁用态、游标 等元素类名。`['t-class', 't-class-bar', 't-class-bar-active', 't-class-bar-disabled', 't-class-cursor']` | N
-label | String / Boolean / Slot | false | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值 | N
+label | String / Boolean | false | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean` | N
 marks | Object / Array | {} | 刻度标记，示例：`[0, 10, 40, 200]` 或者 `{ 5:  '5¥', 10: '10%' }`。TS 类型：`Record<number, string> \| Array<number>` | N
 max | Number | 100 | 滑块范围最大值 | N
 min | Number | 0 | 滑块范围最小值 | N
 range | Boolean | false | 双游标滑块 | N
 show-extreme-value | Boolean | false | 是否边界值 | N
 step | Number | 1 | 步长 | N
+theme | String | default | `0.30.0`。滑块风格。可选项：default/capsule | N
 value | Number / Array | 0 | 滑块值。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N
 default-value | Number / Array | undefined | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/slider/type.ts) | N
 

diff --git a/src/slider/__test__/__snapshots__/demo.test.js.snap b/src/slider/__test__/__snapshots__/demo.test.js.snap
@@ -3,50 +3,141 @@
 exports[`Slider Slider base demo works fine 1`] = `
 <base>
   <t-slider
-    colors="{{
+    defaultValue="{{23}}"
+  />
+</base>
+`;
+
+exports[`Slider Slider capsule demo works fine 1`] = `
+<capsule>
+  <t-slider
+    defaultValue="{{30}}"
+    theme="capsule"
+  />
+  <t-slider
+    defaultValue="{{
       Array [
-        "#0052D9",
-        "#E7E7E7",
+        40,
+        60,
+      ]
+    }}"
+    range="{{true}}"
+    theme="capsule"
+  />
+  <t-slider
+    defaultValue="{{
+      Array [
+        40,
+        60,
       ]
     }}"
-    defaultValue="60"
+    label="\${value}"
+    range="{{true}}"
+    theme="capsule"
   />
-</base>
+  <t-slider
+    defaultValue="{{60}}"
+    marks="{{
+      Object {
+        "0": "0",
+        "100": "100",
+        "20": "20",
+        "40": "40",
+        "60": "60",
+        "80": "80",
+      }
+    }}"
+    step="{{20}}"
+    theme="capsule"
+  />
+  <t-slider
+    defaultValue="{{
+      Array [
+        20,
+        80,
+      ]
+    }}"
+    marks="{{
+      Object {
+        "0": "0",
+        "100": "100",
+        "20": "20",
+        "40": "40",
+        "60": "60",
+        "80": "80",
+      }
+    }}"
+    range="{{true}}"
+    step="{{20}}"
+    theme="capsule"
+  />
+</capsule>
 `;
 
 exports[`Slider Slider disabled demo works fine 1`] = `
 <disabled>
   <t-slider
-    colors="{{
+    disabled="{{true}}"
+    value="{{35}}"
+  />
+  <t-slider
+    disabled="{{true}}"
+    label="\${value}"
+    range="{{true}}"
+    showExtremeValue="{{true}}"
+    value="{{
       Array [
-        "#0052D9",
-        "#E7E7E7",
+        40,
+        60,
       ]
     }}"
+  />
+  <t-slider
     disabled="{{true}}"
-    disabledColor="{{
+    marks="{{
+      Object {
+        "0": "0",
+        "100": "100",
+        "20": "20",
+        "40": "40",
+        "60": "60",
+        "80": "80",
+      }
+    }}"
+    range="{{true}}"
+    step="{{20}}"
+    value="{{
       Array [
-        "#BBD3FB",
-        "#E7E7E7",
+        20,
+        60,
       ]
     }}"
-    value="60"
   />
 </disabled>
 `;
 
 exports[`Slider Slider label demo works fine 1`] = `
 <wx-label>
   <t-slider
-    colors="{{
+    label="\${value}"
+    value="{{35}}"
+    bind:change="handleChange"
+  />
+  <wx-view
+    class="demo-desc"
+  >
+    带数值双游标滑块
+  </wx-view>
+  <t-slider
+    defaultValue="{{
       Array [
-        "#0052D9",
-        "#E7E7E7",
+        40,
+        60,
       ]
     }}"
     label="\${value}"
-    value="{{50}}"
-    bind:change="handleChange"
+    range="{{true}}"
+    showExtremeValue="{{true}}"
   />
 </wx-label>
 `;
@@ -71,60 +162,58 @@ exports[`Slider Slider max demo works fine 1`] = `
 exports[`Slider Slider range demo works fine 1`] = `
 <range>
   <t-slider
-    colors="{{
-      Array [
-        "#0052D9",
-        "#E7E7E7",
-      ]
-    }}"
     defaultValue="{{
       Array [
-        30,
-        70,
+        35,
+        65,
       ]
     }}"
-    label="{{true}}"
     range="{{true}}"
-    showExtremeValue="{{true}}"
   />
 </range>
 `;
 
 exports[`Slider Slider step demo works fine 1`] = `
 <step>
   <t-slider
-    defaultValue="{{50}}"
+    defaultValue="{{60}}"
     marks="{{
       Object {
-        "0": "小",
-        "100": "大",
-        "50": "中",
+        "0": "0",
+        "100": "100",
+        "20": "20",
+        "40": "40",
+        "60": "60",
+        "80": "80",
       }
     }}"
-    step="{{50}}"
+    step="{{20}}"
     bind:change="handleChange"
   />
-</step>
-`;
-
-exports[`Slider Slider title demo works fine 1`] = `
-<title>
   <wx-view
-    class="label"
+    class="demo-desc"
   >
-    <wx-view>
-      选择器标题
-    </wx-view>
-    <t-slider
-      class="label-class"
-      colors="{{
-        Array [
-          "#0052D9",
-          "#E7E7E7",
-        ]
-      }}"
-      defaultValue="50"
-    />
+    带刻度双游标滑块
   </wx-view>
-</title>
+  <t-slider
+    defaultValue="{{
+      Array [
+        20,
+        60,
+      ]
+    }}"
+    marks="{{
+      Object {
+        "0": "0",
+        "100": "100",
+        "20": "20",
+        "40": "40",
+        "60": "60",
+        "80": "80",
+      }
+    }}"
+    range="{{true}}"
+    step="{{20}}"
+  />
+</step>
 `;
diff --git a/src/slider/__test__/demo.test.js b/src/slider/__test__/demo.test.js
@@ -5,7 +5,7 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
 
-const mapper = ['base', 'disabled', 'label', 'max', 'range', 'step', 'title'];
+const mapper = ['base', 'capsule', 'disabled', 'label', 'max', 'range', 'step'];
 
 describe('Slider', () => {
   mapper.forEach((demoName) => {