feat: slider deprecated tooltipVisible

components/slider/SliderTooltip.tsx

@@ -25,12 +25,12 @@ export default defineComponent({
     }
     const align = () => {
       cancelKeepAlign();
-      if (props.visible) {
+      if (props.open) {
         keepAlign();
       }
     };
     watch(
-      [() => props.visible, () => props.title],
+      [() => props.open, () => props.title],
       () => {
         align();
       },

components/slider/demo/show-tooltip.vue

@@ -8,15 +8,15 @@ title:
 
 ## zh-CN
 
-当 `tooltipVisible` 为 `true` 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。
+当 `tooltipOpen` 为 `true` 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。
 
 ## en-US
 
-When `tooltipVisible` is `true`, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
+When `tooltipOpen` is `true`, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
 </docs>
 
 <template>
-  <a-slider v-model:value="value" :tooltip-visible="true" />
+  <a-slider v-model:value="value" :tooltip-open="true" />
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';

components/slider/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Entry
 title: Slider
-cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_4heQaUrFn4AAAAAAAAAAAAADrJ8AQ/original
 ---
 
 A Slider component for displaying current value and intervals in range.
@@ -16,9 +16,8 @@ To input a value in a range.
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | autofocus | get focus when component mounted | boolean | false |  |
-| disabled | If true, the slider will not be interactable. | boolean | false |  |
+| disabled | If true, the slider will not be intractable. | boolean | false |  |
 | dots | Whether the thumb can drag over tick only. | boolean | false |  |
-| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body. | Function | () => document.body | 1.5.0 |
 | handleStyle | The style of slider handle | CSSProperties | - |  |
 | included | Make effect when `marks` not null，`true` means containment and `false` means coordinative | boolean | true |  |
 | 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.
 | range | dual thumb mode | boolean | false |  |
 | reverse | reverse the component | boolean | false | 1.5.0 |
 | 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 |  |
-| 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 |  |
-| tooltipPlacement | Set Tooltip display position. Ref [`Tooltip`](/components/tooltip/). | string |  | 1.5.0 |
-| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean |  |  |
 | trackStyle | The style of slider track | CSSProperties | - |  |
 | value(v-model) | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] |  |  |
 | vertical | If true, the slider will be vertical. | Boolean | false |  |
+| 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 |  |
+| tooltipPlacement | Set Tooltip display position. Ref [`Tooltip`](/components/tooltip/). | string |  | 1.5.0 |
+| tooltipOpen | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean |  | 4.0 |
+| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body. | Function | () => document.body | 1.5.0 |
 
 ### events
 

components/slider/index.tsx

@@ -1,10 +1,17 @@
-import type { CSSProperties, VNodeTypes, PropType, ExtractPropTypes } from 'vue';
+import type { CSSProperties, VNodeTypes, ExtractPropTypes } from 'vue';
 import { computed, ref, defineComponent } from 'vue';
 import VcSlider from '../vc-slider/src/Slider';
 import VcRange from '../vc-slider/src/Range';
 import VcHandle from '../vc-slider/src/Handle';
 import type { VueNode } from '../_util/type';
-import { withInstall } from '../_util/type';
+import {
+  stringType,
+  booleanType,
+  someType,
+  objectType,
+  withInstall,
+  functionType,
+} from '../_util/type';
 import type { TooltipPlacement } from '../tooltip/Tooltip';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import SliderTooltip from './SliderTooltip';
@@ -14,6 +21,7 @@ import type { FocusEventHandler } from '../_util/EventInterface';
 
 // CSSINJS
 import useStyle from './style';
+import devWarning from '../vc-util/devWarning';
 
 export type SliderValue = number | [number, number];
 
@@ -46,35 +54,35 @@ export const sliderProps = () => ({
   id: String,
   prefixCls: String,
   tooltipPrefixCls: String,
-  range: { type: [Boolean, Object] as PropType<boolean | SliderRange>, default: undefined },
+  range: someType<boolean | SliderRange>([Boolean, Object]),
-  reverse: { type: Boolean, default: undefined },
+  reverse: booleanType(),
   min: Number,
   max: Number,
-  step: { type: [Number, Object] as PropType<null | number> },
+  step: someType<null | number>([Object, Number]),
-  marks: { type: Object as PropType<SliderMarks> },
+  marks: objectType<SliderMarks>(),
-  dots: { type: Boolean, default: undefined },
+  dots: booleanType(),
-  value: { type: [Number, Array] as PropType<Value> },
+  value: someType<Value>([Array, Number]),
-  defaultValue: { type: [Number, Array] as PropType<Value> },
+  defaultValue: someType<Value>([Array, Number]),
-  included: { type: Boolean, default: undefined },
+  included: booleanType(),
-  disabled: { type: Boolean, default: undefined },
+  disabled: booleanType(),
-  vertical: { type: Boolean, default: undefined },
+  vertical: booleanType(),
-  tipFormatter: {
+  tipFormatter: someType<((value?: number) => any) | null>(
-    type: [Function, Object] as PropType<((value?: number) => any) | null>,
+    [Function, Object],
-    default: () => defaultTipFormatter,
+    () => defaultTipFormatter,
-  },
+  ),
-  tooltipVisible: { type: Boolean, default: undefined },
+  tooltipOpen: booleanType(),
-  tooltipPlacement: { type: String as PropType<TooltipPlacement> },
+  /** @deprecated `tooltipVisible` is deprecated. Please use `tooltipOpen` instead. */
-  getTooltipPopupContainer: {
+  tooltipVisible: booleanType(),
-    type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
+  tooltipPlacement: stringType<TooltipPlacement>(),
-  },
+  getTooltipPopupContainer: functionType<(triggerNode: HTMLElement) => HTMLElement>(),
-  autofocus: { type: Boolean, default: undefined },
+  autofocus: booleanType(),
-  handleStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
+  handleStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
-  trackStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
+  trackStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
-  onChange: { type: Function as PropType<(value: Value) => void> },
+  onChange: functionType<(value: Value) => void>(),
-  onAfterChange: { type: Function as PropType<(value: Value) => void> },
+  onAfterChange: functionType<(value: Value) => void>(),
-  onFocus: { type: Function as PropType<FocusEventHandler> },
+  onFocus: functionType<FocusEventHandler>(),
-  onBlur: { type: Function as PropType<FocusEventHandler> },
+  onBlur: functionType<FocusEventHandler>(),
-  'onUpdate:value': { type: Function as PropType<(value: Value) => void> },
+  'onUpdate:value': functionType<(value: Value) => void>(),
 });
 
 export type SliderProps = Partial<ExtractPropTypes<ReturnType<typeof sliderProps>>>;
@@ -88,6 +96,16 @@ const Slider = defineComponent({
   // emits: ['update:value', 'change', 'afterChange', 'blur'],
   slots: ['mark'],
   setup(props, { attrs, slots, emit, expose }) {
+    // Warning for deprecated usage
+    if (process.env.NODE_ENV !== 'production') {
+      [['tooltipVisible', 'tooltipOpen']].forEach(([deprecatedName, newName]) => {
+        devWarning(
+          props.tooltipVisible === undefined,
+          'Slider',
+          `\`${deprecatedName}\` is deprecated, please use \`${newName}\` instead.`,
+        );
+      });
+    }
     const { prefixCls, rootPrefixCls, direction, getPopupContainer, configProvider } =
       useConfigInject('slider', props);
 
@@ -97,7 +115,7 @@ const Slider = defineComponent({
     const formItemContext = useInjectFormItemContext();
     const sliderRef = ref();
     const visibles = ref<Visibles>({});
-    const toggleTooltipVisible = (index: number, visible: boolean) => {
+    const toggleTooltipOpen = (index: number, visible: boolean) => {
       visibles.value[index] = visible;
     };
     const tooltipPlacement = computed(() => {
@@ -132,14 +150,14 @@ const Slider = defineComponent({
       tooltipPrefixCls,
       info: { value, dragging, index, ...restProps },
     }) => {
-      const { tipFormatter, tooltipVisible, getTooltipPopupContainer } = props;
+      const { tipFormatter, tooltipOpen = props.tooltipVisible, getTooltipPopupContainer } = props;
       const isTipFormatter = tipFormatter ? visibles.value[index] || dragging : false;
-      const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
+      const open = tooltipOpen || (tooltipOpen === undefined && isTipFormatter);
       return (
         <SliderTooltip
           prefixCls={tooltipPrefixCls}
           title={tipFormatter ? tipFormatter(value) : ''}
-          visible={visible}
+          open={open}
           placement={tooltipPlacement.value}
           transitionName={`${rootPrefixCls.value}-zoom-down`}
           key={index}
@@ -149,8 +167,8 @@ const Slider = defineComponent({
           <VcHandle
             {...restProps}
             value={value}
-            onMouseenter={() => toggleTooltipVisible(index, true)}
+            onMouseenter={() => toggleTooltipOpen(index, true)}
-            onMouseleave={() => toggleTooltipVisible(index, false)}
+            onMouseleave={() => toggleTooltipOpen(index, false)}
           />
         </SliderTooltip>
       );

components/slider/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 subtitle: 滑动输入条
 type: 数据录入
 title: Slider
-cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_4heQaUrFn4AAAAAAAAAAAAADrJ8AQ/original
 ---
 
 滑动型输入器，展示当前值和可选范围。
@@ -19,7 +19,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
 | autofocus | 自动获取焦点 | boolean | false |  |
 | disabled | 值为 `true` 时，滑块为禁用状态 | boolean | false |  |
 | dots | 是否只能拖拽到刻度上 | boolean | false |  |
-| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上。 | Function | () => document.body | 1.5.0 |
 | included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true |  |
 | mark | 自定义刻度标记 | v-slot:mark | { point: number, label: any } | 3.0 |
 | 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
 | range | 双滑块模式 | boolean | false |  |
 | reverse | 反向坐标轴 | boolean | false | 1.5.0 |
 | step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 |  |
-| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY |  |
-| tooltipPlacement | 设置 Tooltip 展示位置。参考 [`Tooltip`](/components/tooltip/)。 | string |  | 1.5.0 |
-| tooltipVisible | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean |  |  |
 | value(v-model) | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] |  |  |
 | vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false |  |
+| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY |  |
+| tooltipPlacement | 设置 Tooltip 展示位置。参考 [`Tooltip`](/components/tooltip/)。 | string |  | 1.5.0 |
+| tooltipOpen | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean |  | 4.0 |
+| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上。 | Function | () => document.body | 1.5.0 |
 
 ### 事件