matestack-ui-core 0.7.5 → 1.1.0

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

@@ -0,0 +1,6 @@
+module Matestack::Ui::Core
+  # Central DSL module, target of registry module definitions.
+  module DSL
+
+  end
+end

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

@@ -10,8 +10,24 @@ module Matestack
           # end
           # Rails.configuration.autoload_paths << Dir.glob(File.join(Rails.root, 'config/matestack/**/*.rb'))
           # require_dependency "#{Rails.root}/config/matestack-ui-core"
+
+          components_path = "#{Rails.root}/app/matestack/register_components"
+          if File.exist?("#{components_path}.rb")
+            # the other dependencies need to be loaded otherwise require_dependency crashes silently
+            # we don't need to require_dependency them because they don't need reloading
+            # anyhow, they should probably be required somewhere else before this anyhow?
+            require 'matestack/ui/core/dsl'
+            require 'matestack/ui/core/component/registry'
+            require_dependency "#{Rails.root}/app/matestack/register_components"
+          end
         end
 
+        # config.to_prepare takes a block that should be run to set up
+        # your Railtie/Engine. It is run once in production mode and on
+        # every request in development, and is the only code guaranteed to
+        # be called on every single request in development mode.
+        # source: https://stackoverflow.com/a/5109348
+        # (couldn't find official docs)
         config.to_prepare &method(:activate).to_proc
       end
     end

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

@@ -1,7 +1,7 @@
 module Matestack
   module Ui
     module Core
-      VERSION = '0.7.5'
+      VERSION = '1.1.0'
     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;
+        }
+      })
     }
   }
 }
@@ -189,6 +270,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var v_runtime_template__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! v-runtime-template */ "../node_modules/v-runtime-template/dist/v-runtime-template.es.js");
 /* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! vuex */ "../node_modules/vuex/dist/vuex.esm.js");
 /* harmony import */ var _location__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./location */ "../app/concepts/matestack/ui/core/app/location.js");
+/* harmony import */ var _js_event_hub__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../js/event-hub */ "../app/concepts/matestack/ui/core/js/event-hub.js");
+
 
 
 
@@ -207,15 +290,17 @@ 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} );
+          _js_event_hub__WEBPACK_IMPORTED_MODULE_4__["default"].$emit("page_loading_triggered", document.location.pathname + document.location.search);
+          this.$store.commit('setPageLoading', true);
+          self.$store.dispatch("navigateTo", { url: document.location.pathname + document.location.search, backwards: true } );
       }
-    }
+    })
   },
   components: {
     VRuntimeTemplate: v_runtime_template__WEBPACK_IMPORTED_MODULE_1__["default"]
@@ -277,6 +362,7 @@ vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].use(vuex__WEBPACK_IMPOR
 const store = new vuex__WEBPACK_IMPORTED_MODULE_1__["default"].Store({
   state: {
     pageTemplate: null,
+    pageLoading: false,
     currentPathName: document.location.pathname,
     currentSearch: document.location.search,
     currentOrigin: document.location.origin
@@ -285,6 +371,9 @@ const store = new vuex__WEBPACK_IMPORTED_MODULE_1__["default"].Store({
     setPageTemplate (state, serverResponse){
       state.pageTemplate = serverResponse
     },
+    setPageLoading (state, boolean){
+      state.pageLoading = boolean
+    },
     setCurrentLocation (state, current){
       state.currentPathName = current.path
       state.currentSearch = current.search
@@ -292,10 +381,30 @@ const store = new vuex__WEBPACK_IMPORTED_MODULE_1__["default"].Store({
     },
     resetPageTemplate (state) {
       state.pageTemplate = null;
+    },
+    pageScrollTop (state) {
+      //https://stackoverflow.com/a/35940276/13886137
+      const getScrollParent = function(node) {
+        if (node == null) {
+          return null
+        }
+        if (node.scrollHeight > node.clientHeight) {
+          return node
+        } else {
+          return getScrollParent(node.parentNode)
+        }
+      }
+      var scrollParent = getScrollParent(document.getElementsByClassName("matestack-page-root")[0])
+      if(scrollParent){
+        scrollParent.scrollTop = 0;
+      }
+      // getScrollParent(document.getElementsByClassName("matestack-page-root")[0]).scrollTop = 0
     }
   },
   actions: {
     navigateTo ({ commit, state }, { url, backwards }) {
+      const self = this
+      commit('setPageLoading', true)
       _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit("page_loading", url);
       if (typeof matestackUiCoreTransitionStart !== 'undefined') {
         matestackUiCoreTransitionStart(url);
@@ -320,9 +429,11 @@ const store = new vuex__WEBPACK_IMPORTED_MODULE_1__["default"].Store({
             window.history.pushState({matestackApp: true, url: url}, null, url);
           }
           setTimeout(function () {
-            resolve(response["data"])
+            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 })
+            commit('setPageLoading', false)
+            commit('pageScrollTop')
             _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit("page_loaded", url);
             if (typeof matestackUiCoreTransitionSuccess !== 'undefined') {
               matestackUiCoreTransitionSuccess(url);
@@ -358,18 +469,25 @@ const store = new vuex__WEBPACK_IMPORTED_MODULE_1__["default"].Store({
 "use strict";
 __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 _js_event_hub__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../js/event-hub */ "../app/concepts/matestack/ui/core/js/event-hub.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 axios__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! axios */ "../node_modules/axios/index.js");
+/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var v_runtime_template__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! v-runtime-template */ "../node_modules/v-runtime-template/dist/v-runtime-template.es.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");
+/* harmony import */ var _component_component__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../component/component */ "../app/concepts/matestack/ui/core/component/component.js");
+
+
 
 
 
 
 const componentDef = {
-  mixins: [_component_component__WEBPACK_IMPORTED_MODULE_2__["default"]],
+  mixins: [_component_component__WEBPACK_IMPORTED_MODULE_4__["default"]],
   data: function(){
     return {
+      asyncTemplate: null,
       showing: true,
-      hide_after_timeout: null,
+      loading: false,
+      hideAfterTimeout: null,
       event: {
         data: {}
       }
@@ -389,7 +507,7 @@ const componentDef = {
         }
       }
       if(this.componentConfig["hide_after"] != undefined){
-        self.hide_after_timeout = setTimeout(function () {
+        self.hideAfterTimeout = setTimeout(function () {
           self.hide()
         }, parseInt(this.componentConfig["hide_after"]));
       }
@@ -400,16 +518,43 @@ const componentDef = {
     },
     startDefer: function(){
       const self = this
+      self.loading = true;
       setTimeout(function () {
         self.rerender()
       }, parseInt(this.componentConfig["defer"]));
+    },
+    rerender: function(){
+      var self = this;
+      self.loading = true;
+      axios__WEBPACK_IMPORTED_MODULE_1___default()({
+        method: "get",
+        url: location.pathname + location.search,
+        headers: {
+          'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
+        },
+        params: {
+          "component_key": self.componentConfig["component_key"],
+          "component_class": self.componentConfig["parent_class"]
+        }
+      })
+      .then(function(response){
+        var tmp_dom_element = document.createElement('div');
+        tmp_dom_element.innerHTML = response['data'];
+        var template = tmp_dom_element.querySelector('#' + self.componentConfig["component_key"]).outerHTML;
+        self.loading = false;
+        self.asyncTemplate = template;
+      })
+      .catch(function(error){
+        console.log(error)
+        _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit('async_rerender_error', { id: self.componentConfig["component_key"] })
+      })
     }
   },
   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)
+    self.registerEvents(this.componentConfig['show_on'], self.show)
+    self.registerEvents(this.componentConfig['hide_on'], self.hide)
+    self.registerEvents(this.componentConfig['rerender_on'], self.rerender)
     if(this.componentConfig["show_on"] != undefined){
       this.showing = false
     }
@@ -426,11 +571,14 @@ const componentDef = {
   },
   beforeDestroy: function() {
     const self = this
-    clearTimeout(self.hide_after_timeout)
-    _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);
+    clearTimeout(self.hideAfterTimeout)
+    self.removeEvents(this.componentConfig["show_on"], self.show)
+    self.removeEvents(this.componentConfig["hide_on"], self.hide)
+    self.removeEvents(this.componentConfig["rerender_on"], self.rerender)
   },
+  components: {
+    VRuntimeTemplate: v_runtime_template__WEBPACK_IMPORTED_MODULE_2__["default"]
+  }
 }
 
 let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component('matestack-ui-core-async', componentDef)
@@ -438,6 +586,123 @@ let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].compone
 /* harmony default export */ __webpack_exports__["default"] = (componentDef);
 
 
+/***/ }),
+
+/***/ "../app/concepts/matestack/ui/core/cable/cable.js":
+/*!********************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/cable/cable.js ***!
+  \********************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__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 v_runtime_template__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! v-runtime-template */ "../node_modules/v-runtime-template/dist/v-runtime-template.es.js");
+/* harmony import */ var _js_event_hub__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../js/event-hub */ "../app/concepts/matestack/ui/core/js/event-hub.js");
+/* harmony import */ var _component_component__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../component/component */ "../app/concepts/matestack/ui/core/component/component.js");
+
+
+
+
+
+const componentDef = {
+  mixins: [_component_component__WEBPACK_IMPORTED_MODULE_3__["default"]],
+  props: {
+    initialTemplate: String,
+  },
+  data: function(){
+    return {
+      cableTemplate: null,
+      cableTemplateDomElement: null,
+      loading: false,
+      event: {
+        data: {}
+      }
+    }
+  },
+  methods: {
+    append: function(payload){
+      var html = this.formatPayload(payload)
+      this.cableTemplateDomElement.insertAdjacentHTML(
+        'beforeend',
+        html.join('')
+      )
+      this.updateCableTemplate()
+    },
+    prepend: function(payload){
+      var html = this.formatPayload(payload)
+      this.cableTemplateDomElement.insertAdjacentHTML(
+        'afterbegin',
+        html.join('')
+      )
+      this.updateCableTemplate()
+    },
+    delete: function(payload){
+      var ids = this.formatPayload(payload)
+      ids.forEach(id =>
+        this.cableTemplateDomElement.querySelector('#' + id).remove()
+      )
+      this.updateCableTemplate()
+    },
+    update: function(payload){
+      const self = this
+      var html = this.formatPayload(payload)
+      html.forEach(function(elem){
+        var dom_elem = document.createElement('div')
+        dom_elem.innerHTML = elem
+        var id = dom_elem.firstChild.id
+        var old_elem = self.cableTemplateDomElement.querySelector('#' + id)
+        old_elem.parentNode.replaceChild(dom_elem.firstChild, old_elem)
+      })
+      this.updateCableTemplate()
+    },
+    replace: function(payload){
+      var html = this.formatPayload(payload)
+      this.cableTemplateDomElement.innerHTML = html.join('')
+      this.updateCableTemplate()
+    },
+    updateCableTemplate: function(){
+      this.cableTemplate = this.cableTemplateDomElement.outerHTML
+    },
+    formatPayload: function(payload){
+      if(!Array.isArray(payload.data)){
+        return [payload.data]
+      }
+      return payload.data
+    },
+  },
+  mounted: function() {
+    const self = this
+    var dom_elem = document.createElement('div')
+    dom_elem.innerHTML = this.initialTemplate
+    this.cableTemplateDomElement = dom_elem.querySelector("#" + this.componentConfig["id"])
+    this.cableTemplate = this.cableTemplateDomElement.outerHTML
+    this.registerEvents(this.componentConfig['append_on'], self.append)
+    this.registerEvents(this.componentConfig['prepend_on'], self.prepend)
+    this.registerEvents(this.componentConfig['delete_on'], self.delete)
+    this.registerEvents(this.componentConfig['update_on'], self.update)
+    this.registerEvents(this.componentConfig['replace_on'], self.replace)
+  },
+  beforeDestroy: function() {
+    const self = this
+    this.cableTemplate = null
+    this.removeEvents(this.componentConfig['append_on'], self.append)
+    this.removeEvents(this.componentConfig['prepend_on'], self.prepend)
+    this.removeEvents(this.componentConfig['delete_on'], self.delete)
+    this.removeEvents(this.componentConfig['update_on'], self.update)
+    this.removeEvents(this.componentConfig['replace_on'], self.replace)
+  },
+  components: {
+    VRuntimeTemplate: v_runtime_template__WEBPACK_IMPORTED_MODULE_1__["default"]
+  }
+}
+
+let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component('matestack-ui-core-cable', componentDef)
+
+/* harmony default export */ __webpack_exports__["default"] = (componentDef);
+
+
 /***/ }),
 
 /***/ "../app/concepts/matestack/ui/core/collection/content/content.js":
@@ -453,15 +718,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _js_event_hub__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../js/event-hub */ "../app/concepts/matestack/ui/core/js/event-hub.js");
 /* harmony import */ var _js_helpers_query_params_helper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../js/helpers/query-params-helper */ "../app/concepts/matestack/ui/core/js/helpers/query-params-helper.js");
 /* harmony import */ var _component_component__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../component/component */ "../app/concepts/matestack/ui/core/component/component.js");
-/* harmony import */ var _async_async__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../async/async */ "../app/concepts/matestack/ui/core/async/async.js");
-
 
 
 
 
+// import asyncMixin from '../../async/async'
 
 const componentDef = {
-  mixins: [_component_component__WEBPACK_IMPORTED_MODULE_3__["default"], _async_async__WEBPACK_IMPORTED_MODULE_4__["default"]],
+  mixins: [_component_component__WEBPACK_IMPORTED_MODULE_3__["default"]],
   data: function(){
     return {
       currentLimit: null,
@@ -652,7 +916,7 @@ const componentDef = {
         this.ordering[key] = "asc"
       } else if (this.ordering[key] == "asc") {
         this.ordering[key] = "desc"
-      } else if (this.ordering[key] = "desc") {
+      } else if (this.ordering[key] == "desc") {
         this.ordering[key] = undefined
       }
       var url;
@@ -728,67 +992,26 @@ let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].compone
 
 "use strict";
 __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 axios__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! axios */ "../node_modules/axios/index.js");
-/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var v_runtime_template__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! v-runtime-template */ "../node_modules/v-runtime-template/dist/v-runtime-template.es.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");
-
-
-
+/* harmony import */ var _js_event_hub__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../js/event-hub */ "../app/concepts/matestack/ui/core/js/event-hub.js");
 
 
 const componentMixin = {
   props: ['componentConfig', 'params'],
-  data: function(){
-    return {
-      asyncTemplate: null
-    }
-  },
   methods: {
-    onRerender: function(event){
-      if (this.$el.id === event+"__wrapper"){
-        this.rerender()
+    registerEvents: function(events, callback){
+      if(events != undefined){
+        var event_names = events.split(",")
+        event_names.forEach(event_name => _js_event_hub__WEBPACK_IMPORTED_MODULE_0__["default"].$on(event_name.trim(), callback));
       }
     },
-    onMatestackUiCoreChannel: function(event){
-      if (this.componentConfig["rerender_on"] == event.message){
-        this.rerender()
+    removeEvents: function(events, callback){
+      if(events != undefined){
+        var event_names = events.split(",")
+        event_names.forEach(event_name => _js_event_hub__WEBPACK_IMPORTED_MODULE_0__["default"].$off(event_name.trim(), callback));
       }
-    },
-    rerender: function(){
-      var self = this;
-      self.params["component_key"] = self.componentConfig["component_key"]
-      axios__WEBPACK_IMPORTED_MODULE_1___default()({
-        method: "get",
-        url: location.pathname + location.search,
-        headers: {
-          'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
-        },
-        params: {"component_key": self.componentConfig["component_key"]}
-      })
-      .then(function(response){
-        self.asyncTemplate = response["data"];
-      })
-    },
-    rerenderWith: function(newParams){
-      Object.assign(this.params, newParams);
-      this.rerender()
     }
-  },
-  created: function () {
-    const self = this
-    _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$on('rerender', self.onRerender)
-    _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$on('MatestackUiCoreChannel', self.onMatestackUiCoreChannel)
-  },
-  beforeDestroy: function() {
-    const self = this
-    _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$off('rerender', self.onRerender);
-    _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$off('MatestackUiCoreChannel', self.onMatestackUiCoreChannel)
-  },
-  components: {
-    VRuntimeTemplate: v_runtime_template__WEBPACK_IMPORTED_MODULE_2__["default"]
   }
+
 }
 
 /* harmony default export */ __webpack_exports__["default"] = (componentMixin);
@@ -820,194 +1043,429 @@ __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: {},
+      loading: false
+    };
   },
   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]){
-        this.errors[key] = null;
+    hasErrors: function(){
+      //https://stackoverflow.com/a/27709663/13886137
+      for (var key in this.errors) {
+        if (this.errors[key] !== null && this.errors[key] != ""){
+          return true;
+        }
       }
+      return false;
     },
-    launchInlineForm: function(key, value){
-      this.showInlineForm = true;
-      this.data[key] = value;
-      const self = this;
-      setTimeout(function () {
-        self.$refs.inlineinput.focus();
-      }, 300);
+    resetErrors: function (key) {
+      if (this.errors[key]) {
+        this.errors[key] = null;
+      }
     },
-    closeInlineForm: function(){
-      this.showInlineForm = false;
+    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;
+        }
+      }
     },
-    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;
-         }
+    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;
+      var form = self.$el.tagName == 'FORM' ? self.$el : self.$el.querySelector('form');
+      if(form.checkValidity()){
+        self.loading = true;
+        if (self.componentConfig["emit"] != undefined) {
+          _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit(self.componentConfig["emit"]);
         }
-        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["delay"] != undefined) {
+          setTimeout(function () {
+            self.sendRequest()
+          }, parseInt(self.componentConfig["delay"]));
+        } else {
+          self.sendRequest()
         }
-        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})
+      } else {
+        _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit('static_form_errors');
+      }
+    },
+    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) {
+          self.loading = false;
+          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();
+          }
+        })
+        .catch(function (error) {
+          self.loading = false;
+          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);
 
 
 /***/ }),
 
-/***/ "../app/concepts/matestack/ui/core/html/html.js":
-/*!******************************************************!*\
-  !*** ../app/concepts/matestack/ui/core/html/html.js ***!
-  \******************************************************/
+/***/ "../app/concepts/matestack/ui/core/isolated/isolated.js":
+/*!**************************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/isolated/isolated.js ***!
+  \**************************************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __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 _component_component__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../component/component */ "../app/concepts/matestack/ui/core/component/component.js");
+/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! axios */ "../node_modules/axios/index.js");
+/* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var v_runtime_template__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! v-runtime-template */ "../node_modules/v-runtime-template/dist/v-runtime-template.es.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");
+
+
 
 
 
 const componentDef = {
-  mixins: [_component_component__WEBPACK_IMPORTED_MODULE_1__["default"]]
+  props: ['componentConfig', 'params'],
+  data: function(){
+    return {
+      isolatedTemplate: null,
+      loading: false,
+      loadingError: false
+    }
+  },
+  methods: {
+    rerender: function(){
+      var self = this;
+      self.loading = true;
+      self.loadingError = false;
+      if(self.componentConfig["rerender_delay"] != undefined){
+        setTimeout(function () {
+          self.renderIsolatedContent();
+        }, parseInt(this.componentConfig["rerender_delay"]));
+      } else {
+        self.renderIsolatedContent();
+      }
+    },
+    renderIsolatedContent: function(){
+      var self = this;
+      self.loading = true;
+      self.loadingError = false;
+      axios__WEBPACK_IMPORTED_MODULE_1___default()({
+        method: "get",
+        url: location.pathname + location.search,
+        headers: {
+          'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
+        },
+        params: {
+          "component_class": self.componentConfig["component_class"],
+          "public_options": self.componentConfig["public_options"]
+        }
+      })
+      .then(function(response){
+        self.loading = false;
+        self.loadingStart = false;
+        self.loadingEnd = true;
+        self.isolatedTemplate = response['data'];
+      })
+      .catch(function(error){
+        self.loadingError = true;
+        _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$emit('isolate_rerender_error', { class: self.componentConfig["component_class"] })
+      })
+    },
+    startDefer: function(){
+      const self = this
+      self.loading = true;
+      setTimeout(function () {
+        self.renderIsolatedContent()
+      }, parseInt(this.componentConfig["defer"]));
+    }
+  },
+  created: function () {
+    const self = this
+  },
+  beforeDestroy: function() {
+    const self = this
+    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_3__["default"].$off(rerender_event.trim(), self.renderIsolatedContent));
+    }
+  },
+  mounted: function (){
+    const self = this
+    if(this.componentConfig["init_on"] === undefined || this.componentConfig["init_on"] === null){
+      if(self.componentConfig["defer"] == true || Number.isInteger(self.componentConfig["defer"])){
+        if(!isNaN(self.componentConfig["defer"])){
+          self.startDefer()
+        }
+        else{
+          self.renderIsolatedContent();
+        }
+      }
+    }else{
+      if(self.componentConfig["defer"] != undefined){
+        if(!isNaN(self.componentConfig["defer"])){
+          var init_on_events = this.componentConfig["init_on"].split(",")
+          init_on_events.forEach(init_on_event => _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$on(init_on_event.trim(), self.startDefer));
+        }
+      }else{
+        var init_on_events = this.componentConfig["init_on"].split(",")
+        init_on_events.forEach(init_on_event => _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$on(init_on_event.trim(), self.renderIsolatedContent));
+      }
+    }
+
+    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_3__["default"].$on(rerender_event.trim(), self.rerender));
+    }
+
+  },
+  components: {
+    VRuntimeTemplate: v_runtime_template__WEBPACK_IMPORTED_MODULE_2__["default"]
+  }
 }
 
-let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component('matestack-ui-core-html', componentDef)
+let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component('matestack-ui-core-isolate', componentDef)
 
-/* harmony default export */ __webpack_exports__["default"] = (component);
+/* harmony default export */ __webpack_exports__["default"] = (componentDef);
 
 
 /***/ }),
@@ -1025,18 +1483,20 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var vue_turbolinks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vue-turbolinks */ "../node_modules/vue-turbolinks/index.js");
 /* harmony import */ var _app_app__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../app/app */ "../app/concepts/matestack/ui/core/app/app.js");
 /* harmony import */ var _async_async__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../async/async */ "../app/concepts/matestack/ui/core/async/async.js");
-/* harmony import */ var _page_content__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../page/content */ "../app/concepts/matestack/ui/core/page/content.js");
-/* harmony import */ var _app_store__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../app/store */ "../app/concepts/matestack/ui/core/app/store.js");
-/* harmony import */ var _component_component__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../component/component */ "../app/concepts/matestack/ui/core/component/component.js");
-/* harmony import */ var _component_anonym_dynamic_component__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../component/anonym-dynamic-component */ "../app/concepts/matestack/ui/core/component/anonym-dynamic-component.js");
-/* harmony import */ var _html_html__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../html/html */ "../app/concepts/matestack/ui/core/html/html.js");
-/* harmony import */ var _transition_transition__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../transition/transition */ "../app/concepts/matestack/ui/core/transition/transition.js");
-/* harmony import */ var _action_action__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../action/action */ "../app/concepts/matestack/ui/core/action/action.js");
-/* harmony import */ var _form_form__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../form/form */ "../app/concepts/matestack/ui/core/form/form.js");
-/* harmony import */ var _onclick_onclick__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../onclick/onclick */ "../app/concepts/matestack/ui/core/onclick/onclick.js");
-/* harmony import */ var _collection_content_content__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../collection/content/content */ "../app/concepts/matestack/ui/core/collection/content/content.js");
-/* harmony import */ var _collection_filter_filter__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../collection/filter/filter */ "../app/concepts/matestack/ui/core/collection/filter/filter.js");
-/* harmony import */ var _collection_order_order__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../collection/order/order */ "../app/concepts/matestack/ui/core/collection/order/order.js");
+/* harmony import */ var _cable_cable__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../cable/cable */ "../app/concepts/matestack/ui/core/cable/cable.js");
+/* harmony import */ var _page_content_content__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../page/content/content */ "../app/concepts/matestack/ui/core/page/content/content.js");
+/* harmony import */ var _toggle_toggle__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../toggle/toggle */ "../app/concepts/matestack/ui/core/toggle/toggle.js");
+/* harmony import */ var _app_store__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../app/store */ "../app/concepts/matestack/ui/core/app/store.js");
+/* harmony import */ var _component_component__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../component/component */ "../app/concepts/matestack/ui/core/component/component.js");
+/* harmony import */ var _component_anonym_dynamic_component__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../component/anonym-dynamic-component */ "../app/concepts/matestack/ui/core/component/anonym-dynamic-component.js");
+/* harmony import */ var _transition_transition__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../transition/transition */ "../app/concepts/matestack/ui/core/transition/transition.js");
+/* harmony import */ var _action_action__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../action/action */ "../app/concepts/matestack/ui/core/action/action.js");
+/* harmony import */ var _form_form__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../form/form */ "../app/concepts/matestack/ui/core/form/form.js");
+/* harmony import */ var _onclick_onclick__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../onclick/onclick */ "../app/concepts/matestack/ui/core/onclick/onclick.js");
+/* harmony import */ var _collection_content_content__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../collection/content/content */ "../app/concepts/matestack/ui/core/collection/content/content.js");
+/* harmony import */ var _collection_filter_filter__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../collection/filter/filter */ "../app/concepts/matestack/ui/core/collection/filter/filter.js");
+/* harmony import */ var _collection_order_order__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../collection/order/order */ "../app/concepts/matestack/ui/core/collection/order/order.js");
+/* harmony import */ var _isolated_isolated__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../isolated/isolated */ "../app/concepts/matestack/ui/core/isolated/isolated.js");
 
 
 
@@ -1056,6 +1516,8 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
 let matestackUiApp = undefined
 
 // this event fires first and always
@@ -1066,9 +1528,9 @@ document.addEventListener('DOMContentLoaded', () => {
   // if they were present on the first page, which was loaded and activated turbolinks
   // the mixin does not impact the app when turbolinks is disabled
   matestackUiApp = new vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"]({
-      el: "#matestack_ui",
+      el: "#matestack-ui",
       mixins: [vue_turbolinks__WEBPACK_IMPORTED_MODULE_1__["turbolinksAdapterMixin"]],
-      store: _app_store__WEBPACK_IMPORTED_MODULE_5__["default"]
+      store: _app_store__WEBPACK_IMPORTED_MODULE_7__["default"]
   })
 })
 
@@ -1078,14 +1540,14 @@ document.addEventListener('turbolinks:load', () => {
   // otherwise the matestack page will jump back to the latest pageTemplate
   // fetched during the last matestack transition as the turbolinks powered
   // page transition does not write the matestack store pageTemplate state variable
-  _app_store__WEBPACK_IMPORTED_MODULE_5__["default"].commit('resetPageTemplate')
+  _app_store__WEBPACK_IMPORTED_MODULE_7__["default"].commit('resetPageTemplate')
   // we need to destroy the vue app instance
   matestackUiApp.$destroy();
   // and recreate it right afterwards in order to work when used with turbolinks
   matestackUiApp = new vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"]({
-      el: "#matestack_ui",
+      el: "#matestack-ui",
       mixins: [vue_turbolinks__WEBPACK_IMPORTED_MODULE_1__["turbolinksAdapterMixin"]],
-      store: _app_store__WEBPACK_IMPORTED_MODULE_5__["default"]
+      store: _app_store__WEBPACK_IMPORTED_MODULE_7__["default"]
   })
 })
 
@@ -1218,10 +1680,10 @@ let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].compone
 
 /***/ }),
 
-/***/ "../app/concepts/matestack/ui/core/page/content.js":
-/*!*********************************************************!*\
-  !*** ../app/concepts/matestack/ui/core/page/content.js ***!
-  \*********************************************************/
+/***/ "../app/concepts/matestack/ui/core/page/content/content.js":
+/*!*****************************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/page/content/content.js ***!
+  \*****************************************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -1229,7 +1691,10 @@ let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].compone
 __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 _component_component__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../component/component */ "../app/concepts/matestack/ui/core/component/component.js");
+/* harmony import */ var v_runtime_template__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! v-runtime-template */ "../node_modules/v-runtime-template/dist/v-runtime-template.es.js");
+
+
 
 
 
@@ -1241,7 +1706,11 @@ const componentDef = {
   },
   computed: vuex__WEBPACK_IMPORTED_MODULE_1__["default"].mapState({
     asyncPageTemplate: state => state.pageTemplate,
-  })
+    loading: state => state.pageLoading
+  }),
+  components: {
+    VRuntimeTemplate: v_runtime_template__WEBPACK_IMPORTED_MODULE_3__["default"]
+  }
 }
 
 let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component('matestack-ui-core-page-content', componentDef)
@@ -1249,6 +1718,93 @@ let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].compone
 /* harmony default export */ __webpack_exports__["default"] = (componentDef);
 
 
+/***/ }),
+
+/***/ "../app/concepts/matestack/ui/core/toggle/toggle.js":
+/*!**********************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/toggle/toggle.js ***!
+  \**********************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__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 _js_event_hub__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../js/event-hub */ "../app/concepts/matestack/ui/core/js/event-hub.js");
+/* harmony import */ var _component_component__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../component/component */ "../app/concepts/matestack/ui/core/component/component.js");
+
+
+
+
+const componentDef = {
+  mixins: [_component_component__WEBPACK_IMPORTED_MODULE_2__["default"]],
+  data: function(){
+    return {
+      showing: true,
+      hide_after_timeout: null,
+      event: {
+        data: {}
+      }
+    }
+  },
+  methods: {
+    show: function(event_data){
+      const self = this
+      if (this.showing === true){
+        return
+      }
+      this.showing = true
+      this.event.data = event_data
+      if(this.componentConfig["hide_after"] != undefined){
+        self.hide_after_timeout = setTimeout(function () {
+          self.hide()
+        }, parseInt(this.componentConfig["hide_after"]));
+      }
+    },
+    hide: function(){
+      this.showing = false
+      this.event.data = {}
+    }
+  },
+  created: function () {
+    const self = this
+    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["show_on"] != undefined){
+      this.showing = false
+    }
+    if(this.componentConfig["init_show"] == true){
+      this.showing = true
+    }
+  },
+  beforeDestroy: function() {
+    const self = this
+    clearTimeout(self.hide_after_timeout)
+    _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));
+    }
+  },
+}
+
+let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component('matestack-ui-core-toggle', componentDef)
+
+/* harmony default export */ __webpack_exports__["default"] = (componentDef);
+
+
 /***/ }),
 
 /***/ "../app/concepts/matestack/ui/core/transition/transition.js":
@@ -1263,6 +1819,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 +1832,26 @@ 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);
+      this.$store.commit('setPageLoading', true);
+      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;
       })