vue-form-for 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: '019def4fa71dae16fcdac1cc36ac206726a99ab3'
-  data.tar.gz: 9733ade5ba2ed0b3d15daefa1c112250c03d00ae
+  metadata.gz: 7ff4d8f03077d4f157e9af9e0a343e2e0f12b898
+  data.tar.gz: 4d02d6ac2c039a76dda446a390a5e210423031aa
 SHA512:
-  metadata.gz: ce25f0da67e1aac93b87aaa26a80b6cfa057ade399f5b2c6b019069ccc4f9da8447fe4cdca3b091920a9d9c44e229a2881716c367de96f817566d48807e1fd5a
-  data.tar.gz: 18f9ad7bd787e45a3ea71c377d3437d1d1c2ac3361322c538b0a5eb694fd684518545043eaa47f33ab08bdf039cd2e715bb2f78ebce9f1a9d2d4c461c2e1c97c
+  metadata.gz: e746e90c1769074d41384588ede2efe0fa2c0b0a9ee0837becdd209b6f5f3e8c8c00a341d837a90ac419a27a270b323743c5acce51e2fdb9b2fff1e691fd8f71
+  data.tar.gz: 861d209014b22c59ecaa4e381508fbbeb0fe6573751a33cab5f6112e6d43d787423995073f3b23f48ff74629d63da3203ec1c03b03bba30e0909486c966c2ecc

data/CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG - vue-form-for
 
+## 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.

data/README.md

@@ -81,24 +81,103 @@ Add this line to the ERB template:
 
 Then, you can get the value of `user[name]` field by the `user.name`.
 
-Other Functionalities
----------------------
+Tag Helper
+----------
 
-You can provide a hash to the `:v` option:
+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:
 
 ```
-<%= vue_form_for User.new do |f| %>
-  <%= f.text_field :name, v: { model: "customer.name" } %>
-  <%= f.submit "Create", v: { if: "submittable" } %>
-<% end %>
+<%= 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:
+
+```
+<%= 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:
+
+```
+<%= 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:
+
+```
+<%= vue_content_tag(:span, "Hello", "v-on:click.once" => "doThis" })
+<%= vue_content_tag(:button, "Hello", "v-on:click.prevent" => "doThis" })
 ```
 
-The above ERB template is identical with the following one:
+### 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:
+
+```
+<%= vue_content_tag(:button, "Click me!", disabled: "!clickable")
+<%= vue_content_tag(:button, "Click me!", "v-bind:disabled" => "!clickable")
+```
+
+### 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:
+
+```
+<%= 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:
+
+```
+<%= 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:
 
 ```
 <%= vue_form_for User.new do |f| %>
-  <%= f.text_field :name, "v-model" => "customer.name" %>
-  <%= f.submit "Create", "v-if" => "submittable" %>
+  <%= f.text_field :name, model: "userName" %>
+  <label>
+    <%= f.check_box :administrator, on: { click: "doThis" } %> Administrator
+  </label>
+  <%= f.submit "Create", disabled: "!submittable" %>
 <% end %>
 ```
 

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

@@ -1,5 +1,9 @@
+require_relative "./vue_options_resolver"
+
 module VueFormFor
   class FormBuilder < ActionView::Helpers::FormBuilder
+    include VueFormFor::VueOptionsResolver
+
     (field_helpers - [:label, :fields_for]).each do |selector|
       class_eval <<-RUBY_EVAL, __FILE__, __LINE__ + 1
         def #{selector}(method, options = {})
@@ -24,19 +28,5 @@ module VueFormFor
       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

data/lib/vue-form-for/{form_helpers.rb → form_helper.rb}

@@ -1,5 +1,5 @@
 module VueFormFor
-  module FormHelpers
+  module FormHelper
     def vue_form_for(record, options = {}, &block)
       options[:builder] ||= VueFormFor::FormBuilder
       form_for(record, options, &block)

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

@@ -1,10 +1,12 @@
-require 'vue-form-for/form_helpers'
+require 'vue-form-for/form_helper'
+require 'vue-form-for/tag_helper'
 
 module VueFormFor
   class Railtie < Rails::Railtie
-    initializer "vue-form-for.view_form_helpers" do
+    initializer "vue-form-for.view_form_helper" do
       ActiveSupport.on_load :action_view do
-        include VueFormFor::FormHelpers
+        include VueFormFor::FormHelper
+        include VueFormFor::TagHelper
       end
     end
   end

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

@@ -0,0 +1,26 @@
+require_relative "./vue_options_resolver"
+
+module VueFormFor
+  module TagHelper
+    include VueFormFor::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-form-for/vue_options_resolver.rb

@@ -0,0 +1,42 @@
+module VueFormFor
+  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
+  end
+end

data/lib/vue-form-for.rb

@@ -1,2 +1,2 @@
 require 'vue-form-for/form_builder'
-require 'vue-form-for/railtie' if defined?(Rails)
+require 'vue-form-for/railtie'

metadata

@@ -1,16 +1,57 @@
 --- !ruby/object:Gem::Specification
 name: vue-form-for
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Tsutomu KURODA
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-04-07 00:00:00.000000000 Z
-dependencies: []
-description: A custom Rails form builder for Vue.js
+date: 2017-04-09 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: []
@@ -21,8 +62,10 @@ files:
 - README.md
 - lib/vue-form-for.rb
 - lib/vue-form-for/form_builder.rb
-- lib/vue-form-for/form_helpers.rb
+- lib/vue-form-for/form_helper.rb
 - lib/vue-form-for/railtie.rb
+- lib/vue-form-for/tag_helper.rb
+- lib/vue-form-for/vue_options_resolver.rb
 homepage: https://github.com/kuroda/vue-form-for
 licenses:
 - MIT