feat: added radio group component (#245)

* feat: added radio group component * chore: updated code * chore: updated code * test: added radio group unit test * docs: added radio group document * docs: added radio group document
ikun-svelte · Sep 13, 2023 · 4a56d80 · 4a56d80
1 parent 4290fe5
commit 4a56d80
Show file tree

Hide file tree

Showing 29 changed files with 706 additions and 62 deletions.
diff --git a/components/Checkbox/package.json b/components/Checkbox/package.json
@@ -31,7 +31,8 @@
 		"@ikun-ui/icon": "workspace:*",
 		"@ikun-ui/utils": "workspace:*",
 		"@ikun-ui/checkbox-group": "workspace:*",
-		"baiwusanyu-utils": "^1.0.14"
+		"baiwusanyu-utils": "^1.0.14",
+		"clsx": "^2.0.0"
 	},
 	"devDependencies": {
 		"@tsconfig/svelte": "^5.0.0",

diff --git a/components/Checkbox/src/index.svelte b/components/Checkbox/src/index.svelte
@@ -15,7 +15,6 @@
 	export let indeterminate: KCheckboxProps['indeterminate'] = false;
 	const dispatch = createEventDispatcher();
 
-	// TODO unit test
 	$: isIndeterminate = indeterminate;
 
 	const ctx = getContext(checkboxGroupKey) as checkboxGroupCtx;

diff --git a/components/CheckboxGroup/__test__/__snapshots__/checkbox-group.spec.ts.snap b/components/CheckboxGroup/__test__/__snapshots__/checkbox-group.spec.ts.snap
@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test: KCheckboxGroup > When it is disabled, the value changes and the status of the checkbox not changes. 1`] = `"<div class=\\"h-full\\" style=\\"width: 600px;\\"><button id=\\"group_change_btn\\"></button> <div class=\\"k-checkbox-group k-checkbox-group--base\\"><label class=\\"k-checkbox--base k-checkbox--base__dark\\"><input type=\\"checkbox\\" value=\\"true\\" hidden=\\"\\"> <div class=\\"k-checkbox--box bg-ikun-main border-ikun-main animate-ikun-checking\\"><div style=\\"animation: __svelte_185617033_0 200ms linear 0ms 1 both;\\"><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 1</label> <label class=\\"k-checkbox--base k-checkbox--base__dark\\"><input type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box animate-ikun-checking\\"> </div> 2</label> <label class=\\"k-checkbox--base k-checkbox--base__dark\\"><input type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box animate-ikun-checking\\"><div style=\\"animation: __svelte_185617033_0 200ms linear 0ms 1 both;\\"><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 3</label></div></div>"`;
-
-exports[`Test: KCheckboxGroup > When it is disabled, the value changes and the status of the checkbox not changes. 2`] = `"<div class=\\"h-full\\" style=\\"width: 600px;\\"><button id=\\"group_change_disabled_btn\\"></button> <div class=\\"k-checkbox-group k-checkbox-group--base\\"><label class=\\"k-checkbox--base k-checkbox--base__dark k-cur-disabled\\"><input disabled=\\"\\" type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box k-checkbox--box__disabled animate-ikun-checking\\"> </div> 1</label> <label class=\\"k-checkbox--base k-checkbox--base__dark k-cur-disabled\\"><input disabled=\\"\\" type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box k-checkbox--box__disabled animate-ikun-checking\\"> </div> 2</label> <label class=\\"k-checkbox--base k-checkbox--base__dark k-cur-disabled\\"><input disabled=\\"\\" type=\\"checkbox\\" value=\\"true\\" hidden=\\"\\"> <div class=\\"k-checkbox--box k-checkbox--box__disabled animate-ikun-checking\\"><div><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 3</label></div></div>"`;
+exports[`Test: KCheckboxGroup > When it is disabled, the value changes and the status of the checkbox not changes. 1`] = `"<div class=\\"h-full\\" style=\\"width: 600px;\\"><button id=\\"group_change_disabled_btn\\"></button> <div class=\\"k-checkbox-group k-checkbox-group--base\\"><label class=\\"k-checkbox--base k-checkbox--base__dark k-cur-disabled\\"><input disabled=\\"\\" type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box k-checkbox--box__disabled animate-ikun-checking\\"> </div> 1</label> <label class=\\"k-checkbox--base k-checkbox--base__dark k-cur-disabled\\"><input disabled=\\"\\" type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box k-checkbox--box__disabled animate-ikun-checking\\"> </div> 2</label> <label class=\\"k-checkbox--base k-checkbox--base__dark k-cur-disabled\\"><input disabled=\\"\\" type=\\"checkbox\\" value=\\"true\\" hidden=\\"\\"> <div class=\\"k-checkbox--box k-checkbox--box__disabled animate-ikun-checking\\"><div><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 3</label></div></div>"`;
 
 exports[`Test: KCheckboxGroup > When it is disabled, the value of the checkbox can be initialized. 1`] = `"<div class=\\"h-full\\" style=\\"width: 600px;\\"><div class=\\"k-checkbox-group k-checkbox-group--base\\"><label class=\\"k-checkbox--base k-checkbox--base__dark k-cur-disabled\\"><input disabled=\\"\\" type=\\"checkbox\\" value=\\"true\\" hidden=\\"\\"> <div class=\\"k-checkbox--box k-checkbox--box__disabled animate-ikun-checking\\"><div><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 1</label> <label class=\\"k-checkbox--base k-checkbox--base__dark k-cur-disabled\\"><input disabled=\\"\\" type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box k-checkbox--box__disabled animate-ikun-checking\\"> </div> 2</label> <label class=\\"k-checkbox--base k-checkbox--base__dark k-cur-disabled\\"><input disabled=\\"\\" type=\\"checkbox\\" value=\\"true\\" hidden=\\"\\"> <div class=\\"k-checkbox--box k-checkbox--box__disabled animate-ikun-checking\\"><div><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 3</label></div></div>"`;
 
 exports[`Test: KCheckboxGroup > When it is disabled, when a value of the checkbox changes, the group value is not triggered. 1`] = `"<div class=\\"h-full\\" style=\\"width: 600px;\\"><div id=\\"group_trigger_value\\">3</div> <div class=\\"k-checkbox-group k-checkbox-group--base\\"><label class=\\"k-checkbox--base k-checkbox--base__dark k-cur-disabled\\"><input disabled=\\"\\" type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box k-checkbox--box__disabled animate-ikun-checking\\"> </div> 1</label> <label class=\\"k-checkbox--base k-checkbox--base__dark k-cur-disabled\\"><input disabled=\\"\\" type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box k-checkbox--box__disabled animate-ikun-checking\\"> </div> 2</label> <label class=\\"k-checkbox--base k-checkbox--base__dark k-cur-disabled\\"><input disabled=\\"\\" type=\\"checkbox\\" value=\\"true\\" hidden=\\"\\"> <div class=\\"k-checkbox--box k-checkbox--box__disabled animate-ikun-checking\\"><div><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 3</label></div></div>"`;
 
+exports[`Test: KCheckboxGroup > When it is not disabled, the value changes and the status of the checkbox changes. 1`] = `"<div class=\\"h-full\\" style=\\"width: 600px;\\"><button id=\\"group_change_btn\\"></button> <div class=\\"k-checkbox-group k-checkbox-group--base\\"><label class=\\"k-checkbox--base k-checkbox--base__dark\\"><input type=\\"checkbox\\" value=\\"true\\" hidden=\\"\\"> <div class=\\"k-checkbox--box bg-ikun-main border-ikun-main animate-ikun-checking\\"><div style=\\"animation: __svelte_185617033_0 200ms linear 0ms 1 both;\\"><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 1</label> <label class=\\"k-checkbox--base k-checkbox--base__dark\\"><input type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box animate-ikun-checking\\"> </div> 2</label> <label class=\\"k-checkbox--base k-checkbox--base__dark\\"><input type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box animate-ikun-checking\\"><div style=\\"animation: __svelte_185617033_0 200ms linear 0ms 1 both;\\"><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 3</label></div></div>"`;
+
 exports[`Test: KCheckboxGroup > When it is not disabled, the value of the checkbox can be initialized. 1`] = `"<div class=\\"h-full\\" style=\\"width: 600px;\\"><div class=\\"k-checkbox-group k-checkbox-group--base\\"><label class=\\"k-checkbox--base k-checkbox--base__dark\\"><input type=\\"checkbox\\" value=\\"true\\" hidden=\\"\\"> <div class=\\"k-checkbox--box bg-ikun-main border-ikun-main animate-ikun-checking\\"><div><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 1</label> <label class=\\"k-checkbox--base k-checkbox--base__dark\\"><input type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box animate-ikun-checking\\"> </div> 2</label> <label class=\\"k-checkbox--base k-checkbox--base__dark\\"><input type=\\"checkbox\\" value=\\"true\\" hidden=\\"\\"> <div class=\\"k-checkbox--box bg-ikun-main border-ikun-main animate-ikun-checking\\"><div><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 3</label></div></div>"`;
 
 exports[`Test: KCheckboxGroup > When it is not disabled, when a value of the checkbox changes, the group value is triggered. 1`] = `"<div class=\\"h-full\\" style=\\"width: 600px;\\"><div id=\\"group_trigger_value\\"></div> <div class=\\"k-checkbox-group k-checkbox-group--base\\"><label class=\\"k-checkbox--base k-checkbox--base__dark\\"><input type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box animate-ikun-checking\\"><div style=\\"animation: __svelte_185617033_0 200ms linear 0ms 1 both, __svelte_185617033_0 200ms linear 0ms 1 both;\\"><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 1</label> <label class=\\"k-checkbox--base k-checkbox--base__dark\\"><input type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box animate-ikun-checking\\"><div style=\\"animation: __svelte_185617033_0 200ms linear 0ms 1 both, __svelte_185617033_0 200ms linear 0ms 1 both;\\"><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 2</label> <label class=\\"k-checkbox--base k-checkbox--base__dark\\"><input type=\\"checkbox\\" value=\\"false\\" hidden=\\"\\"> <div class=\\"k-checkbox--box animate-ikun-checking\\"><div style=\\"animation: __svelte_185617033_0 200ms linear 0ms 1 both;\\"><span class=\\"k-icon--base k-icon-transition i-carbon-checkmark !text-white\\" role=\\"\\" aria-hidden=\\"true\\" style=\\"width: 16px; height: 16px;\\"></span></div> </div> 3</label></div></div>"`;

diff --git a/components/CheckboxGroup/__test__/checkbox-group.spec.ts b/components/CheckboxGroup/__test__/checkbox-group.spec.ts
@@ -48,7 +48,7 @@ describe('Test: KCheckboxGroup', () => {
 		expect(host.innerHTML).matchSnapshot();
 	});
 
-	test('When it is disabled, the value changes and the status of the checkbox not changes.', async () => {
+	test('When it is not disabled, the value changes and the status of the checkbox changes.', async () => {
 		const instance = new KGroupChange({
 			target: host
 		});

diff --git a/components/CheckboxGroup/package.json b/components/CheckboxGroup/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@ikun-ui/checkbox-group",
-	"version": "0.0.9-beta.5",
+	"version": "0.0.9-beta.6",
 	"type": "module",
 	"main": "./src/index.ts",
 	"types": "src/index.ts",

diff --git a/components/Radio/package.json b/components/Radio/package.json
@@ -29,7 +29,9 @@
 	},
 	"dependencies": {
 		"@ikun-ui/icon": "workspace:*",
+		"@ikun-ui/radio-group": "workspace:*",
 		"@ikun-ui/utils": "workspace:*",
+		"clsx": "^2.0.0",
 		"baiwusanyu-utils": "^1.0.14"
 	},
 	"devDependencies": {

diff --git a/components/Radio/src/index.svelte b/components/Radio/src/index.svelte
@@ -1,56 +1,92 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import { fade } from 'svelte/transition';
+	import { createEventDispatcher, getContext } from 'svelte';
 	import { KIcon } from '@ikun-ui/icon';
-	import { clsx, type ClassValue } from 'clsx';
+	import { clsx } from 'clsx';
+	import type { KRadioProps } from './types';
+	import { radioGroupKey } from '@ikun-ui/utils';
+	import type { RadioGroupCtx } from '@ikun-ui/radio-group';
+	export let disabled: KRadioProps['disabled'] = false;
+	export let value: KRadioProps['value'] = false;
+	export let cls: KRadioProps['cls'] = undefined;
+	export let attrs: KRadioProps['attrs'] = {};
+	export let label: KRadioProps['label'] = '';
 
-	export let disabled = false;
-	export let value = false;
-	export let cls: ClassValue = undefined;
-	export let attrs: Record<string, string> = {};
-	export let label = '';
+	export let uid: KRadioProps['uid'] = '';
 	// updateValue
 	const dispatch = createEventDispatcher();
 
-	$: valueInner = value;
+	const ctx = getContext(radioGroupKey) as RadioGroupCtx;
+
+	let valueInner = value;
+	$: if (value !== valueInner && !ctx) {
+		valueInner = value;
+	}
+
 	let classChecking = '';
+	$: isDisabled = (ctx && ctx.disabled) || disabled;
 	const handleUpdateValue = () => {
-		if (disabled) return;
+		if (isDisabled) return;
 		if (valueInner) return;
-		dispatch('updateValue', !valueInner);
 
+		doUpdatedValue(!valueInner, true);
+		!ctx && dispatch('updateValue', !valueInner);
+	};
+
+	const doUpdatedValue = (v: boolean, inner: boolean = false) => {
 		classChecking = 'animate-ikun-checking';
 		setTimeout(() => {
 			classChecking = '';
 		}, 300);
+
+		if (uid && ctx) {
+			valueInner = v;
+			inner && ctx.updatedValueWhenRadioChange(v, uid);
+		}
 	};
 
-	$: cnames = clsx('k-radio--base k-radio--base__dark', { 'k-cur-disabled': disabled }, cls);
+	function setDisabled(v: boolean) {
+		isDisabled = v;
+	}
+
+	/**
+	 * Register radio
+	 */
+	function doRegisterRadio() {
+		if (uid && ctx) {
+			// Register checkbox
+			ctx.registerRadio(uid, {
+				doUpdatedValue,
+				setDisabled
+			});
+		}
+	}
+	doRegisterRadio();
+
+	$: cnames = clsx('k-radio--base k-radio--base__dark', { 'k-cur-disabled': isDisabled }, cls);
 	$: radioboxCls = clsx(
 		'k-radio--box',
 		{
-			'k-radio__selected': valueInner && !disabled,
-			'k-radio--box__disabled': disabled
+			'k-radio__selected': valueInner && !isDisabled,
+			'k-radio--box__disabled': isDisabled
 		},
 		classChecking
 	);
 	$: labelCls = clsx('k-radio--label', {
-		'text-ikun-main': valueInner && !disabled
+		'text-ikun-main': valueInner && !isDisabled
 	});
 </script>
 
 <label class={cnames} {...attrs}>
-	<input value={valueInner} {disabled} type="radio" on:change={handleUpdateValue} hidden />
+	<input
+		value={valueInner}
+		disabled={isDisabled}
+		type="radio"
+		on:click={handleUpdateValue}
+		hidden
+	/>
 	<div class={radioboxCls}>
 		{#if valueInner}
-			<div out:fade={{ duration: 200 }} in:fade={{ duration: 200 }}>
-				<KIcon
-					icon="i-carbon:radio-button-checked"
-					color="!text-white"
-					width="16px"
-					height="16px"
-				/>
-			</div>
+			<KIcon icon="i-carbon:radio-button-checked" color="!text-white" width="16px" height="16px" />
 		{/if}
 	</div>
 	<slot>

diff --git a/components/Radio/src/types.d.ts b/components/Radio/src/types.d.ts
@@ -1 +1,11 @@
 /// <reference types="svelte" />
+
+import type { ClassValue } from 'clsx';
+export type KRadioProps = {
+	value: boolean;
+	disabled: boolean;
+	cls: ClassValue;
+	attrs: Record<string, string>;
+	label: string;
+	uid: string | number;
+};