@functionalcms/svelte-components 4.10.49 → 4.11.0

package/dist/components/form/Form.svelte

@@ -7,6 +7,7 @@
 	import { Placement } from '../Styling.js';
 	import Button from './Button.svelte';
 	import { superForm } from 'sveltekit-superforms';
+	import { translator } from '../../translations/translator.ts';
 
 	interface FormButton {
 		label: string;
@@ -21,6 +22,7 @@
 		superform: Record<string, unknown>;
 		buttonPosition: Placement;
 		buttonsContainer: string;
+		translate: any;
 	}
 
 	let {
@@ -29,10 +31,12 @@
 		superform = {},
 		action = '',
 		buttonsContainer = '',
-		buttonPosition = Placement.Bottom
+		buttonPosition = Placement.Bottom,
+		translate
 	}: Partial<Props> = $props();
 
 	const { form, enhance } = superForm(superform);
+	const t = translator(translate);
 </script>
 
 {#snippet renderButtons()}
@@ -55,22 +59,23 @@
 					<Switch
 						name={field.name}
 						id={field.name}
-						label={field.name}
+						label={t(field.name)}
 						isChecked={$form[field.name]}
 					/>
 				{:else if field.type === 'enum' && field.meta.type === 'select'}
 					<Select
 						name={field.name}
 						id={field.name}
-						label={field.name}
+						label={t(field.name)}
 						options={mapEntiresToOptions(field)}
 						singleSelected={$form[field.name]}
+						defaultOptionLabel={t('selectOption')}
 					/>
 				{:else if field.type === 'enum'}
 					<ChoiceInput
 						name={field.name}
 						id={field.name}
-						label={field.name}
+						label={t(field.name)}
 						type={field.meta.type}
 						options={mapEntiresToOptions(field)}
 						checkedOptions={[field.default]}
@@ -80,7 +85,7 @@
 					<Input
 						name={field.name}
 						id={field.name}
-						label={field.name}
+						label={t(field.name)}
 						type={field.meta.type}
 						isRequired={field.isRequired}
 						value={$form[field.name]}

package/dist/components/form/Form.svelte.d.ts

@@ -11,6 +11,7 @@ declare const Form: import("svelte").Component<Partial<{
     superform: Record<string, unknown>;
     buttonPosition: Placement;
     buttonsContainer: string;
+    translate: any;
 }>, {}, "">;
 type Form = ReturnType<typeof Form>;
 export default Form;

package/dist/components/layouts/TwoColumnsLayout.svelte

@@ -22,7 +22,7 @@
 		containerCss = '',
 		leftCss = 'w50p',
 		rightCss = 'w50p'
-	}: TwoColumnLayoutProps = $props();
+	}: Partial<TwoColumnLayoutProps> = $props();
 
 	let containerCssEx = cn(
 		'flex flex-row-dynamic',

package/dist/components/layouts/TwoColumnsLayout.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-interface TwoColumnLayoutProps {
+declare const TwoColumnsLayout: import("svelte").Component<Partial<{
     leftRender: Snippet;
     rightRender: Snippet;
     containerCss: string;
@@ -7,7 +7,6 @@ interface TwoColumnLayoutProps {
     rightCss: string;
     isFullWidth: boolean;
     isFullHeight: boolean;
-}
-declare const TwoColumnsLayout: import("svelte").Component<TwoColumnLayoutProps, {}, "">;
+}>, {}, "">;
 type TwoColumnsLayout = ReturnType<typeof TwoColumnsLayout>;
 export default TwoColumnsLayout;

package/dist/translations/translator.d.ts

@@ -0,0 +1 @@
+export declare const translator: (translations: any) => (key: string) => any;

package/dist/translations/translator.js

@@ -0,0 +1,5 @@
+export const translator = (translations) => {
+    return (key) => {
+        return translations[key] || key;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@functionalcms/svelte-components",
-	"version": "4.10.49",
+	"version": "4.11.0",
 	"watch": {
 		"build": {
 			"patterns": [