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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: cf21c621bf44bbc786c329a850f58fc3bb952fa5f600e837484f9a921a1d7c33
4
- data.tar.gz: fbe2a7a91241c7ee710217e654085bcef3dde492c25d2c3b40befc060b07b220
3
+ metadata.gz: f49337f6af23da2f1d3d6eaf3b5f535a666feab2935246d7c39175c4efd3c9c5
4
+ data.tar.gz: c978478f9fd0cdd13c8f00a059bed97e50a369e8616cae05dcdcfb57a973cc21
5
5
  SHA512:
6
- metadata.gz: adde992869e1f5d336f34727784349eb77cc7c8417c2d935b856d5d40f1d42a267ac0f0b09309965cdce79c85413b4e9248c5dcf269c5fefceac77ac3e4848cd
7
- data.tar.gz: 2a3226658c58fd5ca0ced9362e547960e56d2619ba218d0e959d0d2f7e3d2591fcb8f73c6c800cff67463b81b4416b9e848deb38606aa70edae52cfb09b2ce32
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
+ # frozen_string_literal: true
2
+
3
+ module TurboMaterial
4
+ class LookbookController < Lookbook::PreviewController
5
+ layout 'turbo_material/lookbook'
6
+ end
7
+ end
@@ -0,0 +1,7 @@
1
+ module TurboMaterial
2
+ module DataTableHelper
3
+ def material_data_table(kwargs = {})
4
+ render "components/material_data_table", **kwargs
5
+ end
6
+ end
7
+ end
@@ -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
- <%- if outlined -%>
14
- <span class="mdc-select__ripple"></span>
15
- <%- if label -%><span id="<%= id %>-label" class="mdc-floating-label"><%= label || name.capitalize %></span><%- end -%>
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
@@ -1,3 +1,3 @@
1
1
  module TurboMaterial
2
- VERSION = "0.2.0"
2
+ VERSION = "0.2.2"
3
3
  end
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.0
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-04 00:00:00.000000000 Z
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.4.12
181
+ rubygems_version: 3.5.3
174
182
  signing_key:
175
183
  specification_version: 4
176
184
  summary: Material Web Components for Hotwire Turbo.