matestack-ui-core 1.3.0 → 2.0.0

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

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

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

@@ -0,0 +1,105 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Checkbox < Matestack::Ui::VueJs::Components::Form::Base
+            vue_name 'matestack-ui-core-form-checkbox'
+
+            def response
+              div class: 'matestack-ui-core-form-checkbox' do
+                render_options
+                render_errors
+              end
+            end
+
+            def render_options
+              if checkbox_options
+                render_checkbox_options
+              else
+                render_true_false_checkbox
+              end
+            end
+
+            def component_id
+              "checkbox-component-for-#{key}"
+            end
+
+            def vue_props
+              {
+                init_value: init_value,
+                key: key,
+              }
+            end
+
+            # checkbox rendering
+
+            def render_checkbox_options
+              checkbox_options.to_a.each do |item|
+                input checkbox_attributes(item)
+                label item_label(item), for: item_id(item)
+              end
+            end
+
+            def checkbox_attributes(item)
+              {
+                id: item_id(item),
+                type: :checkbox,
+                name: item_label(item),
+                value: item_value(item),
+                ref: "select.multiple.#{key}",
+                '@change': change_event,
+                'init-value': (init_value || []).to_json,
+                'v-bind:class': "{ '#{error_class}': #{error_key} }",
+                'value-type': value_type(item),
+                "#{v_model_type(item)}": input_key,
+              }.merge(self.options)
+            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
+            end
+
+            def true_false_checkbox_attributes
+              attributes.merge({
+                'init-value': init_value_for_single_input,
+              })
+            end
+
+            def init_value_for_single_input
+              if init_value == true || init_value == 1
+                return "true"
+              end
+              if init_value == false || init_value == 0
+                return "false"
+              end
+            end
+
+            # checkbox options
+
+            def checkbox_options
+              @checkbox_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}_#{item_value(item).to_s.gsub(" ", '_')}"
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -59,18 +59,21 @@ const formCheckboxMixin = {
 
       //without the timeout it's somehow not working
       setTimeout(function () {
-        self.$forceUpdate()
+        self.$parent.$forceUpdate();
+        self.$forceUpdate();
       }, 1);
     },
     inputChanged: function (key) {
       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.componentConfig["key"]] = value
+      this.$parent.data[this.props["key"]] = value
+      this.$parent.$forceUpdate();
       this.$forceUpdate();
     }
   }

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

@@ -0,0 +1,15 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Context < ActiveSupport::CurrentAttributes
+            
+            attribute :form_context
+            
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -2,8 +2,8 @@ import Vue from "vue/dist/vue.esm";
 import Vuex from "vuex";
 import axios from "axios";
 
-import matestackEventHub from "../js/event-hub";
-import componentMixin from "../component/component";
+import matestackEventHub from "../../event_hub";
+import componentMixin from "../mixin";
 
 const componentDef = {
   mixins: [componentMixin],
@@ -77,15 +77,15 @@ const componentDef = {
     },
     shouldResetFormOnSuccessfulSubmit() {
       const self = this;
-      if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["reset"] != undefined) {
-        return self.componentConfig["success"]["reset"];
+      if (self.props["success"] != undefined && self.props["success"]["reset"] != undefined) {
+        return self.props["success"]["reset"];
       } else {
         return self.shouldResetFormOnSuccessfulSubmitByDefault();
       }
     },
     shouldResetFormOnSuccessfulSubmitByDefault() {
       const self = this;
-      if (self.componentConfig["method"] == "put") {
+      if (self.props["method"] == "put") {
         return false;
       } else {
         return true;
@@ -96,13 +96,13 @@ const componentDef = {
       var form = self.$el.tagName == 'FORM' ? self.$el : self.$el.querySelector('form');
       if(form.checkValidity()){
         self.loading = true;
-        if (self.componentConfig["emit"] != undefined) {
-          matestackEventHub.$emit(self.componentConfig["emit"]);
+        if (self.props["emit"] != undefined) {
+          matestackEventHub.$emit(self.props["emit"]);
         }
-        if (self.componentConfig["delay"] != undefined) {
+        if (self.props["delay"] != undefined) {
           setTimeout(function () {
             self.sendRequest()
-          }, parseInt(self.componentConfig["delay"]));
+          }, parseInt(self.props["delay"]));
         } else {
           self.sendRequest()
         }
@@ -113,25 +113,25 @@ const componentDef = {
     sendRequest: function(){
       const self = this;
       let payload = {};
-      payload[self.componentConfig["for"]] = self.data;
+      payload[self.props["for"]] = self.data;
       let axios_config = {};
-      if (self.componentConfig["multipart"] == true ) {
+      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.componentConfig["for"] + "[" + key.slice(0, -2) + "][]", file);
+              form_data.append(self.props["for"] + "[" + key.slice(0, -2) + "][]", file);
             }
           } else {
             if (self.data[key] != null){
-              form_data.append(self.componentConfig["for"] + "[" + key + "]", self.data[key]);
+              form_data.append(self.props["for"] + "[" + key + "]", self.data[key]);
             }
           }
         }
         axios_config = {
-          method: self.componentConfig["method"],
-          url: self.componentConfig["submit_path"],
+          method: self.props["method"],
+          url: self.props["submit_path"],
           data: form_data,
           headers: {
             "X-CSRF-Token": document.getElementsByName("csrf-token")[0].getAttribute("content"),
@@ -140,8 +140,8 @@ const componentDef = {
         };
       } else {
         axios_config = {
-          method: self.componentConfig["method"],
-          url: self.componentConfig["submit_path"],
+          method: self.props["method"],
+          url: self.props["submit_path"],
           data: payload,
           headers: {
             "X-CSRF-Token": document.getElementsByName("csrf-token")[0].getAttribute("content"),
@@ -152,26 +152,26 @@ const componentDef = {
       axios(axios_config)
         .then(function (response) {
           self.loading = false;
-          if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
-            matestackEventHub.$emit(self.componentConfig["success"]["emit"], response.data);
+          if (self.props["success"] != undefined && self.props["success"]["emit"] != undefined) {
+            matestackEventHub.$emit(self.props["success"]["emit"], response.data);
           }
           // transition handling
-          if (self.componentConfig["success"] != undefined
-            && self.componentConfig["success"]["transition"] != undefined
+          if (self.props["success"] != undefined
+            && self.props["success"]["transition"] != undefined
             && (
-              self.componentConfig["success"]["transition"]["follow_response"] == undefined
+              self.props["success"]["transition"]["follow_response"] == undefined
               ||
-              self.componentConfig["success"]["transition"]["follow_response"] === false
+              self.props["success"]["transition"]["follow_response"] === false
             )
             && self.$store != undefined
           ) {
-            let path = self.componentConfig["success"]["transition"]["path"]
+            let path = self.props["success"]["transition"]["path"]
             self.$store.dispatch('navigateTo', {url: path, backwards: false})
             return;
           }
-          if (self.componentConfig["success"] != undefined
-            && self.componentConfig["success"]["transition"] != undefined
-            && self.componentConfig["success"]["transition"]["follow_response"] === true
+          if (self.props["success"] != undefined
+            && self.props["success"]["transition"] != undefined
+            && self.props["success"]["transition"]["follow_response"] === true
             && self.$store != undefined
           ) {
             let path = response.data["transition_to"] || response.request.responseURL
@@ -179,22 +179,22 @@ const componentDef = {
             return;
           }
           // redirect handling
-          if (self.componentConfig["success"] != undefined
-            && self.componentConfig["success"]["redirect"] != undefined
+          if (self.props["success"] != undefined
+            && self.props["success"]["redirect"] != undefined
             && (
-              self.componentConfig["success"]["redirect"]["follow_response"] == undefined
+              self.props["success"]["redirect"]["follow_response"] == undefined
               ||
-              self.componentConfig["success"]["redirect"]["follow_response"] === false
+              self.props["success"]["redirect"]["follow_response"] === false
             )
             && self.$store != undefined
           ) {
-            let path = self.componentConfig["success"]["redirect"]["path"]
+            let path = self.props["success"]["redirect"]["path"]
             window.location.href = path
             return;
           }
-          if (self.componentConfig["success"] != undefined
-            && self.componentConfig["success"]["redirect"] != undefined
-            && self.componentConfig["success"]["redirect"]["follow_response"] === true
+          if (self.props["success"] != undefined
+            && self.props["success"]["redirect"] != undefined
+            && self.props["success"]["redirect"]["follow_response"] === true
             && self.$store != undefined
           ) {
             let path = response.data["redirect_to"] || response.request.responseURL
@@ -213,26 +213,26 @@ const componentDef = {
           if (error.response && error.response.data && error.response.data.errors) {
             self.errors = error.response.data.errors;
           }
-          if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
-            matestackEventHub.$emit(self.componentConfig["failure"]["emit"], error.response.data);
+          if (self.props["failure"] != undefined && self.props["failure"]["emit"] != undefined) {
+            matestackEventHub.$emit(self.props["failure"]["emit"], error.response.data);
           }
           // transition handling
-          if (self.componentConfig["failure"] != undefined
-            && self.componentConfig["failure"]["transition"] != undefined
+          if (self.props["failure"] != undefined
+            && self.props["failure"]["transition"] != undefined
             && (
-              self.componentConfig["failure"]["transition"]["follow_response"] == undefined
+              self.props["failure"]["transition"]["follow_response"] == undefined
               ||
-              self.componentConfig["failure"]["transition"]["follow_response"] === false
+              self.props["failure"]["transition"]["follow_response"] === false
             )
             && self.$store != undefined
           ) {
-            let path = self.componentConfig["failure"]["transition"]["path"]
+            let path = self.props["failure"]["transition"]["path"]
             self.$store.dispatch('navigateTo', {url: path, backwards: false})
             return;
           }
-          if (self.componentConfig["failure"] != undefined
-            && self.componentConfig["failure"]["transition"] != undefined
-            && self.componentConfig["failure"]["transition"]["follow_response"] === true
+          if (self.props["failure"] != undefined
+            && self.props["failure"]["transition"] != undefined
+            && self.props["failure"]["transition"]["follow_response"] === true
             && self.$store != undefined
           ) {
             let path = error.response.data["transition_to"] || response.request.responseURL
@@ -240,22 +240,22 @@ const componentDef = {
             return;
           }
           // redirect handling
-          if (self.componentConfig["failure"] != undefined
-            && self.componentConfig["failure"]["redirect"] != undefined
+          if (self.props["failure"] != undefined
+            && self.props["failure"]["redirect"] != undefined
             && (
-              self.componentConfig["failure"]["redirect"]["follow_response"] == undefined
+              self.props["failure"]["redirect"]["follow_response"] == undefined
               ||
-              self.componentConfig["failure"]["redirect"]["follow_response"] === false
+              self.props["failure"]["redirect"]["follow_response"] === false
             )
             && self.$store != undefined
           ) {
-            let path = self.componentConfig["failure"]["redirect"]["path"]
+            let path = self.props["failure"]["redirect"]["path"]
             window.location.href = path
             return;
           }
-          if (self.componentConfig["failure"] != undefined
-            && self.componentConfig["failure"]["redirect"] != undefined
-            && self.componentConfig["failure"]["redirect"]["follow_response"] === true
+          if (self.props["failure"] != undefined
+            && self.props["failure"]["redirect"] != undefined
+            && self.props["failure"]["redirect"]["follow_response"] === true
             && self.$store != undefined
           ) {
             let path = error.response.data["redirect_to"] || response.request.responseURL

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

@@ -0,0 +1,64 @@
+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
+
+            # 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 response
+              form attributes do
+                yield
+              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,
+              }
+            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 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],