Skip to content

Commit 8d84a8d

Browse files
ahmadrivaldi-arvahmadrivaldi-arv
committed
Fix rappasoft#2264 dropdown menu width for Bootstrap styles in column select /bulk action component
1 parent 74beb4c commit 8d84a8d

File tree

2 files changed

+130
-129
lines changed

2 files changed

+130
-129
lines changed

‎resources/views/components/tools/toolbar/items/bulk-actions.blade.php

Lines changed: 128 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,128 @@
1-
@aware([ 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5', 'localisationPath'])
2-
<div
3-
x-data="{ open: false, childElementOpen: false, isTailwind: @js($isTailwind), isBootstrap: @js($isBootstrap) }"
4-
x-cloak x-show="(selectedItems.length > 0 || hideBulkActionsWhenEmpty == false)"
5-
@class([
6-
'mb-3 mb-md-0' => $isBootstrap,
7-
'w-full md:w-auto mb-4 md:mb-0' => $isTailwind,
8-
])
9-
>
10-
<div @class([
11-
'dropdown d-block d-md-inline' => $isBootstrap,
12-
'relative inline-block text-left z-10 w-full md:w-auto' => $isTailwind,
13-
])
14-
>
15-
<button
16-
{{
17-
$attributes->merge($this->getBulkActionsButtonAttributes)
18-
->class([
19-
'btn dropdown-toggle d-block d-md-inline' => $isBootstrap && ($this->getBulkActionsButtonAttributes['default-styling'] ?? true),
20-
'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $isTailwind && ($this->getBulkActionsButtonAttributes['default-colors'] ?? true),
21-
'inline-flex justify-center w-full rounded-md border shadow-sm px-4 py-2 text-sm font-medium focus:ring focus:ring-opacity-50' => $isTailwind && ($this->getBulkActionsButtonAttributes['default-styling'] ?? true),
22-
23-
])
24-
->except(['default','default-styling','default-colors'])
25-
}}
26-
type="button"
27-
id="{{ $tableName }}-bulkActionsDropdown"
28-
29-
30-
@if($isTailwind)
31-
x-on:click="open = !open"
32-
@else
33-
data-toggle="dropdown" data-bs-toggle="dropdown"
34-
@endif
35-
aria-haspopup="true" aria-expanded="false">
36-
37-
{{ __($localisationPath.'Bulk Actions') }}
38-
39-
@if($isTailwind)
40-
<x-heroicon-m-chevron-down class="-mr-1 ml-2 h-5 w-5" />
41-
@endif
42-
</button>
43-
44-
@if($isTailwind)
45-
<div
46-
x-on:click.away="if (!childElementOpen) { open = false }"
47-
@keydown.window.escape="if (!childElementOpen) { open = false }"
48-
x-cloak x-show="open"
49-
x-transition:enter="transition ease-out duration-100"
50-
x-transition:enter-start="transform opacity-0 scale-95"
51-
x-transition:enter-end="transform opacity-100 scale-100"
52-
x-transition:leave="transition ease-in duration-75"
53-
x-transition:leave-start="transform opacity-100 scale-100"
54-
x-transition:leave-end="transform opacity-0 scale-95"
55-
class="origin-top-right absolute right-0 mt-2 w-full md:w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50"
56-
>
57-
<div
58-
{{
59-
$attributes->merge($this->getBulkActionsMenuAttributes)
60-
->class([
61-
'bg-white dark:bg-gray-700 dark:text-white' => $isTailwind && ($this->getBulkActionsMenuAttributes['default-colors'] ?? true),
62-
'rounded-md shadow-xs' => $isTailwind && ($this->getBulkActionsMenuAttributes['default-styling'] ?? true),
63-
])
64-
->except(['default','default-styling','default-colors'])
65-
}}
66-
>
67-
<div class="py-1" role="menu" aria-orientation="vertical">
68-
@foreach ($this->getBulkActions() as $action => $title)
69-
<button
70-
wire:click="{{ $action }}"
71-
@if($this->hasConfirmationMessage($action))
72-
wire:confirm="{{ $this->getBulkActionConfirmMessage($action) }}"
73-
@endif
74-
wire:key="{{ $tableName }}-bulk-action-{{ $action }}"
75-
type="button"
76-
role="menuitem"
77-
{{
78-
$attributes->merge($this->getBulkActionsMenuItemAttributes)
79-
->class([
80-
'text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 dark:text-white dark:hover:bg-gray-600' => $isTailwind && ($this->getBulkActionsMenuItemAttributes['default-colors'] ?? true),
81-
'block w-full px-4 py-2 text-sm leading-5 focus:outline-none flex items-center space-x-2' => $isTailwind && ($this->getBulkActionsMenuItemAttributes['default-styling'] ?? true),
82-
])
83-
->except(['default','default-styling','default-colors'])
84-
}}
85-
>
86-
<span>{{ $title }}</span>
87-
</button>
88-
@endforeach
89-
</div>
90-
</div>
91-
</div>
92-
@else
93-
<div
94-
{{
95-
$attributes->merge($this->getBulkActionsMenuAttributes)
96-
->class([
97-
'dropdown-menu dropdown-menu-right w-100' => $isBootstrap4 && ($this->getBulkActionsMenuAttributes['default-styling'] ?? true),
98-
'dropdown-menu dropdown-menu-end w-100' => $isBootstrap5 && ($this->getBulkActionsMenuAttributes['default-styling'] ?? true),
99-
])
100-
->except(['default','default-styling','default-colors'])
101-
}}
102-
aria-labelledby="{{ $tableName }}-bulkActionsDropdown"
103-
>
104-
@foreach ($this->getBulkActions() as $action => $title)
105-
<a
106-
href="#"
107-
@if($this->hasConfirmationMessage($action))
108-
wire:confirm="{{ $this->getBulkActionConfirmMessage($action) }}"
109-
@endif
110-
wire:click="{{ $action }}"
111-
wire:key="{{ $tableName }}-bulk-action-{{ $action }}"
112-
{{
113-
$attributes->merge($this->getBulkActionsMenuItemAttributes)
114-
->class([
115-
'dropdown-item' => $isBootstrap && ($this->getBulkActionsMenuItemAttributes['default-styling'] ?? true),
116-
])
117-
->except(['default','default-styling','default-colors'])
118-
}}
119-
>
120-
{{ $title }}
121-
</a>
122-
@endforeach
123-
</div>
124-
@endif
125-
126-
</div>
127-
</div>
1+
@aware([ 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5', 'localisationPath'])
2+
<div
3+
x-data="{ open: false, childElementOpen: false, isTailwind: @js($isTailwind), isBootstrap: @js($isBootstrap) }"
4+
x-cloak x-show="(selectedItems.length > 0 || hideBulkActionsWhenEmpty == false)"
5+
@class([
6+
'mb-3 mb-md-0' => $isBootstrap,
7+
'w-full md:w-auto mb-4 md:mb-0' => $isTailwind,
8+
])
9+
>
10+
<div @class([
11+
'dropdown d-block d-md-inline' => $isBootstrap,
12+
'relative inline-block text-left z-10 w-full md:w-auto' => $isTailwind,
13+
])
14+
>
15+
<button
16+
{{
17+
$attributes->merge($this->getBulkActionsButtonAttributes)
18+
->class([
19+
'btn dropdown-toggle d-block d-md-inline' => $isBootstrap && ($this->getBulkActionsButtonAttributes['default-styling'] ?? true),
20+
'border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600' => $isTailwind && ($this->getBulkActionsButtonAttributes['default-colors'] ?? true),
21+
'inline-flex justify-center w-full rounded-md border shadow-sm px-4 py-2 text-sm font-medium focus:ring focus:ring-opacity-50' => $isTailwind && ($this->getBulkActionsButtonAttributes['default-styling'] ?? true),
22+
23+
])
24+
->except(['default','default-styling','default-colors'])
25+
}}
26+
type="button"
27+
id="{{ $tableName }}-bulkActionsDropdown"
28+
29+
30+
@if($isTailwind)
31+
x-on:click="open = !open"
32+
@else
33+
data-toggle="dropdown" data-bs-toggle="dropdown"
34+
@endif
35+
aria-haspopup="true" aria-expanded="false">
36+
37+
{{ __($localisationPath.'Bulk Actions') }}
38+
39+
@if($isTailwind)
40+
<x-heroicon-m-chevron-down class="-mr-1 ml-2 h-5 w-5" />
41+
@endif
42+
</button>
43+
44+
@if($isTailwind)
45+
<div
46+
x-on:click.away="if (!childElementOpen) { open = false }"
47+
@keydown.window.escape="if (!childElementOpen) { open = false }"
48+
x-cloak x-show="open"
49+
x-transition:enter="transition ease-out duration-100"
50+
x-transition:enter-start="transform opacity-0 scale-95"
51+
x-transition:enter-end="transform opacity-100 scale-100"
52+
x-transition:leave="transition ease-in duration-75"
53+
x-transition:leave-start="transform opacity-100 scale-100"
54+
x-transition:leave-end="transform opacity-0 scale-95"
55+
class="origin-top-right absolute right-0 mt-2 w-full md:w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-50"
56+
>
57+
<div
58+
{{
59+
$attributes->merge($this->getBulkActionsMenuAttributes)
60+
->class([
61+
'bg-white dark:bg-gray-700 dark:text-white' => $isTailwind && ($this->getBulkActionsMenuAttributes['default-colors'] ?? true),
62+
'rounded-md shadow-xs' => $isTailwind && ($this->getBulkActionsMenuAttributes['default-styling'] ?? true),
63+
])
64+
->except(['default','default-styling','default-colors'])
65+
}}
66+
>
67+
<div class="py-1" role="menu" aria-orientation="vertical">
68+
@foreach ($this->getBulkActions() as $action => $title)
69+
<button
70+
wire:click="{{ $action }}"
71+
@if($this->hasConfirmationMessage($action))
72+
wire:confirm="{{ $this->getBulkActionConfirmMessage($action) }}"
73+
@endif
74+
wire:key="{{ $tableName }}-bulk-action-{{ $action }}"
75+
type="button"
76+
role="menuitem"
77+
{{
78+
$attributes->merge($this->getBulkActionsMenuItemAttributes)
79+
->class([
80+
'text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 dark:text-white dark:hover:bg-gray-600' => $isTailwind && ($this->getBulkActionsMenuItemAttributes['default-colors'] ?? true),
81+
'block w-full px-4 py-2 text-sm leading-5 focus:outline-none flex items-center space-x-2' => $isTailwind && ($this->getBulkActionsMenuItemAttributes['default-styling'] ?? true),
82+
])
83+
->except(['default','default-styling','default-colors'])
84+
}}
85+
>
86+
<span>{{ $title }}</span>
87+
</button>
88+
@endforeach
89+
</div>
90+
</div>
91+
</div>
92+
@else
93+
94+
<div
95+
{{
96+
$attributes->merge($this->getBulkActionsMenuAttributes)
97+
->class([
98+
'dropdown-menu dropdown-menu-right w-auto' => $isBootstrap4 && ($this->getBulkActionsMenuAttributes['default-styling'] ?? true),
99+
'dropdown-menu dropdown-menu-end w-auto' => $isBootstrap5 && ($this->getBulkActionsMenuAttributes['default-styling'] ?? true),
100+
])
101+
->except(['default','default-styling','default-colors'])
102+
}}
103+
aria-labelledby="{{ $tableName }}-bulkActionsDropdown"
104+
>
105+
@foreach ($this->getBulkActions() as $action => $title)
106+
<a
107+
href="#"
108+
@if($this->hasConfirmationMessage($action))
109+
wire:confirm="{{ $this->getBulkActionConfirmMessage($action) }}"
110+
@endif
111+
wire:click="{{ $action }}"
112+
wire:key="{{ $tableName }}-bulk-action-{{ $action }}"
113+
{{
114+
$attributes->merge($this->getBulkActionsMenuItemAttributes)
115+
->class([
116+
'dropdown-item' => $isBootstrap && ($this->getBulkActionsMenuItemAttributes['default-styling'] ?? true),
117+
])
118+
->except(['default','default-styling','default-colors'])
119+
}}
120+
>
121+
{{ $title }}
122+
</a>
123+
@endforeach
124+
</div>
125+
@endif
126+
127+
</div>
128+
</div>

‎resources/views/components/tools/toolbar/items/column-select.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,8 +135,8 @@ class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wa
135135
<div
136136
x-bind:class="{ 'show': open }"
137137
@class([
138-
'dropdown-menu dropdown-menu-right w-100 mt-0 mt-md-3' => $isBootstrap4,
139-
'dropdown-menu dropdown-menu-end w-100' => $isBootstrap5,
138+
'dropdown-menu dropdown-menu-right w-auto mt-0 mt-md-3' => $isBootstrap4,
139+
'dropdown-menu dropdown-menu-end w-auto' => $isBootstrap5,
140140
])
141141
aria-labelledby="columnSelect-{{ $tableName }}"
142142
>

0 commit comments

Comments
 (0)