flowbite-svelte 0.13.5 → 0.13.6
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 +8 -0
- package/navbar/DropdownNavbar.svelte +38 -32
- package/navbar/DropdownNavbar.svelte.d.ts +1 -0
- package/navbar/Navbar.svelte +28 -28
- package/navbar/Navbar.svelte.d.ts +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
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.13.6](https://github.com/shinokada/flowbite-svelte/compare/v0.13.5...v0.13.6) (2022-04-13)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* create new props files ([0a6fd33](https://github.com/shinokada/flowbite-svelte/commit/0a6fd334321bbedd2eecebb5e4f2456ddb19fd3b))
|
|
11
|
+
* remove SvelteKit app session and page ([7eaa3db](https://github.com/shinokada/flowbite-svelte/commit/7eaa3dbfc7f0e2fcf5ef6be4045843fc92b354a5))
|
|
12
|
+
|
|
5
13
|
### [0.13.5](https://github.com/shinokada/flowbite-svelte/compare/v0.13.4...v0.13.5) (2022-04-12)
|
|
6
14
|
|
|
7
15
|
|
|
@@ -1,11 +1,17 @@
|
|
|
1
|
-
<script >import {
|
|
1
|
+
<script >import { onMount } from 'svelte';
|
|
2
2
|
import NavDropdown from './NavDropdown.svelte';
|
|
3
|
+
export let user = '';
|
|
4
|
+
let pathname = '';
|
|
5
|
+
onMount(() => {
|
|
6
|
+
pathname = window.location.pathname;
|
|
7
|
+
// console.log('pathname', pathname);
|
|
8
|
+
});
|
|
3
9
|
let barHidden = true;
|
|
4
10
|
const handleClickbtn = () => {
|
|
5
11
|
barHidden = !barHidden;
|
|
6
12
|
};
|
|
7
13
|
export let sitename = 'Svelte Flow';
|
|
8
|
-
export let logo = '/images/
|
|
14
|
+
export let logo = '/images/flowbite-svelte-logo-30.png';
|
|
9
15
|
export let alt;
|
|
10
16
|
export let textsize = 'text-sm';
|
|
11
17
|
export let menus;
|
|
@@ -20,36 +26,36 @@ export let liButtonClass = `flex justify-between items-center py-2 pr-4 pl-3 w-f
|
|
|
20
26
|
</script>
|
|
21
27
|
|
|
22
28
|
<nav class={navClass}>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
29
|
+
<div class={navDivClass}>
|
|
30
|
+
<a href="/" class="flex">
|
|
31
|
+
<img src={logo} {alt} />
|
|
32
|
+
<span class={spanClass}>{sitename}</span>
|
|
33
|
+
</a>
|
|
34
|
+
<button on:click={handleClickbtn} type="button" class={buttonClass} aria-controls="mobile-menu-2" aria-expanded="false">
|
|
35
|
+
<span class="sr-only">Open main menu</span>
|
|
36
|
+
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg>
|
|
37
|
+
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
|
|
38
|
+
</button>
|
|
39
|
+
<div class="w-full md:block md:w-auto" class:hidden={barHidden} id="mobile-menu">
|
|
40
|
+
<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
|
|
41
|
+
{#each menus as { name, href, rel, child }}
|
|
42
|
+
{#if child}
|
|
43
|
+
<NavDropdown {liButtonClass} {dropdownDiv} {name} {child} {rel} {dropdownLinkClassWithChild} />
|
|
44
|
+
{:else}
|
|
45
|
+
<li>
|
|
46
|
+
<a class:active={pathname === href} {href} {rel} class={dropdownLinkClassWithoutChild}>{name}</a>
|
|
47
|
+
</li>
|
|
48
|
+
{/if}
|
|
49
|
+
{/each}
|
|
50
|
+
</ul>
|
|
51
|
+
{#if user}
|
|
52
|
+
<slot name="user" />
|
|
53
|
+
{/if}
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
50
56
|
</nav>
|
|
51
57
|
|
|
52
58
|
<style>
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
59
|
+
#mobile-menu .active {
|
|
60
|
+
color: #fab534;
|
|
61
|
+
}</style>
|
package/navbar/Navbar.svelte
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script >import { page, session } from '$app/stores';
|
|
2
|
-
export let
|
|
3
|
-
export let logo = '/images/
|
|
2
|
+
export let siteName = 'Svelte Flow';
|
|
3
|
+
export let logo = '/images/flowbite-svelte-logo-30.png';
|
|
4
4
|
export let alt = 'Svelte Flow';
|
|
5
5
|
export let textsize = 'text-sm';
|
|
6
6
|
let barHidden = true;
|
|
@@ -16,32 +16,32 @@ export let liLinkClass = `block py-2 pr-4 pl-3 text-gray-700 border-b border-gr
|
|
|
16
16
|
</script>
|
|
17
17
|
|
|
18
18
|
<nav class={navClass}>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
19
|
+
<div class={navDivClass}>
|
|
20
|
+
<a href="/" class="flex">
|
|
21
|
+
<img src={logo} {alt} />
|
|
22
|
+
<span class={spanClass}>{siteName}</span>
|
|
23
|
+
</a>
|
|
24
|
+
<button on:click={handleClickbtn} type="button" class={buttonClass} aria-controls="mobile-menu-2" aria-expanded="false">
|
|
25
|
+
<span class="sr-only">Open main menu</span>
|
|
26
|
+
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" /></svg>
|
|
27
|
+
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
|
|
28
|
+
</button>
|
|
29
|
+
<div class:hidden={barHidden} class="hidden w-full md:block md:w-auto" id="mobile-menu">
|
|
30
|
+
<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
|
|
31
|
+
{#each menus as { name, href, rel }}
|
|
32
|
+
<li>
|
|
33
|
+
<a class:active={$page.url.pathname === href} {href} {rel} class={liLinkClass}>{name}</a>
|
|
34
|
+
</li>
|
|
35
|
+
{/each}
|
|
36
|
+
</ul>
|
|
37
|
+
{#if $session['user']}
|
|
38
|
+
<slot name="user" />
|
|
39
|
+
{/if}
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
42
|
</nav>
|
|
43
43
|
|
|
44
44
|
<style>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
45
|
+
#mobile-menu .active {
|
|
46
|
+
color: #fab534;
|
|
47
|
+
}</style>
|