[FEATURE] refactor radio buttons into own components, update and refactor tests

Author: Nils Henning

.byebug_history

@@ -1,4 +1,8 @@
 continue
+save_screenshot
+continue
+save_screenshot
+continue
 TestModel.last
 continue
 TestModel.last
@@ -250,7 +254,3 @@ params
 self
 params
 continue
-save_screenshot
-continue
-save_screenshot
-continue

app/concepts/matestack/ui/core/form/checkbox/checkbox.rb

@@ -1,14 +1,12 @@
 require_relative '../utils'
+require_relative '../has_input_html_attributes'
 require_relative '../has_errors'
 module Matestack::Ui::Core::Form::Checkbox
   class Checkbox < Matestack::Ui::Core::Component::Static
     include Matestack::Ui::Core::Form::Utils
+    include Matestack::Ui::Core::Form::HasInputHtmlAttributes
     include Matestack::Ui::Core::Form::HasErrors
 
-    html_attributes :accept, :alt, :autocomplete, :autofocus, :checked, :dirname, :disabled, :form, :formaction, 
-      :formenctype, :formmethod, :formnovalidate, :formtarget, :height, :list, :max, :maxlength, :min, :minlength, 
-      :multiple, :name, :pattern, :placeholder, :readonly, :required, :size, :src, :step, :type, :value, :width
-
     requires :key
     optional :value, :false_value, :multiple, :init, for: { as: :input_for }, label: { as: :input_label }, options: { as: :checkbox_options }
 
@@ -40,10 +38,15 @@ def vue_attributes
         ref: "input.#{attr_key}",
         'init-value': init_value,
         'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+        'value-type': value_type,
         "#{v_model_type}": input_key,
       })
     end
 
+    def value_type
+      item_value(checkbox_options.first).is_a?(Integer) ? Integer : nil
+    end
+
     def item_value(item)
       item.is_a?(Array) ? item.last : item
     end

app/concepts/matestack/ui/core/form/has_input_html_attributes.rb

@@ -0,0 +1,13 @@
+module Matestack::Ui::Core::Form::HasInputHtmlAttributes
+
+  def self.included(base)
+    base.class_eval do
+      html_attributes(
+        :accept, :alt, :autocomplete, :autofocus, :checked, :dirname, :disabled, :form, :formaction, 
+        :formenctype, :formmethod, :formnovalidate, :formtarget, :height, :list, :max, :maxlength, :min, :minlength, 
+        :multiple, :name, :pattern, :placeholder, :readonly, :required, :size, :src, :step, :type, :value, :width
+      )
+    end
+  end
+
+end

app/concepts/matestack/ui/core/form/input/input.rb

@@ -1,14 +1,12 @@
 require_relative '../utils'
+require_relative '../has_input_html_attributes'
 require_relative '../has_errors'
 module Matestack::Ui::Core::Form::Input
   class Input < Matestack::Ui::Core::Component::Static
     include Matestack::Ui::Core::Form::Utils
+    include Matestack::Ui::Core::Form::HasInputHtmlAttributes
     include Matestack::Ui::Core::Form::HasErrors
 
-    html_attributes :accept, :alt, :autocomplete, :autofocus, :checked, :dirname, :disabled, :form, :formaction, 
-      :formenctype, :formmethod, :formnovalidate, :formtarget, :height, :list, :max, :maxlength, :min, :minlength, 
-      :multiple, :name, :pattern, :placeholder, :readonly, :required, :size, :src, :step, :type, :value, :width
-
     requires :key, :type
     optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
 

app/concepts/matestack/ui/core/form/radio/radio.rb

@@ -0,0 +1,75 @@
+require_relative '../utils'
+require_relative '../has_input_html_attributes'
+require_relative '../has_errors'
+module Matestack::Ui::Core::Form::Radio
+  class Radio < Matestack::Ui::Core::Component::Static
+    include Matestack::Ui::Core::Form::Utils
+    include Matestack::Ui::Core::Form::HasInputHtmlAttributes
+    include Matestack::Ui::Core::Form::HasErrors
+
+    requires :key
+    optional :value, :false_value, :multiple, :init, for: { as: :input_for }, label: { as: :input_label }, options: { as: :radio_options }
+
+    def response
+      radio_options.to_a.each do |item|
+        input html_attributes.merge(
+          attributes: vue_attributes.merge(ref: "select.#{attr_key}"), 
+          type: :radio,
+          id: "#{id_for_item(item_value(item))}",
+          name: item_name(item),
+          value: item_value(item),
+        )
+        label text: item_label(item), for: id_for_item(item_value(item))
+      end
+      render_errors
+    end
+
+    def vue_attributes
+      (options[:attributes] || {}).merge({
+        "@change": change_event,
+        ref: "select.#{attr_key}",
+        'init-value': init_value,
+        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+        'value-type': value_type,
+        "#{v_model_type}": input_key,
+      })
+    end
+
+    def value_type
+      item_value(radio_options.first).is_a?(Integer) ? Integer : nil
+    end
+
+    def item_value(item)
+      item.is_a?(Array) ? item.last : item
+    end
+
+    def item_name(item)
+      "#{attr_key}_#{item.is_a?(Array) ? item.first : item}"
+    end
+
+    def item_label(item)
+      item.is_a?(Array) ? item.first : item
+    end
+
+    def checked_value
+      value || 1
+    end
+
+    def v_model_type
+      if radio_options && item_value(radio_options.first).is_a?(Integer)
+        'v-model.number'
+      else
+        'v-model'
+      end
+    end
+
+    def change_event
+      "inputChanged('#{attr_key}')"
+    end
+
+    def id_for_item(value)
+      "#{html_attributes[:id]}_#{value}"
+    end
+
+  end
+end

lib/matestack/ui/core/components.rb

@@ -73,6 +73,7 @@ def self.require_core_component(name)
   require_core_component "form"
   require_core_component "form/checkbox"
   require_core_component "form/input"
+  require_core_component "form/radio"
   require_core_component "form/select"
   require_core_component "form/submit"
   require_core_component "header"
@@ -186,6 +187,7 @@ def self.require_core_component(name)
   form: Matestack::Ui::Core::Form::Form,
   form_checkbox: Matestack::Ui::Core::Form::Checkbox::Checkbox,
   form_input: Matestack::Ui::Core::Form::Input::Input,
+  form_radio: Matestack::Ui::Core::Form::Radio::Radio,
   form_select: Matestack::Ui::Core::Form::Select::Select,
   form_submit: Matestack::Ui::Core::Form::Submit::Submit,
   form_textarea: Matestack::Ui::Core::Form::Textarea::Textarea,