finalize textarea component, add form_textarea component, add tests

Author: Nils Henning

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

@@ -1,5 +1,7 @@
+require_relative '../utils'
 module Matestack::Ui::Core::Form::Input
   class Input < Matestack::Ui::Core::Component::Static
+    include Matestack::Ui::Core::Form::Utils
 
     html_attributes :accept, :alt, :autocomplete, :autofocus, :checked, :dirname, :disabled, :form, :formaction, 
       :formenctype, :formmethod, :formnovalidate, :formtarget, :height, :list, :max, :maxlength, :min, :minlength, 
@@ -42,50 +44,6 @@ def custom_options_validation
       raise "included form config is missing, please add ':include' to parent form component" if @included_config.nil?
     end
 
-    def input_key
-      "data['#{key.to_s}']"
-    end
-
-    def error_key
-      "errors['#{key.to_s}']"
-    end
-
-    def input_wrapper
-      case input_for
-      when nil
-        return nil
-      when Symbol, String
-        return input_for
-      end
-      if input_for.respond_to?(:model_name)
-        return input_for.model_name.singular
-      end
-    end
-
-    def attr_key
-      if input_wrapper.nil?
-        return "#{key.to_s}#{'[]' if multiple}"
-      else
-        return "#{input_wrapper}.#{key.to_s}#{'[]' if multiple}"
-      end
-    end
-
-    def init_value
-      return init unless init.nil?
-
-      unless input_for.nil?
-        value = parse_value(input_for.send key)
-      else
-        unless @included_config.nil? && @included_config[:for].nil?
-          if @included_config[:for].respond_to?(key)
-            value = parse_value(@included_config[:for].send key)
-          else
-            @included_config[:for][key] if @included_config[:for].is_a?(Hash)
-          end
-        end
-      end
-    end
-
     private
 
     def parse_value(value)

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

@@ -0,0 +1,27 @@
+require_relative '../utils'
+module Matestack::Ui::Core::Form::Textarea
+  class Textarea < Matestack::Ui::Core::Textarea::Textarea
+    include Matestack::Ui::Core::Form::Utils
+
+    requires :key
+    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
+
+    def response
+      label text: input_label if input_label
+      textarea html_attributes.merge(attributes: vue_attributes)
+      span class: 'errors', attributes: { 'v-if': error_key } do
+        span class: 'error', text: '{{ error }}', attributes: { 'v-for': "error in #{error_key}" }
+      end
+    end
+
+    def vue_attributes
+      (options[:attributes] || {}).merge({
+        'v-model': input_key,
+        '@change': "inputChanged('#{attr_key}')",
+        "init-value": init_value,
+        ref: "input.#{attr_key}",
+      })
+    end
+    
+  end
+end

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

@@ -0,0 +1,51 @@
+module Matestack::Ui::Core::Form::Utils
+
+  def input_key
+    "data['#{key.to_s}']"
+  end
+
+  def error_key
+    "errors['#{key.to_s}']"
+  end
+
+  def input_wrapper
+    case input_for
+    when nil
+      return nil
+    when Symbol, String
+      return input_for
+    end
+    if input_for.respond_to?(:model_name)
+      return input_for.model_name.singular
+    end
+  end
+
+  def attr_key
+    if input_wrapper.nil?
+      return "#{key.to_s}#{'[]' if multiple}"
+    else
+      return "#{input_wrapper}.#{key.to_s}#{'[]' if multiple}"
+    end
+  end
+
+  def init_value
+    return init unless init.nil?
+
+    unless input_for.nil?
+      value = parse_value(input_for.send key)
+    else
+      unless @included_config.nil? && @included_config[:for].nil?
+        if @included_config[:for].respond_to?(key)
+          value = parse_value(@included_config[:for].send key)
+        else
+          @included_config[:for][key] if @included_config[:for].is_a?(Hash)
+        end
+      end
+    end
+  end
+
+  def parse_value(value)
+    value
+  end
+
+end

lib/matestack/ui/core/components.rb

@@ -70,6 +70,10 @@ def self.require_core_component(name)
   require_core_component "fieldset"
   require_core_component "figure"
   require_core_component "footer"
+  require_core_component "form"
+  require_core_component "form/input"
+  require_core_component "form/select"
+  require_core_component "form/submit"
   require_core_component "header"
   require_core_component "heading"
   require_core_component "hr"
@@ -119,7 +123,8 @@ def self.require_core_component(name)
   require_core_component "tbody"
   require_core_component "td"
   require_core_component "template"
-  require_core_component "textarea"
+  require_core_component "textarea" # textarea needs to be required before form/textarea
+  require_core_component "form/textarea"
   require_core_component "tfoot"
   require_core_component "th"
   require_core_component "thead"
@@ -133,10 +138,6 @@ def self.require_core_component(name)
   require_core_component "video"
   require_core_component "wbr"
   require_core_component "youtube"
-  require_core_component "form"
-  require_core_component "form/input"
-  require_core_component "form/select"
-  require_core_component "form/submit"
 end
 
 Matestack::Ui::Core::Component::Registry.register_components(
@@ -185,6 +186,7 @@ def self.require_core_component(name)
   form_input: Matestack::Ui::Core::Form::Input::Input,
   form_select: Matestack::Ui::Core::Form::Select::Select,
   form_submit: Matestack::Ui::Core::Form::Submit::Submit,
+  form_textarea: Matestack::Ui::Core::Form::Textarea::Textarea,
   header: Matestack::Ui::Core::Header::Header,
   heading: Matestack::Ui::Core::Heading::Heading,
   hr: Matestack::Ui::Core::Hr::Hr,

spec/0.8/components/dynamic/form/async_request_spec.rb

@@ -75,7 +75,7 @@ class BaseExamplePage < BasePage
       class BaseExamplePage < BasePage
         def response
           super
-          async show_on: "my_form_success" do
+          async show_on: "my_form_success", id: 'async-form' do
             plain "{{event.data.message}}"
           end
         end
@@ -95,7 +95,7 @@ def form_config
       class BaseExamplePage < BasePage
         def response
           super
-          async show_on: "my_form_failure" do
+          async show_on: "my_form_failure", id: 'async-form' do
             plain "{{event.data.message}}"
             plain "{{event.data.errors}}"
           end

spec/0.8/components/dynamic/form/async_transition_spec.rb

@@ -37,10 +37,10 @@ def response
         main do
           page_content
         end
-        async show_on: "my_form_success", hide_after: 300 do
+        async show_on: "my_form_success", hide_after: 300, id: 'async-form-success' do
           plain "{{event.data.message}}"
         end
-        async show_on: "my_form_failure", hide_after: 300 do
+        async show_on: "my_form_failure", hide_after: 300, id: 'async-form-failure' do
           plain "{{event.data.message}}"
           plain "{{event.data.errors}}"
         end

spec/0.8/components/dynamic/form/delay_spec.rb

@@ -37,7 +37,7 @@ def response
             end
           end
           div id: "timestamp" do
-            async show_on: "form_submitted_successfully" do
+            async show_on: "form_submitted_successfully", id: 'async-form' do
               paragraph id: 'received_timestamp', text: "{{event.data.received_at}}"
             end
           end

spec/0.8/components/dynamic/form/emit_spec.rb

@@ -34,7 +34,7 @@ def response
               button text: 'Submit me!'
             end
           end
-          async show_on: "form_submitted" do
+          async show_on: "form_submitted", id: 'async-form' do
             plain "form submitted!"
           end
         end

spec/0.8/components/dynamic/form/form_spec.rb

@@ -42,10 +42,10 @@ def response
             form_input id: 'description', key: :description, type: :text
             form_submit { button text: "Save" }
           end
-          async show_on: "form_has_errors", hide_after: 5000 do
+          async show_on: "form_has_errors", hide_after: 5000, id: 'async-form-errors' do
             plain "Form has errors"
           end
-          async show_on: "update_successful", hide_after: 5000 do
+          async show_on: "update_successful", hide_after: 5000, id: 'async-form-successful' do
             plain "Update successful"
           end
         end
@@ -123,10 +123,10 @@ def response
             form_input id: 'query', key: :query, type: :text
             form_submit { button text: "Search" }
           end
-          async show_on: "form_has_errors", hide_after: 5000 do
+          async show_on: "form_has_errors", hide_after: 5000, id: 'async-form-errors' do
             plain "Form has errors"
           end
-          async show_on: "submission_successful", hide_after: 5000 do
+          async show_on: "submission_successful", hide_after: 5000, id: 'async-form-successful' do
             plain "Submission successful"
           end
         end
@@ -182,10 +182,10 @@ def response
             form_input id: 'query', key: :query, type: :text
             form_submit { button text: "Search" }
           end
-          async show_on: "form_has_errors", hide_after: 5000 do
+          async show_on: "form_has_errors", hide_after: 5000, id: 'async-form-errors' do
             plain "Form has errors"
           end
-          async show_on: "submission_successful", hide_after: 5000 do
+          async show_on: "submission_successful", hide_after: 5000, id: 'async-form-successful' do
             plain "Submission successful"
           end
         end

spec/0.8/components/dynamic/form/input/file_upload_spec.rb

@@ -75,7 +75,7 @@ def response
               button text: 'Submit me!'
             end
           end
-          async show_on: "uploaded_successfully" do
+          async show_on: "uploaded_successfully", id: 'async-form' do
             plain "{{event.data.title}}"
             plain "{{event.data.file_1.instance}}"
             plain "{{event.data.file_1.name}}"
@@ -251,7 +251,7 @@ def response
               button text: 'Submit me!'
             end
           end
-          async show_on: "uploaded_successfully", hide_on: "form_submitted" do
+          async show_on: "uploaded_successfully", hide_on: "form_submitted", id: 'async-form' do
             plain "{{event.data.file_1.instance}}"
             plain "{{event.data.file_1.name}}"
             plain "{{event.data.files}}"