Merge branch 'release/v0.2.2'

README.md

@@ -238,6 +238,7 @@ Gem implements [Lookbook](https://lookbook.build) documentation for all componen
 
 ```ruby
 config.lookbook.preview_paths = [TurboMaterial::Engine.root.join('lib/lookbook')]
+config.lookbook.preview_controller = 'TurboMaterial::LookbookController'
 ```
 
 Or extend your existing config for `lookbook.preview_paths` with same value.

app/assets/javascripts/turbo_material/material_data_table_controller.js

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus";
+import { Turbo } from "@hotwired/turbo-rails";
+import { put } from "@rails/request.js";
+
+export default class extends Controller {
+  dataTable = undefined;
+  static values = { url: String, selectUrl: String, queryString: String, body: String, selectionType: String };
+
+  connect() {
+    this.dataTable = mdc.dataTable.MDCDataTable.attachTo(this.element);
+    this.dataTable.listen('MDCDataTable:sorted', this.sort.bind(this));
+    this.dataTable.listen('MDCDataTable:rowSelectionChanged', this.select.bind(this));
+    this.dataTable.listen('MDCDataTable:selectedAll', this.selectAll.bind(this));
+    this.dataTable.listen('MDCDataTable:unselectedAll', this.unselectAll.bind(this));
+  }
+
+  sort(event) {
+    let params = new URLSearchParams(this.queryStringValue);
+    params.delete("order");
+    params.delete("reverse");
+    params.append("order", event.detail.columnId);
+    params.append("reverse", event.detail.sortValue === "descending" ? "true" : "false");
+    let frame = this.element.querySelector('turbo-frame#pupils-table-data');
+    Turbo.visit(`${this.urlValue}?${params.toString()}`);
+    //   , { action: 'advance', frame: this.bodyValue }
+    // FIXME: get this back as soon as https://github.com/hotwired/turbo/issues/489 is fixed
+  }
+
+  select(event) {
+    put(`${this.selectUrlValue || this.urlValue}/${event.detail.rowId}/select`, {
+      body: {
+        type: this.selectionTypeValue,
+        selected: event.detail.selected,
+      },
+      responseKind: "turbo-stream",
+    });
+  }
+
+  selectAll(event, selected = true) {
+    let params = new URLSearchParams(this.queryStringValue);
+    put(`${this.selectUrlValue || this.urlValue}/select_all?${params.toString()}`, {
+      body: {
+        type: this.selectionTypeValue,
+        selected: selected,
+      },
+      responseKind: "turbo-stream",
+    });
+  }
+
+  unselectAll(event) {
+    this.selectAll(event, false);
+  }
+
+  disconnect() {
+  }
+}

app/controllers/turbo_material/lookbook_controller.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module TurboMaterial
+  class LookbookController < Lookbook::PreviewController
+    layout 'turbo_material/lookbook'
+  end
+end

app/helpers/turbo_material/data_table_helper.rb

@@ -0,0 +1,7 @@
+module TurboMaterial
+  module DataTableHelper
+    def material_data_table(kwargs = {})
+      render "components/material_data_table", **kwargs
+    end
+  end
+end

app/views/common/_form.html.erb

@@ -0,0 +1,7 @@
+<div class="flex-col w-full">
+  <div class="mx-auto px-6 py-3">
+    <%= form_with(url: '/', method: :get, html: { novalidate: true }) do |form| %>
+      <%= public_send local_assigns.delete(:helper_name).to_sym, **local_assigns.merge(form: form) %>
+    <%- end -%>
+  </div>
+</div>

app/views/common/_menu_contents.html.erb

@@ -0,0 +1,13 @@
+<ul class="mdc-deprecated-list mdc-deprecated-list--icon-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
+  <li class="mdc-deprecated-list-item" role="menuitem">
+    <span class="mdc-deprecated-list-item__ripple"></span>
+    <span class="mdc-deprecated-list-item__icon material-icons">person</span>
+    <span class="mdc-deprecated-list-item__text pl-2">My Profile</span>
+  </li>
+  <li class="mdc-list-divider" role="separator"></li>
+  <li class="mdc-deprecated-list-item" role="menuitem">
+    <span class="mdc-deprecated-list-item__ripple"></span>
+    <span class="mdc-deprecated-list-item__icon material-icons">logout</span>
+    <span class="mdc-deprecated-list-item__text pl-2">Logout</span>
+  </li>
+</ul>

app/views/common/_standalone.html.erb

@@ -0,0 +1 @@
+<%= public_send local_assigns.delete(:helper_name).to_sym, **local_assigns %>

app/views/components/_material_data_table.html.erb

@@ -0,0 +1,132 @@
+<%# locals: (name:, table_body:, url:, table_params:, records:, pagy:, table_headers_partial:, table_contents_partial:) %>
+<div class="mdc-data-table w-full" data-controller="material-data-table"
+     data-material-data-table-body-value="<%= table_body %>"
+     data-material-data-table-url-value="<%= url %>"
+     data-material-data-table-query-string-value="<%= table_params.to_query %>">
+  <div class="mdc-data-table__table-container">
+    <table class="mdc-data-table__table w-[calc(100vw - 16rem)]" aria-label="<%= name %>">
+      <thead>
+      <tr class="mdc-data-table__header-row">
+        <th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox" role="columnheader" scope="col">
+          <div class="mdc-checkbox mdc-data-table__header-row-checkbox mdc-checkbox--selected">
+            <input type="checkbox" class="mdc-checkbox__native-control" aria-label="Toggle all rows"/>
+            <div class="mdc-checkbox__background">
+              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
+                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+              </svg>
+              <div class="mdc-checkbox__mixedmark"></div>
+            </div>
+            <div class="mdc-checkbox__ripple"></div>
+          </div>
+        </th>
+        <%= render partial: table_headers_partial %>
+      </tr>
+      </thead>
+      <tbody class="mdc-data-table__content">
+        <%= render partial: table_contents_partial, locals: { records: records } %>
+      </tbody>
+    </table>
+  </div>
+  <div class="mdc-data-table__pagination">
+    <div class="mdc-data-table__pagination-trailing">
+      <div class="mdc-data-table__pagination-rows-per-page">
+        <div class="mdc-data-table__pagination-rows-per-page-label">
+          Rows per page
+        </div>
+
+        <%= form_with(url: url, method: :get, data: {
+          turbo_frame: table_body,
+          turbo_action: 'advance',
+          controller: 'live-form',
+          action: 'input->live-form#submit submit-now->live-form#submitNow' }, autocomplete: 'off') do |form| %>
+          <% params.keys.select { |k| k.starts_with?('ransack') }.each do |key| -%>
+            <%= form.hidden_field key, value: params[key] %>
+          <%- end -%>
+          <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">
+            <%= form.hidden_field :per_page, value: pagy.items %>
+            <div class="mdc-select__anchor" role="button" aria-haspopup="listbox"
+                 aria-labelledby="demo-pagination-select" tabindex="0">
+                <span class="mdc-select__selected-text-container">
+                  <span id="demo-pagination-select" class="mdc-select__selected-text"><%= pagy.items %></span>
+                </span>
+              <span class="mdc-select__dropdown-icon">
+                  <svg
+                    class="mdc-select__dropdown-icon-graphic"
+                    viewBox="7 10 10 5">
+                    <polygon
+                      class="mdc-select__dropdown-icon-inactive"
+                      stroke="none"
+                      fill-rule="evenodd"
+                      points="7 10 12 15 17 10">
+                    </polygon>
+                    <polygon
+                      class="mdc-select__dropdown-icon-active"
+                      stroke="none"
+                      fill-rule="evenodd"
+                      points="7 15 12 10 17 15">
+                    </polygon>
+                  </svg>
+                </span>
+              <span class="mdc-notched-outline mdc-notched-outline--notched">
+                  <span class="mdc-notched-outline__leading"></span>
+                  <span class="mdc-notched-outline__trailing"></span>
+                </span>
+            </div>
+
+            <div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" role="listbox">
+              <ul class="mdc-list">
+                <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"
+                    aria-selected="true" role="option" data-value="10">
+                  <span class="mdc-list-item__ripple"></span>
+                  <span class="mdc-list-item__content">
+                      <span class="mdc-list-item__primary-text">10</span>
+                    </span>
+                </li>
+                <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"
+                    role="option" data-value="20">
+                  <span class="mdc-list-item__ripple"></span>
+                  <span class="mdc-list-item__content">
+                      <span class="mdc-list-item__primary-text">20</span>
+                    </span>
+                </li>
+                <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"
+                    role="option" data-value="100">
+                  <span class="mdc-list-item__ripple"></span>
+                  <span class="mdc-list-item__content">
+                      <span class="mdc-list-item__primary-text">100</span>
+                    </span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          </div>
+        <%- end -%>
+
+        <div class="mdc-data-table__pagination-navigation">
+          <div class="mdc-data-table__pagination-total">
+            <%= pagy.from %>‑<%= pagy.to %> of <%= pagy.count %>
+          </div>
+          <%= button_to url, method: :get, params: table_params.merge(page: 1),
+                        data: { 'first-page' => "true", turbo_frame: table_body, turbo_action: 'advance' },
+                        disabled: pagy.page == 1, class: "mdc-icon-button material-icons mdc-data-table__pagination-button" do %>
+            <div class="mdc-button__icon">first_page</div>
+          <% end %>
+          <%= button_to url, method: :get, params: table_params.merge(page: pagy.prev),
+                        data: { 'prev-page' => "true", turbo_frame: table_body, turbo_action: 'advance' },
+                        disabled: pagy.prev.nil?, class: "mdc-icon-button material-icons mdc-data-table__pagination-button" do %>
+            <div class="mdc-button__icon">chevron_left</div>
+          <% end %>
+          <%= button_to url, method: :get, params: table_params.merge(page: pagy.next),
+                        data: { 'next-page' => "true", turbo_frame: table_body, turbo_action: 'advance' },
+                        disabled: pagy.next.nil?, class: "mdc-icon-button material-icons mdc-data-table__pagination-button" do %>
+            <div class="mdc-button__icon">chevron_right</div>
+          <% end %>
+          <%= button_to url, method: :get, params: table_params.merge(page: pagy.last),
+                        data: { 'last-page' => "true", turbo_frame: table_body, turbo_action: 'advance' },
+                        disabled: pagy.page == pagy.last, class: "mdc-icon-button material-icons mdc-data-table__pagination-button" do %>
+            <div class="mdc-button__icon">last_page</div>
+          <% end %>
+        </div>
+        </div>
+  </div>
+</div>

app/views/layouts/turbo_material/lookbook.html.erb

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Turbo material</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+  <link href="//cdn.jsdelivr.net/npm/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+  <script src="//cdn.jsdelivr.net/npm/material-components-web@latest/dist/material-components-web.min.js"></script>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <%= stylesheet_link_tag "turbo_material/tailwind", "data-turbo-track": "reload" %>
+  <%= javascript_importmap_tags %>
+  <%= javascript_import_module_tag "turbo_material/application" %>
+  <%= stylesheet_link_tag    "turbo_material/application", media: "all" %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

lib/turbo_material/engine.rb

@@ -11,6 +11,7 @@ class Engine < ::Rails::Engine
         helper TurboMaterial::CheckboxHelper
         helper TurboMaterial::ChipsInputHelper
         helper TurboMaterial::ChipsSelectHelper
+        helper TurboMaterial::DataTableHelper
         helper TurboMaterial::MenuButtonHelper
         helper TurboMaterial::ModalHelper
         helper TurboMaterial::RadioHelper

lib/turbo_material/version.rb

@@ -1,3 +1,3 @@
 module TurboMaterial
-  VERSION = "0.2.1"
+  VERSION = "0.2.2"
 end