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

3
package.json
View file

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

64
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 Footer from "../../components/Footer.astro";
import Back from "../../components/Back.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"; import { Validators } from "@astro-reactive/validator";
const simpleForm = new FormGroup([ const simpleForm = new FormGroup([
@ -12,11 +12,11 @@ const simpleForm = new FormGroup([
label: "Simple Text Control", label: "Simple Text Control",
}, },
{ {
name: 'email', name: "email",
label: 'Email', label: "Email",
value: 'invalid-email', value: "invalid-email",
validators: [Validators.email] validators: [Validators.email],
} },
]); ]);
const name: ControlConfig[] = [ const name: ControlConfig[] = [
@ -24,12 +24,12 @@ const name: ControlConfig[] = [
name: "first-name", name: "first-name",
value: "Ayo", value: "Ayo",
label: "First Name", label: "First Name",
validators: [Validators.required] validators: [Validators.required],
}, },
{ {
name: "last-name", name: "last-name",
label: "Last Name", label: "Last Name",
validators: [Validators.required] validators: [Validators.required],
}, },
]; ];
@ -38,15 +38,23 @@ const characteristics: ControlConfig[] = [
name: "is-good-looking", name: "is-good-looking",
type: "radio", type: "radio",
label: "Is Good Looking?", 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", name: "is-awesome",
type: "checkbox", type: "checkbox",
label: "Is Awesome?", label: "Is Awesome?",
value: "checked", 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> <main>
<Back url="/showcase" /> <Back url="/showcase" />
<h1>Astro Reactive Form</h1> <h1>Astro Reactive Form</h1>
@ -72,27 +82,33 @@ const characteristicsForm: FormGroup = new FormGroup(
</li> </li>
<li> <li>
NPM registry: NPM registry:
<ul> <ul>
<li> <li>
<a href="https://npmjs.org/package/@astro-reactive/form">@astro-reactive/form</a> <a href="https://npmjs.org/package/@astro-reactive/form"
</li> >@astro-reactive/form</a
<li> >
<a href="https://npmjs.org/package/@astro-reactive/validator">@astro-reactive/validator</a> </li>
</li> <li>
</ul> <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>
<p>Here's an example of a simple form with email validation</p> <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} /--> <!--Code lang="typescript" theme="github-light" code={simpleFormCode} /-->
<h2>Multiple Form Groups</h2> <h2>Multiple Form Groups</h2>
<p>Here's a more complex example of a form with multiple fieldsets</p> <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} /--> <!--Code lang="typescript" theme="dark-plus" code={multipleFormGroupCode} /-->
<Footer /> <Footer />