matestack-ui-bootstrap 2.0.1 → 3.0.0.rc2
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.
- checksums.yaml +4 -4
- data/README.md +36 -60
- data/lib/matestack/ui/bootstrap/base_component.rb +0 -2
- data/lib/matestack/ui/bootstrap/base_vue_js_component.rb +1 -3
- data/lib/matestack/ui/bootstrap/components/alert.js +14 -12
- data/lib/matestack/ui/bootstrap/components/carousel.js +17 -15
- data/lib/matestack/ui/bootstrap/components/collapse.js +18 -16
- data/lib/matestack/ui/bootstrap/components/dropdown.js +7 -5
- data/lib/matestack/ui/bootstrap/components/modal.js +12 -11
- data/lib/matestack/ui/bootstrap/components/navbar.rb +3 -3
- data/lib/matestack/ui/bootstrap/components/popover.js +10 -9
- data/lib/matestack/ui/bootstrap/components/toast.js +19 -18
- data/lib/matestack/ui/bootstrap/components/toast.rb +3 -3
- data/lib/matestack/ui/bootstrap/components/tooltip.js +9 -9
- data/lib/matestack/ui/bootstrap/content/smart_collection/content.rb +16 -3
- data/lib/matestack/ui/bootstrap/form/checkbox.rb +15 -8
- data/lib/matestack/ui/bootstrap/form/input.rb +7 -7
- data/lib/matestack/ui/bootstrap/form/radio.rb +6 -6
- data/lib/matestack/ui/bootstrap/form/select.rb +2 -4
- data/lib/matestack/ui/bootstrap/form/submit.rb +2 -2
- data/lib/matestack/ui/bootstrap/form/switch.rb +1 -3
- data/lib/matestack/ui/bootstrap/form/textarea.rb +47 -0
- data/lib/matestack/ui/bootstrap/index.js +26 -10
- data/lib/matestack/ui/bootstrap/initialize.rb +3 -0
- data/lib/matestack/ui/bootstrap/layout/sidebar.js +9 -8
- data/lib/matestack/ui/bootstrap/layout/sidebar.rb +10 -12
- data/lib/matestack/ui/bootstrap/{apps → layouts}/admin_template.rb +9 -11
- data/lib/matestack/ui/bootstrap/registry.rb +4 -0
- data/lib/matestack/ui/bootstrap/version.rb +1 -1
- data/lib/matestack/ui/bootstrap.rb +5 -2
- metadata +24 -14
- data/config/webpack/development.js +0 -5
- data/config/webpack/environment.js +0 -29
- data/config/webpack/production.js +0 -33
- data/config/webpack/test.js +0 -5
- data/config/webpacker.yml +0 -96
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f340826fe1ad681717b3272bd7fa0fdd4d2c1ac8a8de8edb1a096baa64d57dca
|
4
|
+
data.tar.gz: e7577d352f6a08af6f5a59bfdc2e157ebd5f1d4be358736193b3292c12b65465
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 75fd6324b7a887fb6241e03b7f511b8e7c8f53afb51359ec9d6f84511cb8bc14705714eb38dc798224c6c86b1f80c3380c55ef80299df670cec03ac64bed891a
|
7
|
+
data.tar.gz: 552ac7ddd9c58ccb3d7226730b3b1c37e1d49f54a5c26e74702d5052dac74eb350068b1324bfc307c356c9b22a684fb94dc328ba7637e0e810626915c7e2608a
|
data/README.md
CHANGED
@@ -1,84 +1,60 @@
|
|
1
|
-
|
1
|
+
[](https://github.com/matestack/matestack-ui-bootstrap/actions)
|
2
|
+
[](https://discord.com/invite/c6tQxFG)
|
3
|
+
[](https://badge.fury.io/rb/matestack-ui-bootstrap)
|
4
|
+
[](https://docs.matestack.io/matestack-ui-bootstrap)
|
5
|
+
[](https://twitter.com/matestack)
|
2
6
|
|
3
|
-
|
7
|
+

|
4
8
|
|
5
|
-
|
9
|
+
# matestack-ui-bootstrap | beautiful, reactive UIs in pure Ruby
|
6
10
|
|
7
|
-
|
11
|
+
As an extension for [`matestack-ui-core`](https://github.com/matestack/matestack-ui-core), `matestack-ui-bootstrap` ships all you need to build beautiful,
|
12
|
+
reactive UIs in pure Ruby and smart CRUD components based on Bootstrap v5.
|
8
13
|
|
9
|
-
|
14
|
+
----
|
10
15
|
|
11
|
-
|
12
|
-
docker-compose build dummy
|
13
|
-
docker-compose run --rm dummy bash
|
14
|
-
```
|
16
|
+
`matestack-ui-core` enables you to craft maintainable web UIs in pure Ruby, skipping ERB and HTML. UI code becomes a native and fun part of your Rails app. Thanks to reactive core components, reactivity can be optionally added on top without writing JavaScript, just using a simple Ruby DSL.
|
15
17
|
|
16
|
-
|
18
|
+
You end up writing 50% less code while increasing productivity, maintainability and developer happiness. Work with pure Ruby. If necessary, extend with pure JavaScript. No Opal involved.
|
17
19
|
|
18
|
-
|
19
|
-
bundle install
|
20
|
-
yarn install
|
21
|
-
cd spec/dummy
|
22
|
-
bundle install
|
23
|
-
npm install (npm and not yarn!)
|
24
|
-
rails app:db:setup
|
25
|
-
```
|
20
|
+
----
|
26
21
|
|
27
|
-
|
22
|
+
`matestack-ui-core` does not have an opinion on styling. In contrast, `matestack-ui-bootstrap` ships all Bootstrap v5 components as Matestack UI components usable in pure Ruby. Additionally layout and CRUD components help you to build a beautiful web app meeting typical requirements of a data driven web app.
|
28
23
|
|
29
|
-
|
30
|
-
```shell
|
31
|
-
docker-compose up dummy
|
32
|
-
```
|
24
|
+
Don't think about styling anymore and just create admin or application UIs faster than ever before!
|
33
25
|
|
34
|
-
|
26
|
+
[<img src="https://img.youtube.com/vi/bwsVgCb97v0/0.jpg" width="350">](https://www.youtube.com/watch?v=bwsVgCb97v0)
|
35
27
|
|
36
|
-
|
37
|
-
docker-compose run --rm dummy sh -c "cd spec/dummy && ./bin/webpack --watch"
|
38
|
-
```
|
28
|
+
## Compatibility
|
39
29
|
|
40
|
-
|
30
|
+
### Ruby/Rails
|
41
31
|
|
42
|
-
|
32
|
+
`matestack-ui-bootstrap` is tested against:
|
43
33
|
|
44
|
-
|
34
|
+
- Rails 6.1.1 + Ruby 3.0.0
|
35
|
+
- Rails 6.1.1 + Ruby 2.7.2
|
36
|
+
- Rails 6.0.3.4 + Ruby 2.6.6
|
37
|
+
- Rails 5.2.4.4 + Ruby 2.6.6
|
45
38
|
|
46
|
-
|
47
|
-
docker-compose build dummy
|
48
|
-
docker-compose run --rm dummy bash
|
49
|
-
```
|
39
|
+
Rails versions below 5.2 are not supported.
|
50
40
|
|
51
|
-
|
41
|
+
### Vue.js
|
52
42
|
|
53
|
-
|
54
|
-
bundle install
|
55
|
-
yarn install
|
56
|
-
cd spec/dummy
|
57
|
-
bundle install
|
58
|
-
npm install (npm and not yarn!)
|
59
|
-
rails app:db:setup
|
60
|
-
```
|
43
|
+
`matestack-ui-bootstrap` requires Vue.js and Vuex for its reactivity features. Following version ranges are supported:
|
61
44
|
|
62
|
-
|
45
|
+
- Vue.js ^2.6.0
|
46
|
+
- Vuex ^3.6.0
|
63
47
|
|
64
|
-
|
65
|
-
docker-compose run --rm builder bash
|
48
|
+
Vue 3 / Vuex 4 update is planned for Q2 2021.
|
66
49
|
|
67
|
-
|
50
|
+
## Documentation/Installation
|
68
51
|
|
69
|
-
|
52
|
+
Documentation can be found [here](https://docs.matestack.io/matestack-ui-bootstrap)
|
70
53
|
|
71
|
-
|
72
|
-
bundle exec rspec spec/test
|
73
|
-
```
|
54
|
+
## Changelog
|
74
55
|
|
75
|
-
|
56
|
+
Changelog can be found [here](./CHANGELOG.md)
|
76
57
|
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
gem release
|
81
|
-
npm bump ...
|
82
|
-
npm release
|
83
|
-
git tag ...
|
84
|
-
```
|
58
|
+
## License
|
59
|
+
|
60
|
+
`matestack-ui-bootstrap` is an Open Source project licensed under the terms of the [MIT license](./LICENSE)
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import * as bootstrap from 'bootstrap'
|
2
|
-
import Vue from 'vue/dist/vue.esm'
|
3
2
|
|
4
|
-
import
|
3
|
+
import MatestackUiVueJs from 'matestack-ui-vuejs'
|
5
4
|
|
6
|
-
|
7
|
-
mixins: [
|
5
|
+
const alertComponent = {
|
6
|
+
mixins: [MatestackUiVueJs.componentMixin],
|
7
|
+
template: MatestackUiVueJs.componentHelpers.inlineTemplate,
|
8
8
|
|
9
9
|
data() {
|
10
10
|
return {
|
@@ -18,13 +18,13 @@ Vue.component('matestack-ui-bootstrap-alert', {
|
|
18
18
|
},
|
19
19
|
dispose: function (){
|
20
20
|
this.alertInstance.dispose()
|
21
|
-
// this.alertInstance = new bootstrap.Alert(self
|
21
|
+
// this.alertInstance = new bootstrap.Alert(self.getElement())
|
22
22
|
}
|
23
23
|
},
|
24
24
|
|
25
25
|
mounted: function() {
|
26
26
|
const self = this
|
27
|
-
var alert = self
|
27
|
+
var alert = self.getElement()
|
28
28
|
self.alertInstance = new bootstrap.Alert(alert)
|
29
29
|
},
|
30
30
|
|
@@ -33,24 +33,26 @@ Vue.component('matestack-ui-bootstrap-alert', {
|
|
33
33
|
// close_on event registration
|
34
34
|
if(self.props["close_on"] != undefined){
|
35
35
|
var close_events = self.props["close_on"].split(",")
|
36
|
-
close_events.forEach(close_event =>
|
36
|
+
close_events.forEach(close_event => MatestackUiVueJs.eventHub.$on(close_event.trim(), self.close));
|
37
37
|
}
|
38
38
|
// dispose_on event registration
|
39
39
|
if(self.props["dispose_on"] != undefined){
|
40
40
|
var dispose_events = self.props["dispose_on"].split(",")
|
41
|
-
dispose_events.forEach(dispose_event =>
|
41
|
+
dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$on(dispose_event.trim(), self.dispose));
|
42
42
|
}
|
43
43
|
},
|
44
44
|
|
45
|
-
|
45
|
+
beforeUnmount: function() {
|
46
46
|
const self = this
|
47
47
|
if(self.props["close_on"] != undefined){
|
48
48
|
var closen_events = self.props["close_on"].split(",")
|
49
|
-
closen_events.forEach(close_event =>
|
49
|
+
closen_events.forEach(close_event => MatestackUiVueJs.eventHub.$off(close_event.trim(), self.close));
|
50
50
|
}
|
51
51
|
if(self.props["dispose_on"] != undefined){
|
52
52
|
var dispose_events = self.props["dispose_on"].split(",")
|
53
|
-
dispose_events.forEach(dispose_event =>
|
53
|
+
dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$off(dispose_event.trim(), self.dispose));
|
54
54
|
}
|
55
55
|
},
|
56
|
-
}
|
56
|
+
}
|
57
|
+
|
58
|
+
export default alertComponent
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import * as bootstrap from 'bootstrap'
|
2
|
-
import Vue from 'vue/dist/vue.esm'
|
3
2
|
|
4
|
-
import
|
3
|
+
import MatestackUiVueJs from 'matestack-ui-vuejs'
|
5
4
|
|
6
|
-
|
7
|
-
mixins: [
|
5
|
+
const carouselComponent = {
|
6
|
+
mixins: [MatestackUiVueJs.componentMixin],
|
7
|
+
template: MatestackUiVueJs.componentHelpers.inlineTemplate,
|
8
8
|
data() {
|
9
9
|
return {
|
10
10
|
carouselInstance: undefined
|
@@ -32,7 +32,7 @@ Vue.component('matestack-ui-bootstrap-carousel', {
|
|
32
32
|
|
33
33
|
mounted: function() {
|
34
34
|
const self = this;
|
35
|
-
var myCarousel = self
|
35
|
+
var myCarousel = self.getElement();
|
36
36
|
self.carouselInstance = new bootstrap.Carousel(myCarousel, {
|
37
37
|
interval: (self.props['interval'] || 5000)
|
38
38
|
})
|
@@ -42,41 +42,43 @@ Vue.component('matestack-ui-bootstrap-carousel', {
|
|
42
42
|
const self = this
|
43
43
|
if(self.props["cycle_on"] != undefined){
|
44
44
|
var cycle_events = self.props["cycle_on"].split(",")
|
45
|
-
cycle_events.forEach(cycle_event =>
|
45
|
+
cycle_events.forEach(cycle_event => MatestackUiVueJs.eventHub.$on(cycle_event.trim(), self.cycle));
|
46
46
|
}
|
47
47
|
if(self.props["pause_on"] != undefined){
|
48
48
|
var pause_events = self.props["pause_on"].split(",")
|
49
|
-
pause_events.forEach(pause_event =>
|
49
|
+
pause_events.forEach(pause_event => MatestackUiVueJs.eventHub.$on(pause_event.trim(), self.pause));
|
50
50
|
}
|
51
51
|
if(self.props["prev_on"] != undefined){
|
52
52
|
var prev_events = self.props["prev_on"].split(",")
|
53
|
-
prev_events.forEach(prev_event =>
|
53
|
+
prev_events.forEach(prev_event => MatestackUiVueJs.eventHub.$on(prev_event.trim(), self.prev));
|
54
54
|
}
|
55
55
|
if(self.props["next_on"] != undefined){
|
56
56
|
var next_events = self.props["next_on"].split(",")
|
57
|
-
next_events.forEach(next_event =>
|
57
|
+
next_events.forEach(next_event => MatestackUiVueJs.eventHub.$on(next_event.trim(), self.next));
|
58
58
|
}
|
59
59
|
},
|
60
60
|
|
61
|
-
|
61
|
+
beforeUnmount: function() {
|
62
62
|
const self = this
|
63
63
|
if(self.props["cycle_on"] != undefined){
|
64
64
|
var cycle_events = self.props["cycle_on"].split(",")
|
65
|
-
cycle_events.forEach(cycle_event =>
|
65
|
+
cycle_events.forEach(cycle_event => MatestackUiVueJs.eventHub.$off(cycle_event.trim(), self.cycle));
|
66
66
|
}
|
67
67
|
|
68
68
|
if(self.props["pause_on"] != undefined){
|
69
69
|
var pause_events = self.props["pause_on"].split(",")
|
70
|
-
pause_events.forEach(pause_event =>
|
70
|
+
pause_events.forEach(pause_event => MatestackUiVueJs.eventHub.$off(pause_event.trim(), self.pause));
|
71
71
|
}
|
72
72
|
|
73
73
|
if(self.props["prev_on"] != undefined){
|
74
74
|
var prev_events = self.props["prev_on"].split(",")
|
75
|
-
prev_events.forEach(prev_event =>
|
75
|
+
prev_events.forEach(prev_event => MatestackUiVueJs.eventHub.$off(prev_event.trim(), self.prev));
|
76
76
|
}
|
77
77
|
if(self.props["next_on"] != undefined){
|
78
78
|
var next_events = self.props["next_on"].split(",")
|
79
|
-
next_events.forEach(next_event =>
|
79
|
+
next_events.forEach(next_event => MatestackUiVueJs.eventHub.$off(next_event.trim(), self.next));
|
80
80
|
}
|
81
81
|
},
|
82
|
-
}
|
82
|
+
}
|
83
|
+
|
84
|
+
export default carouselComponent
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import * as bootstrap from 'bootstrap'
|
2
|
-
import Vue from 'vue/dist/vue.esm'
|
3
2
|
|
4
|
-
import
|
3
|
+
import MatestackUiVueJs from 'matestack-ui-vuejs'
|
5
4
|
|
6
|
-
|
7
|
-
mixins: [
|
5
|
+
const collapseComponent = {
|
6
|
+
mixins: [MatestackUiVueJs.componentMixin],
|
7
|
+
template: MatestackUiVueJs.componentHelpers.inlineTemplate,
|
8
8
|
data() {
|
9
9
|
return {
|
10
10
|
collapseInstance: undefined
|
@@ -34,8 +34,8 @@ Vue.component('matestack-ui-bootstrap-collapse', {
|
|
34
34
|
|
35
35
|
mounted: function() {
|
36
36
|
const self = this;
|
37
|
-
|
38
|
-
self.collapseInstance = new bootstrap.Collapse(
|
37
|
+
const collapseElement = self.getElement()
|
38
|
+
self.collapseInstance = new bootstrap.Collapse(collapseElement, {
|
39
39
|
toggle: false
|
40
40
|
})
|
41
41
|
},
|
@@ -46,42 +46,44 @@ Vue.component('matestack-ui-bootstrap-collapse', {
|
|
46
46
|
// toggle_on event registration
|
47
47
|
if(self.props["toggle_on"] != undefined){
|
48
48
|
var toggle_events = self.props["toggle_on"].split(",")
|
49
|
-
toggle_events.forEach(toggle_event =>
|
49
|
+
toggle_events.forEach(toggle_event => MatestackUiVueJs.eventHub.$on(toggle_event.trim(), self.toggle));
|
50
50
|
}
|
51
51
|
// show_on event registration
|
52
52
|
if(self.props["show_on"] != undefined){
|
53
53
|
var show_events = self.props["show_on"].split(",")
|
54
|
-
show_events.forEach(show_event =>
|
54
|
+
show_events.forEach(show_event => MatestackUiVueJs.eventHub.$on(show_event.trim(), self.show));
|
55
55
|
}
|
56
56
|
// hide_on event registration
|
57
57
|
if(self.props["hide_on"] != undefined){
|
58
58
|
var hide_events = self.props["hide_on"].split(",")
|
59
|
-
hide_events.forEach(hide_event =>
|
59
|
+
hide_events.forEach(hide_event => MatestackUiVueJs.eventHub.$on(hide_event.trim(), self.hide));
|
60
60
|
}
|
61
61
|
// dispose_on event registration
|
62
62
|
if(self.props["dispose_on"] != undefined){
|
63
63
|
var dispose_events = self.props["dispose_on"].split(",")
|
64
|
-
dispose_events.forEach(dispose_event =>
|
64
|
+
dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$on(dispose_event.trim(), self.dispose));
|
65
65
|
}
|
66
66
|
},
|
67
67
|
|
68
|
-
|
68
|
+
beforeUnmount: function(){
|
69
69
|
const self = this
|
70
70
|
if(self.props["toggle_on"] != undefined){
|
71
71
|
var show_events = self.props["toggle_on"].split(",")
|
72
|
-
show_events.forEach(show_event =>
|
72
|
+
show_events.forEach(show_event => MatestackUiVueJs.eventHub.$off(show_event.trim(), self.show));
|
73
73
|
}
|
74
74
|
if(self.props["show_on"] != undefined){
|
75
75
|
var show_events = self.props["show_on"].split(",")
|
76
|
-
show_events.forEach(show_event =>
|
76
|
+
show_events.forEach(show_event => MatestackUiVueJs.eventHub.$off(show_event.trim(), self.show));
|
77
77
|
}
|
78
78
|
if(self.props["hide_on"] != undefined){
|
79
79
|
var hide_events = self.props["hide_on"].split(",")
|
80
|
-
hide_events.forEach(hide_event =>
|
80
|
+
hide_events.forEach(hide_event => MatestackUiVueJs.eventHub.$off(hide_event.trim(), self.hide));
|
81
81
|
}
|
82
82
|
if(self.props["dispose_on"] != undefined){
|
83
83
|
var dispose_events = self.props["dispose_on"].split(",")
|
84
|
-
dispose_events.forEach(dispose_event =>
|
84
|
+
dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$off(dispose_event.trim(), self.dispose));
|
85
85
|
}
|
86
86
|
}
|
87
|
-
}
|
87
|
+
}
|
88
|
+
|
89
|
+
export default collapseComponent
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import * as bootstrap from 'bootstrap'
|
2
|
-
import Vue from 'vue/dist/vue.esm'
|
3
2
|
|
4
|
-
import
|
3
|
+
import MatestackUiVueJs from 'matestack-ui-vuejs'
|
5
4
|
|
6
|
-
|
7
|
-
mixins: [
|
5
|
+
const dropdownComponent = {
|
6
|
+
mixins: [MatestackUiVueJs.componentMixin],
|
7
|
+
template: MatestackUiVueJs.componentHelpers.inlineTemplate,
|
8
8
|
data() {
|
9
9
|
return {
|
10
10
|
dropdownInstance: undefined
|
@@ -14,4 +14,6 @@ Vue.component('matestack-ui-bootstrap-dropdown', {
|
|
14
14
|
// var mydropdown = document.getElementById(this.props["dropdown-id"])
|
15
15
|
// this.dropdownInstance = new bootstrap.Dropdown(mydropdown)
|
16
16
|
}
|
17
|
-
}
|
17
|
+
}
|
18
|
+
|
19
|
+
export default dropdownComponent
|
@@ -1,10 +1,9 @@
|
|
1
1
|
import * as bootstrap from 'bootstrap'
|
2
|
-
import
|
2
|
+
import MatestackUiVueJs from 'matestack-ui-vuejs'
|
3
3
|
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
mixins: [MatestackUiCore.componentMixin],
|
4
|
+
const modalComponent = {
|
5
|
+
mixins: [MatestackUiVueJs.componentMixin],
|
6
|
+
template: MatestackUiVueJs.componentHelpers.inlineTemplate,
|
8
7
|
|
9
8
|
data() {
|
10
9
|
return {
|
@@ -32,13 +31,13 @@ Vue.component('matestack-ui-bootstrap-modal', {
|
|
32
31
|
|
33
32
|
mounted: function() {
|
34
33
|
const self = this
|
35
|
-
|
36
|
-
self.modalInstance = new bootstrap.Modal(
|
34
|
+
const modalElement = self.getElement()
|
35
|
+
self.modalInstance = new bootstrap.Modal(modalElement)
|
37
36
|
},
|
38
37
|
|
39
38
|
created: function() {
|
40
39
|
const self = this
|
41
|
-
var eventHub =
|
40
|
+
var eventHub = MatestackUiVueJs.eventHub;
|
42
41
|
// toggle_on event registration
|
43
42
|
if(self.props["toggle_on"] != undefined){
|
44
43
|
var toggle_events = self.props["toggle_on"].split(",")
|
@@ -66,9 +65,9 @@ Vue.component('matestack-ui-bootstrap-modal', {
|
|
66
65
|
}
|
67
66
|
},
|
68
67
|
|
69
|
-
|
68
|
+
beforeUnmount: function() {
|
70
69
|
const self = this
|
71
|
-
var eventHub =
|
70
|
+
var eventHub = MatestackUiVueJs.eventHub;
|
72
71
|
if(self.props["toggle_on"] != undefined){
|
73
72
|
var toggle_events = self.props["toggle_on"].split(",")
|
74
73
|
toggle_events.forEach(toggle_event => eventHub.$off(toggle_event.trim(), self.toggle));
|
@@ -90,4 +89,6 @@ Vue.component('matestack-ui-bootstrap-modal', {
|
|
90
89
|
dispose_events.forEach(dispose_event => eventHub.$off(dispose_event.trim(), self.dispose));
|
91
90
|
}
|
92
91
|
},
|
93
|
-
}
|
92
|
+
}
|
93
|
+
|
94
|
+
export default modalComponent
|
@@ -42,13 +42,13 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Bootstrap::B
|
|
42
42
|
path = brand[:path].present? ? brand[:path] : "/"
|
43
43
|
brand[:path] = path
|
44
44
|
case brand[:type]
|
45
|
-
when :
|
46
|
-
|
45
|
+
when :transition
|
46
|
+
transition brand.except(:text).merge(class: "navbar-brand") do
|
47
47
|
img height: 40, path: brand[:img], loading: "lazy" if brand[:img].present?
|
48
48
|
plain brand[:text]
|
49
49
|
end
|
50
50
|
else
|
51
|
-
|
51
|
+
a brand.except(:text).merge(class: "navbar-brand") do
|
52
52
|
img height: 40, path: brand[:img], loading: "lazy" if brand[:img].present?
|
53
53
|
plain brand[:text]
|
54
54
|
end
|
@@ -1,11 +1,10 @@
|
|
1
1
|
import * as bootstrap from 'bootstrap'
|
2
|
-
import Vue from 'vue/dist/vue.esm'
|
3
2
|
|
4
|
-
import
|
3
|
+
import MatestackUiVueJs from 'matestack-ui-vuejs'
|
5
4
|
|
6
|
-
|
7
|
-
|
8
|
-
|
5
|
+
const popoverComponent = {
|
6
|
+
mixins: [MatestackUiVueJs.componentMixin],
|
7
|
+
template: MatestackUiVueJs.componentHelpers.inlineTemplate,
|
9
8
|
data() {
|
10
9
|
return {
|
11
10
|
popoverInstance: undefined
|
@@ -17,13 +16,15 @@ Vue.component('matestack-ui-bootstrap-popover', {
|
|
17
16
|
},
|
18
17
|
mounted: function() {
|
19
18
|
const self = this;
|
20
|
-
|
21
|
-
self.popoverInstance = new bootstrap.Popover(
|
19
|
+
const popoverElement = self.getElement()
|
20
|
+
self.popoverInstance = new bootstrap.Popover(popoverElement, {})
|
22
21
|
},
|
23
22
|
created: function() {
|
24
23
|
},
|
25
24
|
|
26
|
-
|
25
|
+
beforeUnmount: function() {
|
27
26
|
|
28
27
|
},
|
29
|
-
}
|
28
|
+
}
|
29
|
+
|
30
|
+
export default popoverComponent
|
@@ -1,11 +1,10 @@
|
|
1
1
|
import * as bootstrap from 'bootstrap'
|
2
|
-
import Vue from 'vue/dist/vue.esm'
|
3
2
|
|
4
|
-
import
|
3
|
+
import MatestackUiVueJs from 'matestack-ui-vuejs'
|
5
4
|
|
6
|
-
|
7
|
-
|
8
|
-
|
5
|
+
const toastComponent = {
|
6
|
+
mixins: [MatestackUiVueJs.componentMixin],
|
7
|
+
template: MatestackUiVueJs.componentHelpers.inlineTemplate,
|
9
8
|
data() {
|
10
9
|
return {
|
11
10
|
toastsInstance: undefined,
|
@@ -40,12 +39,12 @@ Vue.component('matestack-ui-bootstrap-toast', {
|
|
40
39
|
dispose: function(){
|
41
40
|
const self = this;
|
42
41
|
self.toastsInstance.dispose()
|
43
|
-
self.toastsInstance = new bootstrap.Toast(self
|
42
|
+
self.toastsInstance = new bootstrap.Toast(self.getElement())
|
44
43
|
}
|
45
44
|
},
|
46
45
|
mounted: function() {
|
47
46
|
const self = this;
|
48
|
-
var myToasts = self
|
47
|
+
var myToasts = self.getElement()
|
49
48
|
self.toastsInstance = new bootstrap.Toast(myToasts)
|
50
49
|
},
|
51
50
|
created: function() {
|
@@ -53,36 +52,38 @@ Vue.component('matestack-ui-bootstrap-toast', {
|
|
53
52
|
|
54
53
|
if(this.props["show_on"] != undefined){
|
55
54
|
var show_events = this.props["show_on"].split(",")
|
56
|
-
show_events.forEach(show_event =>
|
55
|
+
show_events.forEach(show_event => MatestackUiVueJs.eventHub.$on(show_event.trim(), self.show));
|
57
56
|
}
|
58
57
|
|
59
58
|
if(this.props["hide_on"] != undefined){
|
60
59
|
var show_events = this.props["hide_on"].split(",")
|
61
|
-
show_events.forEach(show_event =>
|
60
|
+
show_events.forEach(show_event => MatestackUiVueJs.eventHub.$on(show_event.trim(), self.hide));
|
62
61
|
}
|
63
62
|
|
64
63
|
if(this.props["dispose_on"] != undefined){
|
65
64
|
var show_events = this.props["dispose_on"].split(",")
|
66
|
-
show_events.forEach(show_event =>
|
65
|
+
show_events.forEach(show_event => MatestackUiVueJs.eventHub.$on(show_event.trim(), self.dispose));
|
67
66
|
}
|
68
67
|
},
|
69
68
|
|
70
|
-
|
69
|
+
beforeUnmount: function() {
|
71
70
|
const self = this
|
72
|
-
|
73
|
-
|
74
|
-
|
71
|
+
MatestackUiVueJs.eventHub.$off(this.props["show_on"], self.show);
|
72
|
+
MatestackUiVueJs.eventHub.$off(this.props["hide_on"], self.hide);
|
73
|
+
MatestackUiVueJs.eventHub.$off(this.props["dispose_on"], self.hide);
|
75
74
|
if(this.props["show_on"] != undefined){
|
76
75
|
var shown_events = this.props["show_on"].split(",")
|
77
|
-
shown_events.forEach(show_event =>
|
76
|
+
shown_events.forEach(show_event => MatestackUiVueJs.eventHub.$off(show_event.trim(), self.show));
|
78
77
|
}
|
79
78
|
if(this.props["hide_on"] != undefined){
|
80
79
|
var hiden_events = this.props["hide_on"].split(",")
|
81
|
-
hiden_events.forEach(hide_event =>
|
80
|
+
hiden_events.forEach(hide_event => MatestackUiVueJs.eventHub.$off(hide_event.trim(), self.hide));
|
82
81
|
}
|
83
82
|
if(this.props["dispose_on"] != undefined){
|
84
83
|
var hiden_events = this.props["dispose_on"].split(",")
|
85
|
-
hiden_events.forEach(hide_event =>
|
84
|
+
hiden_events.forEach(hide_event => MatestackUiVueJs.eventHub.$off(hide_event.trim(), self.dispose));
|
86
85
|
}
|
87
86
|
},
|
88
|
-
}
|
87
|
+
}
|
88
|
+
|
89
|
+
export default toastComponent
|
@@ -56,7 +56,7 @@ class Matestack::Ui::Bootstrap::Components::Toast < Matestack::Ui::Bootstrap::Ba
|
|
56
56
|
small header[:subtitle] if header[:subtitle].present?
|
57
57
|
|
58
58
|
slot :header if slots && slots[:header]
|
59
|
-
bs_close dismiss: 'toast', class: "ms-2 mb-1", "@click": "hide()"
|
59
|
+
bs_close dismiss: 'toast', class: "ms-2 mb-1", "@click": "vc.hide()"
|
60
60
|
end
|
61
61
|
|
62
62
|
end
|
@@ -66,7 +66,7 @@ class Matestack::Ui::Bootstrap::Components::Toast < Matestack::Ui::Bootstrap::Ba
|
|
66
66
|
plain context.body if context.body
|
67
67
|
end
|
68
68
|
unless context.header || slots && slots[:header]
|
69
|
-
bs_close dismiss: 'toast', class: "ms-auto me-2 btn-close-white", "@click": "hide()"
|
69
|
+
bs_close dismiss: 'toast', class: "ms-auto me-2 btn-close-white", "@click": "vc.hide()"
|
70
70
|
end
|
71
71
|
end
|
72
72
|
|
@@ -92,7 +92,7 @@ class Matestack::Ui::Bootstrap::Components::Toast < Matestack::Ui::Bootstrap::Ba
|
|
92
92
|
hash[:'aria-live'] = 'assertive' unless context.important.present?
|
93
93
|
hash[:'aria-atomic'] = 'true' unless context.placement.present?
|
94
94
|
hash[:style] = "z-index: 10000; position: fixed; #{context.placement[:position] || 'top: 0; right: 0;' }" if context.placement.present?
|
95
|
-
hash[:"v-bind:class"] = "{'show' : showing }"
|
95
|
+
hash[:"v-bind:class"] = "{'show' : vc.showing }"
|
96
96
|
end
|
97
97
|
end
|
98
98
|
|
@@ -1,11 +1,9 @@
|
|
1
1
|
import * as bootstrap from 'bootstrap'
|
2
|
-
import
|
2
|
+
import MatestackUiVueJs from 'matestack-ui-vuejs'
|
3
3
|
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
mixins: [MatestackUiCore.componentMixin],
|
4
|
+
const tooltipComponent = {
|
5
|
+
mixins: [MatestackUiVueJs.componentMixin],
|
6
|
+
template: MatestackUiVueJs.componentHelpers.inlineTemplate,
|
9
7
|
data() {
|
10
8
|
return {
|
11
9
|
// tooltipInstance: undefined
|
@@ -17,13 +15,15 @@ Vue.component('matestack-ui-bootstrap-tooltip', {
|
|
17
15
|
},
|
18
16
|
mounted: function() {
|
19
17
|
const self = this;
|
20
|
-
var tooltip = self
|
18
|
+
var tooltip = self.getElement()
|
21
19
|
self.tooltipInstance = new bootstrap.Tooltip(tooltip)
|
22
20
|
}
|
23
21
|
// created: function() {
|
24
22
|
// },
|
25
23
|
|
26
|
-
//
|
24
|
+
// beforeUnmount: function() {
|
27
25
|
|
28
26
|
// },
|
29
|
-
}
|
27
|
+
}
|
28
|
+
|
29
|
+
export default tooltipComponent
|