mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
8d2f08108b
* fix(components): [popper] fix arrow overflow issue Add popperArrowProp to popperContentProps to ensure usePopper correctly applies arrow options, preventing the arrow from overflowing the popper container edges. * fix(components): [popper] change arrowOffset to ref for reactivity * feat(components): [tooltip] add arrow-offset property - Allow users to control the padding of the tooltip arrow - Prevents the arrow from touching the popper's edge Reference: https://popper.js.org/docs/v2/modifiers/arrow/#padding * fix(components): [popper] add reactive watch for arrowOffset prop * feat(components): [popper] remove unused arrowOffset prop Removes unused arrowOffset prop and related logic - Removes arrowOffset from PopperContentInjectionContext - Removes arrowOffset prop watching and state management - Cleans up related test cases * docs(components): [tooltip] update version requirement update version requirement for arrow-offset prop * docs(components): [tooltip] update `arrow-offset` version * Update docs/en-US/component/tooltip.md Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com> --------- Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com> Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { nextTick, ref } from 'vue'
|
|
import { mount } from '@vue/test-utils'
|
|
import { afterEach, beforeEach, describe, expect, it } from 'vitest'
|
|
import { POPPER_CONTENT_INJECTION_KEY } from '@element-plus/components/popper'
|
|
import ElArrow from '../src/arrow.vue'
|
|
|
|
import type { VueWrapper } from '@vue/test-utils'
|
|
import type { PopperArrowInstance } from '../src/arrow'
|
|
|
|
const popperContentInjection = {
|
|
arrowRef: ref(null),
|
|
}
|
|
|
|
const mountArrow = () =>
|
|
mount(<ElArrow />, {
|
|
global: {
|
|
provide: {
|
|
[POPPER_CONTENT_INJECTION_KEY as symbol]: popperContentInjection,
|
|
},
|
|
},
|
|
})
|
|
|
|
describe('<ElPopperArrow />', () => {
|
|
let wrapper: VueWrapper<PopperArrowInstance>
|
|
|
|
beforeEach(() => {
|
|
wrapper = mountArrow()
|
|
return nextTick()
|
|
})
|
|
|
|
afterEach(() => {
|
|
wrapper?.unmount()
|
|
popperContentInjection.arrowRef.value = null
|
|
})
|
|
|
|
it('should set the arrowRef after mounted', async () => {
|
|
expect(popperContentInjection.arrowRef.value).toBe(wrapper.vm.arrowRef)
|
|
})
|
|
|
|
it('should unset arrowRef before unmount', async () => {
|
|
expect(popperContentInjection.arrowRef.value).toBe(wrapper.vm.arrowRef)
|
|
|
|
wrapper.unmount()
|
|
expect(popperContentInjection.arrowRef.value).toBeNull()
|
|
})
|
|
})
|