turbo_material 0.2.0 → 0.2.2
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 +1 -0
- data/app/assets/javascripts/turbo_material/material_data_table_controller.js +56 -0
- data/app/controllers/turbo_material/lookbook_controller.rb +7 -0
- data/app/helpers/turbo_material/data_table_helper.rb +7 -0
- data/app/views/common/_form.html.erb +7 -0
- data/app/views/common/_menu_contents.html.erb +13 -0
- data/app/views/common/_standalone.html.erb +1 -0
- data/app/views/components/_material_data_table.html.erb +132 -0
- data/app/views/components/_select.html.erb +3 -3
- data/app/views/layouts/turbo_material/lookbook.html.erb +20 -0
- data/lib/turbo_material/engine.rb +1 -0
- data/lib/turbo_material/version.rb +1 -1
- metadata +11 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f49337f6af23da2f1d3d6eaf3b5f535a666feab2935246d7c39175c4efd3c9c5
|
|
4
|
+
data.tar.gz: c978478f9fd0cdd13c8f00a059bed97e50a369e8616cae05dcdcfb57a973cc21
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 991d91d3369fbeb859c7c133a958fe0ec84d770f585b0725ffb8360a299bd314d19b7119831ff7dfd5c617101ac52855ff7f5a755e1a8e2155c931bfad3fdc6c
|
|
7
|
+
data.tar.gz: 0f0f66731864d482c5eedcb77a5f47b23abfcf8e95aefe06104df199e21114dfcb94e1f132f201fab8223d435819c89f12aaa5e0295f41efb5290bfc6353666b
|
data/README.md
CHANGED
|
@@ -238,6 +238,7 @@ Gem implements [Lookbook](https://lookbook.build) documentation for all componen
|
|
|
238
238
|
|
|
239
239
|
```ruby
|
|
240
240
|
config.lookbook.preview_paths = [TurboMaterial::Engine.root.join('lib/lookbook')]
|
|
241
|
+
config.lookbook.preview_controller = 'TurboMaterial::LookbookController'
|
|
241
242
|
```
|
|
242
243
|
|
|
243
244
|
Or extend your existing config for `lookbook.preview_paths` with same value.
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { Controller } from "@hotwired/stimulus";
|
|
2
|
+
import { Turbo } from "@hotwired/turbo-rails";
|
|
3
|
+
import { put } from "@rails/request.js";
|
|
4
|
+
|
|
5
|
+
export default class extends Controller {
|
|
6
|
+
dataTable = undefined;
|
|
7
|
+
static values = { url: String, selectUrl: String, queryString: String, body: String, selectionType: String };
|
|
8
|
+
|
|
9
|
+
connect() {
|
|
10
|
+
this.dataTable = mdc.dataTable.MDCDataTable.attachTo(this.element);
|
|
11
|
+
this.dataTable.listen('MDCDataTable:sorted', this.sort.bind(this));
|
|
12
|
+
this.dataTable.listen('MDCDataTable:rowSelectionChanged', this.select.bind(this));
|
|
13
|
+
this.dataTable.listen('MDCDataTable:selectedAll', this.selectAll.bind(this));
|
|
14
|
+
this.dataTable.listen('MDCDataTable:unselectedAll', this.unselectAll.bind(this));
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
sort(event) {
|
|
18
|
+
let params = new URLSearchParams(this.queryStringValue);
|
|
19
|
+
params.delete("order");
|
|
20
|
+
params.delete("reverse");
|
|
21
|
+
params.append("order", event.detail.columnId);
|
|
22
|
+
params.append("reverse", event.detail.sortValue === "descending" ? "true" : "false");
|
|
23
|
+
let frame = this.element.querySelector('turbo-frame#pupils-table-data');
|
|
24
|
+
Turbo.visit(`${this.urlValue}?${params.toString()}`);
|
|
25
|
+
// , { action: 'advance', frame: this.bodyValue }
|
|
26
|
+
// FIXME: get this back as soon as https://github.com/hotwired/turbo/issues/489 is fixed
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
select(event) {
|
|
30
|
+
put(`${this.selectUrlValue || this.urlValue}/${event.detail.rowId}/select`, {
|
|
31
|
+
body: {
|
|
32
|
+
type: this.selectionTypeValue,
|
|
33
|
+
selected: event.detail.selected,
|
|
34
|
+
},
|
|
35
|
+
responseKind: "turbo-stream",
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
selectAll(event, selected = true) {
|
|
40
|
+
let params = new URLSearchParams(this.queryStringValue);
|
|
41
|
+
put(`${this.selectUrlValue || this.urlValue}/select_all?${params.toString()}`, {
|
|
42
|
+
body: {
|
|
43
|
+
type: this.selectionTypeValue,
|
|
44
|
+
selected: selected,
|
|
45
|
+
},
|
|
46
|
+
responseKind: "turbo-stream",
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
unselectAll(event) {
|
|
51
|
+
this.selectAll(event, false);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
disconnect() {
|
|
55
|
+
}
|
|
56
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<div class="flex-col w-full">
|
|
2
|
+
<div class="mx-auto px-6 py-3">
|
|
3
|
+
<%= form_with(url: '/', method: :get, html: { novalidate: true }) do |form| %>
|
|
4
|
+
<%= public_send local_assigns.delete(:helper_name).to_sym, **local_assigns.merge(form: form) %>
|
|
5
|
+
<%- end -%>
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<ul class="mdc-deprecated-list mdc-deprecated-list--icon-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
|
|
2
|
+
<li class="mdc-deprecated-list-item" role="menuitem">
|
|
3
|
+
<span class="mdc-deprecated-list-item__ripple"></span>
|
|
4
|
+
<span class="mdc-deprecated-list-item__icon material-icons">person</span>
|
|
5
|
+
<span class="mdc-deprecated-list-item__text pl-2">My Profile</span>
|
|
6
|
+
</li>
|
|
7
|
+
<li class="mdc-list-divider" role="separator"></li>
|
|
8
|
+
<li class="mdc-deprecated-list-item" role="menuitem">
|
|
9
|
+
<span class="mdc-deprecated-list-item__ripple"></span>
|
|
10
|
+
<span class="mdc-deprecated-list-item__icon material-icons">logout</span>
|
|
11
|
+
<span class="mdc-deprecated-list-item__text pl-2">Logout</span>
|
|
12
|
+
</li>
|
|
13
|
+
</ul>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<%= public_send local_assigns.delete(:helper_name).to_sym, **local_assigns %>
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
<%# locals: (name:, table_body:, url:, table_params:, records:, pagy:, table_headers_partial:, table_contents_partial:) %>
|
|
2
|
+
<div class="mdc-data-table w-full" data-controller="material-data-table"
|
|
3
|
+
data-material-data-table-body-value="<%= table_body %>"
|
|
4
|
+
data-material-data-table-url-value="<%= url %>"
|
|
5
|
+
data-material-data-table-query-string-value="<%= table_params.to_query %>">
|
|
6
|
+
<div class="mdc-data-table__table-container">
|
|
7
|
+
<table class="mdc-data-table__table w-[calc(100vw - 16rem)]" aria-label="<%= name %>">
|
|
8
|
+
<thead>
|
|
9
|
+
<tr class="mdc-data-table__header-row">
|
|
10
|
+
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox" role="columnheader" scope="col">
|
|
11
|
+
<div class="mdc-checkbox mdc-data-table__header-row-checkbox mdc-checkbox--selected">
|
|
12
|
+
<input type="checkbox" class="mdc-checkbox__native-control" aria-label="Toggle all rows"/>
|
|
13
|
+
<div class="mdc-checkbox__background">
|
|
14
|
+
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
|
|
15
|
+
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
|
|
16
|
+
</svg>
|
|
17
|
+
<div class="mdc-checkbox__mixedmark"></div>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="mdc-checkbox__ripple"></div>
|
|
20
|
+
</div>
|
|
21
|
+
</th>
|
|
22
|
+
<%= render partial: table_headers_partial %>
|
|
23
|
+
</tr>
|
|
24
|
+
</thead>
|
|
25
|
+
<tbody class="mdc-data-table__content">
|
|
26
|
+
<%= render partial: table_contents_partial, locals: { records: records } %>
|
|
27
|
+
</tbody>
|
|
28
|
+
</table>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="mdc-data-table__pagination">
|
|
31
|
+
<div class="mdc-data-table__pagination-trailing">
|
|
32
|
+
<div class="mdc-data-table__pagination-rows-per-page">
|
|
33
|
+
<div class="mdc-data-table__pagination-rows-per-page-label">
|
|
34
|
+
Rows per page
|
|
35
|
+
</div>
|
|
36
|
+
|
|
37
|
+
<%= form_with(url: url, method: :get, data: {
|
|
38
|
+
turbo_frame: table_body,
|
|
39
|
+
turbo_action: 'advance',
|
|
40
|
+
controller: 'live-form',
|
|
41
|
+
action: 'input->live-form#submit submit-now->live-form#submitNow' }, autocomplete: 'off') do |form| %>
|
|
42
|
+
<% params.keys.select { |k| k.starts_with?('ransack') }.each do |key| -%>
|
|
43
|
+
<%= form.hidden_field key, value: params[key] %>
|
|
44
|
+
<%- end -%>
|
|
45
|
+
<div class="mdc-select mdc-select--outlined mdc-select--no-label mdc-data-table__pagination-rows-per-page-select mdc-data-table__pagination-rows-per-page-select--outlined" data-controller="material-select">
|
|
46
|
+
<%= form.hidden_field :per_page, value: pagy.items %>
|
|
47
|
+
<div class="mdc-select__anchor" role="button" aria-haspopup="listbox"
|
|
48
|
+
aria-labelledby="demo-pagination-select" tabindex="0">
|
|
49
|
+
<span class="mdc-select__selected-text-container">
|
|
50
|
+
<span id="demo-pagination-select" class="mdc-select__selected-text"><%= pagy.items %></span>
|
|
51
|
+
</span>
|
|
52
|
+
<span class="mdc-select__dropdown-icon">
|
|
53
|
+
<svg
|
|
54
|
+
class="mdc-select__dropdown-icon-graphic"
|
|
55
|
+
viewBox="7 10 10 5">
|
|
56
|
+
<polygon
|
|
57
|
+
class="mdc-select__dropdown-icon-inactive"
|
|
58
|
+
stroke="none"
|
|
59
|
+
fill-rule="evenodd"
|
|
60
|
+
points="7 10 12 15 17 10">
|
|
61
|
+
</polygon>
|
|
62
|
+
<polygon
|
|
63
|
+
class="mdc-select__dropdown-icon-active"
|
|
64
|
+
stroke="none"
|
|
65
|
+
fill-rule="evenodd"
|
|
66
|
+
points="7 15 12 10 17 15">
|
|
67
|
+
</polygon>
|
|
68
|
+
</svg>
|
|
69
|
+
</span>
|
|
70
|
+
<span class="mdc-notched-outline mdc-notched-outline--notched">
|
|
71
|
+
<span class="mdc-notched-outline__leading"></span>
|
|
72
|
+
<span class="mdc-notched-outline__trailing"></span>
|
|
73
|
+
</span>
|
|
74
|
+
</div>
|
|
75
|
+
|
|
76
|
+
<div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" role="listbox">
|
|
77
|
+
<ul class="mdc-list">
|
|
78
|
+
<li class="mdc-select__option mdc-select__one-line-option mdc-list-item <%= pagy.items == 10 ? 'mdc-list-item--selected' : '' %> mdc-list-item--with-one-line"
|
|
79
|
+
aria-selected="true" role="option" data-value="10">
|
|
80
|
+
<span class="mdc-list-item__ripple"></span>
|
|
81
|
+
<span class="mdc-list-item__content">
|
|
82
|
+
<span class="mdc-list-item__primary-text">10</span>
|
|
83
|
+
</span>
|
|
84
|
+
</li>
|
|
85
|
+
<li class="mdc-select__option mdc-select__one-line-option mdc-list-item <%= pagy.items == 20 ? 'mdc-list-item--selected' : '' %> mdc-list-item--with-one-line"
|
|
86
|
+
role="option" data-value="20">
|
|
87
|
+
<span class="mdc-list-item__ripple"></span>
|
|
88
|
+
<span class="mdc-list-item__content">
|
|
89
|
+
<span class="mdc-list-item__primary-text">20</span>
|
|
90
|
+
</span>
|
|
91
|
+
</li>
|
|
92
|
+
<li class="mdc-select__option mdc-select__one-line-option mdc-list-item <%= pagy.items == 100 ? 'mdc-list-item--selected' : '' %> mdc-list-item--with-one-line"
|
|
93
|
+
role="option" data-value="100">
|
|
94
|
+
<span class="mdc-list-item__ripple"></span>
|
|
95
|
+
<span class="mdc-list-item__content">
|
|
96
|
+
<span class="mdc-list-item__primary-text">100</span>
|
|
97
|
+
</span>
|
|
98
|
+
</li>
|
|
99
|
+
</ul>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
<%- end -%>
|
|
104
|
+
|
|
105
|
+
<div class="mdc-data-table__pagination-navigation">
|
|
106
|
+
<div class="mdc-data-table__pagination-total">
|
|
107
|
+
<%= pagy.from %>‑<%= pagy.to %> of <%= pagy.count %>
|
|
108
|
+
</div>
|
|
109
|
+
<%= button_to url, method: :get, params: table_params.merge(page: 1),
|
|
110
|
+
data: { 'first-page' => "true", turbo_frame: table_body, turbo_action: 'advance' },
|
|
111
|
+
disabled: pagy.page == 1, class: "mdc-icon-button material-icons mdc-data-table__pagination-button" do %>
|
|
112
|
+
<div class="mdc-button__icon">first_page</div>
|
|
113
|
+
<% end %>
|
|
114
|
+
<%= button_to url, method: :get, params: table_params.merge(page: pagy.prev),
|
|
115
|
+
data: { 'prev-page' => "true", turbo_frame: table_body, turbo_action: 'advance' },
|
|
116
|
+
disabled: pagy.prev.nil?, class: "mdc-icon-button material-icons mdc-data-table__pagination-button" do %>
|
|
117
|
+
<div class="mdc-button__icon">chevron_left</div>
|
|
118
|
+
<% end %>
|
|
119
|
+
<%= button_to url, method: :get, params: table_params.merge(page: pagy.next),
|
|
120
|
+
data: { 'next-page' => "true", turbo_frame: table_body, turbo_action: 'advance' },
|
|
121
|
+
disabled: pagy.next.nil?, class: "mdc-icon-button material-icons mdc-data-table__pagination-button" do %>
|
|
122
|
+
<div class="mdc-button__icon">chevron_right</div>
|
|
123
|
+
<% end %>
|
|
124
|
+
<%= button_to url, method: :get, params: table_params.merge(page: pagy.last),
|
|
125
|
+
data: { 'last-page' => "true", turbo_frame: table_body, turbo_action: 'advance' },
|
|
126
|
+
disabled: pagy.page == pagy.last, class: "mdc-icon-button material-icons mdc-data-table__pagination-button" do %>
|
|
127
|
+
<div class="mdc-button__icon">last_page</div>
|
|
128
|
+
<% end %>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
<% if disabled %>aria-disabled="true"<% end %>
|
|
11
11
|
<% if required %>aria-required="true"<% end %>
|
|
12
12
|
>
|
|
13
|
-
<%-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
<%- unless outlined -%>
|
|
14
|
+
<span class="mdc-select__ripple"></span>
|
|
15
|
+
<%- if label -%><span id="<%= id %>-label" class="mdc-floating-label"><%= label || name.capitalize %></span><%- end -%>
|
|
16
16
|
<%- else -%>
|
|
17
17
|
<span class="mdc-notched-outline">
|
|
18
18
|
<span class="mdc-notched-outline__leading"></span>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Turbo material</title>
|
|
5
|
+
<%= csrf_meta_tags %>
|
|
6
|
+
<%= csp_meta_tag %>
|
|
7
|
+
<link href="//cdn.jsdelivr.net/npm/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
|
|
8
|
+
<script src="//cdn.jsdelivr.net/npm/material-components-web@latest/dist/material-components-web.min.js"></script>
|
|
9
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
|
10
|
+
<%= stylesheet_link_tag "turbo_material/tailwind", "data-turbo-track": "reload" %>
|
|
11
|
+
<%= javascript_importmap_tags %>
|
|
12
|
+
<%= javascript_import_module_tag "turbo_material/application" %>
|
|
13
|
+
<%= stylesheet_link_tag "turbo_material/application", media: "all" %>
|
|
14
|
+
</head>
|
|
15
|
+
<body>
|
|
16
|
+
|
|
17
|
+
<%= yield %>
|
|
18
|
+
|
|
19
|
+
</body>
|
|
20
|
+
</html>
|
|
@@ -11,6 +11,7 @@ module TurboMaterial
|
|
|
11
11
|
helper TurboMaterial::CheckboxHelper
|
|
12
12
|
helper TurboMaterial::ChipsInputHelper
|
|
13
13
|
helper TurboMaterial::ChipsSelectHelper
|
|
14
|
+
helper TurboMaterial::DataTableHelper
|
|
14
15
|
helper TurboMaterial::MenuButtonHelper
|
|
15
16
|
helper TurboMaterial::ModalHelper
|
|
16
17
|
helper TurboMaterial::RadioHelper
|
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.2
|
|
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-04-
|
|
11
|
+
date: 2024-04-08 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -93,6 +93,7 @@ files:
|
|
|
93
93
|
- app/assets/javascripts/turbo_material/material_checkbox_controller.js
|
|
94
94
|
- app/assets/javascripts/turbo_material/material_chips_input_controller.js
|
|
95
95
|
- app/assets/javascripts/turbo_material/material_chips_select_controller.js
|
|
96
|
+
- app/assets/javascripts/turbo_material/material_data_table_controller.js
|
|
96
97
|
- app/assets/javascripts/turbo_material/material_dialog_controller.js
|
|
97
98
|
- app/assets/javascripts/turbo_material/material_input_controller.js
|
|
98
99
|
- app/assets/javascripts/turbo_material/material_list_controller.js
|
|
@@ -105,10 +106,12 @@ files:
|
|
|
105
106
|
- app/assets/stylesheets/turbo_material/application.css
|
|
106
107
|
- app/assets/stylesheets/turbo_material/application.tailwind.css
|
|
107
108
|
- app/controllers/turbo_material/application_controller.rb
|
|
109
|
+
- app/controllers/turbo_material/lookbook_controller.rb
|
|
108
110
|
- app/helpers/turbo_material/application_helper.rb
|
|
109
111
|
- app/helpers/turbo_material/checkbox_helper.rb
|
|
110
112
|
- app/helpers/turbo_material/chips_input_helper.rb
|
|
111
113
|
- app/helpers/turbo_material/chips_select_helper.rb
|
|
114
|
+
- app/helpers/turbo_material/data_table_helper.rb
|
|
112
115
|
- app/helpers/turbo_material/input_helper.rb
|
|
113
116
|
- app/helpers/turbo_material/menu_button_helper.rb
|
|
114
117
|
- app/helpers/turbo_material/modal_helper.rb
|
|
@@ -119,11 +122,15 @@ files:
|
|
|
119
122
|
- app/jobs/turbo_material/application_job.rb
|
|
120
123
|
- app/mailers/turbo_material/application_mailer.rb
|
|
121
124
|
- app/models/turbo_material/application_record.rb
|
|
125
|
+
- app/views/common/_form.html.erb
|
|
126
|
+
- app/views/common/_menu_contents.html.erb
|
|
127
|
+
- app/views/common/_standalone.html.erb
|
|
122
128
|
- app/views/components/_checkbox.html.erb
|
|
123
129
|
- app/views/components/_chips_input.html.erb
|
|
124
130
|
- app/views/components/_chips_input_options.html.erb
|
|
125
131
|
- app/views/components/_chips_select.html.erb
|
|
126
132
|
- app/views/components/_input.html.erb
|
|
133
|
+
- app/views/components/_material_data_table.html.erb
|
|
127
134
|
- app/views/components/_menu_button.html.erb
|
|
128
135
|
- app/views/components/_modal.html.erb
|
|
129
136
|
- app/views/components/_radio.html.erb
|
|
@@ -131,6 +138,7 @@ files:
|
|
|
131
138
|
- app/views/components/_switch.html.erb
|
|
132
139
|
- app/views/components/_textarea.html.erb
|
|
133
140
|
- app/views/layouts/turbo_material/application.html.erb
|
|
141
|
+
- app/views/layouts/turbo_material/lookbook.html.erb
|
|
134
142
|
- config/importmap.rb
|
|
135
143
|
- config/routes.rb
|
|
136
144
|
- config/tailwind.config.js
|
|
@@ -170,7 +178,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
170
178
|
- !ruby/object:Gem::Version
|
|
171
179
|
version: '0'
|
|
172
180
|
requirements: []
|
|
173
|
-
rubygems_version: 3.
|
|
181
|
+
rubygems_version: 3.5.3
|
|
174
182
|
signing_key:
|
|
175
183
|
specification_version: 4
|
|
176
184
|
summary: Material Web Components for Hotwire Turbo.
|