Skip to content

Commit abcf11d

Browse files
jonasjabarijonasjabari
authored
Merge pull request #468 from matestack/next-release
1.1.0 Release
2 parents 682d7d4 + b244c50 commit abcf11d

File tree

71 files changed

+1316
-17625
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+1316
-17625
lines changed

‎CHANGELOG.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changelog
22

3+
## v1.1.0 Release
4+
5+
### Improvements
6+
7+
* added the `cable` component in order to use ActionCable to update the DOM
8+
39
## v1.0.1 Release
410

511
This release contains bugfixes.

‎Gemfile.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
PATH
22
remote: .
33
specs:
4-
matestack-ui-core (1.0.0)
4+
matestack-ui-core (1.0.1)
55
cells-haml
66
cells-rails
77
haml

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

Lines changed: 6 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -76,19 +76,9 @@ const componentDef = {
7676
},
7777
created: function () {
7878
const self = this
79-
if(this.componentConfig["show_on"] != undefined){
80-
this.showing = false
81-
var show_events = this.componentConfig["show_on"].split(",")
82-
show_events.forEach(show_event => matestackEventHub.$on(show_event.trim(), self.show));
83-
}
84-
if(this.componentConfig["hide_on"] != undefined){
85-
var hide_events = this.componentConfig["hide_on"].split(",")
86-
hide_events.forEach(hide_event => matestackEventHub.$on(hide_event.trim(), self.hide));
87-
}
88-
if(this.componentConfig["rerender_on"] != undefined){
89-
var rerender_events = this.componentConfig["rerender_on"].split(",")
90-
rerender_events.forEach(rerender_event => matestackEventHub.$on(rerender_event.trim(), self.rerender));
91-
}
79+
self.registerEvents(this.componentConfig['show_on'], self.show)
80+
self.registerEvents(this.componentConfig['hide_on'], self.hide)
81+
self.registerEvents(this.componentConfig['rerender_on'], self.rerender)
9282
if(this.componentConfig["show_on"] != undefined){
9383
this.showing = false
9484
}
@@ -106,21 +96,9 @@ const componentDef = {
10696
beforeDestroy: function() {
10797
const self = this
10898
clearTimeout(self.hideAfterTimeout)
109-
matestackEventHub.$off(this.componentConfig["rerender_on"], self.rerender);
110-
matestackEventHub.$off(this.componentConfig["show_on"], self.show);
111-
matestackEventHub.$off(this.componentConfig["hide_on"], self.hide);
112-
if(this.componentConfig["show_on"] != undefined){
113-
var shown_events = this.componentConfig["show_on"].split(",")
114-
shown_events.forEach(show_event => matestackEventHub.$off(show_event.trim(), self.show));
115-
}
116-
if(this.componentConfig["hide_on"] != undefined){
117-
var hiden_events = this.componentConfig["hide_on"].split(",")
118-
hiden_events.forEach(hide_event => matestackEventHub.$off(hide_event.trim(), self.hide));
119-
}
120-
if(this.componentConfig["rerender_on"] != undefined){
121-
var rerender_events = this.componentConfig["rerender_on"].split(",")
122-
rerender_events.forEach(rerender_event => matestackEventHub.$off(rerender_event.trim(), self.rerender));
123-
}
99+
self.removeEvents(this.componentConfig["show_on"], self.show)
100+
self.removeEvents(this.componentConfig["hide_on"], self.hide)
101+
self.removeEvents(this.componentConfig["rerender_on"], self.rerender)
124102
},
125103
components: {
126104
VRuntimeTemplate: VRuntimeTemplate

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

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
module Matestack::Ui::Core::Async
2-
class Async < Matestack::Ui::Core::Component::Rerender
2+
class Async < Matestack::Ui::Core::Component::Dynamic
33
vue_js_component_name "matestack-ui-core-async"
44

5-
optional :id # will be required in 1.0.0
5+
requires :id # required since 1.1.0
66

77
def initialize(*args)
88
super
9-
ActiveSupport::Deprecation.warn(
10-
'Calling async components without id is deprecated. Instead provide a unique id for async components.'
11-
) if id.blank?
12-
@component_config[:component_key] = id || "async_#{Digest::SHA256.hexdigest(caller[3])}"
13-
if @included_config.present? && @included_config[:isolated_parent_class].present?
14-
@component_config[:parent_class] = @included_config[:isolated_parent_class]
9+
component_config[:component_key] = id
10+
if included_config.present? && included_config[:isolated_parent_class].present?
11+
component_config[:parent_class] = included_config[:isolated_parent_class]
1512
end
1613
end
1714

1815
def children_wrapper_attributes
1916
html_attributes.merge({
2017
"v-if": "showing",
21-
id: @component_config[:component_key]
18+
id: component_config[:component_key]
2219
})
2320
end
2421

@@ -33,7 +30,7 @@ def render_content
3330
end
3431

3532
def get_component_key
36-
@component_config[:component_key]
33+
component_config[:component_key]
3734
end
3835

3936
end

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
%component{dynamic_tag_attributes.merge('initial-template': "#{render_content}")}
2+
%div{class: "matestack-cable-component-container", "v-bind:class": "{ 'loading': loading === true }"}
3+
%div{class: "matestack-cable-component-wrapper", "v-if": "cableTemplate != null", "v-bind:class": "{ 'loading': loading === true }"}
4+
%v-runtime-template{":template":"cableTemplate"}

‎app/concepts/matestack/ui/core/cable/cable.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import Vue from 'vue/dist/vue.esm'
2+
import VRuntimeTemplate from "v-runtime-template"
3+
import matestackEventHub from '../js/event-hub'
4+
import componentMixin from '../component/component'
5+
6+
const componentDef = {
7+
mixins: [componentMixin],
8+
props: {
9+
initialTemplate: String,
10+
},
11+
data: function(){
12+
return {
13+
cableTemplate: null,
14+
cableTemplateDomElement: null,
15+
loading: false,
16+
event: {
17+
data: {}
18+
}
19+
}
20+
},
21+
methods: {
22+
append: function(payload){
23+
var html = this.formatPayload(payload)
24+
this.cableTemplateDomElement.insertAdjacentHTML(
25+
'beforeend',
26+
html.join('')
27+
)
28+
this.updateCableTemplate()
29+
},
30+
prepend: function(payload){
31+
var html = this.formatPayload(payload)
32+
this.cableTemplateDomElement.insertAdjacentHTML(
33+
'afterbegin',
34+
html.join('')
35+
)
36+
this.updateCableTemplate()
37+
},
38+
delete: function(payload){
39+
var ids = this.formatPayload(payload)
40+
ids.forEach(id =>
41+
this.cableTemplateDomElement.querySelector('#' + id).remove()
42+
)
43+
this.updateCableTemplate()
44+
},
45+
update: function(payload){
46+
const self = this
47+
var html = this.formatPayload(payload)
48+
html.forEach(function(elem){
49+
var dom_elem = document.createElement('div')
50+
dom_elem.innerHTML = elem
51+
var id = dom_elem.firstChild.id
52+
var old_elem = self.cableTemplateDomElement.querySelector('#' + id)
53+
old_elem.parentNode.replaceChild(dom_elem.firstChild, old_elem)
54+
})
55+
this.updateCableTemplate()
56+
},
57+
replace: function(payload){
58+
var html = this.formatPayload(payload)
59+
this.cableTemplateDomElement.innerHTML = html.join('')
60+
this.updateCableTemplate()
61+
},
62+
updateCableTemplate: function(){
63+
this.cableTemplate = this.cableTemplateDomElement.outerHTML
64+
},
65+
formatPayload: function(payload){
66+
if(!Array.isArray(payload.data)){
67+
return [payload.data]
68+
}
69+
return payload.data
70+
},
71+
},
72+
mounted: function() {
73+
const self = this
74+
var dom_elem = document.createElement('div')
75+
dom_elem.innerHTML = this.initialTemplate
76+
this.cableTemplateDomElement = dom_elem.querySelector("#" + this.componentConfig["id"])
77+
this.cableTemplate = this.cableTemplateDomElement.outerHTML
78+
this.registerEvents(this.componentConfig['append_on'], self.append)
79+
this.registerEvents(this.componentConfig['prepend_on'], self.prepend)
80+
this.registerEvents(this.componentConfig['delete_on'], self.delete)
81+
this.registerEvents(this.componentConfig['update_on'], self.update)
82+
this.registerEvents(this.componentConfig['replace_on'], self.replace)
83+
},
84+
beforeDestroy: function() {
85+
const self = this
86+
this.cableTemplate = null
87+
this.removeEvents(this.componentConfig['append_on'], self.append)
88+
this.removeEvents(this.componentConfig['prepend_on'], self.prepend)
89+
this.removeEvents(this.componentConfig['delete_on'], self.delete)
90+
this.removeEvents(this.componentConfig['update_on'], self.update)
91+
this.removeEvents(this.componentConfig['replace_on'], self.replace)
92+
},
93+
components: {
94+
VRuntimeTemplate: VRuntimeTemplate
95+
}
96+
}
97+
98+
let component = Vue.component('matestack-ui-core-cable', componentDef)
99+
100+
export default componentDef

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
module Matestack::Ui::Core::Cable
2+
class Cable < Matestack::Ui::Core::Component::Dynamic
3+
vue_js_component_name 'matestack-ui-core-cable'
4+
5+
requires :id
6+
7+
def setup
8+
component_config[:component_key] = id
9+
end
10+
11+
def show
12+
render :cable
13+
end
14+
15+
def render_content
16+
render :children_wrapper do
17+
render :children
18+
end
19+
end
20+
21+
def children_wrapper_attributes
22+
html_attributes.merge({
23+
id: component_config[:component_key]
24+
})
25+
end
26+
27+
end
28+
end

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
%div{ children_wrapper_attributes.merge(class: "matestack-cable-component-root") }
2+
=yield

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import Vue from 'vue/dist/vue.esm'
22
import matestackEventHub from '../../js/event-hub'
33
import queryParamsHelper from '../../js/helpers/query-params-helper'
44
import componentMixin from '../../component/component'
5-
import asyncMixin from '../../async/async'
5+
// import asyncMixin from '../../async/async'
66

77
const componentDef = {
8-
mixins: [componentMixin, asyncMixin],
8+
mixins: [componentMixin],
99
data: function(){
1010
return {
1111
currentLimit: null,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module Matestack::Ui::Core::Collection::Content
2-
class Content < Matestack::Ui::Core::Component::Rerender
2+
class Content < Matestack::Ui::Core::Component::Dynamic
33
vue_js_component_name 'matestack-ui-core-collection-content'
44

55
def setup

0 commit comments

Comments
 (0)