Rework dialog

full-stack-biz · Sep 2, 2024 · 6728a5d · 6728a5d
1 parent 9909a44
commit 6728a5d
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -547,14 +547,27 @@ Implements [Material Design Menu Button](https://github.com/material-components/
 Implements [Material Design Modal](https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog) component.
 
 ```erb
-<%= material_modal title: 'Modal Title' %>
+<%= material_modal title: 'Modal Title', contents_partial: 'common/modal_contents' %>
+```
+or with block
+```erb
+<%= material_modal title: 'Modal Title' do %>
+  Contents
+<% end %>
 ```
 
 #### Options
 
-| Option | Type | Description |
-| --- | --- | --- |
+| Option | Type | Description               |
+| --- | --- |-------------------------------------------------------------------------|
 | `title` | String | Title of the modal |
+| `contents_partial` | String | Partial for modal contents |
+| `cancel_button_text` | String | Text of the cancel button |
+| `ok_button_text` | String | Text of the ok button     |
+| `opened` | Boolean | Whether the modal is opened |
+| `dialog_surface_custom_css` | String | Custom CSS class for the dialog surface |
+| `close_action_url` | String | URL for navigating to on modal close |
+| `form` | Object | Form object for form-centric modals, replaces ok button with form submit |
 
 ### Tooltip
 

diff --git a/app/helpers/turbo_material/modal_helper.rb b/app/helpers/turbo_material/modal_helper.rb
@@ -1,7 +1,9 @@
 module TurboMaterial
   module ModalHelper
-    def material_modal(kwargs = {})
-      render "components/modal", **kwargs
+    def material_modal(kwargs = {}, &block)
+      render "components/modal", **kwargs do
+        capture(&block) if block_given?
+      end
     end
   end
 end
diff --git a/app/views/components/_input.html.erb b/app/views/components/_input.html.erb
@@ -1,9 +1,9 @@
 <%# locals: (form:, custom_controller: nil, custom_css: nil, disabled: false, required: false, name:, label: nil, id:, frame: nil, provide_hidden: false, value: nil, type: 'text', data: {}, min: nil, max: nil, helper: nil, parent: nil, style: 'filled', leading_icon: nil, trailing_icon: nil, leading_icon_data: {}, trailing_icon_data: {}) %>
-<label class="mdc-text-field rounded-none <%= style == 'filled' ? 'mdc-text-field--filled' : 'mdc-text-field--outlined' %> <%= value || form&.object&.[](name.to_sym) ? 'mdc-text-field--label-floating' : '' %> w-full <%= leading_icon ? 'mdc-text-field--with-leading-icon' : '' %> <%= trailing_icon ? 'mdc-text-field--with-trailing-icon' : '' %> <%= custom_css %>"
+<label class="mdc-text-field rounded-none <%= style == 'filled' ? 'mdc-text-field--filled' : 'mdc-text-field--outlined' %> <%= (value || form&.object&.[](name.to_sym)).present? ? 'mdc-text-field--label-floating' : '' %> w-full <%= leading_icon ? 'mdc-text-field--with-leading-icon' : '' %> <%= trailing_icon ? 'mdc-text-field--with-trailing-icon' : '' %> <%= custom_css %>"
        data-controller="<%= custom_controller || 'material-input' %>" <% if frame %>data-frame="<%= frame %>"<% end %>>
   <%- if style == 'filled' -%>
     <span class="mdc-text-field__ripple"></span>
-    <span class="mdc-floating-label <%= value || form&.object&.[](name.to_sym) ? 'mdc-floating-label--float-above' : '' %>" id="<%= id %>-label">
+    <span class="mdc-floating-label <%= (value || form&.object&.[](name.to_sym)).present? ? 'mdc-floating-label--float-above' : '' %>" id="<%= id %>-label">
       <%= label || name.capitalize %>
     </span>
   <%- else -%>

diff --git a/app/views/components/_modal.html.erb b/app/views/components/_modal.html.erb
@@ -1,37 +1,48 @@
-<%# locals: (title:) %>
-<turbo-frame id="modal">
-  <div class="mdc-dialog" data-controller="material-dialog" data-material-dialog-opened-value="true">
-    <div class="mdc-dialog__container">
-      <div class="mdc-dialog__surface !min-w-[36rem] !min-h-[14rem]"
-             role="alertdialog"
-             aria-modal="true"
-             aria-labelledby="my-dialog-title"
-             aria-describedby="my-dialog-content">
-          <h2 class="mdc-dialog__title">
-            <div class="flex items-center justify-between">
-              <span><%= title %></span>
-              <button type="button" class="mdc-icon-button mdc-dialog__close" data-mdc-ripple-is-unbounded data-action="click->material-dialog#close">
-                <div class="mdc-icon-button__ripple"></div>
-                <span class="mdc-icon-button__focus-ring"></span>
-                <i class="material-icons !text-white">close</i>
-              </button>
-            </div>
-          </h2>
-          <div class="mdc-dialog__content">
-            Contents
-          </div>
-          <div class="mdc-dialog__actions">
-            <button type="button" class="mdc-button mdc-dialog__button mdc-dialog__close" data-action="click->material-dialog#close">
-              <div class="mdc-button__ripple"></div>
-              <span class="mdc-button__label">Cancel</span>
-            </button>
-            <button type="button" class="mdc-button mdc-dialog__button" data-controller="material-ripple">
-              <div class="mdc-button__ripple"></div>
-              <span class="mdc-button__label">OK</span>
-            </button>
-          </div>
+<%# locals: (title:, contents_partial: nil, cancel_button_text: 'Cancel', ok_button_text: 'OK', opened: true, dialog_surface_custom_css: '!min-w-[36rem] !min-h-[14rem]', close_action_url: nil, form: nil) %>
+<div class="mdc-dialog" data-controller="material-dialog" data-material-dialog-opened-value="<%= opened %>"
+     data-material-dialog-close-action-url-value="<%= close_action_url %>">
+  <div class="mdc-dialog__container">
+    <div class="mdc-dialog__surface <%= dialog_surface_custom_css %>"
+         role="alertdialog"
+         aria-modal="true"
+         aria-labelledby="my-dialog-title"
+         aria-describedby="my-dialog-content">
+      <h2 class="mdc-dialog__title bg-secondary">
+        <div class="!text-white flex items-center justify-between">
+          <span><%= title %></span>
+          <button type="button" class="mdc-icon-button mdc-dialog__close" data-mdc-ripple-is-unbounded data-action="click->material-dialog#close">
+            <div class="mdc-icon-button__ripple"></div>
+            <span class="mdc-icon-button__focus-ring"></span>
+            <i class="material-icons !text-white">close</i>
+          </button>
         </div>
+      </h2>
+      <div class="mdc-dialog__content">
+        <%- if block_given? -%>
+          <%= yield %>
+        <%- else -%>
+          <%= render partial: contents_partial, locals: { form: form } %>
+        <% end %>
+      </div>
+      <div class="mdc-dialog__actions">
+        <button type="button" class="mdc-button mdc-dialog__button mdc-dialog__close" data-action="click->material-dialog#close">
+          <div class="mdc-button__ripple"></div>
+          <span class="mdc-button__label"><%= cancel_button_text %></span>
+        </button>
+        <%- if form.present? -%>
+          <%= form.button type: :submit, class: "mdc-button mdc-dialog__button", data: { controller: 'material-ripple' } do %>
+            <div class="mdc-button__ripple"></div>
+            <span class="mdc-button__label"><%= ok_button_text %></span>
+          <% end %>
+        <%- else -%>
+          <button type="button" class="mdc-button mdc-dialog__button" data-controller="material-ripple">
+            <div class="mdc-button__ripple"></div>
+            <span class="mdc-button__label"><%= ok_button_text %></span>
+          </button>
+        <%- end -%>
+      </div>
     </div>
-    <div class="mdc-dialog__scrim"></div>
   </div>
-</turbo-frame>
+  <div class="mdc-dialog__scrim"></div>
+</div>
+