matestack-ui-core 1.0.0.rc.1 → 1.3.0

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

@@ -1,2 +1,2 @@
-%form{@tag_attributes}
+%form{ form_attributes }
   = yield

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

@@ -18,9 +18,6 @@ const componentDef = {
     initDataKey: function (key, initValue) {
       this.data[key] = initValue;
     },
-    inputChanged: function (key) {
-      this.resetErrors(key);
-    },
     updateFormValue: function (key, value) {
       this.data[key] = value;
     },
@@ -44,11 +41,11 @@ const componentDef = {
           flat[i] = newVal;
         } else if (flat[i] instanceof File){
           flat[i] = newVal;
-          this.$refs["input."+i].value = newVal
+          this.$refs["input-component-for-"+i].value = newVal
         } else if (flat[i] instanceof Array) {
           if(flat[i][0] instanceof File){
             flat[i] = newVal
-            this.$refs["input."+i].value = newVal
+            this.$refs["input-component-for-"+i].value = newVal
           }
         } else if (typeof flat[i] === "object" && !(flat[i] instanceof Array)) {
           setProps(flat[i], newVal);
@@ -57,54 +54,26 @@ const componentDef = {
         }
       }
     },
-    filesAdded: function (key) {
-      const dataTransfer = event.dataTransfer || event.target;
-      const files = dataTransfer.files;
-      if (event.target.attributes.multiple) {
-        this.data[key] = [];
-        for (let index in files) {
-          if (files[index] instanceof File) {
-            this.data[key].push(files[index]);
-          }
-        }
-      } else {
-        this.data[key] = files[0];
-      }
-    },
     initValues: function () {
       let self = this;
       let data = {};
       for (let key in self.$refs) {
-        let initValue = self.$refs[key]["attributes"]["init-value"];
-        let valueType = self.$refs[key]["attributes"]["value-type"];
-
-        if (key.startsWith("input.")) {
-          if (initValue) {
-            data[key.replace("input.", "")] = initValue["value"];
-          } else {
-            data[key.replace("input.", "")] = null;
-          }
+        if (key.startsWith("input-component")) {
+          self.$refs[key].initialize()
         }
-        if (key.startsWith("select.")) {
-          if (key.startsWith("select.multiple.")) {
-            if (initValue) {
-              data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
-            } else {
-              data[key.replace("select.multiple.", "")] = [];
-            }
-          } else {
-            if (initValue) {
-              if (valueType && valueType["value"] == "Integer") data[key.replace("select.", "")] = parseInt(initValue["value"]);
-              else {
-                data[key.replace("select.", "")] = initValue["value"];
-              }
-            } else {
-              data[key.replace("select.", "")] = null;
-            }
-          }
+        if (key.startsWith("textarea-component")) {
+          self.$refs[key].initialize()
+        }
+        if (key.startsWith("select-component")) {
+          self.$refs[key].initialize()
+        }
+        if (key.startsWith("radio-component")) {
+          self.$refs[key].initialize()
+        }
+        if (key.startsWith("checkbox-component")) {
+          self.$refs[key].initialize()
         }
       }
-      self.data = data;
     },
     shouldResetFormOnSuccessfulSubmit() {
       const self = this;

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

@@ -1,49 +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
 
-    requires :for, :path, method: { as: :form_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]
-        @component_config[:multipart] = options[:multipart] == true
-        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 options[:success][:redirect].nil?
-            @component_config[:success][:redirect][:path] = redirect_path options[:success]
+          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 options[:failure][:redirect].nil?
-            @component_config[:failure][:redirect][:path] = redirect_path options[:failure]
+          unless failure[:redirect].nil?
+            @component_config[:failure][:redirect][:path] = redirect_path failure
           end
         end
-        @tag_attributes.merge!({
-          "@submit.prevent": true,
-          "class": "matestack-form #{options[:class]}",
-          "v-bind:class": "{ 'has-errors': hasErrors(), 'loading': loading }"
-        })
       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"
@@ -81,15 +87,15 @@ module Matestack::Ui::Core::Form
     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/input/base.rb

@@ -0,0 +1,75 @@
+require_relative '../utils'
+require_relative '../has_input_html_attributes'
+require_relative '../has_errors'
+module Matestack::Ui::Core::Form::Input
+  class Base < Matestack::Ui::Core::Component::Dynamic
+    include Matestack::Ui::Core::Form::Utils
+    include Matestack::Ui::Core::Form::HasInputHtmlAttributes
+    include Matestack::Ui::Core::Form::HasErrors
+
+    requires :key, :type
+    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
+
+    def setup
+      @component_config[:init_value] = init_value
+    end
+
+    def component_id
+      "input-component-for-#{attr_key}"
+    end
+
+    def input_attributes
+      html_attributes.merge(attributes: vue_attributes)
+    end
+
+    def input_key
+      "$parent.data[\"#{key}\"]"
+    end
+
+    def error_key
+      "$parent.errors[\"#{key}\"]"
+    end
+
+    def change_event
+      "inputChanged('#{attr_key}'); #{ "filesAdded('#{attr_key}');" if type == :file }".strip
+    end
+
+    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 v_model_type
+      if type == :number || init_value.is_a?(Integer)
+        'v-model.number'
+      else
+        'v-model'
+      end
+    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
+      super + "#{'[]' if multiple && type == :file}"
+    end
+
+    private
+
+    def parse_value(value)
+      if [true, false].include? value
+        value ? 1 : 0
+      else
+        return value
+      end
+    end
+
+  end
+end

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

@@ -0,0 +1,15 @@
+import Vue from "vue/dist/vue.esm";
+
+import formInputMixin from "./mixin";
+import componentMixin from "../../component/component";
+
+const componentDef = {
+  mixins: [componentMixin, formInputMixin],
+  data() {
+    return {};
+  }
+}
+
+let component = Vue.component("matestack-ui-core-form-input", componentDef);
+
+export default componentDef;

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

@@ -1,59 +1,15 @@
-require_relative '../utils'
-require_relative '../has_input_html_attributes'
-require_relative '../has_errors'
+require_relative './base'
+
 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
+  class Input < Base
 
-    requires :key, :type
-    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
+    vue_js_component_name "matestack-ui-core-form-input"
 
     def response
-      label text: input_label if input_label
-      input html_attributes.merge(attributes: vue_attributes)
-      render_errors
-    end
-
-    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 v_model_type
-      if type == :number || init_value.is_a?(Integer)
-        'v-model.number'
-      else
-        'v-model'
-      end
-    end
-
-    def change_event
-      "inputChanged('#{attr_key}'); #{ "filesAdded('#{attr_key}');" if type == :file }".strip
-    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
-      super + "#{'[]' if multiple && type == :file}"
-    end
-
-    private
-
-    def parse_value(value)
-      if [true, false].include? value
-        value ? 1 : 0
-      else
-        return value
+      div class: "matestack-ui-core-form-input" do
+        label text: input_label if input_label
+        input input_attributes
+        render_errors
       end
     end
 

data/app/concepts/matestack/ui/core/form/input/mixin.js

@@ -0,0 +1,55 @@
+const formInputMixin = {
+  methods: {
+    initialize: function(){
+      const self = this
+      let data = {};
+
+      for (let key in this.$refs) {
+        let initValue = this.$refs[key]["attributes"]["init-value"];
+
+        if (initValue) {
+          data[key.replace("input.", "")] = initValue["value"];
+          Object.assign(self.$parent.data, data);
+          self.afterInitialize(initValue["value"])
+        } else {
+          data[key.replace("input.", "")] = null;
+          Object.assign(self.$parent.data, data);
+          self.afterInitialize(null)
+        }
+      }
+
+      //without the timeout it's somehow not working
+      setTimeout(function () {
+        self.$forceUpdate()
+      }, 1);
+    },
+    filesAdded: function (key) {
+      const dataTransfer = event.dataTransfer || event.target;
+      const files = dataTransfer.files;
+      if (event.target.attributes.multiple) {
+        this.$parent.data[key] = [];
+        for (let index in files) {
+          if (files[index] instanceof File) {
+            this.$parent.data[key].push(files[index]);
+          }
+        }
+      } else {
+        this.$parent.data[key] = files[0];
+      }
+    },
+    inputChanged: function (key) {
+      this.$parent.resetErrors(key);
+      this.$forceUpdate();
+    },
+    afterInitialize: function(value){
+      // can be used in the main component for further initialization steps
+    },
+    setValue: function (value){
+      this.$parent.data[this.componentConfig["key"]] = value
+      this.$forceUpdate();
+    }
+  }
+
+}
+
+export default formInputMixin

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

@@ -0,0 +1,90 @@
+require_relative '../utils'
+require_relative '../has_input_html_attributes'
+require_relative '../has_errors'
+module Matestack::Ui::Core::Form::Radio
+  class Base < Matestack::Ui::Core::Component::Dynamic
+    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 setup
+      @component_config[:init_value] = init_value
+    end
+
+    def component_id
+      "radio-component-for-#{attr_key}"
+    end
+
+    def input_key
+      "$parent.data[\"#{key}\"]"
+    end
+
+    def error_key
+      "$parent.errors[\"#{key}\"]"
+    end
+
+    def change_event
+      "inputChanged('#{attr_key}')"
+    end
+
+    def render_options
+      radio_options.to_a.each do |item|
+        input radio_attributes(item)
+        label text: item_label(item), for: id_for_item(item_value(item))
+      end
+    end
+
+    def radio_attributes(item)
+      html_attributes.merge(
+        attributes: vue_attributes,
+        type: :radio,
+        id: "#{id_for_item(item_value(item))}",
+        name: item_name(item),
+        value: item_value(item),
+      )
+    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 id_for_item(value)
+      "#{html_attributes[:id] || attr_key}_#{value}"
+    end
+
+  end
+end