turbo_material 0.2.13 → 0.2.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +16 -3
- data/app/assets/javascripts/turbo_material/material_dialog_controller.js +5 -1
- data/app/helpers/turbo_material/modal_helper.rb +4 -2
- data/app/views/components/_input.html.erb +2 -2
- data/app/views/components/_modal.html.erb +45 -34
- data/lib/turbo_material/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 12e357755a746bce7c573a86ee1157e89530593e23de2d99a0a316faa60fe029
|
|
4
|
+
data.tar.gz: eb47d431c70574d7e9867bc14a69134eb86c267f464a7d046fd979d0a56ae993
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 73a70273d93fc18fa0b444e83bc26f465b5b75e375860cb6d5e94838c8ad6d5f0c469adf3d0a9c0f56bef0f86987af955c3b20424e0bcc8b780c7ddfaae1a5aa
|
|
7
|
+
data.tar.gz: d518fe5e3a8db071e04451779ecd6cddcef749e4ca0023a812059bbc1024d73ef2d518d205c6cac6b728a7388ad2269217c2f0caf719cb6593305ad40ee73ce6
|
data/README.md
CHANGED
|
@@ -547,14 +547,27 @@ Implements [Material Design Menu Button](https://github.com/material-components/
|
|
|
547
547
|
Implements [Material Design Modal](https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog) component.
|
|
548
548
|
|
|
549
549
|
```erb
|
|
550
|
-
<%= material_modal title: 'Modal Title' %>
|
|
550
|
+
<%= material_modal title: 'Modal Title', contents_partial: 'common/modal_contents' %>
|
|
551
|
+
```
|
|
552
|
+
or with block
|
|
553
|
+
```erb
|
|
554
|
+
<%= material_modal title: 'Modal Title' do %>
|
|
555
|
+
Contents
|
|
556
|
+
<% end %>
|
|
551
557
|
```
|
|
552
558
|
|
|
553
559
|
#### Options
|
|
554
560
|
|
|
555
|
-
| Option | Type | Description
|
|
556
|
-
| --- | ---
|
|
561
|
+
| Option | Type | Description |
|
|
562
|
+
| --- | --- |-------------------------------------------------------------------------|
|
|
557
563
|
| `title` | String | Title of the modal |
|
|
564
|
+
| `contents_partial` | String | Partial for modal contents |
|
|
565
|
+
| `cancel_button_text` | String | Text of the cancel button |
|
|
566
|
+
| `ok_button_text` | String | Text of the ok button |
|
|
567
|
+
| `opened` | Boolean | Whether the modal is opened |
|
|
568
|
+
| `dialog_surface_custom_css` | String | Custom CSS class for the dialog surface |
|
|
569
|
+
| `close_action_url` | String | URL for navigating to on modal close |
|
|
570
|
+
| `form` | Object | Form object for form-centric modals, replaces ok button with form submit |
|
|
558
571
|
|
|
559
572
|
### Tooltip
|
|
560
573
|
|
|
@@ -4,7 +4,8 @@ export default class extends Controller {
|
|
|
4
4
|
dialog = undefined;
|
|
5
5
|
|
|
6
6
|
static values = {
|
|
7
|
-
opened: Boolean
|
|
7
|
+
opened: Boolean,
|
|
8
|
+
closeActionUrl: String
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
connect() {
|
|
@@ -21,6 +22,9 @@ export default class extends Controller {
|
|
|
21
22
|
|
|
22
23
|
close() {
|
|
23
24
|
this.dialog.close();
|
|
25
|
+
if (this.closeActionUrlValue) {
|
|
26
|
+
window.location.href = this.closeActionUrlValue;
|
|
27
|
+
}
|
|
24
28
|
}
|
|
25
29
|
|
|
26
30
|
open() {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<%# 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: {}) %>
|
|
2
|
-
<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 %>"
|
|
2
|
+
<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 %>"
|
|
3
3
|
data-controller="<%= custom_controller || 'material-input' %>" <% if frame %>data-frame="<%= frame %>"<% end %>>
|
|
4
4
|
<%- if style == 'filled' -%>
|
|
5
5
|
<span class="mdc-text-field__ripple"></span>
|
|
6
|
-
<span class="mdc-floating-label <%= value || form&.object&.[](name.to_sym) ? 'mdc-floating-label--float-above' : '' %>" id="<%= id %>-label">
|
|
6
|
+
<span class="mdc-floating-label <%= (value || form&.object&.[](name.to_sym)).present? ? 'mdc-floating-label--float-above' : '' %>" id="<%= id %>-label">
|
|
7
7
|
<%= label || name.capitalize %>
|
|
8
8
|
</span>
|
|
9
9
|
<%- else -%>
|
|
@@ -1,37 +1,48 @@
|
|
|
1
|
-
<%# locals: (title:) %>
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
</div>
|
|
19
|
-
</h2>
|
|
20
|
-
<div class="mdc-dialog__content">
|
|
21
|
-
Contents
|
|
22
|
-
</div>
|
|
23
|
-
<div class="mdc-dialog__actions">
|
|
24
|
-
<button type="button" class="mdc-button mdc-dialog__button mdc-dialog__close" data-action="click->material-dialog#close">
|
|
25
|
-
<div class="mdc-button__ripple"></div>
|
|
26
|
-
<span class="mdc-button__label">Cancel</span>
|
|
27
|
-
</button>
|
|
28
|
-
<button type="button" class="mdc-button mdc-dialog__button" data-controller="material-ripple">
|
|
29
|
-
<div class="mdc-button__ripple"></div>
|
|
30
|
-
<span class="mdc-button__label">OK</span>
|
|
31
|
-
</button>
|
|
32
|
-
</div>
|
|
1
|
+
<%# 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) %>
|
|
2
|
+
<div class="mdc-dialog" data-controller="material-dialog" data-material-dialog-opened-value="<%= opened %>"
|
|
3
|
+
data-material-dialog-close-action-url-value="<%= close_action_url %>">
|
|
4
|
+
<div class="mdc-dialog__container">
|
|
5
|
+
<div class="mdc-dialog__surface <%= dialog_surface_custom_css %>"
|
|
6
|
+
role="alertdialog"
|
|
7
|
+
aria-modal="true"
|
|
8
|
+
aria-labelledby="my-dialog-title"
|
|
9
|
+
aria-describedby="my-dialog-content">
|
|
10
|
+
<h2 class="mdc-dialog__title bg-secondary">
|
|
11
|
+
<div class="!text-white flex items-center justify-between">
|
|
12
|
+
<span><%= title %></span>
|
|
13
|
+
<button type="button" class="mdc-icon-button mdc-dialog__close" data-mdc-ripple-is-unbounded data-action="click->material-dialog#close">
|
|
14
|
+
<div class="mdc-icon-button__ripple"></div>
|
|
15
|
+
<span class="mdc-icon-button__focus-ring"></span>
|
|
16
|
+
<i class="material-icons !text-white">close</i>
|
|
17
|
+
</button>
|
|
33
18
|
</div>
|
|
19
|
+
</h2>
|
|
20
|
+
<div class="mdc-dialog__content">
|
|
21
|
+
<%- if block_given? -%>
|
|
22
|
+
<%= yield %>
|
|
23
|
+
<%- else -%>
|
|
24
|
+
<%= render partial: contents_partial, locals: { form: form } %>
|
|
25
|
+
<% end %>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="mdc-dialog__actions">
|
|
28
|
+
<button type="button" class="mdc-button mdc-dialog__button mdc-dialog__close" data-action="click->material-dialog#close">
|
|
29
|
+
<div class="mdc-button__ripple"></div>
|
|
30
|
+
<span class="mdc-button__label"><%= cancel_button_text %></span>
|
|
31
|
+
</button>
|
|
32
|
+
<%- if form.present? -%>
|
|
33
|
+
<%= form.button type: :submit, class: "mdc-button mdc-dialog__button", data: { controller: 'material-ripple' } do %>
|
|
34
|
+
<div class="mdc-button__ripple"></div>
|
|
35
|
+
<span class="mdc-button__label"><%= ok_button_text %></span>
|
|
36
|
+
<% end %>
|
|
37
|
+
<%- else -%>
|
|
38
|
+
<button type="button" class="mdc-button mdc-dialog__button" data-controller="material-ripple">
|
|
39
|
+
<div class="mdc-button__ripple"></div>
|
|
40
|
+
<span class="mdc-button__label"><%= ok_button_text %></span>
|
|
41
|
+
</button>
|
|
42
|
+
<%- end -%>
|
|
43
|
+
</div>
|
|
34
44
|
</div>
|
|
35
|
-
<div class="mdc-dialog__scrim"></div>
|
|
36
45
|
</div>
|
|
37
|
-
|
|
46
|
+
<div class="mdc-dialog__scrim"></div>
|
|
47
|
+
</div>
|
|
48
|
+
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: turbo_material
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.2.
|
|
4
|
+
version: 0.2.15
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Sergey Moiseev
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2024-
|
|
11
|
+
date: 2024-09-02 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|