myg 2.2.0 → 2.3.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 +5 -0
- data/app/views/mozaic/myg/_button.html.erb +13 -0
- data/app/views/mozaic/myg/_checkbox.html.erb +25 -1
- data/app/views/mozaic/myg/_drawer.html.erb +5 -1
- data/app/views/mozaic/myg/_form-field.html.erb +45 -3
- data/app/views/mozaic/myg/_input.html.erb +14 -0
- data/app/views/mozaic/myg/_label.html.erb +11 -0
- data/app/views/mozaic/myg/_radio.html.erb +23 -1
- data/app/views/mozaic/myg/_slider.html.erb +27 -0
- data/app/views/mozaic/myg/_switch.html.erb +20 -0
- data/app/views/mozaic/myg/_toolbar.html.erb +5 -1
- data/lib/generators/templates/install/stylesheets/_myg.sass +1 -0
- data/lib/generators/templates/install/stylesheets/theme/_default.scss +2 -2
- data/lib/myg/railtie.rb +10 -21
- data/lib/myg/version.rb +1 -1
- metadata +7 -16
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b4e25ac5cff27da45199fa5023a3f058a1393b84087561327019ce44c11f3920
|
|
4
|
+
data.tar.gz: 50e5a395b77af80661495c8592fb5869bb9e3a390bbc8feb7326db42b60ff0ff
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4684f46e98c85956c84cfce79e1de72f9c9e74079dae7b11341cd99c37a201d83bc9850012f8eaf49560f26f868e84f46a397da3e03152c9a084cf4b297839ca
|
|
7
|
+
data.tar.gz: 5174fbfba17d691ab496416cca23d677e78106dde735f0f021d37583b79c88abfa4a606dd4c903f412882f72cb67639384cbaa6f27f4940d71fea636291c133e
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
|
@@ -73,10 +73,15 @@ Then add [Myg](https://github.com/jonhue/myg) to your asset pipeline:
|
|
|
73
73
|
|
|
74
74
|
These are the components currently supported by Myg on Rails:
|
|
75
75
|
|
|
76
|
+
* [`button`](components/myg/button.md)
|
|
76
77
|
* [`checkbox`](components/myg/checkbox.md)
|
|
77
78
|
* [`drawer`](components/myg/drawer.md)
|
|
78
79
|
* [`form-field`](components/myg/form-field.md)
|
|
80
|
+
* [`input`](components/myg/input.md)
|
|
81
|
+
* [`label`](components/myg/label.md)
|
|
79
82
|
* [`radio`](components/myg/radio.md)
|
|
83
|
+
* [`slider`](components/myg/slider.md)
|
|
84
|
+
* [`switch`](components/myg/switch.md)
|
|
80
85
|
* [`toolbar`](components/myg/toolbar.md)
|
|
81
86
|
|
|
82
87
|
You feel a component is missing? Create an issue to make us aware, or implement it yourself. Pull requests are welcome.
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<% href = options.delete :href %>
|
|
2
|
+
<% value = options.delete :value %>
|
|
3
|
+
<% link_html = {
|
|
4
|
+
class: ['myg-button', options[:class]].join(' ')
|
|
5
|
+
} %>
|
|
6
|
+
<% input_html = {
|
|
7
|
+
class: ['myg-button', options[:class]].join(' '),
|
|
8
|
+
type: 'submit',
|
|
9
|
+
name: 'commit',
|
|
10
|
+
value: value
|
|
11
|
+
} %>
|
|
12
|
+
|
|
13
|
+
<% if href %><%= link_to value, href, options.merge(link_html) %><% else %><%= tag 'input', options.merge(input_html) %><% end %>
|
|
@@ -1 +1,25 @@
|
|
|
1
|
-
|
|
1
|
+
<% class_name = options.delete :class_name %>
|
|
2
|
+
<% attribute = options.delete :attribute %>
|
|
3
|
+
<% name = class_name ? "#{class_name.to_s.downcase}[#{attribute}]" : "#{attribute}" %>
|
|
4
|
+
<% id = class_name ? "#{class_name.to_s.downcase}_#{attribute}" : "#{attribute}" %>
|
|
5
|
+
<% wrapper_html = {
|
|
6
|
+
class: ['myg-checkbox mdc-checkbox', options.dig(:wrapper_html, :class), ('mdc-checkbox--disabled' if options.dig(:input_html, :disabled))].join(' ')
|
|
7
|
+
} %>
|
|
8
|
+
<% input_html = {
|
|
9
|
+
type: 'checkbox',
|
|
10
|
+
class: ['mdc-checkbox__native-control', options.dig(:input_html, :class)].join(' '),
|
|
11
|
+
value: 1,
|
|
12
|
+
name: name,
|
|
13
|
+
id: id
|
|
14
|
+
} %>
|
|
15
|
+
|
|
16
|
+
<%= content_tag 'div', options[:wrapper_html].merge(wrapper_html) do %>
|
|
17
|
+
<input value="0" type="hidden" name="<%= name %>" />
|
|
18
|
+
<%= tag 'input', options[:input_html].merge(input_html) %>
|
|
19
|
+
<div class="mdc-checkbox__background">
|
|
20
|
+
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
|
|
21
|
+
<path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
|
|
22
|
+
</svg>
|
|
23
|
+
<div class="mdc-checkbox__mixedmark"></div>
|
|
24
|
+
</div>
|
|
25
|
+
<% end %>
|
|
@@ -1,3 +1,45 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
<% wrapper_html = {
|
|
2
|
+
class: ['myg-form-field', ('myg-form-field--inline-label' if options[:inline_label]), ('myg-form-field--floating-label' if options[:floating_label]), options.dig(:wrapper_html, :class)].join(' ')
|
|
3
|
+
} %>
|
|
4
|
+
<% input_html = {
|
|
5
|
+
class_name: options[:class_name],
|
|
6
|
+
attribute: options[:attribute],
|
|
7
|
+
placeholder: options[:floating_label]
|
|
8
|
+
} %>
|
|
9
|
+
<% label_html = {
|
|
10
|
+
class_name: options[:class_name],
|
|
11
|
+
attribute: options[:attribute]
|
|
12
|
+
} %>
|
|
13
|
+
<% label_secondary_html = label_html.merge({
|
|
14
|
+
class: ['myg-label--secondary', options.dig(:label_html, :class)].join(' ')
|
|
15
|
+
}) %>
|
|
16
|
+
<% label_wrapper_html = {
|
|
17
|
+
class: ['myg-label--wrapper', options.dig(:label_wrapper_html, :class)].join(' ')
|
|
18
|
+
} %>
|
|
19
|
+
|
|
20
|
+
<%= content_tag 'div', options[:wrapper_html].merge(wrapper_html) do %>
|
|
21
|
+
<% if options[:label] %>
|
|
22
|
+
<% unless options[:label].is_a? Array %>
|
|
23
|
+
<%= component 'myg/label', options[:label_html].merge(label_html) do %><%= options[:label].html_safe %><% end %>
|
|
24
|
+
<% else %>
|
|
25
|
+
<%= content_tag 'div', options[:label_wrapper_html].merge(label_wrapper_html) %>
|
|
26
|
+
<% options[:label].each_with_index do |label, index| %>
|
|
27
|
+
<%= component 'myg/label', options[:label_html].merge((index == 0 ? label_html : label_secondary_html)) do %><%= label.html_safe %><% end %>
|
|
28
|
+
<% end %>
|
|
29
|
+
<% end %>
|
|
30
|
+
<% end %>
|
|
31
|
+
<% end %>
|
|
32
|
+
<%= component "myg/#{options[:as]}", options[:input_html].merge(input_html) %>
|
|
33
|
+
<% if options[:inline_label] %>
|
|
34
|
+
<% unless options[:inline_label].is_a? Array %>
|
|
35
|
+
<%= component 'myg/label', options[:label_html].merge(label_html) do %><%= options[:inline_label] %><% end %>
|
|
36
|
+
<% else %>
|
|
37
|
+
<%= content_tag 'div', options[:label_wrapper_html].merge(label_wrapper_html) %>
|
|
38
|
+
<% options[:inline_label].each_with_index do |label, index| %>
|
|
39
|
+
<%= component 'myg/label', options[:label_html].merge((index == 0 ? label_html : label_secondary_html)) do %><%= label.html_safe %><% end %>
|
|
40
|
+
<% end %>
|
|
41
|
+
<% end %>
|
|
42
|
+
<% end %>
|
|
43
|
+
<% end %>
|
|
44
|
+
<% if options[:floating_label] %><%= component 'myg/label', options[:label_html].merge(label_html) do %><%= options[:floating_label] %><% end %><% end %>
|
|
45
|
+
<% end %>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<% class_name = options.delete :class_name %>
|
|
2
|
+
<% attribute = options.delete :attribute %>
|
|
3
|
+
<% name = class_name ? "#{class_name.to_s.downcase}[#{attribute}]" : "#{attribute}" %>
|
|
4
|
+
<% id = class_name ? "#{class_name.to_s.downcase}_#{attribute}" : "#{attribute}" %>
|
|
5
|
+
<% html = {
|
|
6
|
+
class: ['myg-input', options[:class]].join(' '),
|
|
7
|
+
name: name,
|
|
8
|
+
id: id
|
|
9
|
+
} %>
|
|
10
|
+
<% defaults = {
|
|
11
|
+
type: (attribute == 'email' || attribute == 'password' ? attribute : 'text')
|
|
12
|
+
} %>
|
|
13
|
+
|
|
14
|
+
<%= tag 'input', defaults.merge(options.merge(html)) %>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<% class_name = options.delete :class_name %>
|
|
2
|
+
<% attribute = options.delete :attribute %>
|
|
3
|
+
<% id = class_name ? "#{class_name.to_s.downcase}_#{attribute}" : "#{attribute}" %>
|
|
4
|
+
<% html = {
|
|
5
|
+
class: ['myg-label', options[:class]].join(' '),
|
|
6
|
+
for: id
|
|
7
|
+
} %>
|
|
8
|
+
|
|
9
|
+
<%= content_tag 'label', options.merge(html) do %>
|
|
10
|
+
<%= block %>
|
|
11
|
+
<% end %>
|
|
@@ -1 +1,23 @@
|
|
|
1
|
-
|
|
1
|
+
<% class_name = options.delete :class_name %>
|
|
2
|
+
<% attribute = options.delete :attribute %>
|
|
3
|
+
<% value = options.delete :value %>
|
|
4
|
+
<% name = class_name ? "#{class_name.to_s.downcase}[#{attribute}]" : "#{attribute}" %>
|
|
5
|
+
<% id = class_name ? "#{class_name.to_s.downcase}_#{attribute}_#{value}" : "#{attribute}_#{value}" %>
|
|
6
|
+
<% wrapper_html = {
|
|
7
|
+
class: ['myg-radio mdc-radio', options.dig(:wrapper_html, :class), ('mdc-radio--disabled' if options.dig(:input_html, :disabled))].join(' ')
|
|
8
|
+
} %>
|
|
9
|
+
<% input_html = {
|
|
10
|
+
type: 'radio',
|
|
11
|
+
class: ['mdc-radio__native-control', options.dig(:input_html, :class)].join(' '),
|
|
12
|
+
value: value,
|
|
13
|
+
name: name,
|
|
14
|
+
id: id
|
|
15
|
+
} %>
|
|
16
|
+
|
|
17
|
+
<%= content_tag 'div', options[:wrapper_html].merge(wrapper_html) do %>
|
|
18
|
+
<%= tag 'input', options[:input_html].merge(input_html) %>
|
|
19
|
+
<div class="mdc-radio__background">
|
|
20
|
+
<div class="mdc-radio__outer-circle"></div>
|
|
21
|
+
<div class="mdc-radio__inner-circle"></div>
|
|
22
|
+
</div>
|
|
23
|
+
<% end %>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<% html = {
|
|
2
|
+
class: ['myg-slider mdc-slider', options[:class], ('mdc-slider--discrete' if options[:discrete])].join(' '),
|
|
3
|
+
tabindex: 0,
|
|
4
|
+
role: 'slider',
|
|
5
|
+
aria: {
|
|
6
|
+
valuemin: options[:min],
|
|
7
|
+
valuemax: options[:max],
|
|
8
|
+
valuenow: options[:value],
|
|
9
|
+
label: options[:label],
|
|
10
|
+
disabled: options[:disabled]
|
|
11
|
+
}
|
|
12
|
+
} %>
|
|
13
|
+
|
|
14
|
+
<%= content_tag 'div', options.merge(html) do %>
|
|
15
|
+
<div class="mdc-slider__track-container">
|
|
16
|
+
<div class="mdc-slider__track"></div>
|
|
17
|
+
</div>
|
|
18
|
+
<div class="mdc-slider__thumb-container">
|
|
19
|
+
<% if options[:discrete] %><div class="mdc-slider__pin">
|
|
20
|
+
<span class="mdc-slider__pin-value-marker"></span>
|
|
21
|
+
</div><% end %>
|
|
22
|
+
<svg class="mdc-slider__thumb" width="21" height="21">
|
|
23
|
+
<circle cx="10.5" cy="10.5" r="7.875"></circle>
|
|
24
|
+
</svg>
|
|
25
|
+
<div class="mdc-slider__focus-ring"></div>
|
|
26
|
+
</div>
|
|
27
|
+
<% end %>
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<% class_name = options.delete :class_name %>
|
|
2
|
+
<% attribute = options.delete :attribute %>
|
|
3
|
+
<% name = class_name ? "#{class_name.to_s.downcase}[#{attribute}]" : "#{attribute}" %>
|
|
4
|
+
<% id = class_name ? "#{class_name.to_s.downcase}_#{attribute}" : "#{attribute}" %>
|
|
5
|
+
<% wrapper_html = {
|
|
6
|
+
class: ['myg-switch mdc-switch', options.dig(:wrapper_html, :class)].join(' ')
|
|
7
|
+
} %>
|
|
8
|
+
<% input_html = {
|
|
9
|
+
type: 'checkbox',
|
|
10
|
+
class: ['mdc-switch__native-control', options.dig(:input_html, :class)].join(' '),
|
|
11
|
+
name: name,
|
|
12
|
+
id: id
|
|
13
|
+
} %>
|
|
14
|
+
|
|
15
|
+
<%= content_tag 'div', options[:wrapper_html].merge(wrapper_html) do %>
|
|
16
|
+
<%= tag 'input', options[:input_html].merge(input_html) %>
|
|
17
|
+
<div class="mdc-switch__background">
|
|
18
|
+
<div class="mdc-switch__knob"></div>
|
|
19
|
+
</div>
|
|
20
|
+
<% end %>
|
data/lib/myg/railtie.rb
CHANGED
|
@@ -5,27 +5,16 @@ module Myg
|
|
|
5
5
|
|
|
6
6
|
initializer 'myg.mozaic' do
|
|
7
7
|
Mozaic.configure do |config|
|
|
8
|
-
config.define_component 'myg/
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
config.define_component 'myg/
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
config.define_component 'myg/
|
|
18
|
-
options[:class] += ' myg-form-field'
|
|
19
|
-
options
|
|
20
|
-
end
|
|
21
|
-
config.define_component 'myg/radio', class: '', label: false, checked: false, disabled: false do |options|
|
|
22
|
-
options[:class] += ' myg-radio'
|
|
23
|
-
options
|
|
24
|
-
end
|
|
25
|
-
config.define_component 'myg/toolbar', class: '' do |options|
|
|
26
|
-
options[:class] += ' myg-toolbar'
|
|
27
|
-
options
|
|
28
|
-
end
|
|
8
|
+
config.define_component 'myg/button'
|
|
9
|
+
config.define_component 'myg/checkbox'
|
|
10
|
+
config.define_component 'myg/drawer'
|
|
11
|
+
config.define_component 'myg/form-field'
|
|
12
|
+
config.define_component 'myg/input'
|
|
13
|
+
config.define_component 'myg/label'
|
|
14
|
+
config.define_component 'myg/radio'
|
|
15
|
+
config.define_component 'myg/slider', discrete: false, disabled: false, value: 0, min: 0, max: 50, label: 'Select value'
|
|
16
|
+
config.define_component 'myg/switch'
|
|
17
|
+
config.define_component 'myg/toolbar'
|
|
29
18
|
end
|
|
30
19
|
end
|
|
31
20
|
|
data/lib/myg/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: myg
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 2.
|
|
4
|
+
version: 2.3.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-02-
|
|
11
|
+
date: 2018-02-25 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: railties
|
|
@@ -66,20 +66,6 @@ dependencies:
|
|
|
66
66
|
- - "~>"
|
|
67
67
|
- !ruby/object:Gem::Version
|
|
68
68
|
version: '2.0'
|
|
69
|
-
- !ruby/object:Gem::Dependency
|
|
70
|
-
name: material-components-web
|
|
71
|
-
requirement: !ruby/object:Gem::Requirement
|
|
72
|
-
requirements:
|
|
73
|
-
- - "~>"
|
|
74
|
-
- !ruby/object:Gem::Version
|
|
75
|
-
version: '2.0'
|
|
76
|
-
type: :runtime
|
|
77
|
-
prerelease: false
|
|
78
|
-
version_requirements: !ruby/object:Gem::Requirement
|
|
79
|
-
requirements:
|
|
80
|
-
- - "~>"
|
|
81
|
-
- !ruby/object:Gem::Version
|
|
82
|
-
version: '2.0'
|
|
83
69
|
- !ruby/object:Gem::Dependency
|
|
84
70
|
name: rspec
|
|
85
71
|
requirement: !ruby/object:Gem::Requirement
|
|
@@ -119,10 +105,15 @@ files:
|
|
|
119
105
|
- LICENSE
|
|
120
106
|
- README.md
|
|
121
107
|
- app/helpers/myg/theme_helper.rb
|
|
108
|
+
- app/views/mozaic/myg/_button.html.erb
|
|
122
109
|
- app/views/mozaic/myg/_checkbox.html.erb
|
|
123
110
|
- app/views/mozaic/myg/_drawer.html.erb
|
|
124
111
|
- app/views/mozaic/myg/_form-field.html.erb
|
|
112
|
+
- app/views/mozaic/myg/_input.html.erb
|
|
113
|
+
- app/views/mozaic/myg/_label.html.erb
|
|
125
114
|
- app/views/mozaic/myg/_radio.html.erb
|
|
115
|
+
- app/views/mozaic/myg/_slider.html.erb
|
|
116
|
+
- app/views/mozaic/myg/_switch.html.erb
|
|
126
117
|
- app/views/mozaic/myg/_toolbar.html.erb
|
|
127
118
|
- lib/generators/myg/install_generator.rb
|
|
128
119
|
- lib/generators/myg/theme_generator.rb
|