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.
Files changed (36) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +36 -60
  3. data/lib/matestack/ui/bootstrap/base_component.rb +0 -2
  4. data/lib/matestack/ui/bootstrap/base_vue_js_component.rb +1 -3
  5. data/lib/matestack/ui/bootstrap/components/alert.js +14 -12
  6. data/lib/matestack/ui/bootstrap/components/carousel.js +17 -15
  7. data/lib/matestack/ui/bootstrap/components/collapse.js +18 -16
  8. data/lib/matestack/ui/bootstrap/components/dropdown.js +7 -5
  9. data/lib/matestack/ui/bootstrap/components/modal.js +12 -11
  10. data/lib/matestack/ui/bootstrap/components/navbar.rb +3 -3
  11. data/lib/matestack/ui/bootstrap/components/popover.js +10 -9
  12. data/lib/matestack/ui/bootstrap/components/toast.js +19 -18
  13. data/lib/matestack/ui/bootstrap/components/toast.rb +3 -3
  14. data/lib/matestack/ui/bootstrap/components/tooltip.js +9 -9
  15. data/lib/matestack/ui/bootstrap/content/smart_collection/content.rb +16 -3
  16. data/lib/matestack/ui/bootstrap/form/checkbox.rb +15 -8
  17. data/lib/matestack/ui/bootstrap/form/input.rb +7 -7
  18. data/lib/matestack/ui/bootstrap/form/radio.rb +6 -6
  19. data/lib/matestack/ui/bootstrap/form/select.rb +2 -4
  20. data/lib/matestack/ui/bootstrap/form/submit.rb +2 -2
  21. data/lib/matestack/ui/bootstrap/form/switch.rb +1 -3
  22. data/lib/matestack/ui/bootstrap/form/textarea.rb +47 -0
  23. data/lib/matestack/ui/bootstrap/index.js +26 -10
  24. data/lib/matestack/ui/bootstrap/initialize.rb +3 -0
  25. data/lib/matestack/ui/bootstrap/layout/sidebar.js +9 -8
  26. data/lib/matestack/ui/bootstrap/layout/sidebar.rb +10 -12
  27. data/lib/matestack/ui/bootstrap/{apps → layouts}/admin_template.rb +9 -11
  28. data/lib/matestack/ui/bootstrap/registry.rb +4 -0
  29. data/lib/matestack/ui/bootstrap/version.rb +1 -1
  30. data/lib/matestack/ui/bootstrap.rb +5 -2
  31. metadata +24 -14
  32. data/config/webpack/development.js +0 -5
  33. data/config/webpack/environment.js +0 -29
  34. data/config/webpack/production.js +0 -33
  35. data/config/webpack/test.js +0 -5
  36. data/config/webpacker.yml +0 -96
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a52f9ec08954578164ea02cbde68d738d01fca0dfe32e845680064adc9848cfa
4
- data.tar.gz: 6d5f1563e5fbee81e0ce69ce5fb0cf95996d969fa45a3b66e593d1dbb03c69a9
3
+ metadata.gz: f340826fe1ad681717b3272bd7fa0fdd4d2c1ac8a8de8edb1a096baa64d57dca
4
+ data.tar.gz: e7577d352f6a08af6f5a59bfdc2e157ebd5f1d4be358736193b3292c12b65465
5
5
  SHA512:
6
- metadata.gz: 49765f7bf19eded33e7d4e99ee41b576922f93168ae24420587c1084452c4906411a1ff38c8faa83318b878b931158015c735f8c3389100a582507061996be23
7
- data.tar.gz: f49088e4c4ed0283a47b99b25389eeea5607869f0f171be1036ffdd45e3b9defb53f3de2efe80556f14f311455e1d4d28c9f2bd43cd4075de9606469015462da
6
+ metadata.gz: 75fd6324b7a887fb6241e03b7f511b8e7c8f53afb51359ec9d6f84511cb8bc14705714eb38dc798224c6c86b1f80c3380c55ef80299df670cec03ac64bed891a
7
+ data.tar.gz: 552ac7ddd9c58ccb3d7226730b3b1c37e1d49f54a5c26e74702d5052dac74eb350068b1324bfc307c356c9b22a684fb94dc328ba7637e0e810626915c7e2608a
data/README.md CHANGED
@@ -1,84 +1,60 @@
1
- # Matestack Ui Bootstrap
1
+ [![Specs](https://github.com/matestack/matestack-ui-bootstrap/workflows/specs/badge.svg)](https://github.com/matestack/matestack-ui-bootstrap/actions)
2
+ [![Discord](https://img.shields.io/discord/771413294136426496.svg)](https://discord.com/invite/c6tQxFG)
3
+ [![Gem Version](https://badge.fury.io/rb/matestack-ui-bootstrap.svg)](https://badge.fury.io/rb/matestack-ui-bootstrap)
4
+ [![Docs](https://img.shields.io/badge/docs-matestack-blue.svg)](https://docs.matestack.io/matestack-ui-bootstrap)
5
+ [![Twitter Follow](https://img.shields.io/twitter/follow/matestack.svg?style=social)](https://twitter.com/matestack)
2
6
 
3
- **Docs and specs in progress, please wait for official release announcement before using this gem**
7
+ ![matestack logo](./logo.png)
4
8
 
5
- ## Development
9
+ # matestack-ui-bootstrap | beautiful, reactive UIs in pure Ruby
6
10
 
7
- ### Dummy App
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
- **initial setup**
14
+ ----
10
15
 
11
- ```shell
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
- inside container:
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
- ```shell
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
- **dummy app start**
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
- on your host:
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
- and
26
+ [<img src="https://img.youtube.com/vi/bwsVgCb97v0/0.jpg" width="350">](https://www.youtube.com/watch?v=bwsVgCb97v0)
35
27
 
36
- ```shell
37
- docker-compose run --rm dummy sh -c "cd spec/dummy && ./bin/webpack --watch"
38
- ```
28
+ ## Compatibility
39
29
 
40
- simultaneously to be able to visit the demo app on [localhost:3000](localhost:3000).
30
+ ### Ruby/Rails
41
31
 
42
- ## Testing
32
+ `matestack-ui-bootstrap` is tested against:
43
33
 
44
- **initial setup**
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
- ```shell
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
- inside container:
41
+ ### Vue.js
52
42
 
53
- ```shell
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
- **test run**
45
+ - Vue.js ^2.6.0
46
+ - Vuex ^3.6.0
63
47
 
64
- ```shell
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
- inside container:
52
+ Documentation can be found [here](https://docs.matestack.io/matestack-ui-bootstrap)
70
53
 
71
- ```shell
72
- bundle exec rspec spec/test
73
- ```
54
+ ## Changelog
74
55
 
75
- ## Release
56
+ Changelog can be found [here](./CHANGELOG.md)
76
57
 
77
- ```shell
78
- docker-compose run --rm builder
79
- gem bump ...
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)
@@ -5,8 +5,6 @@ module Matestack
5
5
  module Bootstrap
6
6
  class BaseComponent < Matestack::Ui::Component
7
7
 
8
- include Matestack::Ui::Bootstrap::Registry
9
-
10
8
  end
11
9
  end
12
10
  end
@@ -3,9 +3,7 @@ require_relative "./registry"
3
3
  module Matestack
4
4
  module Ui
5
5
  module Bootstrap
6
- class BaseVueJsComponent < Matestack::Ui::VueJsComponent
7
-
8
- include Matestack::Ui::Bootstrap::Registry
6
+ class BaseVueJsComponent < Matestack::Ui::VueJsComponent
9
7
 
10
8
  end
11
9
  end
@@ -1,10 +1,10 @@
1
1
  import * as bootstrap from 'bootstrap'
2
- import Vue from 'vue/dist/vue.esm'
3
2
 
4
- import MatestackUiCore from 'matestack-ui-core'
3
+ import MatestackUiVueJs from 'matestack-ui-vuejs'
5
4
 
6
- Vue.component('matestack-ui-bootstrap-alert', {
7
- mixins: [MatestackUiCore.componentMixin],
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.$el)
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.$el
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 => MatestackUiCore.matestackEventHub.$on(close_event.trim(), self.close));
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 => MatestackUiCore.matestackEventHub.$on(dispose_event.trim(), self.dispose));
41
+ dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$on(dispose_event.trim(), self.dispose));
42
42
  }
43
43
  },
44
44
 
45
- beforeDestroy: function() {
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 => MatestackUiCore.matestackEventHub.$off(close_event.trim(), self.close));
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 => MatestackUiCore.matestackEventHub.$off(dispose_event.trim(), self.dispose));
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 MatestackUiCore from 'matestack-ui-core'
3
+ import MatestackUiVueJs from 'matestack-ui-vuejs'
5
4
 
6
- Vue.component('matestack-ui-bootstrap-carousel', {
7
- mixins: [MatestackUiCore.componentMixin],
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.$el;
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 => MatestackUiCore.matestackEventHub.$on(cycle_event.trim(), self.cycle));
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 => MatestackUiCore.matestackEventHub.$on(pause_event.trim(), self.pause));
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 => MatestackUiCore.matestackEventHub.$on(prev_event.trim(), self.prev));
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 => MatestackUiCore.matestackEventHub.$on(next_event.trim(), self.next));
57
+ next_events.forEach(next_event => MatestackUiVueJs.eventHub.$on(next_event.trim(), self.next));
58
58
  }
59
59
  },
60
60
 
61
- beforeDestroy: function() {
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 => MatestackUiCore.matestackEventHub.$off(cycle_event.trim(), self.cycle));
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 => MatestackUiCore.matestackEventHub.$off(pause_event.trim(), self.pause));
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 => MatestackUiCore.matestackEventHub.$off(prev_event.trim(), self.prev));
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 => MatestackUiCore.matestackEventHub.$off(next_event.trim(), self.next));
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 MatestackUiCore from 'matestack-ui-core'
3
+ import MatestackUiVueJs from 'matestack-ui-vuejs'
5
4
 
6
- Vue.component('matestack-ui-bootstrap-collapse', {
7
- mixins: [MatestackUiCore.componentMixin],
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
- var myCollapse = self.$el;
38
- self.collapseInstance = new bootstrap.Collapse(myCollapse, {
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 => MatestackUiCore.matestackEventHub.$on(toggle_event.trim(), self.toggle));
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 => MatestackUiCore.matestackEventHub.$on(show_event.trim(), self.show));
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 => MatestackUiCore.matestackEventHub.$on(hide_event.trim(), self.hide));
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 => MatestackUiCore.matestackEventHub.$on(dispose_event.trim(), self.dispose));
64
+ dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$on(dispose_event.trim(), self.dispose));
65
65
  }
66
66
  },
67
67
 
68
- beforeDestroy: function(){
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 => MatestackUiCore.matestackEventHub.$off(show_event.trim(), self.show));
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 => MatestackUiCore.matestackEventHub.$off(show_event.trim(), self.show));
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 => MatestackUiCore.matestackEventHub.$off(hide_event.trim(), self.hide));
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 => MatestackUiCore.matestackEventHub.$off(dispose_event.trim(), self.dispose));
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 MatestackUiCore from 'matestack-ui-core'
3
+ import MatestackUiVueJs from 'matestack-ui-vuejs'
5
4
 
6
- Vue.component('matestack-ui-bootstrap-dropdown', {
7
- mixins: [MatestackUiCore.componentMixin],
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 Vue from 'vue/dist/vue.esm'
2
+ import MatestackUiVueJs from 'matestack-ui-vuejs'
3
3
 
4
- import MatestackUiCore from 'matestack-ui-core'
5
-
6
- Vue.component('matestack-ui-bootstrap-modal', {
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
- var modal = self.$el
36
- self.modalInstance = new bootstrap.Modal(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 = MatestackUiCore.matestackEventHub;
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
- beforeDestroy: function() {
68
+ beforeUnmount: function() {
70
69
  const self = this
71
- var eventHub = MatestackUiCore.matestackEventHub;
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 :link
46
- a brand.except(:text).merge(class: "navbar-brand") do
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
- transition brand.except(:text).merge(class: "navbar-brand") do
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 MatestackUiCore from 'matestack-ui-core'
3
+ import MatestackUiVueJs from 'matestack-ui-vuejs'
5
4
 
6
- Vue.component('matestack-ui-bootstrap-popover', {
7
-
8
- mixins: [MatestackUiCore.componentMixin],
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
- var popover = self.$el
21
- self.popoverInstance = new bootstrap.Popover(popover, {})
19
+ const popoverElement = self.getElement()
20
+ self.popoverInstance = new bootstrap.Popover(popoverElement, {})
22
21
  },
23
22
  created: function() {
24
23
  },
25
24
 
26
- beforeDestroy: function() {
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 MatestackUiCore from 'matestack-ui-core'
3
+ import MatestackUiVueJs from 'matestack-ui-vuejs'
5
4
 
6
- Vue.component('matestack-ui-bootstrap-toast', {
7
-
8
- mixins: [MatestackUiCore.componentMixin],
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.$el)
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.$el
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 => MatestackUiCore.matestackEventHub.$on(show_event.trim(), self.show));
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 => MatestackUiCore.matestackEventHub.$on(show_event.trim(), self.hide));
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 => MatestackUiCore.matestackEventHub.$on(show_event.trim(), self.dispose));
65
+ show_events.forEach(show_event => MatestackUiVueJs.eventHub.$on(show_event.trim(), self.dispose));
67
66
  }
68
67
  },
69
68
 
70
- beforeDestroy: function() {
69
+ beforeUnmount: function() {
71
70
  const self = this
72
- MatestackUiCore.matestackEventHub.$off(this.props["show_on"], self.show);
73
- MatestackUiCore.matestackEventHub.$off(this.props["hide_on"], self.hide);
74
- MatestackUiCore.matestackEventHub.$off(this.props["dispose_on"], self.hide);
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 => MatestackUiCore.matestackEventHub.$off(show_event.trim(), self.show));
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 => MatestackUiCore.matestackEventHub.$off(hide_event.trim(), self.hide));
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 => MatestackUiCore.matestackEventHub.$off(hide_event.trim(), self.dispose));
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 Vue from 'vue/dist/vue.esm'
2
+ import MatestackUiVueJs from 'matestack-ui-vuejs'
3
3
 
4
- import MatestackUiCore from 'matestack-ui-core'
5
-
6
- Vue.component('matestack-ui-bootstrap-tooltip', {
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.$el
18
+ var tooltip = self.getElement()
21
19
  self.tooltipInstance = new bootstrap.Tooltip(tooltip)
22
20
  }
23
21
  // created: function() {
24
22
  // },
25
23
 
26
- // beforeDestroy: function() {
24
+ // beforeUnmount: function() {
27
25
 
28
26
  // },
29
- });
27
+ }
28
+
29
+ export default tooltipComponent