Skip to content

Commit f0e5da3

Browse files
tangjinzhoutangjinzhou
committed
feat: slider deprecated tooltipVisible
1 parent 2f04932 commit f0e5da3

File tree

5 files changed

+69
-51
lines changed

5 files changed

+69
-51
lines changed

‎components/slider/SliderTooltip.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ export default defineComponent({
2525
}
2626
const align = () => {
2727
cancelKeepAlign();
28-
if (props.visible) {
28+
if (props.open) {
2929
keepAlign();
3030
}
3131
};
3232
watch(
33-
[() => props.visible, () => props.title],
33+
[() => props.open, () => props.title],
3434
() => {
3535
align();
3636
},

‎components/slider/demo/show-tooltip.vue

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ title:
88

99
## zh-CN
1010

11-
当 `tooltipVisible` 为 `true` 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。
11+
当 `tooltipOpen` 为 `true` 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。
1212

1313
## en-US
1414

15-
When `tooltipVisible` is `true`, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
15+
When `tooltipOpen` is `true`, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
1616
</docs>
1717

1818
<template>
19-
<a-slider v-model:value="value" :tooltip-visible="true" />
19+
<a-slider v-model:value="value" :tooltip-open="true" />
2020
</template>
2121
<script lang="ts">
2222
import { defineComponent, ref } from 'vue';

‎components/slider/index.en-US.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
category: Components
33
type: Data Entry
44
title: Slider
5-
cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
5+
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_4heQaUrFn4AAAAAAAAAAAAADrJ8AQ/original
66
---
77

88
A Slider component for displaying current value and intervals in range.
@@ -16,9 +16,8 @@ To input a value in a range.
1616
| Property | Description | Type | Default | Version |
1717
| --- | --- | --- | --- | --- |
1818
| autofocus | get focus when component mounted | boolean | false | |
19-
| disabled | If true, the slider will not be interactable. | boolean | false | |
19+
| disabled | If true, the slider will not be intractable. | boolean | false | |
2020
| dots | Whether the thumb can drag over tick only. | boolean | false | |
21-
| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body. | Function | () => document.body | 1.5.0 |
2221
| handleStyle | The style of slider handle | CSSProperties | - | |
2322
| included | Make effect when `marks` not null，`true` means containment and `false` means coordinative | boolean | true | |
2423
| mark | Custom tick mark of Slider, | v-slot:mark | { point: number, label: any } | 3.0 |
@@ -28,12 +27,13 @@ To input a value in a range.
2827
| range | dual thumb mode | boolean | false | |
2928
| reverse | reverse the component | boolean | false | 1.5.0 |
3029
| 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 | |
31-
| 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 | |
32-
| tooltipPlacement | Set Tooltip display position. Ref [`Tooltip`](/components/tooltip/). | string | | 1.5.0 |
33-
| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean | | |
3430
| trackStyle | The style of slider track | CSSProperties | - | |
3531
| value(v-model) | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | | |
3632
| vertical | If true, the slider will be vertical. | Boolean | false | |
33+
| 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 | |
34+
| tooltipPlacement | Set Tooltip display position. Ref [`Tooltip`](/components/tooltip/). | string | | 1.5.0 |
35+
| tooltipOpen | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean | | 4.0 |
36+
| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body. | Function | () => document.body | 1.5.0 |
3737

3838
### events
3939

‎components/slider/index.tsx

+53-35
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1-
import type { CSSProperties, VNodeTypes, PropType, ExtractPropTypes } from 'vue';
1+
import type { CSSProperties, VNodeTypes, ExtractPropTypes } from 'vue';
22
import { computed, ref, defineComponent } from 'vue';
33
import VcSlider from '../vc-slider/src/Slider';
44
import VcRange from '../vc-slider/src/Range';
55
import VcHandle from '../vc-slider/src/Handle';
66
import type { VueNode } from '../_util/type';
7-
import { withInstall } from '../_util/type';
7+
import {
8+
stringType,
9+
booleanType,
10+
someType,
11+
objectType,
12+
withInstall,
13+
functionType,
14+
} from '../_util/type';
815
import type { TooltipPlacement } from '../tooltip/Tooltip';
916
import useConfigInject from '../config-provider/hooks/useConfigInject';
1017
import SliderTooltip from './SliderTooltip';
@@ -14,6 +21,7 @@ import type { FocusEventHandler } from '../_util/EventInterface';
1421

1522
// CSSINJS
1623
import useStyle from './style';
24+
import devWarning from '../vc-util/devWarning';
1725

1826
export type SliderValue = number | [number, number];
1927

@@ -46,35 +54,35 @@ export const sliderProps = () => ({
4654
id: String,
4755
prefixCls: String,
4856
tooltipPrefixCls: String,
49-
range: { type: [Boolean, Object] as PropType<boolean | SliderRange>, default: undefined },
50-
reverse: { type: Boolean, default: undefined },
57+
range: someType<boolean | SliderRange>([Boolean, Object]),
58+
reverse: booleanType(),
5159
min: Number,
5260
max: Number,
53-
step: { type: [Number, Object] as PropType<null | number> },
54-
marks: { type: Object as PropType<SliderMarks> },
55-
dots: { type: Boolean, default: undefined },
56-
value: { type: [Number, Array] as PropType<Value> },
57-
defaultValue: { type: [Number, Array] as PropType<Value> },
58-
included: { type: Boolean, default: undefined },
59-
disabled: { type: Boolean, default: undefined },
60-
vertical: { type: Boolean, default: undefined },
61-
tipFormatter: {
62-
type: [Function, Object] as PropType<((value?: number) => any) | null>,
63-
default: () => defaultTipFormatter,
64-
},
65-
tooltipVisible: { type: Boolean, default: undefined },
66-
tooltipPlacement: { type: String as PropType<TooltipPlacement> },
67-
getTooltipPopupContainer: {
68-
type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
69-
},
70-
autofocus: { type: Boolean, default: undefined },
71-
handleStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
72-
trackStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
73-
onChange: { type: Function as PropType<(value: Value) => void> },
74-
onAfterChange: { type: Function as PropType<(value: Value) => void> },
75-
onFocus: { type: Function as PropType<FocusEventHandler> },
76-
onBlur: { type: Function as PropType<FocusEventHandler> },
77-
'onUpdate:value': { type: Function as PropType<(value: Value) => void> },
61+
step: someType<null | number>([Object, Number]),
62+
marks: objectType<SliderMarks>(),
63+
dots: booleanType(),
64+
value: someType<Value>([Array, Number]),
65+
defaultValue: someType<Value>([Array, Number]),
66+
included: booleanType(),
67+
disabled: booleanType(),
68+
vertical: booleanType(),
69+
tipFormatter: someType<((value?: number) => any) | null>(
70+
[Function, Object],
71+
() => defaultTipFormatter,
72+
),
73+
tooltipOpen: booleanType(),
74+
/** @deprecated `tooltipVisible` is deprecated. Please use `tooltipOpen` instead. */
75+
tooltipVisible: booleanType(),
76+
tooltipPlacement: stringType<TooltipPlacement>(),
77+
getTooltipPopupContainer: functionType<(triggerNode: HTMLElement) => HTMLElement>(),
78+
autofocus: booleanType(),
79+
handleStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
80+
trackStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
81+
onChange: functionType<(value: Value) => void>(),
82+
onAfterChange: functionType<(value: Value) => void>(),
83+
onFocus: functionType<FocusEventHandler>(),
84+
onBlur: functionType<FocusEventHandler>(),
85+
'onUpdate:value': functionType<(value: Value) => void>(),
7886
});
7987

8088
export type SliderProps = Partial<ExtractPropTypes<ReturnType<typeof sliderProps>>>;
@@ -88,6 +96,16 @@ const Slider = defineComponent({
8896
// emits: ['update:value', 'change', 'afterChange', 'blur'],
8997
slots: ['mark'],
9098
setup(props, { attrs, slots, emit, expose }) {
99+
// Warning for deprecated usage
100+
if (process.env.NODE_ENV !== 'production') {
101+
[['tooltipVisible', 'tooltipOpen']].forEach(([deprecatedName, newName]) => {
102+
devWarning(
103+
props.tooltipVisible === undefined,
104+
'Slider',
105+
`\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`,
106+
);
107+
});
108+
}
91109
const { prefixCls, rootPrefixCls, direction, getPopupContainer, configProvider } =
92110
useConfigInject('slider', props);
93111

@@ -97,7 +115,7 @@ const Slider = defineComponent({
97115
const formItemContext = useInjectFormItemContext();
98116
const sliderRef = ref();
99117
const visibles = ref<Visibles>({});
100-
const toggleTooltipVisible = (index: number, visible: boolean) => {
118+
const toggleTooltipOpen = (index: number, visible: boolean) => {
101119
visibles.value[index] = visible;
102120
};
103121
const tooltipPlacement = computed(() => {
@@ -132,14 +150,14 @@ const Slider = defineComponent({
132150
tooltipPrefixCls,
133151
info: { value, dragging, index, ...restProps },
134152
}) => {
135-
const { tipFormatter, tooltipVisible, getTooltipPopupContainer } = props;
153+
const { tipFormatter, tooltipOpen = props.tooltipVisible, getTooltipPopupContainer } = props;
136154
const isTipFormatter = tipFormatter ? visibles.value[index] || dragging : false;
137-
const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
155+
const open = tooltipOpen || (tooltipOpen === undefined && isTipFormatter);
138156
return (
139157
<SliderTooltip
140158
prefixCls={tooltipPrefixCls}
141159
title={tipFormatter ? tipFormatter(value) : ''}
142-
visible={visible}
160+
open={open}
143161
placement={tooltipPlacement.value}
144162
transitionName={`${rootPrefixCls.value}-zoom-down`}
145163
key={index}
@@ -149,8 +167,8 @@ const Slider = defineComponent({
149167
<VcHandle
150168
{...restProps}
151169
value={value}
152-
onMouseenter={() => toggleTooltipVisible(index, true)}
153-
onMouseleave={() => toggleTooltipVisible(index, false)}
170+
onMouseenter={() => toggleTooltipOpen(index, true)}
171+
onMouseleave={() => toggleTooltipOpen(index, false)}
154172
/>
155173
</SliderTooltip>
156174
);

‎components/slider/index.zh-CN.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ category: Components
33
subtitle: 滑动输入条
44
type: 数据录入
55
title: Slider
6-
cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
6+
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_4heQaUrFn4AAAAAAAAAAAAADrJ8AQ/original
77
---
88

99
滑动型输入器，展示当前值和可选范围。
@@ -19,7 +19,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
1919
| autofocus | 自动获取焦点 | boolean | false | |
2020
| disabled | 值为 `true` 时，滑块为禁用状态 | boolean | false | |
2121
| dots | 是否只能拖拽到刻度上 | boolean | false | |
22-
| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上。 | Function | () => document.body | 1.5.0 |
2322
| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true | |
2423
| mark | 自定义刻度标记 | v-slot:mark | { point: number, label: any } | 3.0 |
2524
| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } or { number: () => VNode } | |
@@ -28,11 +27,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
2827
| range | 双滑块模式 | boolean | false | |
2928
| reverse | 反向坐标轴 | boolean | false | 1.5.0 |
3029
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 | |
31-
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY | |
32-
| tooltipPlacement | 设置 Tooltip 展示位置。参考 [`Tooltip`](/components/tooltip/)。 | string | | 1.5.0 |
33-
| tooltipVisible | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean | | |
3430
| value(v-model) | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | | |
3531
| vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false | |
32+
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY | |
33+
| tooltipPlacement | 设置 Tooltip 展示位置。参考 [`Tooltip`](/components/tooltip/)。 | string | | 1.5.0 |
34+
| tooltipOpen | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean | | 4.0 |
35+
| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上。 | Function | () => document.body | 1.5.0 |
3636

3737
### 事件
3838

0 commit comments

Comments
 (0)