docs(form): update Form properties and respective documentation (#248)
* chore: project clean up * feat(form): update Form properties * docs: update documentation for the Form properties * fix(demo): update form method demo
This commit is contained in:
Ayo Ayco
GitHub
parent
dd285e72a4
commit
986151fe3e
8 changed files with 103 additions and 52 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/ayoayco/astro-reactive-library/main/.github/assets/logo/min-banner.png" alt="Astro Reactive Library Logo">
|
||||
<img src="https://raw.githubusercontent.com/astro-reactive/astro-reactive/main/.github/assets/logo/min-banner.png" alt="Astro Reactive Library Logo">
|
||||
<br />
|
||||
<strong>Astro Reactive Library</strong>
|
||||
<br />
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<img src="https://github.com/astro-reactive/astro-reactive/actions/workflows/build-and-test.yml/badge.svg?branch=main" alt="Build & Test Result" />
|
||||
</a>
|
||||
<a href="https://github.com/astro-reactive/astro-reactive">
|
||||
<img alt="Last Commit" src="https://img.shields.io/github/last-commit/ayoayco/astro-reactive-library?logo=github" />
|
||||
<img alt="Last Commit" src="https://img.shields.io/github/last-commit/astro-reactive/astro-reactive?logo=github" />
|
||||
</a>
|
||||
<a href="https://gitpod.io/#https://github.com/astro-reactive/astro-reactive.git">
|
||||
<img
|
||||
|
|
@ -88,7 +88,7 @@ npm run landing-page
|
|||
This project is only possible because of the support and contribution of our community ❤️
|
||||
|
||||
<a href="https://github.com/astro-reactive/astro-reactive/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=ayoayco/astro-reactive-library" />
|
||||
<img src="https://contrib.rocks/image?repo=astro-reactive/astro-reactive" />
|
||||
</a>
|
||||
|
||||
👉 _[Join our contributors!](https://github.com/astro-reactive/astro-reactive/blob/main/CONTRIBUTING.md)_
|
||||
|
|
|
|||
|
|
@ -110,6 +110,6 @@ const submit: Submit = {
|
|||
theme={theme}
|
||||
submitControl={submit}
|
||||
action="https://localhost"
|
||||
method="POST"
|
||||
method="post"
|
||||
/>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ type Props = {
|
|||
};
|
||||
const { path } = Astro.props as Props;
|
||||
const resolvedPath = `apps/docs/${path}`;
|
||||
const url = `https://api.github.com/repos/ayoayco/astro-reactive-library/commits?path=${resolvedPath}`;
|
||||
const url = `https://api.github.com/repos/astro-reactive/astro-reactive/commits?path=${resolvedPath}`;
|
||||
const commitsURL = `https://github.com/astro-reactive/astro-reactive/commits/main/${resolvedPath}`;
|
||||
|
||||
type Commit = {
|
||||
|
|
@ -180,4 +180,3 @@ const additionalContributors = unique.length - recentContributors.length; // lis
|
|||
margin-left: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -158,22 +158,41 @@ This is a very crude solution to prevent having multiple submit buttons. For sug
|
|||
|
||||
## Properties
|
||||
|
||||
The following are input properties a `Form` component can take.
|
||||
The following are input properties a `Form` component can take. Only the `formGroups` property is required.
|
||||
|
||||
| Property | Type | |
|
||||
| ------------------------------------------- | -------------------------- | -------- |
|
||||
| ------------------------------------------- | -------------------------- | ----------------------------------- |
|
||||
| [formGroups](#formgroups) | `FormGroup \| FormGroup[]` | required |
|
||||
| [action](#action) | `string` | optional |
|
||||
| [method](#method) | `'get' \| 'post' \| 'dialog'` | optional |
|
||||
| [readOnly](#readonly) | `boolean` | optional |
|
||||
| [showValidationHints](#showvalidationhints) | `boolean` | optional |
|
||||
| [validateOnLoad](#validateOnLoad) | `boolean` | optional |
|
||||
| [submitControl](#submitcontrol) | `Submit` | optional |
|
||||
| [theme](#theme) | `'light' \| 'dark'` | optional |
|
||||
| [validateOnLoad](#validateOnLoad) | `boolean` | optional |
|
||||
|
||||
### `formGroups`
|
||||
|
||||
Type: `FormGroup | FormGroup[]`
|
||||
|
||||
Determines how the form is are rendered
|
||||
Determines how the form is rendered
|
||||
|
||||
### action
|
||||
|
||||
Type: `string`
|
||||
|
||||
Sets the `action` [attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-action) for the form. Set this to the URL that processes the form submission.
|
||||
|
||||
### method
|
||||
|
||||
Type: HTTPSubmitMethod
|
||||
|
||||
Sets the `method` [attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method) for the form. Set this to the HTTP method to submit the form: 'post', 'get', or 'dialog'.
|
||||
|
||||
From [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method):
|
||||
- `post` - The POST method; form data sent as the request body.
|
||||
- `get (default)` - The GET method; form data appended to the action URL with a ? separator. Use this method when the form has no side effects.
|
||||
- `dialog` - When the form is inside a <dialog>, closes the dialog and throws a submit event on submission without submitting data or clearing the form.
|
||||
|
||||
### `readOnly`
|
||||
|
||||
|
|
@ -190,17 +209,28 @@ When used with our `validator` package, the `Form` component is able to render v
|
|||
- asterisks on required controls' labels
|
||||
- controls with validation errors are colored red
|
||||
|
||||
### `validateOnLoad`
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
When used with our `validator` package, the `Form` component is able to render validation errors on server-side rendering when `validateOnLoad` is set to true otherwise, the validation errors will only be rendered on the client-side.
|
||||
|
||||
### `submitControl`
|
||||
|
||||
Type: `Submit`
|
||||
|
||||
A special button that triggers the submit event for a form.
|
||||
|
||||
```ts
|
||||
const submit: Submit = {
|
||||
type: 'submit',
|
||||
value: 'Let\'s go!'
|
||||
}
|
||||
```
|
||||
|
||||
### `theme`
|
||||
|
||||
Type: `'light' | 'dark'`
|
||||
|
||||
Sets the form to use light or dark mode.
|
||||
|
||||
### `validateOnLoad`
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
When used with our `validator` package, the `Form` component is able to render validation errors on server-side rendering when `validateOnLoad` is set to true. Otherwise, the validation errors will only be rendered on the client-side upon user interaction.
|
||||
|
||||
|
|
|
|||
|
|
@ -27,16 +27,7 @@ export type InputType =
|
|||
| "url"
|
||||
| "week";
|
||||
|
||||
export type HTTPRequestMethodType =
|
||||
| "GET"
|
||||
| "POST"
|
||||
| "PUT"
|
||||
| "PATCH"
|
||||
| "DELETE"
|
||||
| "TRACE"
|
||||
| "OPTIONS"
|
||||
| "CONNECT"
|
||||
| "HEAD";
|
||||
export type HTTPSubmitMethod = "get" | "post" | "dialog";
|
||||
|
||||
export type ControlType = InputType | "dropdown" | "textarea";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/ayoayco/astro-reactive-library/main/.github/assets/logo/min-banner.png" alt="Astro Reactive Library Logo">
|
||||
<img src="https://raw.githubusercontent.com/astro-reactive/astro-reactive/main/.github/assets/logo/min-banner.png" alt="Astro Reactive Library Logo">
|
||||
<br />
|
||||
<strong>Astro Reactive Form</strong>
|
||||
<br />
|
||||
|
|
|
|||
|
|
@ -1,19 +1,54 @@
|
|||
---
|
||||
import type { HTTPRequestMethodType, Submit } from '@astro-reactive/common';
|
||||
import type { HTTPSubmitMethod, Submit } from '@astro-reactive/common';
|
||||
import { FormGroup, FormControl } from '../core';
|
||||
import FieldSet from './FieldSet.astro';
|
||||
import Field from './Field.astro';
|
||||
import ShortUniqueId from 'short-unique-id';
|
||||
|
||||
export interface Props {
|
||||
/**
|
||||
* Determines how the form is rendered
|
||||
*/
|
||||
formGroups: FormGroup | FormGroup[];
|
||||
readOnly?: boolean;
|
||||
showValidationHints?: boolean;
|
||||
validateOnLoad?: boolean;
|
||||
submitControl?: Submit;
|
||||
theme?: 'light' | 'dark';
|
||||
|
||||
/**
|
||||
* Sets the `action` attribute for the form. Set this to the URL that processes the form submission.
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method
|
||||
*/
|
||||
action?: string;
|
||||
method?: HTTPRequestMethodType;
|
||||
|
||||
/**
|
||||
* Sets the `method` attribute for the form. Set this to the HTTP method to submit the form: 'post', 'get', or 'dialog'.
|
||||
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-method
|
||||
*/
|
||||
method?: HTTPSubmitMethod;
|
||||
|
||||
/**
|
||||
* Sets the whole form as read-only.
|
||||
*/
|
||||
readOnly?: boolean;
|
||||
|
||||
/**
|
||||
* When used with our `validator` package, the `Form` component is able to render validation hints when `showValidationHints` is set to true:
|
||||
* - asterisks on required controls' labels
|
||||
* - controls with validation errors are colored red
|
||||
*/
|
||||
showValidationHints?: boolean;
|
||||
|
||||
/**
|
||||
* A special button that triggers the submit event for a form.
|
||||
*/
|
||||
submitControl?: Submit;
|
||||
|
||||
/**
|
||||
* Sets the form to use light or dark mode.
|
||||
*/
|
||||
theme?: 'light' | 'dark';
|
||||
|
||||
/**
|
||||
* When used with our `validator` package, the `Form` component is able to render validation errors on server-side rendering when `validateOnLoad` is set to true. Otherwise, the validation errors will only be rendered on the client-side upon user interaction.
|
||||
*/
|
||||
validateOnLoad?: boolean;
|
||||
}
|
||||
|
||||
const {
|
||||
|
|
@ -23,8 +58,8 @@ const {
|
|||
showValidationHints = false,
|
||||
validateOnLoad = false,
|
||||
readOnly = false,
|
||||
action = "",
|
||||
method = "GET"
|
||||
action = '',
|
||||
method = 'get',
|
||||
} = Astro.props;
|
||||
|
||||
const uid = new ShortUniqueId({ length: 9 });
|
||||
|
|
@ -36,15 +71,11 @@ const formId = Array.isArray(formGroups) ? uid() : formGroups?.id || null;
|
|||
// it should forced all FormControl to validate on load
|
||||
if (validateOnLoad) {
|
||||
if (Array.isArray(formGroups)) {
|
||||
formGroups.forEach(group =>
|
||||
group.controls.forEach(control =>
|
||||
control.setValidateOnLoad(validateOnLoad)
|
||||
)
|
||||
formGroups.forEach((group) =>
|
||||
group.controls.forEach((control) => control.setValidateOnLoad(validateOnLoad))
|
||||
);
|
||||
} else {
|
||||
formGroups.controls.forEach(control =>
|
||||
control.setValidateOnLoad(validateOnLoad)
|
||||
)
|
||||
formGroups.controls.forEach((control) => control.setValidateOnLoad(validateOnLoad));
|
||||
}
|
||||
}
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<p align="center">
|
||||
<img src="https://raw.githubusercontent.com/ayoayco/astro-reactive-library/main/.github/assets/logo/min-banner.png" alt="Astro Reactive Library Logo">
|
||||
<img src="https://raw.githubusercontent.com/astro-reactive/astro-reactive/main/.github/assets/logo/min-banner.png" alt="Astro Reactive Library Logo">
|
||||
<br />
|
||||
<strong>Astro Reactive Validator</strong>
|
||||
<br />
|
||||
|
|
|
|||
Loading…
Reference in a new issue