matestack-ui-bootstrap 2.0.1 → 3.0.0.rc2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a52f9ec08954578164ea02cbde68d738d01fca0dfe32e845680064adc9848cfa
-  data.tar.gz: 6d5f1563e5fbee81e0ce69ce5fb0cf95996d969fa45a3b66e593d1dbb03c69a9
+  metadata.gz: f340826fe1ad681717b3272bd7fa0fdd4d2c1ac8a8de8edb1a096baa64d57dca
+  data.tar.gz: e7577d352f6a08af6f5a59bfdc2e157ebd5f1d4be358736193b3292c12b65465
 SHA512:
-  metadata.gz: 49765f7bf19eded33e7d4e99ee41b576922f93168ae24420587c1084452c4906411a1ff38c8faa83318b878b931158015c735f8c3389100a582507061996be23
-  data.tar.gz: f49088e4c4ed0283a47b99b25389eeea5607869f0f171be1036ffdd45e3b9defb53f3de2efe80556f14f311455e1d4d28c9f2bd43cd4075de9606469015462da
+  metadata.gz: 75fd6324b7a887fb6241e03b7f511b8e7c8f53afb51359ec9d6f84511cb8bc14705714eb38dc798224c6c86b1f80c3380c55ef80299df670cec03ac64bed891a
+  data.tar.gz: 552ac7ddd9c58ccb3d7226730b3b1c37e1d49f54a5c26e74702d5052dac74eb350068b1324bfc307c356c9b22a684fb94dc328ba7637e0e810626915c7e2608a

data/README.md

@@ -1,84 +1,60 @@
-# Matestack Ui Bootstrap
+[![Specs](https://github.com/matestack/matestack-ui-bootstrap/workflows/specs/badge.svg)](https://github.com/matestack/matestack-ui-bootstrap/actions)
+[![Discord](https://img.shields.io/discord/771413294136426496.svg)](https://discord.com/invite/c6tQxFG)
+[![Gem Version](https://badge.fury.io/rb/matestack-ui-bootstrap.svg)](https://badge.fury.io/rb/matestack-ui-bootstrap)
+[![Docs](https://img.shields.io/badge/docs-matestack-blue.svg)](https://docs.matestack.io/matestack-ui-bootstrap)
+[![Twitter Follow](https://img.shields.io/twitter/follow/matestack.svg?style=social)](https://twitter.com/matestack)
 
-**Docs and specs in progress, please wait for official release announcement before using this gem**
+![matestack logo](./logo.png)
 
-## Development
+# matestack-ui-bootstrap | beautiful, reactive UIs in pure Ruby
 
-### Dummy App
+As an extension for [`matestack-ui-core`](https://github.com/matestack/matestack-ui-core), `matestack-ui-bootstrap` ships all you need to build beautiful,
+reactive UIs in pure Ruby and smart CRUD components based on Bootstrap v5.
 
-**initial setup**
+----
 
-```shell
-docker-compose build dummy
-docker-compose run --rm dummy bash
-```
+`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.
 
-inside container:
+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.
 
-```shell
-bundle install
-yarn install
-cd spec/dummy
-bundle install
-npm install (npm and not yarn!)
-rails app:db:setup
-```
+----
 
-**dummy app start**
+`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.
 
-on your host:
-```shell
-docker-compose up dummy
-```
+Don't think about styling anymore and just create admin or application UIs faster than ever before!
 
-and
+[<img src="https://img.youtube.com/vi/bwsVgCb97v0/0.jpg" width="350">](https://www.youtube.com/watch?v=bwsVgCb97v0)
 
-```shell
-docker-compose run --rm dummy sh -c "cd spec/dummy && ./bin/webpack --watch"
-```
+## Compatibility
 
-simultaneously to be able to visit the demo app on [localhost:3000](localhost:3000).
+### Ruby/Rails
 
-## Testing
+`matestack-ui-bootstrap` is tested against:
 
-**initial setup**
+- Rails 6.1.1 + Ruby 3.0.0
+- Rails 6.1.1 + Ruby 2.7.2
+- Rails 6.0.3.4 + Ruby 2.6.6
+- Rails 5.2.4.4 + Ruby 2.6.6
 
-```shell
-docker-compose build dummy
-docker-compose run --rm dummy bash
-```
+Rails versions below 5.2 are not supported.
 
-inside container:
+### Vue.js
 
-```shell
-bundle install
-yarn install
-cd spec/dummy
-bundle install
-npm install (npm and not yarn!)
-rails app:db:setup
-```
+`matestack-ui-bootstrap` requires Vue.js and Vuex for its reactivity features. Following version ranges are supported:
 
-**test run**
+- Vue.js ^2.6.0
+- Vuex ^3.6.0
 
-```shell
-docker-compose run --rm builder bash
+Vue 3 / Vuex 4 update is planned for Q2 2021.
 
-```
+## Documentation/Installation
 
-inside container:
+Documentation can be found [here](https://docs.matestack.io/matestack-ui-bootstrap)
 
-```shell
-bundle exec rspec spec/test
-```
+## Changelog
 
-## Release
+Changelog can be found [here](./CHANGELOG.md)
 
-```shell
-docker-compose run --rm builder
-gem bump ...
-gem release
-npm bump ...
-npm release
-git tag ...
-```
+## License
+
+`matestack-ui-bootstrap` is an Open Source project licensed under the terms of the [MIT license](./LICENSE)

data/lib/matestack/ui/bootstrap/base_component.rb

@@ -5,8 +5,6 @@ module Matestack
     module Bootstrap
       class BaseComponent < Matestack::Ui::Component
 
-        include Matestack::Ui::Bootstrap::Registry
-
       end
     end
   end

data/lib/matestack/ui/bootstrap/base_vue_js_component.rb

@@ -3,9 +3,7 @@ require_relative "./registry"
 module Matestack
   module Ui
     module Bootstrap
-      class BaseVueJsComponent < Matestack::Ui::VueJsComponent
-
-        include Matestack::Ui::Bootstrap::Registry
+      class BaseVueJsComponent < Matestack::Ui::VueJsComponent  
 
       end
     end

data/lib/matestack/ui/bootstrap/components/alert.js

@@ -1,10 +1,10 @@
 import * as bootstrap from 'bootstrap'
-import Vue from 'vue/dist/vue.esm'
 
-import MatestackUiCore from 'matestack-ui-core'
+import MatestackUiVueJs from 'matestack-ui-vuejs'
 
-Vue.component('matestack-ui-bootstrap-alert', {
-  mixins: [MatestackUiCore.componentMixin],
+const alertComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
 
   data() {
     return {
@@ -18,13 +18,13 @@ Vue.component('matestack-ui-bootstrap-alert', {
     },
     dispose: function (){
       this.alertInstance.dispose()
-      // this.alertInstance = new bootstrap.Alert(self.$el)
+      // this.alertInstance = new bootstrap.Alert(self.getElement())
     }
   },
 
   mounted: function() {
     const self = this
-    var alert = self.$el
+    var alert = self.getElement()
     self.alertInstance = new bootstrap.Alert(alert)
   },
 
@@ -33,24 +33,26 @@ Vue.component('matestack-ui-bootstrap-alert', {
     // close_on event registration
     if(self.props["close_on"] != undefined){
       var close_events = self.props["close_on"].split(",")
-      close_events.forEach(close_event => MatestackUiCore.matestackEventHub.$on(close_event.trim(), self.close));
+      close_events.forEach(close_event => MatestackUiVueJs.eventHub.$on(close_event.trim(), self.close));
     }
     // dispose_on event registration
     if(self.props["dispose_on"] != undefined){
       var dispose_events = self.props["dispose_on"].split(",")
-      dispose_events.forEach(dispose_event => MatestackUiCore.matestackEventHub.$on(dispose_event.trim(), self.dispose));
+      dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$on(dispose_event.trim(), self.dispose));
     }
   },
 
-  beforeDestroy: function() {
+  beforeUnmount: function() {
     const self = this
     if(self.props["close_on"] != undefined){
       var closen_events = self.props["close_on"].split(",")
-      closen_events.forEach(close_event => MatestackUiCore.matestackEventHub.$off(close_event.trim(), self.close));
+      closen_events.forEach(close_event => MatestackUiVueJs.eventHub.$off(close_event.trim(), self.close));
     }
     if(self.props["dispose_on"] != undefined){
       var dispose_events = self.props["dispose_on"].split(",")
-      dispose_events.forEach(dispose_event => MatestackUiCore.matestackEventHub.$off(dispose_event.trim(), self.dispose));
+      dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$off(dispose_event.trim(), self.dispose));
     }
   },
-});
+}
+
+export default alertComponent

data/lib/matestack/ui/bootstrap/components/carousel.js

@@ -1,10 +1,10 @@
 import * as bootstrap from 'bootstrap'
-import Vue from 'vue/dist/vue.esm'
 
-import MatestackUiCore from 'matestack-ui-core'
+import MatestackUiVueJs from 'matestack-ui-vuejs'
 
-Vue.component('matestack-ui-bootstrap-carousel', {
-  mixins: [MatestackUiCore.componentMixin],
+const carouselComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
   data() {
     return {
       carouselInstance: undefined
@@ -32,7 +32,7 @@ Vue.component('matestack-ui-bootstrap-carousel', {
 
   mounted: function() {
     const self = this;
-    var myCarousel = self.$el;
+    var myCarousel = self.getElement();
     self.carouselInstance = new bootstrap.Carousel(myCarousel, {
       interval: (self.props['interval'] || 5000)
     })
@@ -42,41 +42,43 @@ Vue.component('matestack-ui-bootstrap-carousel', {
     const self = this
     if(self.props["cycle_on"] != undefined){
       var cycle_events = self.props["cycle_on"].split(",")
-      cycle_events.forEach(cycle_event => MatestackUiCore.matestackEventHub.$on(cycle_event.trim(), self.cycle));
+      cycle_events.forEach(cycle_event => MatestackUiVueJs.eventHub.$on(cycle_event.trim(), self.cycle));
     }
     if(self.props["pause_on"] != undefined){
       var pause_events = self.props["pause_on"].split(",")
-      pause_events.forEach(pause_event => MatestackUiCore.matestackEventHub.$on(pause_event.trim(), self.pause));
+      pause_events.forEach(pause_event => MatestackUiVueJs.eventHub.$on(pause_event.trim(), self.pause));
     }
     if(self.props["prev_on"] != undefined){
       var prev_events = self.props["prev_on"].split(",")
-      prev_events.forEach(prev_event => MatestackUiCore.matestackEventHub.$on(prev_event.trim(), self.prev));
+      prev_events.forEach(prev_event => MatestackUiVueJs.eventHub.$on(prev_event.trim(), self.prev));
     }
     if(self.props["next_on"] != undefined){
       var next_events = self.props["next_on"].split(",")
-      next_events.forEach(next_event => MatestackUiCore.matestackEventHub.$on(next_event.trim(), self.next));
+      next_events.forEach(next_event => MatestackUiVueJs.eventHub.$on(next_event.trim(), self.next));
     }
   },
 
-  beforeDestroy: function() {
+  beforeUnmount: function() {
     const self = this
     if(self.props["cycle_on"] != undefined){
       var cycle_events = self.props["cycle_on"].split(",")
-      cycle_events.forEach(cycle_event => MatestackUiCore.matestackEventHub.$off(cycle_event.trim(), self.cycle));
+      cycle_events.forEach(cycle_event => MatestackUiVueJs.eventHub.$off(cycle_event.trim(), self.cycle));
     }
 
     if(self.props["pause_on"] != undefined){
       var pause_events = self.props["pause_on"].split(",")
-      pause_events.forEach(pause_event => MatestackUiCore.matestackEventHub.$off(pause_event.trim(), self.pause));
+      pause_events.forEach(pause_event => MatestackUiVueJs.eventHub.$off(pause_event.trim(), self.pause));
     }
 
     if(self.props["prev_on"] != undefined){
       var prev_events = self.props["prev_on"].split(",")
-      prev_events.forEach(prev_event => MatestackUiCore.matestackEventHub.$off(prev_event.trim(), self.prev));
+      prev_events.forEach(prev_event => MatestackUiVueJs.eventHub.$off(prev_event.trim(), self.prev));
     }
     if(self.props["next_on"] != undefined){
       var next_events = self.props["next_on"].split(",")
-      next_events.forEach(next_event => MatestackUiCore.matestackEventHub.$off(next_event.trim(), self.next));
+      next_events.forEach(next_event => MatestackUiVueJs.eventHub.$off(next_event.trim(), self.next));
     }
   },
-});
+}
+
+export default carouselComponent

data/lib/matestack/ui/bootstrap/components/collapse.js

@@ -1,10 +1,10 @@
 import * as bootstrap from 'bootstrap'
-import Vue from 'vue/dist/vue.esm'
 
-import MatestackUiCore from 'matestack-ui-core'
+import MatestackUiVueJs from 'matestack-ui-vuejs'
 
-Vue.component('matestack-ui-bootstrap-collapse', {
-  mixins: [MatestackUiCore.componentMixin],
+const collapseComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
   data() {
     return {
       collapseInstance: undefined
@@ -34,8 +34,8 @@ Vue.component('matestack-ui-bootstrap-collapse', {
 
   mounted: function() {
     const self = this;
-    var myCollapse = self.$el;
-    self.collapseInstance = new bootstrap.Collapse(myCollapse, {
+    const collapseElement = self.getElement()
+    self.collapseInstance = new bootstrap.Collapse(collapseElement, {
       toggle: false
     })
   },
@@ -46,42 +46,44 @@ Vue.component('matestack-ui-bootstrap-collapse', {
     // toggle_on event registration
     if(self.props["toggle_on"] != undefined){
       var toggle_events = self.props["toggle_on"].split(",")
-      toggle_events.forEach(toggle_event => MatestackUiCore.matestackEventHub.$on(toggle_event.trim(), self.toggle));
+      toggle_events.forEach(toggle_event => MatestackUiVueJs.eventHub.$on(toggle_event.trim(), self.toggle));
     }
     // show_on event registration
     if(self.props["show_on"] != undefined){
       var show_events = self.props["show_on"].split(",")
-      show_events.forEach(show_event => MatestackUiCore.matestackEventHub.$on(show_event.trim(), self.show));
+      show_events.forEach(show_event => MatestackUiVueJs.eventHub.$on(show_event.trim(), self.show));
     }
     // hide_on event registration
     if(self.props["hide_on"] != undefined){
       var hide_events = self.props["hide_on"].split(",")
-      hide_events.forEach(hide_event => MatestackUiCore.matestackEventHub.$on(hide_event.trim(), self.hide));
+      hide_events.forEach(hide_event => MatestackUiVueJs.eventHub.$on(hide_event.trim(), self.hide));
     }
     // dispose_on event registration
     if(self.props["dispose_on"] != undefined){
       var dispose_events = self.props["dispose_on"].split(",")
-      dispose_events.forEach(dispose_event => MatestackUiCore.matestackEventHub.$on(dispose_event.trim(), self.dispose));
+      dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$on(dispose_event.trim(), self.dispose));
     }
   },
 
-  beforeDestroy: function(){
+  beforeUnmount: function(){
     const self = this
     if(self.props["toggle_on"] != undefined){
       var show_events = self.props["toggle_on"].split(",")
-      show_events.forEach(show_event => MatestackUiCore.matestackEventHub.$off(show_event.trim(), self.show));
+      show_events.forEach(show_event => MatestackUiVueJs.eventHub.$off(show_event.trim(), self.show));
     }
     if(self.props["show_on"] != undefined){
       var show_events = self.props["show_on"].split(",")
-      show_events.forEach(show_event => MatestackUiCore.matestackEventHub.$off(show_event.trim(), self.show));
+      show_events.forEach(show_event => MatestackUiVueJs.eventHub.$off(show_event.trim(), self.show));
     }
     if(self.props["hide_on"] != undefined){
       var hide_events = self.props["hide_on"].split(",")
-      hide_events.forEach(hide_event => MatestackUiCore.matestackEventHub.$off(hide_event.trim(), self.hide));
+      hide_events.forEach(hide_event => MatestackUiVueJs.eventHub.$off(hide_event.trim(), self.hide));
     }
     if(self.props["dispose_on"] != undefined){
       var dispose_events = self.props["dispose_on"].split(",")
-      dispose_events.forEach(dispose_event => MatestackUiCore.matestackEventHub.$off(dispose_event.trim(), self.dispose));
+      dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$off(dispose_event.trim(), self.dispose));
     }
   }
-});
+}
+
+export default collapseComponent

data/lib/matestack/ui/bootstrap/components/dropdown.js

@@ -1,10 +1,10 @@
 import * as bootstrap from 'bootstrap'
-import Vue from 'vue/dist/vue.esm'
 
-import MatestackUiCore from 'matestack-ui-core'
+import MatestackUiVueJs from 'matestack-ui-vuejs'
 
-Vue.component('matestack-ui-bootstrap-dropdown', {
-  mixins: [MatestackUiCore.componentMixin],
+const dropdownComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
   data() {
     return {
       dropdownInstance: undefined
@@ -14,4 +14,6 @@ Vue.component('matestack-ui-bootstrap-dropdown', {
     // var mydropdown = document.getElementById(this.props["dropdown-id"])
     // this.dropdownInstance = new bootstrap.Dropdown(mydropdown)
   }
-});
+}
+
+export default dropdownComponent

data/lib/matestack/ui/bootstrap/components/modal.js

@@ -1,10 +1,9 @@
 import * as bootstrap from 'bootstrap'
-import Vue from 'vue/dist/vue.esm'
+import MatestackUiVueJs from 'matestack-ui-vuejs'
 
-import MatestackUiCore from 'matestack-ui-core'
-
-Vue.component('matestack-ui-bootstrap-modal', {
-  mixins: [MatestackUiCore.componentMixin],
+const modalComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
 
   data() {
     return {
@@ -32,13 +31,13 @@ Vue.component('matestack-ui-bootstrap-modal', {
 
   mounted: function() {
     const self = this
-    var modal = self.$el
-    self.modalInstance = new bootstrap.Modal(modal)
+    const modalElement = self.getElement()
+    self.modalInstance = new bootstrap.Modal(modalElement)
   },
 
   created: function() {
     const self = this
-    var eventHub = MatestackUiCore.matestackEventHub;
+    var eventHub = MatestackUiVueJs.eventHub;
     // toggle_on event registration
     if(self.props["toggle_on"] != undefined){
       var toggle_events = self.props["toggle_on"].split(",")
@@ -66,9 +65,9 @@ Vue.component('matestack-ui-bootstrap-modal', {
     }
   },
 
-  beforeDestroy: function() {
+  beforeUnmount: function() {
     const self = this
-    var eventHub = MatestackUiCore.matestackEventHub;
+    var eventHub = MatestackUiVueJs.eventHub;
     if(self.props["toggle_on"] != undefined){
       var toggle_events = self.props["toggle_on"].split(",")
       toggle_events.forEach(toggle_event => eventHub.$off(toggle_event.trim(), self.toggle));
@@ -90,4 +89,6 @@ Vue.component('matestack-ui-bootstrap-modal', {
       dispose_events.forEach(dispose_event => eventHub.$off(dispose_event.trim(), self.dispose));
     }
   },
-});
+}
+
+export default modalComponent

data/lib/matestack/ui/bootstrap/components/navbar.rb

@@ -42,13 +42,13 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Bootstrap::B
     path = brand[:path].present? ? brand[:path] : "/"
     brand[:path] = path
     case brand[:type]
-    when :link
-      a brand.except(:text).merge(class: "navbar-brand") do
+    when :transition
+      transition brand.except(:text).merge(class: "navbar-brand") do
         img height: 40, path: brand[:img], loading: "lazy" if brand[:img].present?
         plain brand[:text]
       end
     else
-      transition brand.except(:text).merge(class: "navbar-brand") do
+      a brand.except(:text).merge(class: "navbar-brand") do
         img height: 40, path: brand[:img], loading: "lazy" if brand[:img].present?
         plain brand[:text]
       end

data/lib/matestack/ui/bootstrap/components/popover.js

@@ -1,11 +1,10 @@
 import * as bootstrap from 'bootstrap'
-import Vue from 'vue/dist/vue.esm'
 
-import MatestackUiCore from 'matestack-ui-core'
+import MatestackUiVueJs from 'matestack-ui-vuejs'
 
-Vue.component('matestack-ui-bootstrap-popover', {
-
-  mixins: [MatestackUiCore.componentMixin],
+const popoverComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
   data() {
     return {
       popoverInstance: undefined
@@ -17,13 +16,15 @@ Vue.component('matestack-ui-bootstrap-popover', {
   },
   mounted: function() {
     const self = this;
-    var popover = self.$el
-    self.popoverInstance = new bootstrap.Popover(popover, {})
+    const popoverElement = self.getElement()
+    self.popoverInstance = new bootstrap.Popover(popoverElement, {})
   },
   created: function() {
   },
 
-  beforeDestroy: function() {
+  beforeUnmount: function() {
 
   },
-});
+}
+
+export default popoverComponent

data/lib/matestack/ui/bootstrap/components/toast.js

@@ -1,11 +1,10 @@
 import * as bootstrap from 'bootstrap'
-import Vue from 'vue/dist/vue.esm'
 
-import MatestackUiCore from 'matestack-ui-core'
+import MatestackUiVueJs from 'matestack-ui-vuejs'
 
-Vue.component('matestack-ui-bootstrap-toast', {
-
-  mixins: [MatestackUiCore.componentMixin],
+const toastComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
   data() {
     return {
       toastsInstance: undefined,
@@ -40,12 +39,12 @@ Vue.component('matestack-ui-bootstrap-toast', {
     dispose: function(){
       const self = this;
       self.toastsInstance.dispose()
-      self.toastsInstance = new bootstrap.Toast(self.$el)
+      self.toastsInstance = new bootstrap.Toast(self.getElement())
     }
   },
   mounted: function() {
     const self = this;
-    var myToasts = self.$el
+    var myToasts = self.getElement()
     self.toastsInstance = new bootstrap.Toast(myToasts)
   },
   created: function() {
@@ -53,36 +52,38 @@ Vue.component('matestack-ui-bootstrap-toast', {
 
     if(this.props["show_on"] != undefined){
       var show_events = this.props["show_on"].split(",")
-      show_events.forEach(show_event => MatestackUiCore.matestackEventHub.$on(show_event.trim(), self.show));
+      show_events.forEach(show_event => MatestackUiVueJs.eventHub.$on(show_event.trim(), self.show));
     }
 
     if(this.props["hide_on"] != undefined){
       var show_events = this.props["hide_on"].split(",")
-      show_events.forEach(show_event => MatestackUiCore.matestackEventHub.$on(show_event.trim(), self.hide));
+      show_events.forEach(show_event => MatestackUiVueJs.eventHub.$on(show_event.trim(), self.hide));
     }
 
     if(this.props["dispose_on"] != undefined){
       var show_events = this.props["dispose_on"].split(",")
-      show_events.forEach(show_event => MatestackUiCore.matestackEventHub.$on(show_event.trim(), self.dispose));
+      show_events.forEach(show_event => MatestackUiVueJs.eventHub.$on(show_event.trim(), self.dispose));
     }
   },
 
-  beforeDestroy: function() {
+  beforeUnmount: function() {
     const self = this
-    MatestackUiCore.matestackEventHub.$off(this.props["show_on"], self.show);
-    MatestackUiCore.matestackEventHub.$off(this.props["hide_on"], self.hide);
-    MatestackUiCore.matestackEventHub.$off(this.props["dispose_on"], self.hide);
+    MatestackUiVueJs.eventHub.$off(this.props["show_on"], self.show);
+    MatestackUiVueJs.eventHub.$off(this.props["hide_on"], self.hide);
+    MatestackUiVueJs.eventHub.$off(this.props["dispose_on"], self.hide);
     if(this.props["show_on"] != undefined){
       var shown_events = this.props["show_on"].split(",")
-      shown_events.forEach(show_event => MatestackUiCore.matestackEventHub.$off(show_event.trim(), self.show));
+      shown_events.forEach(show_event => MatestackUiVueJs.eventHub.$off(show_event.trim(), self.show));
     }
     if(this.props["hide_on"] != undefined){
       var hiden_events = this.props["hide_on"].split(",")
-      hiden_events.forEach(hide_event => MatestackUiCore.matestackEventHub.$off(hide_event.trim(), self.hide));
+      hiden_events.forEach(hide_event => MatestackUiVueJs.eventHub.$off(hide_event.trim(), self.hide));
     }
     if(this.props["dispose_on"] != undefined){
       var hiden_events = this.props["dispose_on"].split(",")
-      hiden_events.forEach(hide_event => MatestackUiCore.matestackEventHub.$off(hide_event.trim(), self.dispose));
+      hiden_events.forEach(hide_event => MatestackUiVueJs.eventHub.$off(hide_event.trim(), self.dispose));
     }
   },
-});
+}
+
+export default toastComponent

data/lib/matestack/ui/bootstrap/components/toast.rb

@@ -56,7 +56,7 @@ class Matestack::Ui::Bootstrap::Components::Toast < Matestack::Ui::Bootstrap::Ba
       small header[:subtitle] if header[:subtitle].present?
 
       slot :header if slots && slots[:header]
-      bs_close dismiss: 'toast', class: "ms-2 mb-1", "@click": "hide()"
+      bs_close dismiss: 'toast', class: "ms-2 mb-1", "@click": "vc.hide()"
     end
 
   end
@@ -66,7 +66,7 @@ class Matestack::Ui::Bootstrap::Components::Toast < Matestack::Ui::Bootstrap::Ba
       plain context.body if context.body
     end
     unless context.header || slots && slots[:header]
-      bs_close dismiss: 'toast', class: "ms-auto me-2 btn-close-white", "@click": "hide()"
+      bs_close dismiss: 'toast', class: "ms-auto me-2 btn-close-white", "@click": "vc.hide()"
     end
   end
 
@@ -92,7 +92,7 @@ class Matestack::Ui::Bootstrap::Components::Toast < Matestack::Ui::Bootstrap::Ba
       hash[:'aria-live'] = 'assertive' unless context.important.present?
       hash[:'aria-atomic'] = 'true' unless context.placement.present?
       hash[:style] = "z-index: 10000; position: fixed; #{context.placement[:position] || 'top: 0; right: 0;' }"  if context.placement.present?
-      hash[:"v-bind:class"] = "{'show' : showing }"
+      hash[:"v-bind:class"] = "{'show' : vc.showing }"
     end
   end
 

data/lib/matestack/ui/bootstrap/components/tooltip.js

@@ -1,11 +1,9 @@
 import * as bootstrap from 'bootstrap'
-import Vue from 'vue/dist/vue.esm'
+import MatestackUiVueJs from 'matestack-ui-vuejs'
 
-import MatestackUiCore from 'matestack-ui-core'
-
-Vue.component('matestack-ui-bootstrap-tooltip', {
-
-  mixins: [MatestackUiCore.componentMixin],
+const tooltipComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
   data() {
     return {
       // tooltipInstance: undefined
@@ -17,13 +15,15 @@ Vue.component('matestack-ui-bootstrap-tooltip', {
   },
   mounted: function() {
     const self = this;
-    var tooltip = self.$el
+    var tooltip = self.getElement()
     self.tooltipInstance = new bootstrap.Tooltip(tooltip)
   }
   // created: function() {
   // },
 
-  // beforeDestroy: function() {
+  // beforeUnmount: function() {
 
   // },
-});
+}
+
+export default tooltipComponent