flowbite-svelte 0.16.11 → 0.16.14
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 +16 -0
- package/buttongroups/ButtonGroupItem.svelte +4 -3
- package/buttongroups/ButtonGroupItem.svelte.d.ts +2 -0
- package/package.json +1 -1
- package/sidebars/Sidebar.svelte +10 -4
- package/sidebars/Sidebar.svelte.d.ts +1 -0
- package/sidebars/SidebarItem.svelte +8 -2
- package/sidebars/SidebarItem.svelte.d.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,22 @@
|
|
|
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.16.14](https://github.com/themesberg/flowbite-svelte/compare/v0.16.13...v0.16.14) (2022-06-07)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add {...39090restProps} to ButtonGroupItem ([6af6066](https://github.com/themesberg/flowbite-svelte/commit/6af6066928200750036b5f19e2711383f02ccfa3))
|
|
11
|
+
|
|
12
|
+
### [0.16.13](https://github.com/themesberg/flowbite-svelte/compare/v0.16.12...v0.16.13) (2022-06-07)
|
|
13
|
+
|
|
14
|
+
### [0.16.12](https://github.com/themesberg/flowbite-svelte/compare/v0.16.11...v0.16.12) (2022-06-07)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Features
|
|
18
|
+
|
|
19
|
+
* add type to ButtonGroupItem ([1aefa6b](https://github.com/themesberg/flowbite-svelte/commit/1aefa6bd85acabc05b9ba8016b8e1f46bd55baef))
|
|
20
|
+
|
|
5
21
|
### [0.16.11](https://github.com/themesberg/flowbite-svelte/compare/v0.16.10...v0.16.11) (2022-06-06)
|
|
6
22
|
|
|
7
23
|
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
<script>export let
|
|
1
|
+
<script>export let type = 'button';
|
|
2
|
+
export let btnClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-white first:rounded-l-lg border-t border-b first:border last:rounded-r-md last:border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white';
|
|
2
3
|
export let outlineClass = 'inline-flex items-center py-2 px-4 text-sm font-medium text-gray-900 bg-transparent first:rounded-l-lg border-t border-b first:border last:rounded-r-md last:border border-gray-900 hover:bg-gray-900 hover:text-white focus:z-10 focus:ring-2 focus:ring-gray-500 focus:bg-gray-900 focus:text-white dark:border-white dark:text-white dark:hover:text-white dark:hover:bg-gray-700 dark:focus:bg-gray-700';
|
|
3
4
|
export let outline = false;
|
|
4
5
|
export let href = '';
|
|
@@ -8,9 +9,9 @@ if (outline) {
|
|
|
8
9
|
</script>
|
|
9
10
|
|
|
10
11
|
{#if href}
|
|
11
|
-
<a {href} class="{btnClass} {$$props.class}" on:click><slot /></a>
|
|
12
|
+
<a {href} class="{btnClass} {$$props.class}" {...$$restProps} on:click><slot /></a>
|
|
12
13
|
{:else}
|
|
13
|
-
<button type
|
|
14
|
+
<button {type} class="{btnClass} {$$props.class}" {...$$restProps} on:click>
|
|
14
15
|
<slot />
|
|
15
16
|
</button>
|
|
16
17
|
{/if}
|
package/package.json
CHANGED
package/sidebars/Sidebar.svelte
CHANGED
|
@@ -1,20 +1,26 @@
|
|
|
1
|
-
<script>export let
|
|
1
|
+
<script>export let divClass = 'overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800';
|
|
2
|
+
export let site;
|
|
2
3
|
export let cta;
|
|
3
4
|
</script>
|
|
4
5
|
|
|
5
6
|
<aside class="w-64" aria-label="Sidebar">
|
|
6
|
-
<div class=
|
|
7
|
+
<div class={divClass}>
|
|
7
8
|
{#if site}
|
|
8
9
|
<a href={site.href} class="flex items-center pl-2.5 mb-5">
|
|
9
10
|
<img src={site.img} class="h-6 mr-3 sm:h-7" alt={site.name} />
|
|
10
|
-
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white"
|
|
11
|
+
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white"
|
|
12
|
+
>{site.name}</span
|
|
13
|
+
>
|
|
11
14
|
</a>
|
|
12
15
|
{/if}
|
|
13
16
|
<slot />
|
|
14
17
|
{#if cta}
|
|
15
18
|
<div id="dropdown-cta" class="p-4 mt-6 bg-blue-50 rounded-lg dark:bg-blue-900" role="alert">
|
|
16
19
|
<div class="flex items-center mb-3">
|
|
17
|
-
<span
|
|
20
|
+
<span
|
|
21
|
+
class="bg-orange-100 text-orange-800 text-sm font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-orange-200 dark:text-orange-900"
|
|
22
|
+
>{cta.label}</span
|
|
23
|
+
>
|
|
18
24
|
</div>
|
|
19
25
|
<p class="mb-3 text-sm text-blue-900 dark:text-blue-400">
|
|
20
26
|
{cta.text}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<script>import SidebarDropdown from './SidebarDropdown.svelte';
|
|
2
2
|
export let links;
|
|
3
|
+
export let aClass = 'flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700';
|
|
3
4
|
export let childClass = 'flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700';
|
|
4
5
|
export let dropDownulClass = 'py-2 space-y-2';
|
|
5
6
|
let ulClass = 'space-y-2';
|
|
@@ -15,9 +16,14 @@ if (border) {
|
|
|
15
16
|
<SidebarDropdown {link} ulClass={dropDownulClass} {childClass} />
|
|
16
17
|
{:else}
|
|
17
18
|
<li>
|
|
18
|
-
<a href={link.href} rel={link.rel} class=
|
|
19
|
+
<a href={link.href} rel={link.rel} class={aClass}>
|
|
19
20
|
{#if link.icon}
|
|
20
|
-
<svelte:component
|
|
21
|
+
<svelte:component
|
|
22
|
+
this={link.icon}
|
|
23
|
+
size={link.iconSize}
|
|
24
|
+
color={link.iconColor}
|
|
25
|
+
class="mr-2 {link.iconClass}"
|
|
26
|
+
/>
|
|
21
27
|
{/if}
|
|
22
28
|
<span class="ml-3">{link.name}</span>
|
|
23
29
|
{#if link.subtext}
|