fix(Checkbox): cleaned up context

N00nDay · Oct 23, 2022 · a413b6a · a413b6a
1 parent 4a7398d
commit a413b6a
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 59 deletions.
diff --git a/src/lib/components/checkbox/Checkbox.svelte b/src/lib/components/checkbox/Checkbox.svelte
@@ -1,26 +1,10 @@
-<script lang="ts" context="module">
-	export const CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID = 'checkbox-group-checkbox-context-id';
-</script>
-
 <script lang="ts">
-	import { useContext } from '$lib/utils/useContext';
-
 	import { setContext } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
-	import { CHECKBOX_GROUP_CONTEXT_ID } from './CheckboxGroup.svelte';
 	export let name: string;
 	export let value: string;
 
-	useContext({
-		context_id: CHECKBOX_GROUP_CONTEXT_ID,
-		parent: 'CheckboxGroup',
-		component: 'CheckboxGroup.Checkbox'
-	});
-
-	setContext(CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID, {
-		checkbox: true,
-		name
-	});
+	setContext('checkbox-name', name);
 
 	const defaultClass =
 		'checkbox checked:bg-primary dark:checked:bg-primary hover:border-primary dark:hover:border-primary bg-light-surface dark:bg-dark-surface h-6 w-6 text-primary light-border-base dark:dark-border-base rounded-md cursor-pointer';

diff --git a/src/lib/components/checkbox/CheckboxGroup.svelte b/src/lib/components/checkbox/CheckboxGroup.svelte
@@ -1,20 +1,13 @@
-<script lang="ts" context="module">
-	export const CHECKBOX_GROUP_CONTEXT_ID = 'checkbox-group-context-id';
-</script>
-
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
 	import { setContext } from 'svelte';
 
 	export let inline = false;
 
+	setContext('checkbox-inline', inline);
+
 	const defaultClass = 'space-y-5 mt-2';
 	$: finalClass = twMerge(defaultClass, $$props.class);
-
-	setContext(CHECKBOX_GROUP_CONTEXT_ID, {
-		checkbox: true,
-		inline
-	});
 </script>
 
 <div>

diff --git a/src/lib/components/checkbox/Description.svelte b/src/lib/components/checkbox/Description.svelte
@@ -1,29 +1,14 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
-	import { CHECKBOX_GROUP_CONTEXT_ID } from './CheckboxGroup.svelte';
-	import { CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID } from './Checkbox.svelte';
-	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte';
 	import { get_current_component } from 'svelte/internal';
 	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
 	export let use: ActionArray = [];
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	useContext({
-		context_id: CHECKBOX_GROUP_CONTEXT_ID,
-		parent: 'CheckboxGroup',
-		component: 'CheckboxGroup.Checkbox.Label'
-	});
-
-	useContext({
-		context_id: CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID,
-		parent: 'CheckboxGroup.Checkbox',
-		component: 'CheckboxGroup.Checkbox.Label'
-	});
-
-	const { inline }: { inline: boolean } = getContext(CHECKBOX_GROUP_CONTEXT_ID);
-	const { name }: { name: string } = getContext(CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID);
+	const inline: boolean = getContext('checkbox-inline');
+	const name: string = getContext('checkbox-name');
 
 	const defaultClass = 'text-light-secondary-content dark:text-dark-secondary-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);

diff --git a/src/lib/components/checkbox/Label.svelte b/src/lib/components/checkbox/Label.svelte
@@ -1,23 +1,8 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge';
-	import { CHECKBOX_GROUP_CONTEXT_ID } from './CheckboxGroup.svelte';
-	import { useContext } from '../../utils/useContext';
 	import { getContext } from 'svelte';
-	import { CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID } from './Checkbox.svelte';
 
-	useContext({
-		context_id: CHECKBOX_GROUP_CONTEXT_ID,
-		parent: 'CheckboxGroup',
-		component: 'CheckboxGroup.Checkbox.Label'
-	});
-
-	useContext({
-		context_id: CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID,
-		parent: 'CheckboxGroup.Checkbox',
-		component: 'CheckboxGroup.Checkbox.Label'
-	});
-
-	const { name }: { name: string } = getContext(CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID);
+	const name: string = getContext('checkbox-name');
 
 	const defaultClass = 'font-medium text-light-content dark:text-dark-content cursor-pointer';
 	$: finalClass = twMerge(defaultClass, $$props.class);