ayo/ayco.io-astro
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update deps and form example

Browse source
This commit is contained in:
Ayo 2022-10-25 21:32:42 +02:00
parent d5814b7174
commit f213a14b33
3 changed files with 516 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

594
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

5
package.json
View file

@ -12,7 +12,8 @@
}, },
"dependencies": { "dependencies": {
"astro": "^1.2.6", "astro": "^1.2.6",
"astro-github-stats": "^0.5.0", "@astro-reactive/form": "^0.5.1",
"astro-reactive-form": "^0.3.0" "@astro-reactive/validator": "^0.1.0",
"astro-github-stats": "^0.5.0"
} }
} }

37
src/pages/showcase/astro-reactive-form.astro
View file

@ -2,8 +2,10 @@
import Layout from "../../layouts/Layout.astro"; import Layout from "../../layouts/Layout.astro";
import Footer from "../../components/Footer.astro"; import Footer from "../../components/Footer.astro";
import Back from "../../components/Back.astro"; import Back from "../../components/Back.astro";
import { FormGroup, ControlConfig } from "astro-reactive-form/core";
import Form from "astro-reactive-form"; import Form, {ControlConfig, FormGroup} from '@astro-reactive/form';
import { Validators } from "@astro-reactive/validator";
const simpleForm = new FormGroup([ const simpleForm = new FormGroup([
{ {
@ -11,11 +13,11 @@ const simpleForm = new FormGroup([
label: "Simple Text Control", label: "Simple Text Control",
}, },
{ {
name: "a-checkbox", name: 'email',
label: "A Checkbox with Label on the left", label: 'Email',
type: "checkbox", value: 'invalid-email',
value: "checked", validators: [Validators.email]
}, }
]); ]);
const name: ControlConfig[] = [ const name: ControlConfig[] = [
@ -23,11 +25,12 @@ const name: ControlConfig[] = [
name: "first-name", name: "first-name",
value: "Ayo", value: "Ayo",
label: "First Name", label: "First Name",
validators: [Validators.required]
}, },
{ {
name: "last-name", name: "last-name",
value: "Ayco",
label: "Last Name", label: "Last Name",
validators: [Validators.required]
}, },
]; ];
@ -36,7 +39,7 @@ const characteristics: ControlConfig[] = [
name: "is-good-looking", name: "is-good-looking",
type: "radio", type: "radio",
label: "Is Good Looking?", label: "Is Good Looking?",
value: "checked", value: ["checked"],
labelPosition: "right", labelPosition: "right",
}, },
{ {
@ -69,17 +72,23 @@ const characteristicsForm: FormGroup = new FormGroup(
> >
</li> </li>
<li> <li>
NPM registry: <a href="https://npmjs.org/package/@astro-reactive/form" NPM registry:
>@astro-reactive/form</a <ul>
> <li>
<a href="https://npmjs.org/package/@astro-reactive/form">@astro-reactive/form</a>
</li>
<li>
<a href="https://npmjs.org/package/@astro-reactive/validator">@astro-reactive/validator</a>
</li>
</ul>
</li> </li>
</ul> </ul>
<h2>Simple single form group</h2> <h2>Simple single form group</h2>
<Form formGroups={simpleForm} /> <Form showValidationHints={true} formGroups={simpleForm} />
<h2>Multiple Form Groups</h2> <h2>Multiple Form Groups</h2>
<Form formGroups={[nameForm, characteristicsForm]} /> <Form showValidationHints={true} formGroups={[nameForm, characteristicsForm]} />
<Footer /> <Footer />
</main> </main>