feat: added tooltip format for Slider Component (#395)

* feat: added tooltip format for Slider

* docs: added format attr docs for Slider

* test: added KSlider's format attr unit test

* chore: format default value is String(value)

* feat: added slider format attr

* test: added format attr unit test for Slider

* docs: added format attr docs for Slider

Author: pkc918

components/Slider/__test__/slider.spec.ts

@@ -46,6 +46,31 @@ describe('Test: KSlider', () => {
 		expect(host.innerHTML).matchSnapshot();
 	});
 
+	test('props: format', async () => {
+		const instance = new KSlider({
+			target: host,
+			props: {
+				value: 10,
+				format: (value) => {
+					return 'Ikun' + value;
+				}
+			}
+		});
+		expect(instance).toBeTruthy();
+		await tick();
+		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('data-popper-arrow-bottom')).toBeTruthy();
+		expect(host.innerHTML.includes('Ikun10')).toBeTruthy();
+	});
+
 	test('props: vertical', async () => {
 		const instance = new KSlider({
 			target: host,

components/Slider/src/index.svelte

@@ -16,6 +16,7 @@
 	export let attrs: KSliderProps['attrs'] = {};
 	export let cls: KSliderProps['cls'] = undefined;
 	export let showTooltip: KSliderProps['showTooltip'] = true;
+	export let format: KSliderProps['format'];
 
 	/*********************** KForm logic start ************************/
 	let disabledFrom = false;
@@ -52,6 +53,19 @@
 	}
 	/*********************** KForm logic end ************************/
 
+	function handleFormat(value: number) {
+		if (format) {
+			const formattedValue = format(value);
+			if (typeof formattedValue === 'number' || typeof formattedValue === 'string') {
+				return formattedValue;
+			} else {
+				return value;
+			}
+		} else {
+			return value;
+		}
+	}
+
 	// current value
 	let isDragging: boolean = false;
 	let startX: number = 0;
@@ -67,6 +81,7 @@
 	$: percentage = `${((value - min) / (max - min)) * 100}%`;
 	$: barStyle = vertical ? `height: ${percentage}; bottom: 0%` : `width: ${percentage}; left: 0%`;
 	$: btnStyle = vertical ? `bottom: ${percentage}` : `left: ${percentage}`;
+	$: formatContent = String(handleFormat(value));
 
 	// element
 	let runwayRef: null | HTMLElement = null;
@@ -194,13 +209,13 @@
 			style={btnStyle}
 		>
 			{#if $$slots.buttonRender}
-				<KTooltip disabled={!showTooltip} placement="top" content={String(value)}>
+				<KTooltip disabled={!showTooltip} placement="top" content={formatContent}>
 					<div slot="triggerEl" class={buttonCls}>
 						<slot name="buttonRender" />
 					</div>
 				</KTooltip>
 			{:else}
-				<KTooltip disabled={!showTooltip} placement="top" content={String(value)}>
+				<KTooltip disabled={!showTooltip} placement="top" content={formatContent}>
 					<div slot="triggerEl" class={buttonCls}></div>
 				</KTooltip>
 			{/if}

components/Slider/src/types.d.ts

@@ -11,6 +11,7 @@ export type KSliderProps = {
 	disabled: boolean;
 	vertical: boolean;
 	showTooltip: boolean;
+	format: (value: number) => number | string;
 	cls: ClassValue;
 	attrs: Record<string, string>;
 };

docs/components/KSlider.md

@@ -61,17 +61,18 @@ Add `size` attribute to change the size of Slider. It supports `sm`, `md` and `l
 
 ## Slider Props
 
-| Name     | Type                     | Default | Description                |
-| -------- | ------------------------ | ------- | -------------------------- |
-| value    | `number`                 | `0`     | Binding value              |
-| vertical | `boolean`                | `false` | Vertical mode              |
-| min      | `number`                 | `0`     | Minimum value              |
-| max      | `number`                 | `100`   | Maximum value              |
-| step     | `number`                 | `1`     | Step size                  |
-| disabled | `boolean`                | `false` | Whether Slider is disabled |
-| size     | `sm \| md \| lg`         | `md`    | Size of `slider`.          |
-| cls      | `string`                 | `-`     | Additional class           |
-| attrs    | `Record<string, string>` | `{}`    | Additional attributes      |
+| Name     | Type                                  | Default                    | Description                |
+| -------- | ------------------------------------- | -------------------------- | -------------------------- |
+| value    | `number`                              | `0`                        | Binding value              |
+| vertical | `boolean`                             | `false`                    | Vertical mode              |
+| format   | `(value: number) => number \| string` | `(value: number) => value` | Tooltip format value       |
+| min      | `number`                              | `0`                        | Minimum value              |
+| max      | `number`                              | `100`                      | Maximum value              |
+| step     | `number`                              | `1`                        | Step size                  |
+| disabled | `boolean`                             | `false`                    | Whether Slider is disabled |
+| size     | `sm \| md \| lg`                      | `md`                       | Size of `slider`.          |
+| cls      | `string`                              | `-`                        | Additional class           |
+| attrs    | `Record<string, string>`              | `{}`                       | Additional attributes      |
 
 ## Slider Events
 

docs/example/slider/basic.svelte

@@ -4,6 +4,9 @@
 	let step = 10;
 	let value1 = 0;
 	let value2 = 0;
+	let format = (value) => {
+		return 'Ikun' + value;
+	};
 	const handleInput1 = (event) => {
 		value1 = event.detail;
 	};
@@ -17,6 +20,11 @@
 	<p class="px-2">value: {value1}</p>
 </div>
 
+<div>
+	<KSlider {step} on:input={handleInput2} {format} value={value2}></KSlider>
+	<p class="px-2">format: {"(value) => {return 'Ikun'+value}"}</p>
+</div>
+
 <div>
 	<KSlider {step} on:input={handleInput2} value={value2}></KSlider>
 	<p class="px-2">value: {value2}</p>