Merge branch 'release/v0.2.16'

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    turbo_material (0.2.15)
+    turbo_material (0.2.16)
       importmap-rails (~> 2.0.1)
       rails (~> 7.1, >= 7.1.2)
       stimulus-rails (~> 1.3)

README.md

@@ -534,13 +534,22 @@ Implements [Material Design Menu Button](https://github.com/material-components/
 ```erb
 <%= material_menu_button button_text: 'Menu', menu_contents_partial: 'common/menu_contents' %>
 ```
+or with block
+```erb
+<%= material_menu_button button_text: 'Menu' do %>
+  Contents
+<% end %>
+```
 
 #### Options
 
 | Option | Type | Description |
 | --- | --- | --- |
 | `button_text` | String | Text of the menu button |
 | `menu_contents_partial` | String | Partial for menu contents |
+| `logout_path` | String | Path for logout |
+| `custom_css` | String | Custom CSS class |
+| `custom_surface_css` | String | Custom CSS class for the menu surface |
 
 ### Modal
 

app/assets/javascripts/turbo_material/material_menu_button_controller.js

@@ -1,7 +1,9 @@
 import { Controller } from "@hotwired/stimulus";
-import { useClickOutside } from 'stimulus-use';
+import { destroy } from "@rails/request.js";
+
 export default class extends Controller {
     menu = undefined;
+    static values = { logoutPath: String };
 
     connect() {
         mdc.ripple.MDCRipple.attachTo(this.element);
@@ -10,13 +12,12 @@ export default class extends Controller {
         this.menu.setAnchorElement(button);
         this.menu.setAnchorCorner(mdc.menu.Corner.BOTTOM_START);
         this.menu.setFixedPosition(true);
-        useClickOutside(this);
     }
 
     disconnect() {
     }
 
-    click(event) {
+    toggleMenu(event) {
         if (this.menu.open) {
             this.close();
         } else {
@@ -32,12 +33,10 @@ export default class extends Controller {
         this.menu.open = false;
     }
 
-    clickOutside(event) {
-        if (!this.menu.open) {
-            return;
-        } else {
-            event.preventDefault();
-            this.close();
+    async logout() {
+        const response = await destroy(this.logoutPathValue);
+        if (response.ok) {
+            window.location.reload();
         }
     }
 }

app/helpers/turbo_material/menu_button_helper.rb

@@ -1,7 +1,9 @@
 module TurboMaterial
-module MenuButtonHelper
-    def material_menu_button(kwargs = {})
-      render "components/menu_button", **kwargs
+  module MenuButtonHelper
+    def material_menu_button(kwargs = {}, &block)
+      render "components/menu_button", **kwargs do
+        capture(&block) if block_given?
+      end
     end
   end
 end

app/views/components/_menu_button.html.erb

@@ -1,15 +1,20 @@
-<%# locals: (button_text:, menu_contents_partial:) %>
-<div data-controller="material-menu-button" class="!z-100">
+<%# locals: (button_text:, menu_contents_partial: nil, logout_path: nil, custom_css: '!z-100', custom_surface_css: '') %>
+<div data-controller="material-menu-button" class="<%= custom_css %>"
+     data-material-menu-button-logout-path-value="<%= logout_path  %>">
   <button class="mdc-button mdc-button--touch menu-item menu-button"
-          data-action="click->material-menu-button#click">
+          data-action="click->material-menu-button#toggleMenu">
     <span class="mdc-button__ripple"></span>
     <span class="mdc-button__focus-ring"></span>
     <span class="mdc-button__label flex items-center">
       <span class="hidden lg:inline"><%= button_text %></span>
       <span class="material-icons">expand_more</span>
     </span>
   </button>
-  <div class="mdc-menu mdc-menu-surface !w-auto">
-    <%= render partial: menu_contents_partial %>
+  <div class="mdc-menu mdc-menu-surface <%= custom_surface_css %>">
+    <%- if block_given? -%>
+      <%= yield %>
+    <%- else -%>
+      <%= render partial: menu_contents_partial %>
+    <% end %>
   </div>
 </div>

lib/turbo_material/version.rb

@@ -1,3 +1,3 @@
 module TurboMaterial
-  VERSION = "0.2.15"
+  VERSION = "0.2.16"
 end