ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[feat]: Add a new demo page (#120)

Browse source
This commit is contained in:
Chase Reynolds 2022-10-20 18:52:35 -04:00 committed by GitHub
parent 0cb3167a04
commit b96e3383dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 220 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
apps/demo/src/pages/demo.astro Normal file
View file

@ -0,0 +1,100 @@
---
import Form, {
ControlConfig,
FormGroup,
FormControl,
} from "@astro-reactive/form";
const baseForm = new FormGroup([
{
name: "crust",
label: "Crust",
type: "radio",
value: [{ label: "Garlic", value: "garlic" },]
},
{
name: "size",
label: "Size",
type: "radio",
value: ["Small", "Medium", "Large"]
},
{
name: "sauce",
label: "Sauce",
type: "radio",
value: ["Tomato", "Barbeque"]
}
]);
const toppingsForm = new FormGroup([
{
name: "mushrooms",
label: "Mushrooms",
type: "checkbox"
},
{
name: "extraCheese",
label: "Extra Cheese",
type: "checkbox"
},
{
name: "onions",
label: "Onions",
type: "checkbox"
},
{
name: "peppers",
label: "Peppers",
type: "checkbox"
},
{
name: "pepperoni",
label: "Pepperoni",
type: "checkbox"
},
{
name: "sausage",
label: "Sausage",
type: "checkbox"
},
{
name: "chicken",
label: "Chicken",
type: "checkbox"
},
{
name: "pineapple",
label: "Pineapple",
type: "checkbox"
},
]);
baseForm.name = "Base"
toppingsForm.name = "Toppings";
// const config: ControlConfig = {
// type: "checkbox",
// name: "is-awesome",
// label: "is Awesome?",
// labelPosition: "right",
// };
// insert a control
// form.controls.push(new FormControl(config));
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Pizza Form Demo</h1>
<Form showValidationHints={true} formGroups={[baseForm, toppingsForm]} />
</body>
</html>

120
apps/demo/src/pages/pizza-delivery.astro Normal file
View file

@ -0,0 +1,120 @@
---
import Form, {
ControlConfig,
FormGroup,
FormControl,
} from "@astro-reactive/form";
import { Validators } from "@astro-reactive/validator";
const baseForm = new FormGroup([
{
name: "crust",
label: "Crust",
type: "radio",
value: [{ label: "Garlic", value: "garlic" },]
},
{
name: "size",
label: "Size",
type: "radio",
value: ["Small", "Medium", "Large"]
},
{
name: "sauce",
label: "Sauce",
type: "radio",
value: ["Tomato", "Barbeque"]
}
]);
const toppingsForm = new FormGroup([
{
name: "mushrooms",
label: "Mushrooms",
type: "checkbox"
},
{
name: "extraCheese",
label: "Extra Cheese",
type: "checkbox"
},
{
name: "onions",
label: "Onions",
type: "checkbox"
},
{
name: "peppers",
label: "Peppers",
type: "checkbox"
},
{
name: "pepperoni",
label: "Pepperoni",
type: "checkbox"
},
{
name: "sausage",
label: "Sausage",
type: "checkbox"
},
{
name: "chicken",
label: "Chicken",
type: "checkbox"
},
{
name: "pineapple",
label: "Pineapple",
type: "checkbox"
},
]);
const infoForm = new FormGroup([
{
name: "name",
label: "Name",
validators: [Validators.required],
},
{
name: "address",
label: "Delivery Address",
validators: [Validators.required],
},
{
name: "contact",
label: "Contact Number",
validators: [Validators.required],
},
]);
baseForm.name = "Base"
toppingsForm.name = "Toppings";
infoForm.name = "Customer Info";
// const config: ControlConfig = {
// type: "checkbox",
// name: "is-awesome",
// label: "is Awesome?",
// labelPosition: "right",
// };
// insert a control
// form.controls.push(new FormControl(config));
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Pizza Form Demo</h1>
<Form showValidationHints={true} formGroups={[baseForm, toppingsForm, infoForm]} />
</body>
</html>