fix(Tabs): removed neeless context

fix(Tabs): variant styles are now reactive
N00nDay · Feb 5, 2023 · 1157efd · 1157efd
1 parent af36615
commit 1157efd
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 29 deletions.
diff --git a/src/lib/components/tabs/Tab.svelte b/src/lib/components/tabs/Tab.svelte
@@ -1,10 +1,4 @@
-<script lang="ts" context="module">
-	export const TABS_TAB_CONTEXT_ID = 'tabs-tab-context-id';
-</script>
-
 <script lang="ts">
-	import { TABS_CONTEXT_ID } from './Tabs.svelte';
-	import { useContext } from '$lib/utils/useContext';
 	import { getContext, setContext } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import HoverBackground from '../HoverBackground.svelte';
@@ -18,19 +12,10 @@
 	export let href: string;
 	export let key: string;
 
-	useContext({
-		context_id: TABS_CONTEXT_ID,
-		parent: 'Tabs',
-		component: 'Tabs.Tab'
-	});
-
-	setContext(TABS_TAB_CONTEXT_ID, {
-		tab: true,
-		key
-	});
+	setContext('tab-key', key);
 
-	const { variant, currentTab }: { variant: string; currentTab: Writable<string> } =
-		getContext(TABS_CONTEXT_ID);
+	const variant: string = getContext('tabs-variant');
+	const currentTab: Writable<string> = getContext('tabs-currentTab');
 
 	let defaultClass = '';
 	$: if (key === $currentTab) {

diff --git a/src/lib/components/tabs/Tabs.svelte b/src/lib/components/tabs/Tabs.svelte
@@ -1,7 +1,3 @@
-<script lang="ts" context="module">
-	export const TABS_CONTEXT_ID = 'tabs-context-id';
-</script>
-
 <script lang="ts">
 	import { setContext } from 'svelte';
 	import { writable, type Writable } from 'svelte/store';
@@ -19,14 +15,11 @@
 	let selected: Writable<string> = writable(currentTab);
 	$: $selected = currentTab;
 
-	setContext(TABS_CONTEXT_ID, {
-		tabs: true,
-		variant,
-		currentTab: selected
-	});
+	setContext('tabs-variant', variant);
+	setContext('tabs-currentTab', selected);
 
 	let defaultContainerClass = '';
-	if (variant === 'bar') {
+	$: if (variant === 'bar') {
 		defaultContainerClass =
 			'border-light-border dark:border-dark-border overflow-hidden rounded-md shadow-md border dark:shadow-black';
 	} else {
@@ -35,7 +28,7 @@
 	$: finalContainerClass = twMerge(defaultContainerClass, containerClass);
 
 	let defaultClass = '';
-	if (variant === 'bar') {
+	$: if (variant === 'bar') {
 		defaultClass =
 			'-mb-px flex justify-evenly isolate divide-x divide-light-border dark:divide-dark-border';
 	} else if (variant === 'full-width') {