feat: The tooltip and popover components added defaultOpen props (#441)

ikun-svelte · Apr 22, 2024 · 8c788b4 · 8c788b4
1 parent 424b812
commit 8c788b4
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 5 deletions.
diff --git a/components/Popover/__test__/fixture/popover.open.svelte b/components/Popover/__test__/fixture/popover.open.svelte
@@ -0,0 +1,10 @@
+<script>
+	import KPopover from '../../src';
+</script>
+
+<KPopover trigger="click" defaultOpen={true}>
+	<div slot="triggerEl" cls="mx-2">top</div>
+	<div slot="contentEl" class="flex flex-col">
+		<p class="!my-2">有美一人，清扬婉兮</p>
+	</div>
+</KPopover>
diff --git 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
@@ -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<any>);
 
 	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
@@ -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
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { KPopover } from '@ikun-ui/popover';
+	import { KPopover, type KPopoverProps } from '@ikun-ui/popover';
 	import { clsx } from 'clsx';
 	import type { KTooltipProps } from './types';
 
@@ -12,11 +12,20 @@
 	export let disabled: KTooltipProps['disabled'] = false;
 	export let mouseEnterDelay: KTooltipProps['mouseEnterDelay'] = 200;
 	export let mouseLeaveDelay: KTooltipProps['mouseLeaveDelay'] = 200;
-
+	export let defaultOpen: KPopoverProps['defaultOpen'] = undefined;
 	$: cnames = clsx(cls);
 </script>
 
-<KPopover cls={cnames} {disabled} {trigger} {mouseEnterDelay} {mouseLeaveDelay} {placement} {attrs}>
+<KPopover
+	cls={cnames}
+	{disabled}
+	{trigger}
+	{mouseEnterDelay}
+	{mouseLeaveDelay}
+	{placement}
+	{attrs}
+	{defaultOpen}
+>
 	<span slot="contentEl">{content}</span>
 	<slot name="triggerEl" slot="triggerEl" />
 </KPopover>
diff --git 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<string, string>`              | `{}`    | Additional attributes                                                 |

diff --git 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<string, string>`              | `{}`    | Additional attributes                                                 |
 | content         | `string`                              | `-`     | `tooltip`'s content                                                   |