mirror of
https://github.com/element-plus/element-plus.git
synced 2024-11-27 02:01:15 +08:00
fix(components): [tooltip] remove deprecated api (#10264)
This commit is contained in:
Xc
GitHub
parent
a8c6df5958
commit
1f22916ad7
@ -142,32 +142,31 @@ tooltip/animations
|
||||
|
||||
## Attributes
|
||||
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| append-to | which element the tooltip CONTENT appends to | `CSSSelector \| HTMLElement` | — | #el-popper-container-[randomValue] |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | dark / light | dark |
|
||||
| content | display content, can be overridden by `slot#content` | String | — | — |
|
||||
| raw-content | whether `content` is treated as HTML string | boolean | — | false |
|
||||
| placement | position of Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| visible / v-model:visible | visibility of Tooltip | boolean | — | false |
|
||||
| disabled | whether Tooltip is disabled | boolean | — | false |
|
||||
| offset | offset of the Tooltip | number | — | 0 |
|
||||
| transition | animation name | string | — | el-fade-in-linear |
|
||||
| visible-arrow (will deprecate in 2.1.0 ) | whether an arrow is displayed. For more information, check [ElPopper](https://github.com/element-plus/element-plus/tree/dev/packages/components/popper) page | boolean | — | true |
|
||||
| popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters | Object | refer to [popper.js](https://popper.js.org/docs/v2/) doc | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
|
||||
| show-after | delay of appearance, in millisecond | number | — | 0 |
|
||||
| show-arrow | whether the tooltip content has an arrow | boolean | true / false | true |
|
||||
| hide-after | delay of disappear, in millisecond | number | — | 200 |
|
||||
| auto-close | timeout in milliseconds to hide tooltip | number | — | 0 |
|
||||
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
|
||||
| popper-class | custom class name for Tooltip's popper | string | — | — |
|
||||
| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number | — | 0 |
|
||||
| teleported | whether tooltip content is teleported, if `true` it will be teleported to where `append-to` sets | boolean | true / false | true |
|
||||
| trigger | How should the tooltip be triggered (to show) | string | hover / click / focus / contextmenu | hover |
|
||||
| virtual-triggering | Indicates whether virtual triggering is enabled | boolean | — | false |
|
||||
| virtual-ref | Indicates the reference element to which the tooltip is attached | HTMLElement | — | — |
|
||||
| trigger-keys | When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of tooltip through the keyboard | Array | — | `['Enter','Space']` |
|
||||
| Name | Description | Type | Accepted Values | Default |
|
||||
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||
| append-to | which element the tooltip CONTENT appends to | `CSSSelector \| HTMLElement` | — | #el-popper-container-[randomValue] |
|
||||
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | dark / light | dark |
|
||||
| content | display content, can be overridden by `slot#content` | String | — | — |
|
||||
| raw-content | whether `content` is treated as HTML string | boolean | — | false |
|
||||
| placement | position of Tooltip | string | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
|
||||
| visible / v-model:visible | visibility of Tooltip | boolean | — | false |
|
||||
| disabled | whether Tooltip is disabled | boolean | — | false |
|
||||
| offset | offset of the Tooltip | number | — | 0 |
|
||||
| transition | animation name | string | — | el-fade-in-linear |
|
||||
| popper-options | [popper.js](https://popper.js.org/docs/v2/) parameters | Object | refer to [popper.js](https://popper.js.org/docs/v2/) doc | `{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}` |
|
||||
| show-after | delay of appearance, in millisecond | number | — | 0 |
|
||||
| show-arrow | whether the tooltip content has an arrow | boolean | true / false | true |
|
||||
| hide-after | delay of disappear, in millisecond | number | — | 200 |
|
||||
| auto-close | timeout in milliseconds to hide tooltip | number | — | 0 |
|
||||
| manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
|
||||
| popper-class | custom class name for Tooltip's popper | string | — | — |
|
||||
| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
|
||||
| tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Tooltip | number | — | 0 |
|
||||
| teleported | whether tooltip content is teleported, if `true` it will be teleported to where `append-to` sets | boolean | true / false | true |
|
||||
| trigger | How should the tooltip be triggered (to show) | string | hover / click / focus / contextmenu | hover |
|
||||
| virtual-triggering | Indicates whether virtual triggering is enabled | boolean | — | false |
|
||||
| virtual-ref | Indicates the reference element to which the tooltip is attached | HTMLElement | — | — |
|
||||
| trigger-keys | When you click the mouse to focus on the trigger element, you can define a set of keyboard codes to control the display of tooltip through the keyboard | Array | — | `['Enter','Space']` |
|
||||
|
||||
## Slots
|
||||
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { nextTick } from 'vue'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||
import { debugWarn } from '@element-plus/utils'
|
||||
import { rAF } from '@element-plus/test-utils/tick'
|
||||
import { ElPopperTrigger } from '@element-plus/components/popper'
|
||||
import Tooltip from '../src/tooltip.vue'
|
||||
@ -57,20 +56,6 @@ describe('<ElTooltip />', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe('deprecating API', () => {
|
||||
it('should warn about API that will be deprecated', async () => {
|
||||
expect(debugWarn).toHaveBeenCalledTimes(0)
|
||||
|
||||
wrapper = createComponent({
|
||||
openDelay: 200,
|
||||
visibleArrow: true,
|
||||
})
|
||||
|
||||
await nextTick()
|
||||
expect(debugWarn).toHaveBeenCalledTimes(2)
|
||||
})
|
||||
})
|
||||
|
||||
describe('functionality', () => {
|
||||
const content = 'Test content'
|
||||
|
||||
|
||||
@ -19,13 +19,6 @@ export const useTooltipProps = buildProps({
|
||||
...useTooltipContentProps,
|
||||
...useTooltipTriggerProps,
|
||||
...popperArrowProps,
|
||||
openDelay: {
|
||||
type: Number,
|
||||
},
|
||||
visibleArrow: {
|
||||
type: Boolean,
|
||||
default: undefined,
|
||||
},
|
||||
showArrow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
:raw-content="rawContent"
|
||||
:reference-el="referenceEl"
|
||||
:trigger-target-el="triggerTargetEl"
|
||||
:show-after="compatShowAfter"
|
||||
:show-after="showAfter"
|
||||
:strategy="strategy"
|
||||
:teleported="teleported"
|
||||
:transition="transition"
|
||||
@ -42,7 +42,7 @@
|
||||
<span v-if="rawContent" v-html="content" />
|
||||
<span v-else>{{ content }}</span>
|
||||
</slot>
|
||||
<el-popper-arrow v-if="compatShowArrow" :arrow-offset="arrowOffset" />
|
||||
<el-popper-arrow v-if="showArrow" :arrow-offset="arrowOffset" />
|
||||
</el-tooltip-content>
|
||||
</el-popper>
|
||||
</template>
|
||||
@ -60,7 +60,7 @@ import {
|
||||
} from 'vue'
|
||||
import { ElPopper, ElPopperArrow } from '@element-plus/components/popper'
|
||||
|
||||
import { debugWarn, isBoolean, isUndefined } from '@element-plus/utils'
|
||||
import { isBoolean } from '@element-plus/utils'
|
||||
import {
|
||||
useDelayedToggle,
|
||||
useId,
|
||||
@ -79,24 +79,6 @@ const props = defineProps(useTooltipProps)
|
||||
const emit = defineEmits(tooltipEmits)
|
||||
|
||||
usePopperContainer()
|
||||
const compatShowAfter = computed(() => {
|
||||
if (!isUndefined(props.openDelay)) {
|
||||
debugWarn(
|
||||
'ElTooltip',
|
||||
'open-delay is about to be deprecated in the next major version, please use `show-after` instead'
|
||||
)
|
||||
}
|
||||
return props.openDelay || (props.showAfter as number)
|
||||
})
|
||||
const compatShowArrow = computed(() => {
|
||||
if (!isUndefined(props.visibleArrow)) {
|
||||
debugWarn(
|
||||
'ElTooltip',
|
||||
'`visible-arrow` is about to be deprecated in the next major version, please use `show-arrow` instead'
|
||||
)
|
||||
}
|
||||
return isBoolean(props.visibleArrow) ? props.visibleArrow : props.showArrow
|
||||
})
|
||||
|
||||
const id = useId()
|
||||
// TODO any is temporary, replace with `InstanceType<typeof ElPopper> | null` later
|
||||
@ -119,7 +101,7 @@ const { show, hide, hasUpdateHandler } = useTooltipModelToggle({
|
||||
})
|
||||
|
||||
const { onOpen, onClose } = useDelayedToggle({
|
||||
showAfter: compatShowAfter,
|
||||
showAfter: toRef(props, 'showAfter'),
|
||||
hideAfter: toRef(props, 'hideAfter'),
|
||||
open: show,
|
||||
close: hide,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user