fix: dispatchEvent

src/UI/resources/js/Components/ActionButton.js

@@ -31,7 +31,18 @@ export default () => ({
 
   dispatchEvents(componentEvent, exclude = null, extra = {}) {
     const url = new URL(this.$el.href)
-    extra['_data'] = Object.fromEntries(new URLSearchParams(url.search))
+
+    let params = new URLSearchParams(url.search)
+
+    if (exclude !== null) {
+      const excludes = exclude.split(',')
+
+      excludes.forEach(function (excludeName) {
+        params.delete(excludeName)
+      })
+    }
+
+    extra['_data'] = exclude === '*' ? {} : Object.fromEntries(params)
 
     de(componentEvent, '', this, extra)
   },

src/UI/resources/js/Components/FormBuilder.js

@@ -1,5 +1,11 @@
 import {ComponentRequestData} from '../DTOs/ComponentRequestData.js'
-import {addInvalidListener, containsAttribute, isTextInput} from '../Support/Forms.js'
+import {
+  addInvalidListener,
+  containsAttribute,
+  isTextInput,
+  prepareFormData,
+  prepareFormQueryString,
+} from '../Support/Forms.js'
 import request, {afterResponse, initCallback} from '../Request/Core.js'
 import {dispatchEvents as de} from '../Support/DispatchEvents.js'
 import {getInputs, showWhenChange, showWhenVisibilityChange} from '../Support/ShowWhen.js'
@@ -236,7 +242,9 @@ export default (name = '', initData = {}, reactive = {}) => ({
   },
 
   dispatchEvents(componentEvent, exclude = null, extra = {}) {
-    extra['_data'] = formToJSON(new FormData(this.$el))
+    extra['_data'] = exclude === '*' ? {} : formToJSON(
+      prepareFormData(new FormData(this.$el), exclude)
+    )
 
     de(componentEvent, '', this, extra)
   },
@@ -293,27 +301,6 @@ export default (name = '', initData = {}, reactive = {}) => ({
   getInputs,
 })
 
-function prepareFormQueryString(formData, exclude = null) {
-  const maxLength = 50
-  const filtered = new FormData()
-
-  for (const [key, value] of formData) {
-    if (value.length <= maxLength) {
-      filtered.append(key, value)
-    }
-  }
-
-  if (exclude !== null) {
-    const excludes = exclude.split(',')
-
-    excludes.forEach(function (excludeName) {
-      filtered.delete(excludeName)
-    })
-  }
-
-  return new URLSearchParams(filtered).toString()
-}
-
 function submitState(form, loading = true, reset = false) {
   if (!loading) {
     form.querySelector('.js-form-submit-button-loader').style.display = 'none'

src/UI/resources/js/Components/Select.js

@@ -1,7 +1,7 @@
 import Choices from 'choices.js'
 import {createPopper} from '@popperjs/core'
 import debounce from '../Support/Debounce.js'
-import {crudFormQuery} from '../Support/Forms.js'
+import {crudFormQuery, prepareFormData} from '../Support/Forms.js'
 import {dispatchEvents as de} from '../Support/DispatchEvents.js'
 import {formToJSON} from 'axios'
 
@@ -327,7 +327,12 @@ export default (asyncUrl = '') => ({
   },
   dispatchEvents(componentEvent, exclude = null, extra = {}) {
     const form = this.$el.closest('form')
-    extra['_data'] = form ? formToJSON(form) : {value: this.$el.value}
+
+    if(exclude !== '*') {
+      extra['_data'] = form ? formToJSON(
+        prepareFormData(new FormData(form), exclude)
+      ) : {value: this.$el.value}
+    }
 
     de(componentEvent, '', this, extra)
   },

src/UI/resources/js/Services/UI.js

@@ -11,6 +11,10 @@ export class UI {
   }
 
   toggleModal(name) {
-    dispatchEvent(new CustomEvent(`modal_toggled-${name}`))
+    dispatchEvent(new CustomEvent(`modal_toggled:${name}`))
+  }
+
+  toggleOffCanvas(name) {
+    dispatchEvent(new CustomEvent(`off_canvas_toggled:${name}`))
   }
 }

src/UI/resources/js/Support/Forms.js

@@ -129,3 +129,42 @@ export function crudFormQuery(formElements = null) {
     .map(x => `${encodeURIComponent(x[0])}=${encodeURIComponent(x[1])}`)
     .join('&')
 }
+
+export function prepareFormData(formData, exclude = null) {
+  const maxLength = 50, filtered = new FormData()
+  for (const [key, value] of formData) {
+    if (value.length <= maxLength) {
+      filtered.append(key, value)
+    }
+  }
+
+  if (exclude !== null) {
+    const excludes = exclude.split(',')
+
+    excludes.forEach(function (excludeName) {
+      filtered.delete(excludeName)
+    })
+  }
+
+  return filtered
+}
+
+export function prepareFormQueryString(formData, exclude = null) {
+  const maxLength = 50, filtered = new FormData()
+
+  for (const [key, value] of formData) {
+    if (value.length <= maxLength) {
+      filtered.append(key, value)
+    }
+  }
+
+  if (exclude !== null) {
+    const excludes = exclude.split(',')
+
+    excludes.forEach(function (excludeName) {
+      filtered.delete(excludeName)
+    })
+  }
+
+  return new URLSearchParams(filtered).toString()
+}

src/UI/src/Components/ActionButton.php

@@ -172,16 +172,23 @@ public function onClick(Closure $onClick, ?string $modifier = null): static
         return $this;
     }
 
-    public function dispatchEvent(array|string $events): static
+    public function dispatchEvent(array|string $events, array $exclude = [], bool $withoutPayload = false): static
     {
         if (! $this->getAttributes()->has('x-data')) {
             $this->xDataMethod('actionButton');
         }
 
+        $excludes = $withoutPayload ? '*' : implode(',', [
+            ...$exclude,
+            '_component_name',
+            '_token',
+            '_method'
+        ]);
+
         return $this->onClick(
             static fn (): string => "dispatchEvents(
                  `" . AlpineJs::prepareEvents($events) . "`,
-                 `_component_name,_token,_method`
+                 `$excludes`
              )",
             'prevent'
         );

src/UI/src/Components/FormBuilder.php

@@ -245,12 +245,19 @@ public function getMethod(): FormMethod
         return $this->method;
     }
 
-    public function dispatchEvent(array|string $events): self
+    public function dispatchEvent(array|string $events, array $exclude = [], bool $withoutPayload = false): self
     {
+        $excludes = $withoutPayload ? '*' : implode(',', [
+            ...$exclude,
+            '_component_name',
+            '_token',
+            '_method'
+        ]);
+
         return $this->customAttributes([
             '@submit.prevent' => "dispatchEvents(
                 `" . AlpineJs::prepareEvents($events) . "`,
-                `_component_name,_token,_method`
+                `$excludes`
             )",
         ]);
     }

src/UI/src/Fields/Select.php

@@ -86,12 +86,19 @@ public function asyncOnInit(): static
         return $this->customAttributes(['data-async-on-init' => true]);
     }
 
-    public function onChangeEvent(array|string $events): static
+    public function onChangeEvent(array|string $events, array $exclude = [], bool $withoutPayload = false): static
     {
+        $excludes = $withoutPayload ? '*' : implode(',', [
+            ...$exclude,
+            '_component_name',
+            '_token',
+            '_method'
+        ]);
+
         return $this->customAttributes([
             '@change' => "dispatchEvents(
                  `" . AlpineJs::prepareEvents($events) . "`,
-                 `_component_name,_token,_method`
+                 `$excludes`
              )",
         ]);
     }