975b2e821a
* feat(form): add validateOnLoad prop * feat(form): add FormConfig interface * refactor(form): refactor FormConfig * refactor(demo): change params to FormConfig * chore(demo): remove FormConfig on demo * feat(form): make validateOnLoad to be false by default * feat(form): add setValidateOnLoad method * chore(form): edit comment on validateOnLoad * feat(form): remove setValidateOnLoad in FormGroup * revert(form): add FormConfig interface This reverts commit 44b58d4a43d4d2e8bcd3dc799e3110f9b8f23604. * revert(demo): change params to FormConfig This reverts commit 98f8602000505a29d04493617043aa0cfb00a969.
96 lines
2.3 KiB
Text
96 lines
2.3 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;
|
|
validateOnLoad?: boolean;
|
|
submitControl?: Submit;
|
|
theme?: 'light' | 'dark';
|
|
}
|
|
|
|
const {
|
|
submitControl,
|
|
formGroups = [],
|
|
theme,
|
|
showValidationHints = false,
|
|
validateOnLoad = 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;
|
|
|
|
// if `validateOnLoad` prop is true,
|
|
// it should forced all FormControl to validate on load
|
|
if (validateOnLoad) {
|
|
if (Array.isArray(formGroups)) {
|
|
formGroups.forEach(group =>
|
|
group.controls.forEach(control =>
|
|
control.setValidateOnLoad(validateOnLoad)
|
|
)
|
|
);
|
|
} else {
|
|
formGroups.controls.forEach(control =>
|
|
control.setValidateOnLoad(validateOnLoad)
|
|
)
|
|
}
|
|
}
|
|
---
|
|
|
|
<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: green;
|
|
border-color: green;
|
|
}
|
|
</style>
|