flowbite-svelte 0.15.20 → 0.15.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/package.json +1 -1
- package/tabs/FullWidthTabs.svelte +5 -17
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.15.21](https://github.com/themesberg/flowbite-svelte/compare/v0.15.20...v0.15.21) (2022-05-10)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* add right round corner to FullWidthTabs ([adaf72f](https://github.com/themesberg/flowbite-svelte/commit/adaf72fd01499ec8e73cdac1cf1b50054a2d8ead))
|
|
11
|
+
|
|
5
12
|
### [0.15.20](https://github.com/themesberg/flowbite-svelte/compare/v0.15.19...v0.15.20) (2022-05-10)
|
|
6
13
|
|
|
7
14
|
|
package/package.json
CHANGED
|
@@ -4,28 +4,16 @@ export let tabLabel;
|
|
|
4
4
|
|
|
5
5
|
<div class="sm:hidden">
|
|
6
6
|
<label for="tabs" class="sr-only">{tabLabel}</label>
|
|
7
|
-
<select
|
|
8
|
-
id="tabs"
|
|
9
|
-
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
|
10
|
-
>
|
|
7
|
+
<select id="tabs" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
|
11
8
|
{#each tabs as { name }}
|
|
12
9
|
<option>{name}</option>
|
|
13
10
|
{/each}
|
|
14
11
|
</select>
|
|
15
12
|
</div>
|
|
16
|
-
<ul
|
|
17
|
-
|
|
18
|
-
>
|
|
19
|
-
|
|
20
|
-
<li class="w-full">
|
|
21
|
-
<a
|
|
22
|
-
{href}
|
|
23
|
-
{rel}
|
|
24
|
-
class={active
|
|
25
|
-
? 'inline-block p-4 w-full text-gray-900 bg-gray-100 rounded-l-lg focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white'
|
|
26
|
-
: 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'}
|
|
27
|
-
aria-current="page">{name}</a
|
|
28
|
-
>
|
|
13
|
+
<ul class="hidden text-sm font-medium text-center text-gray-500 rounded-lg divide-x divide-gray-200 shadow sm:flex dark:divide-gray-700 dark:text-gray-400">
|
|
14
|
+
{#each tabs as { name, href, rel, active }, i}
|
|
15
|
+
<li class="w-full" data-id={i}>
|
|
16
|
+
<a {href} {rel} class:rounded-l-lg={i === 0} class:rounded-r-lg={i === tabs.length - 1} class={active ? 'inline-block p-4 w-full text-gray-900 bg-gray-100 focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white' : 'inline-block p-4 w-full bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'} aria-current="page">{name}</a>
|
|
29
17
|
</li>
|
|
30
18
|
{/each}
|
|
31
19
|
</ul>
|