matestack-ui-core 1.1.0 → 1.4.0

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

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

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

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

@@ -1,68 +1,19 @@
-require_relative '../utils'
-require_relative '../has_errors'
-module Matestack::Ui::Core::Form::Select
-  class Select < Matestack::Ui::Core::Component::Static
-    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 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
+require_relative './base'
 
-    def item_disabled(item)
-      disabled_values.present? && disabled_values.include?(item_value(item))
-    end
+module Matestack::Ui::Core::Form::Select
+  class Select < Base
 
-    def item_label(item)
-      item.is_a?(Array) ? item.first : item
-    end
+    vue_js_component_name "matestack-ui-core-form-select"
 
-    def v_model_type
-      if select_options && item_value(select_options.first).is_a?(Integer) && !multiple
-        'v-model.number'
-      else
-        'v-model'
+    def response
+      div class: "matestack-ui-core-form-select" do
+        label text: input_label if input_label
+        select select_attributes do
+          render_options
+        end
+        render_errors
       end
     end
 
-    def change_event
-      "inputChanged('#{attr_key}')"
-    end
-
-    def id_for_item(value)
-      "#{html_attributes[:id]}_#{value}"
-    end
-
   end
 end

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

@@ -0,0 +1,12 @@
+module Matestack::Ui::Core::Form::Submit
+  class Base < Matestack::Ui::Core::Component::Dynamic
+
+    def submit_attributes
+      html_attributes.merge!({
+        "@click.prevent": "$parent.perform",
+        "v-bind:class": "{ 'loading': $parent.loading }"
+      })
+    end
+
+  end
+end

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

@@ -0,0 +1,19 @@
+import Vue from "vue/dist/vue.esm";
+
+import componentMixin from "../../component/component";
+
+const componentDef = {
+  mixins: [componentMixin],
+  data() {
+    return {};
+  },
+  methods: {
+    loading: function(){
+      return this.$parent.loading;
+    }
+  }
+}
+
+let component = Vue.component("matestack-ui-core-form-submit", componentDef);
+
+export default componentDef;

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

@@ -1,11 +1,14 @@
+require_relative './base'
+
 module Matestack::Ui::Core::Form::Submit
-  class Submit < Matestack::Ui::Core::Component::Static
+  class Submit < Base
+
+    vue_js_component_name "matestack-ui-core-form-submit"
 
-    def submit_attributes
-      html_attributes.merge!({
-        "@click.prevent": "perform",
-        "v-bind:class": "{ 'loading': loading }"
-      })
+    def response
+      span attributes: submit_attributes do
+        yield_components
+      end
     end
 
   end

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

@@ -0,0 +1,49 @@
+require_relative '../utils'
+require_relative '../has_errors'
+module Matestack::Ui::Core::Form::Textarea
+  class Base < Matestack::Ui::Core::Component::Dynamic
+    include Matestack::Ui::Core::Form::Utils
+    include Matestack::Ui::Core::Form::HasErrors
+
+    requires :key
+    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
+
+    html_attributes :autofocus, :cols, :dirname, :disabled, :form, :maxlength,
+      :name, :placeholder, :readonly, :required, :rows, :wrap
+
+    def setup
+      @component_config[:init_value] = init_value
+    end
+
+    def component_id
+      "textarea-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 textarea_attributes
+      html_attributes.merge(attributes: vue_attributes)
+    end
+
+    def vue_attributes
+      (options[:attributes] || {}).merge({
+        'v-model': input_key,
+        '@change': change_event,
+        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+        "init-value": init_value,
+        ref: "input.#{attr_key}",
+      })
+    end
+
+  end
+end

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

@@ -0,0 +1,41 @@
+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.$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 formTextareaMixin

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

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

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

@@ -1,28 +1,17 @@
-require_relative '../utils'
-require_relative '../has_errors'
+require_relative './base'
+
 module Matestack::Ui::Core::Form::Textarea
-  class Textarea < Matestack::Ui::Core::Textarea::Textarea
-    include Matestack::Ui::Core::Form::Utils
-    include Matestack::Ui::Core::Form::HasErrors
+  class Textarea < Base
 
-    requires :key
-    optional :multiple, :init, for: { as: :input_for }, label: { as: :input_label }
+    vue_js_component_name "matestack-ui-core-form-textarea"
 
     def response
-      label text: input_label if input_label
-      textarea html_attributes.merge(attributes: vue_attributes)
-      render_errors
+      div class: "matestack-ui-core-form-textarea" do
+        label text: input_label if input_label
+        textarea textarea_attributes
+        render_errors
+      end
     end
 
-    def vue_attributes
-      (options[:attributes] || {}).merge({
-        'v-model': input_key,
-        '@change': "inputChanged('#{attr_key}')",
-        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
-        "init-value": init_value,
-        ref: "input.#{attr_key}",
-      })
-    end
-    
   end
-end
+end

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

@@ -13,6 +13,17 @@ import anonymDynamicComponent from '../component/anonym-dynamic-component'
 import transition from '../transition/transition'
 import action from '../action/action'
 import form from '../form/form'
+import formInput from '../form/input/input'
+import formInputMixin from '../form/input/mixin'
+import formSelect from '../form/select/select'
+import formSelectMixin from '../form/select/mixin'
+import formRadio from '../form/radio/radio'
+import formRadioMixin from '../form/radio/mixin'
+import formCheckbox from '../form/checkbox/checkbox'
+import formCheckboxMixin from '../form/checkbox/mixin'
+import formTextarea from '../form/textarea/textarea'
+import formTextareaMixin from '../form/textarea/mixin'
+import formSubmit from '../form/submit/submit'
 import onclick from '../onclick/onclick'
 import collectionContent from '../collection/content/content'
 import collectionFilter from '../collection/filter/filter'

data/app/concepts/matestack/ui/core/{form/submit/submit.haml → select/select.haml}

@@ -1,3 +1,3 @@
-%span{ submit_attributes }
+%select{ html_attributes }
   - if block_given?
     = yield

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

@@ -0,0 +1,7 @@
+module Matestack::Ui::Core::Select
+  class Select < Matestack::Ui::Core::Component::Static
+
+    html_attributes :autofocus, :disabled, :form, :multiple, :name, :required, :size
+
+  end
+end

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

@@ -1,4 +1,4 @@
-require_dependency "cell/partial"
+require "cell/partial"
 
 module Matestack::Ui::Core::View
   class View < Matestack::Ui::Core::Component::Static
@@ -15,7 +15,7 @@ module Matestack::Ui::Core::View
         controller.render_to_string view_path, layout: false, locals: locals
       elsif partial_path
         controller.render_to_string partial: partial_path, layout: false, locals: locals
-      else  
+      else
         raise 'view or partial param missing for RailsView Component'
       end
     end

data/app/helpers/matestack/ui/core/application_helper.rb

@@ -102,8 +102,8 @@ module Matestack
           controller = (self.class <= ActionController::Base) ? self : @_controller
           context = (options[:matestack_context] ||= {}).merge(controller: controller)
           Matestack::Ui::Core::Component::Base
-            .new(options.merge(matestack_context: context))
-            .send(component, options.merge(matestack_context: context), &block).to_s
+            .new(options.merge(context: context, matestack_context: context))
+            .send(component, options.merge(context: context, matestack_context: context), &block).to_s
         end
       end
     end

data/app/javascript/matestack-ui-core/index.js

@@ -5,6 +5,11 @@ import axios from 'axios'
 // Import from app/concepts/matestack/ui/core:
 import matestackEventHub from '../../../app/concepts/matestack/ui/core/js/event-hub'
 import componentMixin from '../../../app/concepts/matestack/ui/core/component/component'
+import formInputMixin from '../../../app/concepts/matestack/ui/core/form/input/mixin'
+import formSelectMixin from '../../../app/concepts/matestack/ui/core/form/select/mixin'
+import formRadioMixin from '../../../app/concepts/matestack/ui/core/form/radio/mixin'
+import formCheckboxMixin from '../../../app/concepts/matestack/ui/core/form/checkbox/mixin'
+import formTextareaMixin from '../../../app/concepts/matestack/ui/core/form/textarea/mixin'
 import matestackUiCore from '../../../app/concepts/matestack/ui/core/js/core'
 
 import styles from './styles/index.scss'
@@ -14,9 +19,14 @@ const MatestackUiCore = {
   Vuex,
   axios,
   matestackEventHub,
-  componentMixin
+  componentMixin,
+  formInputMixin,
+  formSelectMixin,
+  formCheckboxMixin,
+  formTextareaMixin,
+  formRadioMixin
 }
 
 window.MatestackUiCore = MatestackUiCore
 
-export default MatestackUiCore
+export default MatestackUiCore