matestack-ui-core 1.0.1 → 1.3.2

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

@@ -76,19 +76,9 @@ const componentDef = {
   },
   created: function () {
     const self = this
-    if(this.componentConfig["show_on"] != undefined){
-      this.showing = false
-      var show_events = this.componentConfig["show_on"].split(",")
-      show_events.forEach(show_event => matestackEventHub.$on(show_event.trim(), self.show));
-    }
-    if(this.componentConfig["hide_on"] != undefined){
-      var hide_events = this.componentConfig["hide_on"].split(",")
-      hide_events.forEach(hide_event => matestackEventHub.$on(hide_event.trim(), self.hide));
-    }
-    if(this.componentConfig["rerender_on"] != undefined){
-      var rerender_events = this.componentConfig["rerender_on"].split(",")
-      rerender_events.forEach(rerender_event => matestackEventHub.$on(rerender_event.trim(), self.rerender));
-    }
+    self.registerEvents(this.componentConfig['show_on'], self.show)
+    self.registerEvents(this.componentConfig['hide_on'], self.hide)
+    self.registerEvents(this.componentConfig['rerender_on'], self.rerender)
     if(this.componentConfig["show_on"] != undefined){
       this.showing = false
     }
@@ -106,21 +96,9 @@ const componentDef = {
   beforeDestroy: function() {
     const self = this
     clearTimeout(self.hideAfterTimeout)
-    matestackEventHub.$off(this.componentConfig["rerender_on"], self.rerender);
-    matestackEventHub.$off(this.componentConfig["show_on"], self.show);
-    matestackEventHub.$off(this.componentConfig["hide_on"], self.hide);
-    if(this.componentConfig["show_on"] != undefined){
-      var shown_events = this.componentConfig["show_on"].split(",")
-      shown_events.forEach(show_event => matestackEventHub.$off(show_event.trim(), self.show));
-    }
-    if(this.componentConfig["hide_on"] != undefined){
-      var hiden_events = this.componentConfig["hide_on"].split(",")
-      hiden_events.forEach(hide_event => matestackEventHub.$off(hide_event.trim(), self.hide));
-    }
-    if(this.componentConfig["rerender_on"] != undefined){
-      var rerender_events = this.componentConfig["rerender_on"].split(",")
-      rerender_events.forEach(rerender_event => matestackEventHub.$off(rerender_event.trim(), self.rerender));
-    }
+    self.removeEvents(this.componentConfig["show_on"], self.show)
+    self.removeEvents(this.componentConfig["hide_on"], self.hide)
+    self.removeEvents(this.componentConfig["rerender_on"], self.rerender)
   },
   components: {
     VRuntimeTemplate: VRuntimeTemplate

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

@@ -1,24 +1,21 @@
 module Matestack::Ui::Core::Async
-  class Async < Matestack::Ui::Core::Component::Rerender
+  class Async < Matestack::Ui::Core::Component::Dynamic
     vue_js_component_name "matestack-ui-core-async"
 
-    optional :id # will be required in 1.0.0
+    requires :id # required since 1.1.0
 
     def initialize(*args)
       super
-      ActiveSupport::Deprecation.warn(
-        'Calling async components without id is deprecated. Instead provide a unique id for async components.'
-      ) if id.blank?
-      @component_config[:component_key] = id || "async_#{Digest::SHA256.hexdigest(caller[3])}"
-      if @included_config.present? && @included_config[:isolated_parent_class].present?
-        @component_config[:parent_class] = @included_config[:isolated_parent_class]
+      component_config[:component_key] = id
+      if included_config.present? && included_config[:isolated_parent_class].present?
+        component_config[:parent_class] = included_config[:isolated_parent_class]
       end
     end
 
     def children_wrapper_attributes
       html_attributes.merge({
         "v-if": "showing",
-        id: @component_config[:component_key]
+        id: component_config[:component_key]
       })
     end
 
@@ -33,7 +30,7 @@ module Matestack::Ui::Core::Async
     end
 
     def get_component_key
-      @component_config[:component_key]
+      component_config[:component_key]
     end
 
   end

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

@@ -0,0 +1,4 @@
+%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/cable/cable.js

@@ -0,0 +1,100 @@
+import Vue from 'vue/dist/vue.esm'
+import VRuntimeTemplate from "v-runtime-template"
+import matestackEventHub from '../js/event-hub'
+import componentMixin from '../component/component'
+
+const componentDef = {
+  mixins: [componentMixin],
+  props: {
+    initialTemplate: String,
+  },
+  data: function(){
+    return {
+      cableTemplate: null,
+      cableTemplateDomElement: null,
+      loading: false,
+      event: {
+        data: {}
+      }
+    }
+  },
+  methods: {
+    append: function(payload){
+      var html = this.formatPayload(payload)
+      this.cableTemplateDomElement.insertAdjacentHTML(
+        'beforeend',
+        html.join('')
+      )
+      this.updateCableTemplate()
+    },
+    prepend: function(payload){
+      var html = this.formatPayload(payload)
+      this.cableTemplateDomElement.insertAdjacentHTML(
+        'afterbegin',
+        html.join('')
+      )
+      this.updateCableTemplate()
+    },
+    delete: function(payload){
+      var ids = this.formatPayload(payload)
+      ids.forEach(id =>
+        this.cableTemplateDomElement.querySelector('#' + id).remove()
+      )
+      this.updateCableTemplate()
+    },
+    update: function(payload){
+      const self = this
+      var html = this.formatPayload(payload)
+      html.forEach(function(elem){
+        var dom_elem = document.createElement('div')
+        dom_elem.innerHTML = elem
+        var id = dom_elem.firstChild.id
+        var old_elem = self.cableTemplateDomElement.querySelector('#' + id)
+        old_elem.parentNode.replaceChild(dom_elem.firstChild, old_elem)
+      })
+      this.updateCableTemplate()
+    },
+    replace: function(payload){
+      var html = this.formatPayload(payload)
+      this.cableTemplateDomElement.innerHTML = html.join('')
+      this.updateCableTemplate()
+    },
+    updateCableTemplate: function(){
+      this.cableTemplate = this.cableTemplateDomElement.outerHTML
+    },
+    formatPayload: function(payload){
+      if(!Array.isArray(payload.data)){
+        return [payload.data]
+      }
+      return payload.data
+    },
+  },
+  mounted: function() {
+    const self = this
+    var dom_elem = document.createElement('div')
+    dom_elem.innerHTML = this.initialTemplate
+    this.cableTemplateDomElement = dom_elem.querySelector("#" + this.componentConfig["id"])
+    this.cableTemplate = this.cableTemplateDomElement.outerHTML
+    this.registerEvents(this.componentConfig['append_on'], self.append)
+    this.registerEvents(this.componentConfig['prepend_on'], self.prepend)
+    this.registerEvents(this.componentConfig['delete_on'], self.delete)
+    this.registerEvents(this.componentConfig['update_on'], self.update)
+    this.registerEvents(this.componentConfig['replace_on'], self.replace)
+  },
+  beforeDestroy: function() {
+    const self = this
+    this.cableTemplate = null
+    this.removeEvents(this.componentConfig['append_on'], self.append)
+    this.removeEvents(this.componentConfig['prepend_on'], self.prepend)
+    this.removeEvents(this.componentConfig['delete_on'], self.delete)
+    this.removeEvents(this.componentConfig['update_on'], self.update)
+    this.removeEvents(this.componentConfig['replace_on'], self.replace)
+  },
+  components: {
+    VRuntimeTemplate: VRuntimeTemplate
+  }
+}
+
+let component = Vue.component('matestack-ui-core-cable', componentDef)
+
+export default componentDef

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

@@ -0,0 +1,28 @@
+module Matestack::Ui::Core::Cable
+  class Cable < Matestack::Ui::Core::Component::Dynamic
+    vue_js_component_name 'matestack-ui-core-cable'
+
+    requires :id
+
+    def setup
+      component_config[:component_key] = id
+    end
+    
+    def show
+      render :cable
+    end
+
+    def render_content
+      render :children_wrapper do
+        render :children
+      end
+    end
+
+    def children_wrapper_attributes
+      html_attributes.merge({
+        id: component_config[:component_key]
+      })
+    end
+
+  end
+end

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

@@ -0,0 +1,2 @@
+%div{ children_wrapper_attributes.merge(class: "matestack-cable-component-root") }
+  =yield

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

@@ -2,10 +2,10 @@ import Vue from 'vue/dist/vue.esm'
 import matestackEventHub from '../../js/event-hub'
 import queryParamsHelper from '../../js/helpers/query-params-helper'
 import componentMixin from '../../component/component'
-import asyncMixin from '../../async/async'
+// import asyncMixin from '../../async/async'
 
 const componentDef = {
-  mixins: [componentMixin, asyncMixin],
+  mixins: [componentMixin],
   data: function(){
     return {
       currentLimit: null,

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

@@ -1,5 +1,5 @@
 module Matestack::Ui::Core::Collection::Content
-  class Content < Matestack::Ui::Core::Component::Rerender
+  class Content < Matestack::Ui::Core::Component::Dynamic
     vue_js_component_name 'matestack-ui-core-collection-content'
 
     def setup

data/app/concepts/matestack/ui/core/component/base.rb

@@ -4,12 +4,11 @@ module Matestack::Ui::Core::Component
     include Matestack::Ui::Core::HasViewContext
     include Matestack::Ui::Core::HtmlAttributes
     include Matestack::Ui::Core::Properties
+    include Matestack::Ui::Core::DSL
 
     # define html global attributes
     html_attributes *HTML_GLOBAL_ATTRIBUTES, *HTML_EVENT_ATTRIBUTES
 
-    # probably need to remove for other tests to be green again
-    include Matestack::Ui::Core::DSL
 
     view_paths << "#{Matestack::Ui::Core::Engine.root}/app/concepts"
     view_paths << "#{::Rails.root}#{'/' unless ::Rails.root.nil?}app/matestack"
@@ -99,6 +98,11 @@ module Matestack::Ui::Core::Component
     def get_included_config
       @included_config
     end
+    alias :included_config :get_included_config
+
+    def component_config
+      @component_config
+    end
 
     # TODO: modifies/recreates view lookup paths on every invocation?!
     # At least memoize it I guess...
@@ -161,8 +165,10 @@ module Matestack::Ui::Core::Component
     def params
       if @matestack_context.present? && @matestack_context[:controller].present?
         @matestack_context[:controller].params
-      else
+      elsif context.present? && context[:params]
         context[:params]
+      else
+        ActionController::Parameters.new({})
       end
     end
 
@@ -239,7 +245,7 @@ module Matestack::Ui::Core::Component
 
       # check only allowed keys are passed to isolated components
       if child_class < Matestack::Ui::Core::Isolated::Isolated
-        unless args.empty? || args[0].keys.all? { |key| [:defer, :public_options, :rerender_on, :init_on, :rerender_delay, :matestack_context].include? key }
+        unless args.empty? || args[0].keys.all? { |key| [:defer, :public_options, :rerender_on, :init_on, :rerender_delay, :matestack_context, :context].include? key }
           raise "isolated components can only take params in a public_options hash, which will be exposed to the client side in order to perform an async request with these params."
         end
         if args.any? { |arg| arg[:init_on].present? } && @matestack_skip_defer == true

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

@@ -1,5 +1,22 @@
+import matestackEventHub from '../js/event-hub'
+
 const componentMixin = {
-  props: ['componentConfig', 'params']
+  props: ['componentConfig', 'params'],
+  methods: {
+    registerEvents: function(events, callback){
+      if(events != undefined){
+        var event_names = events.split(",")
+        event_names.forEach(event_name => matestackEventHub.$on(event_name.trim(), callback));
+      }
+    },
+    removeEvents: function(events, callback){
+      if(events != undefined){
+        var event_names = events.split(",")
+        event_names.forEach(event_name => matestackEventHub.$off(event_name.trim(), callback));
+      }
+    }
+  }
+
 }
 
 export default componentMixin

data/app/concepts/matestack/ui/core/component/dynamic.rb

@@ -16,7 +16,7 @@ module Matestack::Ui::Core::Component
         "is": get_vue_js_name,
         "ref": component_id,
         ":params":  params.except(:controller, :action).to_json,
-        ":component-config": @component_config.to_json,
+        ":component-config": component_config.to_json,
         "inline-template": true,
       }
       attrs.merge!(options[:attributes]) unless options[:attributes].nil?

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