@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 && initialInput[index], path);
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 && initialInput[key], path);
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 (input.length < items.length) internalFieldStore.items.value = items.slice(0, input.length);
322
- else if (input.length > items.length) {
323
- if (input.length > internalFieldStore.children.length) {
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 < input.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, input[index], path);
329
+ initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, arrayInput[index], path);
329
330
  path.pop();
330
331
  }
331
332
  }
332
- internalFieldStore.items.value = [...items, ...input.slice(items.length).map(createId)];
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], input[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
- if (initialInput.length > internalFieldStore.children.length) {
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 < initialInput.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, initialInput[index], path);
358
+ initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, initialArrayInput[index], path);
357
359
  path.pop();
358
360
  }
359
361
  }
360
- internalFieldStore.initialItems.value = initialInput.map(createId);
361
- for (let index = 0; index < internalFieldStore.children.length; index++) setInitialFieldInput(internalFieldStore.children[index], initialInput?.[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
- const internalFormStore = createFormStore(config, (input) => v.safeParseAsync(config.schema, input));
6
- onMount(() => {
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
- const isTouched = $derived(getFieldBool(internalFormStore, 'isTouched'));
12
- const isDirty = $derived(getFieldBool(internalFormStore, 'isDirty'));
13
- const isValid = $derived(!getFieldBool(internalFormStore, 'errors'));
14
- return {
15
- [INTERNAL]: internalFormStore,
16
- get isSubmitting() {
17
- return internalFormStore.isSubmitting.value;
18
- },
19
- get isSubmitted() {
20
- return internalFormStore.isSubmitted.value;
21
- },
22
- get isValidating() {
23
- return internalFormStore.isValidating.value;
24
- },
25
- get isTouched() {
26
- return isTouched;
27
- },
28
- get isDirty() {
29
- return isDirty;
30
- },
31
- get isValid() {
32
- return isValid;
33
- },
34
- get errors() {
35
- return internalFormStore.errors.value;
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
- const path = $derived(unwrap(config).path);
6
- const internalFormStore = $derived(unwrap(form)[INTERNAL]);
7
- const internalFieldStore = $derived(getFieldStore(internalFormStore, path));
8
- const input = $derived(getFieldInput(internalFieldStore));
9
- const isTouched = $derived(getFieldBool(internalFieldStore, 'isTouched'));
10
- const isDirty = $derived(getFieldBool(internalFieldStore, 'isDirty'));
11
- const isValid = $derived(!getFieldBool(internalFieldStore, 'errors'));
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
- get name() {
33
- return internalFieldStore.name;
32
+ props: (_a = {
33
+ get name() {
34
+ return internalFieldStore.name;
35
+ },
36
+ autofocus: !!internalFieldStore.errors.value
34
37
  },
35
- autofocus: !!internalFieldStore.errors.value,
36
- [createAttachmentKey()](element) {
38
+ _a[createAttachmentKey()] = function (element) {
37
39
  internalFieldStore.elements.push(element);
38
- return () => {
39
- internalFieldStore.elements = internalFieldStore.elements.filter((el) => el !== element);
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
- const path = $derived(unwrap(config).path);
5
- const internalFieldStore = $derived(getFieldStore(unwrap(form)[INTERNAL], path));
6
- const isTouched = $derived(getFieldBool(internalFieldStore, 'isTouched'));
7
- const isDirty = $derived(getFieldBool(internalFieldStore, 'isDirty'));
8
- const isValid = $derived(!getFieldBool(internalFieldStore, 'errors'));
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.0",
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
- "vue",
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.2.0",
54
+ "@formisch/core": "0.3.1",
55
55
  "@formisch/methods": "0.2.0"
56
56
  },
57
57
  "peerDependencies": {