matestack-ui-core 0.7.5 → 0.7.6

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

@@ -9,16 +9,23 @@ module Matestack::Ui::Core::Form
         @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]
           end
+          unless options[:success][:redirect].nil?
+            @component_config[:success][:redirect][:path] = redirect_path options[: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]
           end
+          unless options[:failure][:redirect].nil?
+            @component_config[:failure][:redirect][:path] = redirect_path options[:failure]
+          end
         end
         @tag_attributes.merge!({"@submit.prevent": true})
       rescue => e
@@ -53,6 +60,21 @@ 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]
       when Symbol

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

@@ -33,6 +33,14 @@
     step: options[:step],
     list: options[:list] }
 
+- if [:file].include?(type)
+  %input{ @tag_attributes,
+    type: type,
+    "@change": "inputChanged(\"#{attr_key}\"); filesAdded('#{attr_key}')",
+    ref: "input.#{attr_key}",
+    placeholder: placeholder,
+    multiple: options[:multiple] }
+
 %span{ class: "errors", "v-if": error_key }
   %span{ class: "error", "v-for": "error in #{error_key}" }
-    {{ error }}
+    {{ error }}

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

@@ -45,9 +45,9 @@ module Matestack::Ui::Core::Form::Input
 
     def attr_key
       if input_wrapper.nil?
-        return key.to_s
+        return "#{key.to_s}#{'[]' if options[:multiple]}"
       else
-        return "#{input_wrapper}.#{key.to_s}"
+        return "#{input_wrapper}.#{key.to_s}#{'[]' if options[:multiple]}"
       end
     end
 

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

@@ -26,24 +26,26 @@
   %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,
+        %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=value
+        %label{for: id_for_option(value)}=value
     - if options[:options].is_a?(Array)
       - options[:options].each do |value|
-        %input{@tag_attributes,
+        %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=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 }}
@@ -53,24 +55,26 @@
   %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,
+        %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: value,
+        name: "#{attr_key}_#{key}",
         value: key}/
-        %label=value
+        %label{for: id_for_option(value)}=value
     - if options[:options].is_a?(Array)
       - options[:options].each do |value|
-        %input{@tag_attributes,
+        %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: value,
+        name: "#{attr_key}_#{value}",
         value: value}/
-        %label=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 }}

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

@@ -3,6 +3,12 @@ module Matestack::Ui::Core::Form::Select
 
     REQUIRED_KEYS = [:options]
 
+    def setup
+      if @tag_attributes[:id].nil?
+        @tag_attributes[:id] = attr_key
+      end
+    end
+
     def input_key
       'data["' + options[:key].to_s + '"]'
     end
@@ -68,6 +74,10 @@ module Matestack::Ui::Core::Form::Select
       end
     end
 
+    def id_for_option value
+      return "#{@tag_attributes[:id]}_#{value}"
+    end
+
 
   end
 end

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

@@ -89,7 +89,11 @@ module Matestack::Ui::Core::Page
         nodes_to_cell
         render :page
       when :render_page_with_app
-        concept(@app_class).call(:show, @page_id, @nodes)
+        @app_class.new(nil, context: {
+          params: options[:context][:params],
+          request: options[:context][:request],
+          view_context: options[:context][:view_context]
+        }, controller_instance: options[:controller_instance]).call(:show, @page_id, @nodes)
       when :render_component
         begin
           render_child_component component_key

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

@@ -1,6 +1,7 @@
 import Vue from 'vue/dist/vue.esm'
 import Vuex from 'vuex'
 import componentMixin from '../component/component'
+import matestackEventHub from '../js/event-hub'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -9,11 +10,25 @@ const componentDef = {
   },
   computed: Vuex.mapState({
     isActive (state) {
-      return this.componentConfig["link_path"] === state.currentPath
+      return (this.componentConfig["link_path"].split("?")[0]) === state.currentPathName
+    },
+    isChildActive (state) {
+      return ((this.componentConfig["link_path"].split("?")[0]) !== state.currentPathName) && (state.currentPathName.indexOf(this.componentConfig["link_path"].split("?")[0]) !== -1)
     }
   }),
   methods: {
     navigateTo: function(url){
+      const self = this
+      matestackEventHub.$emit("page_loading_triggered", url);
+      if (self.componentConfig["delay"] != undefined) {
+        setTimeout(function () {
+          self.performNavigation(url)
+        }, parseInt(self.componentConfig["delay"]));
+      } else {
+        this.performNavigation(url)
+      }
+    },
+    performNavigation: function(url){
       this.$store.dispatch('navigateTo', {url: url, backwards: false}).then((response) => {
         // self.asyncTemplate = response;
       })

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

@@ -6,7 +6,7 @@ module Matestack::Ui::Core::Transition
       @tag_attributes.merge!({
         "href": link_path,
         "@click.prevent": navigate_to(link_path),
-        "v-bind:class": "{ active: isActive }"
+        "v-bind:class": "{ active: isActive, 'active-child': isChildActive }"
       })
     end
 

data/app/helpers/matestack/ui/core/application_helper.rb

@@ -15,7 +15,8 @@ module Matestack
         def render_component(page_class, component_key)
           page_class.new(nil, context: {
             params: params,
-            request: request
+            request: request,
+            view_context: view_context
           }, controller_instance: self).call(:show, component_key)
         end
 

data/lib/matestack/ui/core/version.rb

@@ -1,7 +1,7 @@
 module Matestack
   module Ui
     module Core
-      VERSION = '0.7.5'
+      VERSION = '0.7.6'
     end
   end
 end

data/vendor/assets/javascripts/dist/manifest.json

@@ -2,21 +2,17 @@
   "entrypoints": {
     "matestack-ui-core": {
       "css": [
-        "/dist/matestack-ui-core.css"
+        "/dist/matestack-ui-core.min.css"
       ],
       "js": [
-        "/dist/matestack-ui-core.js"
-      ],
-      "css.map": [
-        "/dist/matestack-ui-core.css.map"
+        "/dist/matestack-ui-core.min.js"
       ],
       "js.map": [
-        "/dist/matestack-ui-core.js.map"
+        "/dist/matestack-ui-core.min.js.map"
       ]
     }
   },
-  "matestack-ui-core.css": "/dist/matestack-ui-core.css",
-  "matestack-ui-core.css.map": "/dist/matestack-ui-core.css.map",
-  "matestack-ui-core.js": "/dist/matestack-ui-core.js",
-  "matestack-ui-core.js.map": "/dist/matestack-ui-core.js.map"
+  "matestack-ui-core.css": "/dist/matestack-ui-core.min.css",
+  "matestack-ui-core.js": "/dist/matestack-ui-core.min.js",
+  "matestack-ui-core.js.map": "/dist/matestack-ui-core.min.js.map"
 }

data/vendor/assets/javascripts/dist/matestack-ui-core.js

@@ -120,51 +120,132 @@ const componentDef = {
         (self.componentConfig["confirm"] == undefined) || confirm(self.componentConfig["confirm_text"])
       )
       {
-        axios__WEBPACK_IMPORTED_MODULE_2___default()({
+        if (self.componentConfig["emit"] != undefined) {
+          _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit(self.componentConfig["emit"]);
+        }
+        if (self.componentConfig["delay"] != undefined) {
+          setTimeout(function () {
+            self.sendRequest()
+          }, parseInt(self.componentConfig["delay"]));
+        } else {
+          this.sendRequest()
+        }
+      }
+    },
+    sendRequest: function(){
+      const self = this
+      axios__WEBPACK_IMPORTED_MODULE_2___default()({
           method: self.componentConfig["method"],
           url: self.componentConfig["action_path"],
           data: self.componentConfig["data"],
           headers: {
             'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
           }
-        })
-        .then(function(response){
-          if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
-            _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit(self.componentConfig["success"]["emit"], response.data);
-          }
-          if (self.componentConfig["success"] != undefined
-            && self.componentConfig["success"]["transition"] != undefined
-            && (
-              self.componentConfig["success"]["transition"]["follow_response"] == undefined
-              ||
-              self.componentConfig["success"]["transition"]["follow_response"] === false
-            )
-            && self.$store != undefined
-          ) {
-            let path = self.componentConfig["success"]["transition"]["path"]
-            self.$store.dispatch('navigateTo', {url: path, backwards: false})
-            return;
-          }
-          if (self.componentConfig["success"] != undefined
-            && self.componentConfig["success"]["transition"] != undefined
-            && self.componentConfig["success"]["transition"]["follow_response"] === true
-            && self.$store != undefined
-          ) {
-            let path = response.data["transition_to"] || response.request.responseURL;
-            self.$store.dispatch('navigateTo', {url: path, backwards: false});
-            return;
-          }
-        })
-        .catch(function(error){
-          if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
-            _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit(self.componentConfig["failure"]["emit"], error.response.data);
-          }
-          if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["transition"] != undefined && self.$store != undefined) {
-            let path = self.componentConfig["failure"]["transition"]["path"]
-            self.$store.dispatch('navigateTo', {url: path, backwards: false})
-          }
-        })
-      }
+        }
+      )
+      .then(function(response){
+        if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
+          _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit(self.componentConfig["success"]["emit"], response.data);
+        }
+
+        // transition handling
+        if (self.componentConfig["success"] != undefined
+          && self.componentConfig["success"]["transition"] != undefined
+          && (
+            self.componentConfig["success"]["transition"]["follow_response"] == undefined
+            ||
+            self.componentConfig["success"]["transition"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
+          let path = self.componentConfig["success"]["transition"]["path"]
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
+        }
+        if (self.componentConfig["success"] != undefined
+          && self.componentConfig["success"]["transition"] != undefined
+          && self.componentConfig["success"]["transition"]["follow_response"] === true
+          && self.$store != undefined
+        ) {
+          let path = response.data["transition_to"] || response.request.responseURL
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
+        }
+        // redirect handling
+        if (self.componentConfig["success"] != undefined
+          && self.componentConfig["success"]["redirect"] != undefined
+          && (
+            self.componentConfig["success"]["redirect"]["follow_response"] == undefined
+            ||
+            self.componentConfig["success"]["redirect"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
+          let path = self.componentConfig["success"]["redirect"]["path"]
+          window.location.href = path
+          return;
+        }
+        if (self.componentConfig["success"] != undefined
+          && self.componentConfig["success"]["redirect"] != undefined
+          && self.componentConfig["success"]["redirect"]["follow_response"] === true
+          && self.$store != undefined
+        ) {
+          let path = response.data["redirect_to"] || response.request.responseURL
+          window.location.href = path
+          return;
+        }
+      })
+      .catch(function(error){
+        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
+          _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit(self.componentConfig["failure"]["emit"], error.response.data);
+        }
+        // transition handling
+        if (self.componentConfig["failure"] != undefined
+          && self.componentConfig["failure"]["transition"] != undefined
+          && (
+            self.componentConfig["failure"]["transition"]["follow_response"] == undefined
+            ||
+            self.componentConfig["failure"]["transition"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
+          let path = self.componentConfig["failure"]["transition"]["path"]
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
+        }
+        if (self.componentConfig["failure"] != undefined
+          && self.componentConfig["failure"]["transition"] != undefined
+          && self.componentConfig["failure"]["transition"]["follow_response"] === true
+          && self.$store != undefined
+        ) {
+          let path = error.response.data["transition_to"] || response.request.responseURL
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
+        }
+        // redirect handling
+        if (self.componentConfig["failure"] != undefined
+          && self.componentConfig["failure"]["redirect"] != undefined
+          && (
+            self.componentConfig["failure"]["redirect"]["follow_response"] == undefined
+            ||
+            self.componentConfig["failure"]["redirect"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
+          let path = self.componentConfig["failure"]["redirect"]["path"]
+          window.location.href = path
+          return;
+        }
+        if (self.componentConfig["failure"] != undefined
+          && self.componentConfig["failure"]["redirect"] != undefined
+          && self.componentConfig["failure"]["redirect"]["follow_response"] === true
+          && self.$store != undefined
+        ) {
+          let path = error.response.data["redirect_to"] || response.request.responseURL
+          window.location.href = path
+          return;
+        }
+      })
     }
   }
 }
@@ -207,15 +288,15 @@ const componentDef = {
   }),
   mounted: function(){
     const self = this;
-    window.onpopstate = (event) => {
+    window.addEventListener("popstate", (event) => {
       if (Object(_location__WEBPACK_IMPORTED_MODULE_3__["default"])({
           origin: self.currentOrigin,
           pathName: self.currentPathName,
           search: self.currentSearch
         }, document.location)){
-        self.$store.dispatch("navigateTo", {url: document.location.pathname, backwards: true} );
+        self.$store.dispatch("navigateTo", { url: document.location.pathname + document.location.search, backwards: true } );
       }
-    }
+    })
   },
   components: {
     VRuntimeTemplate: v_runtime_template__WEBPACK_IMPORTED_MODULE_1__["default"]
@@ -322,7 +403,7 @@ const store = new vuex__WEBPACK_IMPORTED_MODULE_1__["default"].Store({
           setTimeout(function () {
             resolve(response["data"])
             commit('setPageTemplate', response["data"])
-            commit('setCurrentLocation', { path: url, search: document.location.search, origin: document.location.origin })
+            commit('setCurrentLocation', { path: url.split("?")[0], search: document.location.search, origin: document.location.origin })
             _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit("page_loaded", url);
             if (typeof matestackUiCoreTransitionSuccess !== 'undefined') {
               matestackUiCoreTransitionSuccess(url);
@@ -407,9 +488,19 @@ const componentDef = {
   },
   created: function () {
     const self = this
-    _js_event_hub__WEBPACK_IMPORTED_MODULE_1__["default"].$on(this.componentConfig["rerender_on"], self.rerender)
-    _js_event_hub__WEBPACK_IMPORTED_MODULE_1__["default"].$on(this.componentConfig["show_on"], self.show)
-    _js_event_hub__WEBPACK_IMPORTED_MODULE_1__["default"].$on(this.componentConfig["hide_on"], self.hide)
+    if(this.componentConfig["show_on"] != undefined){
+      this.showing = false
+      var show_events = this.componentConfig["show_on"].split(",")
+      show_events.forEach(show_event => _js_event_hub__WEBPACK_IMPORTED_MODULE_1__["default"].$on(show_event.trim(), self.show));
+    }
+    if(this.componentConfig["hide_on"] != undefined){
+      var hide_events = this.componentConfig["hide_on"].split(",")
+      hide_events.forEach(hide_event => _js_event_hub__WEBPACK_IMPORTED_MODULE_1__["default"].$on(hide_event.trim(), self.hide));
+    }
+    if(this.componentConfig["rerender_on"] != undefined){
+      var rerender_events = this.componentConfig["rerender_on"].split(",")
+      rerender_events.forEach(rerender_event => _js_event_hub__WEBPACK_IMPORTED_MODULE_1__["default"].$on(rerender_event.trim(), self.rerender));
+    }
     if(this.componentConfig["show_on"] != undefined){
       this.showing = false
     }
@@ -430,6 +521,18 @@ const componentDef = {
     _js_event_hub__WEBPACK_IMPORTED_MODULE_1__["default"].$off(this.componentConfig["rerender_on"], self.rerender);
     _js_event_hub__WEBPACK_IMPORTED_MODULE_1__["default"].$off(this.componentConfig["show_on"], self.show);
     _js_event_hub__WEBPACK_IMPORTED_MODULE_1__["default"].$off(this.componentConfig["hide_on"], self.hide);
+    if(this.componentConfig["show_on"] != undefined){
+      var shown_events = this.componentConfig["show_on"].split(",")
+      shown_events.forEach(show_event => _js_event_hub__WEBPACK_IMPORTED_MODULE_1__["default"].$off(show_event.trim(), self.show));
+    }
+    if(this.componentConfig["hide_on"] != undefined){
+      var hiden_events = this.componentConfig["hide_on"].split(",")
+      hiden_events.forEach(hide_event => _js_event_hub__WEBPACK_IMPORTED_MODULE_1__["default"].$off(hide_event.trim(), self.hide));
+    }
+    if(this.componentConfig["rerender_on"] != undefined){
+      var rerender_events = this.componentConfig["rerender_on"].split(",")
+      rerender_events.forEach(rerender_event => _js_event_hub__WEBPACK_IMPORTED_MODULE_1__["default"].$off(rerender_event.trim(), self.rerender));
+    }
   },
 }
 
@@ -820,29 +923,29 @@ __webpack_require__.r(__webpack_exports__);
 
 const componentDef = {
   mixins: [_component_component__WEBPACK_IMPORTED_MODULE_4__["default"]],
-  data: function(){
+  data: function () {
     return {
       data: {},
       showInlineForm: false,
-      errors: {}
-    }
+      errors: {},
+    };
   },
   methods: {
-    initDataKey: function(key, initValue){
+    initDataKey: function (key, initValue) {
       this.data[key] = initValue;
     },
-    inputChanged: function(key){
-      this.resetErrors(key)
+    inputChanged: function (key) {
+      this.resetErrors(key);
     },
-    updateFormValue: function(key, value){
+    updateFormValue: function (key, value) {
       this.data[key] = value;
     },
-    resetErrors: function(key){
-      if (this.errors[key]){
+    resetErrors: function (key) {
+      if (this.errors[key]) {
         this.errors[key] = null;
       }
     },
-    launchInlineForm: function(key, value){
+    launchInlineForm: function (key, value) {
       this.showInlineForm = true;
       this.data[key] = value;
       const self = this;
@@ -850,137 +953,266 @@ const componentDef = {
         self.$refs.inlineinput.focus();
       }, 300);
     },
-    closeInlineForm: function(){
+    closeInlineForm: function () {
       this.showInlineForm = false;
     },
-    setProps: function(flat, newVal){
-       for(var i in flat){
-         if((typeof flat[i] === "object") && !(flat[i] instanceof Array)){
-           setProps(flat[i], newVal);
-           return;
-         } else {
-           flat[i] = newVal;
-         }
+    setProps: function (flat, newVal) {
+      for (var i in flat) {
+        if (flat[i] === null){
+          flat[i] = newVal;
+        } else if (flat[i] instanceof File){
+          flat[i] = newVal;
+          this.$refs["input."+i].value = newVal
+        } else if (flat[i] instanceof Array) {
+          if(flat[i][0] instanceof File){
+            flat[i] = newVal
+            this.$refs["input."+i].value = newVal
+          }
+        } else if (typeof flat[i] === "object" && !(flat[i] instanceof Array)) {
+          setProps(flat[i], newVal);
+        } else {
+          flat[i] = newVal;
+        }
+      }
+    },
+    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(){
+    initValues: function () {
       let self = this;
-      let data = {}
+      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
+        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("select.")){
-          if (key.startsWith("select.multiple.")){
-            if(initValue){
-              data[key.replace('select.multiple.', '')] = JSON.parse(initValue["value"])
-            }else{
-              data[key.replace('select.multiple.', '')] = []
+        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 {
+            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
+            } else {
+              data[key.replace("select.", "")] = null;
             }
           }
-
         }
       }
       self.data = data;
     },
     shouldResetFormOnSuccessfulSubmit() {
-      const self = this
-      if (self.componentConfig['success'] != undefined && self.componentConfig['success']['reset'] != undefined) {
-        return self.componentConfig['success']['reset']
+      const self = this;
+      if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["reset"] != undefined) {
+        return self.componentConfig["success"]["reset"];
       } else {
-        return self.shouldResetFormOnSuccessfulSubmitByDefault()
+        return self.shouldResetFormOnSuccessfulSubmitByDefault();
       }
     },
     shouldResetFormOnSuccessfulSubmitByDefault() {
-      const self = this
+      const self = this;
       if (self.componentConfig["method"] == "put") {
-        return false
+        return false;
       } else {
-        return true
+        return true;
       }
     },
     perform: function(){
       const self = this
-      let payload = {}
-      payload[self.componentConfig["for"]] = self.data
-      axios__WEBPACK_IMPORTED_MODULE_2___default()({
-        method: self.componentConfig["method"],
-        url: self.componentConfig["submit_path"],
-        data: payload,
-        headers: {
-          'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
-        }
-      })
-      .then(function(response){
-        if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
-          _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit(self.componentConfig["success"]["emit"], response.data);
-        }
-        if (self.componentConfig["success"] != undefined
-          && self.componentConfig["success"]["transition"] != undefined
-          && (
-            self.componentConfig["success"]["transition"]["follow_response"] == undefined
-            ||
-            self.componentConfig["success"]["transition"]["follow_response"] === false
-          )
-          && self.$store != undefined
-        ) {
-          let path = self.componentConfig["success"]["transition"]["path"]
-          self.$store.dispatch('navigateTo', {url: path, backwards: false})
-          return;
-        }
-        if (self.componentConfig["success"] != undefined
-          && self.componentConfig["success"]["transition"] != undefined
-          && self.componentConfig["success"]["transition"]["follow_response"] === true
-          && self.$store != undefined
-        ) {
-          let path = response.data["transition_to"] || response.request.responseURL
-          self.$store.dispatch('navigateTo', {url: path, backwards: false})
-          return;
-        }
-        if (self.shouldResetFormOnSuccessfulSubmit())
-        {
-          self.setProps(self.data, null);
-          self.initValues();
-        }
-        self.showInlineForm = false;
-      })
-      .catch(function(error){
-        if(error.response && error.response.data && error.response.data.errors){
-          self.errors = error.response.data.errors;
-        }
-        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
-          _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit(self.componentConfig["failure"]["emit"], error.response.data);
-        }
-        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["transition"] != undefined && self.$store != undefined) {
-          let path = self.componentConfig["failure"]["transition"]["path"]
-          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+      if (self.componentConfig["emit"] != undefined) {
+        _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit(self.componentConfig["emit"]);
+      }
+      if (self.componentConfig["delay"] != undefined) {
+        setTimeout(function () {
+          self.sendRequest()
+        }, parseInt(self.componentConfig["delay"]));
+      } else {
+        this.sendRequest()
+      }
+    },
+    sendRequest: function(){
+      const self = this;
+      let payload = {};
+      payload[self.componentConfig["for"]] = self.data;
+      let axios_config = {};
+      if (self.componentConfig["multipart"] == true ) {
+        let form_data = new FormData();
+        for (let key in self.data) {
+          if (key.endsWith("[]")) {
+            for (let i in self.data[key]) {
+              let file = self.data[key][i];
+              form_data.append(self.componentConfig["for"] + "[" + key.slice(0, -2) + "][]", file);
+            }
+          } else {
+            if (self.data[key] != null){
+              form_data.append(self.componentConfig["for"] + "[" + key + "]", self.data[key]);
+            }
+          }
         }
-      })
-    }
+        axios_config = {
+          method: self.componentConfig["method"],
+          url: self.componentConfig["submit_path"],
+          data: form_data,
+          headers: {
+            "X-CSRF-Token": document.getElementsByName("csrf-token")[0].getAttribute("content"),
+            "Content-Type": "multipart/form-data",
+          },
+        };
+      } else {
+        axios_config = {
+          method: self.componentConfig["method"],
+          url: self.componentConfig["submit_path"],
+          data: payload,
+          headers: {
+            "X-CSRF-Token": document.getElementsByName("csrf-token")[0].getAttribute("content"),
+            "Content-Type": "application/json",
+          },
+        };
+      }
+      axios__WEBPACK_IMPORTED_MODULE_2___default()(axios_config)
+        .then(function (response) {
+          if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
+            _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit(self.componentConfig["success"]["emit"], response.data);
+          }
+          // transition handling
+          if (self.componentConfig["success"] != undefined
+            && self.componentConfig["success"]["transition"] != undefined
+            && (
+              self.componentConfig["success"]["transition"]["follow_response"] == undefined
+              ||
+              self.componentConfig["success"]["transition"]["follow_response"] === false
+            )
+            && self.$store != undefined
+          ) {
+            let path = self.componentConfig["success"]["transition"]["path"]
+            self.$store.dispatch('navigateTo', {url: path, backwards: false})
+            return;
+          }
+          if (self.componentConfig["success"] != undefined
+            && self.componentConfig["success"]["transition"] != undefined
+            && self.componentConfig["success"]["transition"]["follow_response"] === true
+            && self.$store != undefined
+          ) {
+            let path = response.data["transition_to"] || response.request.responseURL
+            self.$store.dispatch('navigateTo', {url: path, backwards: false})
+            return;
+          }
+          // redirect handling
+          if (self.componentConfig["success"] != undefined
+            && self.componentConfig["success"]["redirect"] != undefined
+            && (
+              self.componentConfig["success"]["redirect"]["follow_response"] == undefined
+              ||
+              self.componentConfig["success"]["redirect"]["follow_response"] === false
+            )
+            && self.$store != undefined
+          ) {
+            let path = self.componentConfig["success"]["redirect"]["path"]
+            window.location.href = path
+            return;
+          }
+          if (self.componentConfig["success"] != undefined
+            && self.componentConfig["success"]["redirect"] != undefined
+            && self.componentConfig["success"]["redirect"]["follow_response"] === true
+            && self.$store != undefined
+          ) {
+            let path = response.data["redirect_to"] || response.request.responseURL
+            window.location.href = path
+            return;
+          }
+
+          if (self.shouldResetFormOnSuccessfulSubmit())
+          {
+            self.setProps(self.data, null);
+            self.initValues();
+          }
+          self.showInlineForm = false;
+        })
+        .catch(function (error) {
+          if (error.response && error.response.data && error.response.data.errors) {
+            self.errors = error.response.data.errors;
+          }
+          if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
+            _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit(self.componentConfig["failure"]["emit"], error.response.data);
+          }
+          // transition handling
+          if (self.componentConfig["failure"] != undefined
+            && self.componentConfig["failure"]["transition"] != undefined
+            && (
+              self.componentConfig["failure"]["transition"]["follow_response"] == undefined
+              ||
+              self.componentConfig["failure"]["transition"]["follow_response"] === false
+            )
+            && self.$store != undefined
+          ) {
+            let path = self.componentConfig["failure"]["transition"]["path"]
+            self.$store.dispatch('navigateTo', {url: path, backwards: false})
+            return;
+          }
+          if (self.componentConfig["failure"] != undefined
+            && self.componentConfig["failure"]["transition"] != undefined
+            && self.componentConfig["failure"]["transition"]["follow_response"] === true
+            && self.$store != undefined
+          ) {
+            let path = error.response.data["transition_to"] || response.request.responseURL
+            self.$store.dispatch('navigateTo', {url: path, backwards: false})
+            return;
+          }
+          // redirect handling
+          if (self.componentConfig["failure"] != undefined
+            && self.componentConfig["failure"]["redirect"] != undefined
+            && (
+              self.componentConfig["failure"]["redirect"]["follow_response"] == undefined
+              ||
+              self.componentConfig["failure"]["redirect"]["follow_response"] === false
+            )
+            && self.$store != undefined
+          ) {
+            let path = self.componentConfig["failure"]["redirect"]["path"]
+            window.location.href = path
+            return;
+          }
+          if (self.componentConfig["failure"] != undefined
+            && self.componentConfig["failure"]["redirect"] != undefined
+            && self.componentConfig["failure"]["redirect"]["follow_response"] === true
+            && self.$store != undefined
+          ) {
+            let path = error.response.data["redirect_to"] || response.request.responseURL
+            window.location.href = path
+            return;
+          }
+        });
+    },
   },
-  mounted: function(){
-    this.initValues()
-  }
-}
+  mounted: function () {
+    this.initValues();
+  },
+};
 
-let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component('matestack-ui-core-form', componentDef)
+let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component("matestack-ui-core-form", componentDef);
 
 /* harmony default export */ __webpack_exports__["default"] = (componentDef);
 
@@ -1263,6 +1495,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! vue/dist/vue.esm */ "../node_modules/vue/dist/vue.esm.js");
 /* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuex */ "../node_modules/vuex/dist/vuex.esm.js");
 /* harmony import */ var _component_component__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../component/component */ "../app/concepts/matestack/ui/core/component/component.js");
+/* harmony import */ var _js_event_hub__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../js/event-hub */ "../app/concepts/matestack/ui/core/js/event-hub.js");
+
 
 
 
@@ -1274,11 +1508,25 @@ const componentDef = {
   },
   computed: vuex__WEBPACK_IMPORTED_MODULE_1__["default"].mapState({
     isActive (state) {
-      return this.componentConfig["link_path"] === state.currentPath
+      return (this.componentConfig["link_path"].split("?")[0]) === state.currentPathName
+    },
+    isChildActive (state) {
+      return ((this.componentConfig["link_path"].split("?")[0]) !== state.currentPathName) && (state.currentPathName.indexOf(this.componentConfig["link_path"].split("?")[0]) !== -1)
     }
   }),
   methods: {
     navigateTo: function(url){
+      const self = this
+      _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit("page_loading_triggered", url);
+      if (self.componentConfig["delay"] != undefined) {
+        setTimeout(function () {
+          self.performNavigation(url)
+        }, parseInt(self.componentConfig["delay"]));
+      } else {
+        this.performNavigation(url)
+      }
+    },
+    performNavigation: function(url){
       this.$store.dispatch('navigateTo', {url: url, backwards: false}).then((response) => {
         // self.asyncTemplate = response;
       })