chore: sync main branch

ikun-svelte · Feb 22, 2024 · 95d9b44 · 95d9b44
2 parents a7d1083 + 33411de
commit 95d9b44
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 14 deletions.
diff --git a/components/ButtonGroup/src/types.d.ts b/components/ButtonGroup/src/types.d.ts
@@ -1,7 +1,7 @@
 /// <reference types="svelte" />
-import type { IKunTypePro } from '@ikun-ui/utils/src';
+import type { IKunTypePro } from '@ikun-ui/utils';
 import type { ClassValue } from 'clsx';
-import { IKunSize } from '@ikun-ui/utils/src';
+import { IKunSize } from '@ikun-ui/utils';
 
 export type KButtonGroupProps = {
 	type: IKunTypePro;

diff --git a/components/Dropdown/src/index.svelte b/components/Dropdown/src/index.svelte
@@ -4,7 +4,7 @@
 	import type { KDropdownProps } from './types';
 	import { KPopover } from '@ikun-ui/popover';
 	import { createEventDispatcher, setContext } from 'svelte';
-	import { KScrollbar } from '@ikun-ui/scrollbar/src/index.js';
+	import { KScrollbar } from '@ikun-ui/scrollbar';
 
 	export let placement: KDropdownProps['placement'] = 'bottom';
 	// hover click manual

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,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>"`;
diff --git a/components/Slider/__test__/slider.spec.ts b/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,

diff --git a/components/Slider/src/index.svelte b/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"

diff --git a/components/Slider/src/types.d.ts b/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>;

diff --git a/docs/components/KSlider.md b/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           |

diff --git a/docs/example/flex/basic.svelte b/docs/example/flex/basic.svelte
@@ -2,7 +2,7 @@
 	import { KFlex } from '@ikun-ui/flex';
 	import { KRadio } from '@ikun-ui/radio';
 	import { KRadioGroup } from '@ikun-ui/radio-group';
-	let value = '2';
+	let value = '1';
 	let vertical = false;
 	const handleUpdated = (e) => {
 		value = e.detail;

diff --git a/docs/example/slider/discrete.svelte b/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>
diff --git a/preset/src/shortcuts/src/slider.ts b/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'
 };