Merge pull request #496 from matestack/next_release

1.3.0 Release

Author: jonasjabari

CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## v1.3.0 Release
+
+### Potential breaking change
+
+If you have used a `form_submit` component like this:
+
+```ruby
+form_submit do
+  button text: "Submit me!", attributes: { "v-bind:disabled": "loading" }
+end
+```
+
+in order to disable the the button during submission of the form, please turn `loading` into `loading()`:
+
+
+```ruby
+form_submit do
+  button text: "Submit me!", attributes: { "v-bind:disabled": "loading()" }
+end
+```
+
+If you have implemented your own form components, please adjust them as described in the customize section of each form component. Most likely, you now have to provide exactly one root element per form component due to the reworked form components.
+
+### Improvements
+
+- Splitted form API docs into multiple files
+- Implements #474 Add HTML `<select>` tag to core components
+- Implements #492 Enable extendability of `form_*` components
+  - Reworked `form_*` components in order to provide a better API for custom form components
+  - `form_*` components are separate Vue.js components now
+  - Each `form_*` uses a Vue.js mixin and a Ruby base class. This mixin and base class can be used in custom components in order to easy create own form components
+
+## Bugfixes
+
+- Fixes #490 Custom classes for checkboxes
+- Fixes #494 true/false checkboxes are initialized incorrectly
+
+
 ## v1.2.0 Release
 
 ### Improvements

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

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;

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

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