rework actions

public/build/manifest.json

@@ -1,66 +1,66 @@
 {
   "resources/js/app.css": {
-    "file": "assets/app-fb8b24a7.css",
+    "file": "assets/app-4030c9ab.css",
     "src": "resources/js/app.css"
   },
   "resources/js/app.js": {
     "css": [
-      "assets/app-fb8b24a7.css"
+      "assets/app-4030c9ab.css"
     ],
-    "file": "assets/app-6d773f58.js",
+    "file": "assets/app-20fdddf7.js",
     "isEntry": true,
     "src": "resources/js/app.js"
   },
   "resources/js/chart.js": {
-    "file": "assets/chart-4ef727ae.js",
+    "file": "assets/chart-497a6d74.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/chart.js"
   },
   "resources/js/dropdown.js": {
-    "file": "assets/dropdown-4ef727ae.js",
+    "file": "assets/dropdown-497a6d74.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/dropdown.js"
   },
   "resources/js/editor.js": {
-    "file": "assets/editor-4ef727ae.js",
+    "file": "assets/editor-497a6d74.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/editor.js"
   },
   "resources/js/media-manager.js": {
-    "file": "assets/media-manager-4ef727ae.js",
+    "file": "assets/media-manager-497a6d74.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/media-manager.js"
   },
   "resources/js/repeater.js": {
-    "file": "assets/repeater-4ef727ae.js",
+    "file": "assets/repeater-497a6d74.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/repeater.js"
   },
   "resources/js/table.js": {
-    "file": "assets/table-4ef727ae.js",
+    "file": "assets/table-497a6d74.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/table.js"
   },
   "resources/sass/app.scss": {
-    "file": "assets/app-32075e44.js",
+    "file": "assets/app-50111dd3.js",
     "imports": [
       "resources/js/app.js"
     ],

resources/sass/component/_context-menu.scss

@@ -9,12 +9,10 @@
   background-color: color('background');
   border: 1px solid color('border');
   border-radius: config('border-radius-sm', $display);
-  box-shadow: 0 0 spacer('xxs') hsl(201deg 72% 32% / 5%);
+  box-shadow: 0 0 spacer('xxs') hsl(200deg 72% 33% / 5%);
+  font-size: 0.938rem;
   inline-size: var(--inline-size);
-  opacity: 0;
   position: absolute;
-  scale: 0.85;
-  visibility: hidden;
   z-index: 10;
 
   &--inline-start {
@@ -25,12 +23,6 @@
     inset: var(--inset-block-start) 0 auto auto;
   }
 
-  &[data-state='open'] {
-    opacity: 1;
-    scale: 1;
-    visibility: visible;
-  }
-
   > li {
     display: flex;
     flex-direction: column;

resources/views/actions/actions.blade.php

@@ -0,0 +1,24 @@
+<div class="btn-dropdown" x-data="{ open: false }" x-on:click.outside="open = false">
+    <button
+        @class(['btn', 'btn--outline-primary', 'btn--icon', $class ?? null])
+        x-bind:aria-expanded="open"
+        x-on:click="open = ! open"
+    >
+        {{ __('Actions') }}
+        <x-root::icon name="chevron-down" class="btn__icon" />
+    </button>
+    <ul x-cloak x-show="open" x-transition class="context-menu context-menu--inline-start">
+        @foreach($actions as $action)
+            <li>
+                <button
+                    type="button"
+                    class="context-menu__item"
+                    x-on:click="$dispatch('open-{{ $action['modalKey'] }}')"
+                >
+                    {{ $action['name'] }}
+                </button>
+                @include($action['template'], $action)
+            </li>
+        @endforeach
+    </ul>
+</div>

resources/views/components/layout/header.blade.php

@@ -28,7 +28,7 @@ class="btn btn--outline-dark btn--sm btn--icon display--none:md"
                 <button type="button" class="user-menu__toggle" x-bind:aria-expanded="open" x-on:click="open = ! open">
                     <x-root::icon name="chevron-down" class="open-search__icon" />
                 </button>
-                <ul class="context-menu" x-bind:data-state="open ? 'open': 'closed'">
+                <ul x-cloak x-show="open" x-transition class="context-menu context-menu--inline-start">
                     <li>
                         <span class="context-menu__item">
                             {{ __('Theme') }} <x-root::layout.theme />

resources/views/icons/more.php

@@ -0,0 +1,16 @@
+<svg
+    aria-hidden="true"
+    fill="none"
+    focusable="false"
+    height="24"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+    {{ $attributes }}
+>
+    <circle cx="12" cy="12" r="1"></circle><circle cx="19" cy="12" r="1"></circle><circle cx="5" cy="12" r="1"></circle>
+</svg>

resources/views/resources/show.blade.php

@@ -5,6 +5,19 @@
 
 {{-- Actions --}}
 @section('actions')
+    @if(! empty($actions))
+        @include('root::actions.actions')
+    @endif
+    @if($abilities['delete'])
+        <form method="POST" action="{{ $action }}" onsubmit="return window.confirm('{{ __('Are you sure?') }}');">
+            @csrf
+            @method('DELETE')
+            <button type="submit" class="btn btn--delete btn--icon">
+                <x-root::icon name="trash" class="btn__icon" />
+                {{ __('Delete') }}
+            </button>
+        </form>
+    @endif
     @if($abilities['update'])
         <a href="{{ $action }}/edit" class="btn btn--primary btn--icon">
             <x-root::icon name="edit" class="btn__icon" />

resources/views/table/actions.blade.php

@@ -25,25 +25,8 @@ class="btn btn--primary btn--sm"
                 {{ __('Clear') }}
             </button>
         </div>
-        <form class="data-table-alert__column" autocomplete="off">
-            <div class="form-group--stacked">
-                <select x-ref="actions" class="form-control form-control--sm" aria-label="{{ __('Actions') }}">
-                    <option value="" disabled selected>{{ __('Select Action') }}</option>
-                    @foreach($actions as $action)
-                        <option value="{{ $action['modalKey'] }}">{{ $action['name'] }}</option>
-                    @endforeach
-                </select>
-                <button
-                    type="button"
-                    class="btn btn--primary btn--sm"
-                    x-on:click="$dispatch('open-'+$refs.actions.value)"
-                >
-                    {{ __('Run') }}
-                </button>
-            </div>
-            @foreach($actions as $action)
-                @include($action['template'], $action)
-            @endforeach
-        </form>
+        <div class="data-table-alert__column">
+            @include('root::actions.actions', ['class' => 'btn--sm'])
+        </div>
     </div>
 </div>

resources/views/table/filters.blade.php

@@ -12,7 +12,7 @@ class="btn btn--light btn--icon btn--counter data-table-filter__toggle"
                     <span class="btn__counter">{{ $activeFilters }}</span>
                 @endif
             </button>
-            <div class="context-menu context-menu--inline-end" x-bind:class="{ 'is-open': open }">
+            <div x-cloak x-show="open" x-transition class="context-menu context-menu--inline-end">
                 <div class="form-group-stack form-group-stack--bordered form-group-container">
                     @foreach($filters as $filter)
                         @include($filter['template'], $filter)