matestack-ui-core 2.0.0 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a187da8c82641bf2c77bbb1b4a43b0b7e474d5870435ac1163cc28d09575ca48
-  data.tar.gz: 4337c9c2a671b9597fda5b88992bde5dffd89f945719f8e19991802bd98a23fa
+  metadata.gz: 86a4a5afb13f1c3a954fe71db9220e734654eb451c329858d3f890ee9db148e4
+  data.tar.gz: 1035ccf0e2f972d9ad916bbd681059713a8e5c47dfee992d0ad1eefab453f345
 SHA512:
-  metadata.gz: 46cb76c518e3146058dd8b27bc20e4699196d1321abfa3fa019a0809e3b7c62b46769a286300620848a465cbdcfd04607be1dbe6e7a99930490c80980031dcd3
-  data.tar.gz: f393f4268fb80477eacd18d117555cb605782f24ce6c5cf6aa4aa74c518ca94a9897ebd1bb1ed4b7edc4d81ac9d3f2d707ff3345462f0a77ec3b6a15646a4296
+  metadata.gz: 362ded6f509688c84767a98241d7c5f5ff6d4d102196a42fee213b421e966c05ac229d0f0ed732c1939135c79da816dcc07f262502d1fc409e8808a53817cdf9
+  data.tar.gz: 4eb1ec667b7efa39e44fc7a853f898d45db1b2d9d2060a2900a24a5aa738f16fd4a20e225c5bb8c1c7c2cb5717596fa11845be82b2581c151a28048356b52c72

data/README.md

@@ -9,7 +9,7 @@
 # matestack-ui-core | UI in pure Ruby
 
 ----
-Version 2.0.0 was released on the 12th of April and proudly presented at RailsConf. Click here for more details
+Version 2.0.0 was released on the 12th of April and proudly presented at RailsConf.
 
 Most important changes:
 
@@ -19,6 +19,8 @@ Most important changes:
 - Improved core code readability/maintainability
 ----
 
+[<img src="https://img.youtube.com/vi/bwsVgCb97v0/0.jpg" width="350">](https://www.youtube.com/watch?v=bwsVgCb97v0)
+
 Boost your productivity & easily create component based web UIs in pure Ruby.
 Reactivity included if desired.
 
@@ -26,8 +28,6 @@ Reactivity included if desired.
 
 You end up writing 50% less code while increasing productivity, maintainability and developer happiness. Work with pure Ruby. If necessary, extend with pure JavaScript. No Opal involved.
 
-[<img src="https://img.youtube.com/vi/Mue5gs6Wtq4/0.jpg" width="350">](https://www.youtube.com/watch?v=Mue5gs6Wtq4)
-
 The main goals are:
 
 - More maintainable UI code, using a component-based structure written in Ruby
@@ -66,7 +66,7 @@ Documentation can be found [here](https://docs.matestack.io)
 
 ## Getting started
 
-A getting started guide can be found [here](https://docs.matestack.io/getting-started/tutorial)
+A getting started guide can be found [here](https://docs.matestack.io/getting-started/quick-start)
 
 ## Changelog
 

data/lib/matestack/ui/core.rb

@@ -49,6 +49,8 @@ require "#{vue_js_base_path}/components/form/textarea"
 require "#{vue_js_base_path}/components/form/checkbox"
 require "#{vue_js_base_path}/components/form/radio"
 require "#{vue_js_base_path}/components/form/select"
+require "#{vue_js_base_path}/components/form/fields_for_remove_item"
+require "#{vue_js_base_path}/components/form/fields_for_add_item"
 require "#{vue_js_base_path}/components/collection/helper"
 require "#{vue_js_base_path}/components/collection/content"
 require "#{vue_js_base_path}/components/collection/filter"

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

@@ -12,6 +12,8 @@ module Matestack
         attr_accessor :html_tag, :text, :options, :parent, :escape, :bind_to_parent
 
         def initialize(html_tag = nil, text = nil, options = {}, &block)
+          return unless render?
+
           self.bind_to_parent = ([:without_parent].include?(html_tag) ? false : true)
           self.slots = self.options.delete(:slots) if self.options
           # extract_options(text, options) is called in properties
@@ -26,6 +28,12 @@ module Matestack
           self
         end
 
+        # can be optionally overwritten in subclass 
+        # in order to conditionally render the component
+        def render?
+          true
+        end
+
         # check if text is given and set text and options accordingly
         def extract_options(text, options)
           if text.is_a? Hash

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

@@ -46,13 +46,7 @@ module Matestack
         def component_attributes
           {
             is: 'matestack-ui-core-page-content',
-            ref: 'some-id',
             ':params': params.to_json,
-            ':component-config': {
-              #TODO Remove?!
-              show_on: 'a-event',
-              hide_on: 'test'
-            }.to_json,
             'inline-template': true
           }
         end

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

@@ -1,7 +1,7 @@
 module Matestack
   module Ui
     module Core
-      VERSION = '2.0.0'
+      VERSION = '2.1.0'
     end
   end
 end

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

@@ -31,6 +31,23 @@ module Matestack
              Matestack::Ui::VueJs::Components::Form::Form.(text, options, &block)
           end
 
+          def form_fields_for(text=nil, options=nil, &block)
+            # in order to provide a more intuitiv API while calling the default
+            # form, we transform the arguments a bit:
+            options[:for] = text
+            options[:fields_for] = options.delete(:key)
+            text = nil
+            Matestack::Ui::VueJs::Components::Form::Form.(text, options, &block)
+          end
+
+          def form_fields_for_remove_item(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Form::FieldsForRemoveItem.(text, options, &block)
+          end
+
+          def form_fields_for_add_item(text=nil, options=nil, &block)
+             Matestack::Ui::VueJs::Components::Form::FieldsForAddItem.(text, options, &block)
+          end
+
           def form_input(text=nil, options=nil, &block)
              Matestack::Ui::VueJs::Components::Form::Input.(text, options, &block)
           end

data/lib/matestack/ui/vue_js/components/collection/filter.js

@@ -11,7 +11,9 @@ const componentDef = {
       var url;
       var filter = this.data
       for (var key in this.data) {
-        url = queryParamsHelper.updateQueryParams(this.props["id"] + "-filter-" + key, JSON.stringify(this.data[key]), url)
+        if(this.data[key] != null){
+          url = queryParamsHelper.updateQueryParams(this.props["id"] + "-filter-" + key, JSON.stringify(this.data[key]), url)
+        }
       }
       url = queryParamsHelper.updateQueryParams(this.props["id"] + "-offset", 0, url)
       window.history.pushState({matestackApp: true, url: url}, null, url);
@@ -22,7 +24,6 @@ const componentDef = {
       for (var key in this.data) {
         url = queryParamsHelper.updateQueryParams(this.props["id"] + "-filter-" + key, null, url)
         this.data[key] = null;
-        this.$forceUpdate();
       }
       this.initValues();
       window.history.pushState({matestackApp: true, url: url}, null, url);
@@ -34,7 +35,7 @@ const componentDef = {
     var queryParamsObject = queryParamsHelper.queryParamsToObject()
     Object.keys(queryParamsObject).forEach(function(key){
       if (key.startsWith(self.props["id"] + "-filter-")){
-        self.data[key.replace(self.props["id"] + "-filter-", "")] = queryParamsObject[key]
+        self.data[key.replace(self.props["id"] + "-filter-", "")] = JSON.parse(queryParamsObject[key])
       }
     })
   }

data/lib/matestack/ui/vue_js/components/form/base.rb

@@ -34,7 +34,11 @@ module Matestack
             end
 
             def id
-              ctx.id || key
+              if ctx.id.present?
+                "'#{ctx.id}'"
+              else
+                "'#{key}'+$parent.nestedFormRuntimeId"
+              end
             end
 
             def multiple
@@ -50,12 +54,12 @@ module Matestack
             def attributes
               (options || {}).merge({
                 ref: "input.#{attribute_key}",
-                id: id,
+                ":id": id,
                 type: ctx.type,
                 multiple: ctx.multiple,
                 placeholder: ctx.placeholder,
                 '@change': change_event,
-                'init-value': init_value || (ctx.multiple ? [] : nil),
+                'init-value': init_value,
                 'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
               }).tap do |attrs|
                 attrs[:"#{v_model_type}"] = input_key unless type == :file
@@ -95,7 +99,7 @@ module Matestack
                 item.is_a?(Integer) ? 'v-model.number' : 'v-model'
               end
             end
-          
+
             # set value-type "Integer" for all numeric init values or options
             def value_type(item=nil)
               if item.nil?
@@ -164,4 +168,4 @@ module Matestack
       end
     end
   end
-end
+end

data/lib/matestack/ui/vue_js/components/form/checkbox.rb

@@ -37,13 +37,13 @@ module Matestack
             def render_checkbox_options
               checkbox_options.to_a.each do |item|
                 input checkbox_attributes(item)
-                label item_label(item), for: item_id(item)
+                label item_label(item), ":for": item_id(item)
               end
             end
 
             def checkbox_attributes(item)
               {
-                id: item_id(item),
+                ":id": item_id(item),
                 type: :checkbox,
                 name: item_label(item),
                 value: item_value(item),
@@ -57,9 +57,9 @@ module Matestack
             end
 
             def render_true_false_checkbox
-              input true_false_checkbox_attributes.merge(type: :hidden, id: nil, value: 0)
-              input true_false_checkbox_attributes.merge(type: :checkbox, id: item_id(1))
-              label input_label, for: item_id(1) if input_label
+              input true_false_checkbox_attributes.merge(type: :hidden, ":id": nil, value: 0)
+              input true_false_checkbox_attributes.merge(type: :checkbox, ":id": item_id(1))
+              label input_label, ":for": item_id(1) if input_label
             end
 
             def true_false_checkbox_attributes
@@ -88,13 +88,13 @@ module Matestack
             def item_value(item)
               item.is_a?(Array) ? item.last : item
             end
-            
+
             def item_label(item)
               item.is_a?(Array) ? item.first : item
             end
 
             def item_id(item)
-              "#{id}_#{item_value(item).to_s.gsub(" ", '_')}"
+              "#{id}+'_#{item_value(item).to_s.gsub(" ", '_')}'"
             end
 
           end
@@ -102,4 +102,4 @@ module Matestack
       end
     end
   end
-end
+end

data/lib/matestack/ui/vue_js/components/form/checkbox_mixin.js

@@ -10,71 +10,58 @@ const formCheckboxMixin = {
 
         if (key.startsWith("select.")) {
           if (key.startsWith("select.multiple.")) {
+            self.$set(self.$parent.data, key.replace("select.multiple.", ""), null)
             if (initValue) {
-              data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
-              Object.assign(self.$parent.data, data);
+              self.setValue(JSON.parse(initValue["value"]));
               self.afterInitialize(JSON.parse(initValue["value"]))
             } else {
-              data[key.replace("select.multiple.", "")] = [];
-              Object.assign(self.$parent.data, data);
-              self.afterInitialize([])
+              self.setValue([]);
+              self.afterInitialize([]);
             }
           } else {
+            self.$set(self.$parent.data, key.replace("select.", ""), null)
             if (initValue) {
               if (valueType && valueType["value"] == "Integer") {
-                data[key.replace("select.", "")] = parseInt(initValue["value"]);
-                Object.assign(self.$parent.data, data);
+                self.setValue(parseInt(initValue["value"]));
                 self.afterInitialize(parseInt(initValue["value"]))
               } else {
-
-                data[key.replace("select.", "")] = initValue["value"];
-                Object.assign(self.$parent.data, data);
+                self.setValue(initValue["value"]);
                 self.afterInitialize(initValue["value"])
               }
             } else {
-              data[key.replace("select.", "")] = null;
-              Object.assign(self.$parent.data, data);
+              self.setValue(null);
               self.afterInitialize(null)
             }
           }
         } else {
+          self.$set(self.$parent.data, key.replace("input.", ""), null)
           if (initValue) {
             if(initValue["value"] === "true"){
-              data[key.replace("input.", "")] = true;
-              Object.assign(self.$parent.data, data);
+              self.setValue(true);
               self.afterInitialize(true)
             }
             if(initValue["value"] === "false"){
-              data[key.replace("input.", "")] = false;
-              Object.assign(self.$parent.data, data);
+              self.setValue(false);
               self.afterInitialize(false)
             }
           } else {
-            data[key.replace("input.", "")] = null;
-            Object.assign(self.$parent.data, data);
+            self.setValue(null);
             self.afterInitialize(null)
           }
         }
       }
-
-      //without the timeout it's somehow not working
-      setTimeout(function () {
-        self.$parent.$forceUpdate();
-        self.$forceUpdate();
-      }, 1);
     },
     inputChanged: function (key) {
+      if (this.$parent.isNestedForm){
+        this.$parent.data["_destroy"] = false;
+      }
       this.$parent.resetErrors(key);
-      this.$parent.$forceUpdate();
-      this.$forceUpdate();
     },
     afterInitialize: function(value){
       // can be used in the main component for further initialization steps
     },
     setValue: function (value){
       this.$parent.data[this.props["key"]] = value
-      this.$parent.$forceUpdate();
-      this.$forceUpdate();
     }
   }
 

data/lib/matestack/ui/vue_js/components/form/fields_for_add_item.rb

@@ -0,0 +1,35 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class FieldsForAddItem < Matestack::Ui::Component
+
+            required :key
+
+            required :prototype
+
+            attr_accessor :prototype_template_json
+
+            def create_children(&block)
+              # first render prototype_template_json
+              self.prototype_template_json = context.prototype.call().to_json
+              # delete from children in order not to render the prototype
+              self.children.shift
+              super
+            end
+
+            def response
+              div id: "prototype-template-for-#{context.key}", "v-pre": true, data: { ":template":  self.prototype_template_json }
+              Matestack::Ui::Core::Base.new('v-runtime-template', ':template': "nestedFormRuntimeTemplates['#{context.key}']")
+              a class: 'matestack-ui-core-form-fields-for-add-item', "@click.prevent": "addItem('#{context.key}')" do
+                yield if block_given?
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/form/fields_for_remove_item.rb

@@ -0,0 +1,19 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class FieldsForRemoveItem < Matestack::Ui::Component
+
+            def response
+              a class: 'matestack-ui-core-form-fields-for-remove-item', "@click.prevent": "removeItem()" do
+                yield if block_given?
+              end
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

data/lib/matestack/ui/vue_js/components/form/form.js

@@ -1,5 +1,7 @@
 import Vue from "vue/dist/vue.esm";
 import Vuex from "vuex";
+import VRuntimeTemplate from "v-runtime-template"
+
 import axios from "axios";
 
 import matestackEventHub from "../../event_hub";
@@ -11,7 +13,15 @@ const componentDef = {
     return {
       data: {},
       errors: {},
-      loading: false
+      loading: false,
+      nestedForms: {},
+      isNestedForm: false,
+      hideNestedForm: false,
+      nestedFormRuntimeTemplates: {},
+      nestedFormRuntimeTemplateDomElements: {},
+      deletedNestedForms: {},
+      nestedFormRuntimeId: "",
+      nestedFormServerErrorIndex: "",
     };
   },
   methods: {
@@ -32,31 +42,123 @@ const componentDef = {
     },
     resetErrors: function (key) {
       if (this.errors[key]) {
-        this.errors[key] = null;
+        delete this.errors[key];
+        Vue.set(this.errors);
+      }
+      if (this.isNestedForm){
+        var serverErrorKey = this.props["fields_for"].replace("_attributes", "")+"["+this.nestedFormServerErrorIndex+"]."+key
+        if (this.$parent.errors[serverErrorKey]) {
+          delete this.$parent.errors[serverErrorKey];
+          Vue.set(this.$parent.errors);
+        }
       }
     },
-    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-component-for-"+i].value = newVal
-        } else if (flat[i] instanceof Array) {
-          if(flat[i][0] instanceof File){
-            flat[i] = newVal
-            this.$refs["input-component-for-"+i].value = newVal
+    setErrors: function(errors){
+      this.errors = errors;
+    },
+    setNestedFormServerErrorIndex: function(value){
+      this.nestedFormServerErrorIndex = value;
+    },
+    setErrorKey: function(key, value){
+      Vue.set(this.errors, key, value);
+    },
+    flushErrors: function(key, value){
+      this.errors = {};
+    },
+    setNestedFormsError: function(errors){
+      let self = this;
+      Object.keys(errors).forEach(function(errorKey){
+        if (errorKey.includes(".")){
+          let childErrorKey = errorKey.split(".")[1]
+          let childModelName = errorKey.split(".")[0].split("[")[0]
+          let childModelIndex = errorKey.split(".")[0].split("[")[1].split("]")[0]
+          let mappedChildModelIndex = self.mapToNestedForms(parseInt(childModelIndex), childModelName+"_attributes")
+          self.nestedForms[childModelName+"_attributes"][mappedChildModelIndex].setNestedFormServerErrorIndex(parseInt(childModelIndex))
+          self.nestedForms[childModelName+"_attributes"][mappedChildModelIndex].setErrorKey(childErrorKey, errors[errorKey])
+        }
+      })
+    },
+    mapToNestedForms: function(serverIndex, nestedFormKey){
+      var primaryKey;
+      if(this.props["primary_key"] != undefined){
+        primaryKey = this.props["primary_key"];
+      }else{
+        primaryKey = "id";
+      }
+
+      var formIdMap = []
+      var childModelKey = 0;
+      while(this.data[nestedFormKey].length > childModelKey){
+        var ignore = this.data[nestedFormKey][childModelKey]["_destroy"] == true && this.data[nestedFormKey][childModelKey][primaryKey] == null
+        if(!ignore){
+          formIdMap.push(childModelKey)
+        }
+        childModelKey++;
+      }
+
+      return formIdMap[serverIndex];
+    },
+    resetNestedForms: function(){
+      var self = this;
+      Object.keys(self.nestedForms).forEach(function(childModelKey){
+        self.nestedForms[childModelKey].forEach(function(nestedFormInstance){
+          if(nestedFormInstance.data["_destroy"] == true){
+            var destroyed = true;
           }
-        } else if (typeof flat[i] === "object" && !(flat[i] instanceof Array)) {
-          setProps(flat[i], newVal);
-        } else {
-          flat[i] = newVal;
+          nestedFormInstance.initValues()
+          console.log(nestedFormInstance.data)
+          Vue.set(nestedFormInstance.data)
+          if(destroyed){
+            nestedFormInstance.hideNestedForm = true
+            Vue.set(nestedFormInstance.data, "_destroy", true)
+          }
+        })
+      })
+    },
+    removeItem: function(){
+      Vue.set(this.data, "_destroy", true)
+      this.hideNestedForm = true;
+      var id = parseInt(this.nestedFormRuntimeId.replace("_"+this.props["fields_for"]+"_child_", ""));
+      this.$parent.deletedNestedForms[this.props["fields_for"]].push(id);
+      var serverErrorKey = this.props["fields_for"].replace("_attributes", "")+"["+this.nestedFormServerErrorIndex+"]."
+      var self = this;
+      Object.keys(self.$parent.errors).forEach(function(errorKey){
+        if (errorKey.lastIndexOf(serverErrorKey, 0) == 0) {
+          delete self.$parent.errors[errorKey];
+          Vue.set(self.$parent.errors)
         }
+      });
+    },
+    addItem: function(key){
+      var templateString = JSON.parse(this.$el.querySelector('#prototype-template-for-'+key).dataset[":template"])
+      if (this.nestedFormRuntimeTemplateDomElements[key] == null){
+        var dom_elem = document.createElement('div')
+        dom_elem.innerHTML = templateString
+        var existingItemsCount;
+        if (this.nestedForms[key] == undefined){
+          existingItemsCount = 0
+        }else{
+          existingItemsCount = this.nestedForms[key].length
+        }
+        dom_elem.querySelector('.matestack-form-fields-for').id = key+"_child_"+existingItemsCount
+        Vue.set(this.nestedFormRuntimeTemplateDomElements, key, dom_elem)
+        Vue.set(this.nestedFormRuntimeTemplates, key, this.nestedFormRuntimeTemplateDomElements[key].outerHTML)
+      }else{
+        var dom_elem = document.createElement('div')
+        dom_elem.innerHTML = templateString
+        var existingItemsCount = this.nestedForms[key].length
+        dom_elem.querySelector('.matestack-form-fields-for').id = key+"_child_"+existingItemsCount
+        this.nestedFormRuntimeTemplateDomElements[key].insertAdjacentHTML(
+          'beforeend',
+          dom_elem.innerHTML
+        )
+        Vue.set(this.nestedFormRuntimeTemplates, key, this.nestedFormRuntimeTemplateDomElements[key].outerHTML)
       }
     },
     initValues: function () {
       let self = this;
       let data = {};
+
       for (let key in self.$refs) {
         if (key.startsWith("input-component")) {
           self.$refs[key].initialize()
@@ -75,6 +177,7 @@ const componentDef = {
         }
       }
     },
+
     shouldResetFormOnSuccessfulSubmit() {
       const self = this;
       if (self.props["success"] != undefined && self.props["success"]["reset"] != undefined) {
@@ -93,6 +196,9 @@ const componentDef = {
     },
     perform: function(){
       const self = this
+      if (self.props["fields_for"] != null) {
+        return;
+      }
       var form = self.$el.tagName == 'FORM' ? self.$el : self.$el.querySelector('form');
       if(form.checkValidity()){
         self.loading = true;
@@ -110,29 +216,55 @@ const componentDef = {
         matestackEventHub.$emit('static_form_errors');
       }
     },
+    transformToFormData: function (formData, dataNode, parentKey=null) {
+      var self = this;
+      for (let key in dataNode) {
+        if (key.endsWith("[]")) {
+          for (let i in dataNode[key]) {
+            let file = dataNode[key][i];
+            if (parentKey != null) {
+              formData.append(self.props["for"] + parentKey + "[" + key.slice(0, -2) + "][]", file);
+            } else {
+              formData.append(self.props["for"] + "[" + key.slice(0, -2) + "][]", file);
+            }
+          }
+        } else {
+          if (Array.isArray(dataNode[key])){
+            dataNode[key].forEach(function(item, index){
+              if (parentKey != null) {
+                let _key = parentKey + "[" + key + "]" + "[]";
+                formData = self.transformToFormData(formData, item, _key)
+              } else {
+                let _key = "[" + key + "]" + "[]";
+                formData = self.transformToFormData(formData, item, _key)
+              }
+            })
+          } else {
+            if (dataNode[key] != null){
+              if (parentKey != null) {
+                formData.append(self.props["for"] + parentKey + "[" + key + "]", dataNode[key]);
+              } else {
+                formData.append(self.props["for"] + "[" + key + "]", dataNode[key]);
+              }
+            }
+          }
+        }
+      }
+
+      return formData;
+    },
     sendRequest: function(){
       const self = this;
       let payload = {};
       payload[self.props["for"]] = self.data;
       let axios_config = {};
       if (self.props["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.props["for"] + "[" + key.slice(0, -2) + "][]", file);
-            }
-          } else {
-            if (self.data[key] != null){
-              form_data.append(self.props["for"] + "[" + key + "]", self.data[key]);
-            }
-          }
-        }
+        let formData = new FormData();
+        formData = this.transformToFormData(formData, this.data)
         axios_config = {
           method: self.props["method"],
           url: self.props["submit_path"],
-          data: form_data,
+          data: formData,
           headers: {
             "X-CSRF-Token": document.getElementsByName("csrf-token")[0].getAttribute("content"),
             "Content-Type": "multipart/form-data",
@@ -202,16 +334,20 @@ const componentDef = {
             return;
           }
 
+          self.flushErrors();
+
           if (self.shouldResetFormOnSuccessfulSubmit())
           {
-            self.setProps(self.data, null);
             self.initValues();
+            self.resetNestedForms();
           }
         })
         .catch(function (error) {
           self.loading = false;
           if (error.response && error.response.data && error.response.data.errors) {
             self.errors = error.response.data.errors;
+            self.setErrors(error.response.data.errors);
+            self.setNestedFormsError(error.response.data.errors);
           }
           if (self.props["failure"] != undefined && self.props["failure"]["emit"] != undefined) {
             matestackEventHub.$emit(self.props["failure"]["emit"], error.response.data);
@@ -266,8 +402,71 @@ const componentDef = {
     },
   },
   mounted: function () {
-    this.initValues();
+    var self = this;
+    if (this.props["fields_for"] != undefined) {
+      this.isNestedForm = true;
+
+      this.data = { "_destroy": false };
+
+      //initialize nestedForm data in parent form if required
+      if(this.$parent.data[this.props["fields_for"]] == undefined){
+        this.$parent.data[this.props["fields_for"]] = [];
+      }
+      if(this.$parent.nestedForms[this.props["fields_for"]] == undefined){
+        this.$parent.nestedForms[this.props["fields_for"]] = [];
+      }
+      if(this.$parent.deletedNestedForms[this.props["fields_for"]] == undefined){
+        this.$parent.deletedNestedForms[this.props["fields_for"]] = []
+      }
+
+      var id = parseInt(self.$el.id.replace(this.props["fields_for"]+"_child_", ""));
+
+      //setup data binding for serverside rendered nested forms
+      if (isNaN(id)){
+        id = this.$parent.nestedForms[this.props["fields_for"]].length
+        this.nestedFormRuntimeId = "_"+this.props["fields_for"]+"_child_"+id
+        this.$el.id = this.props["fields_for"]+"_child_"+id
+        this.initValues()
+        this.$parent.data[this.props["fields_for"]].push(this.data);
+        this.$parent.nestedForms[this.props["fields_for"]].push(this);
+      }
+
+      //setup data binding for runtime nested forms (dynamic add via v-runtime-template)
+      if (!isNaN(id)){
+        this.nestedFormRuntimeId = "_"+this.props["fields_for"]+"_child_"+id
+        if(this.$parent.data[this.props["fields_for"]][id] == undefined){
+          //new runtime form
+          this.initValues()
+          this.$parent.data[this.props["fields_for"]].push(this.data);
+          this.$parent.nestedForms[this.props["fields_for"]].push(this);
+        }else{
+          //retreive state for existing runtime form (after remount for example)
+          this.data = this.$parent.data[this.props["fields_for"]][id]
+          if (this.data["_destroy"] == true){
+            this.hideNestedForm = true;
+          }
+          this.$parent.nestedForms[this.props["fields_for"]][id] = this;
+          Object.keys(this.$parent.errors).forEach(function(errorKey){
+            if (errorKey.includes(".")){
+              let childErrorKey = errorKey.split(".")[1]
+              let childModelName = errorKey.split(".")[0].split("[")[0]
+              let childModelIndex = errorKey.split(".")[0].split("[")[1].split("]")[0]
+              let mappedChildModelIndex = self.$parent.mapToNestedForms(parseInt(childModelIndex), childModelName+"_attributes")
+              if(childModelName+"_attributes" == self.props["fields_for"] && mappedChildModelIndex == id){
+                self.setNestedFormServerErrorIndex(parseInt(childModelIndex))
+                self.setErrorKey(childErrorKey, self.$parent.errors[errorKey])
+              }
+            }
+          })
+        }
+      }
+    } else {
+      this.initValues();
+    }
   },
+  components: {
+    VRuntimeTemplate: VRuntimeTemplate
+  }
 };
 
 let component = Vue.component("matestack-ui-core-form", componentDef);

data/lib/matestack/ui/vue_js/components/form/form.rb

@@ -7,6 +7,9 @@ module Matestack
             vue_name 'matestack-ui-core-form'
 
             optional :for, :path, :success, :failure, :multipart, :emit, :delay, :errors
+            optional :fields_for, :reject_blank
+
+            attr_accessor :prototype_template
 
             # setup form context to allow child components like inputs to access the form configuration
             def initialize(html_tag = nil, text = nil, options = {}, &block)
@@ -16,9 +19,21 @@ module Matestack
               Matestack::Ui::VueJs::Components::Form::Context.form_context = previous_form_context
             end
 
+            def component_id
+              "matestack-form-fields-for-#{context.fields_for}-#{SecureRandom.hex}" if context.fields_for
+            end
+
             def response
-              form attributes do
-                yield
+              if context.fields_for
+                div class: "matestack-form-fields-for", "v-show": "hideNestedForm != true", id: options[:id] do
+                  form_input key: context.for&.class&.primary_key, type: :hidden # required for existing model mapping
+                  form_input key: :_destroy, type: :hidden, init: true if context.reject_blank == true
+                  yield
+                end
+              else
+                form attributes do
+                  yield
+                end
               end
             end
 
@@ -40,6 +55,8 @@ module Matestack
                 multipart: !!ctx.multipart,
                 emit: ctx.emit,
                 delay: ctx.delay,
+                fields_for: ctx.fields_for,
+                primary_key: for_object_primary_key
               }
             end
 
@@ -52,13 +69,16 @@ module Matestack
               @for_option ||= ctx.for
             end
 
+            def for_object_primary_key
+              context.for&.class&.primary_key rescue nil
+            end
+
             def form_method
               @form_method ||= options.delete(:method)
             end
-
           end
         end
       end
     end
   end
-end
+end

data/lib/matestack/ui/vue_js/components/form/input.rb

@@ -8,7 +8,7 @@ module Matestack
 
             def response
               div class: 'matestack-ui-core-form-input' do
-                label input_label, for: id if input_label
+                label input_label, ":for": id if input_label
                 input input_attributes
                 render_errors
               end
@@ -22,6 +22,11 @@ module Matestack
               attributes
             end
 
+            def init_value
+              return nil if ctx.type.to_s == "file" 
+              super
+            end
+
             def vue_props
               {
                 init_value: init_value,
@@ -34,4 +39,4 @@ module Matestack
       end
     end
   end
-end
+end

data/lib/matestack/ui/vue_js/components/form/input_mixin.js

@@ -7,22 +7,17 @@ const formInputMixin = {
       for (let key in this.$refs) {
         let initValue = this.$refs[key]["attributes"]["init-value"];
 
+        self.$set(self.$parent.data, key.replace("input.", ""), null)
+
         if (initValue) {
-          data[key.replace("input.", "")] = initValue["value"];
-          Object.assign(self.$parent.data, data);
+          self.setValue(initValue["value"])
           self.afterInitialize(initValue["value"])
         } else {
-          data[key.replace("input.", "")] = null;
-          Object.assign(self.$parent.data, data);
+          self.setValue(null)
           self.afterInitialize(null)
         }
       }
 
-      //without the timeout it's somehow not working
-      setTimeout(function () {
-        self.$parent.$forceUpdate();
-        self.$forceUpdate();
-      }, 1);
     },
     filesAdded: function (key) {
       const dataTransfer = event.dataTransfer || event.target;
@@ -39,17 +34,17 @@ const formInputMixin = {
       }
     },
     inputChanged: function (key) {
+      if (this.$parent.isNestedForm){
+        this.$parent.data["_destroy"] = false;
+      }
       this.$parent.resetErrors(key);
-      this.$parent.$forceUpdate();
-      this.$forceUpdate();
+
     },
     afterInitialize: function(value){
       // can be used in the main component for further initialization steps
     },
     setValue: function (value){
-      this.$parent.data[this.props["key"]] = value
-      this.$parent.$forceUpdate();
-      this.$forceUpdate();
+      this.$parent.data[this.props["key"]] = value;
     }
   }
 

data/lib/matestack/ui/vue_js/components/form/radio.rb

@@ -16,7 +16,7 @@ module Matestack
             def render_options
               radio_options.to_a.each do |item|
                 input radio_attributes(item)
-                label item_label(item), for: item_id(item)
+                label item_label(item), ":for": item_id(item)
               end
             end
 
@@ -33,7 +33,7 @@ module Matestack
 
             def radio_attributes(item)
               attributes.merge({
-                id: item_id(item),
+                ":id": item_id(item),
                 name: item_name(item),
                 value: item_value(item),
                 type: :radio,
@@ -51,13 +51,13 @@ module Matestack
             def item_value(item)
               item.is_a?(Array) ? item.last : item
             end
-            
+
             def item_label(item)
               item.is_a?(Array) ? item.first : item
             end
 
             def item_id(item)
-              "#{id || key}_#{item_value(item)}"
+              "#{id || key}+'_#{item_value(item)}'"
             end
 
             def item_name(item)
@@ -73,4 +73,4 @@ module Matestack
       end
     end
   end
-end
+end

data/lib/matestack/ui/vue_js/components/form/radio_mixin.js

@@ -10,53 +10,43 @@ const formRadioMixin = {
 
         if (key.startsWith("select.")) {
           if (key.startsWith("select.multiple.")) {
+            self.$set(self.$parent.data, key.replace("select.multiple.", ""), null)
             if (initValue) {
-              data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
-              Object.assign(self.$parent.data, data);
+              self.setValue(JSON.parse(initValue["value"]));
               self.afterInitialize(JSON.parse(initValue["value"]))
             } else {
-              data[key.replace("select.multiple.", "")] = [];
-              Object.assign(self.$parent.data, data);
-              self.afterInitialize([])
+              self.setValue([]);
+              self.afterInitialize([]);
             }
           } else {
+            self.$set(self.$parent.data, key.replace("select.", ""), null)
             if (initValue) {
               if (valueType && valueType["value"] == "Integer") {
-                data[key.replace("select.", "")] = parseInt(initValue["value"]);
-                Object.assign(self.$parent.data, data);
+                self.setValue(parseInt(initValue["value"]));
                 self.afterInitialize(parseInt(initValue["value"]))
               } else {
-                data[key.replace("select.", "")] = initValue["value"];
-                Object.assign(self.$parent.data, data);
+                self.setValue(initValue["value"]);
                 self.afterInitialize(initValue["value"])
               }
             } else {
-              data[key.replace("select.", "")] = null;
-              Object.assign(self.$parent.data, data);
+              self.setValue(null);
               self.afterInitialize(null)
             }
           }
         }
       }
-
-      //without the timeout it's somehow not working
-      setTimeout(function () {
-        self.$parent.$forceUpdate();
-        self.$forceUpdate();
-      }, 1);
     },
     inputChanged: function (key) {
+      if (this.$parent.isNestedForm){
+        this.$parent.data["_destroy"] = false;
+      }
       this.$parent.resetErrors(key);
-      this.$parent.$forceUpdate();
-      this.$forceUpdate();
     },
     afterInitialize: function(value){
       // can be used in the main component for further initialization steps
     },
     setValue: function (value){
       this.$parent.data[this.props["key"]] = value
-      this.$parent.$forceUpdate();
-      this.$forceUpdate();
     }
   }
 

data/lib/matestack/ui/vue_js/components/form/select.rb

@@ -8,7 +8,7 @@ module Matestack
 
             def response
               div class: 'matestack-ui-core-form-select' do
-                label input_label, for: id if input_label
+                label input_label, ":for": id if input_label
                 select select_attributes do
                   render_options
                 end
@@ -39,7 +39,7 @@ module Matestack
             def select_attributes
               attributes.merge({
                 multiple: multiple,
-                id: id,
+                ":id": id,
                 ref: "select#{'.multiple' if multiple}.#{key}",
                 'value-type': value_type(select_options.first),
                 'init-value': init_value,
@@ -57,7 +57,7 @@ module Matestack
             def item_value(item)
               item.is_a?(Array) ? item.last : item
             end
-            
+
             def item_label(item)
               item.is_a?(Array) ? item.first : item
             end
@@ -85,4 +85,4 @@ module Matestack
       end
     end
   end
-end
+end

data/lib/matestack/ui/vue_js/components/form/select_mixin.js

@@ -10,49 +10,43 @@ const formSelectMixin = {
 
         if (key.startsWith("select.")) {
           if (key.startsWith("select.multiple.")) {
+            self.$set(self.$parent.data, key.replace("select.multiple.", ""), null)
             if (initValue) {
-              data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
+              self.setValue(JSON.parse(initValue["value"]));
               self.afterInitialize(JSON.parse(initValue["value"]))
             } else {
-              data[key.replace("select.multiple.", "")] = [];
-              self.afterInitialize([])
+              self.setValue([]);
+              self.afterInitialize([]);
             }
           } else {
+            self.$set(self.$parent.data, key.replace("select.", ""), null)
             if (initValue) {
               if (valueType && valueType["value"] == "Integer") {
-                data[key.replace("select.", "")] = parseInt(initValue["value"]);
+                self.setValue(parseInt(initValue["value"]));
                 self.afterInitialize(parseInt(initValue["value"]))
               } else {
-                data[key.replace("select.", "")] = initValue["value"];
+                self.setValue(initValue["value"]);
                 self.afterInitialize(initValue["value"])
               }
             } else {
-              data[key.replace("select.", "")] = null;
+              self.setValue(null);
               self.afterInitialize(null)
             }
           }
         }
       }
-
-      //without the timeout it's somehow not working
-      setTimeout(function () {
-        Object.assign(self.$parent.data, data);
-        self.$parent.$forceUpdate();
-        self.$forceUpdate();
-      }, 1);
     },
     inputChanged: function (key) {
+      if (this.$parent.isNestedForm){
+        this.$parent.data["_destroy"] = false;
+      }
       this.$parent.resetErrors(key);
-      this.$parent.$forceUpdate();
-      this.$forceUpdate();
     },
     afterInitialize: function(value){
       // can be used in the main component for further initialization steps
     },
     setValue: function (value){
       this.$parent.data[this.props["key"]] = value
-      this.$parent.$forceUpdate();
-      this.$forceUpdate();
     }
   }
 

data/lib/matestack/ui/vue_js/components/form/textarea.rb

@@ -8,7 +8,7 @@ module Matestack
 
             def response
               div class: 'matestack-ui-core-form-textarea' do
-                label input_label, for: id if input_label
+                label input_label, ":for": id if input_label
                 textarea textarea_attributes
                 render_errors
               end
@@ -34,4 +34,4 @@ module Matestack
       end
     end
   end
-end
+end

data/lib/matestack/ui/vue_js/components/form/textarea_mixin.js

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: matestack-ui-core
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 2.1.0
 platform: ruby
 authors:
 - Jonas Jabari
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-04-12 00:00:00.000000000 Z
+date: 2021-06-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -82,6 +82,8 @@ files:
 - lib/matestack/ui/vue_js/components/form/checkbox.rb
 - lib/matestack/ui/vue_js/components/form/checkbox_mixin.js
 - lib/matestack/ui/vue_js/components/form/context.rb
+- lib/matestack/ui/vue_js/components/form/fields_for_add_item.rb
+- lib/matestack/ui/vue_js/components/form/fields_for_remove_item.rb
 - lib/matestack/ui/vue_js/components/form/form.js
 - lib/matestack/ui/vue_js/components/form/form.rb
 - lib/matestack/ui/vue_js/components/form/input.js