feat: added discrete values for KSlider (#399)

* feat: added showStop attribute for Slider Component

* docs: added showStop attribute docs for Slider Component

* feat: added showStop attribute for Slider Component

* chore: updated unit test snap for KForm

components/Slider/__test__/__snapshots__/slider.spec.ts.snap

@@ -1,15 +1,17 @@
 // 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 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: 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 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 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 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 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 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: 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 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: showStops 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--stop k-slider--stop--md" style="left: 10%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 20%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 30%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 40%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 50%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 60%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 70%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 80%"></div><div class="k-slider--stop k-slider--stop--md" style="left: 90%"></div> <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: 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: 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: 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>"`;
+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 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>"`;

components/Slider/__test__/slider.spec.ts

@@ -161,6 +161,27 @@ describe('Test: KSlider', () => {
 		expect(host.innerHTML).matchSnapshot();
 	});
 
+	test('props: showStops', async () => {
+		const step: number = 10;
+		const min: number = 0;
+		const max: number = 100;
+		const instance = new KSlider({
+			target: host,
+			props: {
+				step,
+				max,
+				min,
+				showStops: true
+			}
+		});
+		expect(instance).toBeTruthy();
+		await tick();
+		expect(host.innerHTML.includes('k-slider--stop')).toBe(true);
+		const stopsElm = host.querySelectorAll('.k-slider--stop');
+		expect(stopsElm.length).toBe((max - min) / step - 1);
+		expect(host.innerHTML).matchSnapshot();
+	});
+
 	test('props: cls', async () => {
 		const instance = new KSlider({
 			target: host,

components/Slider/src/index.svelte

@@ -17,6 +17,7 @@
 	export let cls: KSliderProps['cls'] = undefined;
 	export let showTooltip: KSliderProps['showTooltip'] = true;
 	export let format: KSliderProps['format'];
+	export let showStops: KSliderProps['showStops'] = false;
 
 	/*********************** KForm logic start ************************/
 	let disabledFrom = false;
@@ -66,6 +67,12 @@
 		}
 	}
 
+	// discrete showStops attr
+	let discreteNum = (max - min) / step - 1;
+	$: discreteDivsArray = showStops
+		? Array.from({ length: discreteNum }, (_, index) => index + 1)
+		: [];
+
 	// current value
 	let isDragging: boolean = false;
 	let startX: number = 0;
@@ -198,10 +205,28 @@
 		[`${prefixCls}--bar`]: !vertical,
 		[`${prefixCls}--bar__vertical`]: vertical
 	});
+	$: discreteCls = clsx(
+		{
+			[`${prefixCls}--stop`]: !vertical,
+			[`${prefixCls}--stop__vertical`]: vertical
+		},
+		`${prefixCls}--stop--${sizeInner}`
+	);
 </script>
 
 <div class={baseCls} {...$$restProps} {...attrs}>
 	<div bind:this={runwayRef} class={runwayCls} aria-hidden="true" on:mousedown={handleRunwayClick}>
+		{#if discreteDivsArray.length > 0}
+			{#each discreteDivsArray as discreteDiv}
+				<div
+					class={discreteCls}
+					style={vertical
+						? `top: ${(discreteDiv * (max - min)) / step}%`
+						: `left: ${(discreteDiv * (max - min)) / step}%`}
+				></div>
+			{/each}
+		{/if}
+
 		<div
 			class={buttonWrapperCls}
 			aria-hidden="true"

components/Slider/src/types.d.ts

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

docs/components/KSlider.md

@@ -59,16 +59,23 @@ Add `size` attribute to change the size of Slider. It supports `sm`, `md` and `l
 
 <demo src="slider/sizes.svelte" github="Slider"></demo>
 
+## Discrete values
+
+Set step size with the `step` attribute. You can display breakpoints by setting the `showStops` attribute
+
+<demo src="slider/discrete.svelte" github="Slider"></demo>
+
 ## Slider Props
 
 | 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                  |
+| showStop | `boolean`                             | `false`                    | Display breakpoints        |
 | disabled | `boolean`                             | `false`                    | Whether Slider is disabled |
 | size     | `sm \| md \| lg`                      | `md`                       | Size of `slider`.          |
 | cls      | `string`                              | `-`                        | Additional class           |

docs/example/slider/discrete.svelte

@@ -0,0 +1,23 @@
+<script>
+	import { KSlider } from '@ikun-ui/slider';
+
+	let value = 0;
+	let min = 0;
+	let max = 100;
+	let step = 10;
+	const handleInput = (event) => {
+		value = event.detail;
+	};
+</script>
+
+<div>
+	<KSlider {max} {min} on:input={handleInput} {step} {value}></KSlider>
+	<KSlider {max} {min} on:input={handleInput} showStops size="lg" {step} {value}></KSlider>
+	<p class="px-2">value: {value}</p>
+</div>
+
+<div class="h-100 flex">
+	<KSlider {max} {min} on:input={handleInput} {step} {value} vertical></KSlider>
+	<KSlider {max} {min} on:input={handleInput} showStops size="lg" {step} {value} vertical></KSlider>
+</div>
+<p class="px-2">value: {value}</p>

preset/src/shortcuts/src/slider.ts

@@ -43,5 +43,12 @@ export const sliderShortcuts: Record<string, string> = {
 	'k-slider--button--md': 'w-16px h-16px',
 	'k-slider--button--lg': 'w-20px h-20px',
 
-	'k-slider--button': 'fcc b-2px b-solid b-ikun-main rd-50% bg-ikun-white line-height-none'
+	'k-slider--button': 'fcc b-2px b-solid b-ikun-main rd-50% bg-ikun-white line-height-none',
+
+	// discrete stop
+	'k-slider--stop': 'inline-block bg-ikun-main absolute top-50% translate-y--50% rd-50%',
+	'k-slider--stop__vertical': 'rd-50% bg-ikun-main absolute left-50% translate-x--50%',
+	'k-slider--stop--sm': 'w-3px h-3px',
+	'k-slider--stop--md': 'w-4px h-4px',
+	'k-slider--stop--lg': 'w-5px h-5px'
 };