matestack-ui-core 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of matestack-ui-core might be problematic. Click here for more details.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +230 -0
- data/Rakefile +34 -0
- data/app/assets/config/basemate_ui_core_manifest.js +2 -0
- data/app/assets/javascripts/basemate/ui/core/application.js +15 -0
- data/app/assets/stylesheets/basemate/ui/core/application.css +15 -0
- data/app/concepts/absolute/cell/absolute.rb +17 -0
- data/app/concepts/absolute/view/absolute.haml +3 -0
- data/app/concepts/action/cell/action.rb +52 -0
- data/app/concepts/action/js/action.js +49 -0
- data/app/concepts/action/view/action.haml +3 -0
- data/app/concepts/app/cell/app.rb +76 -0
- data/app/concepts/app/js/app.js +27 -0
- data/app/concepts/app/js/store.js +71 -0
- data/app/concepts/app/utils/app_node.rb +53 -0
- data/app/concepts/app/view/app.haml +4 -0
- data/app/concepts/async/cell/async.rb +10 -0
- data/app/concepts/async/js/async.js +57 -0
- data/app/concepts/async/view/async.haml +2 -0
- data/app/concepts/br/cell/br.rb +5 -0
- data/app/concepts/br/view/br.haml +5 -0
- data/app/concepts/button/cell/button.rb +5 -0
- data/app/concepts/button/view/button.haml +7 -0
- data/app/concepts/component/cell/dynamic.rb +226 -0
- data/app/concepts/component/cell/static.rb +16 -0
- data/app/concepts/component/js/anonym-dynamic-component.js +10 -0
- data/app/concepts/component/js/component.js +60 -0
- data/app/concepts/component/utils/component_node.rb +69 -0
- data/app/concepts/component/view/children.haml +2 -0
- data/app/concepts/component/view/dynamic.haml +6 -0
- data/app/concepts/component/view/dynamic_without_rerender.haml +2 -0
- data/app/concepts/component/view/response.haml +2 -0
- data/app/concepts/component/view/response_dynamic.haml +7 -0
- data/app/concepts/component/view/response_dynamic_without_rerender.haml +3 -0
- data/app/concepts/component/view/static.haml +1 -0
- data/app/concepts/core/js/core.js +27 -0
- data/app/concepts/core/js/event-hub.js +5 -0
- data/app/concepts/div/cell/div.rb +6 -0
- data/app/concepts/div/view/div.haml +3 -0
- data/app/concepts/footer/cell/footer.rb +5 -0
- data/app/concepts/footer/view/footer.haml +3 -0
- data/app/concepts/form/cell/form.rb +71 -0
- data/app/concepts/form/cell/inline.rb +9 -0
- data/app/concepts/form/cell/input.rb +74 -0
- data/app/concepts/form/cell/select.rb +73 -0
- data/app/concepts/form/cell/submit.rb +9 -0
- data/app/concepts/form/js/form.js +136 -0
- data/app/concepts/form/view/form.haml +2 -0
- data/app/concepts/form/view/inline.haml +6 -0
- data/app/concepts/form/view/input.haml +29 -0
- data/app/concepts/form/view/select.haml +72 -0
- data/app/concepts/form/view/submit.haml +3 -0
- data/app/concepts/header/cell/header.rb +5 -0
- data/app/concepts/header/view/header.haml +3 -0
- data/app/concepts/heading/cell/heading.rb +5 -0
- data/app/concepts/heading/view/heading.haml +50 -0
- data/app/concepts/html/cell/html.rb +17 -0
- data/app/concepts/html/js/html.js +10 -0
- data/app/concepts/html/view/html.haml +3 -0
- data/app/concepts/icon/cell/icon.rb +5 -0
- data/app/concepts/icon/view/icon.haml +6 -0
- data/app/concepts/img/cell/img.rb +5 -0
- data/app/concepts/img/view/img.haml +1 -0
- data/app/concepts/input/cell/input.rb +5 -0
- data/app/concepts/input/view/input.haml +3 -0
- data/app/concepts/label/cell/label.rb +5 -0
- data/app/concepts/label/view/label.haml +7 -0
- data/app/concepts/li/cell/li.rb +5 -0
- data/app/concepts/li/view/li.haml +6 -0
- data/app/concepts/link/cell/link.rb +24 -0
- data/app/concepts/link/view/link.haml +6 -0
- data/app/concepts/main/cell/main.rb +5 -0
- data/app/concepts/main/view/main.haml +3 -0
- data/app/concepts/nav/cell/nav.rb +5 -0
- data/app/concepts/nav/view/nav.haml +3 -0
- data/app/concepts/ol/cell/ol.rb +5 -0
- data/app/concepts/ol/view/ol.haml +3 -0
- data/app/concepts/onclick/cell/onclick.rb +6 -0
- data/app/concepts/onclick/js/onclick.js +21 -0
- data/app/concepts/onclick/view/onclick.haml +2 -0
- data/app/concepts/page/cell/content.rb +5 -0
- data/app/concepts/page/cell/page.rb +128 -0
- data/app/concepts/page/js/content.js +17 -0
- data/app/concepts/page/utils/page_node.rb +66 -0
- data/app/concepts/page/view/content.haml +7 -0
- data/app/concepts/page/view/page.haml +9 -0
- data/app/concepts/partial/cell/partial.rb +5 -0
- data/app/concepts/partial/view/partial.haml +2 -0
- data/app/concepts/pg/cell/pg.rb +5 -0
- data/app/concepts/pg/view/pg.haml +8 -0
- data/app/concepts/plain/cell/plain.rb +10 -0
- data/app/concepts/progress/cell/progress.rb +5 -0
- data/app/concepts/progress/view/progress.haml +3 -0
- data/app/concepts/section/cell/section.rb +5 -0
- data/app/concepts/section/view/section.haml +3 -0
- data/app/concepts/shared/utils/to_cell.rb +126 -0
- data/app/concepts/slot/cell/slot.rb +10 -0
- data/app/concepts/slot/view/slot.haml +2 -0
- data/app/concepts/span/cell/span.rb +5 -0
- data/app/concepts/span/view/span.haml +3 -0
- data/app/concepts/table/cell/table.rb +5 -0
- data/app/concepts/table/view/table.haml +3 -0
- data/app/concepts/td/cell/td.rb +5 -0
- data/app/concepts/td/view/td.haml +8 -0
- data/app/concepts/th/cell/th.rb +5 -0
- data/app/concepts/th/view/th.haml +8 -0
- data/app/concepts/tr/cell/tr.rb +5 -0
- data/app/concepts/tr/view/tr.haml +3 -0
- data/app/concepts/transition/cell/transition.rb +31 -0
- data/app/concepts/transition/js/transition.js +26 -0
- data/app/concepts/transition/view/transition.haml +7 -0
- data/app/concepts/ul/cell/ul.rb +5 -0
- data/app/concepts/ul/view/ul.haml +3 -0
- data/app/concepts/view/cell/view.rb +7 -0
- data/app/concepts/view/js/view.js +42 -0
- data/app/concepts/view/view/view.haml +2 -0
- data/app/controllers/basemate/ui/core/application_controller.rb +9 -0
- data/app/controllers/basemate/ui/core/docs_controller.rb +17 -0
- data/app/helpers/matestack/ui/core/application_helper.rb +35 -0
- data/config/routes.rb +3 -0
- data/lib/matestack/ui/core.rb +15 -0
- data/lib/matestack/ui/core/engine.rb +19 -0
- data/lib/matestack/ui/core/version.rb +7 -0
- data/lib/tasks/matestack/ui/core_tasks.rake +4 -0
- data/vendor/assets/javascripts/manifest.json +4 -0
- data/vendor/assets/javascripts/matestack-ui-core.js +15055 -0
- data/vendor/assets/javascripts/matestack-ui-core.js.map +1 -0
- metadata +277 -0
@@ -0,0 +1,136 @@
|
|
1
|
+
import Vue from 'vue/dist/vue.esm'
|
2
|
+
import Vuex from 'vuex'
|
3
|
+
import axios from 'axios'
|
4
|
+
|
5
|
+
import matestackEventHub from 'core/js/event-hub'
|
6
|
+
|
7
|
+
import componentMixin from 'component/js/component'
|
8
|
+
|
9
|
+
const componentDef = {
|
10
|
+
mixins: [componentMixin],
|
11
|
+
data: function(){
|
12
|
+
return {
|
13
|
+
data: {},
|
14
|
+
showInlineForm: false,
|
15
|
+
errors: {}
|
16
|
+
}
|
17
|
+
},
|
18
|
+
methods: {
|
19
|
+
initDataKey: function(key, initValue){
|
20
|
+
this.data[key] = initValue;
|
21
|
+
},
|
22
|
+
inputChanged: function(key){
|
23
|
+
this.resetErrors(key)
|
24
|
+
},
|
25
|
+
updateFormValue: function(key, value){
|
26
|
+
this.data[key] = value;
|
27
|
+
},
|
28
|
+
resetErrors: function(key){
|
29
|
+
if (this.errors[key]){
|
30
|
+
this.errors[key] = null;
|
31
|
+
}
|
32
|
+
},
|
33
|
+
launchInlineForm: function(key, value){
|
34
|
+
this.showInlineForm = true;
|
35
|
+
this.data[key] = value;
|
36
|
+
const self = this;
|
37
|
+
setTimeout(function () {
|
38
|
+
self.$refs.inlineinput.focus();
|
39
|
+
}, 300);
|
40
|
+
},
|
41
|
+
closeInlineForm: function(){
|
42
|
+
this.showInlineForm = false;
|
43
|
+
},
|
44
|
+
setProps: function(flat, newVal){
|
45
|
+
for(var i in flat){
|
46
|
+
if((typeof flat[i] === "object") && !(flat[i] instanceof Array)){
|
47
|
+
setProps(flat[i], newVal);
|
48
|
+
return;
|
49
|
+
} else {
|
50
|
+
flat[i] = newVal;
|
51
|
+
}
|
52
|
+
}
|
53
|
+
},
|
54
|
+
initValues: function(){
|
55
|
+
let self = this;
|
56
|
+
let data = {}
|
57
|
+
for (let key in self.$refs) {
|
58
|
+
let initValue = self.$refs[key]["attributes"]["init-value"]
|
59
|
+
let valueType = self.$refs[key]["attributes"]["value-type"]
|
60
|
+
|
61
|
+
if (key.startsWith("input.")){
|
62
|
+
if(initValue){
|
63
|
+
data[key.replace('input.', '')] = initValue["value"]
|
64
|
+
}else{
|
65
|
+
data[key.replace('input.', '')] = null
|
66
|
+
}
|
67
|
+
}
|
68
|
+
if (key.startsWith("select.")){
|
69
|
+
if (key.startsWith("select.multiple.")){
|
70
|
+
if(initValue){
|
71
|
+
data[key.replace('select.multiple.', '')] = JSON.parse(initValue["value"])
|
72
|
+
}else{
|
73
|
+
data[key.replace('select.multiple.', '')] = []
|
74
|
+
}
|
75
|
+
}else{
|
76
|
+
if(initValue){
|
77
|
+
if(valueType && valueType["value"] == "Integer")
|
78
|
+
data[key.replace('select.', '')] = parseInt(initValue["value"])
|
79
|
+
else{
|
80
|
+
data[key.replace('select.', '')] = initValue["value"]
|
81
|
+
}
|
82
|
+
}else{
|
83
|
+
data[key.replace('select.', '')] = null
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
87
|
+
}
|
88
|
+
}
|
89
|
+
self.data = data;
|
90
|
+
},
|
91
|
+
perform: function(){
|
92
|
+
const self = this
|
93
|
+
let payload = {}
|
94
|
+
payload[self.componentConfig["for"]] = self.data
|
95
|
+
axios({
|
96
|
+
method: self.componentConfig["method"],
|
97
|
+
url: self.componentConfig["submit_path"],
|
98
|
+
data: payload,
|
99
|
+
headers: {
|
100
|
+
'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
|
101
|
+
}
|
102
|
+
})
|
103
|
+
.then(function(response){
|
104
|
+
if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
|
105
|
+
matestackEventHub.$emit(self.componentConfig["success"]["emit"], response.data);
|
106
|
+
}
|
107
|
+
if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["transition"] != undefined && self.$store != undefined) {
|
108
|
+
let path = self.componentConfig["success"]["transition"]["path"]
|
109
|
+
self.$store.dispatch('navigateTo', {url: path, backwards: false})
|
110
|
+
}
|
111
|
+
self.setProps(self.data, null);
|
112
|
+
self.initValues()
|
113
|
+
self.showInlineForm = false;
|
114
|
+
})
|
115
|
+
.catch(function(error){
|
116
|
+
if(error.response && error.response.data && error.response.data.errors){
|
117
|
+
self.errors = error.response.data.errors;
|
118
|
+
}
|
119
|
+
if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
|
120
|
+
matestackEventHub.$emit(self.componentConfig["failure"]["emit"], error.response.data);
|
121
|
+
}
|
122
|
+
if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["transition"] != undefined && self.$store != undefined) {
|
123
|
+
let path = self.componentConfig["failure"]["transition"]["path"]
|
124
|
+
self.$store.dispatch('navigateTo', {url: path, backwards: false})
|
125
|
+
}
|
126
|
+
})
|
127
|
+
}
|
128
|
+
},
|
129
|
+
mounted: function(){
|
130
|
+
this.initValues()
|
131
|
+
}
|
132
|
+
}
|
133
|
+
|
134
|
+
let component = Vue.component('form-cell', componentDef)
|
135
|
+
|
136
|
+
export default componentDef
|
@@ -0,0 +1,6 @@
|
|
1
|
+
%div{"v-if": "!showInlineForm", "@click": "launchInlineForm(\"#{options[:key]}\", \"#{options[:value]}\")"}
|
2
|
+
= options[:value]
|
3
|
+
%div{"v-if": "showInlineForm"}
|
4
|
+
%input{"ref": "inlineinput", "v-model": input_key, "@blur": "perform", "@keyup.esc": "closeInlineForm", class: options[:class], id: component_id}
|
5
|
+
- if block_given?
|
6
|
+
= yield
|
@@ -0,0 +1,29 @@
|
|
1
|
+
- if options[:label]
|
2
|
+
%label=options[:label]
|
3
|
+
|
4
|
+
- if [:text, :number, :email, :date, :password].include?(options[:type])
|
5
|
+
%input{"v-model#{'.number' if options[:type] == :number}": input_key,
|
6
|
+
type: options[:type],
|
7
|
+
class: options[:class],
|
8
|
+
id: component_id,
|
9
|
+
"@change": "inputChanged(\"#{attr_key}\")",
|
10
|
+
ref: "input.#{attr_key}",
|
11
|
+
placeholder: options[:placeholder],
|
12
|
+
"init-value": init_value}
|
13
|
+
%span{class: "errors", "v-if": error_key }
|
14
|
+
%span{class: "error", "v-for": "error in #{error_key}"}
|
15
|
+
{{ error }}
|
16
|
+
|
17
|
+
- if options[:type] == :textarea
|
18
|
+
%textarea{"v-model": input_key,
|
19
|
+
class: options[:class],
|
20
|
+
id: component_id,
|
21
|
+
"@change": "inputChanged(\"#{attr_key}\")",
|
22
|
+
ref: "input.#{attr_key}",
|
23
|
+
placeholder: options[:placeholder],
|
24
|
+
"init-value": init_value,
|
25
|
+
rows: options[:rows],
|
26
|
+
cols: options[:cols]}
|
27
|
+
%span{class: "errors", "v-if": error_key }
|
28
|
+
%span{class: "error", "v-for": "error in #{error_key}"}
|
29
|
+
{{ error }}
|
@@ -0,0 +1,72 @@
|
|
1
|
+
- if options[:label]
|
2
|
+
|
3
|
+
%label=options[:label]
|
4
|
+
|
5
|
+
- if options[:type] == :dropdown
|
6
|
+
|
7
|
+
%select{"#{model_binding}" => input_key,
|
8
|
+
id: component_id,
|
9
|
+
ref: "select.#{attr_key}",
|
10
|
+
"@change": "inputChanged(\"#{attr_key}\")",
|
11
|
+
"init-value": init_value,
|
12
|
+
"value-type": options_type}
|
13
|
+
%option{disabled: true}= options[:placeholder]
|
14
|
+
- if options[:options].is_a?(Hash)
|
15
|
+
- options[:options].each do |key, value|
|
16
|
+
%option{value: key}=value
|
17
|
+
- if options[:options].is_a?(Array)
|
18
|
+
- options[:options].each do |option|
|
19
|
+
%option{value: option}=option
|
20
|
+
%span{class: "errors", "v-if": error_key }
|
21
|
+
%span{class: "error", "v-for": "error in #{error_key}"}
|
22
|
+
{{ error }}
|
23
|
+
|
24
|
+
- if options[:type] == :checkbox
|
25
|
+
|
26
|
+
%div{id: component_id, ref: "select.multiple.#{attr_key}", "init-value": init_value}
|
27
|
+
- if options[:options].is_a?(Hash)
|
28
|
+
- options[:options].each do |key, value|
|
29
|
+
%input{type: :checkbox,
|
30
|
+
"#{model_binding}": input_key,
|
31
|
+
"@change": "inputChanged(\"#{attr_key}\")",
|
32
|
+
"value-type": options_type,
|
33
|
+
name: value,
|
34
|
+
value: key}/
|
35
|
+
%label=value
|
36
|
+
- if options[:options].is_a?(Array)
|
37
|
+
- options[:options].each do |value|
|
38
|
+
%input{type: :checkbox,
|
39
|
+
"#{model_binding}": input_key,
|
40
|
+
"@change": "inputChanged(\"#{attr_key}\")",
|
41
|
+
"value-type": options_type,
|
42
|
+
name: value,
|
43
|
+
value: value}/
|
44
|
+
%label=value
|
45
|
+
%span{class: "errors", "v-if": error_key }
|
46
|
+
%span{class: "error", "v-for": "error in #{error_key}"}
|
47
|
+
{{ error }}
|
48
|
+
|
49
|
+
- if options[:type] == :radio
|
50
|
+
|
51
|
+
%div{id: component_id, ref: "select.#{attr_key}", "init-value": init_value}
|
52
|
+
- if options[:options].is_a?(Hash)
|
53
|
+
- options[:options].each do |key, value|
|
54
|
+
%input{type: :radio,
|
55
|
+
"#{model_binding}": input_key,
|
56
|
+
"@change": "inputChanged(\"#{attr_key}\")",
|
57
|
+
"value-type": options_type,
|
58
|
+
name: value,
|
59
|
+
value: key}/
|
60
|
+
%label=value
|
61
|
+
- if options[:options].is_a?(Array)
|
62
|
+
- options[:options].each do |value|
|
63
|
+
%input{type: :radio,
|
64
|
+
"#{model_binding}": input_key,
|
65
|
+
"@change": "inputChanged(\"#{attr_key}\")",
|
66
|
+
"value-type": options_type,
|
67
|
+
name: value,
|
68
|
+
value: value}/
|
69
|
+
%label=value
|
70
|
+
%span{class: "errors", "v-if": error_key }
|
71
|
+
%span{class: "error", "v-for": "error in #{error_key}"}
|
72
|
+
{{ error }}
|
@@ -0,0 +1,50 @@
|
|
1
|
+
- case options[:size]
|
2
|
+
- when 1
|
3
|
+
%h1{@tag_attributes}
|
4
|
+
- if options[:text].blank?
|
5
|
+
- if block_given?
|
6
|
+
= yield
|
7
|
+
- else
|
8
|
+
= options[:text]
|
9
|
+
- when 2
|
10
|
+
%h2{@tag_attributes}
|
11
|
+
- if options[:text].blank?
|
12
|
+
- if block_given?
|
13
|
+
= yield
|
14
|
+
- else
|
15
|
+
= options[:text]
|
16
|
+
- when 3
|
17
|
+
%h3{@tag_attributes}
|
18
|
+
- if options[:text].blank?
|
19
|
+
- if block_given?
|
20
|
+
= yield
|
21
|
+
- else
|
22
|
+
= options[:text]
|
23
|
+
- when 4
|
24
|
+
%h4{@tag_attributes}
|
25
|
+
- if options[:text].blank?
|
26
|
+
- if block_given?
|
27
|
+
= yield
|
28
|
+
- else
|
29
|
+
= options[:text]
|
30
|
+
- when 5
|
31
|
+
%h5{@tag_attributes}
|
32
|
+
- if options[:text].blank?
|
33
|
+
- if block_given?
|
34
|
+
= yield
|
35
|
+
- else
|
36
|
+
= options[:text]
|
37
|
+
- when 6
|
38
|
+
%h6{@tag_attributes}
|
39
|
+
- if options[:text].blank?
|
40
|
+
- if block_given?
|
41
|
+
= yield
|
42
|
+
- else
|
43
|
+
= options[:text]
|
44
|
+
- else
|
45
|
+
%h1{@tag_attributes}
|
46
|
+
- if options[:text].blank?
|
47
|
+
- if block_given?
|
48
|
+
= yield
|
49
|
+
- else
|
50
|
+
= options[:text]
|
@@ -0,0 +1,17 @@
|
|
1
|
+
require_dependency "cell/partial"
|
2
|
+
|
3
|
+
module Html::Cell
|
4
|
+
class Html < Component::Cell::Dynamic
|
5
|
+
|
6
|
+
include Cell::ViewModel::Partial
|
7
|
+
|
8
|
+
view_paths << "#{::Rails.root}/app/views"
|
9
|
+
|
10
|
+
def include_partial(&block)
|
11
|
+
render partial: "#{options[:path]}" do
|
12
|
+
capture(&block)
|
13
|
+
end
|
14
|
+
end
|
15
|
+
|
16
|
+
end
|
17
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
= image_tag(ActionController::Base.helpers.asset_path(options[:path]), height: options[:height], width: options[:width], alt: options[:alt], class: options[:class], id: options[:id])
|