vue-form-for 0.2.0 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: '019def4fa71dae16fcdac1cc36ac206726a99ab3'
4
- data.tar.gz: 9733ade5ba2ed0b3d15daefa1c112250c03d00ae
3
+ metadata.gz: 7ff4d8f03077d4f157e9af9e0a343e2e0f12b898
4
+ data.tar.gz: 4d02d6ac2c039a76dda446a390a5e210423031aa
5
5
  SHA512:
6
- metadata.gz: ce25f0da67e1aac93b87aaa26a80b6cfa057ade399f5b2c6b019069ccc4f9da8447fe4cdca3b091920a9d9c44e229a2881716c367de96f817566d48807e1fd5a
7
- data.tar.gz: 18f9ad7bd787e45a3ea71c377d3437d1d1c2ac3361322c538b0a5eb694fd684518545043eaa47f33ab08bdf039cd2e715bb2f78ebce9f1a9d2d4c461c2e1c97c
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
- Other Functionalities
85
- ---------------------
84
+ Tag Helper
85
+ ----------
86
86
 
87
- You can provide a hash to the `:v` option:
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
- <%= vue_form_for User.new do |f| %>
91
- <%= f.text_field :name, v: { model: "customer.name" } %>
92
- <%= f.submit "Create", v: { if: "submittable" } %>
93
- <% end %>
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
- The above ERB template is identical with the following one:
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, "v-model" => "customer.name" %>
101
- <%= f.submit "Create", "v-if" => "submittable" %>
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
@@ -1,5 +1,5 @@
1
1
  module VueFormFor
2
- module FormHelpers
2
+ module FormHelper
3
3
  def vue_form_for(record, options = {}, &block)
4
4
  options[:builder] ||= VueFormFor::FormBuilder
5
5
  form_for(record, options, &block)
@@ -1,10 +1,12 @@
1
- require 'vue-form-for/form_helpers'
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.view_form_helpers" do
6
+ initializer "vue-form-for.view_form_helper" do
6
7
  ActiveSupport.on_load :action_view do
7
- include VueFormFor::FormHelpers
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' if defined?(Rails)
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.2.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-07 00:00:00.000000000 Z
12
- dependencies: []
13
- description: A custom Rails form builder for Vue.js
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/form_helpers.rb
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