vue-form-for 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 141a5e932e4ee1bbe1e69e52640428b0204c51bd
-  data.tar.gz: 39695da0d14cd099694f0806e91c266347d64862
+  metadata.gz: '019def4fa71dae16fcdac1cc36ac206726a99ab3'
+  data.tar.gz: 9733ade5ba2ed0b3d15daefa1c112250c03d00ae
 SHA512:
-  metadata.gz: 042d7b803638e3d24b06ee0c1dc3457f12f1903caaaa522468846d5b3a7a163711a1daf0b97e7132423f69b432dc09804b1fff4ba3fc48dd6aded3a6bbbaae63
-  data.tar.gz: dda89dbfc4aed523577d97afe2034b64828d6c0b792188283f47f6fc0ec4b90b7fdfd144c759aef0f6c367b6d77e20729f0d11c5789f0879c7c0628d03a9b8fc
+  metadata.gz: ce25f0da67e1aac93b87aaa26a80b6cfa057ade399f5b2c6b019069ccc4f9da8447fe4cdca3b091920a9d9c44e229a2881716c367de96f817566d48807e1fd5a
+  data.tar.gz: 18f9ad7bd787e45a3ea71c377d3437d1d1c2ac3361322c538b0a5eb694fd684518545043eaa47f33ab08bdf039cd2e715bb2f78ebce9f1a9d2d4c461c2e1c97c

data/CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG - vue-form-for
 
+## 0.2.0 (2017-04-07)
+
+* Allow the form builder to resolve `:v` option.
+
 ## 0.1.0 (2017-04-05)
 
 * The first release with minimum functionalities.

data/README.md

@@ -2,3 +2,112 @@ vue-form-for
 ============
 
 A custom Rails form builder for Vue.js
+
+Synopsis
+--------
+
+```
+<%= vue_form_for User.new do |f| %>
+  <%= f.text_field :name %>
+<% end %>
+```
+
+```html
+<form ...>
+  ...
+  <input v-model="user.name" type="text" name="user[name]" ... />
+</form>
+```
+
+Installation
+------------
+
+Add the following line to `Gemfile`:
+
+```ruby
+gem "vue-form-for"
+```
+
+Run `bundle install` on the terminal.
+
+Usage
+-----
+
+```
+<%= vue_form_for User.new do |f| %>
+  <%= f.text_field :name %>
+  <%= f.submit "Create" %>
+<% end %>
+```
+
+The above ERB template will be rendered into the following HTML fragment:
+
+```html
+<form class="new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post">
+  <input name="utf8" type="hidden" value="&#x2713;" />
+  <input type="hidden" name="authenticity_token" value="..." />
+  <input v-model="user.name" type="text" name="user[name]" id="user_name" />
+  <input type="submit" name="commit" value="Create" />
+</form>
+```
+
+Note that the third `<input>` element has a `v-model` attriubte, which can be
+interpreted by Vue.js as the _directive_ to create two-way data bindings between
+form fields and component's data.
+
+If you are using the [Webpacker](https://github.com/rails/webpacker),
+create `app/javascript/packs/new_user_form.js` with following code:
+
+```javascript
+import Vue from 'vue/dist/vue.esm'
+
+document.addEventListener("DOMContentLoaded", () => {
+  const NewUserForm = new Vue({
+    el: "#new_user",
+    data: {
+      user: {
+        name: ""
+      }
+    }
+  })
+})
+```
+
+Add this line to the ERB template:
+
+```text
+<%= javascript_pack_tag "new_user_form" %>
+```
+
+Then, you can get the value of `user[name]` field by the `user.name`.
+
+Other Functionalities
+---------------------
+
+You can provide a hash to the `:v` option:
+
+```
+<%= vue_form_for User.new do |f| %>
+  <%= f.text_field :name, v: { model: "customer.name" } %>
+  <%= f.submit "Create", v: { if: "submittable" } %>
+<% end %>
+```
+
+The above ERB template is identical with the following one:
+
+```
+<%= vue_form_for User.new do |f| %>
+  <%= f.text_field :name, "v-model" => "customer.name" %>
+  <%= f.submit "Create", "v-if" => "submittable" %>
+<% end %>
+```
+
+License
+-------
+
+The `initial-test-data` is distributed under the MIT license. ([MIT-LICENSE](https://github.com/oiax/initial-test-data/blob/master/MIT-LICENSE))
+
+Author
+------
+
+Tsutomu Kuroda (t-kuroda@oiax.jp)

data/lib/vue-form-for/form_builder.rb

@@ -3,10 +3,40 @@ module VueFormFor
     (field_helpers - [:label, :fields_for]).each do |selector|
       class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1
         def #{selector}(method, options = {})
+          resolve_vue_options(options)
           options[:"v-model"] ||= "\#{@object_name}.\#{method}"
           super(method, options)
         end
       RUBY_EVAL
     end
+
+    def label(method, text = nil, options = {}, &block)
+      resolve_vue_options(options)
+      super(method, text, options, &block)
+    end
+
+    def submit(value = nil, options = {})
+      resolve_vue_options(options)
+      super(value, options)
+    end
+
+    def button(value = nil, options = {}, &block)
+      resolve_vue_options(options)
+      super(value, options, &block)
+    end
+
+    private def resolve_vue_options(options)
+      if options[:v].kind_of?(Hash)
+        h = options.delete(:v)
+        h.each do |key, value|
+          case key
+          when /\A[:@]/
+            options[key] = value
+          else
+            options[:"v-#{key}"] = value
+          end
+        end
+      end
+    end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: vue-form-for
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Tsutomu KURODA
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-04-05 00:00:00.000000000 Z
+date: 2017-04-07 00:00:00.000000000 Z
 dependencies: []
 description: A custom Rails form builder for Vue.js
 email: t-kuroda@oiax.jp