From 0f8a118535bdd4968d845c595bb44fce5b9e5aed Mon Sep 17 00:00:00 2001 From: Pascal Baljet Date: Mon, 23 Jan 2023 21:04:13 +0100 Subject: [PATCH 1/6] Update form-file.md --- form-file.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/form-file.md b/form-file.md index 4773f50..7261985 100644 --- a/form-file.md +++ b/form-file.md @@ -22,6 +22,18 @@ The component supports selecting multiple files as well by adding the `multiple` ``` +## Image preview + +You might want to show a preview of the selected image. You may use the `$fileAsUrl` method to generate a *base64-encoded* representation of the image, and use it as the source of an `img` element. In addition, with the `show-filename` attribute, you can disable displaying the filename. + +```blade + + + + + + ``` + ## FilePond The [FilePond](https://pqina.nl/filepond/) integration comes with a default stylesheet which you should import into the main JavaScript file. If you've used the automatic installer, it has already done this for you. From f12db90eeb7ea39bb8b14d0099783ab638cd4fb3 Mon Sep 17 00:00:00 2001 From: Pascal Baljet Date: Mon, 23 Jan 2023 21:24:42 +0100 Subject: [PATCH 2/6] Script --- form-file.md | 2 +- x-script.md | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 x-script.md diff --git a/form-file.md b/form-file.md index 7261985..e32c44d 100644 --- a/form-file.md +++ b/form-file.md @@ -24,7 +24,7 @@ The component supports selecting multiple files as well by adding the `multiple` ## Image preview -You might want to show a preview of the selected image. You may use the `$fileAsUrl` method to generate a *base64-encoded* representation of the image, and use it as the source of an `img` element. In addition, with the `show-filename` attribute, you can disable displaying the filename. +You might want to show a preview of the selected image. You may use the `form.$fileAsUrl` method to generate a *base64-encoded* representation of the image, and use it as the source of an `img` element. In addition, with the `show-filename` attribute, you can disable displaying the filename. ```blade diff --git a/x-script.md b/x-script.md new file mode 100644 index 0000000..b7d5508 --- /dev/null +++ b/x-script.md @@ -0,0 +1,20 @@ +# X-Splade-Script Component + +In addition to building [custom Vue components](/custom-vue-components.md), you may use the **Script Component** to add inline scripts to your Blade template. Usually, the Vue render engine would throw an error on script tags, but this component magically injects your script as if it was called in the [`mounted()`](https://vuejs.org/api/options-lifecycle.html#mounted) hook of a Vue component. This way, we can avoid the typical error, and you get access to the global `$splade` object, which you may use to navigate and access the Event Bus. + +Note that this component is quite limited, and it is generally recommended to use custom Vue components. + +```blade + + document.body.classList.add('bg-confetti'); + +``` + +Here's another example of using Splade's navigation capabilities: + +```blade + + setTimeout(() => $splade.visit('/destination'), 5000); + +``` + From 88072ae4923d9721f57cb92151670983ff69fb9b Mon Sep 17 00:00:00 2001 From: Pascal Baljet Date: Mon, 23 Jan 2023 21:39:01 +0100 Subject: [PATCH 3/6] Password confirmation --- index.json | 1 + x-form.md | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/index.json b/index.json index ff5c4cf..465e941 100644 --- a/index.json +++ b/index.json @@ -29,6 +29,7 @@ "Form": "x-form", "Link": "x-link", "Modal": "x-modal", + "Script": "x-script", "State": "x-state", "Teleport": "x-teleport", "Toggle": "x-toggle", diff --git a/x-form.md b/x-form.md index da3c85a..7831b17 100644 --- a/x-form.md +++ b/x-form.md @@ -105,6 +105,26 @@ In addition, you may customize the confirmation dialog: > ``` +### Password Confirmation + +It's even possible to require the user to confirm their password within the confirmation dialog. First, you must register a supporting route using the `spladePasswordConfirmation()` method on the `Route` facade. As of version 1.2.2, the automatic installer does this for you. If you need to register the route manually, make sure it uses the `web` Middleware, for example, in `web.php`: + +```php +Route::spladePasswordConfirmation(); +``` + +Now you may add the `require-password` attribute: + +```blade + +``` + +Only when the password is correct it submits the form. Splade will add the entered password to the form data as a `password` field. This way, you may recheck the password *server-side* in the form target action. For security reasons, this is disabled for `GET` requests. You can change the field by passing a value to the `require-password` attribute: + +```blade + +``` + ## File uploads You may use the input event to bind the selected file to your form data: From 546bcc662dcc8a8dfa10e9a102c0f31a3930a5d6 Mon Sep 17 00:00:00 2001 From: Pascal Baljet Date: Mon, 23 Jan 2023 22:58:13 +0100 Subject: [PATCH 4/6] event bus --- event-bus.md | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++ index.json | 1 + 2 files changed, 68 insertions(+) create mode 100644 event-bus.md diff --git a/event-bus.md b/event-bus.md new file mode 100644 index 0000000..7717714 --- /dev/null +++ b/event-bus.md @@ -0,0 +1,67 @@ +# Event Bus + +Splade has a built-in **Event Bus** that allows for communication between components. Events can be emitted by one component, and listened for by another. + +## Emit from Vue component + +To emit an event, you may call the `emit` method, for example, in a [custom Vue component](/custom-vue-components.md), on the global `$splade` instance: + +```vue + +``` + +If you're using the `setup` attribute on a ` +``` + +Additionally, you may pass data along with the event: + +```js +Splade.emit('checkout', { id: 1 }); +``` + +## Emit on event + +It's also possible to call the `emit` method from another event. For example, the [Form Component](/x-form.md) emits `error` and `success` events that you can hook into: + +```blade + +``` + +## Listen for events + +You may register a listener by using the `on` method: + +```js +this.$splade.on('checkout-failed', function() { + // do something +}); +``` + +When the callback is rather simple, you may use a [Script Component](/x-script.md) to avoid writing a custom Vue component: + +```blade + + $splade.on('checkout-failed', function() { + // do something + }); + +``` \ No newline at end of file diff --git a/index.json b/index.json index 465e941..5c2be43 100644 --- a/index.json +++ b/index.json @@ -63,6 +63,7 @@ "Advanced": { "State management": "state-management", "Persistent layout": "persistent-layout", + "Event bus": "event-bus", "Customization": "customization", "Translations": "translations", "Exception handling": "exception-handling", From b3280b247fb97be0c915247ead4d3e1273721007 Mon Sep 17 00:00:00 2001 From: Pascal Baljet Date: Mon, 23 Jan 2023 23:10:25 +0100 Subject: [PATCH 5/6] Rehydrate --- index.json | 1 + x-rehydrate.md | 36 ++++++++++++++++++++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 x-rehydrate.md diff --git a/index.json b/index.json index 5c2be43..fdd3430 100644 --- a/index.json +++ b/index.json @@ -29,6 +29,7 @@ "Form": "x-form", "Link": "x-link", "Modal": "x-modal", + "Rehydrate": "x-rehydrate", "Script": "x-script", "State": "x-state", "Teleport": "x-teleport", diff --git a/x-rehydrate.md b/x-rehydrate.md new file mode 100644 index 0000000..4396f80 --- /dev/null +++ b/x-rehydrate.md @@ -0,0 +1,36 @@ +# X-Splade-Rehydrate Component + +The **Rehydrate Component** can reload a section of your Blade template. You may combine this component with the [Event Bus](/event-bus.md) to trigger the reload on certain events. + +To get started, wrap the section you want to be *reloadable* in the component. For example, imagine a list of team members: + +```blade +
    + @foreach($team->members as $member) +
  • {{ $member->name }}
    • + @endforeach +
+``` + +You may wrap the list and pass the name of the event to the `on` attribute: + +```blade + +
    + @foreach($team->members as $member) +
  • {{ $member->name }}
    • + @endforeach +
+ +``` + +If there's a form that stays on this page after a successful request, you may emit an event that reloads the list: + +```blade + + + + +``` + +Of course, when the form doesn't have the `stay` attribute and redirects back to the same page, it will reload the complete page, including the list, but you'll lose the state of other components on the page. This pattern can help avoid that. \ No newline at end of file From f3f024b79e26cd6aa69f29535d85ad73df2c3f9d Mon Sep 17 00:00:00 2001 From: Pascal Baljet Date: Mon, 23 Jan 2023 23:29:36 +0100 Subject: [PATCH 6/6] poll --- x-defer.md | 4 ++-- x-rehydrate.md | 12 +++++++++++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/x-defer.md b/x-defer.md index 4139346..4c5bc06 100644 --- a/x-defer.md +++ b/x-defer.md @@ -60,6 +60,6 @@ The component can watch a passed value for changes using the `watch-value` attri If you want to watch all form data, you may pass `form.$all` to the `watch-value` attribute. -## Async templates +## Async templates and Rehydration -If you want to load sections of your template asynchronously, check out the [Lazy Loading](/lazy-loading.md) section. \ No newline at end of file +If you want to load sections of your template asynchronously, check out the [Lazy Loading](/lazy-loading.md) section. There's also a [Rehydrate Component](/x-rehydrate.md) to reload a section of your Blade template. \ No newline at end of file diff --git a/x-rehydrate.md b/x-rehydrate.md index 4396f80..2ec12b3 100644 --- a/x-rehydrate.md +++ b/x-rehydrate.md @@ -33,4 +33,14 @@ If there's a form that stays on this page after a successful request, you may em ``` -Of course, when the form doesn't have the `stay` attribute and redirects back to the same page, it will reload the complete page, including the list, but you'll lose the state of other components on the page. This pattern can help avoid that. \ No newline at end of file +Of course, when the form doesn't have the `stay` attribute and redirects back to the same page, it will reload the complete page, including the list, but you'll lose the state of other components on the page. This pattern can help avoid that. + +## Poll + +You may also use this component to poll for new data. With the `poll` attribute, you can specify the interval in milliseconds. + +```blade + + Today's score: {{ $score }} + +``` \ No newline at end of file