matestack-ui-bootstrap 3.1.0 → 3.2.0.beta1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d047ff8c0a01f7a39c47ec467338e171ce5d09814bf2d58aa5d87a2b468de0c2
-  data.tar.gz: 78f3013f3f8c202531771c3f7519ac430152b098ec64e5d4ac29740aebbc945b
+  metadata.gz: 4e2e524d1b06bb253accbeffe605bf69d001d2da8cdffd908bd73ff0b5310443
+  data.tar.gz: a2f16babea258baccc4c020dec5922ba38342928f0d51369f7524c02e54c17fc
 SHA512:
-  metadata.gz: 41d821fb6b4801289635ea4eb4257f2487e8c349c675de8288f554c8904e7049bbf3aa137d3094c4b4a6d683c8f6ed142a0cd1f41d9465a56bc67a4b39d5663f
-  data.tar.gz: 71ea6b382e50e8080f7edd795ddf9c09bd07f341adf6195a0ce834a1231c3a591cfc29761b9d8033f33f97b6ac58d6c7dfb567f013ae22dfd5d7449470e9f37e
+  metadata.gz: ddee9d2f3f7468773bedffcf320dddd4ea812c3e95dbe72d0ac254154c5d62f5f8b5a37ec2ca65722d74ec2e98c8fc775e35407d2d755c8a41ca40a41bc13419
+  data.tar.gz: 99469b732c22cf31eb20acc73d68eefaf3f5670c67607928996a9f73cf080458b87b1d2face5940df1739ada0c7ca33157cf2da5a07fbc6821f8a73aa3185b26

data/dist/matestack-ui-bootstrap.esm.js

@@ -0,0 +1 @@
+import*as o from"bootstrap";import n from"matestack-ui-vuejs";const e={mixins:[n.componentMixin],template:n.componentHelpers.inlineTemplate,data:()=>({alertInstance:void 0}),methods:{close:function(){this.alertInstance.close()},dispose:function(){this.alertInstance.dispose()}},mounted:function(){var n=this.getElement();this.alertInstance=new o.Alert(n)},created:function(){const o=this;null!=o.props.close_on&&o.props.close_on.split(",").forEach((e=>n.eventHub.$on(e.trim(),o.close)));null!=o.props.dispose_on&&o.props.dispose_on.split(",").forEach((e=>n.eventHub.$on(e.trim(),o.dispose)))},beforeUnmount:function(){const o=this;null!=o.props.close_on&&o.props.close_on.split(",").forEach((e=>n.eventHub.$off(e.trim(),o.close)));null!=o.props.dispose_on&&o.props.dispose_on.split(",").forEach((e=>n.eventHub.$off(e.trim(),o.dispose)))}},t={mixins:[n.componentMixin],template:n.componentHelpers.inlineTemplate,data:()=>({carouselInstance:void 0}),methods:{cycle:function(){this.carouselInstance.cycle()},pause:function(){this.carouselInstance.pause()},prev:function(){this.carouselInstance.prev()},next:function(){this.carouselInstance.next()}},mounted:function(){const n=this;var e=n.getElement();n.carouselInstance=new o.Carousel(e,{interval:n.props.interval||5e3})},created:function(){const o=this;null!=o.props.cycle_on&&o.props.cycle_on.split(",").forEach((e=>n.eventHub.$on(e.trim(),o.cycle)));null!=o.props.pause_on&&o.props.pause_on.split(",").forEach((e=>n.eventHub.$on(e.trim(),o.pause)));null!=o.props.prev_on&&o.props.prev_on.split(",").forEach((e=>n.eventHub.$on(e.trim(),o.prev)));null!=o.props.next_on&&o.props.next_on.split(",").forEach((e=>n.eventHub.$on(e.trim(),o.next)))},beforeUnmount:function(){const o=this;null!=o.props.cycle_on&&o.props.cycle_on.split(",").forEach((e=>n.eventHub.$off(e.trim(),o.cycle)));null!=o.props.pause_on&&o.props.pause_on.split(",").forEach((e=>n.eventHub.$off(e.trim(),o.pause)));null!=o.props.prev_on&&o.props.prev_on.split(",").forEach((e=>n.eventHub.$off(e.trim(),o.prev)));null!=o.props.next_on&&o.props.next_on.split(",").forEach((e=>n.eventHub.$off(e.trim(),o.next)))}},s={mixins:[n.componentMixin],template:n.componentHelpers.inlineTemplate,data:()=>({collapseInstance:void 0}),methods:{toggle:function(){this.collapseInstance.toggle()},show:function(){this.collapseInstance.show()},hide:function(){this.collapseInstance.hide()},dispose:function(){this.collapseInstance.hide(),this.collapseInstance.dispose()}},mounted:function(){const n=this.getElement();this.collapseInstance=new o.Collapse(n,{toggle:!1})},created:function(){const o=this;null!=o.props.toggle_on&&o.props.toggle_on.split(",").forEach((e=>n.eventHub.$on(e.trim(),o.toggle)));null!=o.props.show_on&&o.props.show_on.split(",").forEach((e=>n.eventHub.$on(e.trim(),o.show)));null!=o.props.hide_on&&o.props.hide_on.split(",").forEach((e=>n.eventHub.$on(e.trim(),o.hide)));null!=o.props.dispose_on&&o.props.dispose_on.split(",").forEach((e=>n.eventHub.$on(e.trim(),o.dispose)))},beforeUnmount:function(){const o=this;null!=o.props.toggle_on&&o.props.toggle_on.split(",").forEach((e=>n.eventHub.$off(e.trim(),o.show)));null!=o.props.show_on&&o.props.show_on.split(",").forEach((e=>n.eventHub.$off(e.trim(),o.show)));null!=o.props.hide_on&&o.props.hide_on.split(",").forEach((e=>n.eventHub.$off(e.trim(),o.hide)));null!=o.props.dispose_on&&o.props.dispose_on.split(",").forEach((e=>n.eventHub.$off(e.trim(),o.dispose)))}},i={mixins:[n.componentMixin],template:n.componentHelpers.inlineTemplate,data:()=>({dropdownInstance:void 0}),mounted(){}},p={mixins:[n.componentMixin],template:n.componentHelpers.inlineTemplate,data:()=>({modalInstance:void 0}),methods:{toggle:function(){this.modalInstance.toggle()},show:function(){this.modalInstance.show()},hide:function(){this.modalInstance.hide()},handleUpdate:function(){this.modalInstance.handleUpdate()},dispose:function(){this.modalInstance.dispose()}},mounted:function(){const n=this.getElement();this.modalInstance=new o.Modal(n)},created:function(){const o=this;var e=n.eventHub;null!=o.props.toggle_on&&o.props.toggle_on.split(",").forEach((n=>e.$on(n.trim(),o.toggle)));null!=o.props.show_on&&o.props.show_on.split(",").forEach((n=>e.$on(n.trim(),o.show)));null!=o.props.hide_on&&o.props.hide_on.split(",").forEach((n=>e.$on(n.trim(),o.hide)));null!=o.props.handle_update_on&&o.props.handle_update_on.split(",").forEach((n=>e.$on(n.trim(),o.handle_update)));null!=o.props.dispose_on&&o.props.dispose_on.split(",").forEach((n=>e.$on(n.trim(),o.dispose)))},beforeUnmount:function(){const o=this;var e=n.eventHub;null!=o.props.toggle_on&&o.props.toggle_on.split(",").forEach((n=>e.$off(n.trim(),o.toggle)));null!=o.props.show_on&&o.props.show_on.split(",").forEach((n=>e.$off(n.trim(),o.show)));null!=o.props.hide_on&&o.props.hide_on.split(",").forEach((n=>e.$off(n.trim(),o.hide)));null!=o.props.handle_update_on&&o.props.handle_update_on.split(",").forEach((n=>e.$off(n.trim(),o.handle_update)));null!=o.props.dispose_on&&o.props.dispose_on.split(",").forEach((n=>e.$off(n.trim(),o.dispose)))}},a={mixins:[n.componentMixin],template:n.componentHelpers.inlineTemplate,data:()=>({popoverInstance:void 0}),methods:{},mounted:function(){const n=this.getElement();this.popoverInstance=new o.Popover(n,{})},created:function(){},beforeUnmount:function(){}},l={mixins:[n.componentMixin],template:n.componentHelpers.inlineTemplate,data:()=>({toastsInstance:void 0,eventData:{},showing:!1}),methods:{show:function(o){const n=this;this.props.autohide&&setTimeout((function(){n.showing=!1}),5e3),this.props.delay?setTimeout((function(){n.showing=!0}),parseInt(n.props.delay)):n.showing=!0,this.eventData=o},hide:function(o){const n=this;this.showing=!1,setTimeout((function(){n.eventData=!1}),500)},dispose:function(){const n=this;n.toastsInstance.dispose(),n.toastsInstance=new o.Toast(n.getElement())}},mounted:function(){var n=this.getElement();this.toastsInstance=new o.Toast(n)},created:function(){const o=this;null!=this.props.show_on&&this.props.show_on.split(",").forEach((e=>n.eventHub.$on(e.trim(),o.show)));null!=this.props.hide_on&&this.props.hide_on.split(",").forEach((e=>n.eventHub.$on(e.trim(),o.hide)));null!=this.props.dispose_on&&this.props.dispose_on.split(",").forEach((e=>n.eventHub.$on(e.trim(),o.dispose)))},beforeUnmount:function(){const o=this;(n.eventHub.$off(this.props.show_on,o.show),n.eventHub.$off(this.props.hide_on,o.hide),n.eventHub.$off(this.props.dispose_on,o.hide),null!=this.props.show_on)&&this.props.show_on.split(",").forEach((e=>n.eventHub.$off(e.trim(),o.show)));null!=this.props.hide_on&&this.props.hide_on.split(",").forEach((e=>n.eventHub.$off(e.trim(),o.hide)));null!=this.props.dispose_on&&this.props.dispose_on.split(",").forEach((e=>n.eventHub.$off(e.trim(),o.dispose)))}},r={mixins:[n.componentMixin],template:n.componentHelpers.inlineTemplate,data:()=>({}),methods:{},mounted:function(){var n=this.getElement();this.tooltipInstance=new o.Tooltip(n)}},c={mixins:[n.componentMixin],template:n.componentHelpers.inlineTemplate,data:()=>({sidebarOpen:!1}),methods:{sidebarToggle:function(){document.getElementById("sidebar").classList.contains("closed")?this.openSideBar():this.closeSideBar()},openSideBar:function(){var o=document.getElementById("sidebar"),n=document.getElementById("content");this.sidebarOpen=!0,o.classList.remove("closed"),o.classList.add("open"),n.classList.add("sidebar-open")},closeSideBar:function(){var o=document.getElementById("sidebar"),n=document.getElementById("content");this.sidebarOpen=!1,o.classList.add("closed"),o.classList.remove("open"),n.classList.remove("sidebar-open")},resizeCallback:function(){window.innerWidth<=992?this.closeSideBar():this.openSideBar()}},mounted:function(){window.innerWidth<=992&&(this.sidebarOpen=!0),window.addEventListener("resize",this.resizeCallback);var o=this;n.eventHub.$on("page_loaded",(function(){window.innerWidth<=992&&o.closeSideBar()})),n.eventHub.$on("page_loading_triggered",(function(){window.innerWidth<=992&&o.closeSideBar()}))}},d={registerComponents:function(o){return o.component("matestack-ui-bootstrap-alert",e),o.component("matestack-ui-bootstrap-carousel",t),o.component("matestack-ui-bootstrap-collapse",s),o.component("matestack-ui-bootstrap-dropdown",i),o.component("matestack-ui-bootstrap-modal",p),o.component("matestack-ui-bootstrap-popover",a),o.component("matestack-ui-bootstrap-toast",l),o.component("matestack-ui-bootstrap-tooltip",r),o.component("matestack-ui-bootstrap-sidebar",c),o}};window.MatestackUiBootstrap=d;export{d as default};

data/dist/stylesheets/matestack-ui-bootstrap.css

@@ -0,0 +1,98 @@
+.matestack-page-container .matestack-page-wrapper {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+.matestack-page-container .matestack-page-wrapper.loading {
+  opacity: 0;
+}
+.matestack-page-container .loading-state-element-wrapper {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+.matestack-page-container .loading-state-element-wrapper.loading {
+  opacity: 1;
+}
+
+.matestack-async-component-container {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+.matestack-async-component-container.loading {
+  opacity: 0;
+}
+
+.matestack-isolated-component-container {
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+.matestack-isolated-component-container.loading {
+  opacity: 0;
+}
+
+.matestack-app-wrapper {
+  overflow-x: hidden;
+}
+
+.content-wrapper {
+  position: relative;
+  z-index: 1;
+  min-height: 101vh;
+  transition: 0.5s;
+}
+@media (max-width: 992px) {
+  .content-wrapper.sidebar-open {
+    margin-left: -300px;
+  }
+}
+
+.sidebar-wrapper {
+  position: relative;
+  z-index: 10;
+  transition: 0.5s;
+  flex-grow: 0; /* do not grow   - initial value: 0 */
+  flex-shrink: 0; /* do not shrink - initial value: 1 */
+  flex-basis: 300px; /* width/height  - initial value: auto */
+}
+.sidebar-wrapper .sidebar-toggler {
+  transition: 0.5s;
+  position: relative;
+  left: 290px;
+}
+.sidebar-wrapper.closed {
+  margin-left: -300px;
+}
+.sidebar-wrapper.open {
+  margin-left: 0px;
+}
+@media (max-width: 992px) {
+  .sidebar-wrapper {
+    margin-left: -300px;
+  }
+  .sidebar-wrapper.open {
+    margin-left: 0px;
+  }
+}
+.sidebar-wrapper .sidebar {
+  min-height: 100vh;
+  height: 100%;
+}
+.sidebar-wrapper .sidebar .sidebar-top {
+  margin-top: -35px;
+}
+.sidebar-wrapper .sidebar .sidebar-top a {
+  text-decoration: none;
+}
+.sidebar-wrapper .sidebar .list-group-item.active {
+  margin-top: 0px !important;
+}
+.sidebar-wrapper .sidebar .list-group-item.active-child {
+  color: var(--bs-white);
+  background-color: var(--bs-primary);
+}
+
+.smart-collection .pagination .page-item {
+  cursor: pointer;
+}
+.smart-collection .pagination .page-item.disabled {
+  cursor: initial;
+}

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

@@ -17,6 +17,7 @@ class Matestack::Ui::Bootstrap::Components::Modal < Matestack::Ui::Bootstrap::Ba
   optional :static, :keyboard, :scrollable, :centered
   optional :modal_dialog_class
   optional :id
+  optional class: { as:  :bs_class }
   # event trigger
   optional :toggle_on, :show_on, :hide_on, :handle_update_on, :dispose_on
 

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

@@ -0,0 +1,70 @@
+import * as bootstrap from 'bootstrap'
+import MatestackUiVueJs from 'matestack-ui-vuejs'
+
+const offcanvasComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
+
+  data() {
+    return {
+      offcanvasInstance: undefined,
+    };
+  },
+
+  methods: {
+    toggle: function (){
+      this.offcanvasInstance.toggle()
+    },
+    show: function (){
+      this.offcanvasInstance.show()
+    },
+    hide: function (){
+      this.offcanvasInstance.hide()
+    }
+  },
+
+  mounted: function() {
+    const self = this
+    const offcanvasElement = self.getElement()
+    self.offcanvasInstance = new bootstrap.Offcanvas(offcanvasElement)
+  },
+
+  created: function() {
+    const self = this
+    var eventHub = MatestackUiVueJs.eventHub;
+    // toggle_on event registration
+    if(self.props["toggle_on"] != undefined){
+      var toggle_events = self.props["toggle_on"].split(",")
+      toggle_events.forEach(toggle_event => 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 => 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 => eventHub.$on(hide_event.trim(), self.hide));
+    }
+  },
+
+  beforeUnmount: function() {
+    const self = this
+    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));
+    }
+    if(self.props["show_on"] != undefined){
+      var show_events = self.props["show_on"].split(",")
+      show_events.forEach(show_event => 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 => eventHub.$off(hide_event.trim(), self.hide));
+    }
+  },
+}
+
+export default offcanvasComponent

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

@@ -0,0 +1,61 @@
+require_relative "../base_vue_js_component"
+
+class Matestack::Ui::Bootstrap::Components::Offcanvas < Matestack::Ui::Bootstrap::BaseVueJsComponent
+
+  vue_name 'matestack-ui-bootstrap-offcanvas'
+
+  optional :id
+  optional class: { as:  :bs_class }
+  optional :placement # start, end, top, bottom - default: start
+  optional :scroll # true, false - default: false
+  optional :backdrop # true, false - default: true
+  optional :static_title # any string - default: ""
+
+  optional :toggle_on, :show_on, :hide_on, :handle_update_on, :dispose_on
+
+
+  def response
+    div offcanvas_attributes do
+      div class: "offcanvas-header" do
+        h5 class:"offcanvas-title", id: "#{context.id}Label", text: "#{context.static_title}"
+        button type: "button", class:"btn-close", "data-bs-dismiss": "offcanvas", "aria-label": "Close"
+      end
+      div class:"offcanvas-body" do
+        yield
+      end
+    end
+  end
+
+  protected
+
+  def offcanvas_attributes
+    attributes = {}.tap do |hash|
+      hash[:id] = context.id
+      hash[:class] = offcanvas_classes
+      hash[:attributes] = { 'tabindex': "-1", 'aria-labelledby': "#{context.id}Label" }
+      hash[:data] = {}.tap do |data|
+        data["bs-scroll"] = "#{context.scroll&.to_s || "false"}"
+        data["bs-backdrop"] = "#{context.backdrop&.to_s || "true"}"
+      end
+    end
+    options.merge(
+      attributes
+    )
+  end
+
+  def offcanvas_classes
+    [].tap do |classes|
+      classes << "offcanvas offcanvas-#{context.placement || 'start'}"
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+
+  def vue_props
+    {}.tap do |props|
+      props[:toggle_on] = context.toggle_on
+      props[:show_on] = context.show_on
+      props[:hide_on] = context.hide_on
+    end
+  end
+
+end

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

@@ -10,6 +10,7 @@ import carouselComponent from './components/carousel'
 import collapseComponent from './components/collapse'
 import dropdownComponent from './components/dropdown'
 import modalComponent from './components/modal'
+import offcanvasComponent from './components/offcanvas'
 import popoverComponent from './components/popover'
 import toastComponent from './components/toast'
 import tooltipComponent from './components/tooltip'
@@ -23,6 +24,7 @@ const registerComponents = function(appInstance){
   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-offcanvas', offcanvasComponent)
   appInstance.component('matestack-ui-bootstrap-popover', popoverComponent)
   appInstance.component('matestack-ui-bootstrap-toast', toastComponent)
   appInstance.component('matestack-ui-bootstrap-tooltip', tooltipComponent)

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

@@ -64,8 +64,8 @@ module Matestack::Ui::Bootstrap::Registry
     Matestack::Ui::Bootstrap::Components::Navbar.(text, options, &block)
   end
 
-  def bs_pagination(text=nil, options=nil, &block)
-    Matestack::Ui::Bootstrap::Components::Pagination.(text, options, &block)
+  def bs_offcanvas(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Offcanvas.(text, options, &block)
   end
 
   def bs_page_heading(text=nil, options=nil, &block)

data/lib/matestack/ui/bootstrap/stylesheets/matestack-ui-bootstrap.scss

@@ -54,7 +54,6 @@
 
 .content-wrapper{
   position: relative;
-  z-index: 1;
   min-height: 101vh;
   transition: 0.5s;
   &.sidebar-open{

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

@@ -1,7 +1,7 @@
 module Matestack
   module Ui
     module Bootstrap
-      VERSION = '3.1.0'
+      VERSION = '3.2.0.beta1'
     end
   end
 end

data/lib/matestack/ui/bootstrap.rb

@@ -72,6 +72,7 @@ require "#{base_path}/components/popover"
 require "#{base_path}/components/badge"
 require "#{base_path}/components/button_group"
 require "#{base_path}/components/icon"
+require "#{base_path}/components/offcanvas"
 
 module Matestack
   module Ui

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: matestack-ui-bootstrap
 version: !ruby/object:Gem::Version
-  version: 3.1.0
+  version: 3.2.0.beta1
 platform: ruby
 authors:
 - Jonas Jabari
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-06-06 00:00:00.000000000 Z
+date: 2022-06-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: matestack-ui-core
@@ -30,14 +30,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.1.0
+        version: 3.2.0.beta.pre.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 3.1.0
+        version: 3.2.0.beta.pre.1
 description: Bootstrap v5 components for Matestack UI
 email:
 - jonas@matestack.io
@@ -48,6 +48,8 @@ files:
 - LICENSE
 - README.md
 - Rakefile
+- dist/matestack-ui-bootstrap.esm.js
+- dist/stylesheets/matestack-ui-bootstrap.css
 - lib/matestack/ui/bootstrap.rb
 - lib/matestack/ui/bootstrap/base_component.rb
 - lib/matestack/ui/bootstrap/base_vue_js_component.rb
@@ -72,6 +74,8 @@ files:
 - lib/matestack/ui/bootstrap/components/modal.js
 - lib/matestack/ui/bootstrap/components/modal.rb
 - lib/matestack/ui/bootstrap/components/navbar.rb
+- lib/matestack/ui/bootstrap/components/offcanvas.js
+- lib/matestack/ui/bootstrap/components/offcanvas.rb
 - lib/matestack/ui/bootstrap/components/page_heading.rb
 - lib/matestack/ui/bootstrap/components/pagination.rb
 - lib/matestack/ui/bootstrap/components/popover.js
@@ -127,9 +131,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.2.15
 signing_key: