noph-ui 0.22.5 → 0.23.1

package/dist/tabs/Tab.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Ripple from '../ripple/Ripple.svelte'
-	import { getContext } from 'svelte'
+	import { onMount } from 'svelte'
 	import type { TabProps } from './types.ts'
 	import Badge from '../badge/Badge.svelte'
 
@@ -15,49 +15,30 @@
 		variant = 'primary',
 		badge = false,
 		badgeLabel,
+		selected = $bindable(false),
 		...attributes
 	}: TabProps = $props()
-	let activeTab: { value: string | number; node: HTMLElement } = getContext('activeTab')
 	let element: HTMLElement | undefined = $state()
-	let isActive = $state(activeTab.value === value)
+	let id = $props.id()
+	let parentElement = $derived(element?.parentElement)
 
-	$effect(() => {
-		if (activeTab.value === value) {
-			if (element && element !== activeTab.node) {
-				setTabActive(element)
-			}
-			isActive = true
-		} else {
-			isActive = false
+	const onChange = (event: Event) => {
+		const { detail } = event as CustomEvent<{ id: string }>
+		selected = detail.id === id
+	}
+
+	onMount(() => {
+		element?.addEventListener('change', onChange)
+		return () => {
+			element?.removeEventListener('change', onChange)
 		}
 	})
 
 	const setTabActive = (el: HTMLElement) => {
-		const oldTab = activeTab.node as HTMLElement | undefined
-		const oldIndicator = oldTab?.querySelector('.np-indicator') as HTMLElement
-		const oldIndicatorRect = oldIndicator?.getBoundingClientRect()
-		if (oldIndicatorRect) {
-			const newIndicator = el.querySelector<HTMLElement>('.np-indicator')
-			if (newIndicator) {
-				newIndicator.style.setProperty(
-					'--np-tab-indicator-start',
-					`${oldIndicatorRect.x - newIndicator.getBoundingClientRect().x}px`,
-				)
-				newIndicator.style.setProperty(
-					'--np-tab-indicator-scale',
-					`${oldIndicatorRect.width / newIndicator.clientWidth}`,
-				)
-			}
-		}
-		activeTab.value = value
-		activeTab.node = el
+		parentElement?.dispatchEvent(new CustomEvent('change', { detail: { id: el.id, value } }))
+		selected = true
 	}
 
-	const setActiveTab = (el: HTMLElement) => {
-		if (isActive) {
-			activeTab.node = el
-		}
-	}
 	const onClick = (event: MouseEvent & { currentTarget: EventTarget & HTMLElement }) => {
 		setTabActive(event.currentTarget)
 		if (onclick) {
@@ -72,6 +53,11 @@
 			onkeydown(event)
 		}
 	}
+	const setCheckInitialState = (el: HTMLElement) => {
+		if (parentElement?.getAttribute('data-value') === value) {
+			selected = true
+		}
+	}
 </script>
 
 {#snippet content()}
@@ -116,15 +102,18 @@
 
 {#if href}
 	<a
-		{@attach setActiveTab}
+		{@attach setCheckInitialState}
 		{...attributes}
-		tabindex={isActive ? 0 : -1}
+		{id}
+		tabindex={selected ? 0 : -1}
 		role="tab"
+		aria-selected={selected}
+		data-value={value}
 		bind:this={element}
 		{href}
 		class={[
 			'np-tab',
-			isActive && 'np-tab-content-active',
+			selected && 'np-tab-content-active',
 			variant === 'primary' ? 'primary' : 'secondary',
 			attributes.class,
 		]}
@@ -135,14 +124,17 @@
 	</a>
 {:else}
 	<div
-		{@attach setActiveTab}
+		{@attach setCheckInitialState}
 		{...attributes}
-		tabindex={isActive ? 0 : -1}
+		{id}
+		tabindex={selected ? 0 : -1}
 		role="tab"
+		aria-selected={selected}
+		data-value={value}
 		bind:this={element}
 		class={[
 			'np-tab',
-			isActive && 'np-tab-content-active',
+			selected && 'np-tab-content-active',
 			variant === 'primary' ? 'primary' : 'secondary',
 			attributes.class,
 		]}

package/dist/tabs/Tab.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TabProps } from './types.ts';
-declare const Tab: import("svelte").Component<TabProps, {}, "">;
+declare const Tab: import("svelte").Component<TabProps, {}, "selected">;
 type Tab = ReturnType<typeof Tab>;
 export default Tab;

package/dist/tabs/Tabs.svelte

@@ -1,32 +1,93 @@
 <script lang="ts">
 	import Divider from '../divider/Divider.svelte'
-	import { setContext } from 'svelte'
+	import { onMount } from 'svelte'
 	import type { TabsProps } from './types.ts'
 
 	let { children, element = $bindable(), value = $bindable(), ...attributes }: TabsProps = $props()
-	let active = $state({
-		value: value,
-		node: element?.firstChild as HTMLElement | undefined,
-	})
-	setContext('activeTab', active)
+	let tabs: HTMLElement[] | undefined = $state()
+	let activeTab: HTMLElement | undefined = $state()
+	const initialValue = value
 
 	$effect(() => {
-		value = active.value
+		if (value) {
+			const oldTab = activeTab
+			const newTab = tabs?.find((tab) => tab.getAttribute('data-value') === value)
+			if (newTab && oldTab && newTab !== oldTab) {
+				selectTab(newTab, oldTab, { id: newTab.id, value })
+			}
+		}
 	})
-	$effect(() => {
-		active.value = value
+
+	const selectTab = (
+		newTab: HTMLElement,
+		oldTab: HTMLElement,
+		detail: { id: string; value: string | number },
+	) => {
+		const oldIndicator = oldTab.querySelector('.np-indicator') as HTMLElement
+		const oldIndicatorRect = oldIndicator.getBoundingClientRect()
+		if (oldIndicatorRect) {
+			const newIndicator = newTab.querySelector<HTMLElement>('.np-indicator')
+			if (newIndicator) {
+				newIndicator.style.setProperty(
+					'--np-tab-indicator-start',
+					`${oldIndicatorRect.x - newIndicator.getBoundingClientRect().x}px`,
+				)
+				newIndicator.style.setProperty(
+					'--np-tab-indicator-scale',
+					`${oldIndicatorRect.width / newIndicator.clientWidth}`,
+				)
+			}
+		}
+		value = detail.value
+		activeTab = newTab
+		tabs?.forEach((tab) => {
+			tab.dispatchEvent(new CustomEvent('change', { detail }))
+		})
+	}
+
+	const onChange = (event: Event) => {
+		const { detail } = event as CustomEvent<{ id: string; value: string | number }>
+		const oldTab = activeTab
+		const newTab = tabs?.find((tab) => tab.id === detail.id)
+		if (newTab && oldTab && newTab !== oldTab) {
+			selectTab(newTab, oldTab, detail)
+		}
+	}
+
+	onMount(() => {
+		element?.addEventListener('change', onChange)
+		return () => {
+			element?.removeEventListener('change', onChange)
+		}
 	})
+	const initialSetup = (el: HTMLElement) => {
+		if (activeTab === undefined) {
+			const childTabs = Array.from(el.querySelectorAll<HTMLElement>('.np-tab'))
+			activeTab =
+				childTabs && childTabs.length > 0
+					? (childTabs.find((t) => {
+							return t.getAttribute('data-value') === initialValue
+						}) ?? childTabs[0])
+					: undefined
+			if (initialValue === undefined) {
+				value = activeTab?.getAttribute('data-value') ?? undefined
+			} else {
+				value = initialValue
+			}
+			tabs = childTabs
+		}
+	}
 </script>
 
-<div {...attributes} class={[attributes.class]}>
+<div {@attach initialSetup} {...attributes} class={[attributes.class]}>
 	<div
 		class={['np-tabs']}
 		role="tablist"
+		data-value={value}
 		tabindex="-1"
 		bind:this={element}
 		onkeydown={(event) => {
-			if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
-				const tabs: HTMLElement[] = Array.from(event.currentTarget.querySelectorAll('.np-tab'))
+			if (tabs && tabs.length > 0 && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
 				const focusedTab = event.currentTarget.querySelector('.np-tab:focus') as HTMLElement
 				const currentIndex = tabs.indexOf(focusedTab)
 				const index = currentIndex + (event.key === 'ArrowRight' ? 1 : -1)

package/dist/tabs/types.d.ts

@@ -8,8 +8,9 @@ export interface TabProps extends HTMLAttributes<HTMLElement> {
     icon?: Snippet;
     badge?: boolean;
     badgeLabel?: string | number;
+    selected?: boolean;
 }
 export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
-    value: string | number;
+    value?: string | number;
     element?: HTMLElement;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.22.5",
+  "version": "0.23.1",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {