Skip to content

Commit efa0589

Browse files
darrencoutts118darrencoutts118
committed
Modals etc
1 parent c0837ed commit efa0589

File tree

12 files changed

+159
-97
lines changed

12 files changed

+159
-97
lines changed

‎resources/views/components/badge.blade.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<span class="text-xs font-medium rounded-sm px-1 py-0.5 text-zinc-700 dark:text-zinc-200 bg-teal-400/15 dark:bg-teal-500/10">{{ $slot }}</span>

‎resources/views/components/drawer.blade.php‎

Lines changed: 10 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,13 @@
1-
<div
2-
x-cloak
3-
@keydown.window.escape="{{ $close() }}"
4-
x-show="{{ $isOpen() }}"
5-
class="relative z-10"
6-
aria-labelledby="slide-over-title"
7-
x-ref="dialog"
8-
aria-modal="true">
9-
10-
<div x-show="{{ $isOpen() }}" x-transition:enter="ease-in-out duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in-out duration-500" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-description="Background backdrop, show/hide based on slide-over state." class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
11-
12-
<div class="fixed inset-0 overflow-hidden">
13-
<div class="absolute inset-0 overflow-hidden">
14-
<div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
15-
16-
<div x-show="{{ $isOpen() }}" x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="pointer-events-auto relative w-screen max-w-2xl" x-description="Slide-over panel, show/hide based on slide-over state." @click.away="{{ $close() }}">
17-
18-
<div x-show="{{ $isOpen() }}" x-transition:enter="ease-in-out duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in-out duration-500" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-description="Close button, show/hide based on slide-over state." class="absolute left-0 top-0 -ml-8 flex pr-2 pt-4 sm:-ml-10 sm:pr-4">
19-
<button type="button" class="relative rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white" @click="{{ $close() }}">
20-
<span class="absolute -inset-2.5"></span>
21-
<span class="sr-only">Close panel</span>
22-
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
23-
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
24-
</svg>
25-
</button>
26-
</div>
27-
28-
<div class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">
29-
<div class="px-4 sm:px-6">
30-
<h2 class="text-base font-semibold leading-6 text-gray-900" id="slide-over-title">Panel title</h2>
31-
</div>
32-
<div class="relative mt-6 flex-1 px-4 sm:px-6">
33-
<div class="absolute inset-0 px-4 sm:px-6">
34-
<div class="relative h-full overflow-hidden rounded-xl border border-dashed border-gray-400 opacity-75">
35-
<svg class="absolute inset-0 h-full w-full stroke-gray-900/10" fill="none">
36-
<defs>
37-
<pattern id="pattern-510798f3-74a4-4150-a0cf-4e93e8f4fbdf" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
38-
<path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
39-
</pattern>
40-
</defs>
41-
<rect stroke="none" fill="url(#pattern-510798f3-74a4-4150-a0cf-4e93e8f4fbdf)" width="100%" height="100%"></rect>
42-
</svg>
43-
</div>
44-
</div>
45-
</div>
46-
</div>
47-
</div>
1+
<dialog {{ $attributes }}>
2+
<div tabindex="-1">
3+
<div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
4+
{{ $slot }}
5+
</div>
486

49-
</div>
7+
@if (!empty($actions))
8+
<div class="bg-gray-200 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
9+
{{ $actions }}
5010
</div>
11+
@endif
5112
</div>
52-
</div>
13+
</dialog>

‎resources/views/components/grid/index.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div class="grid grid-cols-{{ $columns }} gap-{{ $gap }}">
1+
<div class="grid grid-cols-12 gap-3">
22
{{ $slot }}
3-
</div>
3+
</div>

‎resources/views/components/modal.blade.php‎

Lines changed: 10 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,13 @@
1-
<div
2-
x-cloak
3-
@keydown.window.escape="{{ $close() }}"
4-
x-show="{{ $isOpen() }}"
5-
class="relative z-10"
6-
aria-labelledby="modal-title"
7-
aria-modal="true"
8-
>
9-
<!-- Modal Backdrop -->
10-
<div
11-
x-show="{{ $isOpen() }}"
12-
x-transition:enter="ease-out duration-300"
13-
x-transition:enter-start="opacity-0"
14-
x-transition:enter-end="opacity-100"
15-
x-transition:leave="ease-in duration-200"
16-
x-transition:leave-start="opacity-100"
17-
x-transition:leave-end="opacity-0"
18-
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
19-
></div>
20-
21-
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
22-
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
23-
<div
24-
x-show="{{ $isOpen() }}"
25-
x-trap.inert.noscroll.noautofocus="{{ $isOpen() }}"
26-
x-transition:enter="ease-out duration-3000"
27-
x-transition:enter-start="opacity-0 -translate-y-4 sm:scale-95"
28-
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
29-
x-transition:leave="ease-in duration-200"
30-
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
31-
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
32-
class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"
33-
@click.away="{{ $close() }}"
34-
>
35-
<div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
36-
{{ $slot }}
37-
</div>
1+
<dialog {{ $attributes }}>
2+
<div tabindex="-1">
3+
<div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
4+
{{ $slot }}
5+
</div>
386

39-
<!-- Modal Buttons -->
40-
<div class="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
41-
<button type="button" class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto" @click="{{ $close() }}">Deactivate</button>
42-
<button type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto" @click="{{ $close() }}">Cancel</button>
43-
</div>
44-
<!-- / Modal Buttons -->
45-
</div>
7+
@if (!empty($actions))
8+
<div class="bg-gray-200 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
9+
{{ $actions }}
4610
</div>
11+
@endif
4712
</div>
48-
</div>
13+
</dialog>

‎resources/views/components/nav/item.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
{{ $slot }}
44
</div>
55

6-
<span class="text-xs font-medium rounded-sm px-1 py-0.5 text-zinc-700 dark:text-zinc-200 bg-teal-400/15 dark:bg-teal-500/10">12</span>
6+
<x-appkit::badge>90</x-appkit::badge>
77
</a>

‎src/Components/Badge.php‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<?php
2+
3+
namespace AppKit\UI\Components;
4+
5+
use AppKit\UI\Attributes\ExposedAsState;
6+
7+
class Badge extends BaseComponent
8+
{
9+
/**
10+
* Create an instance of the component
11+
*
12+
*/
13+
public function __construct(
14+
15+
) {
16+
// constructor promotion handles the rest
17+
}
18+
}

‎src/Components/Concerns/IsModal.php‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,9 @@ public function open(): string
3535
{
3636
return UI::openModal($this->name);
3737
}
38+
39+
public function runtimeVariable(): string
40+
{
41+
return UI::getModalVariable($this->name);
42+
}
3843
}

‎src/Styles/Tailwind/Components/DrawerStyler.php‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<?php
2+
3+
namespace AppKit\UI\Styles\Tailwind\Components;
4+
5+
use AppKit\UI\ComponentBuilder;
6+
use AppKit\UI\Components\BaseComponent;
7+
use AppKit\UI\Styles\Tailwind\Mixins\BackdropMixin;
8+
use AppKit\UI\Styles\Tailwind\Mixins\Interactivity\ModalMixin;
9+
10+
class DrawerStyler extends BaseStyler
11+
{
12+
public function __invoke(ComponentBuilder $component, BaseComponent $instance): void
13+
{
14+
// style the actual modal
15+
$component->addClass([
16+
'min-h-dvh',
17+
'fixed pointer-events-auto fixed w-screen max-w-2xl m-0 ml-auto',
18+
'transition-all', 'transition-discrete', 'duration-300',
19+
'starting:open:translate-x-full',
20+
'translate-x-full',
21+
'open:translate-x-0',
22+
]);
23+
24+
// add in the backdrop
25+
$component->mixin(BackdropMixin::class);
26+
27+
// add in the interactivity of the modal (click events etc)
28+
$component->mixin(ModalMixin::with(modal: $instance));
29+
}
30+
}

‎src/Styles/Tailwind/Components/ModalStyler.php‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<?php
2+
3+
namespace AppKit\UI\Styles\Tailwind\Components;
4+
5+
use AppKit\UI\ComponentBuilder;
6+
use AppKit\UI\Components\BaseComponent;
7+
use AppKit\UI\Styles\Tailwind\Mixins\BackdropMixin;
8+
use AppKit\UI\Styles\Tailwind\Mixins\Interactivity\ModalMixin;
9+
10+
class ModalStyler extends BaseStyler
11+
{
12+
public function __invoke(ComponentBuilder $component, BaseComponent $instance): void
13+
{
14+
// style the actual modal
15+
$component->addClass([
16+
'm-auto',
17+
'transition-all', 'transition-discrete', 'duration-300',
18+
'starting:open:opacity-0', 'starting:open:scale-95', 'starting:open:-translate-y-20',
19+
'opacity-0', 'scale-80', 'translate-y-40',
20+
'open:opacity-100', 'open:scale-100', 'open:translate-y-0',
21+
]);
22+
23+
// add in the backdrop
24+
$component->mixin(BackdropMixin::class);
25+
26+
// add in the interactivity of the modal (click events etc)
27+
$component->mixin(ModalMixin::with(modal: $instance));
28+
}
29+
}

‎src/Styles/Tailwind/Mixins/BackdropMixin.php‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<?php
2+
3+
namespace AppKit\UI\Styles\Tailwind\Mixins;
4+
5+
use AppKit\UI\ComponentBuilder;
6+
7+
class BackdropMixin extends BaseMixin {
8+
9+
public function __invoke(ComponentBuilder $component): void
10+
{
11+
$component->addClass([
12+
'backdrop:transition-all', 'backdrop:transition-discrete', 'backdrop:duration-300',
13+
'backdrop:bg-transparent',
14+
'open:backdrop:bg-zinc-500/80',
15+
'starting:open:backdrop:bg-transparent',
16+
]);
17+
}
18+
}

0 commit comments

Comments
 (0)