Fix: bug with column span

HubbeDev · Jan 6, 2024 · 51b00c2 · 51b00c2
1 parent 0769b90
commit 51b00c2
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/apps/svelte-gravity-forms/src/lib/components/form/form.svelte b/apps/svelte-gravity-forms/src/lib/components/form/form.svelte
@@ -6,7 +6,7 @@
 
 	const {
 		methods: { onSubmitForm },
-		helpers: { getFieldColSpan, showFieldLabel },
+		helpers: { getColumnSpan, showFieldLabel },
 		states: { formSchema, formFields, formRequiredIndicator },
 		refs: { formRef }
 	} = getCtx();
@@ -52,7 +52,7 @@
 		>
 			{#if $formFields}
 				{#each $formFields as field, i}
-					<div data-svelte-gf-field-id={i} class={getFieldColSpan(field)}>
+					<div data-svelte-gf-field-id={i} class={getColumnSpan(field.layoutGridColumnSpan)}>
 						<Form.Field {config} name={`input_${field.id}`}>
 							<Form.Item>
 								{#if field.label && showFieldLabel(field.labelPlacement, 'above')}

diff --git a/apps/svelte-gravity-forms/src/lib/internal/gf.ts b/apps/svelte-gravity-forms/src/lib/internal/gf.ts
@@ -49,17 +49,47 @@ export function createSvelteGravityFroms(props: CreateGravityFromsProps) {
 	}
 
 	// Calculate column span for a field
-	function getFieldColSpan(field: GFFieldsProps) {
-		const layoutGridColumnSpan = Number(field.layoutGridColumnSpan);
-		if (layoutGridColumnSpan >= 1 && layoutGridColumnSpan <= 12) {
-			return `col-span-${layoutGridColumnSpan}`;
+	function getColumnSpan(columnSpan: number | undefined) {
+		if (!columnSpan) {
+			return 'col-span-12';
+		}
+		switch (columnSpan) {
+			case 1:
+				return 'col-span-1';
+			case 2:
+				return 'col-span-2';
+			case 3:
+				return 'col-span-3';
+			case 4:
+				return 'col-span-4';
+			case 5:
+				return 'col-span-5';
+			case 6:
+				return 'col-span-6';
+			case 7:
+				return 'col-span-7';
+			case 8:
+				return 'col-span-8';
+			case 9:
+				return 'col-span-9';
+			case 10:
+				return 'col-span-10';
+			case 11:
+				return 'col-span-11';
+			case 12:
+				return 'col-span-12';
+			default:
+				return 'col-span-12';
 		}
 	}
 
 	function getButtonWidth(button: GFButtonProps) {
 		if (button.location) {
 			if (button.location === 'inline') {
-				return 'col-span-6';
+				if (button.layoutGridColumnSpan) {
+					return getColumnSpan(button.layoutGridColumnSpan);
+				}
+				return 'col-span-12';
 			}
 		}
 
@@ -186,7 +216,7 @@ export function createSvelteGravityFroms(props: CreateGravityFromsProps) {
 			onSubmitForm
 		},
 		helpers: {
-			getFieldColSpan,
+			getColumnSpan,
 			showFieldLabel,
 			getButtonWidth
 		},