v1.14.0

fix: #1769

Author: shinokada

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.14.0
+
+### Minor Changes
+
+- feat(Tabs): add selected and key
+
 ## 1.13.16
 
 ### Patch Changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "1.13.16",
+  "version": "1.14.0",
   "description": "Flowbite components for Svelte",
   "main": "dist/index.js",
   "author": {

src/lib/tabs/TabItem.svelte

@@ -11,12 +11,12 @@
   const theme = getTheme("tabItem");
   const activeClasses = getContext<string>("activeClasses");
   const ctx: TabCtxType = getContext("ctx");
-  
+
   const compoTabStyle = $derived(tabStyle ?? ctx.tabStyle ?? "full");
   const { active, inactive } = $derived(tabs({ tabStyle: compoTabStyle, hasDivider: true }));
 
   const tabId = $props.id();
-  const tabIdentifier = key ?? tabId; 
+  const tabIdentifier = key ?? tabId;
   const self: SelectedTab = { id: tabIdentifier, snippet: children };
 
   const registerTab = getContext<(tab: SelectedTab) => void>("registerTab");
@@ -27,32 +27,28 @@
   $effect(() => {
     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}
@@ -61,4 +57,24 @@
       {title}
     {/if}
   </button>
-</li>
+</li>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[TabitemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1730)
+## Props
+@prop children
+@prop titleSlot
+@prop open = $bindable(false)
+@prop title = "Tab title"
+@prop key
+@prop activeClass
+@prop inactiveClass
+@prop class: className
+@prop classes
+@prop disabled
+@prop tabStyle
+@prop ...restProps
+-->

src/lib/tabs/Tabs.svelte

@@ -13,7 +13,7 @@
   }
 
   warnThemeDeprecation("Tabs", { ulClass, contentClass }, { ulClass: "class", contentClass: "content" });
-  
+
   const theme = getTheme("tabs");
   const styling = $derived(classes ?? { content: contentClass });
   const { base, content, divider: dividerClass } = $derived(tabs({ tabStyle, hasDivider: divider }));
@@ -28,7 +28,7 @@
 
   const tabRegistry = $state(new Map<string, SelectedTab>());
   let selectedTab: SelectedTab = $state({});
-  
+
   const updateSelection = useSingleSelection<SelectedTab>((v) => {
     selectedTab = v ?? {};
     selected = v?.id;
@@ -74,4 +74,21 @@
 
 <div id={panelId} class={content({ class: clsx(theme?.content, styling.content) })} role="tabpanel" aria-labelledby={selectedTab.id}>
   {@render selectedTab.snippet?.()}
-</div>
+</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 selected = $bindable()
+@prop tabStyle = "none"
+@prop ulClass
+@prop contentClass
+@prop divider = true
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

src/lib/timeline/Activity.svelte

@@ -17,7 +17,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1765)
+[ActivityProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1767)
 ## Props
 @prop children
 @prop class: className

src/lib/timeline/ActivityItem.svelte

@@ -62,7 +62,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1769)
+[ActivityItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1771)
 ## Props
 @prop activities
 @prop liClass

src/lib/timeline/Group.svelte

@@ -36,7 +36,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1781)
+[GroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1783)
 ## Props
 @prop children
 @prop divClass

src/lib/timeline/GroupItem.svelte

@@ -66,7 +66,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1789)
+[GroupItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1791)
 ## Props
 @prop timelines
 @prop aClass

src/lib/timeline/Timeline.svelte

@@ -21,7 +21,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1809)
+[TimelineProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1811)
 ## Props
 @prop children
 @prop order = "default"

src/lib/timeline/TimelineItem.svelte

@@ -97,7 +97,7 @@
 @component
 [Go to docs](https://flowbite-svelte.com/)
 ## Type
-[TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1814)
+[TimelineItemProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1816)
 ## Props
 @prop children
 @prop orientationSlot