flowbite-svelte 1.8.3 → 1.8.4
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/dist/modal/Modal.svelte +42 -26
- package/dist/modal/Modal.svelte.d.ts +1 -1
- package/package.json +12 -13
package/dist/modal/Modal.svelte
CHANGED
|
@@ -1,26 +1,17 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import { type
|
|
3
|
-
import { twMerge } from "tailwind-merge";
|
|
2
|
+
import { type ModalProps, type ParamsType, CloseButton, trapFocus } from "..";
|
|
4
3
|
import clsx from "clsx";
|
|
5
4
|
import { sineIn } from "svelte/easing";
|
|
6
5
|
import { fade } from "svelte/transition";
|
|
7
6
|
import { modal as modalTheme } from ".";
|
|
8
7
|
|
|
9
|
-
let { children, oncancel,
|
|
8
|
+
let { children, oncancel, onsubmit, modal = true, autoclose = false, header, footer, title, open = $bindable(false), permanent = false, dismissable = true, closeBtnClass, headerClass, bodyClass, footerClass, outsideclose = true, size = "md", placement, class: className, params, transition = fade, ...restProps }: ModalProps = $props();
|
|
10
9
|
|
|
11
10
|
const paramsDefault = { duration: 100, easing: sineIn };
|
|
12
11
|
const paramsOptions = $derived(params ?? paramsDefault);
|
|
13
12
|
|
|
14
13
|
const { base, header: headerCls, footer: footerCls, body, closeBtn } = $derived(modalTheme({ placement, size }));
|
|
15
14
|
|
|
16
|
-
const closeModal = () => {
|
|
17
|
-
// Only close if not permanent
|
|
18
|
-
if (!permanent) {
|
|
19
|
-
open = false;
|
|
20
|
-
onclose?.();
|
|
21
|
-
}
|
|
22
|
-
};
|
|
23
|
-
|
|
24
15
|
function _oncancel(ev: Event & { currentTarget: HTMLDialogElement }) {
|
|
25
16
|
// this event gets called when user presses ESC key
|
|
26
17
|
// We'll handle ESC via the trapFocus action instead
|
|
@@ -35,21 +26,23 @@
|
|
|
35
26
|
function _onclick(ev: Event & { currentTarget: HTMLDialogElement }) {
|
|
36
27
|
if (ev.currentTarget instanceof HTMLDialogElement) {
|
|
37
28
|
if (outsideclose && ev.target === ev.currentTarget && !permanent) {
|
|
38
|
-
|
|
29
|
+
open = false;
|
|
39
30
|
}
|
|
40
31
|
if (autoclose && ev.target instanceof HTMLButtonElement && !permanent) {
|
|
41
|
-
|
|
32
|
+
open = false;
|
|
42
33
|
}
|
|
43
34
|
}
|
|
44
35
|
}
|
|
45
36
|
|
|
46
37
|
let dlg: HTMLDialogElement | undefined = $state();
|
|
47
38
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
39
|
+
// This prevents total dialog closing and we want only to prevent cancelling
|
|
40
|
+
// The close with user defined actions should be allowed
|
|
41
|
+
// $effect(() => {
|
|
42
|
+
// if (permanent && !open) {
|
|
43
|
+
// open = true;
|
|
44
|
+
// }
|
|
45
|
+
// });
|
|
53
46
|
|
|
54
47
|
// Handler for Escape key that respects component state
|
|
55
48
|
const handleEscape = () => {
|
|
@@ -57,32 +50,55 @@
|
|
|
57
50
|
oncancel?.({ currentTarget: dlg } as any);
|
|
58
51
|
// If oncancel prevented default, we don't close
|
|
59
52
|
if (oncancel && event?.defaultPrevented) return;
|
|
60
|
-
|
|
53
|
+
open = false;
|
|
61
54
|
}
|
|
62
55
|
};
|
|
56
|
+
|
|
57
|
+
function _onsubmit(ev: SubmitEvent) {
|
|
58
|
+
if (!dlg) return;
|
|
59
|
+
|
|
60
|
+
if (ev.submitter instanceof HTMLButtonElement || ev.submitter instanceof HTMLInputElement) {
|
|
61
|
+
dlg.returnValue = ev.submitter.value;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// @ts-ignore
|
|
65
|
+
onsubmit?.(ev); // forward event to user handle
|
|
66
|
+
|
|
67
|
+
if (!ev.defaultPrevented) {
|
|
68
|
+
// stop dialog.close() and trigger close with transition
|
|
69
|
+
ev.preventDefault();
|
|
70
|
+
open = false;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
function init(dlg: HTMLDialogElement) {
|
|
75
|
+
modal ? dlg?.showModal() : dlg?.show();
|
|
76
|
+
return () => dlg?.close();
|
|
77
|
+
}
|
|
63
78
|
</script>
|
|
64
79
|
|
|
65
80
|
{#if open}
|
|
66
|
-
<dialog use:trapFocus={{ onEscape: handleEscape }} bind:this={dlg} {...restProps} class={
|
|
81
|
+
<dialog use:trapFocus={{ onEscape: handleEscape }} {@attach init} onsubmit={_onsubmit} bind:this={dlg} {...restProps} class={base({ class: clsx(className) })} tabindex="-1" oncancel={_oncancel} onclick={_onclick} transition:transition|global={paramsOptions as ParamsType}>
|
|
67
82
|
{#if title || header}
|
|
68
|
-
<div class={
|
|
83
|
+
<div class={headerCls({ class: clsx(headerClass) })}>
|
|
69
84
|
{#if title}
|
|
70
85
|
<h3>{title}</h3>
|
|
86
|
+
<CloseButton onclick={() => (open = false)} class={clsx(closeBtnClass)} />
|
|
71
87
|
{:else if header}
|
|
72
88
|
{@render header()}
|
|
73
89
|
{/if}
|
|
74
90
|
</div>
|
|
75
91
|
{/if}
|
|
76
|
-
<div class={
|
|
92
|
+
<div class={body({ class: clsx(bodyClass) })}>
|
|
77
93
|
{@render children?.()}
|
|
78
94
|
</div>
|
|
79
95
|
{#if footer}
|
|
80
|
-
<div class={
|
|
96
|
+
<div class={footerCls({ class: clsx(footerClass) })}>
|
|
81
97
|
{@render footer()}
|
|
82
98
|
</div>
|
|
83
99
|
{/if}
|
|
84
|
-
{#if dismissable && !permanent}
|
|
85
|
-
<CloseButton onclick={
|
|
100
|
+
{#if dismissable && !permanent && !title}
|
|
101
|
+
<CloseButton onclick={() => (open = false)} class={closeBtn({ class: clsx(closeBtnClass) })} />
|
|
86
102
|
{/if}
|
|
87
103
|
</dialog>
|
|
88
104
|
{/if}
|
|
@@ -95,7 +111,7 @@
|
|
|
95
111
|
## Props
|
|
96
112
|
@prop children
|
|
97
113
|
@prop oncancel
|
|
98
|
-
@prop
|
|
114
|
+
@prop onsubmit
|
|
99
115
|
@prop modal = true
|
|
100
116
|
@prop autoclose = false
|
|
101
117
|
@prop header
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "flowbite-svelte",
|
|
3
|
-
"version": "1.8.
|
|
3
|
+
"version": "1.8.4",
|
|
4
4
|
"description": "Flowbite components for Svelte",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"author": {
|
|
@@ -16,11 +16,11 @@
|
|
|
16
16
|
"@docsearch/css": "^3.9.0",
|
|
17
17
|
"@docsearch/js": "^3.9.0",
|
|
18
18
|
"@eslint/compat": "^1.3.1",
|
|
19
|
-
"@eslint/js": "^9.
|
|
19
|
+
"@eslint/js": "^9.30.1",
|
|
20
20
|
"@flowbite-svelte-plugins/chart": "^0.2.4",
|
|
21
|
-
"@flowbite-svelte-plugins/datatable": "^0.
|
|
22
|
-
"@flowbite-svelte-plugins/texteditor": "^0.
|
|
23
|
-
"@playwright/test": "^1.53.
|
|
21
|
+
"@flowbite-svelte-plugins/datatable": "^0.4.0",
|
|
22
|
+
"@flowbite-svelte-plugins/texteditor": "^0.23.1",
|
|
23
|
+
"@playwright/test": "^1.53.2",
|
|
24
24
|
"@sveltejs/adapter-auto": "^6.0.1",
|
|
25
25
|
"@sveltejs/adapter-vercel": "^5.7.2",
|
|
26
26
|
"@sveltejs/kit": "^2.22.2",
|
|
@@ -31,16 +31,15 @@
|
|
|
31
31
|
"@testing-library/jest-dom": "^6.6.3",
|
|
32
32
|
"@testing-library/svelte": "^5.2.8",
|
|
33
33
|
"@testing-library/user-event": "^14.6.1",
|
|
34
|
-
"@tiptap/core": "^2.
|
|
34
|
+
"@tiptap/core": "^2.24.2",
|
|
35
35
|
"dayjs": "^1.11.13",
|
|
36
36
|
"deepmerge": "^4.3.1",
|
|
37
|
-
"eslint": "^9.
|
|
37
|
+
"eslint": "^9.30.1",
|
|
38
38
|
"eslint-config-prettier": "^10.1.5",
|
|
39
39
|
"eslint-plugin-svelte": "^3.10.1",
|
|
40
40
|
"flowbite-svelte-icons": "^2.2.1",
|
|
41
41
|
"flowbite-typography": "^1.0.5",
|
|
42
|
-
"globals": "^16.
|
|
43
|
-
"highlight.js": "^11.11.1",
|
|
42
|
+
"globals": "^16.3.0",
|
|
44
43
|
"jsdom": "^26.1.0",
|
|
45
44
|
"katex": "^0.16.22",
|
|
46
45
|
"lowlight": "^3.3.0",
|
|
@@ -52,7 +51,7 @@
|
|
|
52
51
|
"prism-themes": "^1.9.0",
|
|
53
52
|
"publint": "^0.3.12",
|
|
54
53
|
"simple-datatables": "^10.0.0",
|
|
55
|
-
"svelte": "^5.
|
|
54
|
+
"svelte": "^5.35.2",
|
|
56
55
|
"svelte-check": "^4.2.2",
|
|
57
56
|
"svelte-doc-llm": "^0.2.2",
|
|
58
57
|
"svelte-lib-helpers": "^0.4.30",
|
|
@@ -63,7 +62,7 @@
|
|
|
63
62
|
"typescript": "^5.8.3",
|
|
64
63
|
"typescript-eslint": "8.31.1",
|
|
65
64
|
"vite": "^6.3.5",
|
|
66
|
-
"vite-plugin-devtools-json": "^0.2.
|
|
65
|
+
"vite-plugin-devtools-json": "^0.2.1",
|
|
67
66
|
"vitest": "^3.2.4"
|
|
68
67
|
},
|
|
69
68
|
"peerDependencies": {
|
|
@@ -114,8 +113,8 @@
|
|
|
114
113
|
"url": "git+https://github.com/themesberg/flowbite-svelte.git"
|
|
115
114
|
},
|
|
116
115
|
"dependencies": {
|
|
117
|
-
"@floating-ui/dom": "^1.7.
|
|
118
|
-
"@floating-ui/utils": "^0.2.
|
|
116
|
+
"@floating-ui/dom": "^1.7.2",
|
|
117
|
+
"@floating-ui/utils": "^0.2.10",
|
|
119
118
|
"apexcharts": "^4.7.0",
|
|
120
119
|
"clsx": "^2.1.1",
|
|
121
120
|
"flowbite": "^3.1.2",
|