turbo_material 0.2.12 → 0.2.13
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 +4 -4
- data/README.md +340 -0
- data/app/views/components/_input.html.erb +1 -1
- data/app/views/components/_select.html.erb +1 -1
- data/lib/turbo_material/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2b60bf0da11d91e4f9ba1d31daf5a614e2a497651f6a80c5efd2444a8e00d78f
|
4
|
+
data.tar.gz: 5617cbfcdab7d33db1a65b789fd4a557f3e11ed8cc7271ceb1c05d437600dbec
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1d04c9edcc67740af090e49d13c440ed2a6cc8498eae34fca587cfe5a294b3484280e3d529f1bc8b390faf712b5131e769d55340a5bd3cc7f3389c1ef5407f5c
|
7
|
+
data.tar.gz: 565eafff4908c767514d98cf6499a3e55db4327d41da418244be40fd6117c5e99d4a5c01893152ba0edb82feac1d5eb3a0bb4d95c9967cc125cba75a80310530
|
data/README.md
CHANGED
@@ -232,6 +232,346 @@ Or install it yourself as:
|
|
232
232
|
$ gem install turbo_material
|
233
233
|
```
|
234
234
|
|
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
|
+
|
235
575
|
## Lookbook documentation for components
|
236
576
|
|
237
577
|
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`:
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%# locals: (form:, custom_controller: nil, custom_css: nil, disabled: false, required: false, name:, label: nil, id:,
|
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: {}) %>
|
2
2
|
<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 %>"
|
3
3
|
data-controller="<%= custom_controller || 'material-input' %>" <% if frame %>data-frame="<%= frame %>"<% end %>>
|
4
4
|
<%- if style == 'filled' -%>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%# locals: (form:, disabled: false, required: false, name:, label: nil, id:,
|
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) %>
|
2
2
|
<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 %>"
|
3
3
|
data-controller="material-select" <% if frame %> data-frame="<%= frame %>"<% end %> id="<%= id %>">
|
4
4
|
<%= form.hidden_field name.to_sym, value: value %>
|
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.
|
4
|
+
version: 0.2.13
|
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-08-
|
11
|
+
date: 2024-08-29 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|