@inertiajs/svelte 2.0.16 → 2.1.0
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.
|
@@ -3,14 +3,17 @@ import { onDestroy } from "svelte";
|
|
|
3
3
|
export let data;
|
|
4
4
|
const keys = Array.isArray(data) ? data : [data];
|
|
5
5
|
let loaded = false;
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
const isServer = typeof window === "undefined";
|
|
7
|
+
if (!isServer) {
|
|
8
|
+
const unsubscribe = page.subscribe(({ props }) => {
|
|
9
|
+
window.queueMicrotask(() => {
|
|
10
|
+
loaded = keys.every((key) => typeof props[key] !== "undefined");
|
|
11
|
+
});
|
|
9
12
|
});
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
13
|
+
onDestroy(() => {
|
|
14
|
+
unsubscribe();
|
|
15
|
+
});
|
|
16
|
+
}
|
|
14
17
|
if (!$$slots.fallback) {
|
|
15
18
|
throw new Error('`<Deferred>` requires a `<svelte:fragment slot="fallback">` slot');
|
|
16
19
|
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<script>import {
|
|
2
|
+
formDataToObject,
|
|
3
|
+
mergeDataIntoQueryString
|
|
4
|
+
} from "@inertiajs/core";
|
|
5
|
+
import { isEqual } from "es-toolkit";
|
|
6
|
+
import { onMount } from "svelte";
|
|
7
|
+
import useForm from "../useForm";
|
|
8
|
+
const noop = () => void 0;
|
|
9
|
+
export let action = "";
|
|
10
|
+
export let method = "get";
|
|
11
|
+
export let headers = {};
|
|
12
|
+
export let queryStringArrayFormat = "brackets";
|
|
13
|
+
export let errorBag = null;
|
|
14
|
+
export let showProgress = true;
|
|
15
|
+
export let transform = (data) => data;
|
|
16
|
+
export let options = {};
|
|
17
|
+
export let onCancelToken = noop;
|
|
18
|
+
export let onBefore = noop;
|
|
19
|
+
export let onStart = noop;
|
|
20
|
+
export let onProgress = noop;
|
|
21
|
+
export let onFinish = noop;
|
|
22
|
+
export let onCancel = noop;
|
|
23
|
+
export let onSuccess = noop;
|
|
24
|
+
export let onError = noop;
|
|
25
|
+
const form = useForm({});
|
|
26
|
+
let formElement;
|
|
27
|
+
let isDirty = false;
|
|
28
|
+
let defaultValues = {};
|
|
29
|
+
$: _method = typeof action === "object" ? action.method : method.toLowerCase();
|
|
30
|
+
$: _action = typeof action === "object" ? action.url : action;
|
|
31
|
+
function getData() {
|
|
32
|
+
return formDataToObject(new FormData(formElement));
|
|
33
|
+
}
|
|
34
|
+
function updateDirtyState(event) {
|
|
35
|
+
isDirty = event.type === "reset" ? false : !isEqual(getData(), defaultValues);
|
|
36
|
+
}
|
|
37
|
+
export function submit() {
|
|
38
|
+
const [url, _data] = mergeDataIntoQueryString(_method, _action, getData(), queryStringArrayFormat);
|
|
39
|
+
const submitOptions = {
|
|
40
|
+
headers,
|
|
41
|
+
errorBag,
|
|
42
|
+
showProgress,
|
|
43
|
+
onCancelToken,
|
|
44
|
+
onBefore,
|
|
45
|
+
onStart,
|
|
46
|
+
onProgress,
|
|
47
|
+
onFinish,
|
|
48
|
+
onCancel,
|
|
49
|
+
onSuccess,
|
|
50
|
+
onError,
|
|
51
|
+
...options
|
|
52
|
+
};
|
|
53
|
+
$form.transform(() => transform(_data)).submit(_method, url, submitOptions);
|
|
54
|
+
}
|
|
55
|
+
function handleSubmit(event) {
|
|
56
|
+
event.preventDefault();
|
|
57
|
+
submit();
|
|
58
|
+
}
|
|
59
|
+
export function reset() {
|
|
60
|
+
formElement.reset();
|
|
61
|
+
}
|
|
62
|
+
export function clearErrors(...fields) {
|
|
63
|
+
$form.clearErrors(...fields);
|
|
64
|
+
}
|
|
65
|
+
export function resetAndClearErrors(...fields) {
|
|
66
|
+
$form.resetAndClearErrors(...fields);
|
|
67
|
+
}
|
|
68
|
+
export function setError(field, value) {
|
|
69
|
+
if (typeof field === "string") {
|
|
70
|
+
$form.setError(field, value);
|
|
71
|
+
} else {
|
|
72
|
+
$form.setError(field);
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
onMount(() => {
|
|
76
|
+
defaultValues = getData();
|
|
77
|
+
const formEvents = ["input", "change", "reset"];
|
|
78
|
+
formEvents.forEach((e) => formElement.addEventListener(e, updateDirtyState));
|
|
79
|
+
return () => {
|
|
80
|
+
formEvents.forEach((e) => formElement?.removeEventListener(e, updateDirtyState));
|
|
81
|
+
};
|
|
82
|
+
});
|
|
83
|
+
</script>
|
|
84
|
+
|
|
85
|
+
<form
|
|
86
|
+
bind:this={formElement}
|
|
87
|
+
action={_action}
|
|
88
|
+
method={_method}
|
|
89
|
+
on:submit={handleSubmit} {...$$restProps}
|
|
90
|
+
>
|
|
91
|
+
<slot
|
|
92
|
+
errors={$form.errors}
|
|
93
|
+
hasErrors={$form.hasErrors}
|
|
94
|
+
processing={$form.processing}
|
|
95
|
+
progress={$form.progress}
|
|
96
|
+
wasSuccessful={$form.wasSuccessful}
|
|
97
|
+
recentlySuccessful={$form.recentlySuccessful}
|
|
98
|
+
{clearErrors}
|
|
99
|
+
{resetAndClearErrors}
|
|
100
|
+
{setError}
|
|
101
|
+
{isDirty}
|
|
102
|
+
{reset}
|
|
103
|
+
{submit}
|
|
104
|
+
/>
|
|
105
|
+
</form>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
import { type FormDataConvertible } from '@inertiajs/core';
|
|
3
|
+
declare const __propDef: {
|
|
4
|
+
props: {
|
|
5
|
+
[x: string]: any;
|
|
6
|
+
action?: string | {
|
|
7
|
+
url: string;
|
|
8
|
+
method: import("@inertiajs/core").Method;
|
|
9
|
+
} | undefined;
|
|
10
|
+
method?: import("@inertiajs/core").Method | undefined;
|
|
11
|
+
headers?: Record<string, string> | undefined;
|
|
12
|
+
queryStringArrayFormat?: "indices" | "brackets" | undefined;
|
|
13
|
+
errorBag?: string | null | undefined;
|
|
14
|
+
showProgress?: boolean | undefined;
|
|
15
|
+
transform?: ((data: Record<string, FormDataConvertible>) => Record<string, FormDataConvertible>) | undefined;
|
|
16
|
+
options?: import("@inertiajs/core").FormComponentOptions | undefined;
|
|
17
|
+
onCancelToken?: (({ cancel }: {
|
|
18
|
+
cancel: VoidFunction;
|
|
19
|
+
}) => void) | undefined;
|
|
20
|
+
onBefore?: import("@inertiajs/core").GlobalEventCallback<"before"> | undefined;
|
|
21
|
+
onStart?: import("@inertiajs/core").GlobalEventCallback<"start"> | undefined;
|
|
22
|
+
onProgress?: import("@inertiajs/core").GlobalEventCallback<"progress"> | undefined;
|
|
23
|
+
onFinish?: import("@inertiajs/core").GlobalEventCallback<"finish"> | undefined;
|
|
24
|
+
onCancel?: import("@inertiajs/core").GlobalEventCallback<"cancel"> | undefined;
|
|
25
|
+
onSuccess?: import("@inertiajs/core").GlobalEventCallback<"success"> | undefined;
|
|
26
|
+
onError?: import("@inertiajs/core").GlobalEventCallback<"error"> | undefined;
|
|
27
|
+
submit?: (() => void) | undefined;
|
|
28
|
+
reset?: (() => void) | undefined;
|
|
29
|
+
clearErrors?: ((...fields: string[]) => void) | undefined;
|
|
30
|
+
resetAndClearErrors?: ((...fields: string[]) => void) | undefined;
|
|
31
|
+
setError?: ((field: string | object, value?: string) => void) | undefined;
|
|
32
|
+
};
|
|
33
|
+
events: {
|
|
34
|
+
[evt: string]: CustomEvent<any>;
|
|
35
|
+
};
|
|
36
|
+
slots: {
|
|
37
|
+
default: {
|
|
38
|
+
errors: Partial<Record<never, string>>;
|
|
39
|
+
hasErrors: boolean;
|
|
40
|
+
processing: boolean;
|
|
41
|
+
progress: import("axios").AxiosProgressEvent | null;
|
|
42
|
+
wasSuccessful: boolean;
|
|
43
|
+
recentlySuccessful: boolean;
|
|
44
|
+
clearErrors: (...fields: string[]) => void;
|
|
45
|
+
resetAndClearErrors: (...fields: string[]) => void;
|
|
46
|
+
setError: (field: string | object, value?: string) => void;
|
|
47
|
+
isDirty: boolean;
|
|
48
|
+
reset: () => void;
|
|
49
|
+
submit: () => void;
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
exports?: undefined;
|
|
53
|
+
bindings?: undefined;
|
|
54
|
+
};
|
|
55
|
+
export type FormProps = typeof __propDef.props;
|
|
56
|
+
export type FormEvents = typeof __propDef.events;
|
|
57
|
+
export type FormSlots = typeof __propDef.slots;
|
|
58
|
+
export default class Form extends SvelteComponent<FormProps, FormEvents, FormSlots> {
|
|
59
|
+
get submit(): () => void;
|
|
60
|
+
get reset(): () => void;
|
|
61
|
+
get clearErrors(): (...fields: string[]) => void;
|
|
62
|
+
get resetAndClearErrors(): (...fields: string[]) => void;
|
|
63
|
+
get setError(): (field: string | object, value?: string) => void;
|
|
64
|
+
}
|
|
65
|
+
export {};
|
|
@@ -31,13 +31,13 @@ declare const __propDef: {
|
|
|
31
31
|
mouseout: MouseEvent;
|
|
32
32
|
mouseover: MouseEvent;
|
|
33
33
|
mouseup: MouseEvent;
|
|
34
|
-
'cancel-token': Event |
|
|
35
|
-
before: Event |
|
|
36
|
-
start: Event |
|
|
34
|
+
'cancel-token': Event | ProgressEvent<EventTarget> | SubmitEvent | ErrorEvent | UIEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent;
|
|
35
|
+
before: Event | ProgressEvent<EventTarget> | SubmitEvent | ErrorEvent | UIEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent;
|
|
36
|
+
start: Event | ProgressEvent<EventTarget> | SubmitEvent | ErrorEvent | UIEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent;
|
|
37
37
|
progress: ProgressEvent<EventTarget>;
|
|
38
|
-
finish: Event |
|
|
38
|
+
finish: Event | ProgressEvent<EventTarget> | SubmitEvent | ErrorEvent | UIEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent;
|
|
39
39
|
cancel: Event;
|
|
40
|
-
success: Event |
|
|
40
|
+
success: Event | ProgressEvent<EventTarget> | SubmitEvent | ErrorEvent | UIEvent | AnimationEvent | MouseEvent | InputEvent | FocusEvent | CompositionEvent | ClipboardEvent | DragEvent | FormDataEvent | PointerEvent | KeyboardEvent | SecurityPolicyViolationEvent | TouchEvent | TransitionEvent | WheelEvent;
|
|
41
41
|
error: ErrorEvent;
|
|
42
42
|
} & {
|
|
43
43
|
[evt: string]: CustomEvent<any>;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { router } from '@inertiajs/core';
|
|
2
2
|
export { default as Deferred } from './components/Deferred.svelte';
|
|
3
|
+
export { default as Form } from './components/Form.svelte';
|
|
3
4
|
export { default as Link } from './components/Link.svelte';
|
|
4
5
|
export { default as WhenVisible } from './components/WhenVisible.svelte';
|
|
5
6
|
export { default as createInertiaApp } from './createInertiaApp';
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { router } from '@inertiajs/core';
|
|
2
2
|
export { default as Deferred } from './components/Deferred.svelte';
|
|
3
|
+
export { default as Form } from './components/Form.svelte';
|
|
3
4
|
export { default as Link } from './components/Link.svelte';
|
|
4
5
|
export { default as WhenVisible } from './components/WhenVisible.svelte';
|
|
5
6
|
export { default as createInertiaApp } from './createInertiaApp';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inertiajs/svelte",
|
|
3
|
-
"version": "2.0
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "The Svelte adapter for Inertia.js",
|
|
6
6
|
"contributors": [
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"es-toolkit": "^1.33.0",
|
|
39
39
|
"html-escape": "^2.0.0",
|
|
40
|
-
"@inertiajs/core": "2.0
|
|
40
|
+
"@inertiajs/core": "2.1.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@sveltejs/adapter-auto": "^3.2.0",
|