volt-fields 0.1.3 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 367e338964108d7f1191e201bd9abe726b9092e2
-  data.tar.gz: 834a3bd03171d6b49c77c090f5295a0c0ca82467
+  metadata.gz: 4c9d96aca673395cee2c2ee656eb50fe29c44301
+  data.tar.gz: c8d8b64589e87542026de04cf4b0a6f1e93902c6
 SHA512:
-  metadata.gz: ee7343ee75568268dc8837ef993c0e15d3ef9b82263a1df5340d45df7ee90978c40693aeb6edb8244aebc2d32b6f01e2f47d63a2c0bffedb45406d5aafd22729
-  data.tar.gz: d70a0b032a2e7b71c715c8d3f3b2ea1620dfbb4e2af22be79df751b389014211df1691b4f59f5d20829fbbc29f10072372992de6d7bd4349fc2401bd691badf2
+  metadata.gz: e63b11644a0d388832d24b48a0309900955a442dbea06f765a81e5563163ec525e2e9529d65e9c50ee607ae93ab5bf2f6c73bbef36896aa444f812d05656af9c
+  data.tar.gz: e9bf741a68f1ba7140c4eb8e30cd12f60f5e71170e48a5b1dd4475fef323d0db8a00cda033bc24fb704f1ce180df1786bbde6e4320d03739b0d5e6ea0303700d

data/.gitignore

@@ -1,5 +1,6 @@
 *.gem
 *.rbc
+*.DS_Store
 .bundle
 .config
 .yardoc

data/README.md

@@ -12,9 +12,10 @@ Currently supported control types:
 * Select
 * Radio
 * Checkbox
+* Button groups / bar
 
 ## How to Use
-### Setup
+#### Setup
 Include in your gemfile:
 
 ```
@@ -26,20 +27,46 @@ Then use fields as tags in your views:
 <:fields:text value="{{ model.first_name }}"/>
 ```
 
-### Text and Textarea
+#### Options common to all controls
+Attribute | Description | Required/Optional | Default
+----- | ----- | -----
+value | The model field to bind to. | Required | None |
+label | A label for the field. Pass 'false' for no label. | Optional | Name of the field on the model.
+
+### Control Types
+
+#### Text and Textarea
 ```
 <:fields:text value="{{ model.first_name }}"/>
 ```
+##### Alternative formats
+* <:fields:textarea />
 
-### Select
-Select fields accept either an array of options, or an array of {label: '', value: ''} hashes.
+#### Select
+Select fields accept either an array of options, or an array of {label: '', value: ''} hashes. You can pass promises and the options will be populated when the promise resolves.
 
 ```
 <:fields:select value="{{ model.role }}" options="{{ ['User', 'Admin', 'Something Else']}}"/>
 ```
-    
-### Radio
-For radio buttons, pass an options array of {label: '', value: ''} hashes.
+
+#### Button Groups / Bar
+[Button groups](http://getbootstrap.com/components/#btn-groups) function just like select boxes, but provide a switch-like interface.
+
+```
+<:fields:button_group selected_button_class="btn-primary" value="{{ model.status }}" options="{{ MyModel.something_that_returns_a_promise }}" />
+```
+
+ Attribute | Description | Default
+ ------ | ------ | -------
+ button_class | Class to apply to all buttons (unless selected_button_class is also supplied) (i.e. btn-default, btn-primary) | 'btn-default'
+ active_class | Class applied to the selected option (in addition to selected_button_class (i.e. 'active') | 'active'
+ selected_button_class | Class to apply to the selected button (i.e. btn-default, btn-primary) | 'btn-default'
+
+ ##### Alternative formats
+ * <:fields:button_group:justified />
+
+#### Radio
+Radio buttons accept either an array of options, or an array of {label: '', value: ''} hashes.
 
 ```
 <:fields:radio value="{{ model.active }}" options="{{[{label: 'Active', value: true},{label:'Inactive', value: false}]}}"/>
@@ -47,10 +74,11 @@ For radio buttons, pass an options array of {label: '', value: ''} hashes.
 
 For inline radio buttons, use ```:fields:radio:inline```.
 
-### Checkbox
+#### Checkbox
 For checkboxes, use 'checked' instead of 'value' to bind the checkbox to a boolean field.
 ```
 <:fields:checkbox checked="{{ model.active }}"/>
 ```
 
-For inline radio buttons, use ```:fields:radio:inline```.
+##### Alternative formats
+* <:fields:checkbox:inline />

data/VERSION

@@ -1 +1 @@
-0.1.3
+0.2.0

data/app/fields/controllers/button_group_controller.rb

@@ -0,0 +1,28 @@
+require 'fields/controllers/main_controller'
+require 'fields/controllers/select_radio_controller'
+
+module Fields
+  class ButtonGroupController < SelectRadioController
+
+    def selected?(value)
+      true if value == model_inst.send(@field_name)
+    end
+
+    def set_val(value)
+      model_inst.send("#{@field_name}=", value)
+    end
+
+    def button_class
+      attrs.button_class || 'btn-default'
+    end
+
+    def selected_button_class
+      attrs.selected_button_class || attrs.button_class || 'btn-default'
+    end
+
+    def active_class
+      attrs.active_class || 'active'
+    end
+
+  end
+end

data/app/fields/controllers/main_controller.rb

@@ -1,6 +1,7 @@
 module Fields
   class MainController < Volt::ModelController
     before_action :setup_field
+    reactive_accessor :options
 
     def setup_field
       # Default to text fields
@@ -26,7 +27,9 @@ module Fields
     end
 
     def label
-      attrs.label || @field_name.titleize
+      unless ['false','False'].include?(attrs.label)
+        attrs.label || @field_name.titleize
+      end
     end
 
     # Find the errors for this field
@@ -34,6 +37,10 @@ module Fields
       model_inst.marked_errors[@field_name]
     end
 
+    def field_name
+      @field_name
+    end
+
     # When a field goes out of focus, then we want to start checking a field
     def blur
       model_inst.mark_field!(@field_name)

data/app/fields/controllers/radio_controller.rb

@@ -1,15 +1,18 @@
 require 'fields/controllers/main_controller'
+require 'fields/controllers/select_radio_controller'
 
 module Fields
-  class RadioController < MainController
-    # When a radio button is clicked, set the value of the field and start checking the field
-    def set_field(value)
-      model_inst.send("#{@field_name}=", value)
-      model_inst.mark_field!(@field_name)
+  class RadioController < SelectRadioController
+    def name
+      attrs.name || "#{field_name}_radio"
     end
 
-    def checked?(value)
-      value == model_inst.send(@field_name)
+    def selected?(option)
+      option[:value] == model_inst.send(@field_name) ? true : false
+    end
+
+    def set(option)
+      model_inst.send("#{@field_name}=", option[:value])
     end
   end
 end

data/app/fields/controllers/select_controller.rb

@@ -1,18 +1,7 @@
 require 'fields/controllers/main_controller'
+require 'fields/controllers/select_radio_controller'
 
 module Fields
-  class SelectController < MainController
-    def options
-      if attrs.options[0].is_a?(Hash)
-        options = attrs.options
-      else
-        options = attrs.options.collect { |option| { value: option, label: option } }
-      end
-      options
-    end
-
-    def selected?(value)
-      true if value == model_inst.send(@field_name)
-    end
+  class SelectController < SelectRadioController
   end
 end

data/app/fields/controllers/select_radio_controller.rb

@@ -0,0 +1,16 @@
+require 'fields/controllers/main_controller'
+
+module Fields
+  class SelectRadioController < MainController
+    def options
+      attrs.options.then do |options|
+        if options[0].is_a?(Hash)
+          options_hash = options
+        else
+          options_hash = options.collect { |option| {value: option, label: option }}
+        end
+        options_hash
+      end
+    end
+  end
+end

data/app/fields/views/button_group/index.html

@@ -0,0 +1,21 @@
+<:Body>
+  <div class="form-group {{ if errors }}has-error{{ elsif marked }}has-success{{ end }} has-feedback">
+    {{ if label }}
+      <label class="control-label">{{ label }}</label>
+    {{ end }}
+    <div class="btn-group" role="group">
+      {{ options.each do |option| }}
+        {{ if selected?(option[:value]) }}
+          <button type="button" class="btn {{ selected_button_class }} {{ active_class }}" e-click="set_val(option[:value])"> {{ option[:label] }}</option>
+        {{ else }}
+          <button type="button" class="btn {{ button_class }}" e-click="set_val(option[:value])"> {{ option[:label] }}</option>
+        {{ end }}
+      {{ end }}
+    </div>
+    {{ if errors }}
+      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
+      <span class="control-label errors">{{ (errors || []).join(', ') }}</span>
+    {{ elsif marked }}
+      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+    {{ end }}
+  </div>

data/app/fields/views/button_group/justified.html

@@ -0,0 +1,23 @@
+<:Body>
+  <div class="form-group {{ if errors }}has-error{{ elsif marked }}has-success{{ end }} has-feedback">
+    {{ if label }}
+      <label class="control-label">{{ label }}</label>
+    {{ end }}
+    <div class="btn-group btn-group-justified" role="group">
+       <div class="btn-group" role="group">
+          {{ options.each do |option| }}
+            {{ if selected?(option[:value]) }}
+              <button type="button" class="btn {{ selected_button_class }} {{ active_class }}" e-click="set_val(option[:value])"> {{ option[:label] }}</option>
+            {{ else }}
+              <button type="button" class="btn {{ button_class }}" e-click="set_val(option[:value])"> {{ option[:label] }}</option>
+            {{ end }}
+          {{ end }}
+        </div>
+    </div>
+    {{ if errors }}
+      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
+      <span class="control-label errors">{{ (errors || []).join(', ') }}</span>
+    {{ elsif marked }}
+      <span class="glyphicon glyphicon-ok form-control-feedback"></span>
+    {{ end }}
+  </div>

data/app/fields/views/radio/index.html

@@ -1,24 +1,24 @@
 <:Body>
   <div class="{{ if errors }}has-error{{ elsif marked }}has-success{{ end }} has-feedback">
-    {{ attrs.options.each do |option| }}
+    {{ if label }}
+      <label class="control-label">{{ label }}</label>
+    {{ end }}
+    {{ options.each do |option| }}
       <div class="radio">
-        {{ if checked?(option['value']) }}
-          <label>
-            <input type="radio" e-click="set_field(option['value'])" name="{{ @field_name }}_radio" value="{{option['value']}}" checked/>
-            {{ option['label'] }}
-          </label>
-          {{ if errors }}
-            <span class="glyphicon glyphicon-remove"></span>
-            <span class="control-label errors">{{ (errors || []).join(', ') }}</span>
-          {{ elsif marked }}
-            <span class="glyphicon glyphicon-ok"></span>
+        <label>
+          {{ if selected?(option) }}
+            <input type="radio" e-click="set(option)" name="{{ name }}" value="{{ option[:value] }}" checked/>
+          {{ else }}
+            <input type="radio" e-click="set(option)" name="{{ name }}" value="{{ option[:value] }}"/>
           {{ end }}
-        {{ else }}
-          <label>
-            <input type="radio" e-click="set_field(option['value'])" name="{{ @field_name }}_radio" value="{{option['value']}}"/>
-            {{ option['label'] }}
-          </label>
+          {{ option[:label] }}
+        </label>
+        {{ if errors }}
+          <span class="glyphicon glyphicon-remove"></span>
+          <span class="control-label errors">{{ (errors || []).join(', ') }}</span>
+        {{ elsif marked }}
+          <span class="glyphicon glyphicon-ok"></span>
         {{ end }}
+      </div>
     {{ end }}
-    </div>
-  </div>
+  </div>

data/app/fields/views/radio/inline.html

@@ -1,24 +1,21 @@
 <:Body>
   <div class="{{ if errors }}has-error{{ elsif marked }}has-success{{ end }} has-feedback">
-    {{ attrs.options.each do |option| }}
+    {{ options.each do |option| }}
       <div class="radio-inline">
-        {{ if checked?(option['value']) }}
-          <label class="radio-inline">
-            <input type="radio" e-click="set_field(option['value'])" name="{{ @field_name }}_radio" value="{{option['value']}}" checked/>
-            {{ option['label'] }}
-          </label>
-          {{ if errors }}
-            <span class="glyphicon glyphicon-remove"></span>
-            <span class="control-label errors">{{ (errors || []).join(', ') }}</span>
-          {{ elsif marked }}
-            <span class="glyphicon glyphicon-ok"></span>
+        <label>
+          {{ if selected?(option) }}
+            <input type="radio" e-click="set(option)" name="{{ name }}" value="{{ option[:value] }}" checked/>
+          {{ else }}
+            <input type="radio" e-click="set(option)" name="{{ name }}" value="{{ option[:value] }}"/>
           {{ end }}
-        {{ else }}
-          <label class="radio-inline">
-            <input type="radio" e-click="set_field(option['value'])" name="{{ @field_name }}_radio" value="{{option['value']}}"/>
-            {{ option['label'] }}
-          </label>
+          {{ option[:label] }}
+        </label>
+        {{ if errors }}
+          <span class="glyphicon glyphicon-remove"></span>
+          <span class="control-label errors">{{ (errors || []).join(', ') }}</span>
+        {{ elsif marked }}
+          <span class="glyphicon glyphicon-ok"></span>
         {{ end }}
+      </div>
     {{ end }}
-    </div>
-  </div>
+  </div>

data/app/fields/views/select/index.html

@@ -3,13 +3,15 @@
     {{ if label }}
       <label class="control-label">{{ label }}</label>
     {{ end }}
-    <select value="{{ attrs.value }}" e-focusout="blur" class="form-control">
+    <select value="{{ attrs.value }}" e-change="blur" class="form-control">
+      {{ if attrs.value.nil? }}
+        <option value="" selected>
+        </option>
+      {{ end }}
       {{ options.each do |option| }}
-        {{ if selected?(option[:value]) }}
-          <option value="{{ option[:value] }}" selected> {{ option[:label] }}</option>
-        {{ else }}
-          <option value="{{ option[:value] }}"> {{ option[:label] }}</option>
-        {{ end }}
+          <option value="{{ option[:value] }}">
+            {{ option[:label] }}
+          </option>
       {{ end }}
     </select>
     {{ if errors }}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: volt-fields
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.2.0
 platform: ruby
 authors:
 - Ryan Stout
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-07-01 00:00:00.000000000 Z
+date: 2015-11-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rake
@@ -38,12 +38,16 @@ files:
 - VERSION
 - app/fields/config/dependencies.rb
 - app/fields/config/routes.rb
+- app/fields/controllers/button_group_controller.rb
 - app/fields/controllers/checkbox_controller.rb
 - app/fields/controllers/main_controller.rb
 - app/fields/controllers/radio_controller.rb
 - app/fields/controllers/select_controller.rb
+- app/fields/controllers/select_radio_controller.rb
 - app/fields/controllers/text_controller.rb
 - app/fields/controllers/textarea_controller.rb
+- app/fields/views/button_group/index.html
+- app/fields/views/button_group/justified.html
 - app/fields/views/checkbox/index.html
 - app/fields/views/checkbox/inline.html
 - app/fields/views/radio/index.html