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 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