flowbite-svelte 0.13.4 → 0.13.7
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 +23 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/navbar/DropdownNavbar.svelte +38 -32
- package/navbar/DropdownNavbar.svelte.d.ts +1 -0
- package/navbar/Navbar.svelte +35 -29
- package/navbar/Navbar.svelte.d.ts +2 -1
- package/package.json +2 -1
- package/tables/TableSearch.svelte +47 -0
- package/tables/TableSearch.svelte.d.ts +23 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,29 @@
|
|
|
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.7](https://github.com/shinokada/flowbite-svelte/compare/v0.13.6...v0.13.7) (2022-04-13)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* remove SvelteKit app/stores page and session from Navbar ([09428df](https://github.com/shinokada/flowbite-svelte/commit/09428df9f46b16b07595ed16c08697c61c0099a5))
|
|
11
|
+
|
|
12
|
+
### [0.13.6](https://github.com/shinokada/flowbite-svelte/compare/v0.13.5...v0.13.6) (2022-04-13)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
* create new props files ([0a6fd33](https://github.com/shinokada/flowbite-svelte/commit/0a6fd334321bbedd2eecebb5e4f2456ddb19fd3b))
|
|
18
|
+
* remove SvelteKit app session and page ([7eaa3db](https://github.com/shinokada/flowbite-svelte/commit/7eaa3dbfc7f0e2fcf5ef6be4045843fc92b354a5))
|
|
19
|
+
|
|
20
|
+
### [0.13.5](https://github.com/shinokada/flowbite-svelte/compare/v0.13.4...v0.13.5) (2022-04-12)
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
### Features
|
|
24
|
+
|
|
25
|
+
* add table search ([72664ee](https://github.com/shinokada/flowbite-svelte/commit/72664eed118587b445f931c57f1def7bf87056f6))
|
|
26
|
+
* table search on progress ([9cff21d](https://github.com/shinokada/flowbite-svelte/commit/9cff21d7ffbeb351b95601a85abe826323c68f9d))
|
|
27
|
+
|
|
5
28
|
### [0.13.4](https://github.com/shinokada/flowbite-svelte/compare/v0.13.2...v0.13.4) (2022-04-12)
|
|
6
29
|
|
|
7
30
|
|
package/index.d.ts
CHANGED
|
@@ -62,6 +62,7 @@ export { default as Spinner } from "./spinners/Spinner.svelte";
|
|
|
62
62
|
export { default as SpinnerButton } from "./spinners/SpinnerButton.svelte";
|
|
63
63
|
export { default as Table } from "./tables/Table.svelte";
|
|
64
64
|
export { default as TableDefaultRow } from "./tables/TableDefaultRow.svelte";
|
|
65
|
+
export { default as TableSearch } from "./tables/TableSearch.svelte";
|
|
65
66
|
export { default as InteractiveTabHead } from "./tabs/InteractiveTabHead.svelte";
|
|
66
67
|
export { default as InteractiveTabs } from "./tabs/InteractiveTabs.svelte";
|
|
67
68
|
export { default as DefaultTabs } from "./tabs/DefaultTabs.svelte";
|
package/index.js
CHANGED
|
@@ -101,6 +101,7 @@ export { default as SpinnerButton } from'./spinners/SpinnerButton.svelte'
|
|
|
101
101
|
// Tables
|
|
102
102
|
export { default as Table } from './tables/Table.svelte'
|
|
103
103
|
export { default as TableDefaultRow } from './tables/TableDefaultRow.svelte'
|
|
104
|
+
export { default as TableSearch } from './tables/TableSearch.svelte'
|
|
104
105
|
|
|
105
106
|
// Tabs
|
|
106
107
|
export { default as InteractiveTabHead } from './tabs/InteractiveTabHead.svelte'
|
|
@@ -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,12 @@
|
|
|
1
|
-
<script >import {
|
|
2
|
-
export let
|
|
3
|
-
|
|
1
|
+
<script >import { onMount } from 'svelte';
|
|
2
|
+
export let user = '';
|
|
3
|
+
let pathname = '';
|
|
4
|
+
onMount(() => {
|
|
5
|
+
pathname = window.location.pathname;
|
|
6
|
+
// console.log('pathname', pathname);
|
|
7
|
+
});
|
|
8
|
+
export let siteName = 'Svelte Flow';
|
|
9
|
+
export let logo = '/images/flowbite-svelte-logo-30.png';
|
|
4
10
|
export let alt = 'Svelte Flow';
|
|
5
11
|
export let textsize = 'text-sm';
|
|
6
12
|
let barHidden = true;
|
|
@@ -16,32 +22,32 @@ export let liLinkClass = `block py-2 pr-4 pl-3 text-gray-700 border-b border-gr
|
|
|
16
22
|
</script>
|
|
17
23
|
|
|
18
24
|
<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
|
-
|
|
25
|
+
<div class={navDivClass}>
|
|
26
|
+
<a href="/" class="flex">
|
|
27
|
+
<img src={logo} {alt} />
|
|
28
|
+
<span class={spanClass}>{siteName}</span>
|
|
29
|
+
</a>
|
|
30
|
+
<button on:click={handleClickbtn} type="button" class={buttonClass} aria-controls="mobile-menu-2" aria-expanded="false">
|
|
31
|
+
<span class="sr-only">Open main menu</span>
|
|
32
|
+
<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>
|
|
33
|
+
<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>
|
|
34
|
+
</button>
|
|
35
|
+
<div class:hidden={barHidden} class="hidden w-full md:block md:w-auto" id="mobile-menu">
|
|
36
|
+
<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
|
|
37
|
+
{#each menus as { name, href, rel }}
|
|
38
|
+
<li>
|
|
39
|
+
<a class:active={pathname === href} {href} {rel} class={liLinkClass}>{name}</a>
|
|
40
|
+
</li>
|
|
41
|
+
{/each}
|
|
42
|
+
</ul>
|
|
43
|
+
{#if user}
|
|
44
|
+
<slot name="user" />
|
|
45
|
+
{/if}
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
42
48
|
</nav>
|
|
43
49
|
|
|
44
50
|
<style>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
51
|
+
#mobile-menu .active {
|
|
52
|
+
color: #fab534;
|
|
53
|
+
}</style>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.7",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "./package/index.js",
|
|
6
6
|
"author": {
|
|
@@ -149,6 +149,7 @@
|
|
|
149
149
|
"./tables/TableCheckbox.svelte": "./tables/TableCheckbox.svelte",
|
|
150
150
|
"./tables/TableCheckboxRow.svelte": "./tables/TableCheckboxRow.svelte",
|
|
151
151
|
"./tables/TableDefaultRow.svelte": "./tables/TableDefaultRow.svelte",
|
|
152
|
+
"./tables/TableSearch.svelte": "./tables/TableSearch.svelte",
|
|
152
153
|
"./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
|
|
153
154
|
"./tabs/FullWidthTabs.svelte": "./tabs/FullWidthTabs.svelte",
|
|
154
155
|
"./tabs/IconTabs.svelte": "./tabs/IconTabs.svelte",
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<script >import TableDefaultRow from './TableDefaultRow.svelte';
|
|
2
|
+
export let inputValue = '';
|
|
3
|
+
export let menuItems;
|
|
4
|
+
export let filteredItems = [];
|
|
5
|
+
export let placeholder = 'Search';
|
|
6
|
+
const handleInput = () => {
|
|
7
|
+
// console.log('inputValue', inputValue);
|
|
8
|
+
let result = (filteredItems = menuItems.filter((item) => item[0].toLowerCase().match(inputValue.toLowerCase())));
|
|
9
|
+
// console.log('result', result);
|
|
10
|
+
return result;
|
|
11
|
+
};
|
|
12
|
+
export let header;
|
|
13
|
+
export let divClass = 'relative overflow-x-auto shadow-md sm:rounded-lg';
|
|
14
|
+
export let tableClass = 'w-full text-sm text-left text-gray-500 dark:text-gray-400';
|
|
15
|
+
export let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400';
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<div class={divClass}>
|
|
19
|
+
<div class="p-4">
|
|
20
|
+
<label for="table-search" class="sr-only">Search</label>
|
|
21
|
+
<div class="relative mt-1">
|
|
22
|
+
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
|
23
|
+
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /></svg>
|
|
24
|
+
</div>
|
|
25
|
+
<input bind:value={inputValue} on:input={handleInput} type="text" id="table-search" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-80 pl-10 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" {placeholder} />
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<table class={tableClass}>
|
|
30
|
+
<thead class={theadClass}>
|
|
31
|
+
<tr>
|
|
32
|
+
{#each header as column}
|
|
33
|
+
<th scope="col" class="px-6 py-3">
|
|
34
|
+
{column}
|
|
35
|
+
</th>
|
|
36
|
+
{/each}
|
|
37
|
+
</tr>
|
|
38
|
+
</thead>
|
|
39
|
+
<tbody>
|
|
40
|
+
{#if filteredItems.length > 0}
|
|
41
|
+
<TableDefaultRow items={filteredItems} html />
|
|
42
|
+
{:else}
|
|
43
|
+
<TableDefaultRow items={menuItems} html />
|
|
44
|
+
{/if}
|
|
45
|
+
</tbody>
|
|
46
|
+
</table>
|
|
47
|
+
</div>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { SvelteComponentTyped } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
inputValue?: string;
|
|
5
|
+
menuItems: Array<Array<string>>;
|
|
6
|
+
filteredItems?: any[];
|
|
7
|
+
placeholder?: string;
|
|
8
|
+
header: Array<string>;
|
|
9
|
+
divClass?: string;
|
|
10
|
+
tableClass?: string;
|
|
11
|
+
theadClass?: string;
|
|
12
|
+
};
|
|
13
|
+
events: {
|
|
14
|
+
[evt: string]: CustomEvent<any>;
|
|
15
|
+
};
|
|
16
|
+
slots: {};
|
|
17
|
+
};
|
|
18
|
+
export declare type TableSearchProps = typeof __propDef.props;
|
|
19
|
+
export declare type TableSearchEvents = typeof __propDef.events;
|
|
20
|
+
export declare type TableSearchSlots = typeof __propDef.slots;
|
|
21
|
+
export default class TableSearch extends SvelteComponentTyped<TableSearchProps, TableSearchEvents, TableSearchSlots> {
|
|
22
|
+
}
|
|
23
|
+
export {};
|