@functionalcms/svelte-components 4.10.28 → 4.10.31

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 (5) hide show
  1. package/dist/components/form/ChoiceInput.svelte +1 -1
  2. package/dist/components/form/ChoiceInput.svelte.d.ts +1 -1
  3. package/dist/components/form/Form.svelte +78 -42
  4. package/dist/components/form/Form.svelte.d.ts +12 -5
  5. package/package.json +1 -1
package/dist/components/form/ChoiceInput.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
2
  import { cn } from '../../utils.js';
3
- import { Orientation } from '../Styling.ts';
3
+ import { Orientation } from '../Styling.js';
4
4
  import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType, HtmlParts } from './utils.js';
5
5
 
6
6
  interface Props {
package/dist/components/form/ChoiceInput.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Orientation } from '../Styling.ts';
1
+ import { Orientation } from '../Styling.js';
2
2
  import type { ChoiceInputOption, ChoiceInputSize, ChoiceInputType, HtmlParts } from './utils.js';
3
3
  declare const ChoiceInput: import("svelte").Component<Partial<{
4
4
  isSkinned: boolean;
package/dist/components/form/Form.svelte CHANGED
@@ -1,48 +1,84 @@
1
1
  <script lang="ts">
2
- import { mapEntiresToOptions, type Field } from "./form.js";
3
- import ChoiceInput from "./ChoiceInput.svelte";
4
- import Input from "./Input.svelte";
5
- import Select from "./Select.svelte";
6
- import Switch from "./Switch.svelte";
2
+ import { mapEntiresToOptions, type Field } from './form.js';
3
+ import ChoiceInput from './ChoiceInput.svelte';
4
+ import Input from './Input.svelte';
5
+ import Select from './Select.svelte';
6
+ import Switch from './Switch.svelte';
7
+ import { Placement } from '../Styling.ts';
8
+ import { addTransactionSupport } from 'ioredis/built/transaction.js';
9
+ import Button from './Button.svelte';
7
10
 
8
- interface Props {
9
- action: string;
10
- schema: Array<Field>;
11
- }
11
+ interface FormButton {
12
+ label: string;
13
+ type: 'submit' | 'reset' | 'button';
14
+ click?: () => void;
15
+ }
12
16
 
13
- let { action, schema }: Props = $props();
17
+ interface Props {
18
+ buttons: Array<FormButton>;
19
+ formDestination: string;
20
+ schema: Array<Field>;
21
+ buttonPosition: Placement;
22
+ buttonsContainer: string;
23
+ }
24
+
25
+ let {
26
+ buttons = [],
27
+ schema,
28
+ formDestination = '',
29
+ buttonsContainer = '',
30
+ buttonPosition = Placement.Bottom
31
+ }: Partial<Props> = $props();
14
32
  </script>
15
33
 
16
- <form method="POST" {action}>
17
- <fieldset>
18
- {#each schema as field}
19
- {#if field.type === "boolean"}
20
- <Switch name={field.name} id={field.name} label={field.name} />
21
- {:else if field.type === "enum" && field.meta.type === "select"}
22
- <Select
23
- name={field.name}
24
- id={field.name}
25
- label={field.name}
26
- options={mapEntiresToOptions(field)}
27
- singleSelected="LOW"
28
- />
29
- {:else if field.type === "enum"}
30
- <ChoiceInput
31
- name={field.name}
32
- id={field.name}
33
- label={field.name}
34
- type={field.meta.type}
35
- options={mapEntiresToOptions(field)}
36
- />
37
- {:else if field.type === "string" || field.type === "number"}
38
- <Input
39
- name={field.name}
40
- id={field.name}
41
- label={field.name}
42
- type={field.meta.type}
43
- isRequired={field.isRequired}
44
- />
45
- {/if}
46
- {/each}
47
- </fieldset>
34
+ {#snippet renderButtons()}
35
+ <div class={buttonsContainer}>
36
+ {#each buttons as action}
37
+ <Button type={action.type} click={action.click}>{action.label}</Button>
38
+ {/each}
39
+ </div>
40
+ {/snippet}
41
+
42
+ <form method="POST" action={formDestination}>
43
+ <fieldset>
44
+ {#if buttonPosition === Placement.Top}
45
+ {@render renderButtons()}
46
+ {/if}
47
+
48
+ <div>
49
+ {#each schema as field}
50
+ {#if field.type === 'boolean'}
51
+ <Switch name={field.name} id={field.name} label={field.name} />
52
+ {:else if field.type === 'enum' && field.meta.type === 'select'}
53
+ <Select
54
+ name={field.name}
55
+ id={field.name}
56
+ label={field.name}
57
+ options={mapEntiresToOptions(field)}
58
+ singleSelected="LOW"
59
+ />
60
+ {:else if field.type === 'enum'}
61
+ <ChoiceInput
62
+ name={field.name}
63
+ id={field.name}
64
+ label={field.name}
65
+ type={field.meta.type}
66
+ options={mapEntiresToOptions(field)}
67
+ />
68
+ {:else if field.type === 'string' || field.type === 'number'}
69
+ <Input
70
+ name={field.name}
71
+ id={field.name}
72
+ label={field.name}
73
+ type={field.meta.type}
74
+ isRequired={field.isRequired}
75
+ />
76
+ {/if}
77
+ {/each}
78
+ </div>
79
+
80
+ {#if buttonPosition !== Placement.Top}
81
+ {@render renderButtons()}
82
+ {/if}
83
+ </fieldset>
48
84
  </form>
package/dist/components/form/Form.svelte.d.ts CHANGED
@@ -1,8 +1,15 @@
1
- import { type Field } from "./form.js";
2
- interface Props {
3
- action: string;
1
+ import { type Field } from './form.js';
2
+ import { Placement } from '../Styling.ts';
3
+ declare const Form: import("svelte").Component<Partial<{
4
+ buttons: Array<{
5
+ label: string;
6
+ type: "submit" | "reset" | "button";
7
+ click?: () => void;
8
+ }>;
9
+ formDestination: string;
4
10
  schema: Array<Field>;
5
- }
6
- declare const Form: import("svelte").Component<Props, {}, "">;
11
+ buttonPosition: Placement;
12
+ buttonsContainer: string;
13
+ }>, {}, "">;
7
14
  type Form = ReturnType<typeof Form>;
8
15
  export default Form;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@functionalcms/svelte-components",
3
- "version": "4.10.28",
3
+ "version": "4.10.31",
4
4
  "watch": {
5
5
  "build": {
6
6
  "patterns": [