matestack-ui-core 0.7.6 → 1.2.0

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

@@ -1,5 +1,5 @@
-%del{@tag_attributes.merge({:cite => options[:cite], :datetime => options[:datetime]})}
-  - if options[:text].nil? && block_given?
+%del{ html_attributes }
+  - if text.nil? && block_given?
     = yield
   - else
-    = options[:text]
+    = text

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

@@ -1,4 +1,6 @@
 module Matestack::Ui::Core::Del
   class Del < Matestack::Ui::Core::Component::Static
+    html_attributes :cite, :datetime
+    optional :text
   end
 end

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

@@ -1,3 +1,3 @@
-%details{@tag_attributes}
+%details{ html_attributes }
   - if block_given?
     = yield

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

@@ -1,5 +1,5 @@
 module Matestack::Ui::Core::Details
   class Details < Matestack::Ui::Core::Component::Static
-
+    html_attributes :open
   end
 end

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

@@ -1,5 +1,5 @@
-%dfn{@tag_attributes}
-  - if options[:text].nil? && block_given?
+%dfn{ html_attributes }
+  - if text.nil? && block_given?
     = yield
   - else
-    = options[:text]
+    = text

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

@@ -1,6 +1,6 @@
 module Matestack::Ui::Core::Dfn
   class Dfn < Matestack::Ui::Core::Component::Static
-    
+    optional :text
   end
 end
     

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

@@ -1,5 +1,5 @@
-%dialog{@tag_attributes}
-  - if options[:text].blank? && block_given?
+%dialog{ html_attributes }
+  - if text.nil? && block_given?
     = yield
   - else
-    = options[:text]
+    = text

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

@@ -1,9 +1,6 @@
 module Matestack::Ui::Core::Dialog
   class Dialog < Matestack::Ui::Core::Component::Static
-    def setup
-      @tag_attributes.merge!({
-        "open": options[:open] ||= nil
-      })
-    end
+    html_attributes :open
+    optional :text
   end
 end

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

@@ -1,3 +1,3 @@
-%div{@tag_attributes}
+%div{ html_attributes }
   - if block_given?
     = yield

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

@@ -1,5 +1,4 @@
 module Matestack::Ui::Core::Div
   class Div < Matestack::Ui::Core::Component::Static
-
   end
 end

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

@@ -1,5 +1,5 @@
-%dl{@tag_attributes}
-  - if options[:text].nil? && block_given?
+%dl{ html_attributes }
+  - if text.nil? && block_given?
     = yield
   - else
-    = options[:text]
+    = text

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

@@ -1,5 +1,5 @@
 module Matestack::Ui::Core::Dl
   class Dl < Matestack::Ui::Core::Component::Static
-
+    optional :text
   end
-end
+end

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

@@ -1,5 +1,5 @@
-%dt{@tag_attributes}
-  - if options[:text].nil? && block_given?
+%dt{ html_attributes }
+  - if text.nil? && block_given?
     = yield
   - else
-    = options[:text]
+    = text

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

@@ -1,5 +1,5 @@
 module Matestack::Ui::Core::Dt
   class Dt < Matestack::Ui::Core::Component::Static
-
+    optional :text
   end
 end

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

@@ -1,5 +1,5 @@
-%em{@tag_attributes}
-  - if options[:text].nil? && block_given?
+%em{ html_attributes }
+  - if text.nil? && block_given?
     = yield
   - else
-    = options[:text]
+    = text

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

@@ -1,5 +1,5 @@
 module Matestack::Ui::Core::Em
   class Em < Matestack::Ui::Core::Component::Static
-
+    optional :text
   end
 end

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

@@ -1,5 +1,5 @@
-%fieldset{@tag_attributes}
-  -if options[:text].nil? && block_given?
+%fieldset{ html_attributes }
+  - if text.nil? && block_given?
     = yield
-  - else 
-    = options[:text]
+  - else
+    = text

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

@@ -1,9 +1,6 @@
 module Matestack::Ui::Core::Fieldset
   class Fieldset < Matestack::Ui::Core::Component::Static
-    def setup
-      @tag_attributes.merge!({
-        disabled: options[:disabled]
-      })
-    end
+    html_attributes :disabled, :form, :name
+    optional :text
   end
-end
+end

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

@@ -1,3 +1,3 @@
-%figure{@tag_attributes}
+%figure{ html_attributes }
   - if block_given?
     = yield

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

@@ -1,5 +1,4 @@
 module Matestack::Ui::Core::Figure
   class Figure < Matestack::Ui::Core::Component::Static
-
   end
 end

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

@@ -1,3 +1,3 @@
-%footer{@tag_attributes}
+%footer{ html_attributes }
   - if block_given?
     = yield

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

@@ -1,5 +1,4 @@
 module Matestack::Ui::Core::Footer
   class Footer < Matestack::Ui::Core::Component::Static
-
   end
 end

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

@@ -0,0 +1,79 @@
+require_relative '../utils'
+require_relative '../has_input_html_attributes'
+require_relative '../has_errors'
+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
+
+    requires :key
+    optional :value, :false_value, :multiple, :init, for: { as: :input_for }, label: { as: :input_label }, options: { as: :checkbox_options }
+
+    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'
+      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/form.haml

@@ -1,2 +1,2 @@
-%form{@tag_attributes}
+%form{ form_attributes }
   = yield

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

@@ -10,8 +10,8 @@ const componentDef = {
   data: function () {
     return {
       data: {},
-      showInlineForm: false,
       errors: {},
+      loading: false
     };
   },
   methods: {
@@ -24,22 +24,20 @@ const componentDef = {
     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;
       }
     },
-    launchInlineForm: function (key, value) {
-      this.showInlineForm = true;
-      this.data[key] = value;
-      const self = this;
-      setTimeout(function () {
-        self.$refs.inlineinput.focus();
-      }, 300);
-    },
-    closeInlineForm: function () {
-      this.showInlineForm = false;
-    },
     setProps: function (flat, newVal) {
       for (var i in flat) {
         if (flat[i] === null){
@@ -126,15 +124,21 @@ const componentDef = {
     },
     perform: function(){
       const self = this
-      if (self.componentConfig["emit"] != undefined) {
-        matestackEventHub.$emit(self.componentConfig["emit"]);
-      }
-      if (self.componentConfig["delay"] != undefined) {
-        setTimeout(function () {
+      var form = self.$el.tagName == 'FORM' ? self.$el : self.$el.querySelector('form');
+      if(form.checkValidity()){
+        self.loading = true;
+        if (self.componentConfig["emit"] != undefined) {
+          matestackEventHub.$emit(self.componentConfig["emit"]);
+        }
+        if (self.componentConfig["delay"] != undefined) {
+          setTimeout(function () {
+            self.sendRequest()
+          }, parseInt(self.componentConfig["delay"]));
+        } else {
           self.sendRequest()
-        }, parseInt(self.componentConfig["delay"]));
+        }
       } else {
-        this.sendRequest()
+        matestackEventHub.$emit('static_form_errors');
       }
     },
     sendRequest: function(){
@@ -178,6 +182,7 @@ const componentDef = {
       }
       axios(axios_config)
         .then(function (response) {
+          self.loading = false;
           if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
             matestackEventHub.$emit(self.componentConfig["success"]["emit"], response.data);
           }
@@ -233,9 +238,9 @@ const componentDef = {
             self.setProps(self.data, null);
             self.initValues();
           }
-          self.showInlineForm = false;
         })
         .catch(function (error) {
+          self.loading = false;
           if (error.response && error.response.data && error.response.data.errors) {
             self.errors = error.response.data.errors;
           }

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

@@ -1,44 +1,55 @@
 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
 
-    REQUIRED_KEYS = [:for, :path, :method]
+    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] = options[:method]
-        @component_config[:success] = options[:success]
-        @component_config[:multipart] = options[:multipart] == true
-        unless options[:success].nil?
-          unless options[:success][:transition].nil?
-            @component_config[:success][:transition][:path] = transition_path options[:success]
+        @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 options[:success][:redirect].nil?
-            @component_config[:success][:redirect][:path] = redirect_path options[:success]
+          unless success[:redirect].nil?
+            @component_config[:success][:redirect][:path] = redirect_path success
           end
         end
-        @component_config[:failure] = options[:failure]
-        unless options[:failure].nil?
-          unless options[:failure][:transition].nil?
-            @component_config[:failure][:transition][:path] = transition_path options[:failure]
+        @component_config[:failure] = failure
+        unless failure.nil?
+          unless failure[:transition].nil?
+            @component_config[:failure][:transition][:path] = transition_path failure
           end
-          unless options[:failure][:redirect].nil?
-            @component_config[:failure][:redirect][:path] = redirect_path options[:failure]
+          unless failure[:redirect].nil?
+            @component_config[:failure][:redirect][:path] = redirect_path failure
           end
         end
-        @tag_attributes.merge!({"@submit.prevent": true})
       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 options[:path].is_a?(Symbol)
-          return ::Rails.application.routes.url_helpers.send(options[:path], options[:params])
+        if path.is_a?(Symbol)
+          return ::Rails.application.routes.url_helpers.send(path, form_params)
         else
-          return options[:path]
+          return path
         end
       rescue
         raise "Submit path not found"
@@ -76,15 +87,15 @@ module Matestack::Ui::Core::Form
     end
 
     def form_wrapper
-      case options[:for]
+      case for_option
       when Symbol
-        return options[:for]
+        return for_option
       when String
-        return options[:for]
+        return for_option
       end
 
-      if options[:for].respond_to?(:model_name)
-        return options[:for].model_name.singular
+      if for_option.respond_to?(:model_name)
+        return for_option.model_name.singular
       end
     end