feat(slider): support vertical props (#545)

* feat(slider): support vertical props * docs: update --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: anlyyao <anlyyao@tencent.com>
TDesignOteam · Feb 14, 2025 · 41aecec · 41aecec
1 parent d363ba4
commit 41aecec
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 20 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-mobile-react/src/slider/slider.en-US.md b/packages/products/tdesign-mobile-react/src/slider/slider.en-US.md
@@ -2,7 +2,6 @@
 
 ## API
 
-
 ### Slider Props
 
 name | type | default | description | required
@@ -21,5 +20,5 @@ theme | String | default | options: default/capsule | N
 value | Number / Array | 0 | Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/slider/type.ts) | N
 defaultValue | Number / Array | 0 | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/slider/type.ts) | N
 onChange | Function |  | Typescript：`(value: SliderValue) => void`<br/> | N
-onDragend | Function |  | Typescript：`(value: SliderValue, e: TouchEvent) => void`<br/> | N
-onDragstart | Function |  | Typescript：`(e: TouchEvent) => void`<br/> | N
+onDragend | Function |  | Typescript：`(value: SliderValue, context: {e: TouchEvent}) => void`<br/> | N
+onDragstart | Function |  | Typescript：`(context: {e: TouchEvent}) => void`<br/> | N
diff --git a/packages/products/tdesign-mobile-react/src/slider/slider.md b/packages/products/tdesign-mobile-react/src/slider/slider.md
@@ -2,7 +2,6 @@
 
 ## API
 
-
 ### Slider Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -21,5 +20,5 @@ theme | String | default | 滑块风格。可选项：default/capsule | N
 value | Number / Array | 0 | 滑块值。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/slider/type.ts) | N
 defaultValue | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/slider/type.ts) | N
 onChange | Function |  | TS 类型：`(value: SliderValue) => void`<br/>滑块值变化时触发 | N
-onDragend | Function |  | TS 类型：`(value: SliderValue, e: TouchEvent) => void`<br/>结束拖动时触发 | N
-onDragstart | Function |  | TS 类型：`(e: TouchEvent) => void`<br/>开始拖动时触发 | N
+onDragend | Function |  | TS 类型：`(value: SliderValue, context: {e: TouchEvent}) => void`<br/>结束拖动时触发 | N
+onDragstart | Function |  | TS 类型：`(context: {e: TouchEvent}) => void`<br/>开始拖动时触发 | N
diff --git a/packages/products/tdesign-mobile-react/src/slider/type.ts b/packages/products/tdesign-mobile-react/src/slider/type.ts
@@ -68,11 +68,11 @@ export interface TdSliderProps {
   /**
    * 结束拖动时触发
    */
-  onDragend?: (value: SliderValue, e: TouchEvent<HTMLDivElement>) => void;
+  onDragend?: (value: SliderValue, context: { e: TouchEvent<HTMLDivElement> }) => void;
   /**
    * 开始拖动时触发
    */
-  onDragstart?: (e: TouchEvent<HTMLDivElement>) => void;
+  onDragstart?: (context: { e: TouchEvent<HTMLDivElement> }) => void;
 }
 
 export interface SliderMarks {

diff --git a/packages/products/tdesign-mobile-vue/src/slider/props.ts b/packages/products/tdesign-mobile-vue/src/slider/props.ts
@@ -64,6 +64,12 @@ export default {
     type: [Number, Array] as PropType<TdSliderProps['defaultValue']>,
     default: 0,
   },
+  /** 是否是垂直的滑块（渲染垂直滑块时，默认高度为200px，可通过修改`--td-slider-bar-height`来自定义高度） */
+  vertical: Boolean,
   /** 滑块值变化时触发 */
   onChange: Function as PropType<TdSliderProps['onChange']>,
+  /** 结束拖动时触发 */
+  onDragend: Function as PropType<TdSliderProps['onDragend']>,
+  /** 开始拖动时触发 */
+  onDragstart: Function as PropType<TdSliderProps['onDragstart']>,
 };
diff --git a/packages/products/tdesign-mobile-vue/src/slider/slider.en-US.md b/packages/products/tdesign-mobile-vue/src/slider/slider.en-US.md
@@ -17,10 +17,15 @@ step | Number | 1 | \- | N
 theme | String | default | options: default/capsule | N
 value | Number / Array | 0 | `v-model` and `v-model:value` is supported。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
 defaultValue | Number / Array | 0 | uncontrolled property。Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+vertical | Boolean | false | \- | N
 onChange | Function |  | Typescript：`(value: SliderValue) => void`<br/> | N
+onDragend | Function |  | Typescript：`(value: SliderValue, context: {e: TouchEvent}) => void`<br/> | N
+onDragstart | Function |  | Typescript：`(context: {e: TouchEvent}) => void`<br/> | N
 
 ### Slider Events
 
 name | params | description
 -- | -- | --
 change | `(value: SliderValue)` | \-
+dragend | `(value: SliderValue, context: {e: TouchEvent})` | \-
+dragstart | `(context: {e: TouchEvent})` | \-
diff --git a/packages/products/tdesign-mobile-vue/src/slider/slider.md b/packages/products/tdesign-mobile-vue/src/slider/slider.md
@@ -17,10 +17,15 @@ step | Number | 1 | 步长 | N
 theme | String | default | 滑块风格。可选项：default/capsule | N
 value | Number / Array | 0 | 滑块值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
 defaultValue | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/slider/type.ts) | N
+vertical | Boolean | false | 是否是垂直的滑块（渲染垂直滑块时，默认高度为200px，可通过修改`--td-slider-bar-height`来自定义高度） | N
 onChange | Function |  | TS 类型：`(value: SliderValue) => void`<br/>滑块值变化时触发 | N
+onDragend | Function |  | TS 类型：`(value: SliderValue, context: {e: TouchEvent}) => void`<br/>结束拖动时触发 | N
+onDragstart | Function |  | TS 类型：`(context: {e: TouchEvent}) => void`<br/>开始拖动时触发 | N
 
 ### Slider Events
 
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: SliderValue)` | 滑块值变化时触发
+dragend | `(value: SliderValue, context: {e: TouchEvent})` | 结束拖动时触发
+dragstart | `(context: {e: TouchEvent})` | 开始拖动时触发
diff --git a/packages/products/tdesign-mobile-vue/src/slider/type.ts b/packages/products/tdesign-mobile-vue/src/slider/type.ts
@@ -65,10 +65,23 @@ export interface TdSliderProps {
    * @default 0
    */
   modelValue?: SliderValue;
+  /**
+   * 是否是垂直的滑块（渲染垂直滑块时，默认高度为200px，可通过修改`--td-slider-bar-height`来自定义高度）
+   * @default false
+   */
+  vertical?: boolean;
   /**
    * 滑块值变化时触发
    */
   onChange?: (value: SliderValue) => void;
+  /**
+   * 结束拖动时触发
+   */
+  onDragend?: (value: SliderValue, context: { e: TouchEvent }) => void;
+  /**
+   * 开始拖动时触发
+   */
+  onDragstart?: (context: { e: TouchEvent }) => void;
 }
 
 export interface SliderMarks {

diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -102866,6 +102866,43 @@
         "Boolean"
       ]
     },
+    {
+      "id": 1739007105,
+      "platform_framework": [
+        "8"
+      ],
+      "component": "Slider",
+      "field_category": 1,
+      "field_name": "vertical",
+      "field_type": [
+        "4"
+      ],
+      "field_default_value": "false",
+      "field_enum": "",
+      "field_desc_zh": "是否是垂直的滑块（渲染垂直滑块时，默认高度为200px，可通过修改`--td-slider-bar-height`来自定义高度）",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2025-02-08 09:31:45",
+      "update_time": "2025-02-08 09:31:45",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(Mobile)"
+      ],
+      "field_type_text": [
+        "Boolean"
+      ]
+    },
     {
       "id": 1203,
       "platform_framework": [
@@ -102951,9 +102988,6 @@
     {
       "id": 2001,
       "platform_framework": [
-        "8",
-        "16",
-        "32",
         "64"
       ],
       "component": "Slider",
@@ -102980,19 +103014,48 @@
       "support_default_value": 0,
       "field_category_text": "Events",
       "platform_framework_text": [
-        "Vue(Mobile)",
-        "React(Mobile)",
-        "Angular(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": []
     },
     {
-      "id": 2000,
+      "id": 1739523132,
       "platform_framework": [
         "8",
-        "16",
-        "32",
+        "16"
+      ],
+      "component": "Slider",
+      "field_category": 2,
+      "field_name": "dragend",
+      "field_type": [],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "结束拖动时触发",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "(value: SliderValue, context: {e: TouchEvent})",
+      "create_time": "2025-02-14 08:52:12",
+      "update_time": "2025-02-14 08:52:12",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Events",
+      "platform_framework_text": [
+        "Vue(Mobile)",
+        "React(Mobile)"
+      ],
+      "field_type_text": []
+    },
+    {
+      "id": 2000,
+      "platform_framework": [
         "64"
       ],
       "component": "Slider",
@@ -103019,13 +103082,45 @@
       "support_default_value": 0,
       "field_category_text": "Events",
       "platform_framework_text": [
-        "Vue(Mobile)",
-        "React(Mobile)",
-        "Angular(Mobile)",
         "Miniprogram"
       ],
       "field_type_text": []
     },
+    {
+      "id": 1739523112,
+      "platform_framework": [
+        "8",
+        "16"
+      ],
+      "component": "Slider",
+      "field_category": 2,
+      "field_name": "dragstart",
+      "field_type": [],
+      "field_default_value": "",
+      "field_enum": "",
+      "field_desc_zh": "开始拖动时触发",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "(context: {e: TouchEvent})",
+      "create_time": "2025-02-14 08:51:52",
+      "update_time": "2025-02-14 08:51:52",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Events",
+      "platform_framework_text": [
+        "Vue(Mobile)",
+        "React(Mobile)"
+      ],
+      "field_type_text": []
+    },
     {
       "id": 1712043752,
       "platform_framework": [