fix: Tabs overflow handling (#50)

* fix: Tabs overflow handling

* change to `svelte:window`

* format

* Update tabs-list.svelte

* Update tabs-list.svelte

* change to default on

* use masks instead

---------

Co-authored-by: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>

package.json

@@ -16,6 +16,7 @@
 		"@fontsource/geist-mono": "^5.0.3",
 		"@fontsource/geist-sans": "^5.0.3",
 		"@poppanator/sveltekit-svg": "4.2.1",
+		"@pyncz/tailwind-mask-image": "^2.0.0",
 		"@sveltejs/adapter-static": "^3.0.2",
 		"@sveltejs/kit": "^2.5.18",
 		"@sveltejs/vite-plugin-svelte": "^3.1.1",

src/lib/components/shared/demo.svelte

@@ -70,7 +70,7 @@
 		</p>
 	{/if}
 	<div
-		class="group relative mt-4 w-full overflow-x-auto rounded-xl border border-gray-alpha-400 bg-background-100 md:overflow-visible xl:mt-7"
+		class="group relative mt-4 overflow-x-auto rounded-xl border border-gray-alpha-400 bg-background-100 xl:mt-7"
 	>
 		<section id="component-demo" class={cn('w-full p-6', class_name)}>
 			<slot></slot>

src/lib/components/ui/tabs/tabs-list.svelte

@@ -1,24 +1,66 @@
 <script lang="ts">
 	import { cn } from '$lib/utils.js';
 	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { onMount } from 'svelte';
 
 	type $$Props = TabsPrimitive.ListProps & {
 		variant?: 'default' | 'secondary';
+		/** When `true`, masks either edge of the scrollable content to indicate there is more content to the user @default true */
+		mask_overflow?: boolean;
 	};
 
 	let class_name: $$Props['class'] = undefined;
 	export let variant: $$Props['variant'] = 'default';
 	export { class_name as class };
+	export let mask_overflow: $$Props['mask_overflow'] = true;
+
+	let el: HTMLDivElement;
+
+	let pre_mask = false;
+	let post_mask = false;
+
+	// When the tabs are scrolled it will determine whether or not to show the mask at the end
+	function handle_mask() {
+		if (el.offsetWidth + el.scrollLeft < el.scrollWidth - 10) {
+			post_mask = true;
+		} else {
+			post_mask = false;
+		}
+
+		if (el.scrollLeft == 0) {
+			pre_mask = false;
+		} else {
+			pre_mask = true;
+		}
+	}
+
+	onMount(() => {
+		handle_mask(); // initially determine mask state
+		el.addEventListener('scroll', handle_mask);
+
+		return () => {
+			el.removeEventListener('scroll', handle_mask);
+		};
+	});
 </script>
 
-<!-- TODO: Add a no-scrollbar class. -->
+<svelte:window on:resize={handle_mask} />
+
+<!-- Make sure you have the `no-scrollbar` class in your tailwind.config file -->
 <TabsPrimitive.List
 	data-variant={variant}
+	bind:el
 	class={cn(
-		'group inline-flex w-full flex-wrap items-baseline gap-3 overflow-hidden overflow-x-auto p-1 text-gray-900 data-[variant=default]:[box-shadow:_0_-1px_0_var(--accents-2)_inset;]',
+		'group flex w-full items-baseline gap-3 overflow-hidden overflow-x-auto p-1 text-gray-900 no-scrollbar data-[variant=default]:[box-shadow:_0_-1px_0_var(--accents-2)_inset;]',
+		{
+			'mask-linear mask-dir-to-r mask-from-0 mask-to-100 mask-point-to-[15%]':
+				mask_overflow && pre_mask,
+			'mask-linear mask-dir-to-l mask-from-0 mask-to-100 mask-point-to-[15%]':
+				mask_overflow && post_mask
+		},
 		class_name
 	)}
 	{...$$restProps}
 >
-	<slot />
+	<slot></slot>
 </TabsPrimitive.List>

src/routes/tabs/+page.svelte

@@ -5,6 +5,8 @@
 	import default_code from './default.svelte?raw';
 	import DisableSpecificTabs from './disable-specific-tabs.svelte';
 	import disable_specific_tabs_code from './disable-specific-tabs.svelte?raw';
+	import Overflow from './overflow-tabs.svelte';
+	import overflow_code from './overflow-tabs.svelte?raw';
 	import Secondary from './secondary.svelte';
 	import secondary_code from './secondary.svelte?raw';
 	import WithIcons from './with-icons.svelte';
@@ -29,4 +31,8 @@
 	<Demo id="secondary" code={secondary_code}>
 		<Secondary />
 	</Demo>
+
+	<Demo id="overflow" code={overflow_code}>
+		<Overflow />
+	</Demo>
 </PageWrapper>

src/routes/tabs/overflow-tabs.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import * as Tabs from '$lib/components/ui/tabs';
+
+	const tabs = [
+		{ title: 'Apple', value: 'apple' },
+		{ title: 'Banana', value: 'banana' },
+		{ title: 'Orange', value: 'orange' },
+		{ title: 'Strawberry', value: 'strawberry' },
+		{ title: 'Mango', value: 'mango' },
+		{ title: 'Pineapple', value: 'pineapple' },
+		{ title: 'Grape', value: 'grape' },
+		{ title: 'Watermelon', value: 'watermelon' },
+		{ title: 'Peach', value: 'peach' },
+		{ title: 'Kiwi', value: 'kiwi' },
+		{ title: 'Cherry', value: 'cherry' },
+		{ title: 'Blueberry', value: 'blueberry' },
+		{ title: 'Pear', value: 'pear' },
+		{ title: 'Plum', value: 'plum' },
+		{ title: 'Raspberry', value: 'raspberry' }
+	];
+</script>
+
+<Tabs.Root value="apple">
+	<Tabs.List>
+		{#each tabs as { title, value }}
+			<Tabs.Trigger {value}>{title}</Tabs.Trigger>
+		{/each}
+	</Tabs.List>
+</Tabs.Root>

tailwind.config.ts

@@ -1,3 +1,4 @@
+import mask from '@pyncz/tailwind-mask-image';
 import typography from '@tailwindcss/typography';
 import type { Config } from 'tailwindcss';
 import { fontFamily } from 'tailwindcss/defaultTheme';
@@ -156,7 +157,22 @@ const config: Config = {
 			}
 		}
 	},
-	plugins: [typography]
+	plugins: [
+		typography,
+		mask,
+		function ({ addUtilities }) {
+			const newUtilities = {
+				'.no-scrollbar': {
+					'-ms-overflow-style': 'none',
+					'scrollbar-width': 'none',
+					'&::-webkit-scrollbar': {
+						display: 'none'
+					}
+				}
+			};
+			addUtilities(newUtilities);
+		}
+	]
 };
 
 export default config;