feat: slider deprecated tooltipVisible

2023-02-12 15:24:58 +08:00 · 2023-02-12 15:24:58 +08:00 · f0e5da3b69
parent 2f049329a5
commit f0e5da3b69
5 changed files with 69 additions and 51 deletions
--- a/components/slider/SliderTooltip.tsx
+++ b/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();
      },
--- a/components/slider/demo/show-tooltip.vue
+++ b/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';
--- a/components/slider/index.en-US.md
+++ b/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

--- a/components/slider/index.tsx
+++ b/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 },
-  reverse: { type: Boolean, default: undefined },
+  range: someType<boolean | SliderRange>([Boolean, Object]),
+  reverse: booleanType(),
  min: Number,
  max: Number,
-  step: { type: [Number, Object] as PropType<null | number> },
-  marks: { type: Object as PropType<SliderMarks> },
-  dots: { type: Boolean, default: undefined },
-  value: { type: [Number, Array] as PropType<Value> },
-  defaultValue: { type: [Number, Array] as PropType<Value> },
-  included: { type: Boolean, default: undefined },
-  disabled: { type: Boolean, default: undefined },
-  vertical: { type: Boolean, default: undefined },
-  tipFormatter: {
-    type: [Function, Object] as PropType<((value?: number) => any) | null>,
-    default: () => defaultTipFormatter,
-  },
-  tooltipVisible: { type: Boolean, default: undefined },
-  tooltipPlacement: { type: String as PropType<TooltipPlacement> },
-  getTooltipPopupContainer: {
-    type: Function as PropType<(triggerNode: HTMLElement) => HTMLElement>,
-  },
-  autofocus: { type: Boolean, default: undefined },
-  handleStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
-  trackStyle: { type: [Object, Array] as PropType<CSSProperties[] | CSSProperties> },
-  onChange: { type: Function as PropType<(value: Value) => void> },
-  onAfterChange: { type: Function as PropType<(value: Value) => void> },
-  onFocus: { type: Function as PropType<FocusEventHandler> },
-  onBlur: { type: Function as PropType<FocusEventHandler> },
-  'onUpdate:value': { type: Function as PropType<(value: Value) => void> },
+  step: someType<null | number>([Object, Number]),
+  marks: objectType<SliderMarks>(),
+  dots: booleanType(),
+  value: someType<Value>([Array, Number]),
+  defaultValue: someType<Value>([Array, Number]),
+  included: booleanType(),
+  disabled: booleanType(),
+  vertical: booleanType(),
+  tipFormatter: someType<((value?: number) => any) | null>(
+    [Function, Object],
+    () => defaultTipFormatter,
+  ),
+  tooltipOpen: booleanType(),
+  /** @deprecated `tooltipVisible` is deprecated. Please use `tooltipOpen` instead. */
+  tooltipVisible: booleanType(),
+  tooltipPlacement: stringType<TooltipPlacement>(),
+  getTooltipPopupContainer: functionType<(triggerNode: HTMLElement) => HTMLElement>(),
+  autofocus: booleanType(),
+  handleStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
+  trackStyle: someType<CSSProperties[] | CSSProperties>([Array, Object]),
+  onChange: functionType<(value: Value) => void>(),
+  onAfterChange: functionType<(value: Value) => void>(),
+  onFocus: functionType<FocusEventHandler>(),
+  onBlur: functionType<FocusEventHandler>(),
+  '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)}
-            onMouseleave={() => toggleTooltipVisible(index, false)}
+            onMouseenter={() => toggleTooltipOpen(index, true)}
+            onMouseleave={() => toggleTooltipOpen(index, false)}
          />
        </SliderTooltip>
      );
--- a/components/slider/index.zh-CN.md
+++ b/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 |

 ### 事件