Skip to content

Commit b9242b9

Browse files
bopmbopm
committed
Merge branch 'release/v0.2.13'
2 parents 0497180 + dcd35df commit b9242b9

File tree

5 files changed

+344
-4
lines changed

5 files changed

+344
-4
lines changed

‎Gemfile.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
PATH
22
remote: .
33
specs:
4-
turbo_material (0.2.10)
4+
turbo_material (0.2.13)
55
importmap-rails (~> 2.0.1)
66
rails (~> 7.1, >= 7.1.2)
77
stimulus-rails (~> 1.3)

‎README.md

Lines changed: 340 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,346 @@ Or install it yourself as:
232232
$ gem install turbo_material
233233
```
234234

235+
## Available components
236+
237+
- [Input](#input)
238+
- [Checkbox](#checkbox)
239+
- [Radio button](#radio-button)
240+
- [Switch button](#switch-button)
241+
- [Select](#select)
242+
- [Chip Set](#chip-set)
243+
- [Chip](#chip)
244+
- [Chips Input](#chips-input)
245+
- [Chips Select](#chips-select)
246+
- [Data Table](#data-table)
247+
- [Data Table Row Checkbox](#data-table-row-checkbox)
248+
- [Data Table Sortable Header](#data-table-sortable-header)
249+
- [Data Table Header](#data-table-header)
250+
- [Menu Button](#menu-button)
251+
- [Modal](#modal)
252+
- [Tooltip](#tooltip)
253+
254+
### Input
255+
256+
Implements [Material Design Textfield](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield) component.
257+
258+
```erb
259+
<%= material_input label: 'New password', name: 'password', required: true, parent: resource,
260+
id: "user-password", form: form, type: 'password',
261+
value: resource.password %>
262+
```
263+
264+
#### Options
265+
266+
| Option | Type | Description |
267+
| --- | --- | --- |
268+
| `label` | String | Input label text |
269+
| `name` | String | Name of the input |
270+
| `required` | Boolean | Whether the input is required |
271+
| `disabled` | Boolean | Whether the input is disabled |
272+
| `parent` | Object | Parent object |
273+
| `id` | String | ID of the input |
274+
| `form` | Object | Form object |
275+
| `type` | String | Type of the input conforming to HTML input type specification (e.g., text, password) |
276+
| `value` | String | Value of the input |
277+
| `style` | String | Style of the input (filled, outlined) |
278+
| `custom_css` | String | Custom CSS class |
279+
| `custom_controller` | String | Custom Stimulus controller |
280+
281+
282+
### Checkbox
283+
284+
Implements [Material Design Checkbox](https://github.com/material-components/material-components-web/tree/master/packages/mdc-checkbox) component.
285+
286+
```erb
287+
<%= material_checkbox name: 'remember_me', id: 'remember-me', form: form, label: 'Remember me' %>
288+
```
289+
290+
#### Options
291+
292+
| Option | Type | Description |
293+
| --- | --- | --- |
294+
| `name` | String | Checkbox name |
295+
| `id` | String | Checkbox ID |
296+
| `form` | Object | Form object |
297+
| `label` | String | Checkbox label |
298+
| `disabled` | Boolean | Whether the checkbox is disabled |
299+
| `checked` | Boolean | Whether the checkbox is checked |
300+
| `checked_value` | String | Value when the checkbox is checked |
301+
| `unchecked_value` | String | Value when the checkbox is unchecked |
302+
| `source_override` | String | Used to populate checkbox value from another form field |
303+
304+
### Radio button
305+
306+
Implements [Material Design Radio button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-radio) component.
307+
308+
```erb
309+
<%= material_radio name: 'option', id: 'option-1', form: form, label: 'Option 1' %>
310+
```
311+
312+
#### Options
313+
314+
| Option | Type | Description |
315+
| --- | --- | --- |
316+
| `name` | String | Radio button name |
317+
| `id` | String | Radio button ID |
318+
| `form` | Object | Form object |
319+
| `label` | String | Radio button label |
320+
| `disabled` | Boolean | Whether the radio button is disabled |
321+
| `value` | String | Radio button value |
322+
| `parent` | Object | Radio button parent |
323+
324+
### Switch button
325+
326+
Implements [Material Design Switch button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch) component.
327+
328+
```erb
329+
<%= material_switch label: 'Switch', true_label: 'On', false_label: 'Off' %>
330+
```
331+
332+
#### Options
333+
334+
| Option | Type | Description |
335+
| --- | --- | --- |
336+
| `label` | String | Switch button label text |
337+
| `disabled` | Boolean | Whether the switch is disabled |
338+
| `required` | Boolean | Whether the switch is required |
339+
| `true_label` | String | Text that displays when switch is on |
340+
| `false_label` | String | Text that displays when switch is off |
341+
342+
### Select
343+
344+
Implements [Material Design Select](https://github.com/material-components/material-components-web/tree/master/packages/mdc-select) component.
345+
346+
```erb
347+
<%= material_select name: 'country', id: 'country', form: form, options: Carmen::Country.all, selected_text: 'Select country' %>
348+
```
349+
350+
#### Options
351+
352+
| Option | Type | Description |
353+
| --- | --- | --- |
354+
| `name` | String | Select name |
355+
| `id` | String | Select ID |
356+
| `disabled` | Boolean | Whether the select is disabled |
357+
| `required` | Boolean | Whether the select is required |
358+
| `form` | Object | Form object |
359+
| `options` | Array | Select options |
360+
| `selected_text` | String | Text that displays when nothing is selected |
361+
| `fixed` | Boolean | Whether select uses `mdc-menu-surface--fixed` or `mdc-menu-surface--fullwidth` |
362+
| `outlined` | Boolean | Whether the select is outlined |
363+
| `additional_classes` | String | Additional CSS classes for select |
364+
| `hint` | String | Hint text to display |
365+
366+
### Chip Set
367+
368+
Implements [Material Design Chip Set](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips) component.
369+
370+
```erb
371+
<%= material_chip_set chips: [{label: 'Chip 1'}, {label: 'Chip 2'}] %>
372+
```
373+
374+
#### Options
375+
376+
| Option | Type | Description |
377+
| --- | --- | --- |
378+
| `chips` | Array | Array of chips to be included in the chip set |
379+
380+
### Chip
381+
382+
Implements [Material Design Chip](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips) component.
383+
384+
```erb
385+
<%= material_chip label: 'Chip' %>
386+
```
387+
388+
#### Options
389+
390+
| Option | Type | Description |
391+
| --- | --- | --- |
392+
| `label` | String | Chip label text |
393+
394+
### Chips Input
395+
396+
Implements [Material Design Chips Input](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips) component.
397+
398+
```erb
399+
<%= material_chips_input form: form, name: 'tags', label: 'Tags', selected: [{label: 'Tag 1'}, {label: 'Tag 2'}], options: [{label: 'Option 1'}, {label: 'Option 2'}] %>
400+
```
401+
402+
#### Options
403+
404+
| Option | Type | Description |
405+
| --- | --- | --- |
406+
| `form` | Object | Form object |
407+
| `disabled` | Boolean | Whether the input is disabled |
408+
| `required` | Boolean | Whether the input is required |
409+
| `name` | String | Name of the input |
410+
| `label` | String | Input label text |
411+
| `id` | String | ID of the input |
412+
| `frame` | String | Frame of the input |
413+
| `suffix` | String | Suffix of the input |
414+
| `type` | String | Type of the input |
415+
| `url` | String | URL for fetching options |
416+
| `selected` | Array | Array of selected chips |
417+
| `options` | Array | Array of available options |
418+
| `value` | String | Value of the input |
419+
| `fixed` | Boolean | Whether the input is fixed |
420+
| `prefetch` | Boolean | Whether to prefetch options |
421+
| `additional_query_params` | Hash | Additional query parameters |
422+
423+
### Chips Select
424+
425+
Implements [Material Design Chips Select](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips) component.
426+
427+
```erb
428+
<%= material_chips_select form: form, name: 'tags', label: 'Tags', options: [{label: 'Option 1', value: '1'}, {label: 'Option 2', value: '2'}] %>
429+
```
430+
431+
#### Options
432+
433+
| Option | Type | Description |
434+
| --- | --- | --- |
435+
| `form` | Object | Form object |
436+
| `disabled` | Boolean | Whether the select is disabled |
437+
| `required` | Boolean | Whether the select is required |
438+
| `name` | String | Name of the select |
439+
| `label` | String | Select label text |
440+
| `id` | String | ID of the select |
441+
| `value` | String | Value of the select |
442+
| `url` | String | URL for fetching options |
443+
| `frame` | String | Frame of the select |
444+
| `source_override` | String | Source override for the select |
445+
| `options` | Array | Array of available options |
446+
| `confirmable` | Boolean | Whether the select is confirmable |
447+
| `query_string` | String | Query string for fetching options |
448+
| `modal_name` | String | Name of the modal |
449+
| `modal_url` | String | URL of the modal |
450+
| `chip_css` | String | CSS class for the chip |
451+
| `fixed` | Boolean | Whether the select is fixed |
452+
453+
### Data Table
454+
455+
Implements [Material Design Data Table](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table) component.
456+
457+
```erb
458+
<%= 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' %>
459+
```
460+
461+
#### Options
462+
463+
| Option | Type | Description |
464+
| --- | --- |----------------------------------|
465+
| `name` | String | Name of the data table |
466+
| `table_body` | String | ID of the table body |
467+
| `url` | String | URL for fetching table data |
468+
| `table_params` | Hash | Parameters for the table |
469+
| `records` | Array | Array of records to be displayed |
470+
| `selected_records` | Array | Array of selected records |
471+
| `pagy` | Object | Pagy object for pagination |
472+
| `table_headers_partial` | String | Partial name for table headers |
473+
| `table_contents_partial` | String | Partial name for table contents |
474+
475+
### Data Table Row Checkbox
476+
477+
Implements [Material Design Data Table Row Checkbox](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table) component.
478+
479+
```erb
480+
<%= material_data_table_row_checkbox id: record.id, checked: @selected_users.include?(record.id.to_s) %>
481+
```
482+
483+
#### Options
484+
485+
| Option | Type | Description |
486+
| --- | --- |----------------------------------|
487+
| `id` | String | ID of the row checkbox |
488+
| `checked` | Boolean | Whether the row checkbox is checked |
489+
490+
### Data Table Sortable Header
491+
492+
Implements [Material Design Data Table Sortable Header](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table) component.
493+
494+
```erb
495+
<%= material_data_table_sortable_header label: 'First Name', sort_value: aria_sort('first_name'), column_id: 'first_name' %>
496+
```
497+
498+
#### Options
499+
500+
| Option | Type | Description |
501+
| --- | --- |----------------------------------|
502+
| `label` | String | Label of the sortable header |
503+
| `sort_value` | String | Value of the sortable header |
504+
| `column_id` | String | ID of the sortable header |
505+
506+
##### aria_sort Helper
507+
508+
`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]`.
509+
510+
```erb
511+
<%= aria_sort('first_name') %>
512+
```
513+
514+
515+
### Data Table Header
516+
517+
Implements [Material Design Data Table Header](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table) component.
518+
519+
```erb
520+
<%= material_data_table_header %>
521+
```
522+
523+
#### Options
524+
525+
| Option | Type | Description |
526+
| --- | --- |----------------------------------|
527+
| `label` | String | Label of the header |
528+
| `column_id` | String | ID of the header |
529+
530+
### Menu Button
531+
532+
Implements [Material Design Menu Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu) component.
533+
534+
```erb
535+
<%= material_menu_button button_text: 'Menu', menu_contents_partial: 'common/menu_contents' %>
536+
```
537+
538+
#### Options
539+
540+
| Option | Type | Description |
541+
| --- | --- | --- |
542+
| `button_text` | String | Text of the menu button |
543+
| `menu_contents_partial` | String | Partial for menu contents |
544+
545+
### Modal
546+
547+
Implements [Material Design Modal](https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog) component.
548+
549+
```erb
550+
<%= material_modal title: 'Modal Title' %>
551+
```
552+
553+
#### Options
554+
555+
| Option | Type | Description |
556+
| --- | --- | --- |
557+
| `title` | String | Title of the modal |
558+
559+
### Tooltip
560+
561+
Implements [Material Design Tooltip](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tooltip) component.
562+
563+
```erb
564+
<%= material_tooltip id: dom_id(record) do %>
565+
Tooltip content
566+
<% end %>
567+
```
568+
569+
#### Options
570+
571+
| Option | Type | Description |
572+
| --- | --- |--------------------------------------|
573+
| `id` | String | DOM ID of the element we displaying the tooltip for |
574+
235575
## Lookbook documentation for components
236576

237577
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`:

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<%# 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: {}) %>
1+
<%# 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: {}) %>
22
<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 %>"
33
data-controller="<%= custom_controller || 'material-input' %>" <% if frame %>data-frame="<%= frame %>"<% end %>>
44
<%- if style == 'filled' -%>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<%# 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) %>
1+
<%# 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) %>
22
<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 %>"
33
data-controller="material-select" <% if frame %> data-frame="<%= frame %>"<% end %> id="<%= id %>">
44
<%= form.hidden_field name.to_sym, value: value %>

‎lib/turbo_material/version.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module TurboMaterial
2-
VERSION = "0.2.12"
2+
VERSION = "0.2.13"
33
end

0 commit comments

Comments
 (0)