vue-form-for 0.2.0 → 0.3.0
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/CHANGELOG.md +9 -0
- data/README.md +89 -10
- data/lib/vue-form-for/form_builder.rb +4 -14
- data/lib/vue-form-for/{form_helpers.rb → form_helper.rb} +1 -1
- data/lib/vue-form-for/railtie.rb +5 -3
- data/lib/vue-form-for/tag_helper.rb +26 -0
- data/lib/vue-form-for/vue_options_resolver.rb +42 -0
- data/lib/vue-form-for.rb +1 -1
- metadata +48 -5
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7ff4d8f03077d4f157e9af9e0a343e2e0f12b898
|
4
|
+
data.tar.gz: 4d02d6ac2c039a76dda446a390a5e210423031aa
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e746e90c1769074d41384588ede2efe0fa2c0b0a9ee0837becdd209b6f5f3e8c8c00a341d837a90ac419a27a270b323743c5acce51e2fdb9b2fff1e691fd8f71
|
7
|
+
data.tar.gz: 861d209014b22c59ecaa4e381508fbbeb0fe6573751a33cab5f6112e6d43d787423995073f3b23f48ff74629d63da3203ec1c03b03bba30e0909486c966c2ecc
|
data/CHANGELOG.md
CHANGED
@@ -1,5 +1,14 @@
|
|
1
1
|
# CHANGELOG - vue-form-for
|
2
2
|
|
3
|
+
## 0.3.0 (2017-04-09)
|
4
|
+
|
5
|
+
* Add `vue_tag` and `vue_content_tag` helper methods
|
6
|
+
that can handle `:bind`, `:on`, `:checked`, `:disabled`, `:multiple`,
|
7
|
+
`:readonly`, `:selected`, `:text`, `:html`, `:show`, `:if`, `:else`,
|
8
|
+
`:else_if`, `:for`, `:model`, `:pre`, `:cloak`, `:once` options.
|
9
|
+
* Add similar functionalities to the form building helpers.
|
10
|
+
* Remove `:v` option handling.
|
11
|
+
|
3
12
|
## 0.2.0 (2017-04-07)
|
4
13
|
|
5
14
|
* Allow the form builder to resolve `:v` option.
|
data/README.md
CHANGED
@@ -81,24 +81,103 @@ Add this line to the ERB template:
|
|
81
81
|
|
82
82
|
Then, you can get the value of `user[name]` field by the `user.name`.
|
83
83
|
|
84
|
-
|
85
|
-
|
84
|
+
Tag Helper
|
85
|
+
----------
|
86
86
|
|
87
|
-
|
87
|
+
This gem provides two additional helper methods: `vue_tag` and `vue_content_tag`.
|
88
|
+
|
89
|
+
Basically, they behave like `tag` and `content_tag` helpers of Action Views.
|
90
|
+
But, they interpret the *HTML options* in a different way as explained below.
|
91
|
+
|
92
|
+
### The `:bind` option
|
93
|
+
|
94
|
+
If the *HTML options* have a `:bind` key and its value is a hash,
|
95
|
+
they get transformed into the Vue.js `v-bind` directives.
|
96
|
+
|
97
|
+
In the example below, these two lines have the same result:
|
88
98
|
|
89
99
|
```
|
90
|
-
<%=
|
91
|
-
|
92
|
-
|
93
|
-
|
100
|
+
<%= vue_content_tag(:span, "Hello", bind: { style: "{ color: textColor }" })
|
101
|
+
<%= vue_content_tag(:span, "Hello", "v-bind:style" => "{ color: textColor }" })
|
102
|
+
```
|
103
|
+
|
104
|
+
Note that you should use the latter style if you want to specify *modifiers*
|
105
|
+
to the `v-bind` directives. For example:
|
106
|
+
|
107
|
+
```
|
108
|
+
<%= vue_content_tag(:span, "Hello", "v-bind:text-content.prop" => "message" })
|
109
|
+
```
|
110
|
+
|
111
|
+
### The `:on` option
|
112
|
+
|
113
|
+
If the *HTML options* have a `:on` key and its value is a hash,
|
114
|
+
they get transformed into the Vue.js `v-on` directives.
|
115
|
+
|
116
|
+
In the example below, these two lines have the same result:
|
117
|
+
|
118
|
+
```
|
119
|
+
<%= vue_content_tag(:span, "Hello", on: { click: "doThis" })
|
120
|
+
<%= vue_content_tag(:span, "Hello", "v-on:click" => "doThis" })
|
121
|
+
```
|
122
|
+
|
123
|
+
Note that you should use the latter style if you want to specify *modifiers*
|
124
|
+
to the `v-on` directives. For example:
|
125
|
+
|
126
|
+
```
|
127
|
+
<%= vue_content_tag(:span, "Hello", "v-on:click.once" => "doThis" })
|
128
|
+
<%= vue_content_tag(:button, "Hello", "v-on:click.prevent" => "doThis" })
|
94
129
|
```
|
95
130
|
|
96
|
-
|
131
|
+
### Boolean attributes
|
132
|
+
|
133
|
+
If the *HTML options* have a string value (not a boolean value)
|
134
|
+
for `checked`, `disabled`, `multiple`, `readonly` or `selected` key,
|
135
|
+
the key gets transformed by adding `v-bind:` to its head.
|
136
|
+
|
137
|
+
In the example below, these two lines have the same result:
|
138
|
+
|
139
|
+
```
|
140
|
+
<%= vue_content_tag(:button, "Click me!", disabled: "!clickable")
|
141
|
+
<%= vue_content_tag(:button, "Click me!", "v-bind:disabled" => "!clickable")
|
142
|
+
```
|
143
|
+
|
144
|
+
### Vue.js directives
|
145
|
+
|
146
|
+
If the *HTML options* have one or more of the following keys
|
147
|
+
|
148
|
+
> `text`, `html`, `show`, `if`, `else`, `else_if`, `for`, `model`, `pre`, `cloak`, `once`
|
149
|
+
|
150
|
+
then, these keys get transformed by adding `v-` to their head.
|
151
|
+
|
152
|
+
In the example below, these two lines have the same result:
|
153
|
+
|
154
|
+
```
|
155
|
+
<%= vue_tag(:hr`, `if: "itemsPresent")
|
156
|
+
<%= vue_tag(:hr, "v-if" => "itemsPresent")
|
157
|
+
```
|
158
|
+
|
159
|
+
Note that the `:else_if` key is transformed into the `v-else-if` directive:
|
160
|
+
|
161
|
+
```
|
162
|
+
<%= vue_tag(:hr, else_if: "itemsPresent")
|
163
|
+
<%= vue_tag(:hr, "v-else-if" => "itemsPresent")
|
164
|
+
```
|
165
|
+
|
166
|
+
### Extensions to the form building helpers
|
167
|
+
|
168
|
+
When you build HTML forms using `vue_form_for`,
|
169
|
+
the form building helpers, such as `text_field`, `check_box`, etc.,
|
170
|
+
have these additional behavior.
|
171
|
+
|
172
|
+
Example:
|
97
173
|
|
98
174
|
```
|
99
175
|
<%= vue_form_for User.new do |f| %>
|
100
|
-
<%= f.text_field :name,
|
101
|
-
|
176
|
+
<%= f.text_field :name, model: "userName" %>
|
177
|
+
<label>
|
178
|
+
<%= f.check_box :administrator, on: { click: "doThis" } %> Administrator
|
179
|
+
</label>
|
180
|
+
<%= f.submit "Create", disabled: "!submittable" %>
|
102
181
|
<% end %>
|
103
182
|
```
|
104
183
|
|
@@ -1,5 +1,9 @@
|
|
1
|
+
require_relative "./vue_options_resolver"
|
2
|
+
|
1
3
|
module VueFormFor
|
2
4
|
class FormBuilder < ActionView::Helpers::FormBuilder
|
5
|
+
include VueFormFor::VueOptionsResolver
|
6
|
+
|
3
7
|
(field_helpers - [:label, :fields_for]).each do |selector|
|
4
8
|
class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1
|
5
9
|
def #{selector}(method, options = {})
|
@@ -24,19 +28,5 @@ module VueFormFor
|
|
24
28
|
resolve_vue_options(options)
|
25
29
|
super(value, options, &block)
|
26
30
|
end
|
27
|
-
|
28
|
-
private def resolve_vue_options(options)
|
29
|
-
if options[:v].kind_of?(Hash)
|
30
|
-
h = options.delete(:v)
|
31
|
-
h.each do |key, value|
|
32
|
-
case key
|
33
|
-
when /\A[:@]/
|
34
|
-
options[key] = value
|
35
|
-
else
|
36
|
-
options[:"v-#{key}"] = value
|
37
|
-
end
|
38
|
-
end
|
39
|
-
end
|
40
|
-
end
|
41
31
|
end
|
42
32
|
end
|
data/lib/vue-form-for/railtie.rb
CHANGED
@@ -1,10 +1,12 @@
|
|
1
|
-
require 'vue-form-for/
|
1
|
+
require 'vue-form-for/form_helper'
|
2
|
+
require 'vue-form-for/tag_helper'
|
2
3
|
|
3
4
|
module VueFormFor
|
4
5
|
class Railtie < Rails::Railtie
|
5
|
-
initializer "vue-form-for.
|
6
|
+
initializer "vue-form-for.view_form_helper" do
|
6
7
|
ActiveSupport.on_load :action_view do
|
7
|
-
include VueFormFor::
|
8
|
+
include VueFormFor::FormHelper
|
9
|
+
include VueFormFor::TagHelper
|
8
10
|
end
|
9
11
|
end
|
10
12
|
end
|
@@ -0,0 +1,26 @@
|
|
1
|
+
require_relative "./vue_options_resolver"
|
2
|
+
|
3
|
+
module VueFormFor
|
4
|
+
module TagHelper
|
5
|
+
include VueFormFor::VueOptionsResolver
|
6
|
+
|
7
|
+
def vue_tag(name, options = nil, open = false, escape = true)
|
8
|
+
resolve_vue_options(options) if options
|
9
|
+
tag(name, options, open, escape)
|
10
|
+
end
|
11
|
+
|
12
|
+
def vue_content_tag(name, content_or_options_with_block = nil, options = nil,
|
13
|
+
escape = true, &block)
|
14
|
+
|
15
|
+
if block_given?
|
16
|
+
if content_or_options_with_block.is_a?(Hash)
|
17
|
+
resolve_vue_options(content_or_options_with_block)
|
18
|
+
end
|
19
|
+
else
|
20
|
+
resolve_vue_options(options) if options
|
21
|
+
end
|
22
|
+
|
23
|
+
content_tag(name, content_or_options_with_block, options, escape, &block)
|
24
|
+
end
|
25
|
+
end
|
26
|
+
end
|
@@ -0,0 +1,42 @@
|
|
1
|
+
module VueFormFor
|
2
|
+
module VueOptionsResolver
|
3
|
+
private def resolve_vue_options(options)
|
4
|
+
if options[:bind].kind_of?(Hash)
|
5
|
+
h = options.delete(:bind)
|
6
|
+
h.each do |key, value|
|
7
|
+
if value.kind_of?(String)
|
8
|
+
options[:"v-bind:#{key}"] = value
|
9
|
+
end
|
10
|
+
end
|
11
|
+
end
|
12
|
+
|
13
|
+
if options[:on].kind_of?(Hash)
|
14
|
+
h = options.delete(:on)
|
15
|
+
h.each do |key, value|
|
16
|
+
if value.kind_of?(String)
|
17
|
+
options[:"v-on:#{key}"] = value
|
18
|
+
end
|
19
|
+
end
|
20
|
+
end
|
21
|
+
|
22
|
+
%i(checked disabled multiple readonly selected).each do |attr_name|
|
23
|
+
if options[attr_name].kind_of?(String)
|
24
|
+
options[:"v-bind:#{attr_name}"] = options.delete(attr_name)
|
25
|
+
end
|
26
|
+
end
|
27
|
+
|
28
|
+
%i(text html show if else else_if for model).each do |directive|
|
29
|
+
if options[directive].kind_of?(String)
|
30
|
+
options[:"v-#{directive.to_s.dasherize}"] = options.delete(directive)
|
31
|
+
end
|
32
|
+
end
|
33
|
+
|
34
|
+
%i(pre cloak once).each do |directive|
|
35
|
+
if options[directive]
|
36
|
+
options.delete(directive)
|
37
|
+
options[:"v-#{directive}"] = "v-#{directive}"
|
38
|
+
end
|
39
|
+
end
|
40
|
+
end
|
41
|
+
end
|
42
|
+
end
|
data/lib/vue-form-for.rb
CHANGED
@@ -1,2 +1,2 @@
|
|
1
1
|
require 'vue-form-for/form_builder'
|
2
|
-
require 'vue-form-for/railtie'
|
2
|
+
require 'vue-form-for/railtie'
|
metadata
CHANGED
@@ -1,16 +1,57 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: vue-form-for
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.3.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Tsutomu KURODA
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-04-
|
12
|
-
dependencies:
|
13
|
-
|
11
|
+
date: 2017-04-09 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: actionview
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '4.2'
|
20
|
+
- - "<"
|
21
|
+
- !ruby/object:Gem::Version
|
22
|
+
version: '6'
|
23
|
+
type: :runtime
|
24
|
+
prerelease: false
|
25
|
+
version_requirements: !ruby/object:Gem::Requirement
|
26
|
+
requirements:
|
27
|
+
- - ">="
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '4.2'
|
30
|
+
- - "<"
|
31
|
+
- !ruby/object:Gem::Version
|
32
|
+
version: '6'
|
33
|
+
- !ruby/object:Gem::Dependency
|
34
|
+
name: railties
|
35
|
+
requirement: !ruby/object:Gem::Requirement
|
36
|
+
requirements:
|
37
|
+
- - ">="
|
38
|
+
- !ruby/object:Gem::Version
|
39
|
+
version: '4.2'
|
40
|
+
- - "<"
|
41
|
+
- !ruby/object:Gem::Version
|
42
|
+
version: '6'
|
43
|
+
type: :runtime
|
44
|
+
prerelease: false
|
45
|
+
version_requirements: !ruby/object:Gem::Requirement
|
46
|
+
requirements:
|
47
|
+
- - ">="
|
48
|
+
- !ruby/object:Gem::Version
|
49
|
+
version: '4.2'
|
50
|
+
- - "<"
|
51
|
+
- !ruby/object:Gem::Version
|
52
|
+
version: '6'
|
53
|
+
description: 'This gem provides three view helpers for Rails app: vue_form_for, vue_tag,
|
54
|
+
vue_content_tag.'
|
14
55
|
email: t-kuroda@oiax.jp
|
15
56
|
executables: []
|
16
57
|
extensions: []
|
@@ -21,8 +62,10 @@ files:
|
|
21
62
|
- README.md
|
22
63
|
- lib/vue-form-for.rb
|
23
64
|
- lib/vue-form-for/form_builder.rb
|
24
|
-
- lib/vue-form-for/
|
65
|
+
- lib/vue-form-for/form_helper.rb
|
25
66
|
- lib/vue-form-for/railtie.rb
|
67
|
+
- lib/vue-form-for/tag_helper.rb
|
68
|
+
- lib/vue-form-for/vue_options_resolver.rb
|
26
69
|
homepage: https://github.com/kuroda/vue-form-for
|
27
70
|
licenses:
|
28
71
|
- MIT
|