@functionalcms/svelte-components 4.25.1 → 4.27.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.
Files changed (7) hide show
  1. package/dist/components/form/SmartForm.svelte +43 -9
  2. package/dist/components/form/SmartForm.svelte.d.ts +1 -1
  3. package/dist/components/form/form.d.ts +4 -1
  4. package/dist/components/form/form.js +9 -0
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +1 -1
  7. package/package.json +1 -1
package/dist/components/form/SmartForm.svelte CHANGED
@@ -1,10 +1,10 @@
1
1
  <script lang="ts">
2
2
  import Input from './Input.svelte';
3
- import { type Field, FieldType, InputType, SubmitResult} from './form.js';
3
+ import { type Field, FieldType, InputType, SubmitResult } from './form.js';
4
4
  import { fade } from 'svelte/transition';
5
5
 
6
6
  interface Props {
7
- action: string;
7
+ action?: string;
8
8
  css?: string;
9
9
  successMessage?: string;
10
10
  submitButonText?: string;
@@ -18,7 +18,7 @@
18
18
  css = '',
19
19
  submitButonText = 'Submit',
20
20
  successMessage,
21
- onMessageSubmitted,
21
+ onMessageSubmitted
22
22
  }: Props = $props();
23
23
 
24
24
  let form: any;
@@ -27,13 +27,15 @@
27
27
 
28
28
  const submitContactForm = async (event: Event) => {
29
29
  try {
30
+ debugger;
30
31
  if (isSendingMessage) {
31
32
  return;
32
33
  }
33
34
  isSendingMessage = true;
34
35
  event.preventDefault();
35
36
  const formData = new FormData(form);
36
- const response = await fetch(action, {
37
+ const formAction = action || window.location.pathname;
38
+ const response = await fetch(formAction, {
37
39
  method: 'POST',
38
40
  body: formData
39
41
  });
@@ -62,6 +64,7 @@
62
64
  placeholder={field.placeholder}
63
65
  type={field.subType}
64
66
  isRequired={field.isRequired || false}
67
+ value={field.value}
65
68
  />
66
69
  {:else if field.type === FieldType.Textarea}
67
70
  <Input
@@ -71,25 +74,56 @@
71
74
  type={InputType.Textarea}
72
75
  placeholder={field.placeholder}
73
76
  isRequired={field.isRequired || false}
77
+ value={field.value}
78
+ />
79
+ {:else if field.type === FieldType.Hidden}
80
+ <input
81
+ id={field.name}
82
+ name={field.name}
83
+ value={field.value}
84
+ type="hidden"
85
+ required={field.isRequired || false}
74
86
  />
75
87
  {:else if field.type === FieldType.Radio}
76
88
  {#each field.options as option}
77
89
  <label>
78
90
  {#if option.checked}
79
- <input type="radio" name={field.name} value={option.value} required={field.isRequired} checked/>
91
+ <input
92
+ type="radio"
93
+ name={field.name}
94
+ value={option.value}
95
+ required={field.isRequired}
96
+ checked
97
+ />
80
98
  {:else}
81
- <input type="radio" name={field.name} value={option.value} required={field.isRequired}/>
99
+ <input
100
+ type="radio"
101
+ name={field.name}
102
+ value={option.value}
103
+ required={field.isRequired}
104
+ />
82
105
  {/if}
83
106
  {option.label}
84
- </label>
107
+ </label>
85
108
  {/each}
86
109
  {:else if field.type === FieldType.Checkbox}
87
110
  {#each field.options as option}
88
111
  <label>
89
112
  {#if option.checked}
90
- <input type="checkbox" name={field.name} value={option.value} required={field.isRequired} checked/>
113
+ <input
114
+ type="checkbox"
115
+ name={field.name}
116
+ value={option.value}
117
+ required={field.isRequired}
118
+ checked
119
+ />
91
120
  {:else}
92
- <input type="checkbox" name={field.name} value={option.value} required={field.isRequired} />
121
+ <input
122
+ type="checkbox"
123
+ name={field.name}
124
+ value={option.value}
125
+ required={field.isRequired}
126
+ />
93
127
  {/if}
94
128
  {option.label}
95
129
  </label>
package/dist/components/form/SmartForm.svelte.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { type Field, SubmitResult } from './form.js';
2
2
  interface Props {
3
- action: string;
3
+ action?: string;
4
4
  css?: string;
5
5
  successMessage?: string;
6
6
  submitButonText?: string;
package/dist/components/form/form.d.ts CHANGED
@@ -2,7 +2,8 @@ export declare enum FieldType {
2
2
  Input = "input",
3
3
  Textarea = "textarea",
4
4
  Radio = "radio",
5
- Checkbox = "checkbox"
5
+ Checkbox = "checkbox",
6
+ Hidden = "hidden"
6
7
  }
7
8
  export declare enum InputType {
8
9
  Text = "text",
@@ -38,8 +39,10 @@ export interface Field {
38
39
  checked?: boolean;
39
40
  }>;
40
41
  checked?: boolean;
42
+ value?: string | number | boolean;
41
43
  }
42
44
  export declare enum SubmitResult {
43
45
  Success = "success",
44
46
  Error = "error"
45
47
  }
48
+ export declare const readForm: (request: Request, fields: Array<Field>) => Promise<any>;
package/dist/components/form/form.js CHANGED
@@ -4,6 +4,7 @@ export var FieldType;
4
4
  FieldType["Textarea"] = "textarea";
5
5
  FieldType["Radio"] = "radio";
6
6
  FieldType["Checkbox"] = "checkbox";
7
+ FieldType["Hidden"] = "hidden";
7
8
  })(FieldType || (FieldType = {}));
8
9
  export var InputType;
9
10
  (function (InputType) {
@@ -33,3 +34,11 @@ export var SubmitResult;
33
34
  SubmitResult["Success"] = "success";
34
35
  SubmitResult["Error"] = "error";
35
36
  })(SubmitResult || (SubmitResult = {}));
37
+ export const readForm = async (request, fields) => {
38
+ const formData = await request.formData();
39
+ let response = {};
40
+ fields.forEach(field => {
41
+ response[field.name] = formData.get(field.name);
42
+ });
43
+ return response;
44
+ };
package/dist/index.d.ts CHANGED
@@ -29,7 +29,7 @@ export { default as Button } from './components/form/Button.svelte';
29
29
  export { default as Input } from './components/form/Input.svelte';
30
30
  export { default as Switch } from './components/form/Switch.svelte';
31
31
  export { default as ChoiceInput } from './components/form/ChoiceInput.svelte';
32
- export { InputType, FieldType, LabelSize, type Field, SubmitResult } from './components/form/form.js';
32
+ export { InputType, FieldType, LabelSize, type Field, SubmitResult, readForm } from './components/form/form.js';
33
33
  export { default as AntiBot } from './components/form/AntiBot.svelte';
34
34
  export { default as Dropzone } from './components/form/Dropzone.svelte';
35
35
  export { default as Select } from './components/form/Select.svelte';
package/dist/index.js CHANGED
@@ -42,7 +42,7 @@ export { default as Button } from './components/form/Button.svelte';
42
42
  export { default as Input } from './components/form/Input.svelte';
43
43
  export { default as Switch } from './components/form/Switch.svelte';
44
44
  export { default as ChoiceInput } from './components/form/ChoiceInput.svelte';
45
- export { InputType, FieldType, LabelSize, SubmitResult } from './components/form/form.js';
45
+ export { InputType, FieldType, LabelSize, SubmitResult, readForm } from './components/form/form.js';
46
46
  export { default as AntiBot } from './components/form/AntiBot.svelte';
47
47
  export { default as Dropzone } from './components/form/Dropzone.svelte';
48
48
  export { default as Select } from './components/form/Select.svelte';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@functionalcms/svelte-components",
3
- "version": "4.25.1",
3
+ "version": "4.27.0",
4
4
  "license": "MIT",
5
5
  "watch": {
6
6
  "build": {