matestack-ui-core 2.1.1 → 3.0.0.rc1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/LICENSE +1 -1
- data/README.md +15 -478
- data/lib/matestack/ui/core/base.rb +21 -7
- data/lib/matestack/ui/core/context.rb +2 -2
- data/lib/matestack/ui/core/helper.rb +29 -29
- data/lib/matestack/ui/core/{app.rb → layout.rb} +6 -17
- data/lib/matestack/ui/core/page.rb +0 -44
- data/lib/matestack/ui/core/tag_helper.rb +17 -10
- data/lib/matestack/ui/core/version.rb +1 -1
- data/lib/matestack/ui/core.rb +2 -47
- data/lib/matestack/ui/layout.rb +1 -0
- data/lib/matestack/ui/page.rb +1 -1
- metadata +6 -69
- data/lib/matestack/ui/app.rb +0 -1
- data/lib/matestack/ui/core/vue_attributes.rb +0 -13
- data/lib/matestack/ui/vue_js/app/app.js +0 -40
- data/lib/matestack/ui/vue_js/app/location.js +0 -9
- data/lib/matestack/ui/vue_js/app/store.js +0 -103
- data/lib/matestack/ui/vue_js/components/action.js +0 -151
- data/lib/matestack/ui/vue_js/components/action.rb +0 -46
- data/lib/matestack/ui/vue_js/components/async.js +0 -110
- data/lib/matestack/ui/vue_js/components/async.rb +0 -84
- data/lib/matestack/ui/vue_js/components/cable.js +0 -100
- data/lib/matestack/ui/vue_js/components/cable.rb +0 -69
- data/lib/matestack/ui/vue_js/components/collection/content.js +0 -97
- data/lib/matestack/ui/vue_js/components/collection/content.rb +0 -32
- data/lib/matestack/ui/vue_js/components/collection/filter.js +0 -46
- data/lib/matestack/ui/vue_js/components/collection/filter.rb +0 -29
- data/lib/matestack/ui/vue_js/components/collection/filter_reset.rb +0 -19
- data/lib/matestack/ui/vue_js/components/collection/helper.rb +0 -128
- data/lib/matestack/ui/vue_js/components/collection/next.rb +0 -19
- data/lib/matestack/ui/vue_js/components/collection/order.js +0 -46
- data/lib/matestack/ui/vue_js/components/collection/order.rb +0 -28
- data/lib/matestack/ui/vue_js/components/collection/order_toggle.rb +0 -21
- data/lib/matestack/ui/vue_js/components/collection/order_toggle_indicator.rb +0 -30
- data/lib/matestack/ui/vue_js/components/collection/page.rb +0 -21
- data/lib/matestack/ui/vue_js/components/collection/previous.rb +0 -19
- data/lib/matestack/ui/vue_js/components/form/base.rb +0 -171
- data/lib/matestack/ui/vue_js/components/form/checkbox.js +0 -15
- data/lib/matestack/ui/vue_js/components/form/checkbox.rb +0 -105
- data/lib/matestack/ui/vue_js/components/form/checkbox_mixin.js +0 -70
- data/lib/matestack/ui/vue_js/components/form/context.rb +0 -15
- data/lib/matestack/ui/vue_js/components/form/fields_for_add_item.rb +0 -35
- data/lib/matestack/ui/vue_js/components/form/fields_for_remove_item.rb +0 -19
- data/lib/matestack/ui/vue_js/components/form/form.js +0 -473
- data/lib/matestack/ui/vue_js/components/form/form.rb +0 -84
- data/lib/matestack/ui/vue_js/components/form/input.js +0 -15
- data/lib/matestack/ui/vue_js/components/form/input.rb +0 -42
- data/lib/matestack/ui/vue_js/components/form/input_mixin.js +0 -53
- data/lib/matestack/ui/vue_js/components/form/radio.js +0 -15
- data/lib/matestack/ui/vue_js/components/form/radio.rb +0 -76
- data/lib/matestack/ui/vue_js/components/form/radio_mixin.js +0 -55
- data/lib/matestack/ui/vue_js/components/form/select.js +0 -15
- data/lib/matestack/ui/vue_js/components/form/select.rb +0 -88
- data/lib/matestack/ui/vue_js/components/form/select_mixin.js +0 -55
- data/lib/matestack/ui/vue_js/components/form/textarea.js +0 -15
- data/lib/matestack/ui/vue_js/components/form/textarea.rb +0 -37
- data/lib/matestack/ui/vue_js/components/form/textarea_mixin.js +0 -37
- data/lib/matestack/ui/vue_js/components/isolated.js +0 -108
- data/lib/matestack/ui/vue_js/components/isolated.rb +0 -86
- data/lib/matestack/ui/vue_js/components/mixin.js +0 -22
- data/lib/matestack/ui/vue_js/components/onclick.js +0 -19
- data/lib/matestack/ui/vue_js/components/onclick.rb +0 -37
- data/lib/matestack/ui/vue_js/components/toggle.js +0 -71
- data/lib/matestack/ui/vue_js/components/toggle.rb +0 -38
- data/lib/matestack/ui/vue_js/components/transition.js +0 -42
- data/lib/matestack/ui/vue_js/components/transition.rb +0 -40
- data/lib/matestack/ui/vue_js/components.rb +0 -111
- data/lib/matestack/ui/vue_js/event_hub.js +0 -5
- data/lib/matestack/ui/vue_js/helpers/query_params_helper.js +0 -56
- data/lib/matestack/ui/vue_js/index.js +0 -52
- data/lib/matestack/ui/vue_js/initialize.rb +0 -5
- data/lib/matestack/ui/vue_js/page/content.js +0 -23
- data/lib/matestack/ui/vue_js/vue.rb +0 -63
- data/lib/matestack/ui/vue_js_component.rb +0 -2
@@ -1,76 +0,0 @@
|
|
1
|
-
module Matestack
|
2
|
-
module Ui
|
3
|
-
module VueJs
|
4
|
-
module Components
|
5
|
-
module Form
|
6
|
-
class Radio < Matestack::Ui::VueJs::Components::Form::Base
|
7
|
-
vue_name 'matestack-ui-core-form-radio'
|
8
|
-
|
9
|
-
def response
|
10
|
-
div class: 'matestack-ui-core-form-radio' do
|
11
|
-
render_options
|
12
|
-
render_errors
|
13
|
-
end
|
14
|
-
end
|
15
|
-
|
16
|
-
def render_options
|
17
|
-
radio_options.to_a.each do |item|
|
18
|
-
input radio_attributes(item)
|
19
|
-
label item_label(item), ":for": item_id(item)
|
20
|
-
end
|
21
|
-
end
|
22
|
-
|
23
|
-
def component_id
|
24
|
-
"radio-component-for-#{key}"
|
25
|
-
end
|
26
|
-
|
27
|
-
def vue_props
|
28
|
-
{
|
29
|
-
init_value: init_value,
|
30
|
-
key: key,
|
31
|
-
}
|
32
|
-
end
|
33
|
-
|
34
|
-
def radio_attributes(item)
|
35
|
-
attributes.merge({
|
36
|
-
":id": item_id(item),
|
37
|
-
name: item_name(item),
|
38
|
-
value: item_value(item),
|
39
|
-
type: :radio,
|
40
|
-
ref: "select.#{key}",
|
41
|
-
'value-type': value_type(item_value(radio_options.first))
|
42
|
-
})
|
43
|
-
end
|
44
|
-
|
45
|
-
def radio_options
|
46
|
-
@radio_options ||= options.delete(:options)
|
47
|
-
end
|
48
|
-
|
49
|
-
# calculated attributes
|
50
|
-
|
51
|
-
def item_value(item)
|
52
|
-
item.is_a?(Array) ? item.last : item
|
53
|
-
end
|
54
|
-
|
55
|
-
def item_label(item)
|
56
|
-
item.is_a?(Array) ? item.first : item
|
57
|
-
end
|
58
|
-
|
59
|
-
def item_id(item)
|
60
|
-
"#{id || key}+'_#{item_value(item)}'"
|
61
|
-
end
|
62
|
-
|
63
|
-
def item_name(item)
|
64
|
-
"#{key}_#{item_value(item)}"
|
65
|
-
end
|
66
|
-
|
67
|
-
def v_model_type
|
68
|
-
item_value(radio_options.first).is_a?(Numeric) ? 'v-model.number' : 'v-model'
|
69
|
-
end
|
70
|
-
|
71
|
-
end
|
72
|
-
end
|
73
|
-
end
|
74
|
-
end
|
75
|
-
end
|
76
|
-
end
|
@@ -1,55 +0,0 @@
|
|
1
|
-
const formRadioMixin = {
|
2
|
-
methods: {
|
3
|
-
initialize: function(){
|
4
|
-
const self = this
|
5
|
-
let data = {};
|
6
|
-
|
7
|
-
for (let key in self.$refs) {
|
8
|
-
let initValue = self.$refs[key]["attributes"]["init-value"];
|
9
|
-
let valueType = self.$refs[key]["attributes"]["value-type"];
|
10
|
-
|
11
|
-
if (key.startsWith("select.")) {
|
12
|
-
if (key.startsWith("select.multiple.")) {
|
13
|
-
self.$set(self.$parent.data, key.replace("select.multiple.", ""), null)
|
14
|
-
if (initValue) {
|
15
|
-
self.setValue(JSON.parse(initValue["value"]));
|
16
|
-
self.afterInitialize(JSON.parse(initValue["value"]))
|
17
|
-
} else {
|
18
|
-
self.setValue([]);
|
19
|
-
self.afterInitialize([]);
|
20
|
-
}
|
21
|
-
} else {
|
22
|
-
self.$set(self.$parent.data, key.replace("select.", ""), null)
|
23
|
-
if (initValue) {
|
24
|
-
if (valueType && valueType["value"] == "Integer") {
|
25
|
-
self.setValue(parseInt(initValue["value"]));
|
26
|
-
self.afterInitialize(parseInt(initValue["value"]))
|
27
|
-
} else {
|
28
|
-
self.setValue(initValue["value"]);
|
29
|
-
self.afterInitialize(initValue["value"])
|
30
|
-
}
|
31
|
-
} else {
|
32
|
-
self.setValue(null);
|
33
|
-
self.afterInitialize(null)
|
34
|
-
}
|
35
|
-
}
|
36
|
-
}
|
37
|
-
}
|
38
|
-
},
|
39
|
-
inputChanged: function (key) {
|
40
|
-
if (this.$parent.isNestedForm){
|
41
|
-
this.$parent.data["_destroy"] = false;
|
42
|
-
}
|
43
|
-
this.$parent.resetErrors(key);
|
44
|
-
},
|
45
|
-
afterInitialize: function(value){
|
46
|
-
// can be used in the main component for further initialization steps
|
47
|
-
},
|
48
|
-
setValue: function (value){
|
49
|
-
this.$parent.data[this.props["key"]] = value
|
50
|
-
}
|
51
|
-
}
|
52
|
-
|
53
|
-
}
|
54
|
-
|
55
|
-
export default formRadioMixin
|
@@ -1,15 +0,0 @@
|
|
1
|
-
import Vue from "vue/dist/vue.esm";
|
2
|
-
|
3
|
-
import formSelectMixin from "./select_mixin";
|
4
|
-
import componentMixin from "../mixin";
|
5
|
-
|
6
|
-
const componentDef = {
|
7
|
-
mixins: [componentMixin, formSelectMixin],
|
8
|
-
data() {
|
9
|
-
return {};
|
10
|
-
}
|
11
|
-
}
|
12
|
-
|
13
|
-
let component = Vue.component("matestack-ui-core-form-select", componentDef);
|
14
|
-
|
15
|
-
export default componentDef;
|
@@ -1,88 +0,0 @@
|
|
1
|
-
module Matestack
|
2
|
-
module Ui
|
3
|
-
module VueJs
|
4
|
-
module Components
|
5
|
-
module Form
|
6
|
-
class Select < Matestack::Ui::VueJs::Components::Form::Base
|
7
|
-
vue_name 'matestack-ui-core-form-select'
|
8
|
-
|
9
|
-
def response
|
10
|
-
div class: 'matestack-ui-core-form-select' do
|
11
|
-
label input_label, ":for": id if input_label
|
12
|
-
select select_attributes do
|
13
|
-
render_options
|
14
|
-
end
|
15
|
-
render_errors
|
16
|
-
end
|
17
|
-
end
|
18
|
-
|
19
|
-
def render_options
|
20
|
-
if placeholder
|
21
|
-
option value: nil, disabled: true, selected: init_value.nil?, text: placeholder
|
22
|
-
end
|
23
|
-
select_options.to_a.each do |item|
|
24
|
-
option item_label(item), value: item_value(item), disabled: item_disabled?(item)
|
25
|
-
end
|
26
|
-
end
|
27
|
-
|
28
|
-
def component_id
|
29
|
-
"select-component-for-#{key}"
|
30
|
-
end
|
31
|
-
|
32
|
-
def vue_props
|
33
|
-
{
|
34
|
-
init_value: init_value,
|
35
|
-
key: key,
|
36
|
-
}
|
37
|
-
end
|
38
|
-
|
39
|
-
def select_attributes
|
40
|
-
attributes.merge({
|
41
|
-
multiple: multiple,
|
42
|
-
":id": id,
|
43
|
-
ref: "select#{'.multiple' if multiple}.#{key}",
|
44
|
-
'value-type': value_type(select_options.first),
|
45
|
-
'init-value': init_value,
|
46
|
-
})
|
47
|
-
end
|
48
|
-
|
49
|
-
# select options
|
50
|
-
|
51
|
-
def select_options
|
52
|
-
@select_options ||= options.delete(:options)
|
53
|
-
end
|
54
|
-
|
55
|
-
# calculated attributes
|
56
|
-
|
57
|
-
def item_value(item)
|
58
|
-
item.is_a?(Array) ? item.last : item
|
59
|
-
end
|
60
|
-
|
61
|
-
def item_label(item)
|
62
|
-
item.is_a?(Array) ? item.first : item
|
63
|
-
end
|
64
|
-
|
65
|
-
def item_id(item)
|
66
|
-
"#{key}_#{item_value(item)}"
|
67
|
-
end
|
68
|
-
|
69
|
-
def item_disabled?(item)
|
70
|
-
disabled_options && disabled_options.to_a.include?(item)
|
71
|
-
end
|
72
|
-
|
73
|
-
def v_model_type
|
74
|
-
item_value(select_options.first).is_a?(Numeric) ? 'v-model.number' : 'v-model'
|
75
|
-
end
|
76
|
-
|
77
|
-
# attributes
|
78
|
-
|
79
|
-
def disabled_options
|
80
|
-
@disabled_options ||= options.delete(:disabled_options)
|
81
|
-
end
|
82
|
-
|
83
|
-
end
|
84
|
-
end
|
85
|
-
end
|
86
|
-
end
|
87
|
-
end
|
88
|
-
end
|
@@ -1,55 +0,0 @@
|
|
1
|
-
const formSelectMixin = {
|
2
|
-
methods: {
|
3
|
-
initialize: function(){
|
4
|
-
const self = this
|
5
|
-
let data = {};
|
6
|
-
|
7
|
-
for (let key in self.$refs) {
|
8
|
-
let initValue = self.$refs[key]["attributes"]["init-value"];
|
9
|
-
let valueType = self.$refs[key]["attributes"]["value-type"];
|
10
|
-
|
11
|
-
if (key.startsWith("select.")) {
|
12
|
-
if (key.startsWith("select.multiple.")) {
|
13
|
-
self.$set(self.$parent.data, key.replace("select.multiple.", ""), null)
|
14
|
-
if (initValue) {
|
15
|
-
self.setValue(JSON.parse(initValue["value"]));
|
16
|
-
self.afterInitialize(JSON.parse(initValue["value"]))
|
17
|
-
} else {
|
18
|
-
self.setValue([]);
|
19
|
-
self.afterInitialize([]);
|
20
|
-
}
|
21
|
-
} else {
|
22
|
-
self.$set(self.$parent.data, key.replace("select.", ""), null)
|
23
|
-
if (initValue) {
|
24
|
-
if (valueType && valueType["value"] == "Integer") {
|
25
|
-
self.setValue(parseInt(initValue["value"]));
|
26
|
-
self.afterInitialize(parseInt(initValue["value"]))
|
27
|
-
} else {
|
28
|
-
self.setValue(initValue["value"]);
|
29
|
-
self.afterInitialize(initValue["value"])
|
30
|
-
}
|
31
|
-
} else {
|
32
|
-
self.setValue(null);
|
33
|
-
self.afterInitialize(null)
|
34
|
-
}
|
35
|
-
}
|
36
|
-
}
|
37
|
-
}
|
38
|
-
},
|
39
|
-
inputChanged: function (key) {
|
40
|
-
if (this.$parent.isNestedForm){
|
41
|
-
this.$parent.data["_destroy"] = false;
|
42
|
-
}
|
43
|
-
this.$parent.resetErrors(key);
|
44
|
-
},
|
45
|
-
afterInitialize: function(value){
|
46
|
-
// can be used in the main component for further initialization steps
|
47
|
-
},
|
48
|
-
setValue: function (value){
|
49
|
-
this.$parent.data[this.props["key"]] = value
|
50
|
-
}
|
51
|
-
}
|
52
|
-
|
53
|
-
}
|
54
|
-
|
55
|
-
export default formSelectMixin
|
@@ -1,15 +0,0 @@
|
|
1
|
-
import Vue from "vue/dist/vue.esm";
|
2
|
-
|
3
|
-
import formTextareaMixin from "./textarea_mixin";
|
4
|
-
import componentMixin from "../mixin";
|
5
|
-
|
6
|
-
const componentDef = {
|
7
|
-
mixins: [componentMixin, formTextareaMixin],
|
8
|
-
data() {
|
9
|
-
return {};
|
10
|
-
}
|
11
|
-
}
|
12
|
-
|
13
|
-
let component = Vue.component("matestack-ui-core-form-textarea", componentDef);
|
14
|
-
|
15
|
-
export default componentDef;
|
@@ -1,37 +0,0 @@
|
|
1
|
-
module Matestack
|
2
|
-
module Ui
|
3
|
-
module VueJs
|
4
|
-
module Components
|
5
|
-
module Form
|
6
|
-
class Textarea < Matestack::Ui::VueJs::Components::Form::Base
|
7
|
-
vue_name 'matestack-ui-core-form-textarea'
|
8
|
-
|
9
|
-
def response
|
10
|
-
div class: 'matestack-ui-core-form-textarea' do
|
11
|
-
label input_label, ":for": id if input_label
|
12
|
-
textarea textarea_attributes
|
13
|
-
render_errors
|
14
|
-
end
|
15
|
-
end
|
16
|
-
|
17
|
-
def textarea_attributes
|
18
|
-
attributes
|
19
|
-
end
|
20
|
-
|
21
|
-
def component_id
|
22
|
-
"textarea-component-for-#{key}"
|
23
|
-
end
|
24
|
-
|
25
|
-
def vue_props
|
26
|
-
{
|
27
|
-
init_value: init_value,
|
28
|
-
key: key
|
29
|
-
}
|
30
|
-
end
|
31
|
-
|
32
|
-
end
|
33
|
-
end
|
34
|
-
end
|
35
|
-
end
|
36
|
-
end
|
37
|
-
end
|
@@ -1,37 +0,0 @@
|
|
1
|
-
const formTextareaMixin = {
|
2
|
-
methods: {
|
3
|
-
initialize: function(){
|
4
|
-
const self = this
|
5
|
-
let data = {};
|
6
|
-
|
7
|
-
for (let key in this.$refs) {
|
8
|
-
let initValue = this.$refs[key]["attributes"]["init-value"];
|
9
|
-
|
10
|
-
self.$set(self.$parent.data, key.replace("input.", ""), null)
|
11
|
-
|
12
|
-
if (initValue) {
|
13
|
-
self.setValue(initValue["value"])
|
14
|
-
self.afterInitialize(initValue["value"])
|
15
|
-
} else {
|
16
|
-
self.setValue(null)
|
17
|
-
self.afterInitialize(null)
|
18
|
-
}
|
19
|
-
}
|
20
|
-
},
|
21
|
-
inputChanged: function (key) {
|
22
|
-
if (this.$parent.isNestedForm){
|
23
|
-
this.$parent.data["_destroy"] = false;
|
24
|
-
}
|
25
|
-
this.$parent.resetErrors(key);
|
26
|
-
},
|
27
|
-
afterInitialize: function(value){
|
28
|
-
// can be used in the main component for further initialization steps
|
29
|
-
},
|
30
|
-
setValue: function (value){
|
31
|
-
this.$parent.data[this.props["key"]] = value
|
32
|
-
}
|
33
|
-
}
|
34
|
-
|
35
|
-
}
|
36
|
-
|
37
|
-
export default formTextareaMixin
|
@@ -1,108 +0,0 @@
|
|
1
|
-
import Vue from 'vue/dist/vue.esm'
|
2
|
-
import axios from 'axios'
|
3
|
-
import VRuntimeTemplate from "v-runtime-template"
|
4
|
-
import matestackEventHub from '../event_hub'
|
5
|
-
|
6
|
-
const componentDef = {
|
7
|
-
props: ['props', 'params'],
|
8
|
-
data: function(){
|
9
|
-
return {
|
10
|
-
isolatedTemplate: null,
|
11
|
-
loading: false,
|
12
|
-
loadingError: false
|
13
|
-
}
|
14
|
-
},
|
15
|
-
methods: {
|
16
|
-
rerender: function(){
|
17
|
-
var self = this;
|
18
|
-
self.loading = true;
|
19
|
-
self.loadingError = false;
|
20
|
-
if(self.props["rerender_delay"] != undefined){
|
21
|
-
setTimeout(function () {
|
22
|
-
self.renderIsolatedContent();
|
23
|
-
}, parseInt(this.props["rerender_delay"]));
|
24
|
-
} else {
|
25
|
-
self.renderIsolatedContent();
|
26
|
-
}
|
27
|
-
},
|
28
|
-
renderIsolatedContent: function(){
|
29
|
-
var self = this;
|
30
|
-
self.loading = true;
|
31
|
-
self.loadingError = false;
|
32
|
-
axios({
|
33
|
-
method: "get",
|
34
|
-
url: location.pathname + location.search,
|
35
|
-
headers: {
|
36
|
-
'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
|
37
|
-
},
|
38
|
-
params: {
|
39
|
-
"component_class": self.props["component_class"],
|
40
|
-
"public_options": self.props["public_options"]
|
41
|
-
}
|
42
|
-
})
|
43
|
-
.then(function(response){
|
44
|
-
self.loading = false;
|
45
|
-
self.loadingStart = false;
|
46
|
-
self.loadingEnd = true;
|
47
|
-
self.isolatedTemplate = response['data'];
|
48
|
-
})
|
49
|
-
.catch(function(error){
|
50
|
-
self.loadingError = true;
|
51
|
-
matestackEventHub.$emit('isolate_rerender_error', { class: self.props["component_class"] })
|
52
|
-
})
|
53
|
-
},
|
54
|
-
startDefer: function(){
|
55
|
-
const self = this
|
56
|
-
self.loading = true;
|
57
|
-
setTimeout(function () {
|
58
|
-
self.renderIsolatedContent()
|
59
|
-
}, parseInt(this.props["defer"]));
|
60
|
-
}
|
61
|
-
},
|
62
|
-
created: function () {
|
63
|
-
const self = this
|
64
|
-
},
|
65
|
-
beforeDestroy: function() {
|
66
|
-
const self = this
|
67
|
-
if(this.props["rerender_on"] != undefined){
|
68
|
-
var rerender_events = this.props["rerender_on"].split(",")
|
69
|
-
rerender_events.forEach(rerender_event => matestackEventHub.$off(rerender_event.trim(), self.renderIsolatedContent));
|
70
|
-
}
|
71
|
-
},
|
72
|
-
mounted: function (){
|
73
|
-
const self = this
|
74
|
-
if(this.props["init_on"] === undefined || this.props["init_on"] === null){
|
75
|
-
if(self.props["defer"] == true || Number.isInteger(self.props["defer"])){
|
76
|
-
if(!isNaN(self.props["defer"])){
|
77
|
-
self.startDefer()
|
78
|
-
}
|
79
|
-
else{
|
80
|
-
self.renderIsolatedContent();
|
81
|
-
}
|
82
|
-
}
|
83
|
-
}else{
|
84
|
-
if(self.props["defer"] != undefined){
|
85
|
-
if(!isNaN(self.props["defer"])){
|
86
|
-
var init_on_events = this.props["init_on"].split(",")
|
87
|
-
init_on_events.forEach(init_on_event => matestackEventHub.$on(init_on_event.trim(), self.startDefer));
|
88
|
-
}
|
89
|
-
}else{
|
90
|
-
var init_on_events = this.props["init_on"].split(",")
|
91
|
-
init_on_events.forEach(init_on_event => matestackEventHub.$on(init_on_event.trim(), self.renderIsolatedContent));
|
92
|
-
}
|
93
|
-
}
|
94
|
-
|
95
|
-
if(this.props["rerender_on"] != undefined){
|
96
|
-
var rerender_events = this.props["rerender_on"].split(",")
|
97
|
-
rerender_events.forEach(rerender_event => matestackEventHub.$on(rerender_event.trim(), self.rerender));
|
98
|
-
}
|
99
|
-
|
100
|
-
},
|
101
|
-
components: {
|
102
|
-
VRuntimeTemplate: VRuntimeTemplate
|
103
|
-
}
|
104
|
-
}
|
105
|
-
|
106
|
-
let component = Vue.component('matestack-ui-core-isolate', componentDef)
|
107
|
-
|
108
|
-
export default componentDef
|
@@ -1,86 +0,0 @@
|
|
1
|
-
module Matestack
|
2
|
-
module Ui
|
3
|
-
module VueJs
|
4
|
-
module Components
|
5
|
-
class Isolated < Matestack::Ui::VueJs::Vue
|
6
|
-
vue_name 'matestack-ui-core-isolate'
|
7
|
-
|
8
|
-
optional :defer, :init_on, :public_options, :rerender_on, :rerender_delay
|
9
|
-
|
10
|
-
def initialize(html_tag = nil, text = nil, options = {}, &block)
|
11
|
-
extract_options(text, options)
|
12
|
-
only_public_options!
|
13
|
-
isolated_parent = Matestack::Ui::Core::Context.isolated_parent
|
14
|
-
Matestack::Ui::Core::Context.isolated_parent = self
|
15
|
-
super(html_tag, text, options, &block)
|
16
|
-
Matestack::Ui::Core::Context.isolated_parent = isolated_parent
|
17
|
-
end
|
18
|
-
|
19
|
-
def create_children
|
20
|
-
# content only should be rendered if param :component_class is present
|
21
|
-
warn "[WARNING] '#{self.class}' was accessed but not authorized" unless authorized?
|
22
|
-
if params[:component_class].present?
|
23
|
-
self.response if authorized?
|
24
|
-
else
|
25
|
-
self.isolated do
|
26
|
-
self.response if authorized?
|
27
|
-
end
|
28
|
-
end
|
29
|
-
end
|
30
|
-
|
31
|
-
def isolated
|
32
|
-
Matestack::Ui::Core::Base.new(:component, component_attributes) do
|
33
|
-
div class: 'matestack-isolated-component-container', 'v-bind:class': '{ loading: loading === true }' do
|
34
|
-
if self.respond_to? :loading_state_element
|
35
|
-
div class: 'loading-state-element-wrapper', 'v-bind:class': '{ loading: loading === true }' do
|
36
|
-
loading_state_element
|
37
|
-
end
|
38
|
-
end
|
39
|
-
unless ctx.defer || ctx.init_on
|
40
|
-
div class: 'matestack-isolated-component-wrapper', 'v-if': 'isolatedTemplate == null', 'v-bind:class': '{ loading: loading === true }' do
|
41
|
-
div class: 'matestack-isolated-component-root' do
|
42
|
-
yield
|
43
|
-
end
|
44
|
-
end
|
45
|
-
end
|
46
|
-
div class: 'matestack-isolated-component-wrapper', 'v-if': 'isolatedTemplate != null', 'v-bind:class': '{ loading: loading === true }' do
|
47
|
-
div class: 'matestack-isolated-component-root' do
|
48
|
-
Matestack::Ui::Core::Base.new('v-runtime-template', ':template': 'isolatedTemplate')
|
49
|
-
end
|
50
|
-
end
|
51
|
-
end
|
52
|
-
end
|
53
|
-
end
|
54
|
-
|
55
|
-
def vue_props
|
56
|
-
{
|
57
|
-
component_class: self.class.name,
|
58
|
-
public_options: ctx.public_options,
|
59
|
-
defer: ctx.defer,
|
60
|
-
rerender_on: ctx.rerender_on,
|
61
|
-
rerender_delay: ctx.rerender_delay,
|
62
|
-
init_on: ctx.init_on,
|
63
|
-
}
|
64
|
-
end
|
65
|
-
|
66
|
-
def public_options
|
67
|
-
ctx.public_options || {}
|
68
|
-
end
|
69
|
-
|
70
|
-
def authorized?
|
71
|
-
raise "'authorized?' needs to be implemented by '#{self.class}'"
|
72
|
-
end
|
73
|
-
|
74
|
-
def only_public_options!
|
75
|
-
if self.options.except(:defer, :init_on, :public_options, :rerender_on, :rerender_delay).keys.any?
|
76
|
-
error_message = "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."
|
77
|
-
error_message << " Check your usages of '#{self.class}' components"
|
78
|
-
raise error_message
|
79
|
-
end
|
80
|
-
end
|
81
|
-
|
82
|
-
end
|
83
|
-
end
|
84
|
-
end
|
85
|
-
end
|
86
|
-
end
|
@@ -1,22 +0,0 @@
|
|
1
|
-
import matestackEventHub from '../event_hub'
|
2
|
-
|
3
|
-
const componentMixin = {
|
4
|
-
props: ['props', 'params'],
|
5
|
-
methods: {
|
6
|
-
registerEvents: function(events, callback){
|
7
|
-
if(events != undefined){
|
8
|
-
var event_names = events.split(",")
|
9
|
-
event_names.forEach(event_name => matestackEventHub.$on(event_name.trim(), callback));
|
10
|
-
}
|
11
|
-
},
|
12
|
-
removeEvents: function(events, callback){
|
13
|
-
if(events != undefined){
|
14
|
-
var event_names = events.split(",")
|
15
|
-
event_names.forEach(event_name => matestackEventHub.$off(event_name.trim(), callback));
|
16
|
-
}
|
17
|
-
}
|
18
|
-
}
|
19
|
-
|
20
|
-
}
|
21
|
-
|
22
|
-
export default componentMixin
|
@@ -1,19 +0,0 @@
|
|
1
|
-
import Vue from 'vue/dist/vue.esm'
|
2
|
-
import matestackEventHub from '../event_hub'
|
3
|
-
import componentMixin from './mixin'
|
4
|
-
|
5
|
-
const componentDef = {
|
6
|
-
mixins: [componentMixin],
|
7
|
-
data: function(){
|
8
|
-
return { }
|
9
|
-
},
|
10
|
-
methods: {
|
11
|
-
perform: function(){
|
12
|
-
matestackEventHub.$emit(this.props["emit"], this.props["data"])
|
13
|
-
}
|
14
|
-
}
|
15
|
-
}
|
16
|
-
|
17
|
-
let component = Vue.component('matestack-ui-core-onclick', componentDef)
|
18
|
-
|
19
|
-
export default componentDef
|
@@ -1,37 +0,0 @@
|
|
1
|
-
module Matestack
|
2
|
-
module Ui
|
3
|
-
module VueJs
|
4
|
-
module Components
|
5
|
-
class Onclick < Matestack::Ui::VueJs::Vue
|
6
|
-
vue_name 'matestack-ui-core-onclick'
|
7
|
-
|
8
|
-
optional :emit, :data
|
9
|
-
|
10
|
-
def response
|
11
|
-
a onclick_attributes do
|
12
|
-
yield
|
13
|
-
end
|
14
|
-
end
|
15
|
-
|
16
|
-
def onclick_attributes
|
17
|
-
options.merge({
|
18
|
-
class: "matestack-onclick-component-root",
|
19
|
-
'@click.prevent': 'perform',
|
20
|
-
href: "#"
|
21
|
-
})
|
22
|
-
end
|
23
|
-
|
24
|
-
protected
|
25
|
-
|
26
|
-
def vue_props
|
27
|
-
{
|
28
|
-
emit: ctx.emit,
|
29
|
-
data: ctx.data,
|
30
|
-
}
|
31
|
-
end
|
32
|
-
|
33
|
-
end
|
34
|
-
end
|
35
|
-
end
|
36
|
-
end
|
37
|
-
end
|