84 lines
2.2 KiB
Text
84 lines
2.2 KiB
Text
---
|
|
import type { Submit, Radio, RadioOption } from 'common/types';
|
|
import { FormGroup, FormControl } from './core';
|
|
import FieldSet from './components/FieldSet.astro';
|
|
import Field from './components/Field.astro';
|
|
|
|
export interface Props {
|
|
formGroups: FormGroup | FormGroup[];
|
|
submitControl?: Submit;
|
|
theme?: 'light' | 'dark';
|
|
showValidationHints?: boolean;
|
|
}
|
|
|
|
const { submitControl, formGroups: form, theme, showValidationHints = false } = Astro.props;
|
|
|
|
const formTheme = theme ?? 'light';
|
|
const formName = Array.isArray(form) ? null : form?.name || null;
|
|
---
|
|
|
|
<form class={formTheme} name={formName} id={formName}>
|
|
{
|
|
Array.isArray(form)
|
|
? form?.map((group) => <FieldSet showValidationHints={showValidationHints} group={group} />)
|
|
: form?.controls.map((control) =>
|
|
control.type === 'radio' ? (
|
|
[
|
|
<Field
|
|
showValidationHints={showValidationHints}
|
|
control={control}
|
|
showOnlyLabel={true}
|
|
/>,
|
|
...(control as Radio)?.value?.map((v: string | RadioOption) => (
|
|
<Field
|
|
showValidationHints={showValidationHints}
|
|
control={
|
|
typeof v === 'string'
|
|
? new FormControl({
|
|
name: control.name,
|
|
type: 'radio',
|
|
id: control.name + v,
|
|
label: v,
|
|
value: v,
|
|
})
|
|
: new FormControl({
|
|
name: control.name,
|
|
type: 'radio',
|
|
id: control.name + v.label,
|
|
...(v as RadioOption),
|
|
})
|
|
}
|
|
/>
|
|
)),
|
|
]
|
|
) : (
|
|
<Field showValidationHints={showValidationHints} control={control} />
|
|
)
|
|
)
|
|
}
|
|
{
|
|
submitControl && (
|
|
<Field showValidationHints={showValidationHints} control={new FormControl(submitControl)} />
|
|
)
|
|
}
|
|
</form>
|
|
|
|
<style>
|
|
.light {
|
|
/**
|
|
* run dev server with: "npm start",
|
|
* then open browser to "localhost:3000"
|
|
* add a class="light" to the <form> element above to test changes
|
|
* INSERT STYLES FOR LIGHT MODE BELOW: */
|
|
}
|
|
|
|
.dark {
|
|
/**
|
|
* run dev server with: "npm start",
|
|
* then open browser to "localhost:3000"
|
|
* add a class="dark" to the <form> element above to test changes
|
|
* INSERT STYLES FOR DARK MODE BELOW: */
|
|
background-color: #333;
|
|
color: white;
|
|
}
|
|
</style>
|