matestack-ui-core 1.2.0 → 1.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9912bb90f1207c60c0e31895fabbe090e93bca8c63fe85a4c075b92386ed1a32
-  data.tar.gz: 768a1f1071275163d1a3870fb4d8401960b757fc803f3ab82b8bf17a3b4a22c2
+  metadata.gz: 355f4aad94fe47a7344717057594f5c540b323c054407da6333cd9a6c1b59235
+  data.tar.gz: 21c43c8fe8909738f8b1914c9f66b4085c19fa200eb177e07f47a1a865999398
 SHA512:
-  metadata.gz: d79c8aa967c5f223ff69b211eaa36d715bb0615a4eec5c303ea62b5f13e53fa7b4945778cf143ba9098c42f9608bc1da1d89f43f3689cb3239bf7cc79903b316
-  data.tar.gz: 8cff6d3684d75949299bce178f7c3114dbef3333fe794ef821df0422be2100f4f4c383e2f0c06348b03928518cd834729d4b9096b885c6f415615b2221a44f28
+  metadata.gz: fdeb8b0676fa23e2e8c1c38b0110c8b8ca334fd29f8ded46253fc067e893507624e6fdce349f07a54b44ea5f42d841b25348f5b5041038646986942cef1755cc
+  data.tar.gz: 5adf20510a4b1b243b9395b3028dbebedb38ddb87a94e80ea6911e69814031feae845181202192ac48483b9a4c0a0a440c8bb1df33541dd2a22d64304d99fe87

data/README.md

@@ -15,6 +15,8 @@ Reactivity included if desired.
 
 You end up writing 50% less code while increasing productivity, maintainability and developer happiness. Work with pure Ruby. If necessary, extend with pure JavaScript. No Opal involved.
 
+[<img src="https://img.youtube.com/vi/Mue5gs6Wtq4/0.jpg" width="350">](https://www.youtube.com/watch?v=Mue5gs6Wtq4)
+
 The main goals are:
 
 - More maintainable UI code, using a component-based structure written in Ruby
@@ -25,10 +27,34 @@ The main goals are:
 it alongside your classic views and incrementally turn your Rails-App into a
 dynamic Web-App.
 
+## Compatibility
+
+### Ruby/Rails
+
+`matestack-ui-core` is tested against:
+
+- Rails 6.1.1 + Ruby 3.0.0
+- Rails 6.1.1 + Ruby 2.7.2
+- Rails 6.0.3.4 + Ruby 2.6.6
+- Rails 5.2.4.4 + Ruby 2.6.6
+
+Rails versions below 5.2 are not supported.
+
+### Vue.js
+
+`matestack-ui-core` currently uses Vue.js 2.6.12 and Vuex 3.6.2 for its reactivity features.
+Custom reactive components are bound to these versions as well.
+
+Vue 3 / Vuex 4 update is planned for Q2 2021.
+
 ## Documentation/Installation
 
 Documentation can be found [here](https://docs.matestack.io)
 
+## Getting started
+
+A getting started guide can be found [here](https://docs.matestack.io/start/150-getting_started)
+
 ## Changelog
 
 Changelog can be found [here](./CHANGELOG.md)
@@ -342,7 +368,7 @@ class Components::Card < Matestack::Ui::Component
       heading size: 5, text: title if title.present?
     end
   end
-  
+
   def body_slot
     slot do
       paragraph class: "card-text", text: body

data/app/concepts/matestack/ui/core/cable/cable.haml

@@ -1,4 +1,4 @@
-%component{dynamic_tag_attributes.merge('initial-template': "#{render_content}")}
+%component{dynamic_tag_attributes.merge('v-bind:initial-template': "#{render_content.to_json}")}
   %div{class: "matestack-cable-component-container", "v-bind:class": "{ 'loading': loading === true }"}
     %div{class: "matestack-cable-component-wrapper", "v-if": "cableTemplate != null", "v-bind:class": "{ 'loading': loading === true }"}
       %v-runtime-template{":template":"cableTemplate"}

data/app/concepts/matestack/ui/core/collection/helper.rb

@@ -91,7 +91,13 @@ module Matestack::Ui::Core::Collection
       end
     end
 
-    def set_collection id: nil, init_offset: 0, init_limit: nil, base_count: nil, filtered_count: nil, data: nil
+    # since ruby 3 changed hash <-> keyword argument transformation, we need to
+    # adjust this method call in order to stay compatible with ruby 2.x and ruby 3.x
+    def set_collection options_hash
+      _set_collection **options_hash
+    end
+
+    def _set_collection id: nil, init_offset: 0, init_limit: nil, base_count: nil, filtered_count: nil, data: nil
       @collections = {} if @collections.nil?
 
       collection_config = CollectionConfig.new(

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

@@ -0,0 +1,120 @@
+require_relative '../utils'
+require_relative '../has_errors'
+module Matestack::Ui::Core::Form::Checkbox
+  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 :value, :false_value, :multiple, :init, for: { as: :input_for }, label: { as: :input_label }, options: { as: :checkbox_options }
+
+    def component_id
+      "checkbox-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
+      # multiple
+      if checkbox_options
+        checkbox_options.to_a.each do |item|
+          input html_attributes.merge(
+            attributes: vue_attributes,
+            type: :checkbox,
+            id: "#{id_for_item(item_value(item))}",
+            name: item_name(item),
+            value: item_value(item)
+          )
+          label text: item_name(item), for: id_for_item(item_value(item))
+        end
+      # checked/unchecked checkbox (true/false checkbox)
+      else
+        input html_attributes.merge(
+          attributes: vue_attributes_for_single_input,
+          type: :hidden,
+          id: id_for_item(value),
+          value: (false_value || 0)
+        )
+
+        input html_attributes.merge(
+          attributes: vue_attributes_for_single_input,
+          type: :checkbox,
+          id: id_for_item(value),
+          value: checked_value
+        )
+
+        label text: input_label, for: id_for_item(value)
+      end
+    end
+
+    def vue_attributes
+      (options[:attributes] || {}).merge({
+        "@change": change_event,
+        ref: "select.multiple.#{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 vue_attributes_for_single_input
+      (options[:attributes] || {}).merge({
+        "@change": change_event,
+        ref: "input.#{attr_key}",
+        'init-value': init_value_for_single_input,
+        'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
+        "#{v_model_type}": input_key
+      })
+    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
+
+    def value_type
+      item_value(checkbox_options.first).is_a?(Integer) ? Integer : nil
+    end
+
+    def item_value(item)
+      item.is_a?(Array) ? item.last : item
+    end
+
+    def item_name(item)
+      item.is_a?(Array) ? item.first : item
+    end
+
+    def checked_value
+      value || 1
+    end
+
+    def v_model_type
+      if checkbox_options && checkbox_options.first.is_a?(Integer)
+        '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/checkbox/checkbox.js

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

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

@@ -1,79 +1,16 @@
-require_relative '../utils'
-require_relative '../has_input_html_attributes'
-require_relative '../has_errors'
+require_relative './base'
+
 module Matestack::Ui::Core::Form::Checkbox
-  class Checkbox < Matestack::Ui::Core::Component::Static
-    include Matestack::Ui::Core::Form::Utils
-    include Matestack::Ui::Core::Form::HasInputHtmlAttributes
-    include Matestack::Ui::Core::Form::HasErrors
+  class Checkbox < Base
 
-    requires :key
-    optional :value, :false_value, :multiple, :init, for: { as: :input_for }, label: { as: :input_label }, options: { as: :checkbox_options }
+    vue_js_component_name "matestack-ui-core-form-checkbox"
 
     def response
-      # multiple values
-      if checkbox_options
-        checkbox_options.to_a.each do |item|
-          input html_attributes.merge(
-            attributes: vue_attributes,
-            type: :checkbox,
-            id: "#{id_for_item(item_value(item))}",
-            name: item_name(item),
-            value: item_value(item)
-          )
-          label text: item_name(item), for: id_for_item(item_value(item))
-        end
-        # checked/unchecked checkbox
-      else
-        form_input type: :hidden, key: key, value: (false_value || 0), errors: false
-        form_input type: :checkbox, key: key, value: checked_value, id: id_for_item(value), errors: false
-        label text: input_label, for: id_for_item(value)
-      end
-      render_errors
-    end
-
-    def vue_attributes
-      (options[:attributes] || {}).merge({
-        "@change": change_event,
-        ref: "select.multiple.#{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(checkbox_options.first).is_a?(Integer) ? Integer : nil
-    end
-
-    def item_value(item)
-      item.is_a?(Array) ? item.last : item
-    end
-
-    def item_name(item)
-      item.is_a?(Array) ? item.first : item
-    end
-
-    def checked_value
-      value || 1
-    end
-
-    def v_model_type
-      if checkbox_options && checkbox_options.first.is_a?(Integer)
-        'v-model.number'
-      else
-        'v-model'
+      div class: "matestack-ui-core-form-checkbox" do
+        render_options
+        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/checkbox/mixin.js

@@ -0,0 +1,80 @@
+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.$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 formCheckboxMixin

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

@@ -18,9 +18,6 @@ const componentDef = {
     initDataKey: function (key, initValue) {
       this.data[key] = initValue;
     },
-    inputChanged: function (key) {
-      this.resetErrors(key);
-    },
     updateFormValue: function (key, value) {
       this.data[key] = value;
     },
@@ -44,11 +41,11 @@ const componentDef = {
           flat[i] = newVal;
         } else if (flat[i] instanceof File){
           flat[i] = newVal;
-          this.$refs["input."+i].value = 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."+i].value = newVal
+            this.$refs["input-component-for-"+i].value = newVal
           }
         } else if (typeof flat[i] === "object" && !(flat[i] instanceof Array)) {
           setProps(flat[i], newVal);
@@ -57,54 +54,26 @@ const componentDef = {
         }
       }
     },
-    filesAdded: function (key) {
-      const dataTransfer = event.dataTransfer || event.target;
-      const files = dataTransfer.files;
-      if (event.target.attributes.multiple) {
-        this.data[key] = [];
-        for (let index in files) {
-          if (files[index] instanceof File) {
-            this.data[key].push(files[index]);
-          }
-        }
-      } else {
-        this.data[key] = files[0];
-      }
-    },
     initValues: function () {
       let 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("input.")) {
-          if (initValue) {
-            data[key.replace("input.", "")] = initValue["value"];
-          } else {
-            data[key.replace("input.", "")] = null;
-          }
+        if (key.startsWith("input-component")) {
+          self.$refs[key].initialize()
         }
-        if (key.startsWith("select.")) {
-          if (key.startsWith("select.multiple.")) {
-            if (initValue) {
-              data[key.replace("select.multiple.", "")] = JSON.parse(initValue["value"]);
-            } else {
-              data[key.replace("select.multiple.", "")] = [];
-            }
-          } else {
-            if (initValue) {
-              if (valueType && valueType["value"] == "Integer") data[key.replace("select.", "")] = parseInt(initValue["value"]);
-              else {
-                data[key.replace("select.", "")] = initValue["value"];
-              }
-            } else {
-              data[key.replace("select.", "")] = null;
-            }
-          }
+        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()
         }
       }
-      self.data = data;
     },
     shouldResetFormOnSuccessfulSubmit() {
       const self = this;