matestack-ui-bootstrap 1.4.0 → 1.5.0

data/app/concepts/matestack/ui/bootstrap/components/modal.rb

@@ -63,7 +63,7 @@ class Matestack::Ui::Bootstrap::Components::Modal < Matestack::Ui::VueJsComponen
       slot slots[:footer] if slots && slots[:footer]
       if footer[:text].present?
         button class: "btn #{footer[:class].present? ? footer[:class] : 'btn-secondary'}",
-          data: { dismiss: 'modal' }, attributes: { type: 'button' },
+          data: { "bs-dismiss": 'modal' }, attributes: { type: 'button' },
           text: footer[:text]
       end
     end

data/app/concepts/matestack/ui/bootstrap/components/navbar.rb

@@ -4,7 +4,7 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
   optional *POS_ATTRIBUTES
 
   optional class: { as: :bs_class }
-  optional :items, :items_class, :theme, :hide_at, :color, :container_size
+  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
   optional :brand
@@ -37,26 +37,43 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
   def brand_partial
     brand = self.brand.is_a?(Hash) ? self.brand : { text: self.brand }
     path = brand[:path].present? ? brand[:path] : "/"
-    link class: "navbar-brand", path: path do
-      img height: 40, path: brand[:img], attributes: { loading: "lazy" } if brand[:img].present?
-      plain brand[:text]
+    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?
+        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?
+        plain brand[:text]
+      end
     end
   end
 
   def navbar_content_partial
     div class: "collapse navbar-collapse #{collapse_class}", id: 'matestackNavbarContent' do
-      ul class: items_classes do
-        items.each do |item|
-          li class: "nav-item" do
-            if item[:type] == :link
-              link class: "nav-link", path: item[:path] do
-                bs_icon name: item[:icon], size: 20 if item[:icon]
-                span class: "ps-3", text: item[:text] if item[:text]
-              end
-            else
-              transition class: "nav-link", path: item[:path], delay: item[:delay] do
-                bs_icon name: item[:icon], size: 20 if item[:icon]
-                span class: "ps-3", text: item[:text] if item[:text]
+      if items.present?
+        ul class: items_classes do
+          items.each do |item|
+            li class: "nav-item" do
+              case item[:type]
+              when :link
+                link link_config(item)  do
+                  bs_icon name: item[:icon], size: 20 if item[:icon]
+                  span class: "ps-3", text: item[:text] if item[:text]
+                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]
+                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]
+                end
               end
             end
           end
@@ -66,6 +83,24 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
     end
   end
 
+  def link_config(item)
+    config = item.except(:text)
+    config[:class] = "nav-link"
+    config
+  end
+
+  def transition_config(item)
+    config = item.except(:text)
+    config[:class] = "nav-link"
+    config
+  end
+
+  def action_config(item)
+    config = item.except(:text)
+    config[:class] = "nav-link"
+    config
+  end
+
   def navbar_attributes
     html_attributes.merge(
       class: navbar_classes
@@ -78,7 +113,7 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
       POS_ATTRIBUTES.each do |pos|
         classes << "#{pos}".gsub('_','-') if self.send("#{pos}")
       end
-      classes << "navbar-expand-#{ (hide_at.present? ? hide_at : "lg") }"
+      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
@@ -96,8 +131,7 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
 
   def toggle_attributes
     toggle_classes = [].tap do |classes|
-      classes << 'd-lg-none'
-      classes << 'btn btn-link'
+      classes << 'btn btn-link navbar-toggler'
       classes << "ms-auto" if @toggle[:position] == :right
       classes << "me-auto" if @toggle[:position] == :left
       classes << @toggle[:class] if @toggle[:class]
@@ -105,7 +139,7 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
 
     {}.tap do |hash|
       hash[:class] = toggle_classes
-      hash[:data] = { toggle: 'collapse', target: '#matestackNavbarContent' }
+      hash[:data] = { "bs-toggle": 'collapse', "bs-target": '#matestackNavbarContent' }
       hash[:attributes] = { 'aria-controls': 'matestackNavbarContent', 'aria-expanded': 'false', 'aria-label': 'Toggle navigation' }
     end
   end

data/app/concepts/matestack/ui/bootstrap/components/pagination.rb

@@ -1,18 +1,18 @@
 class Matestack::Ui::Bootstrap::Components::Pagination < Matestack::Ui::Component
-  
+
   optional :aria_label, :size, class: { as: :bs_class }
   optional :items
 
-  def response 
+  def response
     nav pagination_attributes do
       ul class: ul_classes do
         if items.present?
           items.each do |item|
             li class: "page-item #{ 'active' if item[:active] }" do
               if item[:type] == :link
-                link path: item[:path], text: item[:text], class: 'page-link'
+                link item.merge({ class: 'page-link' })
               else
-                transition path: item[:path], text: item[:text], class: 'page-link'
+                transition item.merge({ class: 'page-link' })
               end
             end
           end
@@ -37,4 +37,4 @@ class Matestack::Ui::Bootstrap::Components::Pagination < Matestack::Ui::Componen
     end.join(' ').strip
   end
 
-end
+end

data/app/concepts/matestack/ui/bootstrap/components/popover.rb

@@ -49,7 +49,7 @@ class Matestack::Ui::Bootstrap::Components::Popover < Matestack::Ui::VueJsCompon
         content_partial
       end
     else
-      btn popover_attributes do
+      bs_btn popover_attributes do
         content_partial
       end
     end

data/app/concepts/matestack/ui/bootstrap/components/progress.rb

@@ -1,18 +1,18 @@
 class Matestack::Ui::Bootstrap::Components::Progress < Matestack::Ui::Component
-  
+
   optional class: { as: :bs_class }
   optional :text, :valuemin, :valuemax
   # progress expects a number or a list containing hashes with at least a :value
   # other options are :text, :class, :variant, :striped, :animated, :aria_valuenow
   optional :progress
-  # :value
+  optional :value
   optional :variant, :striped, :animated, :height
 
-  def response 
+  def response
     div progress_attributes do
       progress = self.progress.is_a?(Array) ? self.progress : [{ value: self.progress || value, text: self.text }]
       progress.each do |prog|
-        progress_bar(prog[:value], valuemin, valuemax, 
+        progress_bar(prog[:value], valuemin, valuemax,
           text: prog[:text], klass: prog[:class], variant: prog[:variant] || variant,
           striped: prog[:striped] || striped, animated: prog[:animated] || animated,
           aria_valuenow: prog[:aria_valuenow]
@@ -27,7 +27,7 @@ class Matestack::Ui::Bootstrap::Components::Progress < Matestack::Ui::Component
   def progress_attributes
     attributes = {}.tap do |hash|
       hash[:class] = "progress #{bs_class}".strip
-      hash[:attributes] = { style: "height: #{height}px;" } if height 
+      hash[:attributes] = { style: "height: #{height}px;" } if height
     end
     html_attributes.merge(
       attributes
@@ -36,7 +36,7 @@ class Matestack::Ui::Bootstrap::Components::Progress < Matestack::Ui::Component
 
   def progress_bar(value, min, max, text: nil, klass: nil, variant: :primary, striped: false, animated: false, aria_valuenow: nil)
     div progress_bar_attributes(value, klass, variant, striped, animated, aria_valuenow) do
-      plain text if text      
+      plain text if text
     end
   end
 
@@ -62,4 +62,4 @@ class Matestack::Ui::Bootstrap::Components::Progress < Matestack::Ui::Component
       classes << klass
     end.join(' ').strip
   end
-end
+end

data/app/concepts/matestack/ui/bootstrap/components/scrollspy.rb

@@ -1,5 +1,7 @@
 class Matestack::Ui::Bootstrap::Components::Scrollspy < Matestack::Ui::Component
 
+  requires :height
+  
   optional :offset # pixel to offset from top, by default 10
   optional method: { as: :bs_method} # find which section, by default auto
   optional :target # scroll target id
@@ -19,12 +21,25 @@ class Matestack::Ui::Bootstrap::Components::Scrollspy < Matestack::Ui::Component
       hash[:data] = { "bs-spy": "scroll", "bs-target": "#{target}" }
       hash[:data].merge!("bs-offset": offset) if offset.present?
       hash[:data].merge!("bs-method": :"#{bs_method}") if bs_method.present?
+      hash[:style] = "overflow-y: scroll; position: relative;"
+      hash[:style] << "height: #{parsed_height};"
+      hash[:tabindex] = 0
     end
     html_attributes.merge(
       attributes
     )
   end
 
+  def parsed_height
+    if height.present?
+      if height.to_s.include?("px") || height.to_s.include?("em") || height.to_s.include?("rem")
+        height
+      else
+        "#{height}px"
+      end
+    end
+  end
+
   def scrollspy_classes
     [].tap do |classes|
       classes << bs_class

data/app/concepts/matestack/ui/bootstrap/components/spinner.rb

@@ -5,7 +5,7 @@ class Matestack::Ui::Bootstrap::Components::Spinner < Matestack::Ui::Component
 
   def response
     div spinner_attributes do
-      span class: "sr-only", text: sr_only
+      span class: "visually-hidden", text: sr_only
     end
   end
 

data/app/concepts/matestack/ui/bootstrap/components/tab_nav.rb

@@ -7,8 +7,10 @@ class Matestack::Ui::Bootstrap::Components::TabNav < Matestack::Ui::Component
             class: { as: :bs_class }, attributes: { as: :bs_attrs}
 
   def response
-    ul nav_attributes do
-      nav_items_partial if items.present?
+    if items.present?
+      ul nav_attributes do
+        nav_items_partial
+      end
     end
     div class: "tab-content", id: "#{id}Content" do
       yield_components

data/app/concepts/matestack/ui/bootstrap/components/toast.js

@@ -18,7 +18,13 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-toast', {
           self.showing = false;
         }, 5000);
       }
-      this.showing = true
+      if(this.componentConfig["delay"]){
+        setTimeout(function () {
+          self.showing = true;
+        }, parseInt(self.componentConfig["delay"]));
+      } else {
+        self.showing = true
+      }
       this.eventData = event
     },
     hide: function(event){

data/app/concepts/matestack/ui/bootstrap/components/tooltip.rb

@@ -11,48 +11,32 @@ class Matestack::Ui::Bootstrap::Components::Tooltip < Matestack::Ui::VueJsCompon
   # for security reasons the sanitize, sanitizeFn and whiteList options cannot be supplied using data attributes.
   # sanitize sanitize_fn white_list
   # optional :content
+  requires :tooltip_title
   optional :tag
   optional class: { as: :bs_class }
   optional id: { as: :bs_id }
-  DATA_ATTRIBUTES = %i[title text variant animation placement tabindex trigger boundary offset popper_config]
+  DATA_ATTRIBUTES = %i[text variant animation placement tabindex trigger boundary offset popper_config]
   optional *DATA_ATTRIBUTES
 
   def response
     case tag
     when :div
       div tooltip_attributes do
-        element_partial
+        yield_components
       end
-    when :span
-      span tooltip_attributes  do
-        element_partial
-      end
-    when :link
-      link tooltip_attributes
     else
-      bs_btn tooltip_attributes
+      span tooltip_attributes do
+        yield_components
+      end
     end
   end
 
   protected
 
-  def element_partial
-    if options[:slots] && options[:slots][:element]
-      slot options[:slots][:element]
-    else
-      bs_btn variant: variant, attributes: { 'style': "pointer-events: none;" }, text: text
-    end
-  end
-
   def tooltip_attributes
     attributes = {}.tap do |hash|
       hash[:class] = tooltip_classes
-      hash[:style] = variant if (tag == :button or !tag.present?)
-
-      hash[:attributes] = { role: "button", title: "#{title}", tabindex: "#{tabindex}" } if (tag == :link or tag == :a)
-
       hash[:text] = text if text.present?
-
       hash[:data] = {}.tap do |hash|
         DATA_ALIAS_ATTRIBUTES.each do |attribute|
           hash["bs-#{attribute}"] = self.send(:"bs_#{attribute}") if self.send(:"bs_#{attribute}")
@@ -62,7 +46,8 @@ class Matestack::Ui::Bootstrap::Components::Tooltip < Matestack::Ui::VueJsCompon
         end
         hash["bs-toggle"] = "tooltip"
         hash["bs-type"] = tag
-        # hash[:'original-title'] = content
+        hash["bs-placement"] = "auto" if placement.nil?
+        hash["bs-title"] = tooltip_title
       end
     end
     html_attributes.merge(
@@ -72,9 +57,6 @@ class Matestack::Ui::Bootstrap::Components::Tooltip < Matestack::Ui::VueJsCompon
 
   def tooltip_classes
     [].tap do |classes|
-      classes << "d-inline-block" if (tag == :span or tag == :div)
-      classes << "btn btn-#{variant || 'link'}" if (tag == :link or !tag.present?)
-
       classes << bs_class
     end.join(' ').strip
   end

data/app/concepts/matestack/ui/bootstrap/content/{collection → smart_collection}/collection.rb

@@ -1,8 +1,8 @@
-class Matestack::Ui::Bootstrap::Content::Collection::Collection < Matestack::Ui::Component
+class Matestack::Ui::Bootstrap::Content::SmartCollection::Collection < Matestack::Ui::Component
   include Matestack::Ui::Core::Collection::Helper
-  include Matestack::Ui::Bootstrap::Content::Collection::Content
-  include Matestack::Ui::Bootstrap::Content::Collection::Filter
-  include Matestack::Ui::Bootstrap::Content::Collection::Paginate
+  include Matestack::Ui::Bootstrap::Content::SmartCollection::Content
+  include Matestack::Ui::Bootstrap::Content::SmartCollection::Filter
+  include Matestack::Ui::Bootstrap::Content::SmartCollection::Paginate
 
   # html attributes
   optional id: { as: :bs_id }
@@ -29,7 +29,7 @@ class Matestack::Ui::Bootstrap::Content::Collection::Collection < Matestack::Ui:
   attr_accessor :processed_filters
 
   def response
-    div class: "smart-collection" do
+    div id: bs_id, class: "smart-collection" do
       filter_partial
       content
     end
@@ -57,18 +57,20 @@ class Matestack::Ui::Bootstrap::Content::Collection::Collection < Matestack::Ui:
   def filtered_query
     return @filtered_query if @filtered_query
     @filtered_query = items
-    filters.select { |key, value| '.'.in? key.to_s }.each do |key, value|
-      associated_name = key.to_s.split(".").first
-      @filtered_query = @filtered_query.joins(associated_name.to_sym).all
-      if value.is_a?(Hash)
-        processed_filters[key] = value
-        @filtered_query = add_query_filter(@filtered_query, associated_name, key, value)
+    unless filters.nil?
+      filters.select { |key, value| '.'.in? key.to_s }.each do |key, value|
+        associated_name = key.to_s.split(".").first
+        @filtered_query = @filtered_query.joins(associated_name.to_sym).all
+        if value.is_a?(Hash)
+          processed_filters[key] = value
+          @filtered_query = add_query_filter(@filtered_query, associated_name, key, value)
+        end
       end
-    end
-    filters.reject { |key, value| '.'.in? key.to_s }.each do |key, value|
-      if value.is_a?(Hash)
-        processed_filters[key] = value
-        @filtered_query = add_query_filter(@filtered_query, nil, key, value)
+      filters.reject { |key, value| '.'.in? key.to_s }.each do |key, value|
+        if value.is_a?(Hash)
+          processed_filters[key] = value
+          @filtered_query = add_query_filter(@filtered_query, nil, key, value)
+        end
       end
     end
     @filtered_query

data/app/concepts/matestack/ui/bootstrap/content/{collection → smart_collection}/content.rb

@@ -1,9 +1,9 @@
-module Matestack::Ui::Bootstrap::Content::Collection::Content
+module Matestack::Ui::Bootstrap::Content::SmartCollection::Content
 
   def content
-    bs_row id: 'content' do
+    bs_row class: 'smart-collection-content' do
       bs_col do
-        async id: collection_id, rerender_on: "#{collection_id}-update, #{rerender_on} " do
+        async id: "#{collection_id}-async", rerender_on: "#{collection_id}-update, #{rerender_on} " do
           collection_content collection.config do
             div class: responsive_class do
               if slots && slots[:collection_rendering]

data/app/concepts/matestack/ui/bootstrap/content/{collection → smart_collection}/filter.rb

@@ -1,4 +1,4 @@
-module Matestack::Ui::Bootstrap::Content::Collection::Filter
+module Matestack::Ui::Bootstrap::Content::SmartCollection::Filter
 
   def filter_partial
     collection_filter collection.config do
@@ -24,9 +24,9 @@ module Matestack::Ui::Bootstrap::Content::Collection::Filter
     }
     case config[:type]
     when :select
-      collection_filter_select attributes.merge(class: 'form-select', options: config[:options])
+      collection_filter_select attributes.merge(id: key, class: 'form-select', options: config[:options])
     else
-      collection_filter_input attributes.merge(class: 'form-control')
+      collection_filter_input attributes.merge(id: key, class: 'form-control smart-collection-filter')
     end
   end