matestack-ui-core 1.3.1 → 2.1.0

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

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

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

@@ -0,0 +1,37 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        module Form
+          class Textarea < Matestack::Ui::VueJs::Components::Form::Base
+            vue_name 'matestack-ui-core-form-textarea'
+
+            def response
+              div class: 'matestack-ui-core-form-textarea' do
+                label input_label, ":for": id if input_label
+                textarea textarea_attributes
+                render_errors
+              end
+            end
+
+            def textarea_attributes
+              attributes
+            end
+
+            def component_id
+              "textarea-component-for-#{key}"
+            end
+
+            def vue_props
+              {
+                init_value: init_value,
+                key: key
+              }
+            end
+
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -7,32 +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.$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/isolated → lib/matestack/ui/vue_js/components}/isolated.js

@@ -1,10 +1,10 @@
 import Vue from 'vue/dist/vue.esm'
 import axios from 'axios'
 import VRuntimeTemplate from "v-runtime-template"
-import matestackEventHub from '../js/event-hub'
+import matestackEventHub from '../event_hub'
 
 const componentDef = {
-  props: ['componentConfig', 'params'],
+  props: ['props', 'params'],
   data: function(){
     return {
       isolatedTemplate: null,
@@ -17,10 +17,10 @@ const componentDef = {
       var self = this;
       self.loading = true;
       self.loadingError = false;
-      if(self.componentConfig["rerender_delay"] != undefined){
+      if(self.props["rerender_delay"] != undefined){
         setTimeout(function () {
           self.renderIsolatedContent();
-        }, parseInt(this.componentConfig["rerender_delay"]));
+        }, parseInt(this.props["rerender_delay"]));
       } else {
         self.renderIsolatedContent();
       }
@@ -36,8 +36,8 @@ const componentDef = {
           'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
         },
         params: {
-          "component_class": self.componentConfig["component_class"],
-          "public_options": self.componentConfig["public_options"]
+          "component_class": self.props["component_class"],
+          "public_options": self.props["public_options"]
         }
       })
       .then(function(response){
@@ -48,7 +48,7 @@ const componentDef = {
       })
       .catch(function(error){
         self.loadingError = true;
-        matestackEventHub.$emit('isolate_rerender_error', { class: self.componentConfig["component_class"] })
+        matestackEventHub.$emit('isolate_rerender_error', { class: self.props["component_class"] })
       })
     },
     startDefer: function(){
@@ -56,7 +56,7 @@ const componentDef = {
       self.loading = true;
       setTimeout(function () {
         self.renderIsolatedContent()
-      }, parseInt(this.componentConfig["defer"]));
+      }, parseInt(this.props["defer"]));
     }
   },
   created: function () {
@@ -64,16 +64,16 @@ const componentDef = {
   },
   beforeDestroy: function() {
     const self = this
-    if(this.componentConfig["rerender_on"] != undefined){
-      var rerender_events = this.componentConfig["rerender_on"].split(",")
+    if(this.props["rerender_on"] != undefined){
+      var rerender_events = this.props["rerender_on"].split(",")
       rerender_events.forEach(rerender_event => matestackEventHub.$off(rerender_event.trim(), self.renderIsolatedContent));
     }
   },
   mounted: function (){
     const self = this
-    if(this.componentConfig["init_on"] === undefined || this.componentConfig["init_on"] === null){
-      if(self.componentConfig["defer"] == true || Number.isInteger(self.componentConfig["defer"])){
-        if(!isNaN(self.componentConfig["defer"])){
+    if(this.props["init_on"] === undefined || this.props["init_on"] === null){
+      if(self.props["defer"] == true || Number.isInteger(self.props["defer"])){
+        if(!isNaN(self.props["defer"])){
           self.startDefer()
         }
         else{
@@ -81,19 +81,19 @@ const componentDef = {
         }
       }
     }else{
-      if(self.componentConfig["defer"] != undefined){
-        if(!isNaN(self.componentConfig["defer"])){
-          var init_on_events = this.componentConfig["init_on"].split(",")
+      if(self.props["defer"] != undefined){
+        if(!isNaN(self.props["defer"])){
+          var init_on_events = this.props["init_on"].split(",")
           init_on_events.forEach(init_on_event => matestackEventHub.$on(init_on_event.trim(), self.startDefer));
         }
       }else{
-        var init_on_events = this.componentConfig["init_on"].split(",")
+        var init_on_events = this.props["init_on"].split(",")
         init_on_events.forEach(init_on_event => matestackEventHub.$on(init_on_event.trim(), self.renderIsolatedContent));
       }
     }
 
-    if(this.componentConfig["rerender_on"] != undefined){
-      var rerender_events = this.componentConfig["rerender_on"].split(",")
+    if(this.props["rerender_on"] != undefined){
+      var rerender_events = this.props["rerender_on"].split(",")
       rerender_events.forEach(rerender_event => matestackEventHub.$on(rerender_event.trim(), self.rerender));
     }
 

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

@@ -0,0 +1,86 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        class Isolated < Matestack::Ui::VueJs::Vue
+          vue_name 'matestack-ui-core-isolate'
+
+          optional :defer, :init_on, :public_options, :rerender_on, :rerender_delay
+
+          def initialize(html_tag = nil, text = nil, options = {}, &block)
+            extract_options(text, options)
+            only_public_options!
+            isolated_parent = Matestack::Ui::Core::Context.isolated_parent
+            Matestack::Ui::Core::Context.isolated_parent = self
+            super(html_tag, text, options, &block)
+            Matestack::Ui::Core::Context.isolated_parent = isolated_parent
+          end
+
+          def create_children
+            # content only should be rendered if param :component_class is present
+            warn "[WARNING] '#{self.class}' was accessed but not authorized" unless authorized?
+            if params[:component_class].present?
+              self.response if authorized?
+            else
+              self.isolated do
+                self.response if authorized?
+              end
+            end
+          end
+
+          def isolated
+            Matestack::Ui::Core::Base.new(:component, component_attributes) do
+              div class: 'matestack-isolated-component-container', 'v-bind:class': '{ loading: loading === true }' do
+                if self.respond_to? :loading_state_element
+                  div class: 'loading-state-element-wrapper', 'v-bind:class': '{ loading: loading === true }' do
+                    loading_state_element
+                  end
+                end
+                unless ctx.defer || ctx.init_on
+                  div class: 'matestack-isolated-component-wrapper', 'v-if': 'isolatedTemplate == null', 'v-bind:class': '{ loading: loading === true }' do
+                    div class: 'matestack-isolated-component-root' do
+                      yield
+                    end
+                  end
+                end
+                div class: 'matestack-isolated-component-wrapper', 'v-if': 'isolatedTemplate != null', 'v-bind:class': '{ loading: loading === true }' do
+                  div class: 'matestack-isolated-component-root' do
+                    Matestack::Ui::Core::Base.new('v-runtime-template', ':template': 'isolatedTemplate')
+                  end
+                end
+              end
+            end
+          end
+
+          def vue_props
+            {
+              component_class: self.class.name,
+              public_options: ctx.public_options,
+              defer: ctx.defer,
+              rerender_on: ctx.rerender_on,
+              rerender_delay: ctx.rerender_delay,
+              init_on: ctx.init_on,
+            }
+          end
+
+          def public_options
+            ctx.public_options || {}
+          end
+
+          def authorized?
+            raise "'authorized?' needs to be implemented by '#{self.class}'"
+          end
+
+          def only_public_options!
+            if self.options.except(:defer, :init_on, :public_options, :rerender_on, :rerender_delay).keys.any?
+              error_message = "isolated components can only take params in a public_options hash, which will be exposed to the client side in order to perform an async request with these params."
+              error_message << " Check your usages of '#{self.class}' components"
+              raise error_message
+            end
+          end
+
+        end
+      end
+    end
+  end
+end

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

@@ -1,7 +1,7 @@
-import matestackEventHub from '../js/event-hub'
+import matestackEventHub from '../event_hub'
 
 const componentMixin = {
-  props: ['componentConfig', 'params'],
+  props: ['props', 'params'],
   methods: {
     registerEvents: function(events, callback){
       if(events != undefined){

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

@@ -1,7 +1,6 @@
 import Vue from 'vue/dist/vue.esm'
-
-import matestackEventHub from '../js/event-hub'
-import componentMixin from '../component/component'
+import matestackEventHub from '../event_hub'
+import componentMixin from './mixin'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -10,7 +9,7 @@ const componentDef = {
   },
   methods: {
     perform: function(){
-      matestackEventHub.$emit(this.componentConfig["emit"], this.componentConfig["data"])
+      matestackEventHub.$emit(this.props["emit"], this.props["data"])
     }
   }
 }

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

@@ -0,0 +1,37 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        class Onclick < Matestack::Ui::VueJs::Vue
+          vue_name 'matestack-ui-core-onclick'
+
+          optional :emit, :data
+
+          def response
+            a onclick_attributes do
+              yield
+            end
+          end
+
+          def onclick_attributes
+            options.merge({
+              class: "matestack-onclick-component-root",
+              '@click.prevent': 'perform',
+              href: "#"
+            })
+          end
+
+          protected
+
+          def vue_props
+            {
+              emit: ctx.emit,
+              data: ctx.data,
+            }
+          end
+
+        end
+      end
+    end
+  end
+end

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

@@ -1,6 +1,6 @@
 import Vue from 'vue/dist/vue.esm'
-import matestackEventHub from '../js/event-hub'
-import componentMixin from '../component/component'
+import matestackEventHub from '../event_hub'
+import componentMixin from './mixin'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -21,10 +21,10 @@ const componentDef = {
       }
       this.showing = true
       this.event.data = event_data
-      if(this.componentConfig["hide_after"] != undefined){
+      if(this.props["hide_after"] != undefined){
         self.hide_after_timeout = setTimeout(function () {
           self.hide()
-        }, parseInt(this.componentConfig["hide_after"]));
+        }, parseInt(this.props["hide_after"]));
       }
     },
     hide: function(){
@@ -34,33 +34,33 @@ const componentDef = {
   },
   created: function () {
     const self = this
-    if(this.componentConfig["show_on"] != undefined){
+    if(this.props["show_on"] != undefined){
       this.showing = false
-      var show_events = this.componentConfig["show_on"].split(",")
+      var show_events = this.props["show_on"].split(",")
       show_events.forEach(show_event => matestackEventHub.$on(show_event.trim(), self.show));
     }
-    if(this.componentConfig["hide_on"] != undefined){
-      var hide_events = this.componentConfig["hide_on"].split(",")
+    if(this.props["hide_on"] != undefined){
+      var hide_events = this.props["hide_on"].split(",")
       hide_events.forEach(hide_event => matestackEventHub.$on(hide_event.trim(), self.hide));
     }
-    if(this.componentConfig["show_on"] != undefined){
+    if(this.props["show_on"] != undefined){
       this.showing = false
     }
-    if(this.componentConfig["init_show"] == true){
+    if(this.props["init_show"] == true){
       this.showing = true
     }
   },
   beforeDestroy: function() {
     const self = this
     clearTimeout(self.hide_after_timeout)
-    matestackEventHub.$off(this.componentConfig["show_on"], self.show);
-    matestackEventHub.$off(this.componentConfig["hide_on"], self.hide);
-    if(this.componentConfig["show_on"] != undefined){
-      var shown_events = this.componentConfig["show_on"].split(",")
+    matestackEventHub.$off(this.props["show_on"], self.show);
+    matestackEventHub.$off(this.props["hide_on"], self.hide);
+    if(this.props["show_on"] != undefined){
+      var shown_events = this.props["show_on"].split(",")
       shown_events.forEach(show_event => matestackEventHub.$off(show_event.trim(), self.show));
     }
-    if(this.componentConfig["hide_on"] != undefined){
-      var hiden_events = this.componentConfig["hide_on"].split(",")
+    if(this.props["hide_on"] != undefined){
+      var hiden_events = this.props["hide_on"].split(",")
       hiden_events.forEach(hide_event => matestackEventHub.$off(hide_event.trim(), self.hide));
     }
   },
@@ -68,4 +68,4 @@ const componentDef = {
 
 let component = Vue.component('matestack-ui-core-toggle', componentDef)
 
-export default componentDef
+export default componentDef

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

@@ -0,0 +1,38 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        class Toggle < Matestack::Ui::VueJs::Vue
+          vue_name 'matestack-ui-core-toggle'
+
+          optional :show_on, :hide_on, :hide_after, :init_show
+
+          def response
+            div toggle_attributes do
+              yield
+            end
+          end
+
+          def toggle_attributes
+            options.merge({
+              class: "matestack-toggle-component-root", 
+              'v-if': 'showing'
+            })
+          end
+
+          protected
+
+          def vue_props
+            {
+              show_on: ctx.show_on,
+              hide_on: ctx.hide_on,
+              hide_after: ctx.hide_after,
+              init_show: ctx.init_show,
+            }
+          end
+
+        end
+      end
+    end
+  end
+end