@@ -139,7 +139,7 @@ class="relative w-auto h-auto">
139
139
@endif
140
140
@else
141
141
@if ($buttonFullWidth )
142
- <x-forms .button @click =" modalOpen=true" class =" flex w-full gap-2" wire:target >
142
+ <x-forms .button @click =" modalOpen=true" class =" flex gap-2 w-full " wire:target >
143
143
{{ $buttonTitle } }
144
144
</x-forms .button >
145
145
@else
@@ -162,41 +162,37 @@ class="absolute inset-0 w-full h-full bg-black bg-opacity-20 backdrop-blur-sm"><
162
162
x-transition:leave-start =" opacity-100 translate-y-0 sm:scale-100"
163
163
x-transition:leave-end =" opacity-0 -translate-y-2 sm:scale-95"
164
164
class =" relative w-full py-6 border rounded min-w-full lg:min-w-[36rem] max-w-[48rem] bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300" >
165
- <div class =" flex items-center justify-between pb-3" >
166
- <h3 class =" text-2xl font-bold pr-8 " >{{ $title } } </h3 >
165
+ <div class =" flex justify-between items-center pb-3" >
166
+ <h3 class =" pr-8 text-2xl font-bold" >{{ $title } } </h3 >
167
167
<button @click =" modalOpen = false; resetModal()"
168
- class =" absolute top-2 right-2 flex items -center justify -center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300" >
168
+ class =" flex absolute top-2 right-2 justify -center items -center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300" >
169
169
<svg class =" w-6 h-6" xmlns =" http://www.w3.org/2000/svg" fill =" none" viewBox =" 0 0 24 24"
170
170
stroke-width =" 1.5" stroke =" currentColor" >
171
171
<path stroke-linecap =" round" stroke-linejoin =" round" d =" M6 18L18 6M6 6l12 12" />
172
172
</svg >
173
173
</button >
174
174
</div >
175
- <div class =" relative w-auto pb-8" >
175
+ <div class =" relative pb-8 w-auto " >
176
176
@if (! empty ($checkboxes ) )
177
177
<!-- Step 1: Select actions -->
178
178
<div x-show =" step === 1" >
179
179
<div class =" flex justify-between items-center" >
180
180
<h4 >Actions</h4 >
181
181
</div >
182
182
@foreach ($checkboxes as $index => $checkbox )
183
- <div class =" flex items-center justify-between mb-2" >
184
- <label for =" {{ $checkbox [' id' ] } }"
185
- class =" text-sm leading-5 text-gray-700 dark:text-gray-300 flex-grow pr-4" >
186
- {{ $checkbox [' label' ] } }
187
- </label >
188
- <x-forms .checkbox :id =" $checkbox['id']" :wire:model =" $checkbox['id']"
183
+ <div class =" flex justify-between items-center mb-2" >
184
+ <x-forms .checkbox fullWidth :label =" $checkbox['label']" :id =" $checkbox['id']"
185
+ :wire:model =" $checkbox['id']"
189
186
x-on:change =" toggleAction('{{ $checkbox [' id' ] } } ')" :checked =" $this->{$checkbox['id']}"
190
- x-bind:checked =" selectedActions.includes('{{ $checkbox [' id' ] } } ')"
191
- class =" flex-shrink-0" :hideLabel =" true" />
187
+ x-bind:checked =" selectedActions.includes('{{ $checkbox [' id' ] } } ')" />
192
188
</div >
193
189
@endforeach
194
190
</div >
195
191
@endif
196
192
197
193
<!-- Step 2: Confirm deletion -->
198
194
<div x-show =" step === 2" >
199
- <div class =" bg-error border-l-4 border-red-500 text-white p-4 mb-4 " role =" alert" >
195
+ <div class =" p-4 mb-4 text-white border-l-4 border-red-500 bg-error " role =" alert" >
200
196
<p class =" font-bold" >Warning</p >
201
197
<p >This operation is permanent and cannot be undone. Please think again before proceeding!
202
198
</p >
@@ -205,7 +201,7 @@ class="flex-shrink-0" :hideLabel="true" />
205
201
<ul class =" mb-4 space-y-2" >
206
202
@foreach ($actions as $action )
207
203
<li class =" flex items-center text-red-500" >
208
- <svg class =" w-5 h-5 mr-2 flex-shrink-0 " fill =" none" stroke =" currentColor"
204
+ <svg class =" flex-shrink-0 mr-2 w-5 h-5 " fill =" none" stroke =" currentColor"
209
205
viewBox =" 0 0 24 24" xmlns =" http://www.w3.org/2000/svg" >
210
206
<path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2"
211
207
d =" M6 18L18 6M6 6l12 12" ></path >
@@ -216,7 +212,7 @@ class="flex-shrink-0" :hideLabel="true" />
216
212
@foreach ($checkboxes as $checkbox )
217
213
<template x-if =" selectedActions.includes('{{ $checkbox [' id' ] } } ')" >
218
214
<li class =" flex items-center text-red-500" >
219
- <svg class =" w-5 h-5 mr-2 flex-shrink-0 " fill =" none" stroke =" currentColor"
215
+ <svg class =" flex-shrink-0 mr-2 w-5 h-5 " fill =" none" stroke =" currentColor"
220
216
viewBox =" 0 0 24 24" xmlns =" http://www.w3.org/2000/svg" >
221
217
<path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2"
222
218
d =" M6 18L18 6M6 6l12 12" ></path >
@@ -228,24 +224,24 @@ class="flex-shrink-0" :hideLabel="true" />
228
224
</ul >
229
225
@if ($confirmWithText )
230
226
<div class =" mb-4" >
231
- <h4 class =" text-lg font-semibold mb-2 " >Confirm Actions</h4 >
232
- <p class =" text-sm mb-2" >{{ $confirmationLabel } } </p >
227
+ <h4 class =" mb-2 text-lg font-semibold" >Confirm Actions</h4 >
228
+ <p class =" mb-2 text-sm " >{{ $confirmationLabel } } </p >
233
229
<div class =" relative mb-2" >
234
230
<input type =" text" x-model =" confirmationText"
235
- class =" w-full p-2 pr-10 rounded text-black input cursor-text" readonly >
231
+ class =" p-2 pr-10 w-full text-black rounded cursor-text input " readonly >
236
232
<button @click =" copyConfirmationText()"
237
- class =" absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
233
+ class =" absolute right-2 top-1/2 text-gray-500 transform -translate-y-1/2 hover:text-gray-700"
238
234
title =" Copy confirmation text" x-ref =" copyButton" >
239
235
<template x-if =" !copied" >
240
- <svg xmlns =" http://www.w3.org/2000/svg" class =" h -5 w -5" viewBox =" 0 0 20 20"
236
+ <svg xmlns =" http://www.w3.org/2000/svg" class =" w -5 h -5" viewBox =" 0 0 20 20"
241
237
fill =" currentColor" >
242
238
<path d =" M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
243
239
<path
244
240
d =" M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
245
241
</svg >
246
242
</template >
247
243
<template x-if =" copied" >
248
- <svg xmlns =" http://www.w3.org/2000/svg" class =" h -5 w -5 text-green-500"
244
+ <svg xmlns =" http://www.w3.org/2000/svg" class =" w -5 h -5 text-green-500"
249
245
viewBox =" 0 0 20 20" fill =" currentColor" >
250
246
<path fill-rule =" evenodd"
251
247
d =" M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
@@ -256,18 +252,18 @@ class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:t
256
252
</div >
257
253
258
254
<label for =" userConfirmationText"
259
- class =" block text-sm font-medium text-gray-700 dark:text-gray-300 mt-4 " >
255
+ class =" block mt-4 text-sm font-medium text-gray-700 dark:text-gray-300" >
260
256
{{ $shortConfirmationLabel } }
261
257
</label >
262
258
<input type =" text" x-model =" userConfirmationText"
263
- class =" w-full p-2 rounded text-black input mt-1 " >
259
+ class =" p-2 mt-1 w-full text-black rounded input " >
264
260
</div >
265
261
@endif
266
262
</div >
267
263
268
264
<!-- Step 3: Password confirmation -->
269
265
<div x-show =" step === 3 && confirmWithPassword" >
270
- <div class =" bg-error border-l-4 border-red-500 text-white p-4 mb-4 " role =" alert" >
266
+ <div class =" p-4 mb-4 text-white border-l-4 border-red-500 bg-error " role =" alert" >
271
267
<p class =" font-bold" >Final Confirmation</p >
272
268
<p >Please enter your password to confirm this destructive action.</p >
273
269
</div >
@@ -276,11 +272,11 @@ class="w-full p-2 rounded text-black input mt-1">
276
272
class =" block text-sm font-medium text-gray-700 dark:text-gray-300" >
277
273
Your Password
278
274
</label >
279
- <input type =" password" id =" password-confirm" x-model =" password" class =" input w-full"
275
+ <input type =" password" id =" password-confirm" x-model =" password" class =" w-full input "
280
276
placeholder =" Enter your password" >
281
- <p x-show =" passwordError" x-text =" passwordError" class =" text-red-500 text-sm mt-1 " ></p >
277
+ <p x-show =" passwordError" x-text =" passwordError" class =" mt-1 text-sm text-red-500 " ></p >
282
278
@error (' password' )
283
- <p class =" text-red-500 text-sm mt-1 " >{{ $message } } </p >
279
+ <p class =" mt-1 text-sm text-red-500 " >{{ $message } } </p >
284
280
@enderror
285
281
</div >
286
282
</div >
0 commit comments