feat: update to match 3.13

Author: ido-pluto

src/content/docs/guides/forms/getting-started.mdx

@@ -66,7 +66,7 @@ export default defineConfig({
 });
 ```
 
-This integration will simplify your debugging process by eliminating the browser pop-ups during every Vite reload
+This integration change the way Astro handle the render - will render in the order it was written, to allow the forms to work properly.
 
 Edit
 `src/middleware.ts` to add the middleware

src/content/docs/reference/forms/components.md renamed to src/content/docs/reference/forms/basic-form-components.md

@@ -1,5 +1,5 @@
 ---
-title: Components
+title: Basic Form Components
 description: HTML like form for Astro
 ---
 

src/content/docs/reference/forms/events-and-triggers.md

@@ -0,0 +1,65 @@
+---
+title: Client Side Events & Triggers
+description: Forms client side events & submit triggers
+---
+
+## Client Side Events
+
+You can listen to submit events to handle the loading while the form is being submitted.
+
+```ts
+type SubmitInfo = {
+    button: HTMLButtonElement, 
+    uploads: {count: number, totalSize: number} // only for big files
+};
+
+document.addEventListener('WFSubmitting', ({detail}: {details: SubmitInfo}) => {
+    const {button, uploads} = details;
+
+    button.classList.add('loading');
+    console.log('Form is being submitted');
+});
+```
+
+## Submit Triggers
+
+If you want custom event to submit the form, you can use the `submitForm` global function.
+
+```astro
+---
+import { Bind, BButton, BindForm } from '@astro-utils/forms/forms.js';
+
+const form = Bind();
+
+function onSubmit(){
+    console.log(form.select);
+}
+---
+<BindForm bind={form}>
+    <BSelect name="select" required onchange="submitForm(this)">
+        <BOption value="1">Option 1</BOption>
+        <BOption value="2">Option 2</BOption>
+    </BSelect>
+
+    <BButton onClick={onSubmit} class="hidden">This button is hidden</BButton>
+</BindForm>
+```
+
+
+### Select button 
+It will try to select the best BButton in this BindForm.
+
+The order of selection is:
+1. The last BButton with the `whenFormOK` attribute.
+2. Last BButton in the form.
+
+You can also manually configure that by adding the `data-submit` attribute to the select.
+
+```astro
+<BSelect name="select" required onchange="submitForm(this)" data-submit="consoleItButton">
+    <BOption value="1">Option 1</BOption>
+    <BOption value="2">Option 2</BOption>
+</BSelect>
+
+<BButton id="consoleItButton" onClick={onSubmit} class="hidden">This button is hidden</BButton>
+```

src/content/docs/reference/forms/upload-big-file.md

@@ -0,0 +1,73 @@
+---
+title: Upload Big File Component
+description: Uploading Big Files with Astro Utils
+---
+
+## Big File Upload
+
+The big file upload component is a simple way to upload large files to the server. It uses the `xhr` API to upload the file in chunks (and not all at once). This way, the server can handle large files without running out of memory.
+
+It is also able to show the progress of the upload and handle errors (in the server side).
+
+## Components
+
+### UploadBigFile
+
+Same as the `BInput` component, but for big files.
+
+```astro
+---
+import { BigFile, Bind, FormErrors, BButton } from '@astro-utils/forms/forms.js';
+
+type Form = {
+    file: BigFile 
+    showSubmitText: string;   
+}
+
+const bind = Bind<Form>();
+function formSubmit(){
+    showSubmitText = `You uploaded ${form.file.name} (${form.file.size} bytes)`;
+}
+---
+<BindForm bind={bind}>
+    <FormErrors />
+    <p>{showSubmitText}</p>
+    <UploadBigFile name="file" required/>
+
+    <BButton onClick={formSubmit} whenFormOK>Submit</BButton>
+</BindForm>
+```
+
+### UploadBigFileProgress
+
+A progress bar connected to a `UploadBigFile` component.
+
+```astro
+<UploadBigFile name="file" required/>
+<UploadBigFileProgress for="file" />
+```
+
+## Configuration
+
+All configuration is done through the middleware. The following options are available:
+
+```ts
+type MiddlewareOptions = {
+    forms?: {
+        bigFilesUpload?: {
+            bigFileClientOptions?: {
+                retryChunks?: number; // default: 5
+                chunkSize?: number; // default: 5MB
+                parallelChunks?: number; // default: 3
+                parallelUploads?: number; // default: 3
+            },
+            bigFileServerOptions?:  {
+                maxUploadTime?: number; // default: 1.5 hours
+                maxUploadSize?: number; // default: 1GB
+                maxDirectorySize?: number; // default: 50GB
+                tempDirectory?: string; // default: path.join(os.tmpdir(), "astro_forms_big_files_uploads")
+            };
+        }
+    }
+}
+```