chore: Update stimulus components

* fix search and modal components
ClarifiedSecurity · Jan 2, 2024 · e45ecd8 · e45ecd8
1 parent 21a59f9
commit e45ecd8
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 67 deletions.
diff --git 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
@@ -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
@@ -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
+      #search_results
diff --git 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
diff --git 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 `<div id="${this.backgroundId}" class="fixed inset-0 z-40 bg-gray-900/50 dark:bg-gray-900/80"></div>`;
-  }
-
   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
@@ -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
@@ -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