@formisch/svelte 0.1.0 → 0.1.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.
|
@@ -52,7 +52,7 @@ function initializeFieldStore(internalFieldStore, schema, initialInput, path) {
|
|
|
52
52
|
} else for (let index = 0; index < schema.items; index++) {
|
|
53
53
|
internalFieldStore.children[index] = {};
|
|
54
54
|
path.push(index);
|
|
55
|
-
initializeFieldStore(internalFieldStore.children[index], schema.items[index], initialInput
|
|
55
|
+
initializeFieldStore(internalFieldStore.children[index], schema.items[index], initialInput?.[index], path);
|
|
56
56
|
path.pop();
|
|
57
57
|
}
|
|
58
58
|
const initialItems = internalFieldStore.children.map(createId);
|
|
@@ -70,7 +70,7 @@ function initializeFieldStore(internalFieldStore, schema, initialInput, path) {
|
|
|
70
70
|
for (const key in schema.entries) {
|
|
71
71
|
internalFieldStore.children[key] = {};
|
|
72
72
|
path.push(key);
|
|
73
|
-
initializeFieldStore(internalFieldStore.children[key], schema.entries[key], initialInput
|
|
73
|
+
initializeFieldStore(internalFieldStore.children[key], schema.entries[key], initialInput?.[key], path);
|
|
74
74
|
path.pop();
|
|
75
75
|
}
|
|
76
76
|
}
|
|
@@ -317,23 +317,24 @@ function setFieldBool(internalFieldStore, type, bool) {
|
|
|
317
317
|
function setFieldInput(internalFieldStore, input) {
|
|
318
318
|
batch(() => {
|
|
319
319
|
if (internalFieldStore.kind === "array") {
|
|
320
|
+
const arrayInput = input ?? [];
|
|
320
321
|
const items = untrack(() => internalFieldStore.items.value);
|
|
321
|
-
if (
|
|
322
|
-
else if (
|
|
323
|
-
if (
|
|
322
|
+
if (arrayInput.length < items.length) internalFieldStore.items.value = items.slice(0, arrayInput.length);
|
|
323
|
+
else if (arrayInput.length > items.length) {
|
|
324
|
+
if (arrayInput.length > internalFieldStore.children.length) {
|
|
324
325
|
const path = JSON.parse(internalFieldStore.name);
|
|
325
|
-
for (let index = internalFieldStore.children.length; index <
|
|
326
|
+
for (let index = internalFieldStore.children.length; index < arrayInput.length; index++) {
|
|
326
327
|
internalFieldStore.children[index] = {};
|
|
327
328
|
path.push(index);
|
|
328
|
-
initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item,
|
|
329
|
+
initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, arrayInput[index], path);
|
|
329
330
|
path.pop();
|
|
330
331
|
}
|
|
331
332
|
}
|
|
332
|
-
internalFieldStore.items.value = [...items, ...
|
|
333
|
+
internalFieldStore.items.value = [...items, ...arrayInput.slice(items.length).map(createId)];
|
|
333
334
|
}
|
|
334
|
-
for (let index = 0; index < items.length; index++) setFieldInput(internalFieldStore.children[index],
|
|
335
|
+
for (let index = 0; index < items.length; index++) setFieldInput(internalFieldStore.children[index], arrayInput[index]);
|
|
335
336
|
internalFieldStore.isDirty.value = untrack(() => internalFieldStore.startItems.value).length !== items.length;
|
|
336
|
-
} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setFieldInput(internalFieldStore.children[key], input[key]);
|
|
337
|
+
} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setFieldInput(internalFieldStore.children[key], input?.[key]);
|
|
337
338
|
else {
|
|
338
339
|
internalFieldStore.input.value = input;
|
|
339
340
|
internalFieldStore.isTouched.value = true;
|
|
@@ -348,17 +349,18 @@ function setFieldInput(internalFieldStore, input) {
|
|
|
348
349
|
function setInitialFieldInput(internalFieldStore, initialInput) {
|
|
349
350
|
batch(() => {
|
|
350
351
|
if (internalFieldStore.kind === "array") {
|
|
351
|
-
|
|
352
|
+
const initialArrayInput = initialInput ?? [];
|
|
353
|
+
if (initialArrayInput.length > internalFieldStore.children.length) {
|
|
352
354
|
const path = JSON.parse(internalFieldStore.name);
|
|
353
|
-
for (let index = internalFieldStore.children.length; index <
|
|
355
|
+
for (let index = internalFieldStore.children.length; index < initialArrayInput.length; index++) {
|
|
354
356
|
internalFieldStore.children[index] = {};
|
|
355
357
|
path.push(index);
|
|
356
|
-
initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item,
|
|
358
|
+
initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, initialArrayInput[index], path);
|
|
357
359
|
path.pop();
|
|
358
360
|
}
|
|
359
361
|
}
|
|
360
|
-
internalFieldStore.initialItems.value =
|
|
361
|
-
for (let index = 0; index < internalFieldStore.children.length; index++) setInitialFieldInput(internalFieldStore.children[index],
|
|
362
|
+
internalFieldStore.initialItems.value = initialArrayInput.map(createId);
|
|
363
|
+
for (let index = 0; index < internalFieldStore.children.length; index++) setInitialFieldInput(internalFieldStore.children[index], initialArrayInput[index]);
|
|
362
364
|
} else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setInitialFieldInput(internalFieldStore.children[key], initialInput?.[key]);
|
|
363
365
|
else internalFieldStore.initialInput.value = initialInput;
|
|
364
366
|
});
|
|
@@ -2,37 +2,68 @@ import { createFormStore, getFieldBool, INTERNAL, validateFormInput, } from '../
|
|
|
2
2
|
import { onMount } from 'svelte';
|
|
3
3
|
import * as v from 'valibot';
|
|
4
4
|
export function createForm(config) {
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
var _a;
|
|
6
|
+
var internalFormStore = createFormStore(config, function (input) {
|
|
7
|
+
return v.safeParseAsync(config.schema, input);
|
|
8
|
+
});
|
|
9
|
+
onMount(function () {
|
|
7
10
|
if (config.validate === 'initial') {
|
|
8
11
|
validateFormInput(internalFormStore);
|
|
9
12
|
}
|
|
10
13
|
});
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
return {
|
|
15
|
-
[INTERNAL]
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
},
|
|
37
|
-
|
|
14
|
+
var isTouched = $derived(getFieldBool(internalFormStore, 'isTouched'));
|
|
15
|
+
var isDirty = $derived(getFieldBool(internalFormStore, 'isDirty'));
|
|
16
|
+
var isValid = $derived(!getFieldBool(internalFormStore, 'errors'));
|
|
17
|
+
return _a = {},
|
|
18
|
+
_a[INTERNAL] = internalFormStore,
|
|
19
|
+
Object.defineProperty(_a, "isSubmitting", {
|
|
20
|
+
get: function () {
|
|
21
|
+
return internalFormStore.isSubmitting.value;
|
|
22
|
+
},
|
|
23
|
+
enumerable: false,
|
|
24
|
+
configurable: true
|
|
25
|
+
}),
|
|
26
|
+
Object.defineProperty(_a, "isSubmitted", {
|
|
27
|
+
get: function () {
|
|
28
|
+
return internalFormStore.isSubmitted.value;
|
|
29
|
+
},
|
|
30
|
+
enumerable: false,
|
|
31
|
+
configurable: true
|
|
32
|
+
}),
|
|
33
|
+
Object.defineProperty(_a, "isValidating", {
|
|
34
|
+
get: function () {
|
|
35
|
+
return internalFormStore.isValidating.value;
|
|
36
|
+
},
|
|
37
|
+
enumerable: false,
|
|
38
|
+
configurable: true
|
|
39
|
+
}),
|
|
40
|
+
Object.defineProperty(_a, "isTouched", {
|
|
41
|
+
get: function () {
|
|
42
|
+
return isTouched;
|
|
43
|
+
},
|
|
44
|
+
enumerable: false,
|
|
45
|
+
configurable: true
|
|
46
|
+
}),
|
|
47
|
+
Object.defineProperty(_a, "isDirty", {
|
|
48
|
+
get: function () {
|
|
49
|
+
return isDirty;
|
|
50
|
+
},
|
|
51
|
+
enumerable: false,
|
|
52
|
+
configurable: true
|
|
53
|
+
}),
|
|
54
|
+
Object.defineProperty(_a, "isValid", {
|
|
55
|
+
get: function () {
|
|
56
|
+
return isValid;
|
|
57
|
+
},
|
|
58
|
+
enumerable: false,
|
|
59
|
+
configurable: true
|
|
60
|
+
}),
|
|
61
|
+
Object.defineProperty(_a, "errors", {
|
|
62
|
+
get: function () {
|
|
63
|
+
return internalFormStore.errors.value;
|
|
64
|
+
},
|
|
65
|
+
enumerable: false,
|
|
66
|
+
configurable: true
|
|
67
|
+
}),
|
|
68
|
+
_a;
|
|
38
69
|
}
|
|
@@ -2,13 +2,14 @@ import { getElementInput, getFieldBool, getFieldInput, getFieldStore, INTERNAL,
|
|
|
2
2
|
import { createAttachmentKey } from 'svelte/attachments';
|
|
3
3
|
import { unwrap } from '../../utils/index';
|
|
4
4
|
export function useField(form, config) {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
5
|
+
var _a;
|
|
6
|
+
var path = $derived(unwrap(config).path);
|
|
7
|
+
var internalFormStore = $derived(unwrap(form)[INTERNAL]);
|
|
8
|
+
var internalFieldStore = $derived(getFieldStore(internalFormStore, path));
|
|
9
|
+
var input = $derived(getFieldInput(internalFieldStore));
|
|
10
|
+
var isTouched = $derived(getFieldBool(internalFieldStore, 'isTouched'));
|
|
11
|
+
var isDirty = $derived(getFieldBool(internalFieldStore, 'isDirty'));
|
|
12
|
+
var isValid = $derived(!getFieldBool(internalFieldStore, 'errors'));
|
|
12
13
|
return {
|
|
13
14
|
get path() {
|
|
14
15
|
return path;
|
|
@@ -28,31 +29,32 @@ export function useField(form, config) {
|
|
|
28
29
|
get isValid() {
|
|
29
30
|
return isValid;
|
|
30
31
|
},
|
|
31
|
-
props: {
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
props: (_a = {
|
|
33
|
+
get name() {
|
|
34
|
+
return internalFieldStore.name;
|
|
35
|
+
},
|
|
36
|
+
autofocus: !!internalFieldStore.errors.value
|
|
34
37
|
},
|
|
35
|
-
|
|
36
|
-
[createAttachmentKey()](element) {
|
|
38
|
+
_a[createAttachmentKey()] = function (element) {
|
|
37
39
|
internalFieldStore.elements.push(element);
|
|
38
|
-
return ()
|
|
39
|
-
internalFieldStore.elements = internalFieldStore.elements.filter((el)
|
|
40
|
+
return function () {
|
|
41
|
+
internalFieldStore.elements = internalFieldStore.elements.filter(function (el) { return el !== element; });
|
|
40
42
|
};
|
|
41
43
|
},
|
|
42
|
-
onfocus() {
|
|
44
|
+
_a.onfocus = function () {
|
|
43
45
|
setFieldBool(internalFieldStore, 'isTouched', true);
|
|
44
46
|
validateIfRequired(internalFormStore, internalFieldStore, 'touch');
|
|
45
47
|
},
|
|
46
|
-
oninput(event) {
|
|
48
|
+
_a.oninput = function (event) {
|
|
47
49
|
setFieldInput(internalFieldStore, getElementInput(event.currentTarget, internalFieldStore));
|
|
48
50
|
validateIfRequired(internalFormStore, internalFieldStore, 'input');
|
|
49
51
|
},
|
|
50
|
-
onchange() {
|
|
52
|
+
_a.onchange = function () {
|
|
51
53
|
validateIfRequired(internalFormStore, internalFieldStore, 'change');
|
|
52
54
|
},
|
|
53
|
-
onblur() {
|
|
55
|
+
_a.onblur = function () {
|
|
54
56
|
validateIfRequired(internalFormStore, internalFieldStore, 'blur');
|
|
55
57
|
},
|
|
56
|
-
|
|
58
|
+
_a),
|
|
57
59
|
};
|
|
58
60
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { getFieldBool, getFieldStore, INTERNAL, } from '../../core/index.svelte';
|
|
2
2
|
import { unwrap } from '../../utils/index';
|
|
3
3
|
export function useFieldArray(form, config) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
var path = $derived(unwrap(config).path);
|
|
5
|
+
var internalFieldStore = $derived(getFieldStore(unwrap(form)[INTERNAL], path));
|
|
6
|
+
var isTouched = $derived(getFieldBool(internalFieldStore, 'isTouched'));
|
|
7
|
+
var isDirty = $derived(getFieldBool(internalFieldStore, 'isDirty'));
|
|
8
|
+
var isValid = $derived(!getFieldBool(internalFieldStore, 'errors'));
|
|
9
9
|
return {
|
|
10
10
|
get path() {
|
|
11
11
|
return path;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formisch/svelte",
|
|
3
3
|
"description": "The modular and type-safe form library for Svelte",
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.1",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Fabian Hiller",
|
|
7
7
|
"homepage": "https://formisch.dev",
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"url": "https://github.com/fabian-hiller/formisch"
|
|
11
11
|
},
|
|
12
12
|
"keywords": [
|
|
13
|
-
"
|
|
13
|
+
"svelte",
|
|
14
14
|
"form",
|
|
15
15
|
"typescript",
|
|
16
16
|
"schema",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"typescript": "^5.9.2",
|
|
52
52
|
"typescript-eslint": "^8.43.0",
|
|
53
53
|
"vite": "^7.1.5",
|
|
54
|
-
"@formisch/core": "0.
|
|
54
|
+
"@formisch/core": "0.3.1",
|
|
55
55
|
"@formisch/methods": "0.2.0"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|