From 1691541b2f64804724e859be3cfe1e1a6f639d11 Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:11:47 +0700
Subject: [PATCH 01/14] feat(tab): tab content

---
 src/lib/components/Tabs/TabsContent.svelte | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/lib/components/Tabs/TabsContent.svelte

diff --git a/src/lib/components/Tabs/TabsContent.svelte b/src/lib/components/Tabs/TabsContent.svelte
new file mode 100644
index 0000000..56d6081
--- /dev/null
+++ b/src/lib/components/Tabs/TabsContent.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { getTabsContext, type TabsContext } from './tabsContext';
+
+	export let value: string;
+	const { activeTab } = getTabsContext();
+
+	$: isActive = $activeTab === value;
+</script>
+
+{#if isActive}
+	<div class="p-4">
+		<slot />
+	</div>
+{/if}

From 9121f1502fc6a7274f71906b176b89ff9feceace Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:12:15 +0700
Subject: [PATCH 02/14] feat(tab): tab list

---
 src/lib/components/Tabs/TabsList.svelte | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 src/lib/components/Tabs/TabsList.svelte

diff --git a/src/lib/components/Tabs/TabsList.svelte b/src/lib/components/Tabs/TabsList.svelte
new file mode 100644
index 0000000..aa870af
--- /dev/null
+++ b/src/lib/components/Tabs/TabsList.svelte
@@ -0,0 +1,5 @@
+<div class="border-b border-sucu-gray-light">
+	<nav class="-mb-px flex space-x-8 text-sucu-pink-hover">
+		<slot />
+	</nav>
+</div>

From 859366b23d351e8c15f205da54e4e83fa262182d Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:12:25 +0700
Subject: [PATCH 03/14] feat(tab): tab root

---
 src/lib/components/Tabs/TabsRoot.svelte | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/lib/components/Tabs/TabsRoot.svelte

diff --git a/src/lib/components/Tabs/TabsRoot.svelte b/src/lib/components/Tabs/TabsRoot.svelte
new file mode 100644
index 0000000..1f0eb2e
--- /dev/null
+++ b/src/lib/components/Tabs/TabsRoot.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { setTabsContext } from './tabsContext';
+
+	export let defaultActiveTab: string = '';
+
+	const tabs = setTabsContext();
+
+	if (defaultActiveTab) {
+		tabs.activeTab.set(defaultActiveTab);
+	}
+</script>
+
+<div>
+	<slot />
+</div>

From 59e2a08751b9fe94d5a2bf1622b9d1f6c3806da2 Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:12:34 +0700
Subject: [PATCH 04/14] feat(tab): tab trigger

---
 src/lib/components/Tabs/TabsTrigger.svelte | 50 ++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/lib/components/Tabs/TabsTrigger.svelte

diff --git a/src/lib/components/Tabs/TabsTrigger.svelte b/src/lib/components/Tabs/TabsTrigger.svelte
new file mode 100644
index 0000000..4d0fae0
--- /dev/null
+++ b/src/lib/components/Tabs/TabsTrigger.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { afterUpdate, createEventDispatcher, onMount } from 'svelte';
+	import { getTabsContext } from './tabsContext';
+	import { cn } from '$lib/utils';
+	import { slide } from 'svelte/transition';
+
+	export let value: string;
+	export let disabled: boolean = false;
+
+	const tabsContext = getTabsContext();
+	const { activeTab } = tabsContext;
+	const dispatch = createEventDispatcher();
+
+	onMount(() => {
+		tabsContext.registerTab({ value });
+	});
+
+	$: isActive = $activeTab === value;
+
+	function handleClick() {
+		if (!disabled) {
+			tabsContext.selectTab(value);
+			dispatch('click', { value });
+		}
+	}
+</script>
+
+<div class="relative inline-block">
+	<button
+		class={cn(
+			'mx-auto whitespace-nowrap py-4 px-1 font-medium text-xl text-sucu-gray hover:text-sucu-pink-hover hover:border-gray-300',
+			{
+				'border-sucu-pink-hover text-indigo': isActive
+			}
+		)}
+		on:click={handleClick}
+		{disabled}
+	>
+		<slot />
+	</button>
+
+	{#if isActive}
+		<div
+			class={cn(
+				'absolute left-1/2 transform -translate-x-1/2 -bottom-1 h-2 w-[120%] bg-sucu-pink-hover rounded-lg'
+			)}
+			transition:slide={{ duration: 300, axis: 'x' }}
+		/>
+	{/if}
+</div>

From 2015db1f02a6562d63fc189c10ee05b5cbbf6197 Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:12:43 +0700
Subject: [PATCH 05/14] feat(tab): tab context

---
 src/lib/components/Tabs/tabsContext.ts | 44 ++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/lib/components/Tabs/tabsContext.ts

diff --git a/src/lib/components/Tabs/tabsContext.ts b/src/lib/components/Tabs/tabsContext.ts
new file mode 100644
index 0000000..f76abd0
--- /dev/null
+++ b/src/lib/components/Tabs/tabsContext.ts
@@ -0,0 +1,44 @@
+import { writable, get, type Writable } from 'svelte/store';
+import { setContext, getContext } from 'svelte';
+
+interface Tab {
+	value: string;
+}
+
+export interface TabsContext {
+	activeTab: Writable<string>;
+	tabs: Writable<Tab[]>;
+	registerTab: (tab: Tab) => void;
+	selectTab: (value: string) => void;
+}
+
+const createTabs = (): TabsContext => {
+	const activeTab = writable<string>('');
+	const tabs = writable<Tab[]>([]);
+
+	const registerTab = (tab: Tab) => {
+		tabs.update((currTabs) => [...currTabs, tab]);
+		if (get(activeTab) === null) activeTab.set(tab.value);
+	};
+
+	const selectTab = (value: string) => {
+		activeTab.set(value);
+	};
+
+	return {
+		activeTab,
+		tabs,
+		registerTab,
+		selectTab
+	};
+};
+
+export const setTabsContext = (): TabsContext => {
+	const tabs = createTabs();
+	setContext<TabsContext>('tabs', tabs);
+	return tabs;
+};
+
+export const getTabsContext = (): TabsContext => {
+	return getContext<TabsContext>('tabs');
+};

From 6324e4bd8722f4d187bc825bf15717253d9fe509 Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:13:03 +0700
Subject: [PATCH 06/14] feat(tab): example tab's usage

---
 src/lib/components/Playground.svelte | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/lib/components/Playground.svelte b/src/lib/components/Playground.svelte
index b9d649b..b441e17 100644
--- a/src/lib/components/Playground.svelte
+++ b/src/lib/components/Playground.svelte
@@ -4,6 +4,10 @@
 	import TabCapsuleItem from './TabCapsule.svelte';
 	import Modal from '$lib/components/Modal/Modal.svelte';
 	import { modalShow } from './Modal/store';
+	import TabsRoot from './Tabs/TabsRoot.svelte';
+	import TabsList from './Tabs/TabsList.svelte';
+	import TabsTrigger from './Tabs/TabsTrigger.svelte';
+	import TabsContent from './Tabs/TabsContent.svelte';
 
 	modalShow.set(false);
 
@@ -158,6 +162,26 @@
 			<Modal />
 		{/if}
 	</section>
+
+	<section class="section">
+		<TabsRoot defaultActiveTab="all">
+			<TabsList>
+				<TabsTrigger value="all">ทั้งหมด</TabsTrigger>
+				<TabsTrigger value="sgcu">อบจ.</TabsTrigger>
+				<TabsTrigger value="sccu">สภานิสิต</TabsTrigger>
+			</TabsList>
+
+			<TabsContent value="all">
+				<p>This is the all tab content.</p>
+			</TabsContent>
+			<TabsContent value="sgcu">
+				<p>This is the sgcu tab content.</p>
+			</TabsContent>
+			<TabsContent value="sccu">
+				<p>This is the sccu tab content.</p>
+			</TabsContent>
+		</TabsRoot>
+	</section>
 </div>
 
 <style>

From 2a2c466cf1c5b32bdaf6ee0c0c4fdc91e93525b5 Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:26:16 +0700
Subject: [PATCH 07/14] fix: lint

---
 src/lib/components/Tabs/TabsContent.svelte | 2 +-
 src/lib/components/Tabs/TabsTrigger.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Tabs/TabsContent.svelte b/src/lib/components/Tabs/TabsContent.svelte
index 56d6081..5501466 100644
--- a/src/lib/components/Tabs/TabsContent.svelte
+++ b/src/lib/components/Tabs/TabsContent.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getTabsContext, type TabsContext } from './tabsContext';
+	import { getTabsContext } from './tabsContext';
 
 	export let value: string;
 	const { activeTab } = getTabsContext();
diff --git a/src/lib/components/Tabs/TabsTrigger.svelte b/src/lib/components/Tabs/TabsTrigger.svelte
index 4d0fae0..c6ef2b0 100644
--- a/src/lib/components/Tabs/TabsTrigger.svelte
+++ b/src/lib/components/Tabs/TabsTrigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { afterUpdate, createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onMount } from 'svelte';
 	import { getTabsContext } from './tabsContext';
 	import { cn } from '$lib/utils';
 	import { slide } from 'svelte/transition';

From a42874fec0555fedd185bd65dabc7eaa7e7d9353 Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:36:47 +0700
Subject: [PATCH 08/14] feat(tab): mobile

---
 src/lib/components/Tabs/TabsList.svelte    | 2 +-
 src/lib/components/Tabs/TabsTrigger.svelte | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Tabs/TabsList.svelte b/src/lib/components/Tabs/TabsList.svelte
index aa870af..94c8e43 100644
--- a/src/lib/components/Tabs/TabsList.svelte
+++ b/src/lib/components/Tabs/TabsList.svelte
@@ -1,5 +1,5 @@
 <div class="border-b border-sucu-gray-light">
-	<nav class="-mb-px flex space-x-8 text-sucu-pink-hover">
+	<nav class="-mb-2 sm:mb-0 flex space-x-8 text-sucu-pink-hover">
 		<slot />
 	</nav>
 </div>
diff --git a/src/lib/components/Tabs/TabsTrigger.svelte b/src/lib/components/Tabs/TabsTrigger.svelte
index c6ef2b0..bdc0bd5 100644
--- a/src/lib/components/Tabs/TabsTrigger.svelte
+++ b/src/lib/components/Tabs/TabsTrigger.svelte
@@ -28,7 +28,7 @@
 <div class="relative inline-block">
 	<button
 		class={cn(
-			'mx-auto whitespace-nowrap py-4 px-1 font-medium text-xl text-sucu-gray hover:text-sucu-pink-hover hover:border-gray-300',
+			'text-base mx-auto whitespace-nowrap py-4 px-1 font-medium sm:text-xl text-sucu-gray hover:text-sucu-pink-hover hover:border-gray-300',
 			{
 				'border-sucu-pink-hover text-indigo': isActive
 			}
@@ -42,7 +42,7 @@
 	{#if isActive}
 		<div
 			class={cn(
-				'absolute left-1/2 transform -translate-x-1/2 -bottom-1 h-2 w-[120%] bg-sucu-pink-hover rounded-lg'
+				'absolute left-1/2 transform -translate-x-1/2 bottom-[5.5px] sm:-bottom-1 h-1 sm:h-2 w-[120%] bg-sucu-pink-hover rounded-lg'
 			)}
 			transition:slide={{ duration: 300, axis: 'x' }}
 		/>

From 685c5272761fa841d342f31a757cb690e3a43ca7 Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:39:44 +0700
Subject: [PATCH 09/14] fix(tab): remove diabled props

---
 src/lib/components/Tabs/TabsTrigger.svelte | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Tabs/TabsTrigger.svelte b/src/lib/components/Tabs/TabsTrigger.svelte
index bdc0bd5..49f75c5 100644
--- a/src/lib/components/Tabs/TabsTrigger.svelte
+++ b/src/lib/components/Tabs/TabsTrigger.svelte
@@ -5,7 +5,6 @@
 	import { slide } from 'svelte/transition';
 
 	export let value: string;
-	export let disabled: boolean = false;
 
 	const tabsContext = getTabsContext();
 	const { activeTab } = tabsContext;
@@ -18,10 +17,8 @@
 	$: isActive = $activeTab === value;
 
 	function handleClick() {
-		if (!disabled) {
-			tabsContext.selectTab(value);
-			dispatch('click', { value });
-		}
+		tabsContext.selectTab(value);
+		dispatch('click', { value });
 	}
 </script>
 
@@ -34,7 +31,6 @@
 			}
 		)}
 		on:click={handleClick}
-		{disabled}
 	>
 		<slot />
 	</button>

From 8ccf5adbafbc8e83c7c376fa1f43b5b61bddb50e Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:43:40 +0700
Subject: [PATCH 10/14] feat(tabs): remove dispatch event (unused event value)

---
 src/lib/components/Tabs/TabsTrigger.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/components/Tabs/TabsTrigger.svelte b/src/lib/components/Tabs/TabsTrigger.svelte
index 49f75c5..97b0543 100644
--- a/src/lib/components/Tabs/TabsTrigger.svelte
+++ b/src/lib/components/Tabs/TabsTrigger.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { onMount } from 'svelte';
 	import { getTabsContext } from './tabsContext';
 	import { cn } from '$lib/utils';
 	import { slide } from 'svelte/transition';
@@ -8,7 +8,6 @@
 
 	const tabsContext = getTabsContext();
 	const { activeTab } = tabsContext;
-	const dispatch = createEventDispatcher();
 
 	onMount(() => {
 		tabsContext.registerTab({ value });
@@ -18,7 +17,6 @@
 
 	function handleClick() {
 		tabsContext.selectTab(value);
-		dispatch('click', { value });
 	}
 </script>
 

From a8b3721916dbb54158c3a3cf80cef02e843bfc2e Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Sat, 14 Sep 2024 02:47:53 +0700
Subject: [PATCH 11/14] fix(tab): register tab logic

---
 src/lib/components/Tabs/tabsContext.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Tabs/tabsContext.ts b/src/lib/components/Tabs/tabsContext.ts
index f76abd0..64a29d3 100644
--- a/src/lib/components/Tabs/tabsContext.ts
+++ b/src/lib/components/Tabs/tabsContext.ts
@@ -18,7 +18,7 @@ const createTabs = (): TabsContext => {
 
 	const registerTab = (tab: Tab) => {
 		tabs.update((currTabs) => [...currTabs, tab]);
-		if (get(activeTab) === null) activeTab.set(tab.value);
+		if (get(activeTab) === '') activeTab.set(tab.value);
 	};
 
 	const selectTab = (value: string) => {

From 2794cbe87a1b7ae43a826724a610dd208ed3e0d9 Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Sat, 14 Sep 2024 03:09:14 +0700
Subject: [PATCH 12/14] feat(tab): custom class

---
 src/lib/components/Tabs/TabsContent.svelte | 5 ++++-
 src/lib/components/Tabs/TabsList.svelte    | 9 ++++++++-
 src/lib/components/Tabs/TabsRoot.svelte    | 5 ++++-
 src/lib/components/Tabs/TabsTrigger.svelte | 4 +++-
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Tabs/TabsContent.svelte b/src/lib/components/Tabs/TabsContent.svelte
index 5501466..9574620 100644
--- a/src/lib/components/Tabs/TabsContent.svelte
+++ b/src/lib/components/Tabs/TabsContent.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
+	import { cn } from '$lib/utils';
 	import { getTabsContext } from './tabsContext';
 
 	export let value: string;
+	export let className: string = '';
+	export { className as class };
 	const { activeTab } = getTabsContext();
 
 	$: isActive = $activeTab === value;
 </script>
 
 {#if isActive}
-	<div class="p-4">
+	<div class={cn('p-4', className)}>
 		<slot />
 	</div>
 {/if}
diff --git a/src/lib/components/Tabs/TabsList.svelte b/src/lib/components/Tabs/TabsList.svelte
index 94c8e43..9d0b325 100644
--- a/src/lib/components/Tabs/TabsList.svelte
+++ b/src/lib/components/Tabs/TabsList.svelte
@@ -1,4 +1,11 @@
-<div class="border-b border-sucu-gray-light">
+<script lang="ts">
+	import { cn } from '$lib/utils';
+
+	export let className: string = '';
+	export { className as class };
+</script>
+
+<div class={cn('border-b border-sucu-gray-light', className)}>
 	<nav class="-mb-2 sm:mb-0 flex space-x-8 text-sucu-pink-hover">
 		<slot />
 	</nav>
diff --git a/src/lib/components/Tabs/TabsRoot.svelte b/src/lib/components/Tabs/TabsRoot.svelte
index 1f0eb2e..53251c0 100644
--- a/src/lib/components/Tabs/TabsRoot.svelte
+++ b/src/lib/components/Tabs/TabsRoot.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
+	import { cn } from '$lib/utils';
 	import { setTabsContext } from './tabsContext';
 
 	export let defaultActiveTab: string = '';
+	export let className: string = '';
+	export { className as class };
 
 	const tabs = setTabsContext();
 
@@ -10,6 +13,6 @@
 	}
 </script>
 
-<div>
+<div class={className}>
 	<slot />
 </div>
diff --git a/src/lib/components/Tabs/TabsTrigger.svelte b/src/lib/components/Tabs/TabsTrigger.svelte
index 97b0543..2ca7c3c 100644
--- a/src/lib/components/Tabs/TabsTrigger.svelte
+++ b/src/lib/components/Tabs/TabsTrigger.svelte
@@ -5,6 +5,8 @@
 	import { slide } from 'svelte/transition';
 
 	export let value: string;
+	export let className: string = '';
+	export { className as class };
 
 	const tabsContext = getTabsContext();
 	const { activeTab } = tabsContext;
@@ -20,7 +22,7 @@
 	}
 </script>
 
-<div class="relative inline-block">
+<div class={cn('relative inline-block', className)}>
 	<button
 		class={cn(
 			'text-base mx-auto whitespace-nowrap py-4 px-1 font-medium sm:text-xl text-sucu-gray hover:text-sucu-pink-hover hover:border-gray-300',

From 72b591a631da4d81a8870e6852c7dd8822cb3c62 Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Sat, 14 Sep 2024 03:16:13 +0700
Subject: [PATCH 13/14] fix(tab): register tab logic

---
 src/lib/components/Tabs/tabsContext.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/components/Tabs/tabsContext.ts b/src/lib/components/Tabs/tabsContext.ts
index 64a29d3..19e18a4 100644
--- a/src/lib/components/Tabs/tabsContext.ts
+++ b/src/lib/components/Tabs/tabsContext.ts
@@ -1,4 +1,4 @@
-import { writable, get, type Writable } from 'svelte/store';
+import { writable, type Writable } from 'svelte/store';
 import { setContext, getContext } from 'svelte';
 
 interface Tab {
@@ -18,7 +18,6 @@ const createTabs = (): TabsContext => {
 
 	const registerTab = (tab: Tab) => {
 		tabs.update((currTabs) => [...currTabs, tab]);
-		if (get(activeTab) === '') activeTab.set(tab.value);
 	};
 
 	const selectTab = (value: string) => {

From 007fa4d60c5dff9e7cc79d27801479422ea03ce8 Mon Sep 17 00:00:00 2001
From: Gear <84141000+macgeargear@users.noreply.github.com>
Date: Sat, 14 Sep 2024 03:16:29 +0700
Subject: [PATCH 14/14] fix: lint

---
 src/lib/components/Tabs/TabsRoot.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/Tabs/TabsRoot.svelte b/src/lib/components/Tabs/TabsRoot.svelte
index 53251c0..d5acac9 100644
--- a/src/lib/components/Tabs/TabsRoot.svelte
+++ b/src/lib/components/Tabs/TabsRoot.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { cn } from '$lib/utils';
 	import { setTabsContext } from './tabsContext';
 
 	export let defaultActiveTab: string = '';