matestack-ui-core 2.0.0 → 3.0.0.rc2

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

@@ -1,151 +0,0 @@
-import Vue from 'vue/dist/vue.esm'
-import Vuex from 'vuex'
-import axios from 'axios'
-import matestackEventHub from '../event_hub'
-import componentMixin from './mixin'
-
-const componentDef = {
-  mixins: [componentMixin],
-  data: function(){
-    return {}
-  },
-  methods: {
-    perform: function(){
-      const self = this
-      if (
-        (self.props["confirm"] == undefined) || confirm(self.props["confirm_text"])
-      )
-      {
-        if (self.props["emit"] != undefined) {
-          matestackEventHub.$emit(self.props["emit"]);
-        }
-        if (self.props["delay"] != undefined) {
-          setTimeout(function () {
-            self.sendRequest()
-          }, parseInt(self.props["delay"]));
-        } else {
-          this.sendRequest()
-        }
-      }
-    },
-    sendRequest: function(){
-      const self = this
-      axios({
-          method: self.props["method"],
-          url: self.props["action_path"],
-          data: self.props["data"],
-          headers: {
-            'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
-          }
-        }
-      )
-      .then(function(response){
-        if (self.props["success"] != undefined && self.props["success"]["emit"] != undefined) {
-          matestackEventHub.$emit(self.props["success"]["emit"], response.data);
-        }
-
-        // transition handling
-        if (self.props["success"] != undefined
-          && self.props["success"]["transition"] != undefined
-          && (
-            self.props["success"]["transition"]["follow_response"] == undefined
-            ||
-            self.props["success"]["transition"]["follow_response"] === false
-          )
-          && self.$store != undefined
-        ) {
-          let path = self.props["success"]["transition"]["path"]
-          self.$store.dispatch('navigateTo', {url: path, backwards: false})
-          return;
-        }
-        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
-          self.$store.dispatch('navigateTo', {url: path, backwards: false})
-          return;
-        }
-        // redirect handling
-        if (self.props["success"] != undefined
-          && self.props["success"]["redirect"] != undefined
-          && (
-            self.props["success"]["redirect"]["follow_response"] == undefined
-            ||
-            self.props["success"]["redirect"]["follow_response"] === false
-          )
-          && self.$store != undefined
-        ) {
-          let path = self.props["success"]["redirect"]["path"]
-          window.location.href = path
-          return;
-        }
-        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
-          window.location.href = path
-          return;
-        }
-      })
-      .catch(function(error){
-        if (self.props["failure"] != undefined && self.props["failure"]["emit"] != undefined) {
-          matestackEventHub.$emit(self.props["failure"]["emit"], error.response.data);
-        }
-        // transition handling
-        if (self.props["failure"] != undefined
-          && self.props["failure"]["transition"] != undefined
-          && (
-            self.props["failure"]["transition"]["follow_response"] == undefined
-            ||
-            self.props["failure"]["transition"]["follow_response"] === false
-          )
-          && self.$store != undefined
-        ) {
-          let path = self.props["failure"]["transition"]["path"]
-          self.$store.dispatch('navigateTo', {url: path, backwards: false})
-          return;
-        }
-        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
-          self.$store.dispatch('navigateTo', {url: path, backwards: false})
-          return;
-        }
-        // redirect handling
-        if (self.props["failure"] != undefined
-          && self.props["failure"]["redirect"] != undefined
-          && (
-            self.props["failure"]["redirect"]["follow_response"] == undefined
-            ||
-            self.props["failure"]["redirect"]["follow_response"] === false
-          )
-          && self.$store != undefined
-        ) {
-          let path = self.props["failure"]["redirect"]["path"]
-          window.location.href = path
-          return;
-        }
-        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
-          window.location.href = path
-          return;
-        }
-      })
-    }
-  }
-}
-
-let component = Vue.component('matestack-ui-core-action', componentDef)
-
-export default componentDef

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

@@ -1,46 +0,0 @@
-module Matestack
-  module Ui
-    module VueJs
-      module Components
-        class Action < Matestack::Ui::VueJs::Vue
-          vue_name 'matestack-ui-core-action'
-
-          optional :path, :success, :failure, :notify, :confirm, :confirm_text, :data, :delay, :emit
-
-          def response
-            a attributes do
-              yield
-            end
-          end
-
-          def attributes
-            {
-              href: ctx.path,
-              '@click.prevent': 'perform',
-            }.merge(options)
-          end
-
-          def vue_props
-            {}.tap do |conf|
-              conf[:action_path] = ctx.path
-              conf[:method] = action_method
-              conf[:success] = ctx.success
-              conf[:failure] = ctx.failure
-              conf[:notify] = true if ctx.notify.nil?
-              conf[:confirm] = ctx.confirm
-              conf[:confirm_text] = ctx.confirm.try(:[], :text) || 'Are you sure?'
-              conf[:data] = ctx.data
-              conf[:delay] = ctx.delay
-              conf[:emit] = ctx.emit
-            end
-          end
-
-          def action_method
-            @action_method ||= options.delete(:method)
-          end
-
-        end
-      end
-    end
-  end
-end

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

@@ -1,110 +0,0 @@
-import Vue from 'vue/dist/vue.esm'
-import axios from 'axios'
-import VRuntimeTemplate from "v-runtime-template"
-import matestackEventHub from '../event_hub'
-import componentMixin from './mixin'
-
-const componentDef = {
-  mixins: [componentMixin],
-  data: function(){
-    return {
-      asyncTemplate: null,
-      showing: true,
-      loading: false,
-      hideAfterTimeout: 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["defer"] != undefined){
-        if(!isNaN(this.props["defer"])){
-          this.startDefer()
-        }
-      }
-      if(this.props["hide_after"] != undefined){
-        self.hideAfterTimeout = setTimeout(function () {
-          self.hide()
-        }, parseInt(this.props["hide_after"]));
-      }
-    },
-    hide: function(){
-      this.showing = false
-      this.event.data = {}
-    },
-    startDefer: function(){
-      const self = this
-      self.loading = true;
-      setTimeout(function () {
-        self.rerender()
-      }, parseInt(this.props["defer"]));
-    },
-    rerender: function(){
-      var self = this;
-      self.loading = true;
-      axios({
-        method: "get",
-        url: location.pathname + location.search,
-        headers: {
-          'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
-        },
-        params: {
-          "component_key": self.props["component_key"],
-          "component_class": self.props["parent_class"]
-        }
-      })
-      .then(function(response){
-        var tmp_dom_element = document.createElement('div');
-        tmp_dom_element.innerHTML = response['data'];
-        var template = tmp_dom_element.querySelector('#' + self.props["component_key"]).outerHTML;
-        self.loading = false;
-        self.asyncTemplate = template;
-      })
-      .catch(function(error){
-        console.log(error)
-        matestackEventHub.$emit('async_rerender_error', { id: self.props["component_key"] })
-      })
-    }
-  },
-  created: function () {
-    const self = this
-    self.registerEvents(this.props['show_on'], self.show)
-    self.registerEvents(this.props['hide_on'], self.hide)
-    self.registerEvents(this.props['rerender_on'], self.rerender)
-    if(this.props["show_on"] != undefined){
-      this.showing = false
-    }
-    if(this.props["defer"] != undefined){
-      if(!isNaN(this.props["defer"])){
-        if (this.props["show_on"] == undefined){
-          this.startDefer()
-        }
-      }
-    }
-    if(this.props["init_show"] == true){
-      this.showing = true
-    }
-  },
-  beforeDestroy: function() {
-    const self = this
-    clearTimeout(self.hideAfterTimeout)
-    self.removeEvents(this.props["show_on"], self.show)
-    self.removeEvents(this.props["hide_on"], self.hide)
-    self.removeEvents(this.props["rerender_on"], self.rerender)
-  },
-  components: {
-    VRuntimeTemplate: VRuntimeTemplate
-  }
-}
-
-let component = Vue.component('matestack-ui-core-async', componentDef)
-
-export default componentDef

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

@@ -1,84 +0,0 @@
-module Matestack
-  module Ui
-    module VueJs
-      module Components
-        class Async < Matestack::Ui::VueJs::Vue
-          vue_name 'matestack-ui-core-async'
-
-          required :id
-          optional :show_on, :hide_on, :rerender_on, :defer
-
-          # register itself as an async component in the context
-          def initialize(html_tag = nil, text = nil, options = {}, &block)
-            super(html_tag, text, options, &block)
-            Matestack::Ui::Core::Context.async_components = {} if Matestack::Ui::Core::Context.async_components.nil?
-            Matestack::Ui::Core::Context.async_components[self.ctx.id] = self
-          end
-
-          def create_children(&block)
-            self.response &block
-          end
-
-          def response
-            if params[:component_key] && !is_not_requested?
-              div async_attributes do
-                yield
-              end
-            else
-              vue_component do
-                div class: 'matestack-async-component-container', 'v-bind:class': '{ "loading": loading === true }' do
-                  div class: 'matestack-async-component-wrapper', 'v-if': 'asyncTemplate == null', 'v-bind:class': '{ "loading": loading === true }' do
-                    div async_attributes do
-                      if params[:component_key]
-                        # we need to yield if a request is looking for a async component, indicated through present params[:component_key]
-                        # the requested component could be hidden within this deferred async!
-                        yield
-                      else
-                        yield unless is_deferred?
-                      end
-                    end
-                  end
-                  div class: 'matestack-async-component-wrapper', 'v-if': 'asyncTemplate != null', 'v-bind:class': '{ "loading": loading === true }' do
-                    Matestack::Ui::Core::Base.new('v-runtime-template', ':template': 'asyncTemplate')
-                  end
-                end
-              end
-            end
-          end
-
-          def async_attributes
-            options.merge({
-              id: ctx.id, 
-              class: 'matestack-async-component-root', 
-              'v-if': 'showing'
-            })
-          end
-
-          def vue_props
-            {
-              component_key: ctx.id,
-              show_on: ctx.show_on,
-              hide_on: ctx.hide_on,
-              rerender_on: ctx.rerender_on,
-              defer: ctx.defer,
-              parent_class: isolated_parent ? isolated_parent.class.to_s : nil,
-            }
-          end
-
-          def is_deferred?
-            ctx.defer
-          end
-
-          def is_not_requested?
-            params[:component_key].present? && params[:component_key] != ctx.id
-          end
-
-          def isolated_parent
-            Matestack::Ui::Core::Context.isolated_parent
-          end
-
-        end
-      end
-    end
-  end
-end

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

@@ -1,100 +0,0 @@
-import Vue from 'vue/dist/vue.esm'
-import VRuntimeTemplate from "v-runtime-template"
-import matestackEventHub from '../event_hub'
-import componentMixin from './mixin'
-
-const componentDef = {
-  mixins: [componentMixin],
-  props: {
-    initialTemplate: String,
-  },
-  data: function(){
-    return {
-      cableTemplate: null,
-      cableTemplateDomElement: null,
-      loading: false,
-      event: {
-        data: {}
-      }
-    }
-  },
-  methods: {
-    append: function(payload){
-      var html = this.formatPayload(payload)
-      this.cableTemplateDomElement.insertAdjacentHTML(
-        'beforeend',
-        html.join('')
-      )
-      this.updateCableTemplate()
-    },
-    prepend: function(payload){
-      var html = this.formatPayload(payload)
-      this.cableTemplateDomElement.insertAdjacentHTML(
-        'afterbegin',
-        html.join('')
-      )
-      this.updateCableTemplate()
-    },
-    delete: function(payload){
-      var ids = this.formatPayload(payload)
-      ids.forEach(id =>
-        this.cableTemplateDomElement.querySelector('#' + id).remove()
-      )
-      this.updateCableTemplate()
-    },
-    update: function(payload){
-      const self = this
-      var html = this.formatPayload(payload)
-      html.forEach(function(elem){
-        var dom_elem = document.createElement('div')
-        dom_elem.innerHTML = elem.replace(/^\s+|\s+$/g, '')
-        var id = dom_elem.firstChild.id
-        var old_elem = self.cableTemplateDomElement.querySelector('#' + id)
-        old_elem.parentNode.replaceChild(dom_elem.firstChild, old_elem)
-      })
-      this.updateCableTemplate()
-    },
-    replace: function(payload){
-      var html = this.formatPayload(payload)
-      this.cableTemplateDomElement.innerHTML = html.join('')
-      this.updateCableTemplate()
-    },
-    updateCableTemplate: function(){
-      this.cableTemplate = this.cableTemplateDomElement.outerHTML
-    },
-    formatPayload: function(payload){
-      if(!Array.isArray(payload.data)){
-        return [payload.data]
-      }
-      return payload.data
-    },
-  },
-  mounted: function() {
-    const self = this
-    var dom_elem = document.createElement('div')
-    dom_elem.innerHTML = this.initialTemplate
-    this.cableTemplateDomElement = dom_elem.querySelector("#" + this.props["id"])
-    this.cableTemplate = this.cableTemplateDomElement.outerHTML
-    this.registerEvents(this.props['append_on'], self.append)
-    this.registerEvents(this.props['prepend_on'], self.prepend)
-    this.registerEvents(this.props['delete_on'], self.delete)
-    this.registerEvents(this.props['update_on'], self.update)
-    this.registerEvents(this.props['replace_on'], self.replace)
-  },
-  beforeDestroy: function() {
-    const self = this
-    this.cableTemplate = null
-    this.removeEvents(this.props['append_on'], self.append)
-    this.removeEvents(this.props['prepend_on'], self.prepend)
-    this.removeEvents(this.props['delete_on'], self.delete)
-    this.removeEvents(this.props['update_on'], self.update)
-    this.removeEvents(this.props['replace_on'], self.replace)
-  },
-  components: {
-    VRuntimeTemplate: VRuntimeTemplate
-  }
-}
-
-let component = Vue.component('matestack-ui-core-cable', componentDef)
-
-export default componentDef

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

@@ -1,69 +0,0 @@
-module Matestack
-  module Ui
-    module VueJs
-      module Components
-        class Cable < Matestack::Ui::VueJs::Vue
-          vue_name 'matestack-ui-core-cable'
-
-          attr_accessor :block_content
-
-          required :id
-          optional :append_on, :prepend_on, :delete_on, :update_on, :replace_on
-
-          def create_children(&block)
-            # first render block content
-            self.block_content = content(&block).render_content if block_given?
-            super
-          end
-
-          def content(&block)
-            Matestack::Ui::Core::Base.new(:without_parent, nil, nil) do
-              div(class: 'matestack-cable-component-root', id: ctx.id, &block)
-            end
-          end
-
-          def component_attributes
-            super.merge('v-bind:initial-template': "#{self.block_content.to_json}")
-          end
-
-          def response
-            div container_attributes do
-              div wrapper_attributes do
-                Matestack::Ui::Core::Base.new('v-runtime-template', ':template': 'cableTemplate')
-              end
-            end
-          end
-
-          def container_attributes
-            {
-              class: 'matestack-cable-component-container',
-              'v-bind:class': '{ loading: loading === true }'
-            }
-          end
-
-          def wrapper_attributes
-            {
-              class: 'matestack-cable-component-wrapper',
-              'v-if': 'cableTemplate != null', 
-              'v-bind:class': '{ loading: loading === true }'
-            }
-          end
-
-          def vue_props
-            {
-              id: ctx.id,
-              component_key: ctx.id,
-              # events
-              append_on: ctx.append_on,
-              prepend_on: ctx.prepend_on,
-              delete_on: ctx.delete_on,
-              update_on: ctx.update_on,
-              replace_on: ctx.replace_on,
-            }
-          end
-
-        end
-      end
-    end
-  end
-end

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

@@ -1,97 +0,0 @@
-import Vue from 'vue/dist/vue.esm'
-import matestackEventHub from '../../event_hub'
-import queryParamsHelper from '../../helpers/query_params_helper'
-import componentMixin from '../mixin'
-
-const componentDef = {
-  mixins: [componentMixin],
-  data: function(){
-    return {
-      currentLimit: null,
-      currentOffset: null,
-      currentFilteredCount: null,
-      currentBaseCount: null
-    }
-  },
-  methods: {
-    next: function(){
-      if (this.currentTo() < this.currentCount()){
-        this.currentOffset += this.currentLimit
-        var url = queryParamsHelper.updateQueryParams(this.props["id"] + "-offset", this.currentOffset)
-        window.history.pushState({matestackApp: true, url: url}, null, url);
-        matestackEventHub.$emit(this.props["id"] + "-update")
-      }
-    },
-    previous: function(){
-      if ((this.currentOffset - this.currentLimit)*-1 != this.currentLimit){
-        if((this.currentOffset - this.currentLimit) < 0){
-          this.currentOffset = 0
-        } else {
-          this.currentOffset -= this.currentLimit
-        }
-        var url = queryParamsHelper.updateQueryParams(this.props["id"] + "-offset", this.currentOffset)
-        window.history.pushState({matestackApp: true, url: url}, null, url);
-        matestackEventHub.$emit(this.props["id"] + "-update")
-      }
-    },
-    currentTo: function(){
-      var to = parseInt(this.currentOffset) + parseInt(this.currentLimit)
-      if (to > parseInt(this.currentCount())){
-        return this.currentCount();
-      } else {
-        return to;
-      }
-    },
-    currentCount: function(){
-      if (this.currentFilteredCount != null || this.currentFilteredCount != undefined){
-        return this.currentFilteredCount;
-      } else {
-        return this.currentBaseCount;
-      }
-    },
-    goToPage: function(page){
-      this.currentOffset = parseInt(this.currentLimit) * (parseInt(page)-1)
-      var url = queryParamsHelper.updateQueryParams(this.props["id"] + "-offset", this.currentOffset)
-      window.history.pushState({matestackApp: true, url: url}, null, url);
-      matestackEventHub.$emit(this.props["id"] + "-update")
-    }
-  },
-  mounted: function(){
-    if(queryParamsHelper.getQueryParam(this.props["id"] + "-offset") != null){
-        this.currentOffset = parseInt(queryParamsHelper.getQueryParam(this.props["id"] + "-offset"))
-    } else {
-      if(this.props["init_offset"] != undefined){
-        this.currentOffset = this.props["init_offset"]
-      } else {
-        this.currentOffset = 0
-      }
-    }
-
-    if(queryParamsHelper.getQueryParam(this.props["id"] + "-limit") != null){
-        this.currentOffset = parseInt(queryParamsHelper.getQueryParam(this.props["id"] + "-limit"))
-    } else {
-      if(this.props["init_limit"] != undefined){
-        this.currentLimit = this.props["init_limit"]
-      } else {
-        this.currentLimit = 10
-      }
-    }
-
-    if(this.props["filtered_count"] != undefined){
-      this.currentFilteredCount = this.props["filtered_count"]
-      if(this.currentOffset >= this.currentFilteredCount){
-        this.previous()
-      }
-    }
-    if(this.props["base_count"] != undefined){
-      this.currentBaseCount = this.props["base_count"]
-      if(this.currentOffset >= this.currentBaseCount){
-        this.previous()
-      }
-    }
-  }
-}
-
-let component = Vue.component('matestack-ui-core-collection-content', componentDef)
-
-export default componentDef

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

@@ -1,32 +0,0 @@
-module Matestack
-  module Ui
-    module VueJs
-      module Components
-        module Collection
-          class Content < Matestack::Ui::VueJs::Vue
-            vue_name 'matestack-ui-core-collection-content'
-
-            required :id
-            optional :init_limit, :filtered_count, :base_count
-
-            def response
-              div class: "matestack-ui-core-collection-content" do
-                yield
-              end
-            end
-
-            def vue_props
-              {
-                id: ctx.id,
-                init_limit: ctx.init_limit,
-                filtered_count: ctx.filtered_count,
-                base_count: ctx.base_count
-              }
-            end
-
-          end
-        end
-      end
-    end
-  end
-end