From 5d83965c0c3faef7245f4e2210a8aa1705e2a5ac Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Mon, 26 Sep 2022 11:11:27 +0200
Subject: [PATCH] feat: support for labelPosition, radio/checkboxed checked
 value

---
 src/Form.astro      | 20 ++++++++++++++++----
 src/form-control.ts |  1 +
 src/form-group.ts   |  7 ++++++-
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/Form.astro b/src/Form.astro
index 13ee6f7..8244189 100644
--- a/src/Form.astro
+++ b/src/Form.astro
@@ -1,12 +1,24 @@
 ---
 import {FormGroup} from './form-group';
+export interface Props {
+	formGroup: FormGroup;
+}
+
 const form: FormGroup = Astro.props.formGroup;
 ---
 <form>
 		{form?.controls?.map(control => (
-			<field>
-						<label for={control.name}>{control.label}</label>
-						<input name={control.name} id={control.name} type={control.type} value={control.value} />
-			</field>
+			<div>
+						{(control.labelPosition === 'left')
+							? <label for={control.name}>{control.label}</label>
+							: null}
+
+						<input name={control.name} id={control.name} type={control.type} value={control.value} checked={control.value==='checked'} />
+
+						{(control.labelPosition === 'right')
+							? <label for={control.name}>{control.label}</label>
+							: null}
+
+			</div>
 		))}
 </form>
diff --git a/src/form-control.ts b/src/form-control.ts
index a649952..7cbd04d 100644
--- a/src/form-control.ts
+++ b/src/form-control.ts
@@ -3,4 +3,5 @@ export class FormControl {
   type?: 'text' | 'checkbox' | 'radio' = 'text'; // add more
   value?: string | number | null | string[];
 	label?: string;
+	labelPosition?: 'right' | 'left' = 'left';
 }
diff --git a/src/form-group.ts b/src/form-group.ts
index 6a04f09..a657830 100644
--- a/src/form-group.ts
+++ b/src/form-group.ts
@@ -4,6 +4,11 @@ export class FormGroup {
   controls: FormControl[];
 
   constructor(controls: FormControl[]) {
-    this.controls = controls;
+    this.controls = controls.map(control => (
+			{
+				...control,
+				labelPosition: control.labelPosition || 'left'
+			}
+		));
   }
 }