matestack-ui-core 1.3.2 → 2.1.1

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

@@ -0,0 +1,84 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Form < Matestack::Ui::VueJs::Vue
+            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)
+              previous_form_context = Matestack::Ui::VueJs::Components::Form::Context.form_context
+              Matestack::Ui::VueJs::Components::Form::Context.form_context = self
+              super(html_tag, text, options, &block)
+              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
+              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
+
+            def attributes
+              {
+                class: 'matestack-form',
+                'v-bind:class': "{ 'has-errors': hasErrors(), loading: loading }",
+                '@submit.prevent': 'perform',
+              }
+            end
+
+            def vue_props
+              {
+                for: for_attribute,
+                submit_path: ctx.path,
+                method: form_method,
+                success: ctx.success,
+                failure: ctx.failure,
+                multipart: !!ctx.multipart,
+                emit: ctx.emit,
+                delay: ctx.delay,
+                fields_for: ctx.fields_for,
+                primary_key: for_object_primary_key
+              }
+            end
+
+            def for_attribute
+              return for_option.model_name.singular if for_option.respond_to?(:model_name)
+              for_option
+            end
+
+            def for_option
+              @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

data/{app/concepts/matestack/ui/core/form/input → lib/matestack/ui/vue_js/components/form}/input.js

@@ -1,7 +1,7 @@
 import Vue from "vue/dist/vue.esm";
 
-import formInputMixin from "./mixin";
-import componentMixin from "../../component/component";
+import formInputMixin from "./input_mixin";
+import componentMixin from "../mixin";
 
 const componentDef = {
   mixins: [componentMixin, formInputMixin],

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

@@ -0,0 +1,42 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Input < Matestack::Ui::VueJs::Components::Form::Base
+            vue_name 'matestack-ui-core-form-input'
+
+            def response
+              div class: 'matestack-ui-core-form-input' do
+                label input_label, ":for": id if input_label
+                input input_attributes
+                render_errors
+              end
+            end
+
+            def component_id
+              "input-component-for-#{attribute_key}"
+            end
+
+            def input_attributes
+              attributes
+            end
+
+            def init_value
+              return nil if ctx.type.to_s == "file" 
+              super
+            end
+
+            def vue_props
+              {
+                init_value: init_value,
+                key: key,
+              }
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

data/{app/concepts/matestack/ui/core/form/input/mixin.js → lib/matestack/ui/vue_js/components/form/input_mixin.js}

@@ -7,21 +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.$forceUpdate()
-      }, 1);
     },
     filesAdded: function (key) {
       const dataTransfer = event.dataTransfer || event.target;
@@ -38,15 +34,17 @@ const formInputMixin = {
       }
     },
     inputChanged: function (key) {
+      if (this.$parent.isNestedForm){
+        this.$parent.data["_destroy"] = false;
+      }
       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();
+      this.$parent.data[this.props["key"]] = value;
     }
   }
 

data/{app/concepts/matestack/ui/core/form/radio → lib/matestack/ui/vue_js/components/form}/radio.js

@@ -1,7 +1,7 @@
 import Vue from "vue/dist/vue.esm";
 
-import formRadioMixin from "./mixin";
-import componentMixin from "../../component/component";
+import formRadioMixin from "./radio_mixin";
+import componentMixin from "../mixin";
 
 const componentDef = {
   mixins: [componentMixin, formRadioMixin],

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

@@ -0,0 +1,76 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Radio < Matestack::Ui::VueJs::Components::Form::Base
+            vue_name 'matestack-ui-core-form-radio'
+
+            def response
+              div class: 'matestack-ui-core-form-radio' do
+                render_options
+                render_errors
+              end
+            end
+
+            def render_options
+              radio_options.to_a.each do |item|
+                input radio_attributes(item)
+                label item_label(item), ":for": item_id(item)
+              end
+            end
+
+            def component_id
+              "radio-component-for-#{key}"
+            end
+
+            def vue_props
+              {
+                init_value: init_value,
+                key: key,
+              }
+            end
+
+            def radio_attributes(item)
+              attributes.merge({
+                ":id": item_id(item),
+                name: item_name(item),
+                value: item_value(item),
+                type: :radio,
+                ref: "select.#{key}",
+                'value-type': value_type(item_value(radio_options.first))
+              })
+            end
+
+            def radio_options
+              @radio_options ||= options.delete(:options)
+            end
+
+            # calculated attributes
+
+            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)}'"
+            end
+
+            def item_name(item)
+              "#{key}_#{item_value(item)}"
+            end
+
+            def v_model_type
+              item_value(radio_options.first).is_a?(Numeric) ? 'v-model.number' : 'v-model'
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

data/{app/concepts/matestack/ui/core/form/radio/mixin.js → lib/matestack/ui/vue_js/components/form/radio_mixin.js}

@@ -10,50 +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.$forceUpdate();
-      }, 1);
     },
     inputChanged: function (key) {
+      if (this.$parent.isNestedForm){
+        this.$parent.data["_destroy"] = false;
+      }
       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();
+      this.$parent.data[this.props["key"]] = value
     }
   }
 

data/{app/concepts/matestack/ui/core/form/select → lib/matestack/ui/vue_js/components/form}/select.js

@@ -1,7 +1,7 @@
 import Vue from "vue/dist/vue.esm";
 
-import formSelectMixin from "./mixin";
-import componentMixin from "../../component/component";
+import formSelectMixin from "./select_mixin";
+import componentMixin from "../mixin";
 
 const componentDef = {
   mixins: [componentMixin, formSelectMixin],

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

@@ -0,0 +1,88 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Select < Matestack::Ui::VueJs::Components::Form::Base
+            vue_name 'matestack-ui-core-form-select'
+
+            def response
+              div class: 'matestack-ui-core-form-select' do
+                label input_label, ":for": id if input_label
+                select select_attributes do
+                  render_options
+                end
+                render_errors
+              end
+            end
+
+            def render_options
+              if placeholder
+                option value: nil, disabled: true, selected: init_value.nil?, text: placeholder
+              end
+              select_options.to_a.each do |item|
+                option item_label(item), value: item_value(item), disabled: item_disabled?(item)
+              end
+            end
+
+            def component_id
+              "select-component-for-#{key}"
+            end
+
+            def vue_props
+              {
+                init_value: init_value,
+                key: key,
+              }
+            end
+
+            def select_attributes
+              attributes.merge({
+                multiple: multiple,
+                ":id": id,
+                ref: "select#{'.multiple' if multiple}.#{key}",
+                'value-type': value_type(select_options.first),
+                'init-value': init_value,
+              })
+            end
+
+            # select options
+
+            def select_options
+              @select_options ||= options.delete(:options)
+            end
+
+            # calculated attributes
+
+            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)
+              "#{key}_#{item_value(item)}"
+            end
+
+            def item_disabled?(item)
+              disabled_options && disabled_options.to_a.include?(item)
+            end
+
+            def v_model_type
+              item_value(select_options.first).is_a?(Numeric) ? 'v-model.number' : 'v-model'
+            end
+
+            # attributes
+
+            def disabled_options
+              @disabled_options ||= options.delete(:disabled_options)
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

data/{app/concepts/matestack/ui/core/form/select/mixin.js → lib/matestack/ui/vue_js/components/form/select_mixin.js}

@@ -10,46 +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.$forceUpdate()
-      }, 1);
     },
     inputChanged: function (key) {
+      if (this.$parent.isNestedForm){
+        this.$parent.data["_destroy"] = false;
+      }
       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();
+      this.$parent.data[this.props["key"]] = value
     }
   }