feat: added tooltip for Slider (#391)

* fix: Descriptions component supports dark mode * feat: added tooltip for Slider * test: added Slider tooltip unit test * docs: updated unit test snap * docs: updated unit test snap * feat: extend popover disabled attr * feat: added showTooltip attr --------- Co-authored-by: baiwusanyu-c <[email protected]>
ikun-svelte · Jan 5, 2024 · d15c8d6 · d15c8d6
1 parent 08dfd21
commit d15c8d6
Show file tree

Hide file tree

Showing 11 changed files with 375 additions and 351 deletions.
diff --git a/components/Form/__test__/__snapshots__/form.spec.ts.snap b/components/Form/__test__/__snapshots__/form.spec.ts.snap
diff --git a/components/Slider/__test__/__snapshots__/slider.spec.ts.snap b/components/Slider/__test__/__snapshots__/slider.spec.ts.snap
@@ -1,15 +1,15 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test: KSlider > props: attrs 1`] = `"<div class="k-slider k-slider--base k-slider--md" you="world"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div class="k-slider--button k-slider--button--md"></div></div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: attrs 1`] = `"<div class="k-slider k-slider--base k-slider--md" you="world"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
 
-exports[`Test: KSlider > props: cls 1`] = `"<div class="k-slider k-slider--base k-slider--md 窈窕淑女，君子好逑"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div class="k-slider--button k-slider--button--md"></div></div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: cls 1`] = `"<div class="k-slider k-slider--base k-slider--md 窈窕淑女，君子好逑"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
 
-exports[`Test: KSlider > props: disabled 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div class="k-slider--button k-slider--button--md"></div></div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: disabled 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
 
-exports[`Test: KSlider > props: min and max 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 100%"><div class="k-slider--button k-slider--button--md"></div></div> <div class="k-slider--bar" style="width: 100%; left: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: min and max 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 100%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar" style="width: 100%; left: 0%"></div></div></div>"`;
 
-exports[`Test: KSlider > props: size 1`] = `"<div class="k-slider k-slider--base k-slider--lg"><div class="k-slider--runway--lg k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div class="k-slider--button k-slider--button--lg"></div></div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: size 1`] = `"<div class="k-slider k-slider--base k-slider--lg"><div class="k-slider--runway--lg k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--lg"></div></div> </div> <div class="k-slider--bar" style="width: 0%; left: 0%"></div></div></div>"`;
 
-exports[`Test: KSlider > props: value 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 10%"><div class="k-slider--button k-slider--button--md"></div></div> <div class="k-slider--bar" style="width: 10%; left: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: value 1`] = `"<div class="k-slider k-slider--base k-slider--md"><div class="k-slider--runway--md k-slider--runway" aria-hidden="true"><div class="k-slider--button-wrapper" aria-hidden="true" style="left: 10%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> <div class="k-popover--base k-popover--base__top k-popover--base__top__dark k-popover--base__dark svelte-13arsd0" data-popper-placement="" aria-hidden="true" style="position: fixed; left: 0px; top: 0px; margin: 0px; animation: __svelte_3896445108_0 200ms linear 0ms 1 both;"><span slot="contentEl">10</span> <div k-popover-arrow="true" data-popper-arrow-bottom="" data-popper-arrow-top="" data-popper-arrow-right="" data-popper-arrow-left="" class="svelte-13arsd0"></div></div></div> <div class="k-slider--bar" style="width: 10%; left: 0%"></div></div></div>"`;
 
-exports[`Test: KSlider > props: vertical 1`] = `"<div class="k-slider k-slider--base__vertical k-slider--md__vertical"><div class="k-slider--runway--md__vertical k-slider--runway__vertical" aria-hidden="true"><div class="k-slider--button-wrapper__vertical" aria-hidden="true" style="bottom: 0%"><div class="k-slider--button k-slider--button--md"></div></div> <div class="k-slider--bar__vertical" style="height: 0%; bottom: 0%"></div></div></div>"`;
+exports[`Test: KSlider > props: vertical 1`] = `"<div class="k-slider k-slider--base__vertical k-slider--md__vertical"><div class="k-slider--runway--md__vertical k-slider--runway__vertical" aria-hidden="true"><div class="k-slider--button-wrapper__vertical" aria-hidden="true" style="bottom: 0%"><div aria-hidden="true" class="flex" data-popover-trigger=""><div slot="triggerEl" class="k-slider--button k-slider--button--md"></div></div> </div> <div class="k-slider--bar__vertical" style="height: 0%; bottom: 0%"></div></div></div>"`;
diff --git a/components/Slider/__test__/slider.spec.ts b/components/Slider/__test__/slider.spec.ts
@@ -11,9 +11,11 @@ const initHost = () => {
 };
 beforeEach(() => {
 	initHost();
+	vi.useFakeTimers();
 });
 afterEach(() => {
 	host.remove();
+	vi.useRealTimers();
 });
 
 describe('Test: KSlider', () => {
@@ -27,8 +29,18 @@ describe('Test: KSlider', () => {
 		});
 		expect(instance).toBeTruthy();
 		await tick();
-		const sliderBarElm = host.querySelector('.k-slider--bar');
-		const sliderButtonWrapperElm = host.querySelector('.k-slider--button-wrapper');
+		const sliderBarElm = host.querySelector('.k-slider--bar') as HTMLElement;
+		const sliderButtonWrapperElm = host.querySelector('.k-slider--button-wrapper') as HTMLElement;
+		const triggerElm = sliderButtonWrapperElm.children[0];
+		triggerElm.dispatchEvent(
+			new MouseEvent('mouseenter', {
+				cancelable: true
+			})
+		);
+		vi.runAllTimers();
+		await tick();
+		expect(host.innerHTML.includes('10')).toBeTruthy();
+		expect(host.innerHTML.includes('data-popper-arrow-bottom')).toBeTruthy();
 		expect(Number.parseFloat(sliderBarElm.style.width)).toBe(value);
 		expect(Number.parseFloat(sliderButtonWrapperElm.style.left)).toBe(value);
 		expect(host.innerHTML).matchSnapshot();
@@ -64,8 +76,8 @@ describe('Test: KSlider', () => {
 		});
 		expect(instance).toBeTruthy();
 		await tick();
-		const sliderBarElm = host.querySelector('.k-slider--bar');
-		const sliderButtonWrapperElm = host.querySelector('.k-slider--button-wrapper');
+		const sliderBarElm = host.querySelector('.k-slider--bar') as HTMLElement;
+		const sliderButtonWrapperElm = host.querySelector('.k-slider--button-wrapper') as HTMLElement;
 		expect(Number.parseFloat(sliderBarElm.style.width)).toBe(0);
 		expect(Number.parseFloat(sliderButtonWrapperElm.style.left)).toBe(0);
 		instance.$set({
@@ -148,7 +160,7 @@ describe('Test: KSlider', () => {
 		});
 		expect(instance).toBeTruthy();
 		await tick();
-		const sliderBaseElm = host.querySelector('.k-slider--base');
+		const sliderBaseElm = host.querySelector('.k-slider--base') as HTMLElement;
 		expect(sliderBaseElm.getAttribute('you')).toBe('world');
 		expect(host.innerHTML).matchSnapshot();
 	});
@@ -166,7 +178,7 @@ describe('Test: KSlider', () => {
 		instance.$on('change', () => {
 			changeEvent();
 		});
-		const sliderButtonWrapperElm = host.querySelector('.k-slider--button-wrapper');
+		const sliderButtonWrapperElm = host.querySelector('.k-slider--button-wrapper') as HTMLElement;
 		sliderButtonWrapperElm.dispatchEvent(new Event('mousedown'));
 		window.dispatchEvent(new Event('mouseup'));
 		await tick();
@@ -186,7 +198,7 @@ describe('Test: KSlider', () => {
 		instance.$on('input', () => {
 			inputEvent();
 		});
-		const sliderRunwayElm = host.querySelector('.k-slider--runway');
+		const sliderRunwayElm = host.querySelector('.k-slider--runway') as HTMLElement;
 		sliderRunwayElm.dispatchEvent(
 			new MouseEvent('mousedown', {
 				cancelable: true,
@@ -209,10 +221,10 @@ describe('Test: KSlider', () => {
 		await tick();
 		instance.$on('change', event);
 		instance.$on('input', event);
-		const sliderButtonWrapperElm = host.querySelector('.k-slider--button-wrapper');
+		const sliderButtonWrapperElm = host.querySelector('.k-slider--button-wrapper') as HTMLElement;
 		sliderButtonWrapperElm.dispatchEvent(new Event('mousedown'));
 		window.dispatchEvent(new Event('mouseup'));
-		const sliderRunwayElm = host.querySelector('.k-slider--runway');
+		const sliderRunwayElm = host.querySelector('.k-slider--runway') as HTMLElement;
 		sliderRunwayElm.dispatchEvent(
 			new MouseEvent('mousedown', {
 				cancelable: true,

diff --git a/components/Slider/package.json b/components/Slider/package.json
@@ -35,6 +35,7 @@
 	},
 	"dependencies": {
 		"@ikun-ui/utils": "workspace:*",
+		"@ikun-ui/tooltip": "workspace:*",
 		"baiwusanyu-utils": "^1.0.18"
 	},
 	"devDependencies": {

diff --git a/components/Slider/src/index.svelte b/components/Slider/src/index.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { KSliderProps } from './types';
+	import { KTooltip } from '@ikun-ui/tooltip';
 	import type { IKunFormInstance } from '@ikun-ui/form';
 	import { createEventDispatcher, getContext } from 'svelte';
 	import { formItemKey, formKey, getPrefixCls } from '@ikun-ui/utils';
@@ -14,6 +15,7 @@
 	export let vertical: KSliderProps['vertical'] = false;
 	export let attrs: KSliderProps['attrs'] = {};
 	export let cls: KSliderProps['cls'] = undefined;
+	export let showTooltip: KSliderProps['showTooltip'] = true;
 
 	/*********************** KForm logic start ************************/
 	let disabledFrom = false;
@@ -192,9 +194,15 @@
 			style={btnStyle}
 		>
 			{#if $$slots.buttonRender}
-				<slot name="buttonRender" />
+				<KTooltip disabled={!showTooltip} placement="top" content={String(value)}>
+					<div slot="triggerEl" class={buttonCls}>
+						<slot name="buttonRender" />
+					</div>
+				</KTooltip>
 			{:else}
-				<div class={buttonCls}></div>
+				<KTooltip disabled={!showTooltip} placement="top" content={String(value)}>
+					<div slot="triggerEl" class={buttonCls}></div>
+				</KTooltip>
 			{/if}
 		</div>
 		<div class={barCls} style={barStyle}></div>

diff --git a/components/Slider/src/types.d.ts b/components/Slider/src/types.d.ts
@@ -10,6 +10,7 @@ export type KSliderProps = {
 	step: number;
 	disabled: boolean;
 	vertical: boolean;
+	showTooltip: boolean;
 	cls: ClassValue;
 	attrs: Record<string, string>;
 };
diff --git a/components/Tooltip/src/index.svelte b/components/Tooltip/src/index.svelte
@@ -9,11 +9,12 @@
 	export let cls: ClassValue = undefined;
 	export let attrs: Record<string, string> = {};
 	export let content = '';
+	export let disabled: boolean = false;
 
 	$: cnames = clsx(cls);
 </script>
 
-<KPopover cls={cnames} {trigger} {placement} {attrs}>
+<KPopover cls={cnames} {disabled} {trigger} {placement} {attrs}>
 	<span slot="contentEl">{content}</span>
 	<slot name="triggerEl" slot="triggerEl" />
 </KPopover>
diff --git a/docs/example/slider/basic.svelte b/docs/example/slider/basic.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <div>
-	<KSlider on:input={handleInput1} value={value1}></KSlider>
+	<KSlider showTooltip={false} on:input={handleInput1} value={value1}></KSlider>
 	<p class="px-2">value: {value1}</p>
 </div>
 

diff --git a/play/svelte.config.js b/play/svelte.config.js
@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {