flowbite-svelte 0.13.3 → 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 +28 -0
- package/README.md +4 -0
- package/footer/SitemapFooter.svelte +32 -32
- 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 +28 -28
- package/navbar/Navbar.svelte.d.ts +1 -1
- package/package.json +13 -2
- package/tables/TableSearch.svelte +47 -0
- package/tables/TableSearch.svelte.d.ts +23 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,4 +2,32 @@
|
|
|
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
|
+
|
|
13
|
+
### [0.13.5](https://github.com/shinokada/flowbite-svelte/compare/v0.13.4...v0.13.5) (2022-04-12)
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### Features
|
|
17
|
+
|
|
18
|
+
* add table search ([72664ee](https://github.com/shinokada/flowbite-svelte/commit/72664eed118587b445f931c57f1def7bf87056f6))
|
|
19
|
+
* table search on progress ([9cff21d](https://github.com/shinokada/flowbite-svelte/commit/9cff21d7ffbeb351b95601a85abe826323c68f9d))
|
|
20
|
+
|
|
21
|
+
### [0.13.4](https://github.com/shinokada/flowbite-svelte/compare/v0.13.2...v0.13.4) (2022-04-12)
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
### Bug Fixes
|
|
25
|
+
|
|
26
|
+
* add sitemap footer darkmode ([72fe322](https://github.com/shinokada/flowbite-svelte/commit/72fe3227e472187101c12ef89e10ada77624fc25))
|
|
27
|
+
* enable scrolling in modals (fixes [#23](https://github.com/shinokada/flowbite-svelte/issues/23)) ([8e60319](https://github.com/shinokada/flowbite-svelte/commit/8e603198988a3a03a56414f4e26143bb54ff0c92))
|
|
28
|
+
* removed prismjs from package.json and layouts ([dd9ad11](https://github.com/shinokada/flowbite-svelte/commit/dd9ad110193e176ad8127f9c556105d3da854b26))
|
|
29
|
+
* sidebar menu covers screen and it doesn't allow to click any links ([879c886](https://github.com/shinokada/flowbite-svelte/commit/879c886b5134908f1e4e9365c13df9bae372acd0))
|
|
30
|
+
* update sidebar menu to close after clicking a link ([ae9a36c](https://github.com/shinokada/flowbite-svelte/commit/ae9a36c2d9705c664de91a6870b7603ccffbece2))
|
|
31
|
+
* update sidebar menu to close it when you click outside of the sidebar ([30c6026](https://github.com/shinokada/flowbite-svelte/commit/30c6026f8f5fec945e97de18585f5665ca6ddbae))
|
|
32
|
+
|
|
5
33
|
### [0.12.6](https://github.com/shinokada/flowbite-svelte/compare/v0.12.5...v0.12.6) (2022-04-05)
|
package/README.md
CHANGED
|
@@ -123,6 +123,10 @@
|
|
|
123
123
|
- [Multiple Interactive Tabs](https://flowbite-svelte.vercel.app/tabs/multiple-interactive-tabs)
|
|
124
124
|
- [Pill Tabs](https://flowbite-svelte.vercel.app/tabs/pilltabs)
|
|
125
125
|
|
|
126
|
+
## Table components
|
|
127
|
+
|
|
128
|
+
- [Tables](https://flowbite-svelte.vercel.app/tables)
|
|
129
|
+
|
|
126
130
|
## Timeline components
|
|
127
131
|
|
|
128
132
|
- [Default timeline](https://flowbite-svelte.vercel.app/timelines/default)
|
|
@@ -1,45 +1,45 @@
|
|
|
1
1
|
<script >export let site;
|
|
2
2
|
export let links;
|
|
3
3
|
export let socialMedia;
|
|
4
|
-
export let footerClass = 'bg-gray-800';
|
|
4
|
+
export let footerClass = 'bg-white dark:bg-gray-800';
|
|
5
5
|
export let linksClass = 'grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4';
|
|
6
|
-
export let parentClass = 'mb-6 text-sm font-semibold text-gray-400 uppercase';
|
|
7
|
-
export let ulClass = 'text-gray-300';
|
|
6
|
+
export let parentClass = 'mb-6 text-sm font-semibold dark:text-gray-400 uppercase';
|
|
7
|
+
export let ulClass = 'text-gray-900 dark:text-gray-300';
|
|
8
8
|
export let linkClass = 'hover:underline';
|
|
9
|
-
export let copyrightDivClass = 'py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between';
|
|
10
|
-
export let copyrightClass = 'text-sm text-gray-300 sm:text-center';
|
|
9
|
+
export let copyrightDivClass = 'py-6 px-4 text-gray-900 dark:bg-gray-700 md:flex md:items-center md:justify-between';
|
|
10
|
+
export let copyrightClass = 'text-sm text-gray-900 dark:text-gray-300 sm:text-center';
|
|
11
11
|
export let socialMediaDivClass = 'flex mt-4 space-x-6 sm:justify-center md:mt-0';
|
|
12
|
-
export let socialMediaLinkClass = 'text-gray-400 hover:text-white';
|
|
12
|
+
export let socialMediaLinkClass = 'text-gray-900 dark:text-gray-400 hover:text-gray-300 dark:hover:text-white';
|
|
13
13
|
export let iconClass = 'h-5 w-5 mr-2';
|
|
14
14
|
export let copyrightYear = '© 2022';
|
|
15
15
|
export let allRightsReserved = 'All Rights Reserved.';
|
|
16
16
|
</script>
|
|
17
17
|
|
|
18
18
|
<footer class="{footerClass} {$$props.class}">
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
19
|
+
<div class={linksClass}>
|
|
20
|
+
{#each links as { parent, children }}
|
|
21
|
+
<div>
|
|
22
|
+
<h2 class={parentClass}>
|
|
23
|
+
{parent}
|
|
24
|
+
</h2>
|
|
25
|
+
<ul class={ulClass}>
|
|
26
|
+
{#each children as { name, href }}
|
|
27
|
+
<li class="mb-4">
|
|
28
|
+
<a {href} class={linkClass}>{name}</a>
|
|
29
|
+
</li>
|
|
30
|
+
{/each}
|
|
31
|
+
</ul>
|
|
32
|
+
</div>
|
|
33
|
+
{/each}
|
|
34
|
+
</div>
|
|
35
|
+
<div class={copyrightDivClass}>
|
|
36
|
+
<span class={copyrightClass}>{copyrightYear} <a href={site.href}>{site.name}</a>. {allRightsReserved} </span>
|
|
37
|
+
<div class={socialMediaDivClass}>
|
|
38
|
+
{#each socialMedia as { href, icon }}
|
|
39
|
+
<a {href} class={socialMediaLinkClass}>
|
|
40
|
+
<svelte:component this={icon} className={iconClass} />
|
|
41
|
+
</a>
|
|
42
|
+
{/each}
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
45
|
</footer>
|
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,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>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.13.
|
|
3
|
+
"version": "0.13.6",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "./package/index.js",
|
|
6
6
|
"author": {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"homepage": "https://github.com/shinokada/flowbite-svelte",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"devDependencies": {
|
|
15
|
-
"@codewithshin/svelte-sidebar": "^0.4.
|
|
15
|
+
"@codewithshin/svelte-sidebar": "^0.4.7",
|
|
16
16
|
"@codewithshin/svelte-simpleicons": "^0.2.2",
|
|
17
17
|
"@codewithshin/svelte-utterances": "^0.1.2",
|
|
18
18
|
"@playwright/test": "^1.19.1",
|
|
@@ -47,15 +47,25 @@
|
|
|
47
47
|
"ui",
|
|
48
48
|
"accordion",
|
|
49
49
|
"alert",
|
|
50
|
+
"avatar",
|
|
50
51
|
"badges",
|
|
52
|
+
"button-groups",
|
|
51
53
|
"buttons",
|
|
52
54
|
"cards",
|
|
53
55
|
"darkmode",
|
|
54
56
|
"footer",
|
|
57
|
+
"forms",
|
|
58
|
+
"list group",
|
|
55
59
|
"modals",
|
|
56
60
|
"navbar",
|
|
61
|
+
"paginations",
|
|
62
|
+
"progress bars",
|
|
63
|
+
"sidebars",
|
|
57
64
|
"spinners",
|
|
65
|
+
"tables",
|
|
58
66
|
"tabs",
|
|
67
|
+
"timelines",
|
|
68
|
+
"toasts",
|
|
59
69
|
"tooltip"
|
|
60
70
|
],
|
|
61
71
|
"repository": {
|
|
@@ -139,6 +149,7 @@
|
|
|
139
149
|
"./tables/TableCheckbox.svelte": "./tables/TableCheckbox.svelte",
|
|
140
150
|
"./tables/TableCheckboxRow.svelte": "./tables/TableCheckboxRow.svelte",
|
|
141
151
|
"./tables/TableDefaultRow.svelte": "./tables/TableDefaultRow.svelte",
|
|
152
|
+
"./tables/TableSearch.svelte": "./tables/TableSearch.svelte",
|
|
142
153
|
"./tabs/DefaultTabs.svelte": "./tabs/DefaultTabs.svelte",
|
|
143
154
|
"./tabs/FullWidthTabs.svelte": "./tabs/FullWidthTabs.svelte",
|
|
144
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 {};
|