From ebcc2bc8a00fe9a693fd02d8375b2ad88c185657 Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Mon, 22 Apr 2024 14:48:35 +0800 Subject: [PATCH] feat: The tooltip and popover components added defaultOpen props --- .../__test__/fixture/popover.open.svelte | 10 +++++++++ components/Popover/__test__/popover.spec.ts | 21 +++++++++++++++++++ components/Popover/src/index.svelte | 8 ++++++- components/Popover/src/types.d.ts | 1 + components/Tooltip/src/index.svelte | 15 ++++++++++--- docs/components/KPopover.md | 1 + docs/components/KTooltip.md | 3 ++- 7 files changed, 54 insertions(+), 5 deletions(-) create mode 100644 components/Popover/__test__/fixture/popover.open.svelte diff --git a/components/Popover/__test__/fixture/popover.open.svelte b/components/Popover/__test__/fixture/popover.open.svelte new file mode 100644 index 00000000..1c0c0445 --- /dev/null +++ b/components/Popover/__test__/fixture/popover.open.svelte @@ -0,0 +1,10 @@ + + + +
top
+
+

有美一人，清扬婉兮

+
+ diff --git a/components/Popover/__test__/popover.spec.ts b/components/Popover/__test__/popover.spec.ts index 4f04f8bc..926a7e4d 100644 --- a/components/Popover/__test__/popover.spec.ts +++ b/components/Popover/__test__/popover.spec.ts @@ -7,6 +7,7 @@ import KPopoverDisabled from './fixture/popover.disabled.svelte'; import KPopoverChange from './fixture/popover.change.svelte'; import KPopoverArrow from './fixture/popover.arrow.svelte'; import KPopoverDelay from './fixture/popover.delay.svelte'; +import KPopoverOpen from './fixture/popover.open.svelte'; let host: HTMLElement; const initHost = () => { @@ -24,6 +25,15 @@ afterEach(() => { }); // TODO E2E test describe('Test: KPopover', () => { + vi.mock('svelte', async () => { + const actual = (await vi.importActual('svelte')) as object; + return { + ...actual, + // @ts-ignore + onMount: (await import('svelte/internal')).onMount + }; + }); + test('props: placement', async () => { //@ts-ignore const instance = new KPopoverPlacement({ @@ -84,6 +94,17 @@ describe('Test: KPopover', () => { expect(host.innerHTML).matchSnapshot(); }); + test('props: defaultOpen', async () => { + //@ts-ignore + const instance = new KPopoverOpen({ + target: host + }); + expect(instance).toBeTruthy(); + await tick(); + await vi.advanceTimersByTimeAsync(500); + expect(host.innerHTML.includes('有美一人，清扬婉兮')).toBeTruthy(); + }); + test('props: trigger', async () => { //@ts-ignore const instance = new KPopoverTrigger({ diff --git a/components/Popover/src/index.svelte b/components/Popover/src/index.svelte index 47535ed9..9b078e75 100644 --- a/components/Popover/src/index.svelte +++ b/components/Popover/src/index.svelte @@ -4,7 +4,7 @@ import { getPrefixCls } from '@ikun-ui/utils'; import { clsx } from 'clsx'; import type { KPopoverProps } from './types'; - import { createEventDispatcher } from 'svelte'; + import { createEventDispatcher, onMount } from 'svelte'; export let placement: KPopoverProps['placement'] = 'top'; // hover click manual @@ -16,6 +16,7 @@ export let mouseLeaveDelay: KPopoverProps['mouseLeaveDelay'] = 200; export let cls: KPopoverProps['cls'] = undefined; export let clsTrigger: KPopoverProps['clsTrigger'] = undefined; + export let defaultOpen: KPopoverProps['defaultOpen'] = undefined; /** * @internal */ @@ -61,6 +62,11 @@ } as PopperOptions); let isShow = false; + onMount(() => { + if (defaultOpen !== undefined) { + doUpdateShow(!!defaultOpen); + } + }); const handleClick = () => { if (trigger === 'manual') { doUpdateShow(!isShow); diff --git a/components/Popover/src/types.d.ts b/components/Popover/src/types.d.ts index f33c57f9..47c1af5b 100644 --- a/components/Popover/src/types.d.ts +++ b/components/Popover/src/types.d.ts @@ -3,6 +3,7 @@ import type { ClassValue } from 'clsx'; import { IKunPlacement, IKunTrigger } from '@ikun-ui/utils'; export type KPopoverProps = { + defaultOpen?: boolean; placement: IKunPlacement; trigger: IKunTrigger; disabled: boolean; diff --git a/components/Tooltip/src/index.svelte b/components/Tooltip/src/index.svelte index 8fd98c84..955fc745 100644 --- a/components/Tooltip/src/index.svelte +++ b/components/Tooltip/src/index.svelte @@ -1,5 +1,5 @@ - + {content} diff --git a/docs/components/KPopover.md b/docs/components/KPopover.md index 5bab3c4f..c5fe6bb3 100644 --- a/docs/components/KPopover.md +++ b/docs/components/KPopover.md @@ -50,6 +50,7 @@ Specify different trigger methods through the `trigger` attribute | disabled | `boolean` | `false` | Disabled the popover | | mouseEnterDelay | `number` | `200` | Delay in seconds, before `popover` is shown on mouse enter, unit `ms` | | mouseLeaveDelay | `number` | `200` | Delay in seconds, before `popover` is shown on mouse enter, unit `ms` | +| defaultOpen | `boolean` | `-` | Open `popover` by default | | arrow | `boolean` | `true` | Display the arrow | | cls | `string` | `-` | Additional class | | attrs | `Record` | `{}` | Additional attributes | diff --git a/docs/components/KTooltip.md b/docs/components/KTooltip.md index a9f4d380..98d41b0b 100644 --- a/docs/components/KTooltip.md +++ b/docs/components/KTooltip.md @@ -44,11 +44,12 @@ Specify different trigger methods through the `trigger` attribute ## Tooltip Props | Name | Type | Default | Description | -| --------------- | ------------------------------------- | ------- | --------------------------------------------------------------------- | +|-----------------|---------------------------------------|---------| --------------------------------------------------------------------- | | placement | `'top' / 'left' / 'right' / 'bottom'` | `top` | Where the `tooltip` appears | | trigger | `'manual' / 'click' / 'hover'` | `hover` | How `tooltip` are triggered | | mouseEnterDelay | `number` | `200` | Delay in seconds, before `tooltip` is shown on mouse enter, unit `ms` | | mouseLeaveDelay | `number` | `200` | Delay in seconds, before `tooltip` is shown on mouse enter, unit `ms` | +| defaultOpen | `boolean` | `-` | Open `tooltip` by default | | cls | `string` | `-` | Additional class | | attrs | `Record` | `{}` | Additional attributes | | content | `string` | `-` | `tooltip`'s content |