From f6109353efee0cb4d6b391df768ae42156a33b50 Mon Sep 17 00:00:00 2001 From: Benjamin Takats Date: Thu, 19 Jan 2023 17:52:56 +0100 Subject: [PATCH] x-trap --- package.json | 1 + resources/js/app.js | 12 +++++++----- .../livewire/chat/highscore-chat.blade.php | 4 +++- yarn.lock | 19 +++++++++++++++++++ 4 files changed, 30 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 63b94a61..f12323c5 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ }, "devDependencies": { "@alpinejs/collapse": "^3.10.5", + "@alpinejs/focus": "^3.11.1", "@alpinejs/intersect": "^3.11.1", "@tailwindcss/forms": "^0.5.2", "@tailwindcss/typography": "^0.5.0", diff --git a/resources/js/app.js b/resources/js/app.js index 1176130c..60c05f87 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,11 +1,13 @@ -import './bootstrap'; +import './bootstrap' -import Alpine from 'alpinejs'; -import collapse from '@alpinejs/collapse' +import Alpine from 'alpinejs' +import collapse from '@alpinejs/collapse' import intersect from '@alpinejs/intersect' +import focus from '@alpinejs/focus' -window.Alpine = Alpine; +window.Alpine = Alpine Alpine.plugin(collapse) Alpine.plugin(intersect) -Alpine.start(); +Alpine.plugin(focus) +Alpine.start() diff --git a/resources/views/livewire/chat/highscore-chat.blade.php b/resources/views/livewire/chat/highscore-chat.blade.php index a5f26691..878e5dcb 100644 --- a/resources/views/livewire/chat/highscore-chat.blade.php +++ b/resources/views/livewire/chat/highscore-chat.blade.php @@ -10,7 +10,9 @@ 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 w-screen max-w-md" - x-description="Slide-over panel, show/hide based on slide-over state."> + x-description="Slide-over panel, show/hide based on slide-over state." + x-trap.noscroll="open" + >
diff --git a/yarn.lock b/yarn.lock index 20937da2..5c3c7db6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,6 +7,13 @@ resolved "https://registry.yarnpkg.com/@alpinejs/collapse/-/collapse-3.11.1.tgz#391b393f646f1c43787fcc7351d365a7ac0ae538" integrity sha512-H5GQ4rEWN5Z5vKf4U+FtUdcRDdHSa+p4cAesiB+I2njfOxw0EDuobugiP1Pf3DpmyIk8iJx7feLmxeboqxbpRA== +"@alpinejs/focus@^3.11.1": + version "3.11.1" + resolved "https://registry.yarnpkg.com/@alpinejs/focus/-/focus-3.11.1.tgz#8f18bf6099814e9dd45e1c8645bc1d971484e471" + integrity sha512-5gbkgwLlxFfYomCt4cHda5DxBwIdBagmA1AXiOuUytix7AHPtspJBjAULLglz4D82Xdz7bWyau4vZfLr/PhbXQ== + dependencies: + focus-trap "^6.6.1" + "@alpinejs/intersect@^3.11.1": version "3.11.1" resolved "https://registry.yarnpkg.com/@alpinejs/intersect/-/intersect-3.11.1.tgz#858e0aa5689c459fbd22442bbe06c65b00fa4786" @@ -396,6 +403,13 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" +focus-trap@^6.6.1: + version "6.9.4" + resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.9.4.tgz#436da1a1d935c48b97da63cd8f361c6f3aa16444" + integrity sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw== + dependencies: + tabbable "^5.3.3" + fraction.js@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950" @@ -701,6 +715,11 @@ supports-preserve-symlinks-flag@^1.0.0: resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== +tabbable@^5.3.3: + version "5.3.3" + resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf" + integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA== + tailwindcss@^3.1.0: version "3.2.4" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250"