matestack-ui-core 0.7.5 → 1.1.0

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

@@ -1,37 +1,55 @@
 module Matestack::Ui::Core::Form
   class Form < Matestack::Ui::Core::Component::Dynamic
+    vue_js_component_name "matestack-ui-core-form"
+    
+    html_attributes :'accept-charset', :action, :autocomplete, :enctype, :method, :name, :novalidate, :rel, :target
 
-    REQUIRED_KEYS = [:for, :path, :method]
+    requires :path, for: { as: :for_option }, method: { as: :form_method }
+    optional :success, :failure, :multipart, params: { as: :form_params }
 
     def setup
       begin
         @component_config[:for] = form_wrapper
         @component_config[:submit_path] = submit_path
-        @component_config[:method] = options[:method]
-        @component_config[:success] = options[:success]
-        unless options[:success].nil?
-          unless options[:success][:transition].nil?
-            @component_config[:success][:transition][:path] = transition_path options[:success]
+        @component_config[:method] = form_method
+        @component_config[:success] = success
+        @component_config[:multipart] = multipart == true
+        unless success.nil?
+          unless success[:transition].nil?
+            @component_config[:success][:transition][:path] = transition_path success
+          end
+          unless success[:redirect].nil?
+            @component_config[:success][:redirect][:path] = redirect_path success
           end
         end
-        @component_config[:failure] = options[:failure]
-        unless options[:failure].nil?
-          unless options[:failure][:transition].nil?
-            @component_config[:failure][:transition][:path] = transition_path options[:failure]
+        @component_config[:failure] = failure
+        unless failure.nil?
+          unless failure[:transition].nil?
+            @component_config[:failure][:transition][:path] = transition_path failure
+          end
+          unless failure[:redirect].nil?
+            @component_config[:failure][:redirect][:path] = redirect_path failure
           end
         end
-        @tag_attributes.merge!({"@submit.prevent": true})
       rescue => e
         raise "Form component could not be setted up. Reason: #{e}"
       end
     end
 
+    def form_attributes
+      html_attributes.merge({
+        "@submit.prevent": true,
+        "class": "matestack-form #{options[:class]}",
+        "v-bind:class": "{ 'has-errors': hasErrors(), 'loading': loading }"
+      })
+    end
+
     def submit_path
       begin
-        if options[:path].is_a?(Symbol)
-          return ::Rails.application.routes.url_helpers.send(options[:path], options[:params])
+        if path.is_a?(Symbol)
+          return ::Rails.application.routes.url_helpers.send(path, form_params)
         else
-          return options[:path]
+          return path
         end
       rescue
         raise "Submit path not found"
@@ -53,16 +71,31 @@ module Matestack::Ui::Core::Form
       end
     end
 
+    def redirect_path callback_options
+      begin
+        if callback_options[:redirect][:path].is_a?(Symbol)
+          return ::Rails.application.routes.url_helpers.send(
+            callback_options[:redirect][:path],
+            callback_options[:redirect][:params]
+          )
+        else
+          return callback_options[:redirect][:path]
+        end
+      rescue
+        raise "Redirect path not found"
+      end
+    end
+
     def form_wrapper
-      case options[:for]
+      case for_option
       when Symbol
-        return options[:for]
+        return for_option
       when String
-        return options[:for]
+        return for_option
       end
 
-      if options[:for].respond_to?(:model_name)
-        return options[:for].model_name.singular
+      if for_option.respond_to?(:model_name)
+        return for_option.model_name.singular
       end
     end
 

data/app/concepts/matestack/ui/core/form/has_errors.rb

@@ -0,0 +1,54 @@
+module Matestack::Ui::Core::Form::HasErrors
+
+  def self.included(base)
+    base.class_eval do
+      optional :errors
+    end
+  end
+
+  def error_key
+    "errors['#{key.to_s}']"
+  end
+
+  # error partial
+  # overwrite render_errors to customize error rendering
+  def render_errors
+    unless @included_config[:errors] == false && (errors == false || errors.nil?) || errors == false
+      self.send(wrapper_tag, class: wrapper_class, attributes: { 'v-if': error_key }) do
+        self.send(error_tag, class: error_class, attributes: { 'v-for': "error in #{error_key}" }) do
+          plain '{{ error }}'
+        end
+      end
+    end
+  end
+
+  def wrapper_tag
+    tag = get_error_config(@included_config[:errors], :wrapper, :tag) || :span
+    tag = get_error_config(errors, :wrapper, :tag) || tag
+  end
+
+  def wrapper_class
+    klass = get_error_config(@included_config[:errors], :wrapper, :class) || 'errors'
+    klass = get_error_config(errors, :wrapper, :class) || klass
+  end
+
+  def error_tag
+    tag = get_error_config(@included_config[:errors], :tag) || :span
+    tag = get_error_config(errors, :tag) || tag
+  end
+
+  def error_class
+    klass = get_error_config(@included_config[:errors], :class) || 'error'
+    klass = get_error_config(errors, :class) || klass
+  end
+
+  def input_error_class
+    klass = get_error_config(@included_config[:errors], :input, :class) || 'error'
+    klass = get_error_config(errors, :input, :class) || klass
+  end
+
+  def get_error_config(hash, *keys)
+    hash.dig(*keys) if hash.is_a?(Hash) && hash.dig(*keys)
+  end
+  
+end

data/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

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

@@ -1,70 +1,50 @@
+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
 
-    REQUIRED_KEYS = [:key, :type]
+    requires :key, :type
+    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
 
-    def custom_options_validation
-      raise "included form config is missing, please add ':include' to parent form component" if @included_config.nil?
-    end
-
-    def key
-      options[:key]
-    end
-
-    def label
-      options[:label]
+    def response
+      label text: input_label if input_label
+      input html_attributes.merge(attributes: vue_attributes)
+      render_errors
     end
 
-    def type
-      options[:type]
+    def vue_attributes
+      (options[:attributes] || {}).merge({
+        "@change": change_event,
+        ref: "input.#{attr_key}",
+        'init-value': init_value,
+        'v-bind:class': "{ '#{input_error_class}': #{error_key} }"
+      }).merge(
+        type != :file ? { "#{v_model_type}": input_key } : {}
+      ) # file inputs are readonly, no v-model possible
     end
 
-    def placeholder
-      options[:placeholder]
-    end
-
-    def input_key
-      "data['#{key.to_s}']"
+    def v_model_type
+      if type == :number || init_value.is_a?(Integer)
+        'v-model.number'
+      else
+        'v-model'
+      end
     end
 
-    def error_key
-      "errors['#{key.to_s}']"
+    def change_event
+      "inputChanged('#{attr_key}'); #{ "filesAdded('#{attr_key}');" if type == :file }".strip
     end
 
-    def input_wrapper
-      case options[:for]
-      when nil
-        return nil
-      when Symbol, String
-        return options[:for]
-      end
-      if options[:for].respond_to?(:model_name)
-        return options[:for].model_name.singular
-      end
+    def custom_options_validation
+      raise "included form config is missing, please add ':include' to parent form component" if @included_config.nil?
     end
 
     def attr_key
-      if input_wrapper.nil?
-        return key.to_s
-      else
-        return "#{input_wrapper}.#{key.to_s}"
-      end
-    end
-
-    def init_value
-      return options[:init] unless options[:init].nil?
-
-      unless options[:for].nil?
-        value = parse_value(options[: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
+      super + "#{'[]' if multiple && type == :file}"
     end
 
     private

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

@@ -0,0 +1,71 @@
+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 :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, 
+          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 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] || attr_key}_#{value}"
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/form/select/select.haml

@@ -1,76 +1,9 @@
-- if options[:label]
-
-  %label=options[:label]
-
-- if options[:type] == :dropdown
-
-  %select{@tag_attributes,
-    "#{model_binding}" => input_key,
-    ref: "select.#{attr_key}",
-    "@change": "inputChanged(\"#{attr_key}\")",
-    "init-value": init_value,
-    "value-type": options_type}
-    %option{disabled: true}= options[:placeholder]
-    - if options[:options].is_a?(Hash)
-      - options[:options].each do |key, value|
-        %option{value: key}=value
-    - if options[:options].is_a?(Array)
-      - options[:options].each do |option|
-        %option{value: option}=option
-  %span{class: "errors", "v-if": error_key }
-    %span{class: "error", "v-for": "error in  #{error_key}"}
-      {{ error }}
-
-- if options[:type] == :checkbox
-
-  %div{id: component_id, ref: "select.multiple.#{attr_key}", "init-value": init_value}
-    - if options[:options].is_a?(Hash)
-      - options[:options].each do |key, value|
-        %input{@tag_attributes,
-        type: :checkbox,
-        "#{model_binding}": input_key,
-        "@change": "inputChanged(\"#{attr_key}\")",
-        "value-type": options_type,
-        name: value,
-        value: key}/
-        %label=value
-    - if options[:options].is_a?(Array)
-      - options[:options].each do |value|
-        %input{@tag_attributes,
-        type: :checkbox,
-        "#{model_binding}": input_key,
-        "@change": "inputChanged(\"#{attr_key}\")",
-        "value-type": options_type,
-        name: value,
-        value: value}/
-        %label=value
-  %span{class: "errors", "v-if": error_key }
-    %span{class: "error", "v-for": "error in  #{error_key}"}
-      {{ error }}
-
-- if options[:type] == :radio
-
-  %div{id: component_id, ref: "select.#{attr_key}", "init-value": init_value}
-    - if options[:options].is_a?(Hash)
-      - options[:options].each do |key, value|
-        %input{@tag_attributes,
-        type: :radio,
-        "#{model_binding}": input_key,
-        "@change": "inputChanged(\"#{attr_key}\")",
-        "value-type": options_type,
-        name: value,
-        value: key}/
-        %label=value
-    - if options[:options].is_a?(Array)
-      - options[:options].each do |value|
-        %input{@tag_attributes,
-        type: :radio,
-        "#{model_binding}": input_key,
-        "@change": "inputChanged(\"#{attr_key}\")",
-        "value-type": options_type,
-        name: value,
-        value: value}/
-        %label=value
-  %span{class: "errors", "v-if": error_key }
-    %span{class: "error", "v-for": "error in  #{error_key}"}
-      {{ error }}
+- if input_label
+  %label= input_label
+
+%select{ html_attributes.merge(vue_attributes) }
+  - if placeholder
+    %option{value: 'null', disabled: true, selected: init_value.nil?}= placeholder
+  - select_options.to_a.each do |item|
+    %option{value: item_value(item), disabled: item_disabled(item)}= item_label(item)
+= render_errors

data/app/concepts/matestack/ui/core/form/select/select.rb

@@ -1,73 +1,68 @@
+require_relative '../utils'
+require_relative '../has_errors'
 module Matestack::Ui::Core::Form::Select
   class Select < Matestack::Ui::Core::Component::Static
+    include Matestack::Ui::Core::Form::Utils
+    include Matestack::Ui::Core::Form::HasErrors
 
-    REQUIRED_KEYS = [:options]
+    html_attributes :autofocus, :disabled, :form, :multiple, :name, :required, :size
 
-    def input_key
-      'data["' + options[:key].to_s + '"]'
-    end
+    requires :key
+    optional :multiple, :init, :placeholder, :disabled_values,
+      for: { as: :input_for }, 
+      label: { as: :input_label }, 
+      options: { as: :select_options }
 
-    def error_key
-      'errors["' + options[:key].to_s + '"]'
+    def vue_attributes
+      (options[:attributes] || {}).merge({
+        "@change": change_event,
+        ref: vue_ref,
+        'init-value': init_value || [],
+        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+        'value-type': value_type,
+        "#{v_model_type}": input_key,
+      })
     end
 
-    def attr_key
-      options[:key].to_s
+    def vue_ref
+      "select#{'.multiple' if multiple}.#{attr_key}"
     end
 
-    def option_values
-      values = options[:options] if options[:options].is_a?(Array)
-      values = options[:options].keys if options[:options].is_a?(Hash)
-      return values
+    def value_type
+      item_value(select_options.first).is_a?(Integer) ? Integer : nil
     end
 
-    def options_type
-      return Integer if option_values.first.is_a?(Integer)
-      return String if option_values.first.is_a?(String)
+    def item_value(item)
+      item.is_a?(Array) ? item.last : item
     end
 
-    def model_binding
+    def item_name(item)
+      "#{attr_key}_#{item.is_a?(Array) ? item.first : item}"
+    end
 
-      if option_values.first.is_a?(Integer)
-        return "v-model.number"
-      else
-        return "v-model"
-      end
+    def item_disabled(item)
+      disabled_values.present? && disabled_values.include?(item_value(item))
     end
 
-    def init_value
-      unless options[:init].nil?
-        return options[:init]
-      end
+    def item_label(item)
+      item.is_a?(Array) ? item.first : item
+    end
 
-      unless options[:for].nil?
-        value = options[:for].send(options[:key])
-        if [true, false].include? value
-          value ? 1 : 0
-        else
-          return value
-        end
+    def v_model_type
+      if select_options && item_value(select_options.first).is_a?(Integer) && !multiple
+        'v-model.number'
       else
-        unless @included_config.nil? && @included_config[:for].nil?
-          if @included_config[:for].respond_to?(options[:key])
-            value = @included_config[:for].send(options[:key])
-            if [true, false].include? value
-              value ? 1 : 0
-            else
-              return value
-            end
-          else
-            if @included_config[:for].is_a?(Symbol) || @included_config[:for].is_a?(String)
-              return nil
-            end
-            if @included_config[:for].is_a?(Hash)
-              return @included_config[:for][options[:key]]
-            end
-          end
-        end
+        'v-model'
       end
     end
 
+    def change_event
+      "inputChanged('#{attr_key}')"
+    end
+
+    def id_for_item(value)
+      "#{html_attributes[:id]}_#{value}"
+    end
 
   end
 end