turbo_material 0.2.12 → 0.2.15

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 67b932de7493d017be59e254dc7ae48179d023b4bac61d61b4730e40bfdfbf9a
-  data.tar.gz: 362ba6b7f0e92008cef044cad38d450e91d2ee68653f3307a08a02681b9c5763
+  metadata.gz: 12e357755a746bce7c573a86ee1157e89530593e23de2d99a0a316faa60fe029
+  data.tar.gz: eb47d431c70574d7e9867bc14a69134eb86c267f464a7d046fd979d0a56ae993
 SHA512:
-  metadata.gz: b51b0c7045bb6f4a49631162a9b9a0842866fe1c1a5ccf79b5b3cf2342c689cd02f15e7c98171bb87f03f012b4c6ef6d4950335311ba04b79c3c39344ee761ac
-  data.tar.gz: 06deb3cb34455a0d0c12f8003893e95d8ffa5ebaf4a53634f4eccc4dbd909b67e75133b062c1fd02342a05aab1f4812b244a7debf8a179c3ad46716ae8e835ac
+  metadata.gz: 73a70273d93fc18fa0b444e83bc26f465b5b75e375860cb6d5e94838c8ad6d5f0c469adf3d0a9c0f56bef0f86987af955c3b20424e0bcc8b780c7ddfaae1a5aa
+  data.tar.gz: d518fe5e3a8db071e04451779ecd6cddcef749e4ca0023a812059bbc1024d73ef2d518d205c6cac6b728a7388ad2269217c2f0caf719cb6593305ad40ee73ce6

data/README.md

@@ -232,6 +232,359 @@ Or install it yourself as:
 $ gem install turbo_material
 ```
 
+## Available components
+
+- [Input](#input)
+- [Checkbox](#checkbox)
+- [Radio button](#radio-button)
+- [Switch button](#switch-button)
+- [Select](#select)
+- [Chip Set](#chip-set)
+- [Chip](#chip)
+- [Chips Input](#chips-input)
+- [Chips Select](#chips-select)
+- [Data Table](#data-table)
+- [Data Table Row Checkbox](#data-table-row-checkbox)
+- [Data Table Sortable Header](#data-table-sortable-header)
+- [Data Table Header](#data-table-header)
+- [Menu Button](#menu-button)
+- [Modal](#modal)
+- [Tooltip](#tooltip)
+
+### Input
+
+Implements [Material Design Textfield](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield) component.
+
+```erb
+<%= material_input label: 'New password', name: 'password', required: true, parent: resource,
+                   id: "user-password", form: form, type: 'password',
+                   value: resource.password %>
+```
+
+#### Options
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `label` | String | Input label text |
+| `name` | String | Name of the input |
+| `required` | Boolean | Whether the input is required |
+| `disabled` | Boolean | Whether the input is disabled |
+| `parent` | Object | Parent object |
+| `id` | String | ID of the input |
+| `form` | Object | Form object |
+| `type` | String | Type of the input conforming to HTML input type specification (e.g., text, password) |
+| `value` | String | Value of the input |
+| `style` | String | Style of the input (filled, outlined) |
+| `custom_css` | String | Custom CSS class |
+| `custom_controller` | String | Custom Stimulus controller |
+
+
+### Checkbox
+
+Implements [Material Design Checkbox](https://github.com/material-components/material-components-web/tree/master/packages/mdc-checkbox) component.
+
+```erb
+<%= material_checkbox name: 'remember_me', id: 'remember-me', form: form, label: 'Remember me' %>
+```
+
+#### Options
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `name` | String | Checkbox name |
+| `id` | String | Checkbox ID |
+| `form` | Object | Form object |
+| `label` | String | Checkbox label |
+| `disabled` | Boolean | Whether the checkbox is disabled |
+| `checked` | Boolean | Whether the checkbox is checked |
+| `checked_value` | String | Value when the checkbox is checked |
+| `unchecked_value` | String | Value when the checkbox is unchecked |
+| `source_override` | String | Used to populate checkbox value from another form field |
+
+### Radio button
+
+Implements [Material Design Radio button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-radio) component.
+
+```erb
+<%= material_radio name: 'option', id: 'option-1', form: form, label: 'Option 1' %>
+```
+
+#### Options
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `name` | String | Radio button name |
+| `id` | String | Radio button ID |
+| `form` | Object | Form object |
+| `label` | String | Radio button label |
+| `disabled` | Boolean | Whether the radio button is disabled |
+| `value` | String | Radio button value |
+| `parent` | Object | Radio button parent |
+
+### Switch button
+
+Implements [Material Design Switch button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch) component.
+
+```erb
+<%= material_switch label: 'Switch', true_label: 'On', false_label: 'Off' %>
+```
+
+#### Options
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `label` | String | Switch button label text |
+| `disabled` | Boolean | Whether the switch is disabled |
+| `required` | Boolean | Whether the switch is required |
+| `true_label` | String | Text that displays when switch is on |
+| `false_label` | String | Text that displays when switch is off |
+
+### Select
+
+Implements [Material Design Select](https://github.com/material-components/material-components-web/tree/master/packages/mdc-select) component.
+
+```erb
+<%= material_select name: 'country', id: 'country', form: form, options: Carmen::Country.all, selected_text: 'Select country' %>
+```
+
+#### Options
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `name` | String | Select name |
+| `id` | String | Select ID |
+| `disabled` | Boolean | Whether the select is disabled |
+| `required` | Boolean | Whether the select is required |
+| `form` | Object | Form object |
+| `options` | Array | Select options |
+| `selected_text` | String | Text that displays when nothing is selected |
+| `fixed` | Boolean | Whether select uses `mdc-menu-surface--fixed` or `mdc-menu-surface--fullwidth` |
+| `outlined` | Boolean | Whether the select is outlined |
+| `additional_classes` | String | Additional CSS classes for select |
+| `hint` | String | Hint text to display |
+
+### Chip Set
+
+Implements [Material Design Chip Set](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips) component.
+
+```erb
+<%= material_chip_set chips: [{label: 'Chip 1'}, {label: 'Chip 2'}] %>
+```
+
+#### Options
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `chips` | Array | Array of chips to be included in the chip set |
+
+### Chip
+
+Implements [Material Design Chip](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips) component.
+
+```erb
+<%= material_chip label: 'Chip' %>
+```
+
+#### Options
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `label` | String | Chip label text |
+
+### Chips Input
+
+Implements [Material Design Chips Input](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips) component.
+
+```erb
+<%= material_chips_input form: form, name: 'tags', label: 'Tags', selected: [{label: 'Tag 1'}, {label: 'Tag 2'}], options: [{label: 'Option 1'}, {label: 'Option 2'}] %>
+```
+
+#### Options
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `form` | Object | Form object |
+| `disabled` | Boolean | Whether the input is disabled |
+| `required` | Boolean | Whether the input is required |
+| `name` | String | Name of the input |
+| `label` | String | Input label text |
+| `id` | String | ID of the input |
+| `frame` | String | Frame of the input |
+| `suffix` | String | Suffix of the input |
+| `type` | String | Type of the input |
+| `url` | String | URL for fetching options |
+| `selected` | Array | Array of selected chips |
+| `options` | Array | Array of available options |
+| `value` | String | Value of the input |
+| `fixed` | Boolean | Whether the input is fixed |
+| `prefetch` | Boolean | Whether to prefetch options |
+| `additional_query_params` | Hash | Additional query parameters |
+
+### Chips Select
+
+Implements [Material Design Chips Select](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips) component.
+
+```erb
+<%= material_chips_select form: form, name: 'tags', label: 'Tags', options: [{label: 'Option 1', value: '1'}, {label: 'Option 2', value: '2'}] %>
+```
+
+#### Options
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `form` | Object | Form object |
+| `disabled` | Boolean | Whether the select is disabled |
+| `required` | Boolean | Whether the select is required |
+| `name` | String | Name of the select |
+| `label` | String | Select label text |
+| `id` | String | ID of the select |
+| `value` | String | Value of the select |
+| `url` | String | URL for fetching options |
+| `frame` | String | Frame of the select |
+| `source_override` | String | Source override for the select |
+| `options` | Array | Array of available options |
+| `confirmable` | Boolean | Whether the select is confirmable |
+| `query_string` | String | Query string for fetching options |
+| `modal_name` | String | Name of the modal |
+| `modal_url` | String | URL of the modal |
+| `chip_css` | String | CSS class for the chip |
+| `fixed` | Boolean | Whether the select is fixed |
+
+### Data Table
+
+Implements [Material Design Data Table](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table) component.
+
+```erb
+<%= material_data_table name: 'Users', table_body: 'users-table-body', url: users_path, table_params: params, records: @users, selected_records: @selected_users, pagy: @pagy, table_headers_partial: 'users/table_headers', table_contents_partial: 'users/table_contents' %>
+```
+
+#### Options
+
+| Option | Type | Description                      |
+| --- | --- |----------------------------------|
+| `name` | String | Name of the data table           |
+| `table_body` | String | ID of the table body             |
+| `url` | String | URL for fetching table data      |
+| `table_params` | Hash | Parameters for the table         |
+| `records` | Array | Array of records to be displayed |
+| `selected_records` | Array | Array of selected records        |
+| `pagy` | Object | Pagy object for pagination       |
+| `table_headers_partial` | String | Partial name for table headers   |
+| `table_contents_partial` | String | Partial name for table contents  |
+
+### Data Table Row Checkbox
+
+Implements [Material Design Data Table Row Checkbox](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table) component.
+
+```erb
+<%= material_data_table_row_checkbox id: record.id, checked: @selected_users.include?(record.id.to_s) %>
+```
+
+#### Options
+
+| Option | Type | Description                      |
+| --- | --- |----------------------------------|
+| `id` | String | ID of the row checkbox           |
+| `checked` | Boolean | Whether the row checkbox is checked |
+
+### Data Table Sortable Header
+
+Implements [Material Design Data Table Sortable Header](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table) component.
+
+```erb
+<%= material_data_table_sortable_header label: 'First Name', sort_value: aria_sort('first_name'), column_id: 'first_name' %>
+```
+
+#### Options
+
+| Option | Type | Description                      |
+| --- | --- |----------------------------------|
+| `label` | String | Label of the sortable header   |
+| `sort_value` | String | Value of the sortable header  |
+| `column_id` | String | ID of the sortable header     |
+
+##### aria_sort Helper
+
+`aria_sort` helper is used to generate sort value for the header. It accepts one argument, which is the column name. It returns `descending` or `ascending` value depending on the current values of `params[:order]` and `params[:reverse]`.
+
+```erb
+<%= aria_sort('first_name') %>
+```
+
+
+### Data Table Header
+
+Implements [Material Design Data Table Header](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table) component.
+
+```erb
+<%= material_data_table_header %>
+```
+
+#### Options
+
+| Option | Type | Description                      |
+| --- | --- |----------------------------------|
+| `label` | String | Label of the header            |
+| `column_id` | String | ID of the header              |
+
+### Menu Button
+
+Implements [Material Design Menu Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu) component.
+
+```erb
+<%= material_menu_button button_text: 'Menu', menu_contents_partial: 'common/menu_contents' %>
+```
+
+#### Options
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `button_text` | String | Text of the menu button |
+| `menu_contents_partial` | String | Partial for menu contents |
+
+### Modal
+
+Implements [Material Design Modal](https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog) component.
+
+```erb
+<%= material_modal title: 'Modal Title', contents_partial: 'common/modal_contents' %>
+```
+or with block
+```erb
+<%= material_modal title: 'Modal Title' do %>
+  Contents
+<% end %>
+```
+
+#### Options
+
+| Option | Type | Description               |
+| --- | --- |-------------------------------------------------------------------------|
+| `title` | String | Title of the modal |
+| `contents_partial` | String | Partial for modal contents |
+| `cancel_button_text` | String | Text of the cancel button |
+| `ok_button_text` | String | Text of the ok button     |
+| `opened` | Boolean | Whether the modal is opened |
+| `dialog_surface_custom_css` | String | Custom CSS class for the dialog surface |
+| `close_action_url` | String | URL for navigating to on modal close |
+| `form` | Object | Form object for form-centric modals, replaces ok button with form submit |
+
+### Tooltip
+
+Implements [Material Design Tooltip](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tooltip) component.
+
+```erb
+<%= material_tooltip id: dom_id(record) do %>
+  Tooltip content
+<% end %>
+```
+
+#### Options
+
+| Option | Type | Description                          |
+| --- | --- |--------------------------------------|
+| `id` | String | DOM ID of the element we displaying the tooltip for |
+
 ## Lookbook documentation for components
 
 Gem implements [Lookbook](https://lookbook.build) documentation for all components. To use it in the application, add `gem 'lookbook'` to your Gemfile and run `bundle install`. Then add following to your `config/application.rb`:

data/app/assets/javascripts/turbo_material/material_dialog_controller.js

@@ -4,7 +4,8 @@ export default class extends Controller {
     dialog = undefined;
 
     static values = {
-        opened: Boolean
+        opened: Boolean,
+        closeActionUrl: String
     }
 
     connect() {
@@ -21,6 +22,9 @@ export default class extends Controller {
 
     close() {
         this.dialog.close();
+        if (this.closeActionUrlValue) {
+            window.location.href = this.closeActionUrlValue;
+        }
     }
 
     open() {

data/app/helpers/turbo_material/modal_helper.rb

@@ -1,7 +1,9 @@
 module TurboMaterial
   module ModalHelper
-    def material_modal(kwargs = {})
-      render "components/modal", **kwargs
+    def material_modal(kwargs = {}, &block)
+      render "components/modal", **kwargs do
+        capture(&block) if block_given?
+      end
     end
   end
 end

data/app/views/components/_input.html.erb

@@ -1,9 +1,9 @@
-<%# locals: (form:, custom_controller: nil, custom_css: nil, disabled: false, required: false, name:, label: nil, id:, checked: false, 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: {}) %>
-<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 %>"
+<%# 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: {}) %>
+<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 %>"
        data-controller="<%= custom_controller || 'material-input' %>" <% if frame %>data-frame="<%= frame %>"<% end %>>
   <%- if style == 'filled' -%>
     <span class="mdc-text-field__ripple"></span>
-    <span class="mdc-floating-label <%= value || form&.object&.[](name.to_sym) ? 'mdc-floating-label--float-above' : '' %>" id="<%= id %>-label">
+    <span class="mdc-floating-label <%= (value || form&.object&.[](name.to_sym)).present? ? 'mdc-floating-label--float-above' : '' %>" id="<%= id %>-label">
       <%= label || name.capitalize %>
     </span>
   <%- else -%>

data/app/views/components/_modal.html.erb

@@ -1,37 +1,48 @@
-<%# locals: (title:) %>
-<turbo-frame id="modal">
-  <div class="mdc-dialog" data-controller="material-dialog" data-material-dialog-opened-value="true">
-    <div class="mdc-dialog__container">
-      <div class="mdc-dialog__surface !min-w-[36rem] !min-h-[14rem]"
-             role="alertdialog"
-             aria-modal="true"
-             aria-labelledby="my-dialog-title"
-             aria-describedby="my-dialog-content">
-          <h2 class="mdc-dialog__title">
-            <div class="flex items-center justify-between">
-              <span><%= title %></span>
-              <button type="button" class="mdc-icon-button mdc-dialog__close" data-mdc-ripple-is-unbounded data-action="click->material-dialog#close">
-                <div class="mdc-icon-button__ripple"></div>
-                <span class="mdc-icon-button__focus-ring"></span>
-                <i class="material-icons !text-white">close</i>
-              </button>
-            </div>
-          </h2>
-          <div class="mdc-dialog__content">
-            Contents
-          </div>
-          <div class="mdc-dialog__actions">
-            <button type="button" class="mdc-button mdc-dialog__button mdc-dialog__close" data-action="click->material-dialog#close">
-              <div class="mdc-button__ripple"></div>
-              <span class="mdc-button__label">Cancel</span>
-            </button>
-            <button type="button" class="mdc-button mdc-dialog__button" data-controller="material-ripple">
-              <div class="mdc-button__ripple"></div>
-              <span class="mdc-button__label">OK</span>
-            </button>
-          </div>
+<%# 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) %>
+<div class="mdc-dialog" data-controller="material-dialog" data-material-dialog-opened-value="<%= opened %>"
+     data-material-dialog-close-action-url-value="<%= close_action_url %>">
+  <div class="mdc-dialog__container">
+    <div class="mdc-dialog__surface <%= dialog_surface_custom_css %>"
+         role="alertdialog"
+         aria-modal="true"
+         aria-labelledby="my-dialog-title"
+         aria-describedby="my-dialog-content">
+      <h2 class="mdc-dialog__title bg-secondary">
+        <div class="!text-white flex items-center justify-between">
+          <span><%= title %></span>
+          <button type="button" class="mdc-icon-button mdc-dialog__close" data-mdc-ripple-is-unbounded data-action="click->material-dialog#close">
+            <div class="mdc-icon-button__ripple"></div>
+            <span class="mdc-icon-button__focus-ring"></span>
+            <i class="material-icons !text-white">close</i>
+          </button>
         </div>
+      </h2>
+      <div class="mdc-dialog__content">
+        <%- if block_given? -%>
+          <%= yield %>
+        <%- else -%>
+          <%= render partial: contents_partial, locals: { form: form } %>
+        <% end %>
+      </div>
+      <div class="mdc-dialog__actions">
+        <button type="button" class="mdc-button mdc-dialog__button mdc-dialog__close" data-action="click->material-dialog#close">
+          <div class="mdc-button__ripple"></div>
+          <span class="mdc-button__label"><%= cancel_button_text %></span>
+        </button>
+        <%- if form.present? -%>
+          <%= form.button type: :submit, class: "mdc-button mdc-dialog__button", data: { controller: 'material-ripple' } do %>
+            <div class="mdc-button__ripple"></div>
+            <span class="mdc-button__label"><%= ok_button_text %></span>
+          <% end %>
+        <%- else -%>
+          <button type="button" class="mdc-button mdc-dialog__button" data-controller="material-ripple">
+            <div class="mdc-button__ripple"></div>
+            <span class="mdc-button__label"><%= ok_button_text %></span>
+          </button>
+        <%- end -%>
+      </div>
     </div>
-    <div class="mdc-dialog__scrim"></div>
   </div>
-</turbo-frame>
+  <div class="mdc-dialog__scrim"></div>
+</div>
+

data/app/views/components/_select.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (form:, disabled: false, required: false, name:, label: nil, id:, checked: false, value: nil, parent: nil, frame: nil, selected_text: nil, fixed: false, options: [], hint: nil, helper: nil, additional_classes: 'w-full', outlined: false) %>
+<%# locals: (form:, disabled: false, required: false, name:, label: nil, id:, value: nil, parent: nil, frame: nil, selected_text: nil, fixed: false, options: [], hint: nil, helper: nil, additional_classes: 'w-full', outlined: false) %>
 <div class="mdc-select <%= outlined ? 'mdc-select--outlined' : 'mdc-select--filled' %> <%= label ? '' : 'mdc-select--no-label' %> <%= disabled ? ' mdc-select--disabled' : '' %><%= required ? ' mdc-select--required' : '' %> <%= additional_classes %>"
      data-controller="material-select" <% if frame %> data-frame="<%= frame %>"<% end %> id="<%= id %>">
   <%= form.hidden_field name.to_sym, value: value %>

data/lib/turbo_material/version.rb

@@ -1,3 +1,3 @@
 module TurboMaterial
-  VERSION = "0.2.12"
+  VERSION = "0.2.15"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: turbo_material
 version: !ruby/object:Gem::Version
-  version: 0.2.12
+  version: 0.2.15
 platform: ruby
 authors:
 - Sergey Moiseev
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-08-28 00:00:00.000000000 Z
+date: 2024-09-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails