matestack-ui-bootstrap 1.5.1 → 2.0.0

data/{app/concepts → lib}/matestack/ui/bootstrap/components/modal.js

@@ -1,6 +1,9 @@
 import * as bootstrap from 'bootstrap'
+import Vue from 'vue/dist/vue.esm'
 
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-modal', {
+import MatestackUiCore from 'matestack-ui-core'
+
+Vue.component('matestack-ui-bootstrap-modal', {
   mixins: [MatestackUiCore.componentMixin],
 
   data() {
@@ -37,28 +40,28 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-modal', {
     const self = this
     var eventHub = MatestackUiCore.matestackEventHub;
     // toggle_on event registration
-    if(self.componentConfig["toggle_on"] != undefined){
-      var toggle_events = self.componentConfig["toggle_on"].split(",")
+    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.componentConfig["show_on"] != undefined){
-      var show_events = self.componentConfig["show_on"].split(",")
+    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.componentConfig["hide_on"] != undefined){
-      var hide_events = self.componentConfig["hide_on"].split(",")
+    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));
     }
     // handle_update_on event registration
-    if(self.componentConfig["handle_update_on"] != undefined){
-      var handle_update_events = self.componentConfig["handle_update_on"].split(",")
+    if(self.props["handle_update_on"] != undefined){
+      var handle_update_events = self.props["handle_update_on"].split(",")
       handle_update_events.forEach(handle_update_event => eventHub.$on(handle_update_event.trim(), self.handle_update));
     }
     // dispose_on event registration
-    if(self.componentConfig["dispose_on"] != undefined){
-      var dispose_events = self.componentConfig["dispose_on"].split(",")
+    if(self.props["dispose_on"] != undefined){
+      var dispose_events = self.props["dispose_on"].split(",")
       dispose_events.forEach(dispose_event => eventHub.$on(dispose_event.trim(), self.dispose));
     }
   },
@@ -66,24 +69,24 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-modal', {
   beforeDestroy: function() {
     const self = this
     var eventHub = MatestackUiCore.matestackEventHub;
-    if(self.componentConfig["toggle_on"] != undefined){
-      var toggle_events = self.componentConfig["toggle_on"].split(",")
+    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.componentConfig["show_on"] != undefined){
-      var show_events = self.componentConfig["show_on"].split(",")
+    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.componentConfig["hide_on"] != undefined){
-      var hide_events = self.componentConfig["hide_on"].split(",")
+    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));
     }
-    if(self.componentConfig["handle_update_on"] != undefined){
-      var handle_update_events = self.componentConfig["handle_update_on"].split(",")
+    if(self.props["handle_update_on"] != undefined){
+      var handle_update_events = self.props["handle_update_on"].split(",")
       handle_update_events.forEach(handle_update_event => eventHub.$off(handle_update_event.trim(), self.handle_update));
     }
-    if(self.componentConfig["dispose_on"] != undefined){
-      var dispose_events = self.componentConfig["dispose_on"].split(",")
+    if(self.props["dispose_on"] != undefined){
+      var dispose_events = self.props["dispose_on"].split(",")
       dispose_events.forEach(dispose_event => eventHub.$off(dispose_event.trim(), self.dispose));
     }
   },

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

@@ -0,0 +1,121 @@
+require_relative "../base_vue_js_component"
+
+class Matestack::Ui::Bootstrap::Components::Modal < Matestack::Ui::Bootstrap::BaseVueJsComponent
+  vue_name 'matestack-ui-bootstrap-modal'
+
+  # header attributes, expects a hash or string
+  # possible keys `:class, :text, :size`
+  optional :header
+  # body attributes, expects a hash or string
+  # possible keys `:class, :text`
+  optional :body
+  # footer is a dismiss button, expects a hash or string for button text
+  # possible keys `:class, :text`
+  optional :footer
+  optional :fade, :size
+  optional :fullscreen # fullscreen attribute, expects boolean or bootstrap breakpoint
+  optional :static, :keyboard, :scrollable, :centered
+  optional :modal_dialog_class
+  optional :id
+  # event trigger
+  optional :toggle_on, :show_on, :hide_on, :handle_update_on, :dispose_on
+
+
+
+  def response
+    div modal_attributes do
+      div class: dialog_classes do
+        div class: "modal-content" do
+          header_partial if context.header || (slots && slots[:header])
+          body_partial if context.body || slots && slots[:body]
+          footer_partial if context.footer || (slots && slots[:footer])
+          yield if block_given?
+        end
+      end
+    end
+  end
+
+  protected
+
+  def vue_props
+    {}.tap do |props|
+      props[:toggle_on] = context.toggle_on
+      props[:show_on] = context.show_on
+      props[:hide_on] = context.hide_on
+      props[:handle_update_on] = context.handle_update_on
+      props[:dispose_on] = context.dispose_on
+    end
+  end
+
+  def header_partial
+    header = context.header.is_a?(Hash) ? context.header : { text: context.header }
+    div class: "modal-header" do
+      if slots && slots[:header]
+        slot :header
+      else
+        heading header[:text], size: (header[:size] || 5), class: "modal-title #{header[:class]}" if header[:text].present?
+        bs_close dismiss: 'modal'
+      end
+    end
+  end
+
+  def body_partial
+    body = context.body.is_a?(Hash) ? context.body : { text: context.body }
+    div class: "modal-body #{body[:class]}".strip do
+      if slots && slots[:body]
+        slot :body
+      else
+        plain body[:text] if body[:text].present?
+      end
+    end
+  end
+
+  def footer_partial
+    footer = context.footer.is_a?(Hash) ? context.footer : { text: context.footer }
+    div class: "modal-footer" do
+      slot :footer if slots && slots[:footer]
+      if footer[:text].present?
+        button class: "btn #{footer[:class].present? ? footer[:class] : 'btn-secondary'}",
+          data: { "bs-dismiss": 'modal' }, type: 'button' do
+            plain footer[:text]
+          end
+      end
+    end
+  end
+
+  def modal_attributes
+    attributes = {}.tap do |hash|
+      hash[:id] = context.id
+      hash[:class] = modal_classes
+      hash[:attributes] = { 'tabindex': "-1", 'aria-labelledby': "#{context.id}Label", 'aria-hidden': "true" }
+      hash[:data] = {}.tap do |data|
+        data[:backdrop] = "static" if context.static
+        data[:keyboard] = "false" if context.keyboard
+      end
+    end
+    options.merge(
+      attributes
+    )
+  end
+
+  def modal_classes
+    [].tap do |classes|
+      classes << 'modal'
+      classes << 'fade' if context.fade || !context.fade.present?
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+
+  def dialog_classes
+    [].tap do |classes|
+      classes << 'modal-dialog'
+      classes << 'modal-dialog-centered' if context.centered
+      classes << 'modal-dialog-scrollable' if context.scrollable
+      classes << "modal-#{context.size}" if context.size
+      if context.fullscreen.present?
+        classes << (context.fullscreen == true ? 'modal-fullscreen' : "modal-fullscreen-#{context.fullscreen}-down")
+      end
+      classes << context.modal_dialog_class
+    end.join(' ').strip
+  end
+end

data/{app/concepts → lib}/matestack/ui/bootstrap/components/navbar.rb

@@ -1,9 +1,11 @@
-class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Bootstrap::BaseComponent
 
   POS_ATTRIBUTES = %i[fixed_top fixed_bottom sticky_top]
   optional *POS_ATTRIBUTES
 
-  optional class: { as: :bs_class }
+  optional class: { as:  :bs_class }
   optional :items, :items_class, :theme, :expand_at, :color, :container_size
   optional :collapse_class
   # brand expect hash or string, possible keys for hash: text, path, img
@@ -12,21 +14,22 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
   # possible keys for hash: position, class
   optional :toggle
 
+
   def prepare
-    @toggle = self.toggle.is_a?(Hash) ? self.toggle : { position: self.toggle }
+    @toggle = context.toggle.is_a?(Hash) ? context.toggle : { position: context.toggle }
   end
 
-  def response
+  def response(&block)
     nav navbar_attributes do
-      bs_container size: "#{container_size.present? ? container_size : "fluid" }" do
+      bs_container size: "#{context.container_size.present? ? context.container_size : "fluid" }" do
         # custom elements for navbar
-        if options[:slots] && options[:slots][:custom_items]
-          slot options[:slots][:custom_items]
+        if slots && slots[:custom_items]
+          slot :custom_items
         else
           toggle_button if @toggle[:position] == :left
           brand_partial
           toggle_button if !@toggle[:position].present? || @toggle[:position] == :right
-          navbar_content_partial
+          navbar_content_partial(&block)
         end
       end
     end
@@ -35,51 +38,57 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
   protected
 
   def brand_partial
-    brand = self.brand.is_a?(Hash) ? self.brand : { text: self.brand }
+    brand = context.brand.is_a?(Hash) ? context.brand : { text: context.brand }
     path = brand[:path].present? ? brand[:path] : "/"
     brand[:path] = path
     case brand[:type]
     when :link
-      link brand.except(:text).merge(class: "navbar-brand") do
-        img height: 40, path: brand[:img], attributes: { loading: "lazy" } if brand[:img].present?
+      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
     else
       transition brand.except(:text).merge(class: "navbar-brand") do
-        img height: 40, path: brand[:img], attributes: { loading: "lazy" } if brand[:img].present?
+        img height: 40, path: brand[:img], loading: "lazy" if brand[:img].present?
         plain brand[:text]
       end
     end
   end
 
-  def navbar_content_partial
-    div class: "collapse navbar-collapse #{collapse_class}", id: 'matestackNavbarContent' do
-      if items.present?
+  def navbar_content_partial(&block)
+    div class: "collapse navbar-collapse #{context.collapse_class}", id: 'matestackNavbarContent' do
+      if context.items.present?
         ul class: items_classes do
-          items.each do |item|
+          context.items.each do |item|
             li class: "nav-item" do
               case item[:type]
               when :link
-                link link_config(item)  do
+                a link_config(item)  do
                   bs_icon name: item[:icon], size: 20 if item[:icon]
-                  span class: "ps-3", text: item[:text] if item[:text]
+                  span class: "ps-3" do
+                    plain item[:text] if item[:text]
+                  end
                 end
               when :action
                 action action_config(item) do
                   bs_icon name: item[:icon], size: 20 if item[:icon]
-                  span class: "ps-3", text: item[:text] if item[:text]
+                  span class: "ps-3" do
+                    plain item[:text] if item[:text]
+                  end
                 end
               else
                 transition transition_config(item) do
                   bs_icon name: item[:icon], size: 20 if item[:icon]
-                  span class: "ps-3", text: item[:text] if item[:text]
+                  span class: "ps-3" do
+                    plain item[:text] if item[:text]
+                  end
                 end
               end
             end
           end
         end
       end
-      yield_components
+      yield if block_given?
     end
   end
 
@@ -102,7 +111,7 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
   end
 
   def navbar_attributes
-    html_attributes.merge(
+    options.merge(
       class: navbar_classes
     )
   end
@@ -111,12 +120,12 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
     [].tap do |classes|
       classes << "navbar"
       POS_ATTRIBUTES.each do |pos|
-        classes << "#{pos}".gsub('_','-') if self.send("#{pos}")
+        classes << "#{pos}".gsub('_','-') if context.send("#{pos}")
       end
-      classes << "navbar-expand-#{ (expand_at.present? ? expand_at : "lg") }"
-      classes << "navbar-#{theme}" if  theme.present?
-      classes << (color.present? ? "bg-#{color}" : "bg-#{theme}") if theme || color
-      classes << bs_class
+      classes << "navbar-expand-#{ (context.expand_at.present? ? context.expand_at : "lg") }"
+      classes << "navbar-#{context.theme}" if  context.theme.present?
+      classes << (context.color.present? ? "bg-#{context.color}" : "bg-#{context.theme}") if context.theme || context.color
+      classes << context.bs_class
     end.join(' ').strip
   end
 
@@ -147,7 +156,7 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
   def items_classes
     [].tap do |classes|
       classes << 'navbar-nav'
-      classes << (items_class.present? ? items_class : "ms-auto mb-2 mb-lg-0")
+      classes << (context.items_class.present? ? context.items_class : "ms-auto mb-2 mb-lg-0")
       # classes << "ms-auto" unless items_class.present?
     end.join(' ').strip
   end

data/{app/concepts → lib}/matestack/ui/bootstrap/components/page_heading.rb

@@ -1,4 +1,6 @@
-class Matestack::Ui::Bootstrap::Components::PageHeading < Matestack::Ui::Component
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::PageHeading < Matestack::Ui::Bootstrap::BaseComponent
 
   optional :title, :subtitle, :icon
 
@@ -8,17 +10,17 @@ class Matestack::Ui::Bootstrap::Components::PageHeading < Matestack::Ui::Compone
         bs_col do
           div class: "page-heading-heading" do
             heading size: 2 do
-              bs_icon name: icon, size: "35" if icon.present?
-              plain title
+              bs_icon name: context.icon, size: "35" if context.icon.present?
+              plain context.title
             end
             heading size: 6, class: "text-muted" do
-              plain subtitle
+              plain context.subtitle
             end
           end
         end
         bs_col md: 12, xl: 4, class: "text-xl-end mt-3" do
           div class: "page-heading-actions text-xl-end" do
-            yield_components
+            yield if block_given?
           end
         end
       end

data/{app/concepts → lib}/matestack/ui/bootstrap/components/pagination.rb

@@ -1,23 +1,25 @@
-class Matestack::Ui::Bootstrap::Components::Pagination < Matestack::Ui::Component
+require_relative "../base_component"
 
-  optional :aria_label, :size, class: { as: :bs_class }
+class Matestack::Ui::Bootstrap::Components::Pagination < Matestack::Ui::Bootstrap::BaseComponent
+
+  optional :aria_label, :size
   optional :items
 
   def response
     nav pagination_attributes do
       ul class: ul_classes do
-        if items.present?
-          items.each do |item|
+        if context.items.present?
+          context.items.each do |item|
             li class: "page-item #{ 'active' if item[:active] }" do
               if item[:type] == :link
-                link item.merge({ class: 'page-link' })
+                a item.merge({ class: 'page-link' })
               else
                 transition item.merge({ class: 'page-link' })
               end
             end
           end
         end
-        yield_components
+        yield if block_given?
       end
     end
   end
@@ -25,15 +27,15 @@ class Matestack::Ui::Bootstrap::Components::Pagination < Matestack::Ui::Componen
   protected
 
   def pagination_attributes
-    html_attributes.merge(
-      attributes: { 'aria-label': "#{aria_label || 'Page navigation'}" }
+    options.merge(
+      'aria-label': "#{context.aria_label || 'Page navigation'}"
     )
   end
 
   def ul_classes
     [].tap do |classes|
       classes << "pagination"
-      classes << "pagination-#{size}" if size.present?
+      classes << "pagination-#{context.size}" if context.size.present?
     end.join(' ').strip
   end
 

data/{app/concepts → lib}/matestack/ui/bootstrap/components/popover.js

@@ -1,6 +1,9 @@
 import * as bootstrap from 'bootstrap'
+import Vue from 'vue/dist/vue.esm'
 
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-popover', {
+import MatestackUiCore from 'matestack-ui-core'
+
+Vue.component('matestack-ui-bootstrap-popover', {
 
   mixins: [MatestackUiCore.componentMixin],
   data() {

data/{app/concepts → lib}/matestack/ui/bootstrap/components/popover.rb

@@ -1,5 +1,7 @@
-class Matestack::Ui::Bootstrap::Components::Popover < Matestack::Ui::VueJsComponent
-  vue_js_component_name "matestack-ui-bootstrap-popover"
+require_relative "../base_vue_js_component"
+
+class Matestack::Ui::Bootstrap::Components::Popover < Matestack::Ui::Bootstrap::BaseVueJsComponent
+  vue_name "matestack-ui-bootstrap-popover"
 
   # How i imagine using a popover
   #
@@ -26,16 +28,16 @@ class Matestack::Ui::Bootstrap::Components::Popover < Matestack::Ui::VueJsCompon
   DATA_ALIAS_ATTRIBUTES = %i[container delay selector html template fallback_placement]
 
   DATA_ALIAS_ATTRIBUTES.each do |attribute|
-    optional "#{attribute}": { as: :"bs_#{attribute}"}
+    optional :"#{attribute}"
   end
 
   # TODO:
   # for security reasons the sanitize, sanitizeFn and whiteList options cannot be supplied using data attributes.
   # sanitize sanitize_fn white_list
 
-  optional class: { as: :bs_class }
+  optional class: { as:  :bs_class }
   optional id: { as: :bs_id }
-  DATA_ATTRIBUTES = %i[tag content title text variant animation placement tabindex trigger boundary offset popper_config]
+  DATA_ATTRIBUTES = %i[tag content title variant animation placement tabindex trigger boundary offset popper_config]
   optional *DATA_ATTRIBUTES
   # :tag # different element to apply: div, span, links, button, ...
   # :content, :title # popover title and content strings
@@ -43,49 +45,51 @@ class Matestack::Ui::Bootstrap::Components::Popover < Matestack::Ui::VueJsCompon
   # :variant, :text # button styling & text
   # :placement # placement direction as string
 
-  def response
-    if tag.present?
-      public_send(tag, popover_attributes) do
-        content_partial
+  def response(&block)
+    if context.tag.present?
+      public_send(context.tag, popover_attributes) do
+        content_partial(&block)
       end
     else
       bs_btn popover_attributes do
-        content_partial
+        content_partial(&block)
       end
     end
   end
 
   protected
 
-  def content_partial
-    plain text if text
-    yield_components unless text
+  def content_partial(&block)
+    plain context.text if context.text
+    yield if block_given? unless context.text
   end
 
   def popover_attributes
     attributes = {}.tap do |hash|
       hash[:class] = popover_classes
-      hash[:attributes] = { role: (text ? 'button': nil), title: "#{title}", tabindex: "#{tabindex}" }
+      hash[:role] = (context.text ? 'button': nil)
+      hash[:title] = "#{context.title}"
+      hash[:tabindex] = "#{context.tabindex}"
       hash[:data] = {}.tap do |data|
         DATA_ALIAS_ATTRIBUTES.each do |attribute|
-          data["bs-#{attribute}"] = self.send(:"bs_#{attribute}") if self.send(:"bs_#{attribute}")
+          data["bs-#{attribute}"] = context.send("#{attribute}") if context.send("#{attribute}")
         end
         (DATA_ATTRIBUTES - [:tag, :text, :variant]).each do |attribute|
-          data["bs-#{attribute}"] = self.send(:"#{attribute}") if self.send(:"#{attribute}")
+          data["bs-#{attribute}"] = context.send("#{attribute}") if context.send("#{attribute}")
         end
         data["bs-toggle"] = "popover"
       end
     end
-    html_attributes.merge(
-      attributes
+    options.merge(
+      attributes || {}
     )
   end
 
   def popover_classes
     [].tap do |classes|
-      classes << "d-inline-block" unless text
-      classes << "btn btn-#{variant}" if variant
-      classes << bs_class
+      classes << "d-inline-block" unless context.text
+      classes << "btn btn-#{context.variant}" if context.variant
+      classes << context.bs_class
     end.join(' ').strip
   end