cec0a02c46
* docs: initial structure and form api docs * feat(docs): warning underconstruction * docs: initial FormGroup and FormControl docs * docs: initial example usage * fix: docs build errors
65 lines
1.4 KiB
Text
65 lines
1.4 KiB
Text
---
|
|
import type { Submit } from '@astro-reactive/common';
|
|
import { FormGroup, FormControl } from '../core';
|
|
import FieldSet from './FieldSet.astro';
|
|
import Field from './Field.astro';
|
|
|
|
export interface Props {
|
|
formGroups: FormGroup | FormGroup[];
|
|
readOnly?: boolean;
|
|
showValidationHints?: boolean;
|
|
submitControl?: Submit;
|
|
theme?: 'light' | 'dark';
|
|
}
|
|
|
|
const {
|
|
submitControl,
|
|
formGroups = [],
|
|
theme,
|
|
showValidationHints = false,
|
|
readOnly = false,
|
|
} = Astro.props;
|
|
|
|
const formTheme = theme ?? 'light';
|
|
const formName = Array.isArray(formGroups) ? null : formGroups?.name || null;
|
|
---
|
|
|
|
<form
|
|
class={formTheme}
|
|
name={formName}
|
|
id={formName}
|
|
data-validator-hints={showValidationHints.toString()}
|
|
>
|
|
{
|
|
Array.isArray(formGroups)
|
|
? formGroups?.map((group) => (
|
|
<FieldSet showValidationHints={showValidationHints} group={group} readOnly={readOnly} />
|
|
))
|
|
: formGroups?.controls.map((control) => (
|
|
<Field showValidationHints={showValidationHints} control={control} readOnly={readOnly} />
|
|
))
|
|
}
|
|
{
|
|
submitControl && (
|
|
<Field showValidationHints={showValidationHints} control={new FormControl(submitControl)} />
|
|
)
|
|
}
|
|
</form>
|
|
|
|
<style>
|
|
.light {
|
|
color-scheme: light;
|
|
}
|
|
|
|
.dark {
|
|
color-scheme: dark;
|
|
}
|
|
</style>
|
|
|
|
<style is:global>
|
|
[data-validator-hints='true'][data-validator-haserrors='true'],
|
|
[data-validator-hints='true'] [data-validator-haserrors='true'] {
|
|
color: red;
|
|
border-color: red;
|
|
}
|
|
</style>
|