feat: QueryTag with button

src/Laravel/src/Pages/Crud/IndexPage.php

@@ -4,11 +4,9 @@
 
 namespace MoonShine\Laravel\Pages\Crud;
 
-use MoonShine\Contracts\UI\ActionButtonContract;
 use MoonShine\Contracts\UI\ComponentContract;
 use MoonShine\Contracts\UI\TableBuilderContract;
 use MoonShine\Core\Exceptions\ResourceException;
-use MoonShine\Laravel\Buttons\QueryTagButton;
 use MoonShine\Laravel\Collections\Fields;
 use MoonShine\Laravel\Components\Fragment;
 use MoonShine\Laravel\Contracts\Resource\HasQueryTagsContract;
@@ -156,10 +154,7 @@ protected function getQueryTags(): array
                 static function (ActionGroup $group) use ($resource): ActionGroup {
                     foreach ($resource->getQueryTags() as $tag) {
                         $group->add(
-                            QueryTagButton::for($resource, $tag)->when(
-                                $resource->isQueryTagsInDropdown(),
-                                fn (ActionButtonContract $btn): ActionButtonContract => $btn->showInDropdown()
-                            )
+                            $tag->getButton($resource)
                         );
                     }
 

src/Laravel/src/QueryTags/QueryTag.php

@@ -8,10 +8,14 @@
 use Illuminate\Contracts\Database\Eloquent\Builder;
 use MoonShine\Contracts\Core\HasCanSeeContract;
 use MoonShine\Contracts\Core\HasCoreContract;
+use MoonShine\Contracts\UI\ActionButtonContract;
 use MoonShine\Contracts\UI\HasIconContract;
 use MoonShine\Contracts\UI\HasLabelContract;
 use MoonShine\Core\Traits\WithCore;
+use MoonShine\Laravel\Resources\CrudResource;
+use MoonShine\Support\AlpineJs;
 use MoonShine\Support\Traits\Makeable;
+use MoonShine\UI\Components\ActionButton;
 use MoonShine\UI\Traits\HasCanSee;
 use MoonShine\UI\Traits\WithIcon;
 use MoonShine\UI\Traits\WithLabel;
@@ -31,6 +35,10 @@ final class QueryTag implements HasCanSeeContract, HasIconContract, HasLabelCont
 
     protected ?string $alias = null;
 
+    protected array $events = [];
+
+    protected ?Closure $modifyButton = null;
+
     public function __construct(
         Closure|string $label,
         /** @var Closure(Builder): Builder $builder */
@@ -80,4 +88,67 @@ public function apply(Builder $builder): Builder
     {
         return \call_user_func($this->builder, $builder);
     }
+
+    public function events(array $events): self
+    {
+        $this->events = $events;
+
+        return $this;
+    }
+
+    /**
+     * @param  Closure(ActionButtonContract $btn, self $ctx): ActionButtonContract  $callback
+     *
+     */
+    public function modifyButton(Closure $callback): self
+    {
+        $this->modifyButton = $callback;
+
+        return $this;
+    }
+
+    public function getButton(CrudResource $resource): ActionButtonContract
+    {
+        return ActionButton::make(
+            $this->getLabel(),
+            $resource->getIndexPageUrl(['query-tag' => $this->getUri()])
+        )
+            ->name("query-tag-{$this->getUri()}-button")
+            ->showInLine()
+            ->icon($this->getIconValue(), $this->isCustomIcon(), $this->getIconPath())
+            ->canSee(fn (mixed $data): bool => $this->isSee())
+            ->class('js-query-tag-button')
+            ->xDataMethod('queryTag', 'btn-primary', $resource->getListEventName())
+            ->when(
+                $this->isActive(),
+                static fn (ActionButtonContract $btn): ActionButtonContract => $btn
+                    ->primary()
+                    ->customAttributes([
+                        'href' => $resource->getIndexPageUrl(),
+                    ])
+            )
+            ->when(
+                $resource->isAsync(),
+                fn (ActionButtonContract $btn): ActionButtonContract => $btn
+                    ->onClick(
+                        fn ($action): string => "request(`{$this->getUri()}`)",
+                        'prevent'
+                    )
+            )
+            ->when(
+                $this->isDefault(),
+                static fn (ActionButtonContract $btn): ActionButtonContract => $btn->class('js-query-tag-default')
+            )->when(
+                $resource->isQueryTagsInDropdown(),
+                fn (ActionButtonContract $btn): ActionButtonContract => $btn->showInDropdown()
+            )->when(
+                ! \is_null($this->modifyButton),
+                fn (ActionButtonContract $btn): ActionButtonContract => \call_user_func($this->modifyButton, $btn, $this)
+            )->when(
+                $this->events !== [],
+                fn (ActionButtonContract $btn): ActionButtonContract => $btn->customAttributes([
+                    'data-async-events' => AlpineJs::prepareEvents(events: $this->events),
+                ])
+            );
+    }
 }

src/UI/resources/js/Components/QueryTag.js

@@ -16,6 +16,7 @@ export default (activeClass, componentEvent) => ({
 
     this.$dispatch(componentEvent.toLowerCase(), {
       queryTag: prepareQueryParams(queryParams, '_component_name,_token,_method,page').toString(),
+      events: this.$el.dataset.asyncEvents,
     })
   },
   disableQueryTags() {

src/UI/resources/js/Request/Sets.js

@@ -36,6 +36,13 @@ export function listComponentRequest(component, pushState = false) {
     delete eventData.sort
   }
 
+  let events = ''
+
+  if (eventData && eventData.events) {
+    events = eventData.events
+    delete eventData.events
+  }
+
   const originalUrl = url
 
   url = urlWithQuery(url, getQueryString(eventData))
@@ -85,6 +92,7 @@ export function listComponentRequest(component, pushState = false) {
       t.$root.outerHTML = tempElement.firstElementChild.innerHTML
       t.loading = false
     })
+    .withEvents(events)
     .withErrorCallback(stopLoading)
 
   request(component, url, 'get', {}, {}, componentRequestData)

src/UI/resources/js/Support/DispatchEvents.js

@@ -33,7 +33,14 @@ export function dispatchEvents(events, type, component, extraProperties = {}) {
       }
 
       setTimeout(function () {
-        component.$dispatch(eventName.replaceAll(/\s/g, '').toLowerCase(), attributes)
+        dispatchEvent(
+          new CustomEvent(eventName.replaceAll(/\s/g, '').toLowerCase(), {
+            attributes,
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+          }),
+        )
       }, attributes['_delay'] ?? 0)
     })
   }