From ab812f191b1264ccafa3271a6fee84f6dca2affd Mon Sep 17 00:00:00 2001 From: Pascal Baljet Date: Fri, 10 Jan 2025 00:18:57 +0100 Subject: [PATCH] Bump version --- docs/basic-usage.md | 35 +++++++++++++++++++++++++++++++++++ react/package-lock.json | 4 ++-- react/package.json | 2 +- vue/package-lock.json | 4 ++-- vue/package.json | 2 +- 5 files changed, 41 insertions(+), 6 deletions(-) diff --git a/docs/basic-usage.md b/docs/basic-usage.md index c936494..951c6e1 100644 --- a/docs/basic-usage.md +++ b/docs/basic-usage.md @@ -211,6 +211,38 @@ export default function UserIndex() { ### Events +The `Modal` component emits several events that you can listen to: + +`after-leave`: Triggered after the modal has been removed from the DOM. +`blur:` Triggered when the modal loses focus because another modal is opened on top of it. +`close:` Triggered when the modal is closed. +`focus:` Triggered when the modal gains focus because a modal on top of it has been closed. +`success:` Triggered when the modal has been successfully fetched and opened. + +::: code-group + +```vue [Vue] + +``` + +```jsx [React] +export default function CreateUserModal() { + return ( + doSomething()}> + {/* ... */} + + ); +} +``` + +::: + +#### `ModalLink` Events + In addition to the `loading` prop, you can also listen to the events emitted by the `ModalLink` component. You can use the `@start` and `@success` events to show a loading spinner or text. ::: code-group @@ -272,6 +304,9 @@ export default function UserIndex() { Then there are two more events: `@close` and `@after-leave`. The `@close` event is triggered when the modal is closed, and the `@after-leave` event is triggered after the modal has been removed from the DOM. +> [!WARNING] ModalLink Events and Browser Navigation +> The `close` and `after-leave` events are not triggered when the modal is closed after navigating to it using the browser's back or forward buttons. This is because Inertia.js rerenders the page, and therefore, the `ModalLink` components. Closing the modal will not be linked to the original `ModalLink` component. + ### Customizing Just like the `Modal` component, you can pass additional props to the `ModalLink` component to customize its behavior and style. Check out the [Configuration](/configuration.html) section for a list of all available props. diff --git a/react/package-lock.json b/react/package-lock.json index b79602b..33177d9 100644 --- a/react/package-lock.json +++ b/react/package-lock.json @@ -1,12 +1,12 @@ { "name": "@inertiaui/modal-react", - "version": "0.17.0", + "version": "0.18.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@inertiaui/modal-react", - "version": "0.17.0", + "version": "0.18.0", "license": "MIT", "devDependencies": { "@headlessui/react": "^2.1.0", diff --git a/react/package.json b/react/package.json index 55dc8b3..6c3b06d 100644 --- a/react/package.json +++ b/react/package.json @@ -1,7 +1,7 @@ { "name": "@inertiaui/modal-react", "author": "Pascal Baljet ", - "version": "0.17.0", + "version": "0.18.0", "private": false, "license": "MIT", "type": "module", diff --git a/vue/package-lock.json b/vue/package-lock.json index 323b8f8..3e7c9b2 100644 --- a/vue/package-lock.json +++ b/vue/package-lock.json @@ -1,12 +1,12 @@ { "name": "@inertiaui/modal-vue", - "version": "0.17.0", + "version": "0.18.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@inertiaui/modal-vue", - "version": "0.17.0", + "version": "0.18.0", "license": "MIT", "devDependencies": { "@inertiajs/vue3": "^1.3.0||^2.0.0", diff --git a/vue/package.json b/vue/package.json index ce531b5..090c425 100644 --- a/vue/package.json +++ b/vue/package.json @@ -1,6 +1,6 @@ { "name": "@inertiaui/modal-vue", - "version": "0.17.0", + "version": "0.18.0", "author": "Pascal Baljet ", "private": false, "license": "MIT",