matestack-ui-bootstrap 2.1.0 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 765f0c5d8c9c1ff744e18f2f9cf03e988b45527941b13d420b777e304bd04149
-  data.tar.gz: 2b24f828ef784ce5c7f137a7354f3f6eeb6ee46679e38e8e6e1670089bd9d092
+  metadata.gz: b38c029b0abf064a716c915e47f1b0b433a65ccf70b6b9713d35193b21636705
+  data.tar.gz: ab3c390b4030c118702f0d7dfa60dc13436a43f8fd282a0d25d4d71225fcdbb3
 SHA512:
-  metadata.gz: 4576738c13b40735fe220ad577416834b0adc0ec129426cb438843dc7513957d193de42948050e64d1309da6545cb1dbc38d24969d339c7e7b1f10e1ad81e615
-  data.tar.gz: 496c5eefd617f97462c4987a172a4510743f5c896d828f5bf5f7186e2cf8fd46977d049375ffd93be9c588ed1a34e51eb503dee8303632274f05aa66e5ae737c
+  metadata.gz: 5f5d39b474c3658d2afff912b73d5860e340e5b3d913459dc555f2762130a0d12549b485dc595c7de8d6be23a76a31e85b4eb4f1dd1f50e8592d18ccdf092646
+  data.tar.gz: e3f2c4278d9842cef53ac97571fe956413beb6abb9f3fc0f94b8f28eefcae42cf5ffdee455446349e9695ea0557fbce58293d659a631c101cf264be2e0327e7b

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

data/lib/matestack/ui/bootstrap/form/checkbox.rb

@@ -1,7 +1,5 @@
 class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Components::Form::Checkbox
 
-  include Matestack::Ui::Bootstrap::Registry
-
   vue_name "matestack-ui-core-form-checkbox"
 
   optional :form_text
@@ -44,7 +42,7 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Component
     # checked/unchecked checkbox (true/false checkbox)
     else
       checkbox_wrapper do
-        input true_false_checkbox_attributes.merge(type: :hidden, id: nil, value: 0)
+        input true_false_checkbox_attributes.merge(type: :hidden, id: nil)
         input true_false_checkbox_attributes.merge(type: :checkbox, ":id": item_id(1)).merge(bootstrap_attributes)
 
         bootstrap_label text: input_label, for_input: item_id(1)

data/lib/matestack/ui/bootstrap/form/input.rb

@@ -1,7 +1,5 @@
 class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::VueJs::Components::Form::Input
 
-  include Matestack::Ui::Bootstrap::Registry
-
   vue_name "matestack-ui-core-form-input"
 
   optional :form_text

data/lib/matestack/ui/bootstrap/form/radio.rb

@@ -1,7 +1,5 @@
 class Matestack::Ui::Bootstrap::Form::Radio < Matestack::Ui::VueJs::Components::Form::Radio
 
-  include Matestack::Ui::Bootstrap::Registry
-
   vue_name "matestack-ui-core-form-radio"
 
   optional :form_text

data/lib/matestack/ui/bootstrap/form/select.rb

@@ -1,7 +1,5 @@
 class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::VueJs::Components::Form::Select
 
-  include Matestack::Ui::Bootstrap::Registry
-
   vue_name "matestack-ui-core-form-select"
 
   optional :variant

data/lib/matestack/ui/bootstrap/form/submit.rb

@@ -8,10 +8,10 @@ class Matestack::Ui::Bootstrap::Form::Submit < Matestack::Ui::Bootstrap::BaseCom
   optional class: { as:  :bs_class }
 
   def response
-    bs_btn type: "submit", size:context.size, class: "#{context.bs_class}", variant: context.button_variant || :primary, "v-if": "!loading" do
+    bs_btn type: "submit", size:context.size, class: "#{context.bs_class}", variant: context.button_variant || :primary, "v-if": "!vc.loading" do
       plain context.text || "Submit"
     end
-    bs_btn type: "submit", size: context.size, class: "#{context.bs_class} #{context.loading_class}", variant: context.button_variant || :primary, disabled: true, "v-if": "loading" do
+    bs_btn type: "submit", size: context.size, class: "#{context.bs_class} #{context.loading_class}", variant: context.button_variant || :primary, disabled: true, "v-if": "vc.loading" do
       bs_spinner variant: context.spinner_variant || :light, size: :sm
       plain context.loading_text || "Loading..."
     end

data/lib/matestack/ui/bootstrap/form/switch.rb

@@ -1,7 +1,5 @@
 class Matestack::Ui::Bootstrap::Form::Switch < Matestack::Ui::Bootstrap::Form::Checkbox
 
-  include Matestack::Ui::Bootstrap::Registry
-
   vue_name "matestack-ui-core-form-checkbox"
 
   optional :form_text

data/lib/matestack/ui/bootstrap/form/textarea.rb

@@ -1,7 +1,5 @@
 class Matestack::Ui::Bootstrap::Form::Textarea < Matestack::Ui::VueJs::Components::Form::Textarea
 
-  include Matestack::Ui::Bootstrap::Registry
-
   vue_name "matestack-ui-core-form-textarea"
 
   optional :form_text

data/lib/matestack/ui/bootstrap/index.js

@@ -5,19 +5,35 @@
 
 import "./stylesheets/matestack-ui-bootstrap.scss";
 
-import './components/alert'
-import './components/carousel'
-import './components/collapse'
-import './components/dropdown'
-import './components/modal'
-import './components/toast'
-import './components/popover'
-import './components/tooltip'
-import './layout/sidebar'
+import alertComponent from './components/alert'
+import carouselComponent from './components/carousel'
+import collapseComponent from './components/collapse'
+import dropdownComponent from './components/dropdown'
+import modalComponent from './components/modal'
+import popoverComponent from './components/popover'
+import toastComponent from './components/toast'
+import tooltipComponent from './components/tooltip'
+import sidebarComponent from './layout/sidebar'
 import './layout/sidebar.scss'
 import './content/smart_collection/collection.scss'
 
-const MatestackUiBootstrap = {}
+const registerComponents = function(appInstance){
+  appInstance.component('matestack-ui-bootstrap-alert', alertComponent)
+  appInstance.component('matestack-ui-bootstrap-carousel', carouselComponent)
+  appInstance.component('matestack-ui-bootstrap-collapse', collapseComponent)
+  appInstance.component('matestack-ui-bootstrap-dropdown', dropdownComponent)
+  appInstance.component('matestack-ui-bootstrap-modal', modalComponent)
+  appInstance.component('matestack-ui-bootstrap-popover', popoverComponent)
+  appInstance.component('matestack-ui-bootstrap-toast', toastComponent)
+  appInstance.component('matestack-ui-bootstrap-tooltip', tooltipComponent)
+  appInstance.component('matestack-ui-bootstrap-sidebar', sidebarComponent)
+
+  return appInstance
+}
+
+const MatestackUiBootstrap = {
+  registerComponents
+}
 
 window.MatestackUiBootstrap = MatestackUiBootstrap
 

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

@@ -0,0 +1,3 @@
+class Matestack::Ui::Core::Base
+  include Matestack::Ui::Bootstrap::Registry
+end

data/lib/matestack/ui/bootstrap/layout/sidebar.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-sidebar', {
-  mixins: [MatestackUiCore.componentMixin],
+const sidebarComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
 
   data() {
     return {
@@ -52,16 +51,18 @@ Vue.component('matestack-ui-bootstrap-sidebar', {
     }
     window.addEventListener('resize', this.resizeCallback);
     var self = this;
-    MatestackUiCore.matestackEventHub.$on("page_loaded", function(){
+    MatestackUiVueJs.eventHub.$on("page_loaded", function(){
       if (window.innerWidth <= 992){
         self.closeSideBar();
       }
     })
-    MatestackUiCore.matestackEventHub.$on("page_loading_triggered", function(){
+    MatestackUiVueJs.eventHub.$on("page_loading_triggered", function(){
       if (window.innerWidth <= 992){
         self.closeSideBar();
       }
     })
   }
 
-});
+}
+
+export default sidebarComponent

data/lib/matestack/ui/bootstrap/layout/sidebar.rb

@@ -7,20 +7,18 @@ class Matestack::Ui::Bootstrap::Layout::Sidebar < Matestack::Ui::Bootstrap::Base
   optional :sidebar_navigation_items
 
   def response
-    div class: "sidebar-wrapper shadow-sm bg-white", id: "sidebar" do
-      nav class: 'sidebar pt-4 px-3' do
-        div class: "sidebar-toggler" do
-          bs_btn variant: :link, "@click": "sidebarToggle" do
-            bs_icon name: "list", size: 25, class: "text-muted"
-          end
-        end
-        div class: "sidebar-top mb-3" do
-          slot :sidebar_top if slots && slots[:sidebar_top].present?
-        end
-        div class: "sidebar-navigation my-3" do
-          sidebar_navigation_partial
+    nav class: 'sidebar pt-4 px-3 shadow-sm bg-white' do
+      div class: "sidebar-toggler" do
+        bs_btn variant: :link, "@click": "vc.sidebarToggle" do
+          bs_icon name: "list", size: 25, class: "text-muted"
         end
       end
+      div class: "sidebar-top mb-3" do
+        slot :sidebar_top if slots && slots[:sidebar_top].present?
+      end
+      div class: "sidebar-navigation my-3" do
+        sidebar_navigation_partial
+      end
     end
   end
 

data/lib/matestack/ui/bootstrap/{apps → layouts}/admin_template.rb

@@ -1,11 +1,9 @@
 require_relative "../registry"
 
-class Matestack::Ui::Bootstrap::Apps::AdminTemplate < Matestack::Ui::App
-
-  include Matestack::Ui::Bootstrap::Registry
+class Matestack::Ui::Bootstrap::Layouts::AdminTemplate < Matestack::Ui::Layout
 
   def response(&block)
-    matestack do
+    matestack_vue_js_app do
       body_response(&block)
     end
   end
@@ -13,20 +11,20 @@ class Matestack::Ui::Bootstrap::Apps::AdminTemplate < Matestack::Ui::App
   def body_response(&block)
     div class: "d-flex flex-row" do
       if should_show_sidebar?
-        bs_sidebar sidebar_navigation_items: sidebar_navigation_items, slots: { sidebar_top: method(:sidebar_top_slot) }
+        div id: "sidebar", class: "sidebar-wrapper" do
+          bs_sidebar sidebar_navigation_items: sidebar_navigation_items, slots: { sidebar_top: method(:sidebar_top_slot) }
+        end
       end
       div id: "content", class: "content-wrapper w-100 #{content_background_class}" do
         if should_show_navbar?
           bs_container do
-            bs_navbar brand: navbar_brand_config, items: navbar_items, class: "pt-4 #{'ps-5' if should_show_sidebar?}", collapse_class: "text-end text-lg-start pe-3" do
-              # div class: "d-flex" do
-              #   navbar_end_partial if self.respond_to?(:navbar_end_partial)
-              # end
-            end
+            bs_navbar brand: navbar_brand_config, items: navbar_items, class: "pt-4 #{'ps-5' if should_show_sidebar?}", collapse_class: "text-end text-lg-start pe-3"
           end
         end
         bs_container class: "my-5 px-4 pt-5" do
-          yield if block_given?
+          page_switch do
+            yield if block_given?
+          end
         end
       end
     end

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

@@ -1,7 +1,7 @@
 module Matestack
   module Ui
     module Bootstrap
-      VERSION = '2.1.0'
+      VERSION = '3.0.0'
     end
   end
 end

data/lib/matestack/ui/bootstrap.rb

@@ -1,4 +1,5 @@
 require "matestack/ui/core"
+require "matestack/ui/vue_js"
 
 base_path = 'matestack/ui/bootstrap'
 require "#{base_path}/version"
@@ -16,12 +17,12 @@ require "#{base_path}/base_vue_js_component"
 module Matestack
   module Ui
     module Bootstrap
-      module Apps
+      module Layouts
       end
     end
   end
 end
-require "#{base_path}/apps/admin_template"
+require "#{base_path}/layouts/admin_template"
 
 module Matestack
   module Ui
@@ -105,3 +106,4 @@ require "#{base_path}/form/submit"
 require "#{base_path}/form/switch"
 
 require "#{base_path}/registry"
+require "#{base_path}/initialize"

metadata

@@ -1,15 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: matestack-ui-bootstrap
 version: !ruby/object:Gem::Version
-  version: 2.1.0
+  version: 3.0.0
 platform: ruby
 authors:
 - Jonas Jabari
-- Nils Henning
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-06-29 00:00:00.000000000 Z
+date: 2022-03-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: matestack-ui-core
@@ -17,14 +16,28 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.1'
+        version: 3.0.0.rc2
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.1'
+        version: 3.0.0.rc2
+- !ruby/object:Gem::Dependency
+  name: matestack-ui-vuejs
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.0.0.rc2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.0.0.rc2
 description: Bootstrap v5 components for Matestack UI
 email:
 - jonas@matestack.io
@@ -35,13 +48,7 @@ files:
 - LICENSE
 - README.md
 - Rakefile
-- config/webpack/development.js
-- config/webpack/environment.js
-- config/webpack/production.js
-- config/webpack/test.js
-- config/webpacker.yml
 - lib/matestack/ui/bootstrap.rb
-- lib/matestack/ui/bootstrap/apps/admin_template.rb
 - lib/matestack/ui/bootstrap/base_component.rb
 - lib/matestack/ui/bootstrap/base_vue_js_component.rb
 - lib/matestack/ui/bootstrap/components/accordion.rb
@@ -93,12 +100,14 @@ files:
 - lib/matestack/ui/bootstrap/form/switch.rb
 - lib/matestack/ui/bootstrap/form/textarea.rb
 - lib/matestack/ui/bootstrap/index.js
+- lib/matestack/ui/bootstrap/initialize.rb
 - lib/matestack/ui/bootstrap/layout/column.rb
 - lib/matestack/ui/bootstrap/layout/container.rb
 - lib/matestack/ui/bootstrap/layout/row.rb
 - lib/matestack/ui/bootstrap/layout/sidebar.js
 - lib/matestack/ui/bootstrap/layout/sidebar.rb
 - lib/matestack/ui/bootstrap/layout/sidebar.scss
+- lib/matestack/ui/bootstrap/layouts/admin_template.rb
 - lib/matestack/ui/bootstrap/registry.rb
 - lib/matestack/ui/bootstrap/stylesheets/matestack-ui-bootstrap.scss
 - lib/matestack/ui/bootstrap/version.rb
@@ -122,7 +131,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.2
+rubygems_version: 3.1.4
 signing_key: 
 specification_version: 4
 summary: Bootstrap v5 components for Matestack UI

data/config/webpack/development.js

@@ -1,5 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
-
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()

data/config/webpack/environment.js

@@ -1,29 +0,0 @@
-const { environment } = require('@rails/webpacker')
-
-environment.config.merge({
-  externals: {
-    "matestack-ui-core": "matestack-ui-core",
-    "chart.js": "chart.js",
-    "bootstrap": "bootstrap",
-    "flatpickr": "flatpickr"
-  }
-})
-
-// Remove the digest from the output js filename.
-// https://github.com/matestack/matestack-ui-core/issues/343#issuecomment-581149092
-//
-environment.config.set("output.filename", chunkData => {
-  return "[name].js"
-})
-
-// Remove the digest from the output css filename.
-// https://github.com/matestack/matestack-ui-core/issues/343#issuecomment-581149092
-//
-// Inspect with:
-//
-//     console.log(environment.plugins)
-//
-const miniCssExtractPlugin = environment.plugins.get('MiniCssExtract')
-miniCssExtractPlugin.options.filename = "[name].css"
-
-module.exports = environment

data/config/webpack/production.js

@@ -1,33 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'production'
-
-const environment = require('./environment')
-
-// Add `.min` to the production versions of the output files.
-// https://github.com/matestack/matestack-ui-core/issues/343#issuecomment-580246554
-// https://github.com/matestack/matestack-ui-core/issues/343#issuecomment-581149092
-//
-environment.config.set("output.filename", chunkData => {
-  return "[name].min.js"
-})
-const miniCssExtractPlugin = environment.plugins.get('MiniCssExtract')
-miniCssExtractPlugin.options.filename = "[name].min.css"
-
-// In order to have babel's es5 (ie11) transpiling be applied to all of the
-// js code, it needs to be included in the loader paths.
-// https://github.com/rails/webpacker/blob/master/docs/webpack.md
-// https://github.com/matestack/matestack-ui-core/issues/238
-//
-const babelLoader = environment.loaders.get('babel')
-delete babelLoader.exclude
-const path = require('path')
-const matestackUiBootstrapRootPath = path.resolve(__dirname, '../..')
-babelLoader.include.push(path.resolve(matestackUiBootstrapRootPath, 'app/concepts/matestack/ui/bootstrap'))
-babelLoader.include.push(path.resolve(matestackUiBootstrapRootPath, 'node_modules'))
-
-// We also need to tell babel where to find matestack-ui-material if we are using `npm link`.
-// Otherwise, it won't follow the symlink to `node_modules/matestack-ui-core`.
-//
-// const matestackUiCoreRootPath = path.resolve(require.resolve('matestack-ui-core'), '../../../')
-// babelLoader.include.push(matestackUiCoreRootPath)
-
-module.exports = environment.toWebpackConfig()

data/config/webpack/test.js

@@ -1,5 +0,0 @@
-process.env.NODE_ENV = process.env.NODE_ENV || 'development'
-
-const environment = require('./environment')
-
-module.exports = environment.toWebpackConfig()

data/config/webpacker.yml

@@ -1,96 +0,0 @@
-# Note: You must restart bin/webpack-dev-server for changes to take effect
-
-default: &default
-  source_path: app/javascript
-  source_entry_path: packs
-  public_root_path: vendor/assets/javascripts
-  public_output_path: dist
-  cache_path: tmp/cache/webpacker
-  check_yarn_integrity: false
-  webpack_compile_output: true
-
-  # Additional paths webpack should lookup modules
-  # ['app/assets', 'engine/foo/app/assets']
-  additional_paths: ['node_modules']
-
-  # Reload manifest.json on all requests so we reload latest compiled packs
-  cache_manifest: false
-
-  # Extract and emit a css file
-  extract_css: true
-
-  static_assets_extensions:
-    - .jpg
-    - .jpeg
-    - .png
-    - .gif
-    - .tiff
-    - .ico
-    - .svg
-    - .eot
-    - .otf
-    - .ttf
-    - .woff
-    - .woff2
-
-  extensions:
-    - .mjs
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
-
-development:
-  <<: *default
-  compile: true
-
-  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
-  check_yarn_integrity: true
-
-  # Reference: https://webpack.js.org/configuration/dev-server/
-  dev_server:
-    https: false
-    host: localhost
-    port: 3035
-    public: localhost:3035
-    hmr: false
-    # Inline should be set to true if using HMR
-    inline: true
-    overlay: true
-    compress: true
-    disable_host_check: true
-    use_local_ip: false
-    quiet: false
-    pretty: false
-    headers:
-      'Access-Control-Allow-Origin': '*'
-    watch_options:
-      ignored: '**/node_modules/**'
-
-
-test:
-  <<: *default
-  compile: true
-
-  # Compile test packs to a separate directory
-  public_output_path: packs-test
-
-production:
-  <<: *default
-
-  # Production depends on precompilation of packs prior to booting for performance.
-  compile: false
-
-  # Extract and emit a css file
-  extract_css: true
-
-  # Cache manifest.json for performance
-  cache_manifest: true