flowbite-svelte 0.27.17 → 0.28.1
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 +22 -0
- package/darkmode/DarkMode.svelte +21 -11
- package/darkmode/DarkMode.svelte.d.ts +5 -1
- package/forms/Checkbox.svelte +4 -2
- package/forms/Checkbox.svelte.d.ts +2 -2
- package/forms/FloatingLabelInput.svelte +9 -3
- package/forms/Toggle.svelte +1 -1
- package/forms/Toggle.svelte.d.ts +2 -2
- package/package.json +18 -18
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,28 @@
|
|
|
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.28.1](https://github.com/themesberg/flowbite-svelte/compare/v0.28.0...v0.28.1) (2022-11-23)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* toggle initial checked ([#442](https://github.com/themesberg/flowbite-svelte/issues/442)) ([7b0b0b0](https://github.com/themesberg/flowbite-svelte/commit/7b0b0b0cfd0b40e6688af0a2a748453b16a4fd5a))
|
|
11
|
+
* use encodeURIComponent for MetaTag component to encode spaces ([671a865](https://github.com/themesberg/flowbite-svelte/commit/671a8656eb7f5fff6f8c84ea6146f78b5fb8f0b0))
|
|
12
|
+
|
|
13
|
+
## [0.28.0](https://github.com/themesberg/flowbite-svelte/compare/v0.27.17...v0.28.0) (2022-11-20)
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### Features
|
|
17
|
+
|
|
18
|
+
* enhance DarkMode ([#437](https://github.com/themesberg/flowbite-svelte/issues/437)) ([9afd3e1](https://github.com/themesberg/flowbite-svelte/commit/9afd3e11bec5bc4416537d7d371f970dd414a394))
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
### Bug Fixes
|
|
22
|
+
|
|
23
|
+
* checkbox initial checked ([#434](https://github.com/themesberg/flowbite-svelte/issues/434)) ([43663cf](https://github.com/themesberg/flowbite-svelte/commit/43663cf165f249c7e3fa7e7dc8ccfaccc7e467a6))
|
|
24
|
+
* floatinginput type changes ([#436](https://github.com/themesberg/flowbite-svelte/issues/436)) ([5af9ecf](https://github.com/themesberg/flowbite-svelte/commit/5af9ecf598800e4cbcf27e413ba0b63d82926219))
|
|
25
|
+
* og:image and twitter:image to replace spaces with - ([#441](https://github.com/themesberg/flowbite-svelte/issues/441)) ([25ad6d0](https://github.com/themesberg/flowbite-svelte/commit/25ad6d09816e1df3a5a8ddd9a901186d2a36f4ee))
|
|
26
|
+
|
|
5
27
|
### [0.27.17](https://github.com/themesberg/flowbite-svelte/compare/v0.27.16...v0.27.17) (2022-11-18)
|
|
6
28
|
|
|
7
29
|
|
package/darkmode/DarkMode.svelte
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
<script>
|
|
1
|
+
<script>import classNames from 'classnames';
|
|
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';
|
|
2
3
|
const toggleTheme = () => {
|
|
3
4
|
const isDark = window.document.documentElement.classList.toggle('dark');
|
|
4
5
|
localStorage.setItem('color-theme', isDark ? 'dark' : 'light');
|
|
@@ -16,19 +17,28 @@ const toggleTheme = () => {
|
|
|
16
17
|
</script>
|
|
17
18
|
</svelte:head>
|
|
18
19
|
|
|
19
|
-
<button
|
|
20
|
+
<button
|
|
21
|
+
on:click={toggleTheme}
|
|
22
|
+
aria-label="Dark mode"
|
|
23
|
+
type="button"
|
|
24
|
+
{...$$restProps}
|
|
25
|
+
class={classNames(btnClass, $$props.class)}>
|
|
20
26
|
<span class="hidden dark:block">
|
|
21
|
-
<
|
|
22
|
-
<
|
|
23
|
-
|
|
27
|
+
<slot name="lightIcon">
|
|
28
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
29
|
+
<path
|
|
30
|
+
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
|
|
24
31
|
0 100-2H3a1 1 0 000 2h1z"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
32
|
+
fill-rule="evenodd"
|
|
33
|
+
clip-rule="evenodd" />
|
|
34
|
+
</svg>
|
|
35
|
+
</slot>
|
|
28
36
|
</span>
|
|
29
37
|
<span class="dark:hidden">
|
|
30
|
-
<
|
|
31
|
-
<
|
|
32
|
-
|
|
38
|
+
<slot name="darkIcon">
|
|
39
|
+
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
40
|
+
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
|
|
41
|
+
</svg>
|
|
42
|
+
</slot>
|
|
33
43
|
</span>
|
|
34
44
|
</button>
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import { SvelteComponentTyped } from "svelte";
|
|
2
2
|
declare const __propDef: {
|
|
3
3
|
props: {
|
|
4
|
+
[x: string]: any;
|
|
4
5
|
btnClass?: string | undefined;
|
|
5
6
|
};
|
|
6
7
|
events: {
|
|
7
8
|
[evt: string]: CustomEvent<any>;
|
|
8
9
|
};
|
|
9
|
-
slots: {
|
|
10
|
+
slots: {
|
|
11
|
+
lightIcon: {};
|
|
12
|
+
darkIcon: {};
|
|
13
|
+
};
|
|
10
14
|
};
|
|
11
15
|
export declare type DarkModeProps = typeof __propDef.props;
|
|
12
16
|
export declare type DarkModeEvents = typeof __propDef.events;
|
package/forms/Checkbox.svelte
CHANGED
|
@@ -7,12 +7,14 @@ export let custom = false;
|
|
|
7
7
|
export let inline = false;
|
|
8
8
|
export let group = [];
|
|
9
9
|
export let value = '';
|
|
10
|
-
export let checked =
|
|
10
|
+
export let checked = undefined;
|
|
11
11
|
// tinted if put in component having its own background
|
|
12
12
|
let background = getContext('background');
|
|
13
13
|
// react on external group changes
|
|
14
14
|
function init(_, _group) {
|
|
15
|
-
checked
|
|
15
|
+
if (checked === undefined)
|
|
16
|
+
checked = _group.includes(value);
|
|
17
|
+
onChange();
|
|
16
18
|
return {
|
|
17
19
|
update(_group) {
|
|
18
20
|
checked = _group.includes(value);
|
|
@@ -6,8 +6,8 @@ declare const __propDef: {
|
|
|
6
6
|
color?: FormColorType | undefined;
|
|
7
7
|
custom?: boolean | undefined;
|
|
8
8
|
inline?: boolean | undefined;
|
|
9
|
-
group?: string[] | undefined;
|
|
10
|
-
value?: string | undefined;
|
|
9
|
+
group?: (string | number)[] | undefined;
|
|
10
|
+
value?: string | number | undefined;
|
|
11
11
|
checked?: boolean | undefined;
|
|
12
12
|
};
|
|
13
13
|
events: {
|
|
@@ -61,9 +61,15 @@ const labelColorClasses = {
|
|
|
61
61
|
red: 'text-red-600 dark:text-red-500'
|
|
62
62
|
};
|
|
63
63
|
// you need to this to avoid 2-way binding
|
|
64
|
-
function setType(node) {
|
|
65
|
-
node.type =
|
|
64
|
+
function setType(node, _type) {
|
|
65
|
+
node.type = _type;
|
|
66
|
+
return {
|
|
67
|
+
update(_type) {
|
|
68
|
+
node.type = _type;
|
|
69
|
+
}
|
|
70
|
+
};
|
|
66
71
|
}
|
|
72
|
+
;
|
|
67
73
|
</script>
|
|
68
74
|
|
|
69
75
|
<div class={divClasses[style]}>
|
|
@@ -82,7 +88,7 @@ function setType(node) {
|
|
|
82
88
|
on:mouseleave
|
|
83
89
|
on:mouseover
|
|
84
90
|
on:paste
|
|
85
|
-
use:setType
|
|
91
|
+
use:setType={type}
|
|
86
92
|
placeholder=" "
|
|
87
93
|
class={classNames(
|
|
88
94
|
inputClasses[style],
|
package/forms/Toggle.svelte
CHANGED
|
@@ -4,7 +4,7 @@ import Checkbox from './Checkbox.svelte';
|
|
|
4
4
|
export let size = 'default';
|
|
5
5
|
export let group = [];
|
|
6
6
|
export let value = '';
|
|
7
|
-
export let checked =
|
|
7
|
+
export let checked = undefined;
|
|
8
8
|
// tinted if put in component having its own background
|
|
9
9
|
let background = getContext('background');
|
|
10
10
|
const common = "mr-3 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all";
|
package/forms/Toggle.svelte.d.ts
CHANGED
|
@@ -3,8 +3,8 @@ declare const __propDef: {
|
|
|
3
3
|
props: {
|
|
4
4
|
[x: string]: any;
|
|
5
5
|
size?: "default" | "small" | "large" | undefined;
|
|
6
|
-
group?: string[] | undefined;
|
|
7
|
-
value?: string | undefined;
|
|
6
|
+
group?: (string | number)[] | undefined;
|
|
7
|
+
value?: string | number | undefined;
|
|
8
8
|
checked?: boolean | undefined;
|
|
9
9
|
};
|
|
10
10
|
events: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.28.1",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": {
|
|
@@ -12,33 +12,33 @@
|
|
|
12
12
|
"homepage": "https://flowbite-svelte.com/",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"devDependencies": {
|
|
15
|
-
"@playwright/test": "^1.
|
|
15
|
+
"@playwright/test": "^1.27.1",
|
|
16
16
|
"@sveltejs/adapter-vercel": "1.0.0-next.78",
|
|
17
|
-
"@sveltejs/kit": "
|
|
17
|
+
"@sveltejs/kit": "next",
|
|
18
18
|
"@sveltejs/package": "1.0.0-next.3",
|
|
19
|
-
"@typescript-eslint/eslint-plugin": "^5.
|
|
20
|
-
"@typescript-eslint/parser": "^5.
|
|
21
|
-
"autoprefixer": "^10.4.
|
|
19
|
+
"@typescript-eslint/eslint-plugin": "^5.43.0",
|
|
20
|
+
"@typescript-eslint/parser": "^5.43.0",
|
|
21
|
+
"autoprefixer": "^10.4.13",
|
|
22
22
|
"createprops": "^0.4.9",
|
|
23
|
-
"eslint": "^8.
|
|
24
|
-
"eslint-config-prettier": "^8.
|
|
23
|
+
"eslint": "^8.27.0",
|
|
24
|
+
"eslint-config-prettier": "^8.5.0",
|
|
25
25
|
"eslint-plugin-svelte3": "^4.0.0",
|
|
26
26
|
"mdsvex": "^0.10.6",
|
|
27
27
|
"mdsvexamples": "^0.3.2",
|
|
28
|
-
"postcss": "^8.4.
|
|
28
|
+
"postcss": "^8.4.19",
|
|
29
29
|
"postcss-load-config": "^4.0.1",
|
|
30
|
-
"prettier": "^2.
|
|
31
|
-
"prettier-plugin-svelte": "^2.
|
|
30
|
+
"prettier": "^2.7.1",
|
|
31
|
+
"prettier-plugin-svelte": "^2.8.0",
|
|
32
32
|
"prism-themes": "^1.9.0",
|
|
33
|
-
"svelte": "^3.
|
|
34
|
-
"svelte-check": "^2.
|
|
33
|
+
"svelte": "^3.53.1",
|
|
34
|
+
"svelte-check": "^2.9.2",
|
|
35
35
|
"svelte-meta-tags": "^2.6.3",
|
|
36
36
|
"svelte-preprocess": "^4.10.7",
|
|
37
|
-
"svelte2tsx": "^0.5.
|
|
38
|
-
"tailwindcss": "^3.
|
|
39
|
-
"tslib": "^2.
|
|
40
|
-
"typescript": "^4.
|
|
41
|
-
"vite": "^3.
|
|
37
|
+
"svelte2tsx": "^0.5.20",
|
|
38
|
+
"tailwindcss": "^3.2.4",
|
|
39
|
+
"tslib": "^2.4.1",
|
|
40
|
+
"typescript": "^4.8.4",
|
|
41
|
+
"vite": "^3.2.3"
|
|
42
42
|
},
|
|
43
43
|
"type": "module",
|
|
44
44
|
"keywords": [
|