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

chore: update astro reactive form demo

Browse source
This commit is contained in:
Ayo 2023-01-08 16:57:32 +01:00
parent 4bdb86994b
commit 7eed59bcdf
3 changed files with 90 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
package-lock.json generated
View file

@ -8,8 +8,7 @@
"name": "@example/basics",
"version": "0.0.1",
"dependencies": {
"@astro-reactive/form": "^0.5.1",
"@astro-reactive/validator": "^0.1.0",
"@astro-reactive/form": "^0.6.7",
"astro": "^1.2.6",
"astro-github-stats": "^0.5.0"
}
@ -26,21 +25,31 @@
"node": ">=6.0.0"
}
},
"node_modules/@astro-reactive/common": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/@astro-reactive/common/-/common-0.1.5.tgz",
"integrity": "sha512-jmpOvwDUNpVPQipmW5r0AyriKDiS2wSTfRDMxHMBUpAFipDBn3nK1qRsL2hU3vOoe19PRiO+saiceqYsGJQdEQ=="
},
"node_modules/@astro-reactive/form": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/@astro-reactive/form/-/form-0.5.1.tgz",
"integrity": "sha512-zkx8CPbKWfg0No3O9JzplerOgFoxvB/OOoKQHS+Xv4j9JXbwiS2M7vPpgw31NpOULXK75NJR47VRw9eFd0+ZLg==",
"version": "0.6.7",
"resolved": "https://registry.npmjs.org/@astro-reactive/form/-/form-0.6.7.tgz",
"integrity": "sha512-LUQdFqvYWCTBOwyQwwZwtDyRsfoV1uC2m5t4PNzpIP5mgg4YjRXpS2YqT9ugeTZc2br4nDPGaoOFyPbQigTaBA==",
"dependencies": {
"@astro-reactive/validator": "^0.1.0"
"@astro-reactive/common": "*",
"@astro-reactive/validator": "*",
"short-unique-id": "^4.4.4"
},
"peerDependencies": {
"astro": "^1.5.0"
}
},
"node_modules/@astro-reactive/validator": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/@astro-reactive/validator/-/validator-0.1.0.tgz",
"integrity": "sha512-9SIPtAYPePWm+bUaULdXS+RQVGwh/qHt5KvzanQm+99Oy7QBPY/gVUy5ItmPw/8GLsA3i7PGe4WFumP6/AWmwg==",
"version": "0.2.7",
"resolved": "https://registry.npmjs.org/@astro-reactive/validator/-/validator-0.2.7.tgz",
"integrity": "sha512-CQ7H9CVJZMPi+R4kTrfHEK31c5UlvNvsZ2weIO+v40JmqTQ7TF4tmxmZkZqJDk9Tsmivh0/YKzAjBwKFgugiwg==",
"dependencies": {
"@astro-reactive/common": "*"
},
"peerDependencies": {
"astro": "^1.5.0"
}
@ -4783,6 +4792,15 @@
"resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
"integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w=="
},
"node_modules/short-unique-id": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/short-unique-id/-/short-unique-id-4.4.4.tgz",
"integrity": "sha512-oLF1NCmtbiTWl2SqdXZQbo5KM1b7axdp0RgQLq8qCBBLoq+o3A5wmLrNM6bZIh54/a8BJ3l69kTXuxwZ+XCYuw==",
"bin": {
"short-unique-id": "bin/short-unique-id",
"suid": "bin/short-unique-id"
}
},
"node_modules/signal-exit": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
@ -6018,19 +6036,28 @@
"@jridgewell/trace-mapping": "^0.3.9"
}
},
"@astro-reactive/common": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/@astro-reactive/common/-/common-0.1.5.tgz",
"integrity": "sha512-jmpOvwDUNpVPQipmW5r0AyriKDiS2wSTfRDMxHMBUpAFipDBn3nK1qRsL2hU3vOoe19PRiO+saiceqYsGJQdEQ=="
},
"@astro-reactive/form": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/@astro-reactive/form/-/form-0.5.1.tgz",
"integrity": "sha512-zkx8CPbKWfg0No3O9JzplerOgFoxvB/OOoKQHS+Xv4j9JXbwiS2M7vPpgw31NpOULXK75NJR47VRw9eFd0+ZLg==",
"version": "0.6.7",
"resolved": "https://registry.npmjs.org/@astro-reactive/form/-/form-0.6.7.tgz",
"integrity": "sha512-LUQdFqvYWCTBOwyQwwZwtDyRsfoV1uC2m5t4PNzpIP5mgg4YjRXpS2YqT9ugeTZc2br4nDPGaoOFyPbQigTaBA==",
"requires": {
"@astro-reactive/validator": "^0.1.0"
"@astro-reactive/common": "*",
"@astro-reactive/validator": "*",
"short-unique-id": "^4.4.4"
}
},
"@astro-reactive/validator": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/@astro-reactive/validator/-/validator-0.1.0.tgz",
"integrity": "sha512-9SIPtAYPePWm+bUaULdXS+RQVGwh/qHt5KvzanQm+99Oy7QBPY/gVUy5ItmPw/8GLsA3i7PGe4WFumP6/AWmwg==",
"requires": {}
"version": "0.2.7",
"resolved": "https://registry.npmjs.org/@astro-reactive/validator/-/validator-0.2.7.tgz",
"integrity": "sha512-CQ7H9CVJZMPi+R4kTrfHEK31c5UlvNvsZ2weIO+v40JmqTQ7TF4tmxmZkZqJDk9Tsmivh0/YKzAjBwKFgugiwg==",
"requires": {
"@astro-reactive/common": "*"
}
},
"@astrojs/compiler": {
"version": "0.27.2",
@ -9200,6 +9227,11 @@
}
}
},
"short-unique-id": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/short-unique-id/-/short-unique-id-4.4.4.tgz",
"integrity": "sha512-oLF1NCmtbiTWl2SqdXZQbo5KM1b7axdp0RgQLq8qCBBLoq+o3A5wmLrNM6bZIh54/a8BJ3l69kTXuxwZ+XCYuw=="
},
"signal-exit": {
"version": "3.0.7",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",

3
package.json
View file

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

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

@ -3,7 +3,7 @@ import Layout from "../../layouts/Layout.astro";
import Footer from "../../components/Footer.astro";
import Back from "../../components/Back.astro";
import Form, {ControlConfig, FormGroup} from '@astro-reactive/form';
import Form, { ControlConfig, FormGroup } from "@astro-reactive/form";
import { Validators } from "@astro-reactive/validator";
const simpleForm = new FormGroup([
@ -12,11 +12,11 @@ const simpleForm = new FormGroup([
label: "Simple Text Control",
},
{
name: 'email',
label: 'Email',
value: 'invalid-email',
validators: [Validators.email]
}
name: "email",
label: "Email",
value: "invalid-email",
validators: [Validators.email],
},
]);
const name: ControlConfig[] = [
@ -24,12 +24,12 @@ const name: ControlConfig[] = [
name: "first-name",
value: "Ayo",
label: "First Name",
validators: [Validators.required]
validators: [Validators.required],
},
{
name: "last-name",
label: "Last Name",
validators: [Validators.required]
validators: [Validators.required],
},
];
@ -38,15 +38,23 @@ const characteristics: ControlConfig[] = [
name: "is-good-looking",
type: "radio",
label: "Is Good Looking?",
value: [{value: "checked", label: "checked", checked: true}, {value: "not checked", label: "not checked", checked: false}],
value: "checked",
options: [
{ value: "checked", label: "checked" },
{ value: "not checked", label: "not checked" },
],
},
{
name: "required",
label: "Required Field",
placeholder: "but empty 😔",
validators: [Validators.required],
},
{name: 'required', label: 'Required Field', placeholder: 'but empty 😔', validators: [Validators.required]},
{
name: "is-awesome",
type: "checkbox",
label: "Is Awesome?",
value: "checked",
labelPosition: "right",
},
];
@ -57,7 +65,9 @@ const characteristicsForm: FormGroup = new FormGroup(
);
---
<Layout title="Astro Reactive Form | Ayo Ayco | Software Engineer + Web Developer ">
<Layout
title="Astro Reactive Form | Ayo Ayco | Software Engineer + Web Developer "
>
<main>
<Back url="/showcase" />
<h1>Astro Reactive Form</h1>
@ -74,25 +84,31 @@ const characteristicsForm: FormGroup = new FormGroup(
NPM registry:
<ul>
<li>
<a href="https://npmjs.org/package/@astro-reactive/form">@astro-reactive/form</a>
<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>
<a href="https://npmjs.org/package/@astro-reactive/validator"
>@astro-reactive/validator</a
>
</li>
</ul>
</li>
</ul>
<h2>Simple single form group</h2>
<p>Here's an example of a simple form with email validation</p>
<Form showValidationHints={true} formGroups={simpleForm} />
<Form showValidationHints validateOnLoad formGroups={simpleForm} />
<!--Code lang="typescript" theme="github-light" code={simpleFormCode} /-->
<h2>Multiple Form Groups</h2>
<p>Here's a more complex example of a form with multiple fieldsets</p>
<Form showValidationHints={true} formGroups={[nameForm, characteristicsForm]} />
<Form
showValidationHints
validateOnLoad
formGroups={[nameForm, characteristicsForm]}
/>
<!--Code lang="typescript" theme="dark-plus" code={multipleFormGroupCode} /-->
<Footer />