matestack-ui-core 1.0.1 → 1.3.2

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

@@ -0,0 +1,12 @@
+module Matestack::Ui::Core::Form::Submit
+  class Base < Matestack::Ui::Core::Component::Dynamic
+
+    def submit_attributes
+      html_attributes.merge!({
+        "@click.prevent": "$parent.perform",
+        "v-bind:class": "{ 'loading': $parent.loading }"
+      })
+    end
+
+  end
+end

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

@@ -0,0 +1,19 @@
+import Vue from "vue/dist/vue.esm";
+
+import componentMixin from "../../component/component";
+
+const componentDef = {
+  mixins: [componentMixin],
+  data() {
+    return {};
+  },
+  methods: {
+    loading: function(){
+      return this.$parent.loading;
+    }
+  }
+}
+
+let component = Vue.component("matestack-ui-core-form-submit", componentDef);
+
+export default componentDef;

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

@@ -1,11 +1,14 @@
+require_relative './base'
+
 module Matestack::Ui::Core::Form::Submit
-  class Submit < Matestack::Ui::Core::Component::Static
+  class Submit < Base
+
+    vue_js_component_name "matestack-ui-core-form-submit"
 
-    def submit_attributes
-      html_attributes.merge!({
-        "@click.prevent": "perform",
-        "v-bind:class": "{ 'loading': loading }"
-      })
+    def response
+      span attributes: submit_attributes do
+        yield_components
+      end
     end
 
   end

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

@@ -0,0 +1,49 @@
+require_relative '../utils'
+require_relative '../has_errors'
+module Matestack::Ui::Core::Form::Textarea
+  class Base < Matestack::Ui::Core::Component::Dynamic
+    include Matestack::Ui::Core::Form::Utils
+    include Matestack::Ui::Core::Form::HasErrors
+
+    requires :key
+    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
+
+    html_attributes :autofocus, :cols, :dirname, :disabled, :form, :maxlength,
+      :name, :placeholder, :readonly, :required, :rows, :wrap
+
+    def setup
+      @component_config[:init_value] = init_value
+    end
+
+    def component_id
+      "textarea-component-for-#{attr_key}"
+    end
+
+    def input_key
+      "$parent.data[\"#{key}\"]"
+    end
+
+    def error_key
+      "$parent.errors[\"#{key}\"]"
+    end
+
+    def change_event
+      "inputChanged('#{attr_key}')"
+    end
+
+    def textarea_attributes
+      html_attributes.merge(attributes: vue_attributes)
+    end
+
+    def vue_attributes
+      (options[:attributes] || {}).merge({
+        'v-model': input_key,
+        '@change': change_event,
+        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+        "init-value": init_value,
+        ref: "input.#{attr_key}",
+      })
+    end
+
+  end
+end

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

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

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

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

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

@@ -1,28 +1,17 @@
-require_relative '../utils'
-require_relative '../has_errors'
+require_relative './base'
+
 module Matestack::Ui::Core::Form::Textarea
-  class Textarea < Matestack::Ui::Core::Textarea::Textarea
-    include Matestack::Ui::Core::Form::Utils
-    include Matestack::Ui::Core::Form::HasErrors
+  class Textarea < Base
 
-    requires :key
-    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
+    vue_js_component_name "matestack-ui-core-form-textarea"
 
     def response
-      label text: input_label if input_label
-      textarea html_attributes.merge(attributes: vue_attributes)
-      render_errors
+      div class: "matestack-ui-core-form-textarea" do
+        label text: input_label if input_label
+        textarea textarea_attributes
+        render_errors
+      end
     end
 
-    def vue_attributes
-      (options[:attributes] || {}).merge({
-        'v-model': input_key,
-        '@change': "inputChanged('#{attr_key}')",
-        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
-        "init-value": init_value,
-        ref: "input.#{attr_key}",
-      })
-    end
-    
   end
-end
+end

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

@@ -4,6 +4,7 @@ import { turbolinksAdapterMixin } from 'vue-turbolinks';
 // Import from app/concepts/matestack/ui/core:
 import app from '../app/app'
 import async from '../async/async'
+import cable from '../cable/cable'
 import pageContent from '../page/content/content'
 import toggle from '../toggle/toggle'
 import store from '../app/store'
@@ -12,6 +13,17 @@ import anonymDynamicComponent from '../component/anonym-dynamic-component'
 import transition from '../transition/transition'
 import action from '../action/action'
 import form from '../form/form'
+import formInput from '../form/input/input'
+import formInputMixin from '../form/input/mixin'
+import formSelect from '../form/select/select'
+import formSelectMixin from '../form/select/mixin'
+import formRadio from '../form/radio/radio'
+import formRadioMixin from '../form/radio/mixin'
+import formCheckbox from '../form/checkbox/checkbox'
+import formCheckboxMixin from '../form/checkbox/mixin'
+import formTextarea from '../form/textarea/textarea'
+import formTextareaMixin from '../form/textarea/mixin'
+import formSubmit from '../form/submit/submit'
 import onclick from '../onclick/onclick'
 import collectionContent from '../collection/content/content'
 import collectionFilter from '../collection/filter/filter'

data/app/concepts/matestack/ui/core/{form/submit/submit.haml → select/select.haml}

@@ -1,3 +1,3 @@
-%span{ submit_attributes }
+%select{ html_attributes }
   - if block_given?
     = yield

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

@@ -0,0 +1,7 @@
+module Matestack::Ui::Core::Select
+  class Select < Matestack::Ui::Core::Component::Static
+
+    html_attributes :autofocus, :disabled, :form, :multiple, :name, :required, :size
+
+  end
+end

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

@@ -14,7 +14,7 @@ module Matestack
         def self.included(base)
           base.extend(ClassMethods)
         end
-        
+
         module ClassMethods
           def matestack_app _class
             @matestack_app_class = _class
@@ -99,8 +99,11 @@ module Matestack
         end
 
         def matestack_component(component, options = {}, &block)
-          context = (options[:matestack_context] ||= {}).merge(controller: @_controller)
-          Matestack::Ui::Core::Component::Base.new(options.merge(matestack_context: context)).send(component, options.merge(matestack_context: context), &block)
+          controller = (self.class <= ActionController::Base) ? self : @_controller
+          context = (options[:matestack_context] ||= {}).merge(controller: controller)
+          Matestack::Ui::Core::Component::Base
+            .new(options.merge(context: context, matestack_context: context))
+            .send(component, options.merge(context: context, matestack_context: context), &block).to_s
         end
       end
     end

data/app/javascript/matestack-ui-core/index.js

@@ -5,6 +5,11 @@ import axios from 'axios'
 // Import from app/concepts/matestack/ui/core:
 import matestackEventHub from '../../../app/concepts/matestack/ui/core/js/event-hub'
 import componentMixin from '../../../app/concepts/matestack/ui/core/component/component'
+import formInputMixin from '../../../app/concepts/matestack/ui/core/form/input/mixin'
+import formSelectMixin from '../../../app/concepts/matestack/ui/core/form/select/mixin'
+import formRadioMixin from '../../../app/concepts/matestack/ui/core/form/radio/mixin'
+import formCheckboxMixin from '../../../app/concepts/matestack/ui/core/form/checkbox/mixin'
+import formTextareaMixin from '../../../app/concepts/matestack/ui/core/form/textarea/mixin'
 import matestackUiCore from '../../../app/concepts/matestack/ui/core/js/core'
 
 import styles from './styles/index.scss'
@@ -14,9 +19,14 @@ const MatestackUiCore = {
   Vuex,
   axios,
   matestackEventHub,
-  componentMixin
+  componentMixin,
+  formInputMixin,
+  formSelectMixin,
+  formCheckboxMixin,
+  formTextareaMixin,
+  formRadioMixin
 }
 
 window.MatestackUiCore = MatestackUiCore
 
-export default MatestackUiCore
+export default MatestackUiCore

data/app/lib/matestack/ui/core/has_view_context.rb

@@ -2,8 +2,10 @@ module Matestack::Ui::Core::HasViewContext
   def initialize(*args)
     super
     @view_context = @options.dig(:context, :view_context)
+    unless @view_context
+      @view_context = @options.dig(:matestack_context, :controller)&.view_context
+    end
   end
-
   def method_missing(*args, &block)
     if @view_context.respond_to? args.first
       @view_context.send(*args, &block)
@@ -11,4 +13,4 @@ module Matestack::Ui::Core::HasViewContext
       raise NameError, "NameError: undefined method or local variable `#{args.first}' for #{self.class.name}"
     end
   end
-end
+end

data/app/lib/matestack/ui/core/rendering/main_renderer.rb

@@ -61,11 +61,14 @@ module Matestack::Ui::Core::Rendering::MainRenderer
     end
   end
 
+  # needs refactoring!
+  # we shouldn't pass in the parts of the controller_instance and the instance itself
   def create_context_hash(controller_instance)
     {
       view_context: controller_instance.view_context,
       params: controller_instance.params,
-      request: controller_instance.request
+      request: controller_instance.request,
+      controller: controller_instance # if this is not included here, rails route helpers will fail with undefined method `url_options' for nil:NilClass in some cases
     }
   end
 

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

@@ -25,7 +25,6 @@ module Matestack::Ui::Core::Components
 
   require_app_path "concepts/matestack/ui/core/component/base"
   require_app_path "concepts/matestack/ui/core/component/dynamic"
-  require_app_path "concepts/matestack/ui/core/component/rerender"
   require_app_path "concepts/matestack/ui/core/component/static"
 
   require_core_component "abbr"
@@ -41,6 +40,7 @@ module Matestack::Ui::Core::Components
   require_core_component "blockquote"
   require_core_component "br"
   require_core_component "button"
+  require_core_component "cable"
   require_core_component "caption"
   require_core_component "cite"
   require_core_component "code"
@@ -120,6 +120,7 @@ module Matestack::Ui::Core::Components
   require_core_component "s"
   require_core_component "samp"
   require_core_component "section"
+  require_core_component "select"
   require_core_component "small"
   require_core_component "span"
   require_core_component "strong"
@@ -162,6 +163,7 @@ Matestack::Ui::Core::Component::Registry.register_components(
   blockquote: Matestack::Ui::Core::Blockquote::Blockquote,
   br: Matestack::Ui::Core::Br::Br,
   button: Matestack::Ui::Core::Button::Button,
+  cable: Matestack::Ui::Core::Cable::Cable,
   caption: Matestack::Ui::Core::Caption::Caption,
   cite: Matestack::Ui::Core::Cite::Cite,
   code: Matestack::Ui::Core::Code::Code,
@@ -240,6 +242,7 @@ Matestack::Ui::Core::Component::Registry.register_components(
   s: Matestack::Ui::Core::S::S,
   samp: Matestack::Ui::Core::Samp::Samp,
   section: Matestack::Ui::Core::Section::Section,
+  select: Matestack::Ui::Core::Select::Select,
   small: Matestack::Ui::Core::Small::Small,
   span: Matestack::Ui::Core::Span::Span,
   strong: Matestack::Ui::Core::Strong::Strong,

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

@@ -1,7 +1,7 @@
 module Matestack
   module Ui
     module Core
-      VERSION = '1.0.1'
+      VERSION = '1.3.2'
     end
   end
 end

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

@@ -552,19 +552,9 @@ const componentDef = {
   },
   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_3__["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_3__["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_3__["default"].$on(rerender_event.trim(), self.rerender));
-    }
+    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
     }
@@ -582,21 +572,9 @@ const componentDef = {
   beforeDestroy: function() {
     const self = this
     clearTimeout(self.hideAfterTimeout)
-    _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$off(this.componentConfig["rerender_on"], self.rerender);
-    _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"].$off(this.componentConfig["show_on"], self.show);
-    _js_event_hub__WEBPACK_IMPORTED_MODULE_3__["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_3__["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_3__["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_3__["default"].$off(rerender_event.trim(), self.rerender));
-    }
+    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"]
@@ -608,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":
@@ -623,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,
@@ -898,13 +992,155 @@ let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].compone
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
+/* 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']
+  props: ['componentConfig', 'params'],
+  methods: {
+    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));
+      }
+    },
+    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));
+      }
+    }
+  }
+
 }
 
 /* harmony default export */ __webpack_exports__["default"] = (componentMixin);
 
 
+/***/ }),
+
+/***/ "../app/concepts/matestack/ui/core/form/checkbox/checkbox.js":
+/*!*******************************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/form/checkbox/checkbox.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 _mixin__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mixin */ "../app/concepts/matestack/ui/core/form/checkbox/mixin.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"], _mixin__WEBPACK_IMPORTED_MODULE_1__["default"]],
+  data() {
+    return {};
+  }
+}
+
+let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component("matestack-ui-core-form-checkbox", componentDef);
+
+/* harmony default export */ __webpack_exports__["default"] = (componentDef);
+
+
+/***/ }),
+
+/***/ "../app/concepts/matestack/ui/core/form/checkbox/mixin.js":
+/*!****************************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/form/checkbox/mixin.js ***!
+  \****************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+const formCheckboxMixin = {
+  methods: {
+    initialize: function(){
+      const self = this
+      let data = {};
+
+      for (let key in self.$refs) {
+        let initValue = self.$refs[key]["attributes"]["init-value"];
+        let valueType = self.$refs[key]["attributes"]["value-type"];
+
+        if (key.startsWith("select.")) {
+          if (key.startsWith("select.multiple.")) {
+            if (initValue) {
+              data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
+              Object.assign(self.$parent.data, data);
+              self.afterInitialize(JSON.parse(initValue["value"]))
+            } else {
+              data[key.replace("select.multiple.", "")] = [];
+              Object.assign(self.$parent.data, data);
+              self.afterInitialize([])
+            }
+          } else {
+            if (initValue) {
+              if (valueType && valueType["value"] == "Integer") {
+                data[key.replace("select.", "")] = parseInt(initValue["value"]);
+                Object.assign(self.$parent.data, data);
+                self.afterInitialize(parseInt(initValue["value"]))
+              } else {
+
+                data[key.replace("select.", "")] = initValue["value"];
+                Object.assign(self.$parent.data, data);
+                self.afterInitialize(initValue["value"])
+              }
+            } else {
+              data[key.replace("select.", "")] = null;
+              Object.assign(self.$parent.data, data);
+              self.afterInitialize(null)
+            }
+          }
+        } else {
+          if (initValue) {
+            if(initValue["value"] === "true"){
+              data[key.replace("input.", "")] = true;
+              Object.assign(self.$parent.data, data);
+              self.afterInitialize(true)
+            }
+            if(initValue["value"] === "false"){
+              data[key.replace("input.", "")] = false;
+              Object.assign(self.$parent.data, data);
+              self.afterInitialize(false)
+            }
+          } else {
+            data[key.replace("input.", "")] = null;
+            Object.assign(self.$parent.data, data);
+            self.afterInitialize(null)
+          }
+        }
+      }
+
+      //without the timeout it's somehow not working
+      setTimeout(function () {
+        self.$forceUpdate()
+      }, 1);
+    },
+    inputChanged: function (key) {
+      this.$parent.resetErrors(key);
+      this.$forceUpdate();
+    },
+    afterInitialize: function(value){
+      // can be used in the main component for further initialization steps
+    },
+    setValue: function (value){
+      this.$parent.data[this.componentConfig["key"]] = value
+      this.$forceUpdate();
+    }
+  }
+
+}
+
+/* harmony default export */ __webpack_exports__["default"] = (formCheckboxMixin);
+
+
 /***/ }),
 
 /***/ "../app/concepts/matestack/ui/core/form/form.js":
@@ -942,9 +1178,6 @@ const componentDef = {
     initDataKey: function (key, initValue) {
       this.data[key] = initValue;
     },
-    inputChanged: function (key) {
-      this.resetErrors(key);
-    },
     updateFormValue: function (key, value) {
       this.data[key] = value;
     },
@@ -968,11 +1201,11 @@ const componentDef = {
           flat[i] = newVal;
         } else if (flat[i] instanceof File){
           flat[i] = newVal;
-          this.$refs["input."+i].value = newVal
+          this.$refs["input-component-for-"+i].value = newVal
         } else if (flat[i] instanceof Array) {
           if(flat[i][0] instanceof File){
             flat[i] = newVal
-            this.$refs["input."+i].value = newVal
+            this.$refs["input-component-for-"+i].value = newVal
           }
         } else if (typeof flat[i] === "object" && !(flat[i] instanceof Array)) {
           setProps(flat[i], newVal);
@@ -981,54 +1214,26 @@ const componentDef = {
         }
       }
     },
-    filesAdded: function (key) {
-      const dataTransfer = event.dataTransfer || event.target;
-      const files = dataTransfer.files;
-      if (event.target.attributes.multiple) {
-        this.data[key] = [];
-        for (let index in files) {
-          if (files[index] instanceof File) {
-            this.data[key].push(files[index]);
-          }
-        }
-      } else {
-        this.data[key] = files[0];
-      }
-    },
     initValues: function () {
       let self = this;
       let data = {};
       for (let key in self.$refs) {
-        let initValue = self.$refs[key]["attributes"]["init-value"];
-        let valueType = self.$refs[key]["attributes"]["value-type"];
-
-        if (key.startsWith("input.")) {
-          if (initValue) {
-            data[key.replace("input.", "")] = initValue["value"];
-          } else {
-            data[key.replace("input.", "")] = null;
-          }
+        if (key.startsWith("input-component")) {
+          self.$refs[key].initialize()
         }
-        if (key.startsWith("select.")) {
-          if (key.startsWith("select.multiple.")) {
-            if (initValue) {
-              data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
-            } else {
-              data[key.replace("select.multiple.", "")] = [];
-            }
-          } else {
-            if (initValue) {
-              if (valueType && valueType["value"] == "Integer") data[key.replace("select.", "")] = parseInt(initValue["value"]);
-              else {
-                data[key.replace("select.", "")] = initValue["value"];
-              }
-            } else {
-              data[key.replace("select.", "")] = null;
-            }
-          }
+        if (key.startsWith("textarea-component")) {
+          self.$refs[key].initialize()
+        }
+        if (key.startsWith("select-component")) {
+          self.$refs[key].initialize()
+        }
+        if (key.startsWith("radio-component")) {
+          self.$refs[key].initialize()
+        }
+        if (key.startsWith("checkbox-component")) {
+          self.$refs[key].initialize()
         }
       }
-      self.data = data;
     },
     shouldResetFormOnSuccessfulSubmit() {
       const self = this;
@@ -1230,6 +1435,432 @@ let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].compone
 /* harmony default export */ __webpack_exports__["default"] = (componentDef);
 
 
+/***/ }),
+
+/***/ "../app/concepts/matestack/ui/core/form/input/input.js":
+/*!*************************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/form/input/input.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 _mixin__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mixin */ "../app/concepts/matestack/ui/core/form/input/mixin.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"], _mixin__WEBPACK_IMPORTED_MODULE_1__["default"]],
+  data() {
+    return {};
+  }
+}
+
+let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component("matestack-ui-core-form-input", componentDef);
+
+/* harmony default export */ __webpack_exports__["default"] = (componentDef);
+
+
+/***/ }),
+
+/***/ "../app/concepts/matestack/ui/core/form/input/mixin.js":
+/*!*************************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/form/input/mixin.js ***!
+  \*************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+const formInputMixin = {
+  methods: {
+    initialize: function(){
+      const self = this
+      let data = {};
+
+      for (let key in this.$refs) {
+        let initValue = this.$refs[key]["attributes"]["init-value"];
+
+        if (initValue) {
+          data[key.replace("input.", "")] = initValue["value"];
+          Object.assign(self.$parent.data, data);
+          self.afterInitialize(initValue["value"])
+        } else {
+          data[key.replace("input.", "")] = null;
+          Object.assign(self.$parent.data, data);
+          self.afterInitialize(null)
+        }
+      }
+
+      //without the timeout it's somehow not working
+      setTimeout(function () {
+        self.$forceUpdate()
+      }, 1);
+    },
+    filesAdded: function (key) {
+      const dataTransfer = event.dataTransfer || event.target;
+      const files = dataTransfer.files;
+      if (event.target.attributes.multiple) {
+        this.$parent.data[key] = [];
+        for (let index in files) {
+          if (files[index] instanceof File) {
+            this.$parent.data[key].push(files[index]);
+          }
+        }
+      } else {
+        this.$parent.data[key] = files[0];
+      }
+    },
+    inputChanged: function (key) {
+      this.$parent.resetErrors(key);
+      this.$forceUpdate();
+    },
+    afterInitialize: function(value){
+      // can be used in the main component for further initialization steps
+    },
+    setValue: function (value){
+      this.$parent.data[this.componentConfig["key"]] = value
+      this.$forceUpdate();
+    }
+  }
+
+}
+
+/* harmony default export */ __webpack_exports__["default"] = (formInputMixin);
+
+
+/***/ }),
+
+/***/ "../app/concepts/matestack/ui/core/form/radio/mixin.js":
+/*!*************************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/form/radio/mixin.js ***!
+  \*************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+const formRadioMixin = {
+  methods: {
+    initialize: function(){
+      const self = this
+      let data = {};
+
+      for (let key in self.$refs) {
+        let initValue = self.$refs[key]["attributes"]["init-value"];
+        let valueType = self.$refs[key]["attributes"]["value-type"];
+
+        if (key.startsWith("select.")) {
+          if (key.startsWith("select.multiple.")) {
+            if (initValue) {
+              data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
+              Object.assign(self.$parent.data, data);
+              self.afterInitialize(JSON.parse(initValue["value"]))
+            } else {
+              data[key.replace("select.multiple.", "")] = [];
+              Object.assign(self.$parent.data, data);
+              self.afterInitialize([])
+            }
+          } else {
+            if (initValue) {
+              if (valueType && valueType["value"] == "Integer") {
+                data[key.replace("select.", "")] = parseInt(initValue["value"]);
+                Object.assign(self.$parent.data, data);
+                self.afterInitialize(parseInt(initValue["value"]))
+              } else {
+                data[key.replace("select.", "")] = initValue["value"];
+                Object.assign(self.$parent.data, data);
+                self.afterInitialize(initValue["value"])
+              }
+            } else {
+              data[key.replace("select.", "")] = null;
+              Object.assign(self.$parent.data, data);
+              self.afterInitialize(null)
+            }
+          }
+        }
+      }
+
+      //without the timeout it's somehow not working
+      setTimeout(function () {
+        self.$forceUpdate();
+      }, 1);
+    },
+    inputChanged: function (key) {
+      this.$parent.resetErrors(key);
+      this.$forceUpdate();
+    },
+    afterInitialize: function(value){
+      // can be used in the main component for further initialization steps
+    },
+    setValue: function (value){
+      this.$parent.data[this.componentConfig["key"]] = value
+      this.$forceUpdate();
+    }
+  }
+
+}
+
+/* harmony default export */ __webpack_exports__["default"] = (formRadioMixin);
+
+
+/***/ }),
+
+/***/ "../app/concepts/matestack/ui/core/form/radio/radio.js":
+/*!*************************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/form/radio/radio.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 _mixin__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mixin */ "../app/concepts/matestack/ui/core/form/radio/mixin.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"], _mixin__WEBPACK_IMPORTED_MODULE_1__["default"]],
+  data() {
+    return {};
+  }
+}
+
+let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component("matestack-ui-core-form-radio", componentDef);
+
+/* harmony default export */ __webpack_exports__["default"] = (componentDef);
+
+
+/***/ }),
+
+/***/ "../app/concepts/matestack/ui/core/form/select/mixin.js":
+/*!**************************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/form/select/mixin.js ***!
+  \**************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+const formSelectMixin = {
+  methods: {
+    initialize: function(){
+      const self = this
+      let data = {};
+
+      for (let key in self.$refs) {
+        let initValue = self.$refs[key]["attributes"]["init-value"];
+        let valueType = self.$refs[key]["attributes"]["value-type"];
+
+        if (key.startsWith("select.")) {
+          if (key.startsWith("select.multiple.")) {
+            if (initValue) {
+              data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
+              self.afterInitialize(JSON.parse(initValue["value"]))
+            } else {
+              data[key.replace("select.multiple.", "")] = [];
+              self.afterInitialize([])
+            }
+          } else {
+            if (initValue) {
+              if (valueType && valueType["value"] == "Integer") {
+                data[key.replace("select.", "")] = parseInt(initValue["value"]);
+                self.afterInitialize(parseInt(initValue["value"]))
+              } else {
+                data[key.replace("select.", "")] = initValue["value"];
+                self.afterInitialize(initValue["value"])
+              }
+            } else {
+              data[key.replace("select.", "")] = null;
+              self.afterInitialize(null)
+            }
+          }
+        }
+      }
+
+      //without the timeout it's somehow not working
+      setTimeout(function () {
+        Object.assign(self.$parent.data, data);
+        self.$forceUpdate()
+      }, 1);
+    },
+    inputChanged: function (key) {
+      this.$parent.resetErrors(key);
+      this.$forceUpdate();
+    },
+    afterInitialize: function(value){
+      // can be used in the main component for further initialization steps
+    },
+    setValue: function (value){
+      this.$parent.data[this.componentConfig["key"]] = value
+      this.$forceUpdate();
+    }
+  }
+
+}
+
+/* harmony default export */ __webpack_exports__["default"] = (formSelectMixin);
+
+
+/***/ }),
+
+/***/ "../app/concepts/matestack/ui/core/form/select/select.js":
+/*!***************************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/form/select/select.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 _mixin__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mixin */ "../app/concepts/matestack/ui/core/form/select/mixin.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"], _mixin__WEBPACK_IMPORTED_MODULE_1__["default"]],
+  data() {
+    return {};
+  }
+}
+
+let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component("matestack-ui-core-form-select", componentDef);
+
+/* harmony default export */ __webpack_exports__["default"] = (componentDef);
+
+
+/***/ }),
+
+/***/ "../app/concepts/matestack/ui/core/form/submit/submit.js":
+/*!***************************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/form/submit/submit.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");
+
+
+
+
+const componentDef = {
+  mixins: [_component_component__WEBPACK_IMPORTED_MODULE_1__["default"]],
+  data() {
+    return {};
+  },
+  methods: {
+    loading: function(){
+      return this.$parent.loading;
+    }
+  }
+}
+
+let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component("matestack-ui-core-form-submit", componentDef);
+
+/* harmony default export */ __webpack_exports__["default"] = (componentDef);
+
+
+/***/ }),
+
+/***/ "../app/concepts/matestack/ui/core/form/textarea/mixin.js":
+/*!****************************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/form/textarea/mixin.js ***!
+  \****************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+const formTextareaMixin = {
+  methods: {
+    initialize: function(){
+      const self = this
+      let data = {};
+
+      for (let key in this.$refs) {
+        let initValue = this.$refs[key]["attributes"]["init-value"];
+
+        if (initValue) {
+          data[key.replace("input.", "")] = initValue["value"];
+          Object.assign(self.$parent.data, data);
+          self.afterInitialize(initValue["value"])
+        } else {
+          data[key.replace("input.", "")] = null;
+          Object.assign(self.$parent.data, data);
+          self.afterInitialize(null)
+        }
+      }
+
+      //without the timeout it's somehow not working
+      setTimeout(function () {
+        self.$forceUpdate()
+      }, 1);
+    },
+    inputChanged: function (key) {
+      this.$parent.resetErrors(key);
+      this.$forceUpdate();
+    },
+    afterInitialize: function(value){
+      // can be used in the main component for further initialization steps
+    },
+    setValue: function (value){
+      this.$parent.data[this.componentConfig["key"]] = value
+      this.$forceUpdate();
+    }
+  }
+
+}
+
+/* harmony default export */ __webpack_exports__["default"] = (formTextareaMixin);
+
+
+/***/ }),
+
+/***/ "../app/concepts/matestack/ui/core/form/textarea/textarea.js":
+/*!*******************************************************************!*\
+  !*** ../app/concepts/matestack/ui/core/form/textarea/textarea.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 _mixin__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./mixin */ "../app/concepts/matestack/ui/core/form/textarea/mixin.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"], _mixin__WEBPACK_IMPORTED_MODULE_1__["default"]],
+  data() {
+    return {};
+  }
+}
+
+let component = vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"].component("matestack-ui-core-form-textarea", componentDef);
+
+/* harmony default export */ __webpack_exports__["default"] = (componentDef);
+
+
 /***/ }),
 
 /***/ "../app/concepts/matestack/ui/core/isolated/isolated.js":
@@ -1371,19 +2002,31 @@ __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_content__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../page/content/content */ "../app/concepts/matestack/ui/core/page/content/content.js");
-/* harmony import */ var _toggle_toggle__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../toggle/toggle */ "../app/concepts/matestack/ui/core/toggle/toggle.js");
-/* harmony import */ var _app_store__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../app/store */ "../app/concepts/matestack/ui/core/app/store.js");
-/* harmony import */ var _component_component__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../component/component */ "../app/concepts/matestack/ui/core/component/component.js");
-/* harmony import */ var _component_anonym_dynamic_component__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../component/anonym-dynamic-component */ "../app/concepts/matestack/ui/core/component/anonym-dynamic-component.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 _isolated_isolated__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../isolated/isolated */ "../app/concepts/matestack/ui/core/isolated/isolated.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 _form_input_input__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../form/input/input */ "../app/concepts/matestack/ui/core/form/input/input.js");
+/* harmony import */ var _form_input_mixin__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../form/input/mixin */ "../app/concepts/matestack/ui/core/form/input/mixin.js");
+/* harmony import */ var _form_select_select__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../form/select/select */ "../app/concepts/matestack/ui/core/form/select/select.js");
+/* harmony import */ var _form_select_mixin__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../form/select/mixin */ "../app/concepts/matestack/ui/core/form/select/mixin.js");
+/* harmony import */ var _form_radio_radio__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../form/radio/radio */ "../app/concepts/matestack/ui/core/form/radio/radio.js");
+/* harmony import */ var _form_radio_mixin__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../form/radio/mixin */ "../app/concepts/matestack/ui/core/form/radio/mixin.js");
+/* harmony import */ var _form_checkbox_checkbox__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../form/checkbox/checkbox */ "../app/concepts/matestack/ui/core/form/checkbox/checkbox.js");
+/* harmony import */ var _form_checkbox_mixin__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../form/checkbox/mixin */ "../app/concepts/matestack/ui/core/form/checkbox/mixin.js");
+/* harmony import */ var _form_textarea_textarea__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../form/textarea/textarea */ "../app/concepts/matestack/ui/core/form/textarea/textarea.js");
+/* harmony import */ var _form_textarea_mixin__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../form/textarea/mixin */ "../app/concepts/matestack/ui/core/form/textarea/mixin.js");
+/* harmony import */ var _form_submit_submit__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../form/submit/submit */ "../app/concepts/matestack/ui/core/form/submit/submit.js");
+/* harmony import */ var _onclick_onclick__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../onclick/onclick */ "../app/concepts/matestack/ui/core/onclick/onclick.js");
+/* harmony import */ var _collection_content_content__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../collection/content/content */ "../app/concepts/matestack/ui/core/collection/content/content.js");
+/* harmony import */ var _collection_filter_filter__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ../collection/filter/filter */ "../app/concepts/matestack/ui/core/collection/filter/filter.js");
+/* harmony import */ var _collection_order_order__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../collection/order/order */ "../app/concepts/matestack/ui/core/collection/order/order.js");
+/* harmony import */ var _isolated_isolated__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ../isolated/isolated */ "../app/concepts/matestack/ui/core/isolated/isolated.js");
 
 
 
@@ -1396,6 +2039,18 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -1416,7 +2071,7 @@ document.addEventListener('DOMContentLoaded', () => {
   matestackUiApp = new vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"]({
       el: "#matestack-ui",
       mixins: [vue_turbolinks__WEBPACK_IMPORTED_MODULE_1__["turbolinksAdapterMixin"]],
-      store: _app_store__WEBPACK_IMPORTED_MODULE_6__["default"]
+      store: _app_store__WEBPACK_IMPORTED_MODULE_7__["default"]
   })
 })
 
@@ -1426,14 +2081,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_6__["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",
       mixins: [vue_turbolinks__WEBPACK_IMPORTED_MODULE_1__["turbolinksAdapterMixin"]],
-      store: _app_store__WEBPACK_IMPORTED_MODULE_6__["default"]
+      store: _app_store__WEBPACK_IMPORTED_MODULE_7__["default"]
   })
 })
 
@@ -1767,9 +2422,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var axios__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(axios__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _app_concepts_matestack_ui_core_js_event_hub__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../app/concepts/matestack/ui/core/js/event-hub */ "../app/concepts/matestack/ui/core/js/event-hub.js");
 /* harmony import */ var _app_concepts_matestack_ui_core_component_component__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../app/concepts/matestack/ui/core/component/component */ "../app/concepts/matestack/ui/core/component/component.js");
-/* harmony import */ var _app_concepts_matestack_ui_core_js_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../app/concepts/matestack/ui/core/js/core */ "../app/concepts/matestack/ui/core/js/core.js");
-/* harmony import */ var _styles_index_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./styles/index.scss */ "../app/javascript/matestack-ui-core/styles/index.scss");
-/* harmony import */ var _styles_index_scss__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_styles_index_scss__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _app_concepts_matestack_ui_core_form_input_mixin__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../app/concepts/matestack/ui/core/form/input/mixin */ "../app/concepts/matestack/ui/core/form/input/mixin.js");
+/* harmony import */ var _app_concepts_matestack_ui_core_form_select_mixin__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../app/concepts/matestack/ui/core/form/select/mixin */ "../app/concepts/matestack/ui/core/form/select/mixin.js");
+/* harmony import */ var _app_concepts_matestack_ui_core_form_radio_mixin__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../app/concepts/matestack/ui/core/form/radio/mixin */ "../app/concepts/matestack/ui/core/form/radio/mixin.js");
+/* harmony import */ var _app_concepts_matestack_ui_core_form_checkbox_mixin__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../app/concepts/matestack/ui/core/form/checkbox/mixin */ "../app/concepts/matestack/ui/core/form/checkbox/mixin.js");
+/* harmony import */ var _app_concepts_matestack_ui_core_form_textarea_mixin__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../app/concepts/matestack/ui/core/form/textarea/mixin */ "../app/concepts/matestack/ui/core/form/textarea/mixin.js");
+/* harmony import */ var _app_concepts_matestack_ui_core_js_core__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../app/concepts/matestack/ui/core/js/core */ "../app/concepts/matestack/ui/core/js/core.js");
+/* harmony import */ var _styles_index_scss__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./styles/index.scss */ "../app/javascript/matestack-ui-core/styles/index.scss");
+/* harmony import */ var _styles_index_scss__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(_styles_index_scss__WEBPACK_IMPORTED_MODULE_11__);
 
 
  // Import from app/concepts/matestack/ui/core:
@@ -1778,12 +2438,22 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
+
+
+
 var MatestackUiCore = {
   Vue: vue_dist_vue_esm__WEBPACK_IMPORTED_MODULE_0__["default"],
   Vuex: vuex__WEBPACK_IMPORTED_MODULE_1__["default"],
   axios: axios__WEBPACK_IMPORTED_MODULE_2___default.a,
   matestackEventHub: _app_concepts_matestack_ui_core_js_event_hub__WEBPACK_IMPORTED_MODULE_3__["default"],
-  componentMixin: _app_concepts_matestack_ui_core_component_component__WEBPACK_IMPORTED_MODULE_4__["default"]
+  componentMixin: _app_concepts_matestack_ui_core_component_component__WEBPACK_IMPORTED_MODULE_4__["default"],
+  formInputMixin: _app_concepts_matestack_ui_core_form_input_mixin__WEBPACK_IMPORTED_MODULE_5__["default"],
+  formSelectMixin: _app_concepts_matestack_ui_core_form_select_mixin__WEBPACK_IMPORTED_MODULE_6__["default"],
+  formCheckboxMixin: _app_concepts_matestack_ui_core_form_checkbox_mixin__WEBPACK_IMPORTED_MODULE_8__["default"],
+  formTextareaMixin: _app_concepts_matestack_ui_core_form_textarea_mixin__WEBPACK_IMPORTED_MODULE_9__["default"],
+  formRadioMixin: _app_concepts_matestack_ui_core_form_radio_mixin__WEBPACK_IMPORTED_MODULE_7__["default"]
 };
 window.MatestackUiCore = MatestackUiCore;
 /* harmony default export */ __webpack_exports__["default"] = (MatestackUiCore);