4dc020027f
* feat: initial validator component * chore: fix eslint for validator * chore: update package info for validator * chore: remove vscode settings for docs * chore: put docs and demo into apps * chore: move package scope @astro-reactive * test: update tests for validator * feat: validator functions, hooks * feat: validator sets haserrors attribute * feat: use data-validator attributes * feat: showValidationHints * feature: add logic for all validators * refactor: remove Validator component usage * docs(validator): initial readme * chore: comment out unsupported validator * docs(validator): update installation * chore: package docs and publish * chore: update deps * docs: update npm info on docs * docs(validator): update docs for validator * fix(form): handle undefined form * test(validator): update tests * chore: organize files; update deps * chore: fix build scripts
52 lines
1.4 KiB
Text
52 lines
1.4 KiB
Text
---
|
|
import { Submit, FormGroup, FormControl } from './core';
|
|
import Field from './components/Field.astro';
|
|
import FieldSet from './components/FieldSet.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) => (
|
|
<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>
|