Merge pull request #46 from BeeMargarida/core/checkbox-group

[@svelteui/core] Checkbox group
svelteuidev · May 7, 2022 · fd3ed24 · fd3ed24
2 parents 8bada96 + 3ea821d
commit fd3ed24
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 4 deletions.
diff --git a/packages/svelteui-core/src/lib/components/Checkbox/Checkbox.styles.ts b/packages/svelteui-core/src/lib/components/Checkbox/Checkbox.styles.ts
@@ -7,6 +7,8 @@ export interface CheckboxProps extends DefaultProps {
 	checked: boolean;
 	disabled: boolean;
 	indeterminate: boolean;
+	value: string;
+
 	label: Component | string;
 	radius: SvelteUINumberSize | number;
 	size: SvelteUINumberSize;

diff --git a/packages/svelteui-core/src/lib/components/Checkbox/Checkbox.svelte b/packages/svelteui-core/src/lib/components/Checkbox/Checkbox.svelte
@@ -21,6 +21,8 @@
 	export let id: $$CheckboxProps['id'] = randomID();
 	/** Will set the checkbox to disabled state */
 	export let disabled: $$CheckboxProps['disabled'] = false;
+	/** The value of the checkbox */
+	export let value: $$CheckboxProps['value'] = null;
 	/** The value used to set the value of checkbox as checked or unchecked */
 	export let checked: $$CheckboxProps['checked'] = false;
 	/** Sets the checkbox to indetermined state, overrides the checked state */
@@ -81,6 +83,7 @@
 				border: 'transparent',
 				backgroundColor: `$${color}600`,
 				color: '#ffffff',
+				borderRadius: `$${radius}`,
 
 				[`& + .icon-wrapper`]: {
 					opacity: 1,
@@ -121,6 +124,7 @@
 			height: sizes[size],
 			minWidth: sizes[size],
 			minHeight: sizes[size],
+			borderRadius: `$${radius}`,
 			position: 'absolute',
 			zIndex: 1,
 			top: 0,
@@ -173,9 +177,10 @@ A checkbox input component using the theme styles with support for a label and i
 			bind:checked
 			class="input"
 			class:disabled
+			type="checkbox"
 			{disabled}
+			{value}
 			{id}
-			type="checkbox"
 		/>
 		<ThemeIcon class="icon-wrapper" {size}>
 			<slot>

diff --git a/packages/svelteui-core/src/lib/components/Checkbox/CheckboxGroup/CheckboxGroup.styles.ts b/packages/svelteui-core/src/lib/components/Checkbox/CheckboxGroup/CheckboxGroup.styles.ts
@@ -0,0 +1,14 @@
+import type { CSS, DefaultProps, SvelteUIColor, SvelteUINumberSize } from '$lib/styles';
+
+export interface CheckboxGroupProps extends DefaultProps {
+	color: SvelteUIColor;
+	items: { label: string; value: string }[];
+	value: string[];
+	label: string;
+	size: SvelteUINumberSize;
+	radius: SvelteUINumberSize | number;
+	direction: 'row' | 'column';
+	align: CSS['alignItems'];
+	spacing: SvelteUINumberSize;
+	wrapperProps: { [key: string]: any };
+}
diff --git a/packages/svelteui-core/src/lib/components/Checkbox/CheckboxGroup/CheckboxGroup.svelte b/packages/svelteui-core/src/lib/components/Checkbox/CheckboxGroup/CheckboxGroup.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import InputWrapper from '../../InputWrapper/InputWrapper.svelte';
+	import Group from '../../Group/Group.svelte';
+    import Checkbox from '../Checkbox.svelte';
+	import type { CheckboxGroupProps as $$CheckboxGroupProps } from './CheckboxGroup.styles';
+
+	/** Used for custom classes to be applied to the checkbox group e.g. Tailwind classes */
+	export let className: $$CheckboxGroupProps['className'] = '';
+	export { className as class };
+	/** Css prop for custom theming the component */
+	export let override: $$CheckboxGroupProps['override'] = {};
+	/** Checkbox group color  when activated from theme */
+	export let color: $$CheckboxGroupProps['color'] = 'gray';
+	/** The values of the currently selected checkboxes */
+	export let items: $$CheckboxGroupProps['items'] = [];
+	/** The values of the currently selected checkboxes */
+	export let value: $$CheckboxGroupProps['value'] = [];
+	/** The label of the checkbox */
+	export let label: $$CheckboxGroupProps['label'] = null;
+	/** Predefined checkbox size */
+	export let size: $$CheckboxGroupProps['size'] = 'md';
+    /** Predefined checkbox radius */
+	export let radius: $$CheckboxGroupProps['radius'] = 'sm';
+	/** Predefined checkbox spacing between checkboxes in horizontal orientation */
+	export let direction: $$CheckboxGroupProps['direction'] = 'row';
+	/** Predefined checkbox spacing between checkboxes in horizontal orientation */
+	export let align: $$CheckboxGroupProps['align'] = 'flex-start';
+	/** Predefined checkbox spacing between checkboxes in horizontal orientation */
+	export let spacing: $$CheckboxGroupProps['spacing'] = 'md';
+	/** The props to pass to the wrapper component */
+	export let wrapperProps: $$CheckboxGroupProps['wrapperProps'] = {};
+
+    function onChanged(item, el) {        
+        if (el.checked) value = [...value, item];
+        else value = value.filter(val => val !== item);
+    }
+</script>
+
+<!--
+@component
+**UNSTABLE**: new API, yet to be vetted.
+
+A checkbox group component using the theme styles and builds a set of checkboxes according to
+the items passed.
+	
+@see https://svelteui-docs.vercel.app/docs/core/checkbox
+@example
+    ```svelte
+    <CheckboxGroup bind:value items={items} />
+    <CheckboxGroup label={"Choose your favorite framework"} description={"Choose carefuly"} bind:value={value} items={items} />
+    <CheckboxGroup bind:value={value} items={items} direction={'column'}/>
+    ```
+-->
+
+<InputWrapper class="{className}" {label} {override} {size} {...wrapperProps} {...$$restProps}>
+    <Group {direction} {spacing} {align}>
+        {#each items as item}
+            <Checkbox
+                label={item.label}
+                value={item.value}
+                checked={value.includes(item.value)}
+                {radius}
+                {size}
+                {color}
+                on:change={(e) => onChanged(item.value, e.target)}
+            />
+        {/each}
+    </Group>
+</InputWrapper>
diff --git a/packages/svelteui-core/src/lib/components/Checkbox/index.ts b/packages/svelteui-core/src/lib/components/Checkbox/index.ts
@@ -1,2 +1,4 @@
 export { default as Checkbox } from './Checkbox.svelte';
+export { default as CheckboxGroup } from './CheckboxGroup/CheckboxGroup.svelte';
 export * as CheckboxStyles from './Checkbox.styles';
+export * as CheckboxGroupStyles from './CheckboxGroup/CheckboxGroup.styles';
diff --git a/packages/svelteui-core/src/lib/components/Group/Group.svelte b/packages/svelteui-core/src/lib/components/Group/Group.svelte
@@ -3,7 +3,6 @@
 	import { GroupErrors } from './Group.errors';
 	import Box from '../Box/Box.svelte';
 	import Error from '$lib/internal/errors/Error.svelte';
-	import type { CSS } from '$lib/styles';
 	import type { GroupProps as $$GroupProps } from './Group.styles';
 
 	/** Used for custom classes to be applied to the button e.g. Tailwind classes */

diff --git a/packages/svelteui-core/src/lib/components/InputWrapper/InputWrapper.svelte b/packages/svelteui-core/src/lib/components/InputWrapper/InputWrapper.svelte
@@ -13,9 +13,9 @@
 	/** Input label, displayed before input */
 	export let label: $$InputWrapperProps['label'] = 'label';
 	/** Input description, displayed after label */
-	export let description: $$InputWrapperProps['description'] = 'description';
+	export let description: $$InputWrapperProps['description'] = null;
 	/** Displays error message after input */
-	export let error: $$InputWrapperProps['error'] = 'error';
+	export let error: $$InputWrapperProps['error'] = null;
 	/** Adds red asterisk on the right side of label */
 	export let required: $$InputWrapperProps['required'] = false;
 	/** Props spread to label element */