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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 67b932de7493d017be59e254dc7ae48179d023b4bac61d61b4730e40bfdfbf9a
4
- data.tar.gz: 362ba6b7f0e92008cef044cad38d450e91d2ee68653f3307a08a02681b9c5763
3
+ metadata.gz: 2b60bf0da11d91e4f9ba1d31daf5a614e2a497651f6a80c5efd2444a8e00d78f
4
+ data.tar.gz: 5617cbfcdab7d33db1a65b789fd4a557f3e11ed8cc7271ceb1c05d437600dbec
5
5
  SHA512:
6
- metadata.gz: b51b0c7045bb6f4a49631162a9b9a0842866fe1c1a5ccf79b5b3cf2342c689cd02f15e7c98171bb87f03f012b4c6ef6d4950335311ba04b79c3c39344ee761ac
7
- data.tar.gz: 06deb3cb34455a0d0c12f8003893e95d8ffa5ebaf4a53634f4eccc4dbd909b67e75133b062c1fd02342a05aab1f4812b244a7debf8a179c3ad46716ae8e835ac
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:, 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: {}) %>
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:, 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) %>
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 %>
@@ -1,3 +1,3 @@
1
1
  module TurboMaterial
2
- VERSION = "0.2.12"
2
+ VERSION = "0.2.13"
3
3
  end
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.12
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-28 00:00:00.000000000 Z
11
+ date: 2024-08-29 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails