matestack-ui-core 1.0.0.rc.1 → 1.3.0

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

@@ -1,4 +1,4 @@
-%abbr{@tag_attributes}
+%abbr{ html_attributes }
   - if text.blank? && block_given?
     = yield
   - else

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

@@ -1,13 +1,5 @@
 module Matestack::Ui::Core::Abbr
   class Abbr < Matestack::Ui::Core::Component::Static
-    requires :title
     optional :text
-
-    def setup
-      @tag_attributes.merge!({
-        "title": title
-      })
-    end
-
   end
 end

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

@@ -1,3 +1,3 @@
-%a{@tag_attributes, "@click.prevent": "perform", "href": action_path}
+%a{ html_attributes, "@click.prevent": "perform", "href": action_path }
   - if block_given?
     = yield

data/app/concepts/matestack/ui/core/actionview/dynamic.haml

@@ -1,6 +1,6 @@
-%component{dynamic_tag_attributes}
+%component{ dynamic_tag_attributes }
   %div
-    %div{"v-if": "asyncTemplate == null"}
+    %div{ "v-if": "asyncTemplate == null" }
       = render_content
-    %div{"v-if": "asyncTemplate != null"}
-      %v-runtime-template{":template":"asyncTemplate"}
+    %div{ "v-if": "asyncTemplate != null" }
+      %v-runtime-template{ ":template":"asyncTemplate" }

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

@@ -1,5 +1,5 @@
-%address{@tag_attributes}
-  - if text.nil? && block_given?
+%address{ html_attributes }
+  - if text.blank? && block_given?
     = yield
   - else
     = text

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

@@ -40,7 +40,11 @@ const store = new Vuex.Store({
           return getScrollParent(node.parentNode)
         }
       }
-      getScrollParent(document.getElementsByClassName("matestack-page-root")[0]).scrollTop = 0
+      var scrollParent = getScrollParent(document.getElementsByClassName("matestack-page-root")[0])
+      if(scrollParent){
+        scrollParent.scrollTop = 0;
+      }
+      // getScrollParent(document.getElementsByClassName("matestack-page-root")[0]).scrollTop = 0
     }
   },
   actions: {

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

@@ -1 +1 @@
-%area{@tag_attributes}
+%area{ html_attributes, "coords": coords.join(',') }

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

@@ -1,20 +1,6 @@
 module Matestack::Ui::Core::Area
   class Area < Matestack::Ui::Core::Component::Static
-    optional :alt, :coords, :download, :href, :hreflang, :media, :rel, :shape, :target, :type
-    
-    def setup
-      @tag_attributes.merge!({
-        alt: alt,
-        coords: coords.join(','),
-        download: download,
-        href: href,
-        hreflang: hreflang,
-        media: media,
-        rel: rel,
-        shape: shape,
-        target: target,
-        type: type
-      })
-    end
+    html_attributes :alt, :download, :href, :hreflang, :media, :rel, :shape, :target, :type
+    optional :coords
   end
 end

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

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

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

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

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

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

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

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

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,21 +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
-      @tag_attributes.merge!({
+    end
+
+    def children_wrapper_attributes
+      html_attributes.merge({
         "v-if": "showing",
-        id: @component_config[:component_key]
+        id: component_config[:component_key]
       })
     end
 
@@ -30,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/async/children_wrapper.haml

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +1,6 @@
 module Matestack::Ui::Core::Bdo
   class Bdo < Matestack::Ui::Core::Component::Static
-    requires :dir
-
-    def setup
-      @tag_attributes.merge!({
-        "dir": options[:dir]
-      })
-    end
+    html_attributes :dir
+    optional :text
   end
 end

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

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

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

@@ -1,11 +1,6 @@
 module Matestack::Ui::Core::Blockquote
   class Blockquote < Matestack::Ui::Core::Component::Static
-
-    def setup
-      @tag_attributes.merge!({
-        "cite": options[:cite]
-        })
-    end
-
+    html_attributes :cite
+    optional :text
   end
 end

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

@@ -1,5 +1,5 @@
-- unless options[:times].nil?
-  - options[:times].times do
-    %br{@tag_attributes}
+- unless times.nil?
+  - times.times do
+    %br{ html_attributes }
 - else
-  %br{@tag_attributes}
+  %br{ html_attributes }

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

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

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

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

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

@@ -1,11 +1,7 @@
 module Matestack::Ui::Core::Button
   class Button < Matestack::Ui::Core::Component::Static
-
-    def setup
-      @tag_attributes.merge!({
-        "disabled": options[:disabled] ||= nil
-      })
-    end
-
+    html_attributes :autofocus, :disabled, :form, :formaction, :formenctype, :formmethod, 
+      :formnovalidate, :formtarget, :name, :type, :value
+    optional :text
   end
 end

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

@@ -0,0 +1,4 @@
+%component{dynamic_tag_attributes.merge('initial-template': "#{render_content}")}
+  %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