matestack-ui-core 0.7.6 → 1.2.0

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}#{'[]' if options[:multiple]}"
-      else
-        return "#{input_wrapper}.#{key.to_s}#{'[]' if options[:multiple]}"
-      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,80 +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.except(:id),
-        id: id_for_option(value),
-        type: :checkbox,
-        "#{model_binding}": input_key,
-        "@change": "inputChanged(\"#{attr_key}\")",
-        "value-type": options_type,
-        name: value,
-        value: key}/
-        %label{for: id_for_option(value)}=value
-    - if options[:options].is_a?(Array)
-      - options[:options].each do |value|
-        %input{@tag_attributes.except(:id),
-        id: id_for_option(value),
-        type: :checkbox,
-        "#{model_binding}": input_key,
-        "@change": "inputChanged(\"#{attr_key}\")",
-        "value-type": options_type,
-        name: value,
-        value: value}/
-        %label{for: id_for_option(value)}=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.except(:id),
-        type: :radio,
-        id: id_for_option(value),
-        "#{model_binding}": input_key,
-        "@change": "inputChanged(\"#{attr_key}\")",
-        "value-type": options_type,
-        name: "#{attr_key}_#{key}",
-        value: key}/
-        %label{for: id_for_option(value)}=value
-    - if options[:options].is_a?(Array)
-      - options[:options].each do |value|
-        %input{@tag_attributes.except(:id),
-        type: :radio,
-        id: id_for_option(value),
-        "#{model_binding}": input_key,
-        "@change": "inputChanged(\"#{attr_key}\")",
-        "value-type": options_type,
-        name: "#{attr_key}_#{value}",
-        value: value}/
-        %label{for: id_for_option(value)}=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,83 +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 setup
-      if @tag_attributes[:id].nil?
-        @tag_attributes[:id] = attr_key
-      end
-    end
+    requires :key
+    optional :multiple, :init, :placeholder, :disabled_values,
+      for: { as: :input_for }, 
+      label: { as: :input_label }, 
+      options: { as: :select_options }
 
-    def input_key
-      'data["' + 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 error_key
-      'errors["' + options[:key].to_s + '"]'
+    def vue_ref
+      "select#{'.multiple' if multiple}.#{attr_key}"
     end
 
-    def attr_key
-      options[:key].to_s
+    def value_type
+      item_value(select_options.first).is_a?(Integer) ? Integer : nil
     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 item_value(item)
+      item.is_a?(Array) ? item.last : item
     end
 
-    def options_type
-      return Integer if option_values.first.is_a?(Integer)
-      return String if option_values.first.is_a?(String)
+    def item_name(item)
+      "#{attr_key}_#{item.is_a?(Array) ? item.first : item}"
     end
 
-    def model_binding
-
-      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 id_for_option value
-      return "#{@tag_attributes[:id]}_#{value}"
+    def change_event
+      "inputChanged('#{attr_key}')"
     end
 
+    def id_for_item(value)
+      "#{html_attributes[:id]}_#{value}"
+    end
 
   end
 end