vue-rails-form-builder 0.5.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: eef8da7255dabca2715386145fcc26924d6c57d2
+  data.tar.gz: cc4b535b836f76ebcc0da4e868f9db6be0e4456e
+SHA512:
+  metadata.gz: 6ae0a9d420c239f59a6e50df6e89d5be1a540317a56db421ee5adc59d42e2b28c18fd68f27fc7bdc95406e1926f30cc2a428bbaaeec19427f182f63ee9b3a161
+  data.tar.gz: 52a4b0bc39f1d19aeb18080a66220b85d687de7ee134f95eff16878897ad485c4bd9adace00b38a0662b1f92d594b6c5b0e3d6ba779f3c8fe8a8fdc9aba676be

data/CHANGELOG.md

@@ -0,0 +1,38 @@
+# CHANGELOG - vue-rails-form-builder
+
+## 0.5.0 (2017-05-12)
+
+* Change the name of this gem to `vue-rails-form-builder` from `vue-form-for`
+
+## 0.4.0 (2017-05-11)
+
+* Support SELECT tag.
+
+## 0.3.3 (2017-05-09)
+
+* Generate v-model attr for check boxes and radio buttons.
+
+## 0.3.2 (2017-05-09)
+
+* Generate correct value for v-model on nested form.
+
+## 0.3.1 (2017-04-11)
+
+* Fix `check_box` and `radio_button` helper methods.
+
+## 0.3.0 (2017-04-09)
+
+* Add `vue_tag` and `vue_content_tag` helper methods
+  that can handle `:bind`, `:on`, `:checked`, `:disabled`, `:multiple`,
+  `:readonly`, `:selected`, `:text`, `:html`, `:show`, `:if`, `:else`,
+  `:else_if`, `:for`, `:model`, `:pre`, `:cloak`, `:once` options.
+* Add similar functionalities to the form building helpers.
+* Remove `:v` option handling.
+
+## 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/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2017 Tsutomu Kuroda
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,223 @@
+vue-rails-form-builder
+======================
+
+[![Gem Version](https://badge.fury.io/rb/vue-rails-form-builder.svg)](https://badge.fury.io/rb/vue-rails-form-builder)
+
+A custom Rails form builder for Vue.js
+
+Synopsis
+--------
+
+```erb
+<%= 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-rails-form-builder"
+```
+
+Run `bundle install` on the terminal.
+
+Usage
+-----
+
+```erb
+<%= 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:
+
+```erb
+<%= javascript_pack_tag "new_user_form" %>
+```
+
+Then, you can get the value of `user[name]` field by the `user.name`.
+
+Tag Helper
+----------
+
+This gem provides two additional helper methods: `vue_tag` and `vue_content_tag`.
+
+Basically, they behave like `tag` and `content_tag` helpers of Action Views.
+But, they interpret the *HTML options* in a different way as explained below.
+
+### The `:bind` option
+
+If the *HTML options* have a `:bind` key and its value is a hash,
+they get transformed into the Vue.js `v-bind` directives.
+
+In the example below, these two lines have the same result:
+
+```erb
+<%= vue_content_tag(:span, "Hello", bind: { style: "{ color: textColor }" }) %>
+<%= vue_content_tag(:span, "Hello", "v-bind:style" => "{ color: textColor }" }) %>
+```
+
+Note that you should use the latter style if you want to specify *modifiers*
+to the `v-bind` directives. For example:
+
+```erb
+<%= vue_content_tag(:span, "Hello", "v-bind:text-content.prop" => "message" }) %>
+```
+
+### The `:on` option
+
+If the *HTML options* have a `:on` key and its value is a hash,
+they get transformed into the Vue.js `v-on` directives.
+
+In the example below, these two lines have the same result:
+
+```erb
+<%= vue_content_tag(:span, "Hello", on: { click: "doThis" }) %>
+<%= vue_content_tag(:span, "Hello", "v-on:click" => "doThis" }) %>
+```
+
+Note that you should use the latter style if you want to specify *modifiers*
+to the `v-on` directives. For example:
+
+```erb
+<%= vue_content_tag(:span, "Hello", "v-on:click.once" => "doThis" }) %>
+<%= vue_content_tag(:button, "Hello", "v-on:click.prevent" => "doThis" }) %>
+```
+
+### Boolean attributes
+
+If the *HTML options* have a string value (not a boolean value)
+for `checked`, `disabled`, `multiple`, `readonly` or `selected` key,
+the key gets transformed by adding `v-bind:` to its head.
+
+In the example below, these two lines have the same result:
+
+```erb
+<%= vue_content_tag(:button, "Click me!", disabled: "!clickable") %>
+<%= vue_content_tag(:button, "Click me!", "v-bind:disabled" => "!clickable") %>
+```
+
+If you want to add a normal attribute without `v-bind:` prefix,
+specify `true` (boolean) to these keys:
+
+```erb
+<%= vue_content_tag(:button, "Click me!", disabled: true) %>
+```
+
+This line produces the following HTML fragment:
+
+```html
+<button disabled="disabled">Click me!</button>
+```
+
+
+### Vue.js directives
+
+If the *HTML options* have one or more of the following keys
+
+> `text`, `html`, `show`, `if`, `else`, `else_if`, `for`, `model`, `pre`, `cloak`, `once`
+
+then, these keys get transformed by adding `v-` to their head.
+
+In the example below, these two lines have the same result:
+
+```erb
+<%= vue_tag(:hr, if: "itemsPresent") %>
+<%= vue_tag(:hr, "v-if" => "itemsPresent") %>
+```
+
+Note that the `:else_if` key is transformed into the `v-else-if` directive:
+
+```erb
+<%= vue_tag(:hr, else_if: "itemsPresent") %>
+<%= vue_tag(:hr, "v-else-if" => "itemsPresent") %>
+```
+
+### Extensions to the form building helpers
+
+When you build HTML forms using `vue_form_for`,
+the form building helpers, such as `text_field`, `check_box`, etc.,
+have these additional behavior.
+
+Example:
+
+```erb
+<%= vue_form_for User.new do |f| %>
+  <%= f.text_field :name, model: "userName" %>
+  <label>
+    <%= f.check_box :administrator, on: { click: "doThis" } %> Administrator
+  </label>
+  <%= f.submit "Create", disabled: "!submittable" %>
+<% end %>
+```
+
+Data Initialization
+-------------------
+
+As the official Vue.js document says:
+
+> `v-model` will ignore the initial `value`, `checked` or `selected` attributes
+> found on any form elements.
+> (https://vuejs.org/v2/guide/forms.html)
+
+Because of this, all form controls get reset after the Vue component is mounted.
+
+However, you can use
+[vue-data-scooper](https://github.com/kuroda/vue-data-scooper) plugin
+in order to keep the original state of the form.
+
+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-rails-form-builder.rb

@@ -0,0 +1,2 @@
+require "vue-rails-form-builder/form_builder"
+require "vue-rails-form-builder/railtie"

data/lib/vue-rails-form-builder/form_builder.rb

@@ -0,0 +1,51 @@
+require_relative "./vue_options_resolver"
+
+module VueRailsFormBuilder
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    include VueRailsFormBuilder::VueOptionsResolver
+
+    (field_helpers - [:label, :check_box, :radio_button, :fields_for])
+      .each do |selector|
+      class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1
+        def #{selector}(method, options = {})
+          resolve_vue_options(options)
+          add_v_model_attribute(method, options)
+          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 check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
+      resolve_vue_options(options)
+      add_v_model_attribute(method, options)
+      super(method, options, checked_value, unchecked_value)
+    end
+
+    def radio_button(method, tag_value, options = {})
+      resolve_vue_options(options)
+      add_v_model_attribute(method, options)
+      super(method, tag_value, options)
+    end
+
+    def select(method, choices = nil, options = {}, html_options = {}, &block)
+      resolve_vue_options(html_options)
+      add_v_model_attribute(method, html_options)
+      super(method, choices, options, html_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
+  end
+end

data/lib/vue-rails-form-builder/form_helper.rb

@@ -0,0 +1,8 @@
+module VueRailsFormBuilder
+  module FormHelper
+    def vue_form_for(record, options = {}, &block)
+      options[:builder] ||= VueRailsFormBuilder::FormBuilder
+      form_for(record, options, &block)
+    end
+  end
+end

data/lib/vue-rails-form-builder/railtie.rb

@@ -0,0 +1,13 @@
+require "vue-rails-form-builder/form_helper"
+require "vue-rails-form-builder/tag_helper"
+
+module VueRailsFormBuilder
+  class Railtie < Rails::Railtie
+    initializer "vue-rails-form-builder.view_form_helper" do
+      ActiveSupport.on_load :action_view do
+        include VueRailsFormBuilder::FormHelper
+        include VueRailsFormBuilder::TagHelper
+      end
+    end
+  end
+end

data/lib/vue-rails-form-builder/tag_helper.rb

@@ -0,0 +1,26 @@
+require_relative "./vue_options_resolver"
+
+module VueRailsFormBuilder
+  module TagHelper
+    include VueRailsFormBuilder::VueOptionsResolver
+
+    def vue_tag(name, options = nil, open = false, escape = true)
+      resolve_vue_options(options) if options
+      tag(name, options, open, escape)
+    end
+
+    def vue_content_tag(name, content_or_options_with_block = nil, options = nil,
+      escape = true, &block)
+
+      if block_given?
+        if content_or_options_with_block.is_a?(Hash)
+          resolve_vue_options(content_or_options_with_block)
+        end
+      else
+        resolve_vue_options(options) if options
+      end
+
+      content_tag(name, content_or_options_with_block, options, escape, &block)
+    end
+  end
+end

data/lib/vue-rails-form-builder/vue_options_resolver.rb

@@ -0,0 +1,47 @@
+module VueRailsFormBuilder
+  module VueOptionsResolver
+    private def resolve_vue_options(options)
+      if options[:bind].kind_of?(Hash)
+        h = options.delete(:bind)
+        h.each do |key, value|
+          if value.kind_of?(String)
+            options[:"v-bind:#{key}"] = value
+          end
+        end
+      end
+
+      if options[:on].kind_of?(Hash)
+        h = options.delete(:on)
+        h.each do |key, value|
+          if value.kind_of?(String)
+            options[:"v-on:#{key}"] = value
+          end
+        end
+      end
+
+      %i(checked disabled multiple readonly selected).each do |attr_name|
+        if options[attr_name].kind_of?(String)
+          options[:"v-bind:#{attr_name}"] = options.delete(attr_name)
+        end
+      end
+
+      %i(text html show if else else_if for model).each do |directive|
+        if options[directive].kind_of?(String)
+          options[:"v-#{directive.to_s.dasherize}"] = options.delete(directive)
+        end
+      end
+
+      %i(pre cloak once).each do |directive|
+        if options[directive]
+          options.delete(directive)
+          options[:"v-#{directive}"] = "v-#{directive}"
+        end
+      end
+    end
+
+    private def add_v_model_attribute(method, options)
+      namespace = @object_name.gsub(/\[/, ".").gsub(/\]/, "")
+      options[:"v-model"] ||= "#{namespace}.#{method}"
+    end
+  end
+end

metadata

@@ -0,0 +1,93 @@
+--- !ruby/object:Gem::Specification
+name: vue-rails-form-builder
+version: !ruby/object:Gem::Version
+  version: 0.5.0
+platform: ruby
+authors:
+- Tsutomu KURODA
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2017-05-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: actionview
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.2'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.2'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6'
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.2'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.2'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6'
+description: 'This gem provides three view helpers for Rails app: vue_form_for, vue_tag,
+  vue_content_tag.'
+email: t-kuroda@oiax.jp
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- MIT-LICENSE
+- README.md
+- lib/vue-rails-form-builder.rb
+- lib/vue-rails-form-builder/form_builder.rb
+- lib/vue-rails-form-builder/form_helper.rb
+- lib/vue-rails-form-builder/railtie.rb
+- lib/vue-rails-form-builder/tag_helper.rb
+- lib/vue-rails-form-builder/vue_options_resolver.rb
+homepage: https://github.com/kuroda/vue-rails-form-builder
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 2.2.2
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.6.11
+signing_key: 
+specification_version: 4
+summary: A custom Rails form builder for Vue.js
+test_files: []