flowbite-svelte 0.24.15 → 0.24.16
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
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.24.16](https://github.com/themesberg/flowbite-svelte/compare/v0.24.15...v0.24.16) (2022-08-16)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add disabled and classes to InteractiveTabHead component ([869fb1b](https://github.com/themesberg/flowbite-svelte/commit/869fb1b34f5a0e5a254cdc09b25195bf621a25d6))
|
|
11
|
+
|
|
5
12
|
### [0.24.15](https://github.com/themesberg/flowbite-svelte/compare/v0.24.14...v0.24.15) (2022-08-16)
|
|
6
13
|
|
|
7
14
|
|
package/package.json
CHANGED
|
@@ -3,6 +3,10 @@ import classNames from 'classnames';
|
|
|
3
3
|
export let tabs;
|
|
4
4
|
export let tabId = 'myTab';
|
|
5
5
|
export let activeTabValue = 1;
|
|
6
|
+
export let disabled = false;
|
|
7
|
+
export let divClass = 'mb-4 border-b border-gray-200';
|
|
8
|
+
export let ulClass = 'flex flex-wrap -mb-px text-sm font-medium text-center';
|
|
9
|
+
export let liClass = 'mr-2';
|
|
6
10
|
export let btnClass = 'inline-block py-4 px-4 text-sm font-medium text-center rounded-t-lg border-b-2 border-transparent';
|
|
7
11
|
export let activeClass = 'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500';
|
|
8
12
|
export let inactiveClasses = 'text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300';
|
|
@@ -29,15 +33,10 @@ Header part of Interactive tab component. Use with TabContent.
|
|
|
29
33
|
</InteractiveHead>
|
|
30
34
|
```
|
|
31
35
|
-->
|
|
32
|
-
<div class=
|
|
33
|
-
<ul
|
|
34
|
-
class="flex flex-wrap -mb-px text-sm font-medium text-center"
|
|
35
|
-
id={tabId}
|
|
36
|
-
data-tabs-toggle="#myTabContent"
|
|
37
|
-
role="tablist"
|
|
38
|
-
>
|
|
36
|
+
<div class={divClass}>
|
|
37
|
+
<ul class={ulClass} id={tabId} data-tabs-toggle="#myTabContent" role="tablist">
|
|
39
38
|
{#each tabs as { name, id }}
|
|
40
|
-
<li class=
|
|
39
|
+
<li class={liClass} role="presentation">
|
|
41
40
|
<button
|
|
42
41
|
on:click={handleClick(id)}
|
|
43
42
|
class={classNames(btnClass, activeTabValue === id ? activeClass : inactiveClasses)}
|
|
@@ -55,7 +54,8 @@ Header part of Interactive tab component. Use with TabContent.
|
|
|
55
54
|
on:keyup
|
|
56
55
|
on:mouseenter
|
|
57
56
|
on:mouseleave
|
|
58
|
-
on:mouseover
|
|
57
|
+
on:mouseover
|
|
58
|
+
{disabled}>{name}</button
|
|
59
59
|
>
|
|
60
60
|
</li>
|
|
61
61
|
{/each}
|