78 lines
1.9 KiB
Text
78 lines
1.9 KiB
Text
---
|
|
import type { Submit } from '@astro-reactive/common';
|
|
import { FormGroup, FormControl } from '../core';
|
|
import FieldSet from './FieldSet.astro';
|
|
import Field from './Field.astro';
|
|
import ShortUniqueId from 'short-unique-id';
|
|
|
|
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 uid = new ShortUniqueId({ length: 9 });
|
|
const formTheme = theme ?? 'light';
|
|
const formName = Array.isArray(formGroups) ? null : formGroups?.name || null;
|
|
const formId = Array.isArray(formGroups) ? uid() : formGroups?.id || null;
|
|
---
|
|
|
|
<form
|
|
class={formTheme}
|
|
name={formName}
|
|
id={formId}
|
|
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-error='true'],
|
|
[data-validator-hints='true'] [data-validator-error='true'] {
|
|
color: red;
|
|
border-color: red;
|
|
}
|
|
[data-validator-hints='true'][data-validator-warn='true'],
|
|
[data-validator-hints='true'] [data-validator-warn='true'] {
|
|
color: orange;
|
|
border-color: orange;
|
|
}
|
|
[data-validator-hints='true'][data-validator-info='true'],
|
|
[data-validator-hints='true'] [data-validator-info='true'] {
|
|
color: blue;
|
|
border-color: blue;
|
|
}
|
|
</style>
|