Merge pull request #714 from Tencent/fix/slider-inputnumber-props

fix(slider): inputnumberProps
Tencent · Apr 7, 2022 · 1d7445b · 1d7445b
2 parents d0f00b7 + 926fc9b
commit 1d7445b
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 89 deletions.
diff --git a/examples/slider/demos/base.vue b/examples/slider/demos/base.vue
@@ -5,7 +5,7 @@
     </div>
 
     <div class="block">
-      <t-slider v-model="value2" range :tooltipProps="{}"/>
+      <t-slider v-model="value2" range :tooltipProps="{}" :label="renderLabel" />
     </div>
   </div>
 </template>
@@ -18,6 +18,12 @@ export default {
       tooltipProps: {},
     };
   },
+  methods: {
+    renderLabel(h, { value, position }) {
+      console.log(`the position is ${position}`);
+      return `${value}`;
+    },
+  },
 };
 </script>
 <style>

diff --git a/examples/slider/demos/input-number.vue b/examples/slider/demos/input-number.vue
@@ -16,7 +16,7 @@ export default {
     return {
       value1: 12,
       value2: [30, 70],
-      inputNumberProps: { theme: 'column' },
+      inputNumberProps: { theme: 'column', autoWidth: true },
     };
   },
 };

diff --git a/examples/slider/slider.md b/examples/slider/slider.md
@@ -7,9 +7,9 @@
 -- | -- | -- | -- | --
 disabled | Boolean | false | 是否禁用组件 | N
 inputNumberProps | Boolean / Object | false | 用于控制数字输入框组件，值为 false 表示不显示数字输入框；值为 true 表示呈现默认数字输入框；值类型为 Object 表示透传属性到数字输入框组件。TS 类型：`InputNumberProps`，[InputNumber API Documents](./input-number?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N
-label | String / Boolean / Slot / Function | false | 滑块当前值文本。值为 true 显示默认文案，值为 false 不显示滑块当前值文本，值为 `\${value}%` 则表示组件会根据占位符渲染文案。TS 类型：`string | boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.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/blob/develop/src/common.ts) | N
 layout | String | horizontal | 滑块布局方向。可选项：vertical/horizontal | N
-marks | Object / Array | - | 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h, val) => <button>{val}</button> }`。TS 类型：`Array<number> | SliderMarks` `interface SliderMarks { [mark: number]: string | TNode<{ value: number }> }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | 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/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/slider/type.ts) | N
 max | Number | 100 | 滑块范围最大值 | N
 min | Number | 0 | 滑块范围最小值 | N
 range | Boolean | false | 双游标滑块 | N

diff --git a/src/_common b/src/_common
diff --git a/src/slider/props.ts b/src/slider/props.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-09 11:17:31
  * */
 
 import { TdSliderProps } from './type';
@@ -16,20 +15,21 @@ export default {
     type: [Boolean, Object] as PropType<TdSliderProps['inputNumberProps']>,
     default: false,
   },
-  /** 滑块当前值文本。值为 true 显示默认文案，值为 false 不显示滑块当前值文本，值为 `\${value}%` 则表示组件会根据占位符渲染文案 */
+  /** 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值 */
   label: {
     type: [String, Boolean, Function] as PropType<TdSliderProps['label']>,
-    default: false,
+    default: true,
   },
   /** 滑块布局方向 */
   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, val) => <button>{val}</button> }` */
+  /** 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }` */
   marks: {
     type: [Object, Array] as PropType<TdSliderProps['marks']>,
   },

diff --git a/src/slider/slider-button.tsx b/src/slider/slider-button.tsx
@@ -7,6 +7,7 @@ import ITooltip from '../tooltip/tooltip';
 import { getIEVersion } from '../_common/js/utils/helper';
 import { TdSliderProps } from './type';
 import { TdTooltipProps } from '../tooltip/type';
+import { renderTNodeJSXDefault } from '../utils/render-tnode';
 
 const name = `${prefix}-slider-button`;
 interface SliderInstanceType extends Vue {
@@ -34,6 +35,17 @@ export default (Vue as VueConstructor<SliderInstanceType>).extend({
       type: [Boolean, Object] as PropType<TdSliderProps['tooltipProps']>,
       default: true,
     },
+    label: {
+      type: [String, Function, Boolean] as PropType<TdSliderProps['label']>,
+      default: true,
+    },
+    range: {
+      type: Boolean,
+      default: false,
+    },
+    position: {
+      type: String,
+    },
   },
   inject: {
     slider: { default: undefined },
@@ -50,9 +62,6 @@ export default (Vue as VueConstructor<SliderInstanceType>).extend({
     rangeDiff(): number {
       return this.max - this.min;
     },
-    formatValue(): TdSliderProps['value'] {
-      return this.value;
-    },
     disabled(): boolean {
       return this.slider.disabled;
     },
@@ -110,6 +119,17 @@ export default (Vue as VueConstructor<SliderInstanceType>).extend({
     this.handleIE();
   },
   methods: {
+    getTooltipContent() {
+      if (typeof this.label === 'boolean') return String(this.value);
+      return renderTNodeJSXDefault(this, 'label', {
+        params: this.range
+          ? {
+            value: this.value,
+            position: this.position,
+          }
+          : { value: this.value },
+      });
+    },
     setTooltipProps() {
       if (this.tooltipProps instanceof Object) {
         const {
@@ -290,6 +310,7 @@ export default (Vue as VueConstructor<SliderInstanceType>).extend({
       return str === undefined || str === null;
     },
   },
+
   render(): VNode {
     return (
       <div
@@ -306,7 +327,12 @@ export default (Vue as VueConstructor<SliderInstanceType>).extend({
         onblur={this.handleMouseLeave}
         onKeydown={this.onNativeKeyDown}
       >
-        <Tooltip ref="tooltip" props={this.getTooltipProps()} visible={this.visible} content={String(this.formatValue)}>
+        <Tooltip
+          ref="tooltip"
+          props={this.getTooltipProps()}
+          visible={this.label && this.visible}
+          content={this.getTooltipContent}
+        >
           <div class={[`${prefix}-slider__button`, { [`${prefix}-slider__button--dragging`]: this.dragging }]} />
         </Tooltip>
       </div>

diff --git a/src/slider/slider.tsx b/src/slider/slider.tsx
@@ -71,7 +71,7 @@ export default Vue.extend({
       ];
     },
     sliderRailClass(): ClassName {
-      return [`${name}__rail`, { 'show-input': this.inputNumberProps, disabled: this.tDisabled }];
+      return [`${name}__rail`, { 'show-input': this.inputNumberProps, [`${prefix}-is-disabled`]: this.tDisabled }];
     },
     sliderNumberClass(): ClassName {
       return [
@@ -136,8 +136,8 @@ export default Vue.extend({
       return Math.max(this.firstValue, this.secondValue);
     },
     barSize(): string {
-      const cuttentDiff = this.range ? this.maxValue - this.minValue : this.prevValue - this.min;
-      return `${(100 * cuttentDiff) / this.rangeDiff}%`;
+      const diff = this.range ? this.maxValue - this.minValue : this.prevValue - this.min;
+      return `${(100 * diff) / this.rangeDiff}%`;
     },
     barStart(): string {
       return this.range ? `${(100 * (this.minValue - this.min)) / this.rangeDiff}%` : '0%';
@@ -163,6 +163,20 @@ export default Vue.extend({
           left: this.barStart,
         };
     },
+    calcInputNumberProps(): object {
+      const defaultInputNumberProps = {
+        decimalPlaces: 0,
+        placeholder: '',
+        theme: 'column',
+      };
+      if (typeof this.inputNumberProps === 'object') {
+        return {
+          ...defaultInputNumberProps,
+          ...this.inputNumberProps,
+        };
+      }
+      return defaultInputNumberProps;
+    },
   },
   watch: {
     value(newVal: SliderValue) {
@@ -258,28 +272,6 @@ export default Vue.extend({
       this.prevValue = prevValue;
       return prevValue;
     },
-    setInputProps(): void {
-      if (this.inputNumberProps instanceof Object) {
-        const {
-          decimalPlaces: inputDecimalPlaces,
-          format: inputFormat,
-          placeholder: inputPlaceholder,
-          theme: inputTheme,
-        } = this.inputNumberProps;
-        if (typeof inputDecimalPlaces === 'number' && !isNaN(inputDecimalPlaces)) {
-          this.inputDecimalPlaces = inputDecimalPlaces;
-        }
-        if (inputPlaceholder) {
-          this.inputPlaceholder = inputPlaceholder;
-        }
-        if (typeof inputFormat === 'function') {
-          this.inputFormat = inputFormat;
-        }
-        if (['column', 'row', 'normal'].includes(inputTheme)) {
-          this.inputTheme = inputTheme;
-        }
-      }
-    },
     // 相应button的位置
     setPosition(percent: number): void {
       let targetValue = (percent * this.rangeDiff) / 100;
@@ -352,7 +344,7 @@ export default Vue.extend({
             <div>
               {this.markList.map((item, index) => (
                 <div
-                  class={`${name}__stop ${name}__mark-stop`}
+                  class={[`${name}__stop`, `${name}__mark-stop`]}
                   style={this.getStopStyle(item.position)}
                   key={index}
                 ></div>
@@ -398,10 +390,7 @@ export default Vue.extend({
               disabled={this.tDisabled}
               min={min}
               max={max}
-              decimalPlaces={this.inputDecimalPlaces}
-              format={this.inputFormat}
-              placeholder={this.inputPlaceholder}
-              theme={this.inputTheme}
+              props={this.calcInputNumberProps}
             ></t-input-number>
           }
           {range && <div class={`${name}__center-line`} />}
@@ -414,10 +403,7 @@ export default Vue.extend({
               disabled={this.tDisabled}
               min={min}
               max={max}
-              decimalPlaces={this.inputDecimalPlaces}
-              format={this.inputFormat}
-              placeholder={this.inputPlaceholder}
-              theme={this.inputTheme}
+              props={this.calcInputNumberProps}
             ></t-input-number>
           )}
         </div>
@@ -448,6 +434,9 @@ export default Vue.extend({
               value={range ? this.firstValue : this.prevValue}
               ref="button1"
               disabled={this.tDisabled}
+              label={this.label}
+              range={this.range}
+              position="start"
               tooltip-props={this.tooltipProps}
               onInput={(v: number) => {
                 this.range ? (this.firstValue = v) : (this.prevValue = v);
@@ -459,6 +448,9 @@ export default Vue.extend({
                 v-model={this.secondValue}
                 ref="button2"
                 disabled={this.tDisabled}
+                range={this.range}
+                position="end"
+                label={this.label}
                 tooltip-props={this.tooltipProps}
               ></TSliderButton>
             )}

diff --git a/src/slider/type.ts b/src/slider/type.ts
@@ -2,7 +2,6 @@
 
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
- * updated at 2021-12-09 11:17:31
  * */
 
 import { InputNumberProps } from '../input-number';
@@ -21,17 +20,17 @@ export interface TdSliderProps {
    */
   inputNumberProps?: InputNumberProps;
   /**
-   * 滑块当前值文本。值为 true 显示默认文案，值为 false 不显示滑块当前值文本，值为 `\${value}%` 则表示组件会根据占位符渲染文案
-   * @default false
+   * 滑块当前值文本。<br />值为 true 显示默认文案；值为 false 不显示滑块当前值文本；<br />值为 `${value}%` 则表示组件会根据占位符渲染文案；<br />值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值
+   * @default true
    */
-  label?: string | boolean | TNode;
+  label?: string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>;
   /**
    * 滑块布局方向
    * @default horizontal
    */
   layout?: 'vertical' | 'horizontal';
   /**
-   * 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h, val) => <button>{val}</button> }`
+   * 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => <button>50</button> }`
    */
   marks?: Array<number> | SliderMarks;
   /**
@@ -70,8 +69,10 @@ export interface TdSliderProps {
    * 滑块值变化时触发
    */
   onChange?: (value: SliderValue) => void;
-};
+}
 
-export interface SliderMarks { [mark: number]: string | TNode<{ value: number }> };
+export interface SliderMarks {
+  [mark: number]: string | TNode<{ value: number }>;
+}
 
 export type SliderValue = number | Array<number>;