1- <div class =" flex justify-center" >
2- <div
3- x-data =" {
1+ @if (count ($selectedRows ) )
2+ <div class =" flex justify-center" >
3+ <div
4+ x-data =" {
45 open: false,
56 toggle() {
67 if (this.open) {
1920 focusAfter && focusAfter.focus()
2021 }
2122 }"
22- x-on:keydown.escape.prevent.stop =" close($refs.button)"
23- x-on:focusin.window =" ! $refs.panel.contains($event.target) && close()"
24- x-id =" ['dropdown-button']"
25- class =" relative"
26- >
27- <!-- Button -->
28- <button
29- x-ref =" button"
30- x-on:click =" toggle()"
31- :aria-expanded =" open"
32- :aria-controls =" $id('dropdown-button')"
33- type =" button"
34- class =" flex items-center gap-2 bg-white text-gray-600 text-sm border border-gray-300 px-5 py-2.5 rounded-md shadow outline-none"
23+ x-on:keydown.escape.prevent.stop =" close($refs.button)"
24+ x-on:focusin.window =" ! $refs.panel.contains($event.target) && close()"
25+ x-id =" ['dropdown-button']"
26+ class =" relative"
3527 >
36- Actions
28+ <!-- Button -->
29+ <button
30+ x-ref =" button"
31+ x-on:click =" toggle()"
32+ :aria-expanded =" open"
33+ :aria-controls =" $id('dropdown-button')"
34+ type =" button"
35+ class =" flex items-center gap-2 bg-white text-gray-600 text-sm border border-gray-300 px-5 py-2.5 rounded-md shadow outline-none"
36+ >
37+ Actions
3738
38- <!-- Heroicon: chevron-down -->
39- <svg xmlns =" http://www.w3.org/2000/svg" class =" h-5 w-5 text-gray-400" viewBox =" 0 0 20 20"
40- fill =" currentColor" >
41- <path fill-rule =" evenodd"
42- d =" M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
43- clip-rule =" evenodd" />
44- </svg >
45- </button >
39+ <!-- Heroicon: chevron-down -->
40+ <svg xmlns =" http://www.w3.org/2000/svg" class =" h-5 w-5 text-gray-400" viewBox =" 0 0 20 20"
41+ fill =" currentColor" >
42+ <path fill-rule =" evenodd"
43+ d =" M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
44+ clip-rule =" evenodd" />
45+ </svg >
46+ </button >
4647
47- <!-- Panel -->
48- <div
49- wire:model.live.debounce.500ms =" updatePanel"
50- wire:key =" panel"
51- x-ref =" panel"
52- x-show =" open"
53- x-transition.origin.top.left
54- x-on:click.outside =" close($refs.button)"
55- :id =" $id('dropdown-button')"
56- style =" display : none ;"
57- class =" absolute right-0 mt-2 py-2 w-40 rounded-md bg-white shadow-md z-50"
58- >
59- <div class =" space-y-2" >
60- @foreach ($this -> actions () as $action )
61- @if ($action -> isStandalone () )
62- <button
63- wire:click =" executeAction('{{ $action -> key () } } ')"
64- wire:key =" action-{{ $action -> key () } }"
65- @click =" close($refs.button)"
66- type =" button"
67- class =" flex items-center gap-1 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-1 text-left text-sm hover:bg-gray-50 disabled:text-gray-400 cursor-pointer disabled:cursor-not-allowed"
68- >
69- {{ $action -> label () } }
70- </button >
71- @else
72- <button
73- :disabled =" {{ $selectedRows && ! count ($selectedRows ) } }"
74- wire:click =" executeAction('{{ $action -> key () } } ')"
75- wire:key =" action-{{ $action -> key () } }"
76- @click =" close($refs.button)"
77- type =" button"
78- class =" flex items-center gap-1 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-1 text-left text-sm hover:bg-gray-50 disabled:text-gray-400 cursor-pointer disabled:cursor-not-allowed"
79- >
80- {{ $action -> label () } }
81- </button >
82- @endif
83- @endforeach
84- </div >
48+ <!-- Panel -->
49+ <div
50+ wire:ignore
51+ wire:key =" panel-{{ count ($selectedRows ) } }"
52+ x-ref =" panel"
53+ x-show =" open"
54+ x-cloak
55+ x-transition.origin.top.left
56+ x-on:click.outside =" close($refs.button)"
57+ :id =" $id('dropdown-button')"
58+ class =" absolute right-0 mt-2 py-2 w-40 rounded-md bg-white shadow-md z-50"
59+ >
60+ <div class =" space-y-2" >
61+ @foreach ($this -> actions () as $action )
62+ @if ($action -> isStandalone () )
63+ <button
64+ wire:click =" executeAction('{{ $action -> key () } } ')"
65+ wire:key =" action-{{ $action -> key () } }"
66+ @click =" close($refs.button)"
67+ type =" button"
68+ class =" flex items-center gap-1 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-1 text-left text-sm hover:bg-gray-50 disabled:text-gray-400 cursor-pointer disabled:cursor-not-allowed"
69+ >
70+ {{ $action -> label () } }
71+ </button >
72+ @else
73+ <button
74+ wire:click =" executeAction('{{ $action -> key () } } ')"
75+ wire:key =" action-{{ $action -> key () } }"
76+ @click =" close($refs.button)"
77+ type =" button"
78+ class =" flex items-center gap-1 w-full first-of-type:rounded-t-md last-of-type:rounded-b-md px-4 py-1 text-left text-sm hover:bg-gray-50 disabled:text-gray-400 cursor-pointer disabled:cursor-not-allowed"
79+ >
80+ {{ $action -> label () } }
81+ </button >
82+ @endif
83+ @endforeach
84+ </div >
8585
86+ </div >
8687 </div >
8788 </div >
88- </ div >
89+ @endif
0 commit comments