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
|
## Attributes
|
||||||
|
|
||||||
| Name | Description | Type | Accepted Values | Default |
|
| Name | Description | Type | Accepted Values | Default |
|
||||||
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
|
||||||
| append-to | which element the tooltip CONTENT appends to | `CSSSelector \| HTMLElement` | — | #el-popper-container-[randomValue] |
|
| 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 |
|
| effect | Tooltip theme, built-in theme: `dark` / `light` | string | dark / light | dark |
|
||||||
| content | display content, can be overridden by `slot#content` | String | — | — |
|
| content | display content, can be overridden by `slot#content` | String | — | — |
|
||||||
| raw-content | whether `content` is treated as HTML string | boolean | — | false |
|
| 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 |
|
| 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 |
|
| visible / v-model:visible | visibility of Tooltip | boolean | — | false |
|
||||||
| disabled | whether Tooltip is disabled | boolean | — | false |
|
| disabled | whether Tooltip is disabled | boolean | — | false |
|
||||||
| offset | offset of the Tooltip | number | — | 0 |
|
| offset | offset of the Tooltip | number | — | 0 |
|
||||||
| transition | animation name | string | — | el-fade-in-linear |
|
| 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}}]}` |
|
||||||
| 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-after | delay of appearance, in millisecond | number | — | 0 |
|
| show-arrow | whether the tooltip content has an arrow | boolean | true / false | true |
|
||||||
| show-arrow | whether the tooltip content has an arrow | boolean | true / false | true |
|
| hide-after | delay of disappear, in millisecond | number | — | 200 |
|
||||||
| hide-after | delay of disappear, in millisecond | number | — | 200 |
|
| auto-close | timeout in milliseconds to hide tooltip | number | — | 0 |
|
||||||
| 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 |
|
||||||
| 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 | — | — |
|
||||||
| popper-class | custom class name for Tooltip's popper | string | — | — |
|
| enterable | whether the mouse can enter the tooltip | Boolean | — | true |
|
||||||
| 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 |
|
||||||
| 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 |
|
||||||
| 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 |
|
||||||
| 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-triggering | Indicates whether virtual triggering is enabled | boolean | — | false |
|
| virtual-ref | Indicates the reference element to which the tooltip is attached | HTMLElement | — | — |
|
||||||
| 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']` |
|
||||||
| 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
|
## Slots
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
import { nextTick } from 'vue'
|
import { nextTick } from 'vue'
|
||||||
import { mount } from '@vue/test-utils'
|
import { mount } from '@vue/test-utils'
|
||||||
import { afterEach, describe, expect, it, vi } from 'vitest'
|
import { afterEach, describe, expect, it, vi } from 'vitest'
|
||||||
import { debugWarn } from '@element-plus/utils'
|
|
||||||
import { rAF } from '@element-plus/test-utils/tick'
|
import { rAF } from '@element-plus/test-utils/tick'
|
||||||
import { ElPopperTrigger } from '@element-plus/components/popper'
|
import { ElPopperTrigger } from '@element-plus/components/popper'
|
||||||
import Tooltip from '../src/tooltip.vue'
|
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', () => {
|
describe('functionality', () => {
|
||||||
const content = 'Test content'
|
const content = 'Test content'
|
||||||
|
|
||||||
|
|||||||
@ -19,13 +19,6 @@ export const useTooltipProps = buildProps({
|
|||||||
...useTooltipContentProps,
|
...useTooltipContentProps,
|
||||||
...useTooltipTriggerProps,
|
...useTooltipTriggerProps,
|
||||||
...popperArrowProps,
|
...popperArrowProps,
|
||||||
openDelay: {
|
|
||||||
type: Number,
|
|
||||||
},
|
|
||||||
visibleArrow: {
|
|
||||||
type: Boolean,
|
|
||||||
default: undefined,
|
|
||||||
},
|
|
||||||
showArrow: {
|
showArrow: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
|
|||||||
@ -30,7 +30,7 @@
|
|||||||
:raw-content="rawContent"
|
:raw-content="rawContent"
|
||||||
:reference-el="referenceEl"
|
:reference-el="referenceEl"
|
||||||
:trigger-target-el="triggerTargetEl"
|
:trigger-target-el="triggerTargetEl"
|
||||||
:show-after="compatShowAfter"
|
:show-after="showAfter"
|
||||||
:strategy="strategy"
|
:strategy="strategy"
|
||||||
:teleported="teleported"
|
:teleported="teleported"
|
||||||
:transition="transition"
|
:transition="transition"
|
||||||
@ -42,7 +42,7 @@
|
|||||||
<span v-if="rawContent" v-html="content" />
|
<span v-if="rawContent" v-html="content" />
|
||||||
<span v-else>{{ content }}</span>
|
<span v-else>{{ content }}</span>
|
||||||
</slot>
|
</slot>
|
||||||
<el-popper-arrow v-if="compatShowArrow" :arrow-offset="arrowOffset" />
|
<el-popper-arrow v-if="showArrow" :arrow-offset="arrowOffset" />
|
||||||
</el-tooltip-content>
|
</el-tooltip-content>
|
||||||
</el-popper>
|
</el-popper>
|
||||||
</template>
|
</template>
|
||||||
@ -60,7 +60,7 @@ import {
|
|||||||
} from 'vue'
|
} from 'vue'
|
||||||
import { ElPopper, ElPopperArrow } from '@element-plus/components/popper'
|
import { ElPopper, ElPopperArrow } from '@element-plus/components/popper'
|
||||||
|
|
||||||
import { debugWarn, isBoolean, isUndefined } from '@element-plus/utils'
|
import { isBoolean } from '@element-plus/utils'
|
||||||
import {
|
import {
|
||||||
useDelayedToggle,
|
useDelayedToggle,
|
||||||
useId,
|
useId,
|
||||||
@ -79,24 +79,6 @@ const props = defineProps(useTooltipProps)
|
|||||||
const emit = defineEmits(tooltipEmits)
|
const emit = defineEmits(tooltipEmits)
|
||||||
|
|
||||||
usePopperContainer()
|
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()
|
const id = useId()
|
||||||
// TODO any is temporary, replace with `InstanceType<typeof ElPopper> | null` later
|
// TODO any is temporary, replace with `InstanceType<typeof ElPopper> | null` later
|
||||||
@ -119,7 +101,7 @@ const { show, hide, hasUpdateHandler } = useTooltipModelToggle({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const { onOpen, onClose } = useDelayedToggle({
|
const { onOpen, onClose } = useDelayedToggle({
|
||||||
showAfter: compatShowAfter,
|
showAfter: toRef(props, 'showAfter'),
|
||||||
hideAfter: toRef(props, 'hideAfter'),
|
hideAfter: toRef(props, 'hideAfter'),
|
||||||
open: show,
|
open: show,
|
||||||
close: hide,
|
close: hide,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user