From 816af8296f5bd4ad785e52de1fb8f7bc794fae4f Mon Sep 17 00:00:00 2001 From: Jordy de Vulder Date: Wed, 22 Jul 2026 17:33:55 +0200 Subject: [PATCH 01/10] RAP-1974 - Changed slideover to popover --- .../views/components/slideover/back.blade.php | 3 + .../components/slideover/close.blade.php | 3 + .../components/slideover/content.blade.php | 3 + .../components/slideover/footer.blade.php | 3 + .../components/slideover/header.blade.php | 3 + .../components/slideover/mobile.blade.php | 19 --- .../slideover/mobile/content.blade.php | 3 + .../slideover/mobile/footer.blade.php | 3 + .../slideover/mobile/header.blade.php | 3 + .../slideover/mobile/mobile.blade.php | 32 +++++ .../slideover/partials/header.blade.php | 21 --- .../components/slideover/slideover.blade.php | 125 +++++++----------- 12 files changed, 105 insertions(+), 116 deletions(-) create mode 100644 resources/views/components/slideover/back.blade.php create mode 100644 resources/views/components/slideover/close.blade.php create mode 100644 resources/views/components/slideover/content.blade.php create mode 100644 resources/views/components/slideover/footer.blade.php create mode 100644 resources/views/components/slideover/header.blade.php delete mode 100644 resources/views/components/slideover/mobile.blade.php create mode 100644 resources/views/components/slideover/mobile/content.blade.php create mode 100644 resources/views/components/slideover/mobile/footer.blade.php create mode 100644 resources/views/components/slideover/mobile/header.blade.php create mode 100644 resources/views/components/slideover/mobile/mobile.blade.php delete mode 100644 resources/views/components/slideover/partials/header.blade.php diff --git a/resources/views/components/slideover/back.blade.php b/resources/views/components/slideover/back.blade.php new file mode 100644 index 00000000..98a20734 --- /dev/null +++ b/resources/views/components/slideover/back.blade.php @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/resources/views/components/slideover/close.blade.php b/resources/views/components/slideover/close.blade.php new file mode 100644 index 00000000..246e5282 --- /dev/null +++ b/resources/views/components/slideover/close.blade.php @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/resources/views/components/slideover/content.blade.php b/resources/views/components/slideover/content.blade.php new file mode 100644 index 00000000..145312bc --- /dev/null +++ b/resources/views/components/slideover/content.blade.php @@ -0,0 +1,3 @@ +
twMerge('p-5 overflow-y-auto max-h-full') }}> + {{ $slot }} +
\ No newline at end of file diff --git a/resources/views/components/slideover/footer.blade.php b/resources/views/components/slideover/footer.blade.php new file mode 100644 index 00000000..72aec06f --- /dev/null +++ b/resources/views/components/slideover/footer.blade.php @@ -0,0 +1,3 @@ +
twMerge('p-5 flex gap-x-4')}}> + {{ $slot }} +
\ No newline at end of file diff --git a/resources/views/components/slideover/header.blade.php b/resources/views/components/slideover/header.blade.php new file mode 100644 index 00000000..9c958196 --- /dev/null +++ b/resources/views/components/slideover/header.blade.php @@ -0,0 +1,3 @@ +
twMerge('p-5 bg-primary text-primary-text flex gap-x-4 items-center text-xl') }}> + {{ $slot }} +
\ No newline at end of file diff --git a/resources/views/components/slideover/mobile.blade.php b/resources/views/components/slideover/mobile.blade.php deleted file mode 100644 index 669c8400..00000000 --- a/resources/views/components/slideover/mobile.blade.php +++ /dev/null @@ -1,19 +0,0 @@ -{{-- -This mobile version transforms into inline content on desktop. The slideover behavior only applies on mobile screens. - -## Behavior -- On mobile: Functions as a regular slideover -- On desktop: Content is displayed directly on the page -- Label should be hidden on desktop using `lg:hidden` - -## Example -```blade - - - Mobile slideover - -``` ---}} -@include('rapidez::components.slideover.slideover', ['attributes' => $attributes->class('lg:contents [&>.slideover-wrapper]:lg:contents [&>.slideover-header]:lg:hidden mobile-slideover')]) diff --git a/resources/views/components/slideover/mobile/content.blade.php b/resources/views/components/slideover/mobile/content.blade.php new file mode 100644 index 00000000..32e10953 --- /dev/null +++ b/resources/views/components/slideover/mobile/content.blade.php @@ -0,0 +1,3 @@ + + {{ $slot }} + \ No newline at end of file diff --git a/resources/views/components/slideover/mobile/footer.blade.php b/resources/views/components/slideover/mobile/footer.blade.php new file mode 100644 index 00000000..74e6954d --- /dev/null +++ b/resources/views/components/slideover/mobile/footer.blade.php @@ -0,0 +1,3 @@ + + {{ $slot }} + \ No newline at end of file diff --git a/resources/views/components/slideover/mobile/header.blade.php b/resources/views/components/slideover/mobile/header.blade.php new file mode 100644 index 00000000..68d7b3cb --- /dev/null +++ b/resources/views/components/slideover/mobile/header.blade.php @@ -0,0 +1,3 @@ + + {{ $slot }} + \ No newline at end of file diff --git a/resources/views/components/slideover/mobile/mobile.blade.php b/resources/views/components/slideover/mobile/mobile.blade.php new file mode 100644 index 00000000..316c81ff --- /dev/null +++ b/resources/views/components/slideover/mobile/mobile.blade.php @@ -0,0 +1,32 @@ +{{-- +This mobile version popovertargetms into inline content on desktop. The slideover behavior only applies on mobile screens. + +## Behavior +- On mobile: Functions as a regular slideover +- On desktop: Content is displayed directly on the page +- Button should be hidden on desktop using `lg:hidden` + +## Example +```blade + + + + + Title + + + + Content + + + Footer + + +``` +--}} + + + {{ $slot }} + \ No newline at end of file diff --git a/resources/views/components/slideover/partials/header.blade.php b/resources/views/components/slideover/partials/header.blade.php deleted file mode 100644 index 616726c3..00000000 --- a/resources/views/components/slideover/partials/header.blade.php +++ /dev/null @@ -1,21 +0,0 @@ -
-
-
- @if ($hasParent) - - @elseif ($headerbutton->isNotEmpty()) - {{ $headerbutton }} - @endif - @if ($title) - attributes->class('text-base max-w-full px-10 truncate font-semibold text-white antialiased') }}> - {{ $title }} - - @endif - -
-
-
diff --git a/resources/views/components/slideover/slideover.blade.php b/resources/views/components/slideover/slideover.blade.php index 63638959..7b889814 100644 --- a/resources/views/components/slideover/slideover.blade.php +++ b/resources/views/components/slideover/slideover.blade.php @@ -1,98 +1,71 @@ {{-- -No-js slideover component by making use of checkboxes and form reset logic for nested slideovers. +No-js slideover component by making use of the amazing popover html functionality. ## Properties -- `has-parent` Used for nested slideovers. Set to `true` when this slideover is a child of another slideover -- `id` Unique identifier for the checkbox input. Required for the slideover toggle -- `open` Default `false`, set to `true` to have it open initially - `position` Position of the slideover. Can be `left` or `right`. Defaults to `left` -- `tag` Base tag of the slideover. Set to `form` for parent of nested slideover. Defaults to `div` -- `title` Title displayed in the header. Can be provided as a slot or property -## Slots -- `headerbutton` Custom button in the header instead of the default left arrow -- `title` Alternative way to set the header title -- Default slot Main content of the slideover - -## Body Class -Add this class to prevent scrolling when slideover is open: +## HTML Class +Add this class to prevent scrolling when popover is open: ```html - + ``` -## Nesting Slideovers -For nested slideovers: -1. Parent slideover must use `tag="form"` -2. Child slideovers must set `has-parent="true"` -3. Child slideovers should use default `tag="div"` - -This setup enables form reset logic and ensures proper background backdrop behavior. - ## Examples Basic usage: ```blade - - - Content goes here - + + + + + Title + + + + Content + + + Footer + + ``` Right-positioned slideover: ```blade - - - Settings content - + ``` -Nested slideovers: +Nested slideovers (inside - Open Parent - - - Parent content - - - Child content - - + + + + + + Parent title + + + + Parent content + + ``` --}} -@props(['id' => uniqid('slideover-'), 'title', 'hasParent' => false, 'position' => 'left', 'tag' => 'div', 'open' => false]) -@slots(['title', 'headerbutton']) - -@php - $isInForm = $tag === 'form' || $hasParent; - $closeId = $isInForm ? 'close-' . $id : $id; -@endphp +@props(['position' => 'left']) - - - @if (!$hasParent) - - - @else - - @endif -
class([ - 'fixed inset-y-0 transition-all bg-white z-slideover-sidebar flex flex-col max-w-md w-full', - '-right-full peer-checked:right-0' => $position === 'right', - '-left-full peer-checked:left-0' => $position === 'left', - ]) }}> - @include('rapidez::components.slideover.partials.header') -
- {{ $slot }} -
-
- +
twMerge('h-screen w-full max-w-lg shadow-xl z-slideover text open:flex flex-col overscroll-none duration-500 backdrop:bg-backdrop backdrop:opacity-0 starting:open:backdrop:opacity-0 open:backdrop:opacity-100 backdrop:transition-opacity backdrop:transition-discrete backdrop:duration-700 transition-all transition-discrete transform-gpu') + ->class([ + '-translate-x-full starting:open:[transform:translateX(-100%)] open:translate-x-0' => $position === 'left', + 'translate-x-full starting:open:[transform:translateX(100%)] open:translate-x-0 ml-auto' => $position === 'right', + ]) + }} +> + {{ $slot }} +
From bb642855ab7b7a1509f9d48cfbbd729cbd341a71 Mon Sep 17 00:00:00 2001 From: Jordy de Vulder Date: Thu, 23 Jul 2026 09:54:56 +0200 Subject: [PATCH 02/10] RAP-1974 - Changed selectors --- .../slideover/mobile/content.blade.php | 4 +- .../slideover/mobile/header.blade.php | 4 +- .../slideover/mobile/mobile.blade.php | 24 ++++++------ .../components/slideover/slideover.blade.php | 38 +++++++++---------- 4 files changed, 35 insertions(+), 35 deletions(-) diff --git a/resources/views/components/slideover/mobile/content.blade.php b/resources/views/components/slideover/mobile/content.blade.php index 32e10953..998b728d 100644 --- a/resources/views/components/slideover/mobile/content.blade.php +++ b/resources/views/components/slideover/mobile/content.blade.php @@ -1,3 +1,3 @@ - + {{ $slot }} - \ No newline at end of file + \ No newline at end of file diff --git a/resources/views/components/slideover/mobile/header.blade.php b/resources/views/components/slideover/mobile/header.blade.php index 68d7b3cb..ff368703 100644 --- a/resources/views/components/slideover/mobile/header.blade.php +++ b/resources/views/components/slideover/mobile/header.blade.php @@ -1,3 +1,3 @@ - + {{ $slot }} - \ No newline at end of file + \ No newline at end of file diff --git a/resources/views/components/slideover/mobile/mobile.blade.php b/resources/views/components/slideover/mobile/mobile.blade.php index 316c81ff..670b8548 100644 --- a/resources/views/components/slideover/mobile/mobile.blade.php +++ b/resources/views/components/slideover/mobile/mobile.blade.php @@ -1,5 +1,5 @@ {{-- -This mobile version popovertargetms into inline content on desktop. The slideover behavior only applies on mobile screens. +This mobile version popovertargets into inline content on desktop. The slideover behavior only applies on mobile screens. ## Behavior - On mobile: Functions as a regular slideover @@ -12,21 +12,21 @@ Open Mobile Slideover - - + + Title - - - + + + Content - - + + Footer - - + + ``` --}} - + {{ $slot }} - \ No newline at end of file + \ No newline at end of file diff --git a/resources/views/components/slideover/slideover.blade.php b/resources/views/components/slideover/slideover.blade.php index 7b889814..28eaedcf 100644 --- a/resources/views/components/slideover/slideover.blade.php +++ b/resources/views/components/slideover/slideover.blade.php @@ -17,18 +17,18 @@ Open slideover - - + + Title - - - + + + Content - - + + Footer - - + + ``` Right-positioned slideover: @@ -36,22 +36,22 @@ ``` -Nested slideovers (inside ): ```blade - - - + + + Parent title - - - + + + Parent content - - + + ``` --}} From 980436951cefa8724c25d05edf49d37585fbc3b2 Mon Sep 17 00:00:00 2001 From: jordythevulder Date: Thu, 23 Jul 2026 07:55:37 +0000 Subject: [PATCH 03/10] Update demo --- demo/components.html | 101 ++++++++++--------------------------------- 1 file changed, 22 insertions(+), 79 deletions(-) diff --git a/demo/components.html b/demo/components.html index e4b882de..dd026463 100644 --- a/demo/components.html +++ b/demo/components.html @@ -5,7 +5,7 @@ @@ -252,35 +252,16 @@

Default

- - - -
-
-
-
- - Example Slideover - - -
-
-
-
-
+
+

This is an example of the slideover component.

You can put any content here!

-
-
-
+
+
@@ -288,71 +269,33 @@

Right-positioned

- - - -
-
-
-
- - Right Slideover - - -
-
-
-
-
+
+

This slideover appears from the right side.

It demonstrates the position property.

-
-
-
+
+

Mobile only

- - - -
-
-
-
- - Mobile Slideover - - -
-
-
-
-
+
+

This is a mobile-specific slideover that transforms on desktop.

On mobile devices, it appears as a slideover.

On desktop screens (lg breakpoint and above), this content is directly embedded in the page instead of being in a slideover.

-
-
-
+
+
From 97e31601eb456b0a64e15ea1df717650f9a4773e Mon Sep 17 00:00:00 2001 From: Jordy de Vulder Date: Thu, 23 Jul 2026 10:16:24 +0200 Subject: [PATCH 04/10] RAP-1974 - Added components to demo --- resources/views/components-preview.blade.php | 62 ++++++++++++------- .../slideover/mobile/footer.blade.php | 4 +- 2 files changed, 43 insertions(+), 23 deletions(-) diff --git a/resources/views/components-preview.blade.php b/resources/views/components-preview.blade.php index 6f47dec9..48a638bd 100644 --- a/resources/views/components-preview.blade.php +++ b/resources/views/components-preview.blade.php @@ -1,5 +1,5 @@ - + @@ -10,7 +10,7 @@ Rapidez Blade Components Preview - +

Rapidez Blade Components preview

@@ -207,14 +207,21 @@

Default

- + Open Slideover - -
-

This is an example of the slideover component.

-

You can put any content here!

-
+ + + + Title + + + + Content + + + Footer +
@@ -222,29 +229,42 @@

Right-positioned

- + Open Right Slideover - -
-

This slideover appears from the right side.

-

It demonstrates the position property.

-
+ + + + Title + + + + Content + + + Footer +

Mobile only

- + Open Mobile Slideover - -
-

This is a mobile-specific slideover that transforms on desktop.

-

On mobile devices, it appears as a slideover.

-

On desktop screens (lg breakpoint and above), this content is directly embedded in the page instead of being in a slideover.

-
+ + + + Title + + + + Content + + + Footer +
diff --git a/resources/views/components/slideover/mobile/footer.blade.php b/resources/views/components/slideover/mobile/footer.blade.php index 74e6954d..f81bdcfe 100644 --- a/resources/views/components/slideover/mobile/footer.blade.php +++ b/resources/views/components/slideover/mobile/footer.blade.php @@ -1,3 +1,3 @@ - + {{ $slot }} - \ No newline at end of file + \ No newline at end of file From c62b8591b5399fe262e951ec9dcf147c6d5b97fa Mon Sep 17 00:00:00 2001 From: jordythevulder Date: Thu, 23 Jul 2026 08:17:26 +0000 Subject: [PATCH 05/10] Update demo --- demo/components.html | 73 +++++++++++++++++++++++++++++--------------- 1 file changed, 48 insertions(+), 25 deletions(-) diff --git a/demo/components.html b/demo/components.html index dd026463..d9976b8a 100644 --- a/demo/components.html +++ b/demo/components.html @@ -1,17 +1,17 @@ - + Rapidez Blade Components Preview - +

Rapidez Blade Components preview

@@ -250,16 +250,24 @@

Slideover Component

Default

-
+ Content +
+ Footer +
@@ -267,33 +275,48 @@

Default

Right-positioned

-
+ Content +
+ Footer +

Mobile only

-
+ Content +
+ Footer +
From 5760d9a7bc46c2215fbe067614d680bfa5b4e458 Mon Sep 17 00:00:00 2001 From: Jordy de Vulder Date: Mon, 27 Jul 2026 10:20:09 +0200 Subject: [PATCH 06/10] Added dialog --- resources/views/components-preview.blade.php | 22 ++++---- .../components/slideover/close.blade.php | 4 +- .../components/slideover/header.blade.php | 2 +- .../components/slideover/slideover.blade.php | 51 +++++++++++-------- 4 files changed, 44 insertions(+), 35 deletions(-) diff --git a/resources/views/components-preview.blade.php b/resources/views/components-preview.blade.php index 48a638bd..e00714c0 100644 --- a/resources/views/components-preview.blade.php +++ b/resources/views/components-preview.blade.php @@ -1,5 +1,5 @@ - + @@ -207,14 +207,14 @@

Default

- + Open Slideover - + Title - + Content @@ -229,14 +229,14 @@

Right-positioned

- + Open Right Slideover - + Title - + Content @@ -250,17 +250,17 @@

Mobile only

- + Open Mobile Slideover - + Title - + - Content + This content will be visible on desktop, however if you scale to mobile resolution this will be hidden inside a slideover. Footer diff --git a/resources/views/components/slideover/close.blade.php b/resources/views/components/slideover/close.blade.php index 246e5282..688565da 100644 --- a/resources/views/components/slideover/close.blade.php +++ b/resources/views/components/slideover/close.blade.php @@ -1,3 +1,3 @@ - \ No newline at end of file diff --git a/resources/views/components/slideover/header.blade.php b/resources/views/components/slideover/header.blade.php index 9c958196..830a5e2a 100644 --- a/resources/views/components/slideover/header.blade.php +++ b/resources/views/components/slideover/header.blade.php @@ -1,3 +1,3 @@ -
twMerge('p-5 bg-primary text-primary-text flex gap-x-4 items-center text-xl') }}> +
twMerge('p-5 bg-primary text-primary-text flex gap-x-4 items-center text-center justify-center text-lg relative') }}> {{ $slot }}
\ No newline at end of file diff --git a/resources/views/components/slideover/slideover.blade.php b/resources/views/components/slideover/slideover.blade.php index 28eaedcf..34c9d6d5 100644 --- a/resources/views/components/slideover/slideover.blade.php +++ b/resources/views/components/slideover/slideover.blade.php @@ -1,5 +1,5 @@ {{-- -No-js slideover component by making use of the amazing popover html functionality. +No-js slideover component by making use of the amazing dialog or popover html functionality. ## Properties - `position` Position of the slideover. Can be `left` or `right`. Defaults to `left` @@ -7,20 +7,31 @@ ## HTML Class Add this class to prevent scrolling when popover is open: ```html - + +``` + +## Choose between a dialog or popover +```blade + + + ``` ## Examples Basic usage: ```blade - - + Title - + Content @@ -38,15 +49,15 @@ Nested slideovers (inside ): ```blade - - + - + Parent title - + Parent content @@ -57,15 +68,13 @@ --}} @props(['position' => 'left']) -
twMerge('h-screen w-full max-w-lg shadow-xl z-slideover text open:flex flex-col overscroll-none duration-500 backdrop:bg-backdrop backdrop:opacity-0 starting:open:backdrop:opacity-0 open:backdrop:opacity-100 backdrop:transition-opacity backdrop:transition-discrete backdrop:duration-700 transition-all transition-discrete transform-gpu') - ->class([ - '-translate-x-full starting:open:[transform:translateX(-100%)] open:translate-x-0' => $position === 'left', - 'translate-x-full starting:open:[transform:translateX(100%)] open:translate-x-0 ml-auto' => $position === 'right', - ]) - }} -> - {{ $slot }} -
+merge(['popover' => '']) + ->twMerge('h-screen w-full max-w-lg shadow-xl z-slideover text open:flex flex-col overscroll-none max-h-full duration-500 backdrop:bg-backdrop backdrop:opacity-0 starting:open:backdrop:opacity-0 open:backdrop:opacity-100 backdrop:transition-opacity backdrop:transition-discrete backdrop:duration-700 transition-all transition-discrete transform-gpu') + ->class([ + '-translate-x-full starting:open:[transform:translateX(-100%)] open:translate-x-0' => $position === 'left', + 'translate-x-full starting:open:[transform:translateX(100%)] open:translate-x-0 ml-auto' => $position === 'right', + ]) +}}> + {{ $slot }} + \ No newline at end of file From 27a98857dc0a29dd470d7f1b843c217d26c0f40d Mon Sep 17 00:00:00 2001 From: jordythevulder Date: Mon, 27 Jul 2026 08:21:11 +0000 Subject: [PATCH 07/10] Update demo --- demo/components.html | 60 ++++++++++++++++++-------------------------- 1 file changed, 24 insertions(+), 36 deletions(-) diff --git a/demo/components.html b/demo/components.html index d9976b8a..f2c3b09e 100644 --- a/demo/components.html +++ b/demo/components.html @@ -1,11 +1,11 @@ - + @@ -250,75 +250,63 @@

Slideover Component

Default

- -
-
+ +
Title -
Content
Footer -
-
-
+
+

Right-positioned

- -
-
+ +
Title -
Content
Footer -
-
-
+
+

Mobile only

- -
-
+ +
Title -
- Content + This content will be visible on desktop, however if you scale to mobile resolution this will be hidden inside a slideover.
Footer -
-
-
+
+
From a66a2ae87b554fa30bf0be4856555d30449d5bcd Mon Sep 17 00:00:00 2001 From: Jordy de Vulder Date: Mon, 27 Jul 2026 10:26:29 +0200 Subject: [PATCH 08/10] Changed instructions --- .../views/components/slideover/mobile/mobile.blade.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/views/components/slideover/mobile/mobile.blade.php b/resources/views/components/slideover/mobile/mobile.blade.php index 670b8548..65be37ab 100644 --- a/resources/views/components/slideover/mobile/mobile.blade.php +++ b/resources/views/components/slideover/mobile/mobile.blade.php @@ -1,5 +1,5 @@ {{-- -This mobile version popovertargets into inline content on desktop. The slideover behavior only applies on mobile screens. +This mobile version shows content on desktop and hides it within a slideover on mobile resolution. ## Behavior - On mobile: Functions as a regular slideover @@ -8,14 +8,14 @@ ## Example ```blade - - + Title - + Content From 39ccc91f12f05bc2ff55200f8cdec354b2cf92ef Mon Sep 17 00:00:00 2001 From: jordythevulder Date: Mon, 27 Jul 2026 08:27:42 +0000 Subject: [PATCH 09/10] Update demo --- demo/components.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/components.html b/demo/components.html index f2c3b09e..83c9034d 100644 --- a/demo/components.html +++ b/demo/components.html @@ -5,7 +5,7 @@ From 0dbafc6b691f11c4841c538f760218ea204abc9c Mon Sep 17 00:00:00 2001 From: Jade Geels Date: Thu, 6 Aug 2026 08:03:12 +0000 Subject: [PATCH 10/10] Add polyfill for the slideover (#47) --- README.md | 12 ++++++++++++ resources/js/polyfill.js | 41 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 resources/js/polyfill.js diff --git a/README.md b/README.md index 89141f50..e8c9485e 100644 --- a/README.md +++ b/README.md @@ -72,6 +72,18 @@ php artisan vendor:publish --tag=rapidez-blade-components-views The [readmore component](https://github.com/rapidez/blade-components/blob/master/resources/views/components/readmore/readmore.blade.php) includes some Javascript, we're using a [Blade Stack](https://laravel.com/docs/master/blade#stacks) named `foot` for that. Make sure you've an `@stack('foot')` before your closing `` tag. Within Rapidez this is already present within the [`layouts/app.blade.php`](https://github.com/rapidez/core/blob/master/resources/views/layouts/app.blade.php). +### Slideover + +The slideover component uses a dialog with commandfor, with browser support since 2025. It also has a secondary variant using a popover, which only has browser support since mid-2024. + +If you want to use a polyfill for the dialog variant, you should add the `invokers-polyfill` npm package to your project: + +``` +yarn add -D invokers-polyfill +``` + +If you also wish to use the popover variant, we provide an extension to this polyfill that essentially just turns all popover variant slideovers into the dialog variant on unsupported browsers. To use this polyfill, include the `.../js/polyfill.js` file that comes with this package. + ## Usage Just like any other Blade component, check out the [Laravel Blade docs](https://laravel.com/docs/master/blade) and the examples within the components code linked above. All components are prefixed with `x-rapidez::` to avoid any conflicts with existing Blade components within your project. diff --git a/resources/js/polyfill.js b/resources/js/polyfill.js new file mode 100644 index 00000000..e1b6de7a --- /dev/null +++ b/resources/js/polyfill.js @@ -0,0 +1,41 @@ +import "invokers-polyfill" + +if (!(typeof HTMLElement !== 'undefined' && typeof HTMLElement.prototype === 'object' && 'popover' in HTMLElement.prototype)) +{ + function replacePopovers(baseElement) { + function replacePopover(el, newCommand) { + let target = el.getAttribute('popovertarget') ?? el.getAttribute('commandfor') + el.removeAttribute('popovertargetaction') + el.removeAttribute('popovertarget') + el.setAttribute('commandfor', target) + el.setAttribute('command', newCommand) + } + + baseElement.querySelectorAll('[command=show-popover]').forEach(el => el.command = 'show-modal') + baseElement.querySelectorAll('[command=toggle-popover]').forEach(el => el.command = 'show-modal') + baseElement.querySelectorAll('[command=hide-popover]').forEach(el => el.command = 'close') + + baseElement.querySelectorAll('[popovertargetaction=show]').forEach(el => replacePopover(el, 'show-modal')) + baseElement.querySelectorAll('[popovertargetaction=toggle]').forEach(el => replacePopover(el, 'show-modal')) + baseElement.querySelectorAll('[popovertargetaction=hide]').forEach(el => replacePopover(el, 'close')) + } + + replacePopovers(document) + + const observer = new MutationObserver((mutations) => { + if (mutations.some((mutation) => + mutation.target.hasAttribute('popovertargetaction') + || mutation.target.hasAttribute('popovertarget') + || mutation.target.hasAttribute('commandfor') + )) { + replacePopovers(mutation.target.parentElement ?? document) + } + }) + + observer.observe(document, { + attributes: true, + childList: true, + subtree: true, + attributeFilter: ['popovertargetaction', 'popovertarget', 'command'] + }) +}