diff --git a/app/components/modal_component/modal_component.html.haml b/app/components/modal_component/modal_component.html.haml
index 76a16d53..714512cc 100644
--- a/app/components/modal_component/modal_component.html.haml
+++ b/app/components/modal_component/modal_component.html.haml
@@ -1,26 +1,28 @@
-.contents{data: {controller: 'modal'}}
+.contents{data: {controller: 'modal', action: 'keydown.esc->modal#close'}}
= content
- .font-raleway.hidden.animated.fadeIn.fixed.inset-0.overflow-y-auto.flex.items-center.justify-center.z-50{data: {action: 'click->modal#closeBackground keyup@window->modal#closeWithKeyboard', "modal-target" => 'container'}}
- .relative{class: size_classes}
- - if @only_body
- = body
- - else
- / Modal content
- .relative.bg-white.rounded-lg.shadow.dark:bg-gray-700.flex.flex-col{class: content_classes}
- / Modal header
- .flex.justify-between.items-start.p-4.rounded-t.border-b.dark:border-gray-600
- - if @header
- %h3.text-xl.font-semibold.text-gray-900.dark:text-white= @header
- %button.text-gray-400.bg-transparent.hover:bg-gray-200.hover:text-gray-900.rounded-lg.text-sm.ml-auto.inline-flex.items-center.dark:hover:bg-gray-600.dark:hover:text-white{:class => "p-1.5", "data-action" => "click->modal#close", :type => "button"}
- %svg.w-5.h-5{:fill => "currentColor", :viewbox => "0 0 20 20", :xmlns => "http://www.w3.org/2000/svg"}
- %path{"clip-rule" => "evenodd", :d => "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", "fill-rule" => "evenodd"}
- / Modal body
- .p-6.space-y-6{class: content_classes}= body
+ .hidden.fixed.inset-0.z-40.overflow-y-auto.flex.items-center.justify-center{"class" => "bg-gray-900/50 dark:bg-gray-900/80","data-action" => "click->modal#closeBackground", "data-modal-target" => "background", "data-transition-enter" => "transition-all ease-in-out duration-300", "data-transition-enter-from" => "bg-opacity-0", "data-transition-enter-to" => "bg-opacity-80", "data-transition-leave" => "transition-all ease-in-out duration-300", "data-transition-leave-from" => "bg-opacity-80", "data-transition-leave-to" => "bg-opacity-0"}
- -# / Modal footer
- -# .flex.items-center.p-6.space-x-2.rounded-b.border-t.border-gray-200.dark:border-gray-600
- -# %button.text-white.bg-blue-700.hover:bg-blue-800.focus:ring-4.focus:outline-none.focus:ring-blue-300.rounded-lg.text-sm.px-5.text-center.dark:bg-blue-600.dark:hover:bg-blue-700.dark:focus:ring-blue-800{:class => "py-2.5", "data-modal-target" => "trigger", :type => "button"}
- -# I accept
- -# %button.text-gray-500.bg-white.hover:bg-gray-100.focus:ring-4.focus:outline-none.focus:ring-blue-300.rounded-lg.border.border-gray-200.text-sm.px-5.hover:text-gray-900.focus:z-10.dark:bg-gray-700.dark:text-gray-300.dark:border-gray-500.dark:hover:text-white.dark:hover:bg-gray-600.dark:focus:ring-gray-600{:class => "py-2.5", "data-modal-target" => "trigger", :type => "button"}
- -# Decline
+ .max-h-screen.w-full.max-w-5xl.relative{data: {"modal-target" => 'container'}}
+ .font-raleway.relative{class: size_classes}
+ - if @only_body
+ = body
+ - else
+ / Modal content
+ .relative.bg-white.rounded-lg.shadow.dark:bg-gray-700.flex.flex-col{class: content_classes}
+ / Modal header
+ .flex.justify-between.items-start.p-4.rounded-t.border-b.dark:border-gray-600
+ - if @header
+ %h3.text-xl.font-semibold.text-gray-900.dark:text-white= @header
+ %button.text-gray-400.bg-transparent.hover:bg-gray-200.hover:text-gray-900.rounded-lg.text-sm.ml-auto.inline-flex.items-center.dark:hover:bg-gray-600.dark:hover:text-white{:class => "p-1.5", "data-action" => "click->modal#close", :type => "button"}
+ %svg.w-5.h-5{:fill => "currentColor", :viewbox => "0 0 20 20", :xmlns => "http://www.w3.org/2000/svg"}
+ %path{"clip-rule" => "evenodd", :d => "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", "fill-rule" => "evenodd"}
+ / Modal body
+ .p-6.space-y-6{class: content_classes}= body
+
+ -# / Modal footer
+ -# .flex.items-center.p-6.space-x-2.rounded-b.border-t.border-gray-200.dark:border-gray-600
+ -# %button.text-white.bg-blue-700.hover:bg-blue-800.focus:ring-4.focus:outline-none.focus:ring-blue-300.rounded-lg.text-sm.px-5.text-center.dark:bg-blue-600.dark:hover:bg-blue-700.dark:focus:ring-blue-800{:class => "py-2.5", "data-modal-target" => "trigger", :type => "button"}
+ -# I accept
+ -# %button.text-gray-500.bg-white.hover:bg-gray-100.focus:ring-4.focus:outline-none.focus:ring-blue-300.rounded-lg.border.border-gray-200.text-sm.px-5.hover:text-gray-900.focus:z-10.dark:bg-gray-700.dark:text-gray-300.dark:border-gray-500.dark:hover:text-white.dark:hover:bg-gray-600.dark:focus:ring-gray-600{:class => "py-2.5", "data-modal-target" => "trigger", :type => "button"}
+ -# Decline
diff --git a/app/components/search_component.rb b/app/components/search_component.rb
index be4683dc..51b1378a 100644
--- a/app/components/search_component.rb
+++ b/app/components/search_component.rb
@@ -7,15 +7,6 @@ def initialize
end
private
- def data_tags
- {
- data: {
- action: 'click->search#closeBackground keyup@window->search#closeWithKeyboard',
- 'search-target' => 'container',
- }
- }
- end
-
def query_classes
%w(
w-full border-0 focus:ring-transparent text-black
diff --git a/app/components/search_component/search_component.html.haml b/app/components/search_component/search_component.html.haml
index 2369f017..f6d6a972 100644
--- a/app/components/search_component/search_component.html.haml
+++ b/app/components/search_component/search_component.html.haml
@@ -1,11 +1,12 @@
-.font-raleway.hidden.animated.fadeIn.fixed.inset-0.overflow-y-auto.flex.items-center.justify-center.z-50{data_tags}
- .bg-white.overflow-auto.max-w-2xl.w-full.max-h-full.rounded.shadow-lg
- = form_with(url: search_path, class: 'border-b border-gray-200', data: {search_target: 'form'}) do |f|
- .relative
- = f.text_field :query, class: query_classes, data: query_data, type: 'search'
- %button.absolute.inset-0.right-auto.group{"aria-label" => "Search", :type => "submit"}
- %svg.w-4.h-4.flex-shrink-0.fill-current.text-gray-400.group-hover:text-gray-500.ml-4.mr-2{:viewbox => "0 0 16 16", :xmlns => "http://www.w3.org/2000/svg"}
- %path{:d => "M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"}
- %path{:d => "M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z"}
+.relative.z-10{data: {action: 'keydown.esc@window->search#close'}, tabindex: "-1"}
+ .hidden.fixed.inset-0.z-40.overflow-y-auto.flex.items-center.justify-center{"class" => "bg-gray-900/50 dark:bg-gray-900/80","data-action" => "click->search#closeBackground", "data-search-target" => "background", "data-transition-enter" => "transition-all ease-in-out duration-300", "data-transition-enter-from" => "bg-opacity-0", "data-transition-enter-to" => "bg-opacity-80", "data-transition-leave" => "transition-all ease-in-out duration-300", "data-transition-leave-from" => "bg-opacity-80", "data-transition-leave-to" => "bg-opacity-0"}
+ .bg-white.rounded.shadow-lg.max-h-screen.w-full.max-w-5xl.relative{data: {"search-target" => 'container'}}
+ = form_with(url: search_path, class: 'border-b border-gray-200', data: {search_target: 'form'}) do |f|
+ .relative
+ = f.text_field :query, class: query_classes, data: query_data, type: 'search'
+ %button.absolute.inset-0.right-auto.group{"aria-label" => "Search", :type => "submit"}
+ %svg.w-4.h-4.flex-shrink-0.fill-current.text-gray-400.group-hover:text-gray-500.ml-4.mr-2{:viewbox => "0 0 16 16", :xmlns => "http://www.w3.org/2000/svg"}
+ %path{:d => "M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"}
+ %path{:d => "M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z"}
- #search_results
\ No newline at end of file
+ #search_results
\ No newline at end of file
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
index 14e906a0..faad349f 100644
--- a/app/javascript/controllers/index.js
+++ b/app/javascript/controllers/index.js
@@ -4,6 +4,7 @@ import { registerControllers } from "stimulus-vite-helpers";
const controllers = import.meta.glob("./**/*_controller.js", { eager: true });
registerControllers(application, controllers);
-import { Dropdown } from "tailwindcss-stimulus-components";
+import { Dropdown, Modal } from "tailwindcss-stimulus-components";
application.register("dropdown", Dropdown);
+application.register("modal", Modal);
diff --git a/app/javascript/controllers/modal_controller.js b/app/javascript/controllers/modal_controller.js
deleted file mode 100644
index 573cb056..00000000
--- a/app/javascript/controllers/modal_controller.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Modal } from "tailwindcss-stimulus-components";
-
-export default class extends Modal {
- _backgroundHTML() {
- return ``;
- }
-}
diff --git a/app/javascript/controllers/search_controller.js b/app/javascript/controllers/search_controller.js
index f555af3c..1b4b7e36 100644
--- a/app/javascript/controllers/search_controller.js
+++ b/app/javascript/controllers/search_controller.js
@@ -8,8 +8,12 @@ const clamp = (value, min, max) => {
};
export default class extends Modal {
- static targets = ["container", "input", "form", "list"];
- static values = { focusIndex: Number };
+ static targets = ["container", "background", "input", "form", "list"];
+ static values = {
+ open: { type: Boolean, default: false },
+ restoreScroll: { type: Boolean, default: true },
+ focusIndex: Number,
+ };
connect() {
super.connect();
@@ -18,16 +22,18 @@ export default class extends Modal {
});
}
- _backgroundHTML() {
- return ``;
- }
-
open(e) {
super.open(e);
// custom stuff
+ e.preventDefault();
this.inputTarget.value = "";
- this.inputTarget.focus();
+ setTimeout(
+ function () {
+ this.inputTarget.focus({ focusVisible: true });
+ }.bind(this),
+ 100
+ );
}
submit() {
diff --git a/package.json b/package.json
index d2f06787..bfc090cb 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
"stimulus-use": "^0.52.2",
"stimulus-vite-helpers": "^3.0.1",
"tailwindcss": "^3.4.0",
- "tailwindcss-stimulus-components": "^3.0.4",
+ "tailwindcss-stimulus-components": "^4.0.4",
"thememirror": "^2.0.1",
"throttleit": "^2.0.0",
"tippy.js": "^6.3.7",
diff --git a/yarn.lock b/yarn.lock
index 4c51943a..b8e8c10c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -699,7 +699,7 @@ __metadata:
languageName: node
linkType: hard
-"@hotwired/stimulus@npm:>=3.0.0, @hotwired/stimulus@npm:^3.2.2":
+"@hotwired/stimulus@npm:^3.2.2":
version: 3.2.2
resolution: "@hotwired/stimulus@npm:3.2.2"
checksum: e0c13469df89f760f35cce0fd7af5f7eeabd4ff79c4ad2b05fe7d8d7b845818c6736c3cd515c1906e144aa27529d5a60377647937b756950b4f709be329c9046
@@ -3462,7 +3462,7 @@ __metadata:
stimulus-use: ^0.52.2
stimulus-vite-helpers: ^3.0.1
tailwindcss: ^3.4.0
- tailwindcss-stimulus-components: ^3.0.4
+ tailwindcss-stimulus-components: ^4.0.4
thememirror: ^2.0.1
throttleit: ^2.0.0
tippy.js: ^6.3.7
@@ -3860,14 +3860,12 @@ __metadata:
languageName: node
linkType: hard
-"tailwindcss-stimulus-components@npm:^3.0.4":
- version: 3.0.4
- resolution: "tailwindcss-stimulus-components@npm:3.0.4"
- dependencies:
- "@hotwired/stimulus": ">=3.0.0"
+"tailwindcss-stimulus-components@npm:^4.0.4":
+ version: 4.0.4
+ resolution: "tailwindcss-stimulus-components@npm:4.0.4"
peerDependencies:
- "@hotwired/stimulus": ">=3.0.0"
- checksum: aca0dfc4c7787111f27277b3dae2c64aecae202527dff32a564ae3638a58f3e4bc83e196e590c14cbbc3f8867c6a7b84539ca0d04394a0b9b6ee030a0808b377
+ "@hotwired/stimulus": ">= 3.0.0"
+ checksum: cbd1e54e15095506fb9e119d0294ce81cec03c8842f12478bb1b6d769a36766271a5acc92a6a167cbce4d8f409df61481e960d19b48d36711b71c55b8b834680
languageName: node
linkType: hard