Merge branch 'release/v0.2.13'

full-stack-biz · Aug 29, 2024 · b9242b9 · b9242b9
2 parents 0497180 + dcd35df
commit b9242b9
Show file tree

Hide file tree

Showing 5 changed files with 344 additions and 4 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    turbo_material (0.2.10)
+    turbo_material (0.2.13)
       importmap-rails (~> 2.0.1)
       rails (~> 7.1, >= 7.1.2)
       stimulus-rails (~> 1.3)

diff --git a/README.md b/README.md
@@ -232,6 +232,346 @@ 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' %>
+```
+
+#### Options
+
+| Option | Type | Description |
+| --- | --- | --- |
+| `title` | String | Title of the modal |
+
+### 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`:

diff --git a/app/views/components/_input.html.erb b/app/views/components/_input.html.erb
@@ -1,4 +1,4 @@
-<%# 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: {}) %>
+<%# 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) ? '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' -%>

diff --git a/app/views/components/_select.html.erb b/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 %>

diff --git a/lib/turbo_material/version.rb b/lib/turbo_material/version.rb
@@ -1,3 +1,3 @@
 module TurboMaterial
-  VERSION = "0.2.12"
+  VERSION = "0.2.13"
 end