matestack-ui-bootstrap 3.1.2 → 3.2.0.beta1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: de594c45ae1893c59fa7bd32facd82ed54b446771c432ad1265153ce6603d28e
-  data.tar.gz: 30094bc99f948a96d5bef2853c9f0e4092d5230821bcabae9ae7a50999f7e396
+  metadata.gz: 4e2e524d1b06bb253accbeffe605bf69d001d2da8cdffd908bd73ff0b5310443
+  data.tar.gz: a2f16babea258baccc4c020dec5922ba38342928f0d51369f7524c02e54c17fc
 SHA512:
-  metadata.gz: 6a36a3c8e36ca4448d9d3f07f5e5b85500518eb4980e3c2aa1ee9b3b4bd7deef73ae2f667215a967dd5c251695b554e210a444a8848ede80dade5e8f8ebb0b19
-  data.tar.gz: 3c2ca65d26f4ce1b8ec52eb7a6bfc1f8c4a0d32047433a4e3708b245def8f8143e78410e0d812569ca1557a1ae9c1a333c8d7e57eefa6736ad554ae90c5fc6af
+  metadata.gz: ddee9d2f3f7468773bedffcf320dddd4ea812c3e95dbe72d0ac254154c5d62f5f8b5a37ec2ca65722d74ec2e98c8fc775e35407d2d755c8a41ca40a41bc13419
+  data.tar.gz: 99469b732c22cf31eb20acc73d68eefaf3f5670c67607928996a9f73cf080458b87b1d2face5940df1739ada0c7ca33157cf2da5a07fbc6821f8a73aa3185b26

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.2'
+      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.2
+  version: 3.2.0.beta1
 platform: ruby
 authors:
 - Jonas Jabari
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-06-08 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
@@ -74,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
@@ -129,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: