turbo_material 0.2.13 → 0.2.15
Sign up to get free protection for your applications and to get access to all the features.
- 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
|