matestack-ui-core 2.0.0 → 3.0.0.rc2

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

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

@@ -1,83 +0,0 @@
-const formCheckboxMixin = {
-  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)
-            }
-          }
-        } else {
-          if (initValue) {
-            if(initValue["value"] === "true"){
-              data[key.replace("input.", "")] = true;
-              Object.assign(self.$parent.data, data);
-              self.afterInitialize(true)
-            }
-            if(initValue["value"] === "false"){
-              data[key.replace("input.", "")] = false;
-              Object.assign(self.$parent.data, data);
-              self.afterInitialize(false)
-            }
-          } 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 formCheckboxMixin

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

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

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

@@ -1,275 +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 {
-      data: {},
-      errors: {},
-      loading: false
-    };
-  },
-  methods: {
-    initDataKey: function (key, initValue) {
-      this.data[key] = initValue;
-    },
-    updateFormValue: function (key, value) {
-      this.data[key] = value;
-    },
-    hasErrors: function(){
-      //https://stackoverflow.com/a/27709663/13886137
-      for (var key in this.errors) {
-        if (this.errors[key] !== null && this.errors[key] != ""){
-          return true;
-        }
-      }
-      return false;
-    },
-    resetErrors: function (key) {
-      if (this.errors[key]) {
-        this.errors[key] = null;
-      }
-    },
-    setProps: function (flat, newVal) {
-      for (var i in flat) {
-        if (flat[i] === null){
-          flat[i] = newVal;
-        } else if (flat[i] instanceof File){
-          flat[i] = newVal;
-          this.$refs["input-component-for-"+i].value = newVal
-        } else if (flat[i] instanceof Array) {
-          if(flat[i][0] instanceof File){
-            flat[i] = newVal
-            this.$refs["input-component-for-"+i].value = newVal
-          }
-        } else if (typeof flat[i] === "object" && !(flat[i] instanceof Array)) {
-          setProps(flat[i], newVal);
-        } else {
-          flat[i] = newVal;
-        }
-      }
-    },
-    initValues: function () {
-      let self = this;
-      let data = {};
-      for (let key in self.$refs) {
-        if (key.startsWith("input-component")) {
-          self.$refs[key].initialize()
-        }
-        if (key.startsWith("textarea-component")) {
-          self.$refs[key].initialize()
-        }
-        if (key.startsWith("select-component")) {
-          self.$refs[key].initialize()
-        }
-        if (key.startsWith("radio-component")) {
-          self.$refs[key].initialize()
-        }
-        if (key.startsWith("checkbox-component")) {
-          self.$refs[key].initialize()
-        }
-      }
-    },
-    shouldResetFormOnSuccessfulSubmit() {
-      const self = this;
-      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.props["method"] == "put") {
-        return false;
-      } else {
-        return true;
-      }
-    },
-    perform: function(){
-      const self = this
-      var form = self.$el.tagName == 'FORM' ? self.$el : self.$el.querySelector('form');
-      if(form.checkValidity()){
-        self.loading = true;
-        if (self.props["emit"] != undefined) {
-          matestackEventHub.$emit(self.props["emit"]);
-        }
-        if (self.props["delay"] != undefined) {
-          setTimeout(function () {
-            self.sendRequest()
-          }, parseInt(self.props["delay"]));
-        } else {
-          self.sendRequest()
-        }
-      } else {
-        matestackEventHub.$emit('static_form_errors');
-      }
-    },
-    sendRequest: function(){
-      const self = this;
-      let payload = {};
-      payload[self.props["for"]] = self.data;
-      let axios_config = {};
-      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.props["for"] + "[" + key.slice(0, -2) + "][]", file);
-            }
-          } else {
-            if (self.data[key] != null){
-              form_data.append(self.props["for"] + "[" + key + "]", self.data[key]);
-            }
-          }
-        }
-        axios_config = {
-          method: self.props["method"],
-          url: self.props["submit_path"],
-          data: form_data,
-          headers: {
-            "X-CSRF-Token": document.getElementsByName("csrf-token")[0].getAttribute("content"),
-            "Content-Type": "multipart/form-data",
-          },
-        };
-      } else {
-        axios_config = {
-          method: self.props["method"],
-          url: self.props["submit_path"],
-          data: payload,
-          headers: {
-            "X-CSRF-Token": document.getElementsByName("csrf-token")[0].getAttribute("content"),
-            "Content-Type": "application/json",
-          },
-        };
-      }
-      axios(axios_config)
-        .then(function (response) {
-          self.loading = false;
-          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;
-          }
-
-          if (self.shouldResetFormOnSuccessfulSubmit())
-          {
-            self.setProps(self.data, null);
-            self.initValues();
-          }
-        })
-        .catch(function (error) {
-          self.loading = false;
-          if (error.response && error.response.data && error.response.data.errors) {
-            self.errors = error.response.data.errors;
-          }
-          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;
-          }
-        });
-    },
-  },
-  mounted: function () {
-    this.initValues();
-  },
-};
-
-let component = Vue.component("matestack-ui-core-form", componentDef);
-
-export default componentDef;

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

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

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

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

@@ -1,37 +0,0 @@
-module Matestack
-  module Ui
-    module VueJs
-      module Components
-        module Form
-          class Input < Matestack::Ui::VueJs::Components::Form::Base
-            vue_name 'matestack-ui-core-form-input'
-
-            def response
-              div class: 'matestack-ui-core-form-input' do
-                label input_label, for: id if input_label
-                input input_attributes
-                render_errors
-              end
-            end
-
-            def component_id
-              "input-component-for-#{attribute_key}"
-            end
-
-            def input_attributes
-              attributes
-            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/input_mixin.js

@@ -1,58 +0,0 @@
-const formInputMixin = {
-  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);
-    },
-    filesAdded: function (key) {
-      const dataTransfer = event.dataTransfer || event.target;
-      const files = dataTransfer.files;
-      if (event.target.attributes.multiple) {
-        this.$parent.data[key] = [];
-        for (let index in files) {
-          if (files[index] instanceof File) {
-            this.$parent.data[key].push(files[index]);
-          }
-        }
-      } else {
-        this.$parent.data[key] = files[0];
-      }
-    },
-    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 formInputMixin

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

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