feat(slider): add changeEnd event (#217)

* feat(slider): add changeEnd event * feat(slider): add changeEnd event * feat(slider): add changeEnd event * chore: use pnpm
TDesignOteam · Dec 21, 2023 · ff028f0 · ff028f0
1 parent fd2a06b
commit ff028f0
Show file tree

Hide file tree

Showing 16 changed files with 614 additions and 8,209 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-react/src/slider/defaultProps.ts b/packages/products/tdesign-react/src/slider/defaultProps.ts
@@ -0,0 +1,18 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdSliderProps } from './type';
+
+export const sliderDefaultProps: TdSliderProps = {
+  disabled: false,
+  inputNumberProps: false,
+  label: true,
+  layout: 'horizontal',
+  max: 100,
+  min: 0,
+  range: false,
+  showStep: false,
+  step: 1,
+  defaultValue: 0,
+};
diff --git a/packages/products/tdesign-react/src/slider/slider.en-US.md b/packages/products/tdesign-react/src/slider/slider.en-US.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Slider Props
 
 name | type | default | description | required
@@ -11,7 +10,7 @@ style | Object | - | 样式，Typescript：`React.CSSProperties` | N
 disabled | Boolean | false | \- | N
 inputNumberProps | Boolean / Object | false | Typescript：`boolean \| InputNumberProps`，[InputNumber API Documents](./input-number?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N
 label | TNode | true | Typescript：`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-layout | String | horizontal | options：vertical/horizontal | N
+layout | String | horizontal | options: vertical/horizontal | N
 marks | Object / Array | - | Typescript：`Array<number> \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N
 max | Number | 100 | \- | N
 min | Number | 0 | \- | N
@@ -22,3 +21,4 @@ tooltipProps | Object | - | Typescript：`TooltipProps`，[Tooltip API Documents
 value | Number / Array | 0 | Typescript：`SliderValue` `type SliderValue = number \| Array<number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/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-react/blob/develop/src/slider/type.ts) | N
 onChange | Function |  | Typescript：`(value: SliderValue) => void`<br/> | N
+onChangeEnd | Function |  | Typescript：`(value: SliderValue) => void`<br/>triggered when the mouse button is released after dragging or clicking on the slider bar. It is suitable for scenarios where you do not want the callback to be triggered frequently during the process of dragging the slider | N
diff --git a/packages/products/tdesign-react/src/slider/slider.md b/packages/products/tdesign-react/src/slider/slider.md
@@ -1,7 +1,6 @@
 :: BASE_DOC ::
 
 ## API
-
 ### Slider Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
@@ -22,3 +21,4 @@ tooltipProps | Object | - | 透传提示组件属性。TS 类型：`TooltipProps
 value | Number / Array | 0 | 滑块值。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N
 defaultValue | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/slider/type.ts) | N
 onChange | Function |  | TS 类型：`(value: SliderValue) => void`<br/>滑块值变化时触发 | N
+onChangeEnd | Function |  | TS 类型：`(value: SliderValue) => void`<br/>松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用 | N
diff --git a/packages/products/tdesign-react/src/slider/type.ts b/packages/products/tdesign-react/src/slider/type.ts
@@ -0,0 +1,89 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { InputNumberProps } from '../input-number';
+import { TooltipProps } from '../tooltip';
+import { TNode } from '../common';
+
+export interface TdSliderProps {
+  /**
+   * 是否禁用组件
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 用于控制数字输入框组件，值为 false 表示不显示数字输入框；值为 true 表示呈现默认数字输入框；值类型为 Object 表示透传属性到数字输入框组件
+   * @default false
+   */
+  inputNumberProps?: boolean | InputNumberProps;
+  /**
+   * 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值
+   * @default true
+   */
+  label?: string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>;
+  /**
+   * 滑块布局方向
+   * @default horizontal
+   */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`
+   */
+  marks?: Array<number> | SliderMarks;
+  /**
+   * 滑块范围最大值
+   * @default 100
+   */
+  max?: number;
+  /**
+   * 滑块范围最小值
+   * @default 0
+   */
+  min?: number;
+  /**
+   * 双游标滑块
+   * @default false
+   */
+  range?: boolean;
+  /**
+   * 控制步长刻度值显示
+   * @default false
+   */
+  showStep?: boolean;
+  /**
+   * 步长
+   * @default 1
+   */
+  step?: number;
+  /**
+   * 透传提示组件属性
+   */
+  tooltipProps?: TooltipProps;
+  /**
+   * 滑块值
+   * @default 0
+   */
+  value?: SliderValue;
+  /**
+   * 滑块值，非受控属性
+   * @default 0
+   */
+  defaultValue?: SliderValue;
+  /**
+   * 滑块值变化时触发
+   */
+  onChange?: (value: SliderValue) => void;
+  /**
+   * 松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用
+   */
+  onChangeEnd?: (value: SliderValue) => void;
+}
+
+export interface SliderMarks {
+  [mark: number]: string | TNode<{ value: number }>;
+}
+
+export type SliderValue = number | Array<number>;
diff --git a/packages/products/tdesign-vue-next/src/slider/props.ts b/packages/products/tdesign-vue-next/src/slider/props.ts
@@ -0,0 +1,77 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdSliderProps } from './type';
+import { PropType } from 'vue';
+
+export default {
+  /** 是否禁用组件 */
+  disabled: Boolean,
+  /** 用于控制数字输入框组件，值为 false 表示不显示数字输入框；值为 true 表示呈现默认数字输入框；值类型为 Object 表示透传属性到数字输入框组件 */
+  inputNumberProps: {
+    type: [Boolean, Object] as PropType<TdSliderProps['inputNumberProps']>,
+    default: false as TdSliderProps['inputNumberProps'],
+  },
+  /** 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值 */
+  label: {
+    type: [String, Boolean, Function] as PropType<TdSliderProps['label']>,
+    default: true as TdSliderProps['label'],
+  },
+  /** 滑块布局方向 */
+  layout: {
+    type: String as PropType<TdSliderProps['layout']>,
+    default: 'horizontal' as TdSliderProps['layout'],
+    validator(val: TdSliderProps['layout']): boolean {
+      if (!val) return true;
+      return ['vertical', 'horizontal'].includes(val);
+    },
+  },
+  /** 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }` */
+  marks: {
+    type: [Object, Array] as PropType<TdSliderProps['marks']>,
+  },
+  /** 滑块范围最大值 */
+  max: {
+    type: Number,
+    default: 100,
+  },
+  /** 滑块范围最小值 */
+  min: {
+    type: Number,
+    default: 0,
+  },
+  /** 双游标滑块 */
+  range: Boolean,
+  /** 控制步长刻度值显示 */
+  showStep: Boolean,
+  /** 步长 */
+  step: {
+    type: Number,
+    default: 1,
+  },
+  /** 透传提示组件属性 */
+  tooltipProps: {
+    type: Object as PropType<TdSliderProps['tooltipProps']>,
+  },
+  /** 滑块值 */
+  value: {
+    type: [Number, Array] as PropType<TdSliderProps['value']>,
+    default: undefined as TdSliderProps['value'],
+  },
+  modelValue: {
+    type: [Number, Array] as PropType<TdSliderProps['value']>,
+    default: undefined as TdSliderProps['value'],
+  },
+  /** 滑块值，非受控属性 */
+  defaultValue: {
+    type: [Number, Array] as PropType<TdSliderProps['defaultValue']>,
+    default: 0 as TdSliderProps['defaultValue'],
+  },
+  /** 滑块值变化时触发 */
+  onChange: Function as PropType<TdSliderProps['onChange']>,
+  /** 松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用 */
+  onChangeEnd: Function as PropType<TdSliderProps['onChangeEnd']>,
+};
diff --git a/packages/products/tdesign-vue-next/src/slider/slider.en-US.md b/packages/products/tdesign-vue-next/src/slider/slider.en-US.md
@@ -0,0 +1,29 @@
+:: BASE_DOC ::
+
+## API
+### Slider Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+disabled | Boolean | false | \- | N
+inputNumberProps | Boolean / Object | false | Typescript：`boolean \| InputNumberProps`，[InputNumber API Documents](./input-number?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
+label | String / Boolean / Slot / Function | true | Typescript：`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+layout | String | horizontal | options: vertical/horizontal | N
+marks | Object / Array | - | Typescript：`Array<number> \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
+max | Number | 100 | \- | N
+min | Number | 0 | \- | N
+range | Boolean | false | \- | N
+showStep | Boolean | false | \- | N
+step | Number | 1 | \- | N
+tooltipProps | Object | - | Typescript：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | 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-vue-next/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-vue-next/tree/develop/src/slider/type.ts) | N
+onChange | Function |  | Typescript：`(value: SliderValue) => void`<br/> | N
+onChangeEnd | Function |  | Typescript：`(value: SliderValue) => void`<br/>triggered when the mouse button is released after dragging or clicking on the slider bar. It is suitable for scenarios where you do not want the callback to be triggered frequently during the process of dragging the slider | N
+
+### Slider Events
+
+name | params | description
+-- | -- | --
+change | `(value: SliderValue)` | \-
+change-end | `(value: SliderValue)` | triggered when the mouse button is released after dragging or clicking on the slider bar. It is suitable for scenarios where you do not want the callback to be triggered frequently during the process of dragging the slider
diff --git a/packages/products/tdesign-vue-next/src/slider/slider.md b/packages/products/tdesign-vue-next/src/slider/slider.md
@@ -0,0 +1,29 @@
+:: BASE_DOC ::
+
+## API
+### Slider Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+disabled | Boolean | false | 是否禁用组件 | N
+inputNumberProps | Boolean / Object | false | 用于控制数字输入框组件，值为 false 表示不显示数字输入框；值为 true 表示呈现默认数字输入框；值类型为 Object 表示透传属性到数字输入框组件。TS 类型：`boolean \| InputNumberProps`，[InputNumber API Documents](./input-number?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
+label | String / Boolean / Slot / Function | true | 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string \| boolean \| TNode<{ value: SliderValue; position?: 'start' \| 'end' }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts) | N
+layout | String | horizontal | 滑块布局方向。可选项：vertical/horizontal | N
+marks | Object / Array | - | 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`。TS 类型：`Array<number> \| SliderMarks` `interface SliderMarks { [mark: number]: string \| TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
+max | Number | 100 | 滑块范围最大值 | N
+min | Number | 0 | 滑块范围最小值 | N
+range | Boolean | false | 双游标滑块 | N
+showStep | Boolean | false | 控制步长刻度值显示 | N
+step | Number | 1 | 步长 | N
+tooltipProps | Object | - | 透传提示组件属性。TS 类型：`TooltipProps`，[Tooltip API Documents](./tooltip?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
+value | Number / Array | 0 | 滑块值。支持语法糖 `v-model` 或 `v-model:value`。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
+defaultValue | Number / Array | 0 | 滑块值。非受控属性。TS 类型：`SliderValue` `type SliderValue = number \| Array<number>`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/slider/type.ts) | N
+onChange | Function |  | TS 类型：`(value: SliderValue) => void`<br/>滑块值变化时触发 | N
+onChangeEnd | Function |  | TS 类型：`(value: SliderValue) => void`<br/>松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用 | N
+
+### Slider Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: SliderValue)` | 滑块值变化时触发
+change-end | `(value: SliderValue)` | 松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用
diff --git a/packages/products/tdesign-vue-next/src/slider/type.ts b/packages/products/tdesign-vue-next/src/slider/type.ts
@@ -0,0 +1,94 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { InputNumberProps } from '../input-number';
+import { TooltipProps } from '../tooltip';
+import { TNode } from '../common';
+
+export interface TdSliderProps {
+  /**
+   * 是否禁用组件
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 用于控制数字输入框组件，值为 false 表示不显示数字输入框；值为 true 表示呈现默认数字输入框；值类型为 Object 表示透传属性到数字输入框组件
+   * @default false
+   */
+  inputNumberProps?: boolean | InputNumberProps;
+  /**
+   * 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值
+   * @default true
+   */
+  label?: string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>;
+  /**
+   * 滑块布局方向
+   * @default horizontal
+   */
+  layout?: 'vertical' | 'horizontal';
+  /**
+   * 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`
+   */
+  marks?: Array<number> | SliderMarks;
+  /**
+   * 滑块范围最大值
+   * @default 100
+   */
+  max?: number;
+  /**
+   * 滑块范围最小值
+   * @default 0
+   */
+  min?: number;
+  /**
+   * 双游标滑块
+   * @default false
+   */
+  range?: boolean;
+  /**
+   * 控制步长刻度值显示
+   * @default false
+   */
+  showStep?: boolean;
+  /**
+   * 步长
+   * @default 1
+   */
+  step?: number;
+  /**
+   * 透传提示组件属性
+   */
+  tooltipProps?: TooltipProps;
+  /**
+   * 滑块值
+   * @default 0
+   */
+  value?: SliderValue;
+  /**
+   * 滑块值，非受控属性
+   * @default 0
+   */
+  defaultValue?: SliderValue;
+  /**
+   * 滑块值
+   * @default 0
+   */
+  modelValue?: SliderValue;
+  /**
+   * 滑块值变化时触发
+   */
+  onChange?: (value: SliderValue) => void;
+  /**
+   * 松开拖动`mouseup` 或点击滑块条时触发，适合不希望在拖动滑块过程频繁触发回调的场景实用
+   */
+  onChangeEnd?: (value: SliderValue) => void;
+}
+
+export interface SliderMarks {
+  [mark: number]: string | TNode<{ value: number }>;
+}
+
+export type SliderValue = number | Array<number>;