matestack-ui-core 0.7.5 → 1.1.0

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

@@ -1,12 +1,37 @@
 module Matestack::Ui::Core::Async
   class Async < Matestack::Ui::Core::Component::Dynamic
+    vue_js_component_name "matestack-ui-core-async"
 
-    def setup
-      @rerender = true
-      @tag_attributes.merge!({
-        "v-if": "showing"
+    requires :id # required since 1.1.0
+
+    def initialize(*args)
+      super
+      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]
       })
     end
 
+    def show
+      render :async
+    end
+
+    def render_content
+      render :children_wrapper do
+        render :children
+      end
+    end
+
+    def get_component_key
+      component_config[:component_key]
+    end
+
   end
 end

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

@@ -0,0 +1,2 @@
+%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
-    REQUIRED_KEYS = [: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

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/caption/caption.haml

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

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

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

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

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

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

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

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

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

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

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

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,17 +1,15 @@
 module Matestack::Ui::Core::Collection::Content
   class Content < Matestack::Ui::Core::Component::Dynamic
+    vue_js_component_name 'matestack-ui-core-collection-content'
 
     def setup
-      @rerender = true
       @component_config = @component_config.except(:data, :paginated_data)
     end
 
     def response
-      components {
-        div @tag_attributes do
-          yield_components
-        end
-      }
+      div @tag_attributes do
+        yield_components
+      end
     end
 
   end

data/app/concepts/matestack/ui/core/collection/content/next/next.haml

@@ -1,3 +1,3 @@
-%a{@tag_attributes, "@click": "next()"}
+%a{ html_attributes , "@click": "next()" }
   - if block_given?
     = yield

data/app/concepts/matestack/ui/core/collection/content/page/link/link.haml

@@ -1,3 +1,3 @@
-%a{@tag_attributes, "@click": "goToPage(#{@options[:page]})"}
+%a{ html_attributes, "@click": "goToPage(#{page})" }
   - if block_given?
     = yield

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

@@ -1,5 +1,7 @@
-module Matestack::Ui::Core::Collection::Content::Page::Link
-  class Link < Matestack::Ui::Core::Component::Static
-
+module Matestack::Ui::Core::Collection::Content::Page
+  module Link
+    class Link::Link < Matestack::Ui::Core::Component::Static
+      requires :page
+    end
   end
 end

data/app/concepts/matestack/ui/core/collection/content/previous/previous.haml

@@ -1,3 +1,3 @@
-%a{@tag_attributes, "@click": "previous()"}
+%a{ html_attributes, "@click": "previous()" }
   - if block_given?
     = yield

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

@@ -1,16 +1,15 @@
 module Matestack::Ui::Core::Collection::Filter
   class Filter < Matestack::Ui::Core::Component::Dynamic
+    vue_js_component_name 'matestack-ui-core-collection-filter'
 
     def setup
       @component_config = @component_config.except(:data, :paginated_data)
     end
 
     def response
-      components {
-        div @tag_attributes do
-          yield_components
-        end
-      }
+      div html_attributes do
+        yield_components
+      end
     end
 
   end