enhance support for mono selection using radio btn

ryu-man · Nov 24, 2023 · 40d1327 · 40d1327
1 parent 252fa73
commit 40d1327
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/packages/core/src/radio/Radio.svelte b/packages/core/src/radio/Radio.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Label } from '@svelte-fui/core';
 	import { nanoid } from 'nanoid';
-	import { classnames } from '../internal';
 	import { getRadioGroupContext } from './context';
+	import { classnames } from '../internal';
 
 	const { disabled$, required$, value$, name$, layout$ } = getRadioGroupContext();
 
@@ -16,8 +16,6 @@
 	$: position = $layout$ === 'stacked-horizontal' ? 'below' : 'after';
 	$: isVertical = position === 'below';
 
-	$: console.log(position);
-
 	function onClickHandler() {
 		value$.set(value);
 	}
@@ -40,9 +38,12 @@
 			><path d="M10 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Z" fill="currentColor" />
 		</svg>
 	</div>
-	<Label for={id} class={classnames("fui-radio-label", position)}>
-		<slot />
-	</Label>
+
+	{#if $$slots.default}
+		<Label for={id} class={classnames('fui-radio-label', position)}>
+			<slot />
+		</Label>
+	{/if}
 </span>
 
 <style lang="postcss">

diff --git a/packages/core/src/table/Table.stories.svelte b/packages/core/src/table/Table.stories.svelte
@@ -110,7 +110,7 @@
 		<Table {...args} {data} bind:selectedItems let:data>
 			<thead>
 				<Tr header>
-					<TdSelection />
+					<TdSelection type="radio" hidden />
 					<Th key={(d) => d.file.desc}>File</Th>
 					<Th key={(d) => d.author}>Author</Th>
 					<Th key={(d) => d.last_updated}>Last updated</Th>
@@ -120,7 +120,7 @@
 			<tbody>
 				{#each data as item (JSON.stringify(item))}
 					<Tr appearance="none" data={item}>
-						<TdSelection />
+						<TdSelection type="radio" />
 						<Td class="flex items-center gap-2">
 							<Icon src={item.file.icon} />
 							<span>{item.file.desc}</span>

diff --git a/packages/core/src/table/TdSelection.svelte b/packages/core/src/table/TdSelection.svelte
@@ -22,13 +22,17 @@
 		checked$ = row$.selected$;
 	}
 
+	const element = rowContext.header ? 'th' : 'td';
+
 	// export let checked: boolean | 'mixed' = false;
 	export let type: 'checkbox' | 'radio' = 'checkbox';
 	export let subtle = false;
+	export let hidden = false;
 
-	function onChange(ev: Event) {
+	function onCheckboxChange(ev: Event) {
 		const currentTarget = ev.currentTarget as HTMLInputElement;
 
+		console.log(currentTarget.checked);
 		if (rowContext.header) {
 			if (currentTarget.checked) {
 				$allRows$.forEach((d) => d.selected$.set(true));
@@ -42,15 +46,24 @@
 			row$.selected$.set(currentTarget.checked);
 		}
 	}
+
+	function onRadioChange(ev: Event) {
+		const currentTarget = ev.currentTarget as HTMLInputElement;
+
+		$allRows$.forEach((d) => d.selected$.set(false));
+		if (row$) {
+			row$.selected$.set(currentTarget.checked);
+		}
+	}
 </script>
 
-<td class={classnames('fui-table-cell-selection', $size$, { subtle })}>
+<svelte:element this={element} class={classnames('fui-table-cell-selection', $size$, { subtle, hidden })}>
 	{#if type === 'checkbox'}
-		<Checkbox checked={$checked$} on:change={onChange} />
+		<Checkbox checked={$checked$} on:change={onCheckboxChange} />
 	{:else}
-		<Radio checked={$checked$} />
+		<Radio checked={$checked$} name="selected-row" on:change={onRadioChange} />
 	{/if}
-</td>
+</svelte:element>
 
 <style lang="postcss">
 	/* Need to implement focus style */
@@ -88,5 +101,6 @@
 
 	.hidden {
 		@apply invisible;
+		display: table-cell;
 	}
 </style>