material-components-web 1.0.1 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +5 -0
- data/README.md +4 -4
- data/app/views/{material_components_web/_mdc_checkbox.html.erb → mozaic/_mdc-checkbox.html.erb} +3 -3
- data/app/views/{material_components_web/_mdc_form_field.html.erb → mozaic/_mdc-form-field.html.erb} +0 -0
- data/app/views/mozaic/_mdc-radio.html.erb +8 -0
- data/lib/material-components-web.rb +2 -0
- data/lib/material_components_web/components.rb +11 -0
- data/lib/material_components_web/version.rb +1 -1
- metadata +23 -14
- data/app/helpers/material_components_web/mdc_checkbox/README.md +0 -39
- data/app/helpers/material_components_web/mdc_checkbox/view_helper.rb +0 -19
- data/app/helpers/material_components_web/mdc_form_field/README.md +0 -23
- data/app/helpers/material_components_web/mdc_form_field/view_helper.rb +0 -14
- data/app/helpers/material_components_web/mdc_radio/README.md +0 -38
- data/app/helpers/material_components_web/mdc_radio/view_helper.rb +0 -19
- data/app/views/material_components_web/_mdc_radio.html.erb +0 -8
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: fd7b735ede4c8f71401b13bd28e3351954507ab01eb540f696c4a8b8861d1ecb
|
4
|
+
data.tar.gz: 4dcb97a32910262f8bdb3dd85c1b19229a53b2ac5896f52df355ca2a6b9af62c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 001c44f9b76924d7f26aa26e93c8e66b21c5ead5d1d0b73f1940ce49e86d60c3bba3af51ee0c831e570a3dcc341225d9e2c35f5d47e0816535d201e91a54dc1b
|
7
|
+
data.tar.gz: 485ee2e4616c246cbce65344a488f3408cb6cb78b0646f4e45ead172776e618c8b1c58609fb0372a57deaad781cf4b7f6a34c7d6cd31e3b830f17489f10a5f27
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
[![Gem Version](https://badge.fury.io/rb/material-components-web.svg)](https://badge.fury.io/rb/material-components-web) <img src="https://travis-ci.org/jonhue/material-components-web.svg?branch=master" />
|
4
4
|
|
5
|
-
Material Components Web for Rails provides a set of helpers simplifying the
|
5
|
+
Material Components Web for Rails provides a set of helpers simplifying the use of the [Material Components Web](https://github.com/material-components/material-components-web) library within your Rails app.
|
6
6
|
|
7
7
|
---
|
8
8
|
|
@@ -66,9 +66,9 @@ Then add [Material Components Web](https://github.com/material-components/materi
|
|
66
66
|
|
67
67
|
These are the material components currently supported by Material Components Web for Rails:
|
68
68
|
|
69
|
-
* [`mdc-checkbox`](
|
70
|
-
* [`mdc-form-field`](
|
71
|
-
* [`mdc-radio`](
|
69
|
+
* [`mdc-checkbox`](components/mdc-checkbox.md)
|
70
|
+
* [`mdc-form-field`](components/mdc-form-field.md)
|
71
|
+
* [`mdc-radio`](components/mdc-radio.md)
|
72
72
|
|
73
73
|
You feel a component is missing? Create an issue to make us aware, or implement it yourself. Pull requests are welcome.
|
74
74
|
|
data/app/views/{material_components_web/_mdc_checkbox.html.erb → mozaic/_mdc-checkbox.html.erb}
RENAMED
@@ -1,9 +1,9 @@
|
|
1
1
|
<div class="mdc-checkbox<%= ' mdc-checkbox--disabled' if options[:disabled] %>">
|
2
|
-
<input value="0" type="hidden" name="<%= options[:class_name] ? options[:class_name].to_s + '[' + attribute.to_s + ']' : attribute.to_s %>" />
|
3
|
-
<input checked="<%= options[:checked] %>" class="mdc-checkbox__native-control" type="checkbox" value="1" name="<%= options[:class_name] ? options[:class_name].to_s + '[' + attribute.to_s + ']' : attribute.to_s %>" id="<%= options[:class_name] ? options[:class_name].to_s + '_' + attribute.to_s : attribute.to_s %>" />
|
2
|
+
<input value="0" type="hidden" name="<%= options[:class_name] ? options[:class_name].to_s + '[' + options[:attribute].to_s + ']' : options[:attribute].to_s %>" />
|
3
|
+
<input checked="<%= options[:checked] %>" class="mdc-checkbox__native-control" type="checkbox" value="1" name="<%= options[:class_name] ? options[:class_name].to_s + '[' + options[:attribute].to_s + ']' : options[:attribute].to_s %>" id="<%= options[:class_name] ? options[:class_name].to_s + '_' + options[:attribute].to_s : options[:attribute].to_s %>" />
|
4
4
|
<div class="mdc-checkbox__background">
|
5
5
|
<svg class='mdc-checkbox__checkmark' viewBox='0 0 24 24'><path class='mdc-checkbox__checkmark__path' fill='none' stroke='white' d='M1.73,12.91 8.1,19.28 22.79,4.59'/></svg>
|
6
6
|
<div class="mdc-checkbox__mixedmark"></div>
|
7
7
|
</div>
|
8
8
|
</div>
|
9
|
-
<% if options[:label] %><label for="<%= options[:class_name] ? options[:class_name].to_s + '_' + attribute.to_s : attribute.to_s %>"><%= options[:label].html_safe %></label><% end %>
|
9
|
+
<% if options[:label] %><label for="<%= options[:class_name] ? options[:class_name].to_s + '_' + options[:attribute].to_s : options[:attribute].to_s %>"><%= options[:label].html_safe %></label><% end %>
|
data/app/views/{material_components_web/_mdc_form_field.html.erb → mozaic/_mdc-form-field.html.erb}
RENAMED
File without changes
|
@@ -0,0 +1,8 @@
|
|
1
|
+
<div class="mdc-radio<%= ' mdc-radio--disabled' if options[:disabled] %>">
|
2
|
+
<input checked="<%= options[:checked] %>" class="mdc-radio__native-control" type="radio" value="<%= options[:value] %>" name="<%= options[:class_name] ? options[:class_name].to_s + '[' + options[:attribute].to_s + ']' : options[:attribute].to_s %>" id="<%= options[:class_name] ? options[:class_name].to_s + '_' + options[:attribute].to_s + '_' + options[:value].to_s : options[:attribute].to_s + '_' + options[:value].to_s %>" />
|
3
|
+
<div class="mdc-radio__background">
|
4
|
+
<div class="mdc-radio__outer-circle"></div>
|
5
|
+
<div class="mdc-radio__inner-circle"></div>
|
6
|
+
</div>
|
7
|
+
</div>
|
8
|
+
<% if options[:label] %><label for="<%= options[:class_name] ? options[:class_name].to_s + '_' + options[:attribute].to_s + '_' + options[:value].to_s : options[:attribute].to_s + '_' + options[:value].to_s %>"><%= options[:label].html_safe %></label><% end %>
|
@@ -0,0 +1,11 @@
|
|
1
|
+
require 'mozaic'
|
2
|
+
|
3
|
+
module MaterialComponentsWeb
|
4
|
+
|
5
|
+
Mozaic.configure do |config|
|
6
|
+
config.define_component 'mdc-checkbox', class_name: false, label: false, checked: false, disabled: false
|
7
|
+
config.define_component 'mdc-form-field'
|
8
|
+
config.define_component 'mdc-radio', class_name: false, label: false, checked: false, disabled: false
|
9
|
+
end
|
10
|
+
|
11
|
+
end
|
metadata
CHANGED
@@ -1,17 +1,17 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: material-components-web
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 2.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Jonas Hübotter
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2018-01-
|
11
|
+
date: 2018-01-10 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
|
-
name:
|
14
|
+
name: railties
|
15
15
|
requirement: !ruby/object:Gem::Requirement
|
16
16
|
requirements:
|
17
17
|
- - ">="
|
@@ -24,6 +24,20 @@ dependencies:
|
|
24
24
|
- - ">="
|
25
25
|
- !ruby/object:Gem::Version
|
26
26
|
version: '5.0'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: mozaic
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - "~>"
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '1.0'
|
34
|
+
type: :runtime
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - "~>"
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '1.0'
|
27
41
|
- !ruby/object:Gem::Dependency
|
28
42
|
name: rspec
|
29
43
|
requirement: !ruby/object:Gem::Requirement
|
@@ -52,7 +66,7 @@ dependencies:
|
|
52
66
|
- - "~>"
|
53
67
|
- !ruby/object:Gem::Version
|
54
68
|
version: '0.52'
|
55
|
-
description: Provides a set of helpers simplifying the
|
69
|
+
description: Provides a set of helpers simplifying the use of the Material Components
|
56
70
|
Web library.
|
57
71
|
email: me@jonhue.me
|
58
72
|
executables: []
|
@@ -62,16 +76,11 @@ files:
|
|
62
76
|
- CHANGELOG.md
|
63
77
|
- LICENSE
|
64
78
|
- README.md
|
65
|
-
- app/
|
66
|
-
- app/
|
67
|
-
- app/
|
68
|
-
- app/helpers/material_components_web/mdc_form_field/view_helper.rb
|
69
|
-
- app/helpers/material_components_web/mdc_radio/README.md
|
70
|
-
- app/helpers/material_components_web/mdc_radio/view_helper.rb
|
71
|
-
- app/views/material_components_web/_mdc_checkbox.html.erb
|
72
|
-
- app/views/material_components_web/_mdc_form_field.html.erb
|
73
|
-
- app/views/material_components_web/_mdc_radio.html.erb
|
79
|
+
- app/views/mozaic/_mdc-checkbox.html.erb
|
80
|
+
- app/views/mozaic/_mdc-form-field.html.erb
|
81
|
+
- app/views/mozaic/_mdc-radio.html.erb
|
74
82
|
- lib/material-components-web.rb
|
83
|
+
- lib/material_components_web/components.rb
|
75
84
|
- lib/material_components_web/engine.rb
|
76
85
|
- lib/material_components_web/version.rb
|
77
86
|
- vendor/assets/javascripts/material-components-web.js
|
@@ -101,6 +110,6 @@ rubyforge_project:
|
|
101
110
|
rubygems_version: 2.7.4
|
102
111
|
signing_key:
|
103
112
|
specification_version: 4
|
104
|
-
summary: Provides a set of helpers simplifying the
|
113
|
+
summary: Provides a set of helpers simplifying the use of the Material Components
|
105
114
|
Web library
|
106
115
|
test_files: []
|
@@ -1,39 +0,0 @@
|
|
1
|
-
# Checkboxes
|
2
|
-
|
3
|
-
**[Demo & original documentation](https://github.com/material-components/material-components-web/tree/master/packages/mdc-checkbox)**
|
4
|
-
|
5
|
-
### Usage
|
6
|
-
|
7
|
-
```haml
|
8
|
-
= mdc_checkbox :attribute
|
9
|
-
```
|
10
|
-
|
11
|
-
This translates to:
|
12
|
-
|
13
|
-
```html
|
14
|
-
<div class="mdc-checkbox">
|
15
|
-
<input value="0" type="hidden" name="attribute" />
|
16
|
-
<input checked="false" class="mdc-checkbox__native-control" type="checkbox" value="1" name="attribute" id="attribute" />
|
17
|
-
<div class="mdc-checkbox__background">
|
18
|
-
<svg class='mdc-checkbox__checkmark' viewBox='0 0 24 24'><path class='mdc-checkbox__checkmark__path' fill='none' stroke='white' d='M1.73,12.91 8.1,19.28 22.79,4.59'/></svg>
|
19
|
-
<div class="mdc-checkbox__mixedmark"></div>
|
20
|
-
</div>
|
21
|
-
</div>
|
22
|
-
```
|
23
|
-
|
24
|
-
#### Javascript
|
25
|
-
|
26
|
-
To add JavaScript functionality, add the following snippet to your asset pipeline:
|
27
|
-
|
28
|
-
```js
|
29
|
-
$('.mdc-checkbox').each(function( i, obj ) {
|
30
|
-
var checkbox = new mdc.checkbox.MDCCheckbox(obj);
|
31
|
-
});
|
32
|
-
```
|
33
|
-
|
34
|
-
### Options
|
35
|
-
|
36
|
-
* **`class_name`** A string to indicate the class name of the object the attribute belongs to. Used to define the `type` and `id` attributes of the checkbox. Accepts a string or `false`. Can look like: `'user[settings]'`
|
37
|
-
* **`label`** A string as content of a label used to present information about the checkbox element to the user. Accepts a string or `false`. Can include HTML elements.
|
38
|
-
* **`checked`** Whether the checkbox element should be checked or not. Accepts a boolean.
|
39
|
-
* **`disabled`** Whether the checkbox element should be disabled or not. Accepts a boolean.
|
@@ -1,19 +0,0 @@
|
|
1
|
-
module MaterialComponentsWeb
|
2
|
-
module MdcCheckbox
|
3
|
-
module ViewHelper
|
4
|
-
|
5
|
-
def mdc_checkbox attribute, options = {}
|
6
|
-
defaults = {
|
7
|
-
class_name: false,
|
8
|
-
label: false,
|
9
|
-
checked: false,
|
10
|
-
disabled: false
|
11
|
-
}
|
12
|
-
defaults.merge! options
|
13
|
-
|
14
|
-
render partial: 'material_components_web/mdc_checkbox', locals: { attribute: attribute, options: options }
|
15
|
-
end
|
16
|
-
|
17
|
-
end
|
18
|
-
end
|
19
|
-
end
|
@@ -1,23 +0,0 @@
|
|
1
|
-
# Form Fields
|
2
|
-
|
3
|
-
**[Demo & original documentation](https://github.com/material-components/material-components-web/tree/master/packages/mdc-form-field)**
|
4
|
-
|
5
|
-
### Usage
|
6
|
-
|
7
|
-
```haml
|
8
|
-
= mdc_form_field do
|
9
|
-
...
|
10
|
-
```
|
11
|
-
|
12
|
-
This translates to:
|
13
|
-
|
14
|
-
```html
|
15
|
-
<div class="mdc-form-field">
|
16
|
-
...
|
17
|
-
</div>
|
18
|
-
```
|
19
|
-
|
20
|
-
### Options
|
21
|
-
|
22
|
-
* **`class`** Add classes to the generated `div`. Accepts a string.
|
23
|
-
* **`id`** Add an id to the generated `div`. Accepts a string.
|
@@ -1,14 +0,0 @@
|
|
1
|
-
module MaterialComponentsWeb
|
2
|
-
module MdcFormField
|
3
|
-
module ViewHelper
|
4
|
-
|
5
|
-
def mdc_form_field options = {}, &block
|
6
|
-
defaults = {}
|
7
|
-
defaults.merge! options
|
8
|
-
|
9
|
-
render partial: 'material_components_web/mdc_form_field', locals: { options: options, block: capture(&block) }
|
10
|
-
end
|
11
|
-
|
12
|
-
end
|
13
|
-
end
|
14
|
-
end
|
@@ -1,38 +0,0 @@
|
|
1
|
-
# Radio Buttons
|
2
|
-
|
3
|
-
**[Demo & original documentation](https://github.com/material-components/material-components-web/tree/master/packages/mdc-radio)**
|
4
|
-
|
5
|
-
### Usage
|
6
|
-
|
7
|
-
```haml
|
8
|
-
= mdc_radio :attribute, 'value'
|
9
|
-
```
|
10
|
-
|
11
|
-
This translates to:
|
12
|
-
|
13
|
-
```html
|
14
|
-
<div class="mdc-radio">
|
15
|
-
<input checked="false" class="mdc-radio__native-control" type="radio" value="value" name="attribute" id="attribute" />
|
16
|
-
<div class="mdc-radio__background">
|
17
|
-
<div class="mdc-radio__outer-circle"></div>
|
18
|
-
<div class="mdc-radio__inner-circle"></div>
|
19
|
-
</div>
|
20
|
-
</div>
|
21
|
-
```
|
22
|
-
|
23
|
-
#### Javascript
|
24
|
-
|
25
|
-
To add JavaScript functionality, add the following snippet to your asset pipeline:
|
26
|
-
|
27
|
-
```js
|
28
|
-
$('.mdc-radio').each(function( i, obj ) {
|
29
|
-
var radio = new mdc.radio.MDCRadio(obj);
|
30
|
-
});
|
31
|
-
```
|
32
|
-
|
33
|
-
### Options
|
34
|
-
|
35
|
-
* **`class_name`** A string to indicate the class name of the object the attribute belongs to. Used to define the `type` and `id` attributes of the radio button. Accepts a string or `false`. Can look like: `'user[settings]'`
|
36
|
-
* **`label`** A string as content of a label used to present information about the radio element to the user. Accepts a string or `false`. Can include HTML elements.
|
37
|
-
* **`checked`** Whether the radio element should be checked or not. Accepts a boolean.
|
38
|
-
* **`disabled`** Whether the radio element should be disabled or not. Accepts a boolean.
|
@@ -1,19 +0,0 @@
|
|
1
|
-
module MaterialComponentsWeb
|
2
|
-
module MdcRadio
|
3
|
-
module ViewHelper
|
4
|
-
|
5
|
-
def mdc_radio attribute, value, options = {}
|
6
|
-
defaults = {
|
7
|
-
class_name: false,
|
8
|
-
label: false,
|
9
|
-
checked: false,
|
10
|
-
disabled: false
|
11
|
-
}
|
12
|
-
defaults.merge! options
|
13
|
-
|
14
|
-
render partial: 'material_components_web/mdc_radio', locals: { attribute: attribute, value: value, options: options }
|
15
|
-
end
|
16
|
-
|
17
|
-
end
|
18
|
-
end
|
19
|
-
end
|
@@ -1,8 +0,0 @@
|
|
1
|
-
<div class="mdc-radio<%= ' mdc-radio--disabled' if options[:disabled] %>">
|
2
|
-
<input checked="<%= options[:checked] %>" class="mdc-radio__native-control" type="radio" value="<%= value %>" name="<%= options[:class_name] ? options[:class_name].to_s + '[' + attribute.to_s + ']' : attribute.to_s %>" id="<%= options[:class_name] ? options[:class_name].to_s + '_' + attribute.to_s : attribute.to_s %>" />
|
3
|
-
<div class="mdc-radio__background">
|
4
|
-
<div class="mdc-radio__outer-circle"></div>
|
5
|
-
<div class="mdc-radio__inner-circle"></div>
|
6
|
-
</div>
|
7
|
-
</div>
|
8
|
-
<% if options[:label] %><label for="<%= options[:class_name] ? options[:class_name].to_s + '_' + attribute.to_s : attribute.to_s %>"><%= options[:label].html_safe %></label><% end %>
|