matestack-ui-core 1.5.0 → 3.0.0.rc1

data/app/concepts/matestack/ui/core/form/form.rb

@@ -1,104 +0,0 @@
-module Matestack::Ui::Core::Form
-  class Form < Matestack::Ui::Core::Component::Dynamic
-    vue_js_component_name "matestack-ui-core-form"
-    
-    html_attributes :'accept-charset', :action, :autocomplete, :enctype, :method, :name, :novalidate, :rel, :target
-
-    requires :path, for: { as: :for_option }, method: { as: :form_method }
-    optional :success, :failure, :multipart, params: { as: :form_params }
-
-    def setup
-      begin
-        @component_config[:for] = form_wrapper
-        @component_config[:submit_path] = submit_path
-        @component_config[:method] = form_method
-        @component_config[:success] = success
-        @component_config[:multipart] = multipart == true
-        unless success.nil?
-          unless success[:transition].nil?
-            @component_config[:success][:transition][:path] = transition_path success
-          end
-          unless success[:redirect].nil?
-            @component_config[:success][:redirect][:path] = redirect_path success
-          end
-        end
-        @component_config[:failure] = failure
-        unless failure.nil?
-          unless failure[:transition].nil?
-            @component_config[:failure][:transition][:path] = transition_path failure
-          end
-          unless failure[:redirect].nil?
-            @component_config[:failure][:redirect][:path] = redirect_path failure
-          end
-        end
-      rescue => e
-        raise "Form component could not be setted up. Reason: #{e}"
-      end
-    end
-
-    def form_attributes
-      html_attributes.merge({
-        "@submit.prevent": true,
-        "class": "matestack-form #{options[:class]}",
-        "v-bind:class": "{ 'has-errors': hasErrors(), 'loading': loading }"
-      })
-    end
-
-    def submit_path
-      begin
-        if path.is_a?(Symbol)
-          return ::Rails.application.routes.url_helpers.send(path, form_params)
-        else
-          return path
-        end
-      rescue
-        raise "Submit path not found"
-      end
-    end
-
-    def transition_path callback_options
-      begin
-        if callback_options[:transition][:path].is_a?(Symbol)
-          return ::Rails.application.routes.url_helpers.send(
-            callback_options[:transition][:path],
-            callback_options[:transition][:params]
-          )
-        else
-          return callback_options[:transition][:path]
-        end
-      rescue
-        raise "Transition path not found"
-      end
-    end
-
-    def redirect_path callback_options
-      begin
-        if callback_options[:redirect][:path].is_a?(Symbol)
-          return ::Rails.application.routes.url_helpers.send(
-            callback_options[:redirect][:path],
-            callback_options[:redirect][:params]
-          )
-        else
-          return callback_options[:redirect][:path]
-        end
-      rescue
-        raise "Redirect path not found"
-      end
-    end
-
-    def form_wrapper
-      case for_option
-      when Symbol
-        return for_option
-      when String
-        return for_option
-      end
-
-      if for_option.respond_to?(:model_name)
-        return for_option.model_name.singular
-      end
-    end
-
-
-  end
-end

data/app/concepts/matestack/ui/core/form/has_errors.rb

@@ -1,54 +0,0 @@
-module Matestack::Ui::Core::Form::HasErrors
-
-  def self.included(base)
-    base.class_eval do
-      optional :errors
-    end
-  end
-
-  def error_key
-    "errors['#{key.to_s}']"
-  end
-
-  # error partial
-  # overwrite render_errors to customize error rendering
-  def render_errors
-    unless @included_config[:errors] == false && (errors == false || errors.nil?) || errors == false
-      self.send(wrapper_tag, class: wrapper_class, attributes: { 'v-if': error_key }) do
-        self.send(error_tag, class: error_class, attributes: { 'v-for': "error in #{error_key}" }) do
-          plain '{{ error }}'
-        end
-      end
-    end
-  end
-
-  def wrapper_tag
-    tag = get_error_config(@included_config[:errors], :wrapper, :tag) || :span
-    tag = get_error_config(errors, :wrapper, :tag) || tag
-  end
-
-  def wrapper_class
-    klass = get_error_config(@included_config[:errors], :wrapper, :class) || 'errors'
-    klass = get_error_config(errors, :wrapper, :class) || klass
-  end
-
-  def error_tag
-    tag = get_error_config(@included_config[:errors], :tag) || :span
-    tag = get_error_config(errors, :tag) || tag
-  end
-
-  def error_class
-    klass = get_error_config(@included_config[:errors], :class) || 'error'
-    klass = get_error_config(errors, :class) || klass
-  end
-
-  def input_error_class
-    klass = get_error_config(@included_config[:errors], :input, :class) || 'error'
-    klass = get_error_config(errors, :input, :class) || klass
-  end
-
-  def get_error_config(hash, *keys)
-    hash.dig(*keys) if hash.is_a?(Hash) && hash.dig(*keys)
-  end
-  
-end

data/app/concepts/matestack/ui/core/form/has_input_html_attributes.rb

@@ -1,13 +0,0 @@
-module Matestack::Ui::Core::Form::HasInputHtmlAttributes
-
-  def self.included(base)
-    base.class_eval do
-      html_attributes(
-        :accept, :alt, :autocomplete, :autofocus, :checked, :dirname, :disabled, :form, :formaction, 
-        :formenctype, :formmethod, :formnovalidate, :formtarget, :height, :list, :max, :maxlength, :min, :minlength, 
-        :multiple, :name, :pattern, :placeholder, :readonly, :required, :size, :src, :step, :type, :value, :width
-      )
-    end
-  end
-
-end

data/app/concepts/matestack/ui/core/form/input/base.rb

@@ -1,75 +0,0 @@
-require_relative '../utils'
-require_relative '../has_input_html_attributes'
-require_relative '../has_errors'
-module Matestack::Ui::Core::Form::Input
-  class Base < Matestack::Ui::Core::Component::Dynamic
-    include Matestack::Ui::Core::Form::Utils
-    include Matestack::Ui::Core::Form::HasInputHtmlAttributes
-    include Matestack::Ui::Core::Form::HasErrors
-
-    requires :key, :type
-    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
-
-    def setup
-      @component_config[:init_value] = init_value
-    end
-
-    def component_id
-      "input-component-for-#{attr_key}"
-    end
-
-    def input_attributes
-      html_attributes.merge(attributes: vue_attributes)
-    end
-
-    def input_key
-      "$parent.data[\"#{key}\"]"
-    end
-
-    def error_key
-      "$parent.errors[\"#{key}\"]"
-    end
-
-    def change_event
-      "inputChanged('#{attr_key}'); #{ "filesAdded('#{attr_key}');" if type == :file }".strip
-    end
-
-    def vue_attributes
-      (options[:attributes] || {}).merge({
-        "@change": change_event,
-        ref: "input.#{attr_key}",
-        'init-value': init_value,
-        'v-bind:class': "{ '#{input_error_class}': #{error_key} }"
-      }).merge(
-        type != :file ? { "#{v_model_type}": input_key } : {}
-      ) # file inputs are readonly, no v-model possible
-    end
-
-    def v_model_type
-      if type == :number || init_value.is_a?(Integer)
-        'v-model.number'
-      else
-        'v-model'
-      end
-    end
-
-    def custom_options_validation
-      raise "included form config is missing, please add ':include' to parent form component" if @included_config.nil?
-    end
-
-    def attr_key
-      super + "#{'[]' if multiple && type == :file}"
-    end
-
-    private
-
-    def parse_value(value)
-      if [true, false].include? value
-        value ? 1 : 0
-      else
-        return value
-      end
-    end
-
-  end
-end

data/app/concepts/matestack/ui/core/form/input/input.js

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

data/app/concepts/matestack/ui/core/form/input/input.rb

@@ -1,17 +0,0 @@
-require_relative './base'
-
-module Matestack::Ui::Core::Form::Input
-  class Input < Base
-
-    vue_js_component_name "matestack-ui-core-form-input"
-
-    def response
-      div class: "matestack-ui-core-form-input" do
-        label text: input_label if input_label
-        input input_attributes
-        render_errors
-      end
-    end
-
-  end
-end

data/app/concepts/matestack/ui/core/form/input/mixin.js

@@ -1,55 +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.$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.$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();
-    }
-  }
-
-}
-
-export default formInputMixin

data/app/concepts/matestack/ui/core/form/radio/base.rb

@@ -1,90 +0,0 @@
-require_relative '../utils'
-require_relative '../has_input_html_attributes'
-require_relative '../has_errors'
-module Matestack::Ui::Core::Form::Radio
-  class Base < Matestack::Ui::Core::Component::Dynamic
-    include Matestack::Ui::Core::Form::Utils
-    include Matestack::Ui::Core::Form::HasInputHtmlAttributes
-    include Matestack::Ui::Core::Form::HasErrors
-
-    requires :key
-    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }, options: { as: :radio_options }
-
-    def setup
-      @component_config[:init_value] = init_value
-    end
-
-    def component_id
-      "radio-component-for-#{attr_key}"
-    end
-
-    def input_key
-      "$parent.data[\"#{key}\"]"
-    end
-
-    def error_key
-      "$parent.errors[\"#{key}\"]"
-    end
-
-    def change_event
-      "inputChanged('#{attr_key}')"
-    end
-
-    def render_options
-      radio_options.to_a.each do |item|
-        input radio_attributes(item)
-        label text: item_label(item), for: id_for_item(item_value(item))
-      end
-    end
-
-    def radio_attributes(item)
-      html_attributes.merge(
-        attributes: vue_attributes,
-        type: :radio,
-        id: "#{id_for_item(item_value(item))}",
-        name: item_name(item),
-        value: item_value(item),
-      )
-    end
-
-    def vue_attributes
-      (options[:attributes] || {}).merge({
-        "@change": change_event,
-        ref: "select.#{attr_key}",
-        'init-value': init_value,
-        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
-        'value-type': value_type,
-        "#{v_model_type}": input_key,
-      })
-    end
-
-    def value_type
-      item_value(radio_options.first).is_a?(Integer) ? Integer : nil
-    end
-
-    def item_value(item)
-      item.is_a?(Array) ? item.last : item
-    end
-
-    def item_name(item)
-      "#{attr_key}_#{item.is_a?(Array) ? item.first : item}"
-    end
-
-    def item_label(item)
-      item.is_a?(Array) ? item.first : item
-    end
-
-    def v_model_type
-      if radio_options && item_value(radio_options.first).is_a?(Integer)
-        'v-model.number'
-      else
-        'v-model'
-      end
-    end
-
-    def id_for_item(value)
-      "#{html_attributes[:id] || attr_key}_#{value}"
-    end
-
-  end
-end

data/app/concepts/matestack/ui/core/form/radio/mixin.js

@@ -1,62 +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.$forceUpdate();
-      }, 1);
-    },
-    inputChanged: function (key) {
-      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();
-    }
-  }
-
-}
-
-export default formRadioMixin

data/app/concepts/matestack/ui/core/form/radio/radio.js

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

data/app/concepts/matestack/ui/core/form/radio/radio.rb

@@ -1,16 +0,0 @@
-require_relative './base'
-
-module Matestack::Ui::Core::Form::Radio
-  class Radio < Base
-
-    vue_js_component_name "matestack-ui-core-form-radio"
-
-    def response
-      div class: "matestack-ui-core-form-radio" do
-        render_options
-        render_errors
-      end
-    end
-
-  end
-end

data/app/concepts/matestack/ui/core/form/select/base.rb

@@ -1,98 +0,0 @@
-require_relative '../utils'
-require_relative '../has_errors'
-module Matestack::Ui::Core::Form::Select
-  class Base < Matestack::Ui::Core::Component::Dynamic
-    include Matestack::Ui::Core::Form::Utils
-    include Matestack::Ui::Core::Form::HasErrors
-
-    html_attributes :autofocus, :disabled, :form, :multiple, :name, :required, :size
-
-    requires :key
-    optional :multiple, :init, :placeholder, :disabled_values,
-      for: { as: :input_for },
-      label: { as: :input_label },
-      options: { as: :select_options }
-
-    def setup
-      @component_config[:init_value] = init_value
-    end
-
-
-    def component_id
-      "select-component-for-#{attr_key}"
-    end
-
-    def select_attributes
-      html_attributes.merge(attributes: vue_attributes)
-    end
-
-    def render_options
-      if placeholder
-        option value: 'null', disabled: true, selected: init_value.nil?, text: placeholder
-      end
-      select_options.to_a.each do |item|
-        option value: item_value(item), disabled: item_disabled(item), text: item_label(item)
-      end
-    end
-
-    def input_key
-      "$parent.data[\"#{key}\"]"
-    end
-
-    def error_key
-      "$parent.errors[\"#{key}\"]"
-    end
-
-    def change_event
-      "inputChanged('#{attr_key}')"
-    end
-
-    def vue_attributes
-      (options[:attributes] || {}).merge({
-        "@change": change_event,
-        ref: vue_ref,
-        'init-value': init_value || [],
-        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
-        'value-type': value_type,
-        "#{v_model_type}": input_key,
-      })
-    end
-
-    def vue_ref
-      "select#{'.multiple' if multiple}.#{attr_key}"
-    end
-
-    def value_type
-      item_value(select_options.first).is_a?(Integer) ? Integer : nil
-    end
-
-    def item_value(item)
-      item.is_a?(Array) ? item.last : item
-    end
-
-    def item_name(item)
-      "#{attr_key}_#{item.is_a?(Array) ? item.first : item}"
-    end
-
-    def item_disabled(item)
-      disabled_values.present? && disabled_values.include?(item_value(item))
-    end
-
-    def item_label(item)
-      item.is_a?(Array) ? item.first : item
-    end
-
-    def v_model_type
-      if select_options && item_value(select_options.first).is_a?(Integer) && !multiple
-        'v-model.number'
-      else
-        'v-model'
-      end
-    end
-
-    def id_for_item(value)
-      "#{html_attributes[:id]}_#{value}"
-    end
-
-  end
-end

data/app/concepts/matestack/ui/core/form/select/mixin.js

@@ -1,58 +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.$forceUpdate()
-      }, 1);
-    },
-    inputChanged: function (key) {
-      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();
-    }
-  }
-
-}
-
-export default formSelectMixin

data/app/concepts/matestack/ui/core/form/select/select.js

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