matestack-ui-core 2.0.0 → 3.0.0.rc2

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

@@ -1,76 +0,0 @@
-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/lib/matestack/ui/vue_js/components/form/radio_mixin.js

@@ -1,65 +0,0 @@
-const formRadioMixin = {
-  methods: {
-    initialize: function(){
-      const self = this
-      let data = {};
-
-      for (let key in self.$refs) {
-        let initValue = self.$refs[key]["attributes"]["init-value"];
-        let valueType = self.$refs[key]["attributes"]["value-type"];
-
-        if (key.startsWith("select.")) {
-          if (key.startsWith("select.multiple.")) {
-            if (initValue) {
-              data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
-              Object.assign(self.$parent.data, data);
-              self.afterInitialize(JSON.parse(initValue["value"]))
-            } else {
-              data[key.replace("select.multiple.", "")] = [];
-              Object.assign(self.$parent.data, data);
-              self.afterInitialize([])
-            }
-          } else {
-            if (initValue) {
-              if (valueType && valueType["value"] == "Integer") {
-                data[key.replace("select.", "")] = parseInt(initValue["value"]);
-                Object.assign(self.$parent.data, data);
-                self.afterInitialize(parseInt(initValue["value"]))
-              } else {
-                data[key.replace("select.", "")] = initValue["value"];
-                Object.assign(self.$parent.data, data);
-                self.afterInitialize(initValue["value"])
-              }
-            } else {
-              data[key.replace("select.", "")] = null;
-              Object.assign(self.$parent.data, data);
-              self.afterInitialize(null)
-            }
-          }
-        }
-      }
-
-      //without the timeout it's somehow not working
-      setTimeout(function () {
-        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.props["key"]] = value
-      this.$parent.$forceUpdate();
-      this.$forceUpdate();
-    }
-  }
-
-}
-
-export default formRadioMixin

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

@@ -1,15 +0,0 @@
-import Vue from "vue/dist/vue.esm";
-
-import formSelectMixin from "./select_mixin";
-import componentMixin from "../mixin";
-
-const componentDef = {
-  mixins: [componentMixin, formSelectMixin],
-  data() {
-    return {};
-  }
-}
-
-let component = Vue.component("matestack-ui-core-form-select", componentDef);
-
-export default componentDef;

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

@@ -1,88 +0,0 @@
-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/lib/matestack/ui/vue_js/components/form/select_mixin.js

@@ -1,61 +0,0 @@
-const formSelectMixin = {
-  methods: {
-    initialize: function(){
-      const self = this
-      let data = {};
-
-      for (let key in self.$refs) {
-        let initValue = self.$refs[key]["attributes"]["init-value"];
-        let valueType = self.$refs[key]["attributes"]["value-type"];
-
-        if (key.startsWith("select.")) {
-          if (key.startsWith("select.multiple.")) {
-            if (initValue) {
-              data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
-              self.afterInitialize(JSON.parse(initValue["value"]))
-            } else {
-              data[key.replace("select.multiple.", "")] = [];
-              self.afterInitialize([])
-            }
-          } else {
-            if (initValue) {
-              if (valueType && valueType["value"] == "Integer") {
-                data[key.replace("select.", "")] = parseInt(initValue["value"]);
-                self.afterInitialize(parseInt(initValue["value"]))
-              } else {
-                data[key.replace("select.", "")] = initValue["value"];
-                self.afterInitialize(initValue["value"])
-              }
-            } else {
-              data[key.replace("select.", "")] = null;
-              self.afterInitialize(null)
-            }
-          }
-        }
-      }
-
-      //without the timeout it's somehow not working
-      setTimeout(function () {
-        Object.assign(self.$parent.data, data);
-        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.props["key"]] = value
-      this.$parent.$forceUpdate();
-      this.$forceUpdate();
-    }
-  }
-
-}
-
-export default formSelectMixin

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

@@ -1,15 +0,0 @@
-import Vue from "vue/dist/vue.esm";
-
-import formTextareaMixin from "./textarea_mixin";
-import componentMixin from "../mixin";
-
-const componentDef = {
-  mixins: [componentMixin, formTextareaMixin],
-  data() {
-    return {};
-  }
-}
-
-let component = Vue.component("matestack-ui-core-form-textarea", componentDef);
-
-export default componentDef;

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

@@ -1,37 +0,0 @@
-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

@@ -1,44 +0,0 @@
-const formTextareaMixin = {
-  methods: {
-    initialize: function(){
-      const self = this
-      let data = {};
-
-      for (let key in this.$refs) {
-        let initValue = this.$refs[key]["attributes"]["init-value"];
-
-        if (initValue) {
-          data[key.replace("input.", "")] = initValue["value"];
-          Object.assign(self.$parent.data, data);
-          self.afterInitialize(initValue["value"])
-        } else {
-          data[key.replace("input.", "")] = null;
-          Object.assign(self.$parent.data, data);
-          self.afterInitialize(null)
-        }
-      }
-
-      //without the timeout it's somehow not working
-      setTimeout(function () {
-        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.props["key"]] = value
-      this.$parent.$forceUpdate();
-      this.$forceUpdate();
-    }
-  }
-
-}
-
-export default formTextareaMixin

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

@@ -1,108 +0,0 @@
-import Vue from 'vue/dist/vue.esm'
-import axios from 'axios'
-import VRuntimeTemplate from "v-runtime-template"
-import matestackEventHub from '../event_hub'
-
-const componentDef = {
-  props: ['props', 'params'],
-  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': document.getElementsByName("csrf-token")[0].getAttribute('content')
-        },
-        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
-  },
-  beforeDestroy: 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));
-    }
-
-  },
-  components: {
-    VRuntimeTemplate: VRuntimeTemplate
-  }
-}
-
-let component = Vue.component('matestack-ui-core-isolate', componentDef)
-
-export default componentDef

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

@@ -1,86 +0,0 @@
-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/lib/matestack/ui/vue_js/components/mixin.js

@@ -1,22 +0,0 @@
-import matestackEventHub from '../event_hub'
-
-const componentMixin = {
-  props: ['props', 'params'],
-  methods: {
-    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));
-      }
-    }
-  }
-
-}
-
-export default componentMixin

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

@@ -1,19 +0,0 @@
-import Vue from 'vue/dist/vue.esm'
-import matestackEventHub from '../event_hub'
-import componentMixin from './mixin'
-
-const componentDef = {
-  mixins: [componentMixin],
-  data: function(){
-    return { }
-  },
-  methods: {
-    perform: function(){
-      matestackEventHub.$emit(this.props["emit"], this.props["data"])
-    }
-  }
-}
-
-let component = Vue.component('matestack-ui-core-onclick', componentDef)
-
-export default componentDef

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

@@ -1,37 +0,0 @@
-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