Skip to content

Commit 52ebc70

Browse files
shinokadashinokada
committed
v1.14.1
1 parent 0ff3894 commit 52ebc70

File tree

6 files changed

+229
-138
lines changed

6 files changed

+229
-138
lines changed

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
# Changelog
22

3+
## 1.14.1
4+
5+
### Patch Changes
6+
7+
- Added dependency: esm-env ^1.2.2
8+
- Import DEV from esm-env and replace local/dev-mode check with the imported DEV constant in warnThemeDeprecation. Removed previous inline/dev comment and related local dev logic.
9+
310
## 1.14.0
411

512
### Minor Changes

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "flowbite-svelte",
3-
"version": "1.14.0",
3+
"version": "1.14.1",
44
"description": "Flowbite components for Svelte",
55
"main": "dist/index.js",
66
"author": {

‎pnpm-lock.yaml‎

Lines changed: 124 additions & 124 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/routes/docs-examples/components/tabs/BindSelected.svelte‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { Tabs, TabItem, Button, P } from "flowbite-svelte";
3-
3+
44
let selectedKey = $state("settings");
55
</script>
66

@@ -25,17 +25,13 @@
2525
</TabItem>
2626
</Tabs>
2727

28-
<P class="mt-4 text-sm">Currently selected `key`: <strong>{selectedKey}</strong></P>
28+
<P class="mt-4 text-sm">
29+
Currently selected `key`: <strong>{selectedKey}</strong>
30+
</P>
2931

3032
<!-- Programmatic tab switching -->
3133
<div class="mt-4 space-x-2">
32-
<Button onclick={() => selectedKey = "profile"}>
33-
Go to Profile
34-
</Button>
35-
<Button onclick={() => selectedKey = "settings"}>
36-
Go to Settings
37-
</Button>
38-
<Button onclick={() => selectedKey = "users"}>
39-
Go to Users
40-
</Button>
41-
</div>
34+
<Button onclick={() => (selectedKey = "profile")}>Go to Profile</Button>
35+
<Button onclick={() => (selectedKey = "settings")}>Go to Settings</Button>
36+
<Button onclick={() => (selectedKey = "users")}>Go to Users</Button>
37+
</div>

‎static/llm/components/tabs.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,50 @@ If you want to show the tabs on the full width relative to the parent element us
279279
</Tabs>
280280
```
281281

282+
## Tabs with selected and key
283+
284+
You can control which tab is active using the selected prop on `<Tabs>` together with a key on each `<TabItem>`.
285+
286+
```svelte
287+
<script lang="ts">
288+
import { Tabs, TabItem, Button, P } from "flowbite-svelte";
289+
290+
let selectedKey = $state("settings");
291+
</script>
292+
293+
<Tabs bind:selected={selectedKey}>
294+
<TabItem key="profile" title="Profile">
295+
<p class="text-sm text-gray-500 dark:text-gray-400">
296+
<b>Profile:</b>
297+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
298+
</p>
299+
</TabItem>
300+
<TabItem key="settings" title="Settings">
301+
<p class="text-sm text-gray-500 dark:text-gray-400">
302+
<b>Settings:</b>
303+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
304+
</p>
305+
</TabItem>
306+
<TabItem key="users" title="Users">
307+
<p class="text-sm text-gray-500 dark:text-gray-400">
308+
<b>Users:</b>
309+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
310+
</p>
311+
</TabItem>
312+
</Tabs>
313+
314+
<P class="mt-4 text-sm">
315+
Currently selected `key`: <strong>{selectedKey}</strong>
316+
</P>
317+
318+
<!-- Programmatic tab switching -->
319+
<div class="mt-4 space-x-2">
320+
<Button onclick={() => (selectedKey = "profile")}>Go to Profile</Button>
321+
<Button onclick={() => (selectedKey = "settings")}>Go to Settings</Button>
322+
<Button onclick={() => (selectedKey = "users")}>Go to Users</Button>
323+
</div>
324+
```
325+
282326
## Components in tab contents
283327

284328
You can add other components to the `TabItem` component. Here we are adding a timeline component in the tab 1:

‎static/llm/context-full.txt‎

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# undefined Documentation - Full Context
2-
# Generated on 2025-09-25T05:18:35.027Z
2+
# Generated on 2025-09-25T08:01:25.575Z
33
# This file contains all documentation concatenated in logical order
44

55

@@ -16067,6 +16067,50 @@ If you want to show the tabs on the full width relative to the parent element us
1606716067
</Tabs>
1606816068
```
1606916069

16070+
## Tabs with selected and key
16071+
16072+
You can control which tab is active using the selected prop on `<Tabs>` together with a key on each `<TabItem>`.
16073+
16074+
```svelte
16075+
<script lang="ts">
16076+
import { Tabs, TabItem, Button, P } from "flowbite-svelte";
16077+
16078+
let selectedKey = $state("settings");
16079+
</script>
16080+
16081+
<Tabs bind:selected={selectedKey}>
16082+
<TabItem key="profile" title="Profile">
16083+
<p class="text-sm text-gray-500 dark:text-gray-400">
16084+
<b>Profile:</b>
16085+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
16086+
</p>
16087+
</TabItem>
16088+
<TabItem key="settings" title="Settings">
16089+
<p class="text-sm text-gray-500 dark:text-gray-400">
16090+
<b>Settings:</b>
16091+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
16092+
</p>
16093+
</TabItem>
16094+
<TabItem key="users" title="Users">
16095+
<p class="text-sm text-gray-500 dark:text-gray-400">
16096+
<b>Users:</b>
16097+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
16098+
</p>
16099+
</TabItem>
16100+
</Tabs>
16101+
16102+
<P class="mt-4 text-sm">
16103+
Currently selected `key`: <strong>{selectedKey}</strong>
16104+
</P>
16105+
16106+
<!-- Programmatic tab switching -->
16107+
<div class="mt-4 space-x-2">
16108+
<Button onclick={() => (selectedKey = "profile")}>Go to Profile</Button>
16109+
<Button onclick={() => (selectedKey = "settings")}>Go to Settings</Button>
16110+
<Button onclick={() => (selectedKey = "users")}>Go to Users</Button>
16111+
</div>
16112+
```
16113+
1607016114
## Components in tab contents
1607116115

1607216116
You can add other components to the `TabItem` component. Here we are adding a timeline component in the tab 1:

0 commit comments

Comments
 (0)