matestack-ui-vuejs 3.0.0.rc1

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

@@ -0,0 +1,76 @@
+const formSelectMixin = {
+  inject: [
+    'parentFormUid',
+    'parentFormData',
+    'parentFormErrors',
+    'parentFormLoading',
+    'parentFormIsNestedForm',
+    'parentFormResetErrors',
+    'parentNestedFormRuntimeId'
+  ],
+  methods: {
+    initialize: function(){
+      const self = this
+      let data = {};
+
+      for (let key in self.getRefs()) {
+
+        let initValue;
+        let valueType;
+
+        if (key.startsWith("select.")) {
+          initValue = self.getRefs()[key]["attributes"]["init-value"];
+          valueType = self.getRefs()[key]["attributes"]["value-type"];
+        }
+
+        if (key.startsWith("select.")) {
+          if (key.startsWith("select.multiple.")) {
+            self.parentFormData[key.replace("select.multiple.", "")] = null
+            if (initValue) {
+              self.setValue(JSON.parse(initValue["value"]));
+              self.afterInitialize(JSON.parse(initValue["value"]))
+            } else {
+              self.setValue([]);
+              self.afterInitialize([]);
+            }
+          } else {
+            self.parentFormData[key.replace("select.", "")] = null
+            if (initValue) {
+              if (valueType && valueType["value"] == "Integer") {
+                self.setValue(parseInt(initValue["value"]));
+                self.afterInitialize(parseInt(initValue["value"]))
+              } else {
+                self.setValue(initValue["value"]);
+                self.afterInitialize(initValue["value"])
+              }
+            } else {
+              self.setValue(null);
+              self.afterInitialize(null)
+            }
+          }
+        }
+      }
+    },
+    inputChanged: function (key) {
+      if (this.parentFormIsNestedForm){
+        this.parentFormData["_destroy"] = false;
+      }
+      this.parentFormResetErrors(key);
+    },
+    afterInitialize: function(value){
+      // can be used in the main component for further initialization steps
+    },
+    setValue: function (value){
+      this.parentFormData[this.props["key"]] = value
+    }
+  },
+  mounted: function(){
+    this.registerScopedEvent("init", this.initialize, this.parentFormUid)
+  },
+  beforeUnmount: function(){
+    this.removeScopedEvent("init", this.initialize, this.parentFormUid)
+  }
+
+}
+
+export default formSelectMixin

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

@@ -0,0 +1,13 @@
+import formTextareaMixin from "./textarea_mixin";
+import componentMixin from "../mixin";
+import componentHelpers from "../helpers";
+
+const componentDef = {
+  mixins: [componentMixin, formTextareaMixin],
+  template: componentHelpers.inlineTemplate,
+  data() {
+    return {};
+  }
+}
+
+export default componentDef;

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/lib/matestack/ui/vue_js/components/form/textarea_mixin.js

@@ -0,0 +1,54 @@
+const formTextareaMixin = {
+  inject: [
+    'parentFormUid',
+    'parentFormData',
+    'parentFormErrors',
+    'parentFormLoading',
+    'parentFormIsNestedForm',
+    'parentFormResetErrors',
+    'parentNestedFormRuntimeId'
+  ],
+  methods: {
+    initialize: function(){
+      const self = this
+      let data = {};
+
+      for (let key in this.getRefs()) {
+        if (key.startsWith("input.")) {
+          let initValue = self.getRefs()[key]["attributes"]["init-value"];
+
+          self.parentFormData[key.replace("input.", "")] = null
+
+          if (initValue) {
+            self.setValue(initValue["value"])
+            self.afterInitialize(initValue["value"])
+          } else {
+            self.setValue(null)
+            self.afterInitialize(null)
+          }
+        }
+      }
+    },
+    inputChanged: function (key) {
+      if (this.parentFormIsNestedForm){
+        this.parentFormData["_destroy"] = false;
+      }
+      this.parentFormResetErrors(key);
+    },
+    afterInitialize: function(value){
+      // can be used in the main component for further initialization steps
+    },
+    setValue: function (value){
+      this.parentFormData[this.props["key"]] = value
+    }
+  },
+  mounted: function(){
+    this.registerScopedEvent("init", this.initialize, this.parentFormUid)
+  },
+  beforeUnmount: function(){
+    this.removeScopedEvent("init", this.initialize, this.parentFormUid)
+  }
+
+}
+
+export default formTextareaMixin

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

@@ -0,0 +1,5 @@
+const componentHelpers = {
+  inlineTemplate: '<slot :vc="vc"></slot>' // can not be mixed in
+}
+
+export default componentHelpers

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

@@ -0,0 +1,105 @@
+import axios from 'axios'
+import matestackEventHub from '../event_hub'
+import componentMixin from './mixin'
+import componentHelpers from './helpers'
+
+const componentDef = {
+  mixins: [componentMixin],
+  props: ['props', 'params'],
+  template: componentHelpers.inlineTemplate,
+  data: function(){
+    return {
+      isolatedTemplate: null,
+      loading: false,
+      loadingError: false
+    }
+  },
+  methods: {
+    rerender: function(){
+      var self = this;
+      self.loading = true;
+      self.loadingError = false;
+      if(self.props["rerender_delay"] != undefined){
+        setTimeout(function () {
+          self.renderIsolatedContent();
+        }, parseInt(this.props["rerender_delay"]));
+      } else {
+        self.renderIsolatedContent();
+      }
+    },
+    renderIsolatedContent: function(){
+      var self = this;
+      self.loading = true;
+      self.loadingError = false;
+      axios({
+        method: "get",
+        url: location.pathname + location.search,
+        headers: {
+          'X-CSRF-Token': self.getXcsrfToken()
+        },
+        params: {
+          "component_class": self.props["component_class"],
+          "public_options": self.props["public_options"]
+        }
+      })
+      .then(function(response){
+        self.loading = false;
+        self.loadingStart = false;
+        self.loadingEnd = true;
+        self.isolatedTemplate = response['data'];
+      })
+      .catch(function(error){
+        self.loadingError = true;
+        matestackEventHub.$emit('isolate_rerender_error', { class: self.props["component_class"] })
+      })
+    },
+    startDefer: function(){
+      const self = this
+      self.loading = true;
+      setTimeout(function () {
+        self.renderIsolatedContent()
+      }, parseInt(this.props["defer"]));
+    }
+  },
+  created: function () {
+    const self = this
+  },
+  beforeUnmount: function() {
+    const self = this
+    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.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{
+          self.renderIsolatedContent();
+        }
+      }
+    }else{
+      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.props["init_on"].split(",")
+        init_on_events.forEach(init_on_event => matestackEventHub.$on(init_on_event.trim(), self.renderIsolatedContent));
+      }
+    }
+
+    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));
+    }
+
+  }
+}
+
+export default componentDef

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
+            vue_component do
+              div class: 'matestack-isolated-component-container', 'v-bind:class': '{ loading: vc.loading === true }' do
+                if self.respond_to? :loading_state_element
+                  div class: 'loading-state-element-wrapper', 'v-bind:class': '{ loading: vc.loading === true }' do
+                    loading_state_element
+                  end
+                end
+                unless ctx.defer || ctx.init_on
+                  div class: 'matestack-isolated-component-wrapper', 'v-if': 'vc.isolatedTemplate == null', 'v-bind:class': '{ loading: vc.loading === true }' do
+                    div class: 'matestack-isolated-component-root' do
+                      yield
+                    end
+                  end
+                end
+                div class: 'matestack-isolated-component-wrapper', 'v-if': 'vc.isolatedTemplate != null', 'v-bind:class': '{ loading: vc.loading === true }' do
+                  div class: 'matestack-isolated-component-root' do
+                    Matestack::Ui::Core::Base.new('matestack-ui-core-runtime-render', ':template': 'vc.isolatedTemplate', ':vc': 'vc')
+                  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/lib/matestack/ui/vue_js/components/mixin.js

@@ -0,0 +1,66 @@
+import matestackEventHub from '../event_hub'
+
+const componentMixin = {
+  props: ['props', 'params', 'matestack-ui-core-ref'],
+  computed: {
+    vc: function(){
+      return this;
+    }
+  },
+  methods: {
+    getRefs: function(){
+      // while working with vue.js 2.x, we used inline templates. $refs was working fine
+      // from vue.js 3.x on, we cannot use inline tempates anymore but must use default slot instead
+      // $refs is empty due to this migration
+      // that's the reason for the following workaround
+      var componentScopedRefs = {};
+      var scopeId = this.props['component_uid'];
+      var componentRelativeRefs = this.getElement().querySelectorAll("[matestack-ui-core-ref]")
+      // var defaultSlot = this.$slots.default({ vc: this.vc })[0]
+      // var globalRefs = defaultSlot.context.$refs
+      for (let i in componentRelativeRefs) {
+        let node = componentRelativeRefs[i]
+        if (node.getAttribute){
+          let nodeRef = node.getAttribute("matestack-ui-core-ref")
+          if(nodeRef.startsWith(scopeId)){
+            componentScopedRefs[nodeRef.replace(scopeId+"-", "")] = node
+          }
+        }
+
+      }
+      return componentScopedRefs;
+    },
+    getElement: function(){
+      return document.getElementById("uid-"+this.props['component_uid']);
+    },
+    registerEvents: function(events, callback){
+      if(events != undefined){
+        var event_names = events.split(",")
+        event_names.forEach(event_name => matestackEventHub.$on(event_name.trim(), callback));
+      }
+    },
+    removeEvents: function(events, callback){
+      if(events != undefined){
+        var event_names = events.split(",")
+        event_names.forEach(event_name => matestackEventHub.$off(event_name.trim(), callback));
+      }
+    },
+    emitScopedEvent: function(name, data={}){
+      matestackEventHub.$emit(this.props['component_uid']+"_"+name, data)
+    },
+    registerScopedEvent: function(name, callback, scopeId=this.props['component_uid']){
+      matestackEventHub.$on(scopeId+"_"+name, callback)
+    },
+    removeScopedEvent: function(name, callback, scopeId=this.props['component_uid']){
+      matestackEventHub.$off(scopeId+"_"+name, callback)
+    },
+    getXcsrfToken: function(){
+      if(document.getElementsByName("csrf-token")[0]){
+        return document.getElementsByName("csrf-token")[0].getAttribute("content")
+      }
+    }
+  }
+
+}
+
+export default componentMixin

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

@@ -0,0 +1,18 @@
+import matestackEventHub from '../event_hub'
+import componentMixin from './mixin'
+import componentHelpers from './helpers'
+
+const componentDef = {
+  mixins: [componentMixin],
+  template: componentHelpers.inlineTemplate,
+  data: function(){
+    return { }
+  },
+  methods: {
+    perform: function(){
+      matestackEventHub.$emit(this.props["emit"], this.props["data"])
+    }
+  }
+}
+
+export default componentDef

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",
+              'v-on:click.prevent': 'vc.perform',
+              href: "#"
+            })
+          end
+
+          protected
+
+          def vue_props
+            {
+              emit: ctx.emit,
+              data: ctx.data,
+            }
+          end
+
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+import componentMixin from './mixin'
+import componentHelpers from './helpers'
+
+const componentDef = {
+  mixins: [componentMixin],
+  template: componentHelpers.inlineTemplate,
+  data: function(){
+    return {}
+  },
+  inject: [
+    'pageTemplate',
+    'pageLoading'
+  ],
+  computed: {
+    asyncPageTemplate: function(){
+      return this.pageTemplate
+    },
+    loading: function(){
+      return this.pageLoading
+    }
+  }
+}
+
+export default componentDef

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

@@ -0,0 +1,35 @@
+module Matestack
+  module Ui
+    module VueJs
+      module Components
+        class PageSwitch < Matestack::Ui::VueJs::Vue
+
+          vue_name "matestack-ui-core-page-switch"
+
+          def response
+            div class: 'matestack-page-container', 'v-bind:class': '{ "loading": vc.loading === true }'  do
+              if Matestack::Ui::Core::Context.layout.respond_to? :loading_state_element
+                div class: 'loading-state-element-wrapper', 'v-bind:class': '{ "loading": vc.loading === true }'  do
+                  Matestack::Ui::Core::Context.layout.loading_state_element
+                end
+              end
+              div class: 'matestack-page-wrapper', 'v-bind:class': '{ "loading": vc.loading === true }' do
+                div 'v-if': 'vc.asyncPageTemplate == null' do
+                  div class: 'matestack-page-root' do
+                    yield
+                  end
+                end
+                div 'v-if': 'vc.asyncPageTemplate != null' do
+                  div class: 'matestack-page-root' do
+                    Matestack::Ui::Core::Base.new('matestack-ui-core-runtime-render', ':template': 'vc.asyncPageTemplate', ':vc': 'vc')
+                  end
+                end
+              end
+            end
+          end
+
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+// import componentMixin from './mixin'
+
+const componentDef = {
+  template: `<component :is="dynamicComponent" :vc="vc" :template="template" />`,
+  props: ['vc', 'template'],
+  computed: {
+    dynamicComponent: function() {
+      return {
+        // mixins: [componentMixin],
+        props: ['vc', 'template'],
+        template: `${this.template || '<div></div>'}`,
+      }
+    }
+  }
+}
+
+export default componentDef

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

@@ -0,0 +1,70 @@
+import matestackEventHub from '../event_hub'
+import componentMixin from './mixin'
+import componentHelpers from './helpers'
+
+const componentDef = {
+  mixins: [componentMixin],
+  template: componentHelpers.inlineTemplate,
+  data: function(){
+    return {
+      showing: true,
+      hide_after_timeout: null,
+      event: {
+        data: {}
+      }
+    }
+  },
+  methods: {
+    show: function(event_data){
+      const self = this
+      if (this.showing === true){
+        return
+      }
+      this.showing = true
+      this.event.data = event_data
+      if(this.props["hide_after"] != undefined){
+        self.hide_after_timeout = setTimeout(function () {
+          self.hide()
+        }, parseInt(this.props["hide_after"]));
+      }
+    },
+    hide: function(){
+      this.showing = false
+      this.event.data = {}
+    }
+  },
+  created: function () {
+    const self = this
+    if(this.props["show_on"] != undefined){
+      this.showing = false
+      var show_events = this.props["show_on"].split(",")
+      show_events.forEach(show_event => matestackEventHub.$on(show_event.trim(), self.show));
+    }
+    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.props["show_on"] != undefined){
+      this.showing = false
+    }
+    if(this.props["init_show"] == true){
+      this.showing = true
+    }
+  },
+  beforeUnmount: function() {
+    const self = this
+    clearTimeout(self.hide_after_timeout)
+    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.props["hide_on"] != undefined){
+      var hiden_events = this.props["hide_on"].split(",")
+      hiden_events.forEach(hide_event => matestackEventHub.$off(hide_event.trim(), self.hide));
+    }
+  },
+}
+
+export default componentDef