flowbite-svelte 0.16.7 → 0.16.10
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/carousels/Carousel.svelte +0 -1
- package/carousels/CarouselTransition.svelte +0 -1
- package/darkmode/DarkMode.svelte +28 -7
- package/dropdowns/ImgDropdown.svelte +5 -2
- package/forms/{RadioItem.svelte → Radio.svelte} +25 -2
- package/forms/{RadioItem.svelte.d.ts → Radio.svelte.d.ts} +5 -4
- package/forms/Toggle.svelte +17 -9
- package/forms/Toggle.svelte.d.ts +2 -0
- package/index.d.ts +1 -1
- package/index.js +1 -1
- package/modals/ModalButton.svelte +18 -10
- package/navbar/DropdownNavbar.svelte +0 -1
- package/navbar/NavUl.svelte +0 -1
- package/navbar/Navbar.svelte +0 -1
- package/package.json +2 -2
- package/tables/TableSearch.svelte +44 -29
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.10](https://github.com/themesberg/flowbite-svelte/compare/v0.16.9...v0.16.10) (2022-06-05)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add on:click to forms/Toggle component ([3b9ba37](https://github.com/themesberg/flowbite-svelte/commit/3b9ba3730421fa7096efee80225c60038ad903b9))
|
|
11
|
+
|
|
12
|
+
### [0.16.9](https://github.com/themesberg/flowbite-svelte/compare/v0.16.8...v0.16.9) (2022-06-05)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* add bind:group to Radio component ([386ab02](https://github.com/themesberg/flowbite-svelte/commit/386ab0246d0a3a7ae60416c6f9979501f4c434af))
|
|
18
|
+
|
|
19
|
+
### [0.16.8](https://github.com/themesberg/flowbite-svelte/compare/v0.16.7...v0.16.8) (2022-06-03)
|
|
20
|
+
|
|
5
21
|
### [0.16.7](https://github.com/themesberg/flowbite-svelte/compare/v0.16.6...v0.16.7) (2022-06-02)
|
|
6
22
|
|
|
7
23
|
### [0.16.6](https://github.com/themesberg/flowbite-svelte/compare/v0.16.5...v0.16.6) (2022-06-02)
|
|
@@ -26,7 +26,6 @@ export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300
|
|
|
26
26
|
// Slide
|
|
27
27
|
export let slideClass = '';
|
|
28
28
|
let imageShowingIndex = 0;
|
|
29
|
-
// $: console.log(imageShowingIndex);
|
|
30
29
|
$: image = images[imageShowingIndex];
|
|
31
30
|
const nextSlide = () => {
|
|
32
31
|
if (imageShowingIndex === images.length - 1) {
|
|
@@ -43,7 +43,6 @@ export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300
|
|
|
43
43
|
// Slide
|
|
44
44
|
// export let slideClass: string = 'hidden';
|
|
45
45
|
let imageShowingIndex = 1;
|
|
46
|
-
// $: console.log(imageShowingIndex);
|
|
47
46
|
// $: image = images[imageShowingIndex];
|
|
48
47
|
const nextSlide = () => {
|
|
49
48
|
if (imageShowingIndex === images.length - 1) {
|
package/darkmode/DarkMode.svelte
CHANGED
|
@@ -2,16 +2,13 @@
|
|
|
2
2
|
export let btnClass = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 fixed left-0 top-8 z-50';
|
|
3
3
|
let mode;
|
|
4
4
|
const toggleTheme = () => {
|
|
5
|
-
// console.log("clicked theme icon");
|
|
6
5
|
if (localStorage.getItem('color-theme') === 'dark') {
|
|
7
|
-
// console.log("it's dark");
|
|
8
6
|
mode = 'dark';
|
|
9
7
|
window.document.documentElement.classList.remove('dark');
|
|
10
8
|
window.document.documentElement.classList.add('light');
|
|
11
9
|
localStorage.setItem('color-theme', 'light');
|
|
12
10
|
}
|
|
13
11
|
else {
|
|
14
|
-
// console.log("it's light");
|
|
15
12
|
mode = 'light';
|
|
16
13
|
window.document.documentElement.classList.remove('light');
|
|
17
14
|
window.document.documentElement.classList.add('dark');
|
|
@@ -21,7 +18,9 @@ const toggleTheme = () => {
|
|
|
21
18
|
onMount(() => {
|
|
22
19
|
let themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
|
|
23
20
|
let themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
|
|
24
|
-
if (localStorage.getItem('color-theme') === 'dark' ||
|
|
21
|
+
if (localStorage.getItem('color-theme') === 'dark' ||
|
|
22
|
+
(!('color-theme' in localStorage) &&
|
|
23
|
+
window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
25
24
|
document.documentElement.classList.add('dark');
|
|
26
25
|
themeToggleDarkIcon.classList.add('hidden');
|
|
27
26
|
}
|
|
@@ -32,10 +31,32 @@ onMount(() => {
|
|
|
32
31
|
});
|
|
33
32
|
</script>
|
|
34
33
|
|
|
35
|
-
<button
|
|
36
|
-
|
|
34
|
+
<button
|
|
35
|
+
on:click={toggleTheme}
|
|
36
|
+
aria-label="Dark mode"
|
|
37
|
+
id="theme-toggle"
|
|
38
|
+
type="button"
|
|
39
|
+
class={btnClass}
|
|
40
|
+
>
|
|
41
|
+
<svg
|
|
42
|
+
class:hidden={mode === 'light'}
|
|
43
|
+
on:click={() => (mode = 'dark')}
|
|
44
|
+
id="theme-toggle-dark-icon"
|
|
45
|
+
class="hidden w-5 h-5"
|
|
46
|
+
fill="currentColor"
|
|
47
|
+
viewBox="0 0 20 20"
|
|
48
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
49
|
+
><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg
|
|
50
|
+
>
|
|
37
51
|
|
|
38
|
-
<svg
|
|
52
|
+
<svg
|
|
53
|
+
class:hidden={mode === 'dark'}
|
|
54
|
+
on:click={() => (mode = 'light')}
|
|
55
|
+
id="theme-toggle-light-icon"
|
|
56
|
+
class="hidden w-5 h-5"
|
|
57
|
+
fill="currentColor"
|
|
58
|
+
viewBox="0 0 20 20"
|
|
59
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
39
60
|
><path
|
|
40
61
|
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
|
|
41
62
|
fill-rule="evenodd"
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
<script>let imgDropdownToggle = true;
|
|
2
2
|
const handleToggle = () => {
|
|
3
|
-
console.log('toggle clicked.');
|
|
4
3
|
imgDropdownToggle = !imgDropdownToggle;
|
|
5
4
|
};
|
|
6
5
|
export let items;
|
|
@@ -22,7 +21,11 @@ export let linkClass = 'block py-2 px-4 text-sm text-gray-700 hover:bg-gray-100
|
|
|
22
21
|
{/if}
|
|
23
22
|
<ul class="py-1" aria-labelledby="dropdownButton">
|
|
24
23
|
{#each items as { href, name, divider }}
|
|
25
|
-
<li
|
|
24
|
+
<li
|
|
25
|
+
class:border-b={divider}
|
|
26
|
+
class:border-gray-100={divider}
|
|
27
|
+
class:dark:border-gray-500={divider}
|
|
28
|
+
>
|
|
26
29
|
<a {href} class={linkClass}>{name}</a>
|
|
27
30
|
</li>
|
|
28
31
|
{/each}
|
|
@@ -35,12 +35,24 @@ export let helper;
|
|
|
35
35
|
export let id;
|
|
36
36
|
export let value;
|
|
37
37
|
export let label;
|
|
38
|
+
export let group;
|
|
38
39
|
</script>
|
|
39
40
|
|
|
40
41
|
{#if helper}
|
|
41
42
|
<div class="flex">
|
|
42
43
|
<div class={divHelperClass}>
|
|
43
|
-
<input
|
|
44
|
+
<input
|
|
45
|
+
bind:group
|
|
46
|
+
{id}
|
|
47
|
+
type="radio"
|
|
48
|
+
{name}
|
|
49
|
+
{value}
|
|
50
|
+
class={inputClass}
|
|
51
|
+
aria-labelledby={id}
|
|
52
|
+
aria-describedby={id}
|
|
53
|
+
{disabled}
|
|
54
|
+
{...$$restProps}
|
|
55
|
+
/>
|
|
44
56
|
</div>
|
|
45
57
|
<div class="ml-2 text-sm">
|
|
46
58
|
<label for={id} class={labelHelperClass}>
|
|
@@ -51,7 +63,18 @@ export let label;
|
|
|
51
63
|
</div>
|
|
52
64
|
{:else}
|
|
53
65
|
<div class={divClass}>
|
|
54
|
-
<input
|
|
66
|
+
<input
|
|
67
|
+
bind:group
|
|
68
|
+
{id}
|
|
69
|
+
type="radio"
|
|
70
|
+
{name}
|
|
71
|
+
{value}
|
|
72
|
+
class={inputClass}
|
|
73
|
+
aria-labelledby={id}
|
|
74
|
+
aria-describedby={id}
|
|
75
|
+
{disabled}
|
|
76
|
+
{...$$restProps}
|
|
77
|
+
/>
|
|
55
78
|
<label for={id} class={labelClass}>
|
|
56
79
|
{@html label}
|
|
57
80
|
</label>
|
|
@@ -16,15 +16,16 @@ declare const __propDef: {
|
|
|
16
16
|
id: string;
|
|
17
17
|
value: string;
|
|
18
18
|
label: string;
|
|
19
|
+
group: number | string;
|
|
19
20
|
};
|
|
20
21
|
events: {
|
|
21
22
|
[evt: string]: CustomEvent<any>;
|
|
22
23
|
};
|
|
23
24
|
slots: {};
|
|
24
25
|
};
|
|
25
|
-
export declare type
|
|
26
|
-
export declare type
|
|
27
|
-
export declare type
|
|
28
|
-
export default class
|
|
26
|
+
export declare type RadioProps = typeof __propDef.props;
|
|
27
|
+
export declare type RadioEvents = typeof __propDef.events;
|
|
28
|
+
export declare type RadioSlots = typeof __propDef.slots;
|
|
29
|
+
export default class Radio extends SvelteComponentTyped<RadioProps, RadioEvents, RadioSlots> {
|
|
29
30
|
}
|
|
30
31
|
export {};
|
package/forms/Toggle.svelte
CHANGED
|
@@ -15,33 +15,41 @@ if (color || size) {
|
|
|
15
15
|
}
|
|
16
16
|
export let spanClass = 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300';
|
|
17
17
|
if (color === 'red') {
|
|
18
|
-
divClass =
|
|
18
|
+
divClass =
|
|
19
|
+
"w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-red-300 dark:peer-focus:ring-red-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-red-600";
|
|
19
20
|
}
|
|
20
21
|
else if (color === 'green') {
|
|
21
|
-
divClass =
|
|
22
|
+
divClass =
|
|
23
|
+
"w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-600";
|
|
22
24
|
}
|
|
23
25
|
else if (color === 'purple') {
|
|
24
|
-
divClass =
|
|
26
|
+
divClass =
|
|
27
|
+
"w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600";
|
|
25
28
|
}
|
|
26
29
|
else if (color === 'yellow') {
|
|
27
|
-
divClass =
|
|
30
|
+
divClass =
|
|
31
|
+
"w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-yellow-400";
|
|
28
32
|
}
|
|
29
33
|
else if (color === 'teal') {
|
|
30
|
-
divClass =
|
|
34
|
+
divClass =
|
|
35
|
+
"w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-teal-600";
|
|
31
36
|
}
|
|
32
37
|
else if (color === 'orange') {
|
|
33
|
-
divClass =
|
|
38
|
+
divClass =
|
|
39
|
+
"w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-orange-500";
|
|
34
40
|
}
|
|
35
41
|
else if (size === 'small') {
|
|
36
|
-
divClass =
|
|
42
|
+
divClass =
|
|
43
|
+
"w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
|
|
37
44
|
}
|
|
38
45
|
else if (size === 'large') {
|
|
39
|
-
divClass =
|
|
46
|
+
divClass =
|
|
47
|
+
"w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600";
|
|
40
48
|
}
|
|
41
49
|
</script>
|
|
42
50
|
|
|
43
51
|
<label for={id} class={labelClass}>
|
|
44
|
-
<input type="checkbox" {id} class={inputClass} {value} bind:checked {name} {disabled} />
|
|
52
|
+
<input type="checkbox" {id} class={inputClass} {value} bind:checked {name} {disabled} on:click />
|
|
45
53
|
<div class="{divClass} {$$props.class ? $$props.class : ''}" />
|
|
46
54
|
<span class={spanClass}>{label}</span>
|
|
47
55
|
</label>
|
package/forms/Toggle.svelte.d.ts
CHANGED
package/index.d.ts
CHANGED
|
@@ -37,7 +37,7 @@ export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte
|
|
|
37
37
|
export { default as Iconinput } from './forms/Iconinput.svelte';
|
|
38
38
|
export { default as Input } from './forms/Input.svelte';
|
|
39
39
|
export { default as RadioInline } from './forms/RadioInline.svelte';
|
|
40
|
-
export { default as Radio } from './forms/
|
|
40
|
+
export { default as Radio } from './forms/Radio.svelte';
|
|
41
41
|
export { default as Range } from './forms/Range.svelte';
|
|
42
42
|
export { default as Search } from './forms/Search.svelte';
|
|
43
43
|
export { default as Select } from './forms/Select.svelte';
|
package/index.js
CHANGED
|
@@ -50,7 +50,7 @@ export { default as FloatingLabelInput } from './forms/FloatingLabelInput.svelte
|
|
|
50
50
|
export { default as Iconinput } from './forms/Iconinput.svelte';
|
|
51
51
|
export { default as Input } from './forms/Input.svelte';
|
|
52
52
|
export { default as RadioInline } from './forms/RadioInline.svelte';
|
|
53
|
-
export { default as Radio } from './forms/
|
|
53
|
+
export { default as Radio } from './forms/Radio.svelte';
|
|
54
54
|
export { default as Range } from './forms/Range.svelte';
|
|
55
55
|
export { default as Search } from './forms/Search.svelte';
|
|
56
56
|
export { default as Select } from './forms/Select.svelte';
|
|
@@ -7,35 +7,43 @@ let showModalId;
|
|
|
7
7
|
export const openFn = (id) => {
|
|
8
8
|
modalIdStore.update((n) => (n = id));
|
|
9
9
|
showModalId = get(modalIdStore);
|
|
10
|
-
// console.log('showModalId', showModalId);
|
|
11
10
|
};
|
|
12
11
|
let buttonClass;
|
|
13
12
|
if (btnColor === 'blue') {
|
|
14
|
-
buttonClass =
|
|
13
|
+
buttonClass =
|
|
14
|
+
'block w-full md:w-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
|
|
15
15
|
}
|
|
16
16
|
else if (btnColor === 'gray') {
|
|
17
|
-
buttonClass =
|
|
17
|
+
buttonClass =
|
|
18
|
+
'block w-full md:w-auto text-white bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
|
|
18
19
|
}
|
|
19
20
|
else if (btnColor === 'red') {
|
|
20
|
-
buttonClass =
|
|
21
|
+
buttonClass =
|
|
22
|
+
'block w-full md:w-auto text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800';
|
|
21
23
|
}
|
|
22
24
|
else if (btnColor === 'yellow') {
|
|
23
|
-
buttonClass =
|
|
25
|
+
buttonClass =
|
|
26
|
+
'block w-full md:w-auto text-white bg-yellow-700 hover:bg-yellow-800 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800';
|
|
24
27
|
}
|
|
25
28
|
else if (btnColor === 'green') {
|
|
26
|
-
buttonClass =
|
|
29
|
+
buttonClass =
|
|
30
|
+
'block w-full md:w-auto text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800';
|
|
27
31
|
}
|
|
28
32
|
else if (btnColor === 'indigo') {
|
|
29
|
-
buttonClass =
|
|
33
|
+
buttonClass =
|
|
34
|
+
'block w-full md:w-auto text-white bg-indigo-700 hover:bg-indigo-800 focus:ring-4 focus:ring-indigo-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-indigo-600 dark:hover:bg-indigo-700 dark:focus:ring-indigo-800';
|
|
30
35
|
}
|
|
31
36
|
else if (btnColor === 'purple') {
|
|
32
|
-
buttonClass =
|
|
37
|
+
buttonClass =
|
|
38
|
+
'block w-full md:w-auto text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800';
|
|
33
39
|
}
|
|
34
40
|
else if (btnColor === 'pink') {
|
|
35
|
-
buttonClass =
|
|
41
|
+
buttonClass =
|
|
42
|
+
'block w-full md:w-auto text-white bg-pink-700 hover:bg-pink-800 focus:ring-4 focus:ring-pink-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800';
|
|
36
43
|
}
|
|
37
44
|
else {
|
|
38
|
-
buttonClass =
|
|
45
|
+
buttonClass =
|
|
46
|
+
'block w-full md:w-auto text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
|
|
39
47
|
}
|
|
40
48
|
</script>
|
|
41
49
|
|
package/navbar/NavUl.svelte
CHANGED
|
@@ -4,7 +4,6 @@ export let divClass = ' justify-between items-center w-full md:flex md:w-auto md
|
|
|
4
4
|
export let ulClass = 'flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium';
|
|
5
5
|
export let hidden = true;
|
|
6
6
|
// $: hidden;
|
|
7
|
-
// $: console.log('hidden: ', hidden);
|
|
8
7
|
</script>
|
|
9
8
|
|
|
10
9
|
{#if !hidden}
|
package/navbar/Navbar.svelte
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.10",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": {
|
|
@@ -128,8 +128,8 @@
|
|
|
128
128
|
"./forms/FloatingLabelInput.svelte": "./forms/FloatingLabelInput.svelte",
|
|
129
129
|
"./forms/Iconinput.svelte": "./forms/Iconinput.svelte",
|
|
130
130
|
"./forms/Input.svelte": "./forms/Input.svelte",
|
|
131
|
+
"./forms/Radio.svelte": "./forms/Radio.svelte",
|
|
131
132
|
"./forms/RadioInline.svelte": "./forms/RadioInline.svelte",
|
|
132
|
-
"./forms/RadioItem.svelte": "./forms/RadioItem.svelte",
|
|
133
133
|
"./forms/Range.svelte": "./forms/Range.svelte",
|
|
134
134
|
"./forms/Search.svelte": "./forms/Search.svelte",
|
|
135
135
|
"./forms/Select.svelte": "./forms/Select.svelte",
|
|
@@ -4,9 +4,7 @@ export let menuItems;
|
|
|
4
4
|
export let filteredItems = [];
|
|
5
5
|
export let placeholder = 'Search';
|
|
6
6
|
const handleInput = () => {
|
|
7
|
-
// console.log('inputValue', inputValue);
|
|
8
7
|
let result = (filteredItems = menuItems.filter((item) => item[0].toLowerCase().match(inputValue.toLowerCase())));
|
|
9
|
-
// console.log('result', result);
|
|
10
8
|
return result;
|
|
11
9
|
};
|
|
12
10
|
export let header;
|
|
@@ -16,32 +14,49 @@ export let theadClass = 'text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray
|
|
|
16
14
|
</script>
|
|
17
15
|
|
|
18
16
|
<div class={divClass}>
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
17
|
+
<div class="p-4">
|
|
18
|
+
<label for="table-search" class="sr-only">Search</label>
|
|
19
|
+
<div class="relative mt-1">
|
|
20
|
+
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
|
21
|
+
<svg
|
|
22
|
+
class="w-5 h-5 text-gray-500 dark:text-gray-400"
|
|
23
|
+
fill="currentColor"
|
|
24
|
+
viewBox="0 0 20 20"
|
|
25
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
26
|
+
><path
|
|
27
|
+
fill-rule="evenodd"
|
|
28
|
+
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"
|
|
29
|
+
clip-rule="evenodd"
|
|
30
|
+
/></svg
|
|
31
|
+
>
|
|
32
|
+
</div>
|
|
33
|
+
<input
|
|
34
|
+
bind:value={inputValue}
|
|
35
|
+
on:input={handleInput}
|
|
36
|
+
type="text"
|
|
37
|
+
id="table-search"
|
|
38
|
+
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"
|
|
39
|
+
{placeholder}
|
|
40
|
+
/>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
28
43
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
44
|
+
<table class={tableClass}>
|
|
45
|
+
<thead class={theadClass}>
|
|
46
|
+
<tr>
|
|
47
|
+
{#each header as column}
|
|
48
|
+
<th scope="col" class="px-6 py-3">
|
|
49
|
+
{column}
|
|
50
|
+
</th>
|
|
51
|
+
{/each}
|
|
52
|
+
</tr>
|
|
53
|
+
</thead>
|
|
54
|
+
<tbody>
|
|
55
|
+
{#if filteredItems.length > 0}
|
|
56
|
+
<TableDefaultRow items={filteredItems} html />
|
|
57
|
+
{:else}
|
|
58
|
+
<TableDefaultRow items={menuItems} html />
|
|
59
|
+
{/if}
|
|
60
|
+
</tbody>
|
|
61
|
+
</table>
|
|
47
62
|
</div>
|