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

feat: implement only one submit control (#59)

Browse source 
* feat: implement submit control

* refactor: remove label
This commit is contained in:
Ayo Ayco 2022-10-06 17:57:39 +02:00 committed by GitHub
parent 96657a9c38
commit 2da037944b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
demo/src/pages/index.astro
View file

@ -6,7 +6,7 @@ const form = new FormGroup([
{
name: "username",
label: "Username",
placeholder: "astroIscool"
placeholder: "astroIscool",
},
{
name: "password",
@ -45,6 +45,12 @@ form.get("is-awesome")?.setValue("checked");
</head>
<body>
<h1>Astro Reactive Form</h1>
<Form formGroups={[form]} />
<Form
submitControl={{
type: "submit",
name: "what",
}}
formGroups={[form]}
/>
</body>
</html>

7
packages/astro-reactive-form/Form.astro
View file

@ -1,18 +1,19 @@
---
import type { FormControl, FormGroup } from './core';
import { Submit, FormGroup, FormControl } from './core';
import Field from './components/Field.astro';
import FieldSet from './components/FieldSet.astro';
export interface Props {
submitControl?: FormControl;
submitControl?: Submit;
formGroups: FormGroup[];
}
const { submitControl, formGroups } = Astro.props;
---
<form class="light">
{formGroups?.map((group) => <FieldSet group={group} />)}
{submitControl && (<Field control={submitControl} />)}
{submitControl && <Field control={new FormControl(submitControl)} />}
</form>
<style>

4
packages/astro-reactive-form/core/form-control-types.ts
View file

@ -46,10 +46,10 @@ export interface Radio extends FormControlBase {
export interface Submit extends FormControlBase {
type: 'submit';
callBack: () => void;
callBack?: () => void;
}
export interface Button extends FormControlBase {
type: 'button';
callBack: () => void;
callBack?: () => void;
}

1
packages/astro-reactive-form/core/index.ts
View file

@ -1,2 +1,3 @@
export * from './form-control';
export * from './form-group';
export * from './form-control-types';