feat(Tabs): add selected and key

Author: shinokada

src/lib/tabs/TabItem.svelte

@@ -6,55 +6,59 @@
   import { getContext } from "svelte";
   import { tabItem, tabs } from ".";
 
-  let { children, titleSlot, open = $bindable(false), title = "Tab title", activeClass, inactiveClass, class: className, classes, disabled, tabStyle, ...restProps }: TabitemProps = $props();
+  let { children, titleSlot, open = $bindable(false), title = "Tab title", key, activeClass, inactiveClass, class: className, classes, disabled, tabStyle, ...restProps }: TabitemProps = $props();
 
   const theme = getTheme("tabItem");
-
   const activeClasses = getContext<string>("activeClasses");
   const ctx: TabCtxType = getContext("ctx");
-  let compoTabStyle = $derived(tabStyle ? tabStyle : ctx.tabStyle || "full");
-
+  
+  const compoTabStyle = $derived(tabStyle ?? ctx.tabStyle ?? "full");
   const { active, inactive } = $derived(tabs({ tabStyle: compoTabStyle, hasDivider: true }));
 
-  // Generate a unique ID for this tab button
   const tabId = $props.id();
-  const self = $state({ id: `tab-${tabId}`, snippet: children });
+  const tabIdentifier = key ?? tabId; 
+  const self: SelectedTab = { id: tabIdentifier, snippet: children };
+
+  const registerTab = getContext<(tab: SelectedTab) => void>("registerTab");
+  const unregisterTab = getContext<(tabId: string) => void>("unregisterTab");
 
   const updateSingleSelection = useSingleSelection<SelectedTab>((value) => (open = value?.id === self.id));
 
   $effect(() => {
-    // monitor if open changes out side of that component
     updateSingleSelection(open, self);
+    registerTab?.(self);
+    
+    return () => {
+      if (self.id) {
+        unregisterTab?.(self.id);
+      }
+  };
   });
 
   const { base, button } = $derived(tabItem({ open, disabled }));
 </script>
 
 <li {...restProps} class={base({ class: clsx(theme?.base, className) })} role="presentation">
-  <button type="button" onclick={() => (open = true)} role="tab" id={self.id} aria-controls={ctx.panelId} aria-selected={open} {disabled} class={button({ class: clsx(open ? (activeClass ?? active({ class: activeClasses })) : (inactiveClass ?? inactive()), theme?.button, classes?.button) })}>
+  <button 
+    type="button" 
+    onclick={() => (open = true)} 
+    role="tab" 
+    id={self.id} 
+    aria-controls={ctx.panelId} 
+    aria-selected={open} 
+    {disabled} 
+    class={button({ 
+      class: clsx(
+        open ? (activeClass ?? active({ class: activeClasses })) : (inactiveClass ?? inactive()), 
+        theme?.button, 
+        classes?.button
+      ) 
+    })}
+  >
     {#if titleSlot}
       {@render titleSlot()}
     {:else}
       {title}
     {/if}
   </button>
-</li>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Type
-[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1729)
-## Props
-@prop children
-@prop titleSlot
-@prop open = $bindable(false)
-@prop title = "Tab title"
-@prop activeClass
-@prop inactiveClass
-@prop class: className
-@prop classes
-@prop disabled
-@prop tabStyle
-@prop ...restProps
--->
+</li>

src/lib/tabs/Tabs.svelte

@@ -3,37 +3,66 @@
   import type { SelectedTab, TabCtxType, TabsProps } from "$lib/types";
   import { createSingleSelectionContext, useSingleSelection } from "$lib/utils/singleselection.svelte";
   import clsx from "clsx";
-  import { setContext, type Snippet } from "svelte";
+  import { setContext } from "svelte";
   import { tabs } from ".";
 
-  let { children, tabStyle = "none", ulClass, contentClass, divider = true, class: className, classes, ...restProps }: TabsProps = $props();
+  let { children, selected = $bindable(), tabStyle = "none", ulClass, contentClass, divider = true, class: className, classes, ...restProps }: TabsProps = $props();
 
   if (classes?.active) {
     setContext("activeClasses", classes.active);
   }
 
-  // base, content, divider, active, inactive
   warnThemeDeprecation("Tabs", { ulClass, contentClass }, { ulClass: "class", contentClass: "content" });
-  const styling = $derived(classes ?? { content: contentClass });
-
+  
   const theme = getTheme("tabs");
-
+  const styling = $derived(classes ?? { content: contentClass });
   const { base, content, divider: dividerClass } = $derived(tabs({ tabStyle, hasDivider: divider }));
 
-  // Generate a unique ID for the tab panel
   const uuid = $props.id();
   const panelId = `tab-panel-${uuid}`;
-
   const ctx: TabCtxType = $state({ tabStyle, panelId });
-
-  let dividerBool = $derived(["full", "pill"].includes(tabStyle) ? false : divider);
+  const dividerBool = $derived(["full", "pill"].includes(tabStyle) ? false : divider);
 
   setContext("ctx", ctx);
-
   createSingleSelectionContext<SelectedTab>();
 
-  let selected: SelectedTab = $state({});
-  useSingleSelection<SelectedTab>((v) => (selected = v ?? {}));
+  const tabRegistry = $state(new Map<string, SelectedTab>());
+  let selectedTab: SelectedTab = $state({});
+  
+  const updateSelection = useSingleSelection<SelectedTab>((v) => {
+    selectedTab = v ?? {};
+    selected = v?.id;
+  });
+
+  // Handle external changes to selected
+  $effect(() => {
+    if (selected && selected !== selectedTab.id) {
+      const targetTab = tabRegistry.get(selected);
+      if (targetTab) {
+        updateSelection(true, targetTab);
+      }
+    }
+  });
+
+  // Auto-select logic
+  $effect(() => {
+    if (tabRegistry.size > 0 && !selectedTab.id) {
+      const targetTab = selected ? tabRegistry.get(selected) : tabRegistry.values().next().value;
+      if (targetTab) {
+        updateSelection(true, targetTab);
+      }
+    }
+  });
+
+  setContext("registerTab", (tabData: SelectedTab) => {
+    if (tabData.id) {
+      tabRegistry.set(tabData.id, tabData);
+    }
+  });
+
+  setContext("unregisterTab", (tabId: string) => {
+    tabRegistry.delete(tabId);
+  });
 </script>
 
 <ul role="tablist" {...restProps} class={base({ class: clsx(theme?.base, className ?? ulClass) })}>
@@ -42,22 +71,7 @@
 {#if dividerBool}
   <div class={dividerClass({ class: clsx(theme?.divider, classes?.divider) })}></div>
 {/if}
-<div id={panelId} class={content({ class: clsx(theme?.content, styling.content) })} role="tabpanel" aria-labelledby={selected.id}>
-  {@render selected.snippet?.()}
-</div>
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Type
-[TabsProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1721)
-## Props
-@prop children
-@prop tabStyle = "none"
-@prop ulClass
-@prop contentClass
-@prop divider = true
-@prop class: className
-@prop classes
-@prop ...restProps
--->
+
+<div id={panelId} class={content({ class: clsx(theme?.content, styling.content) })} role="tabpanel" aria-labelledby={selectedTab.id}>
+  {@render selectedTab.snippet?.()}
+</div>

src/lib/types.ts

@@ -1720,6 +1720,7 @@ export interface TableSearchProps extends TableSearchVariants, HTMLTableAttribut
 // tabs
 export interface TabsProps extends TabsVaraints, HTMLAttributes<HTMLUListElement> {
   children: Snippet;
+  selected?: string;
   tabStyle?: TabsVaraints["tabStyle"];
   ulClass?: ClassValue;
   contentClass?: ClassValue;
@@ -1730,7 +1731,8 @@ export interface TabitemProps extends TabItemVariants, HTMLLiAttributes {
   children?: Snippet;
   titleSlot?: Snippet;
   open?: boolean;
-  title?: string;
+  title?: string; // for UI label
+  key?: string; // for identifier
   activeClass?: ClassValue;
   inactiveClass?: ClassValue;
   disabled?: boolean;

src/lib/utils/singleselection.svelte.js

@@ -41,7 +41,8 @@ function setSelected(context, open, value) {
  */
 export function useSingleSelection(callback) {
   const context = getContext(SINGLE_SELECTION_KEY) ?? createSingleSelectionContext(false);
-  if (!Object.prototype.hasOwnProperty.call(context, "value")) return () => context; // non-reactive context, do nothing
+  
+  if (!context.hasOwnProperty?.("value")) return () => context;
 
   $effect(() => {
     if (context.value !== null) callback(context.value);