matestack-ui-bootstrap 1.4.0 → 2.1.0

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
-      btn popover_attributes do
-        content_partial
+      bs_btn popover_attributes do
+        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
 

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

@@ -1,24 +1,26 @@
-class Matestack::Ui::Bootstrap::Components::Progress < Matestack::Ui::Component
-  
-  optional class: { as: :bs_class }
-  optional :text, :valuemin, :valuemax
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Progress < Matestack::Ui::Bootstrap::BaseComponent
+
+  optional class: { as:  :bs_class }
+  optional :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
+  # other options are :text, class: { as:  :bs_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 = context.progress.is_a?(Array) ? context.progress : [{ value: context.progress || context.value, text: context.text }]
       progress.each do |prog|
-        progress_bar(prog[:value], valuemin, valuemax, 
-          text: prog[:text], klass: prog[:class], variant: prog[:variant] || variant,
-          striped: prog[:striped] || striped, animated: prog[:animated] || animated,
+        progress_bar(prog[:value], context.valuemin, context.valuemax,
+          text: prog[:text], klass: prog[:class], variant: prog[:variant] || context.variant,
+          striped: prog[:striped] || context.striped, animated: prog[:animated] || context.animated,
           aria_valuenow: prog[:aria_valuenow]
         )
       end
-      yield_components
+      yield if block_given?
     end
   end
 
@@ -26,30 +28,28 @@ 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[:class] = "progress #{context.bs_class}".strip
+      hash[:style] = "height: #{context.height}px;" if context.height
     end
-    html_attributes.merge(
+    options.merge(
       attributes
     )
   end
 
   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
 
   def progress_bar_attributes(value, klass, variant, striped, animated, aria_valuenow)
     {
       class: progress_bar_classes(klass, variant, striped, animated),
-      attributes: {
-        role: :progressbar,
-        style: "width: #{value.to_i > 0 ? value : 0}%;",
-        'aria-valuenow': aria_valuenow || value || 0,
-        'aria-valuemin': valuemin || 0,
-        'aria-valuemax': valuemax || 100
-      }
+      role: :progressbar,
+      style: "width: #{value.to_i > 0 ? value : 0}%;",
+      'aria-valuenow': aria_valuenow || value || 0,
+      'aria-valuemin': context.valuemin || 0,
+      'aria-valuemax': context.valuemax || 100
     }
   end
 
@@ -62,4 +62,4 @@ class Matestack::Ui::Bootstrap::Components::Progress < Matestack::Ui::Component
       classes << klass
     end.join(' ').strip
   end
-end
+end

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

@@ -0,0 +1,50 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Scrollspy < Matestack::Ui::Bootstrap::BaseComponent
+
+  required :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
+  optional class: { as:  :bs_class } # adding custom class to scrollspy
+
+  def response
+    div scrollspy_attributes do
+      yield if block_given?
+    end
+  end
+
+  protected
+
+  def scrollspy_attributes
+    attributes = {}.tap do |hash|
+      hash[:class] = scrollspy_classes
+      hash[:data] = { "bs-spy": "scroll", "bs-target": "#{context.target}" }
+      hash[:data].merge!("bs-offset": context.offset) if context.offset.present?
+      hash[:data].merge!("bs-method": :"#{context.bs_method}") if context.bs_method.present?
+      hash[:style] = "overflow-y: scroll; position: relative;"
+      hash[:style] << "height: #{parsed_height};"
+      hash[:tabindex] = 0
+    end
+    options.merge(
+      attributes
+    )
+  end
+
+  def parsed_height
+    if context.height.present?
+      if context.height.to_s.include?("px") || context.height.to_s.include?("em") || context.height.to_s.include?("rem")
+        context.height
+      else
+        "#{context.height}px"
+      end
+    end
+  end
+
+  def scrollspy_classes
+    [].tap do |classes|
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+end

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

@@ -0,0 +1,33 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::SectionCard < Matestack::Ui::Bootstrap::BaseComponent
+
+  optional :id, :title, :subtitle, :icon, :slots, :content_padding
+
+  def response
+    section id: context.id, class: "section-card rounded shadow-sm mb-4 bg-white #{options[:class]}" do
+      div class: "d-flex flex-row justify-content-between" do
+        if context.title.present? || context.subtitle.present?
+          div class: "section-card-heading p-4" do
+            heading size: 5, class: "mb-0" do
+              bs_icon name: context.icon, size: "35" if context.icon.present?
+              plain context.title
+            end
+            small class: "text-muted" do
+              plain context.subtitle
+            end
+          end
+        end
+        if slots.present? && slots[:actions].present?
+          div class: "section-card-actions p-4" do
+            slot :actions
+          end
+        end
+      end
+      div class: "section-card-content #{'p-4' unless context.content_padding == false} #{'pt-1' if context.title || context.subtitle}" do
+        yield if block_given?
+      end
+    end
+  end
+
+end

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

@@ -0,0 +1,35 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Spinner < Matestack::Ui::Bootstrap::BaseComponent
+
+  optional class: { as:  :bs_class }
+  optional :kind, :variant, :size, :sr_only
+
+  def response
+    div spinner_attributes do
+      span class: "visually-hidden" do
+        plain context.sr_only
+      end
+    end
+  end
+
+  protected
+
+  def spinner_attributes
+    options.merge(
+      class: spinner_class,
+      'role': "status"
+    )
+  end
+
+  def spinner_class
+    [].tap do |classes|
+      spinner_kind = context.kind || :border
+      classes << "spinner-#{spinner_kind}"
+      classes << "text-#{context.variant || 'primary'}"
+      classes << "spinner-#{spinner_kind}-sm" if context.size
+      #optional classes
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+end

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

@@ -0,0 +1,79 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::TabNav < Matestack::Ui::Bootstrap::BaseComponent
+
+  required :id
+
+  optional  :items, :variant, :fill, :justified, :vertical, :vertical_up_to_sm,
+            :vertical_up_to_md, :vertical_up_to_xl, :horizontal,
+            class: { as:  :bs_class }
+
+  def response
+    if context.items.present?
+      ul nav_attributes do
+        nav_items_partial
+      end
+    end
+    div class: "tab-content", id: "#{context.id}Content" do
+      yield if block_given?
+    end
+  end
+
+  protected
+
+  def nav_items_partial
+    context.items.each do |item|
+      li class: "nav-item", role: "presentation" do
+        a  class: "nav-link #{'active' if item[:active]}",
+              id: "tab-#{item[:id]}",
+              path: "#tab-#{item[:id]}-content",
+              role: "tab",
+              "aria-controls": "tab-#{item[:id]}",
+              "aria-selected": "#{'true' if item[:active]}",
+              "data-bs-toggle": "tab" do
+                bs_icon name: item[:icon], size: 20 if item[:icon]
+                span item[:text], class: "#{'ps-3' if item[:icon]}" if item[:text]
+              end
+      end
+    end
+  end
+
+  def link_attrs path, active, disabled, delay=nil
+    {}.tap do |hash|
+      hash[:class] = "nav-link #{'active' if path == request.fullpath } #{'disabled' if disabled}"
+      hash[:'aria-selected'] = path == request.fullpath ? 'true' : 'false'
+      hash[:'aria-current'] = 'page' if active == true
+      hash[:'aria-disabled'] = 'true' if disabled
+      hash[:role] = "tab" if toggle.present?
+      hash[:'aria-controls'] = "#{path.gsub('#','')}" if context.toggle.present?
+
+      hash[:data] = { "bs-toggle": "pill" } if context.pills
+      hash[:data] = { "bs-toggle": "tab" } if context.tabs
+      hash[:path] = path
+    end
+  end
+
+  def nav_attributes
+    options.merge(
+      id: context.id,
+      class: nav_classes,
+      role: "tablist"
+    )
+  end
+
+  def nav_classes
+    [].tap do |classes|
+      classes << 'nav'
+      classes << 'nav-tabs' if context.variant == :tabs || context.variant.nil?
+      classes << 'nav-pills' if context.variant == :pills
+      classes << 'nav-fill' if context.fill
+      classes << 'nav-justified' if context.justified
+      classes << 'flex-column' if context.vertical
+      classes << 'flex-column flex-sm-column flex-md-row' if context.vertical_up_to_sm
+      classes << 'flex-column flex-sm-column flex-md-column flex-lg-row' if context.vertical_up_to_md
+      classes << 'flex-column flex-sm-column flex-md-column flex-lg-column flex-xl-row' if context.vertical_up_to_xl
+      classes << "justify-content-#{context.horizontal}" if context.horizontal.present?
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+end

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

@@ -0,0 +1,35 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::TabNavContent < Matestack::Ui::Bootstrap::BaseComponent
+
+  required :id
+
+  optional :active, class: { as:  :bs_class }
+
+  def response
+    div tab_content_attributes do
+      yield if block_given?
+    end
+  end
+
+  protected
+
+  def tab_content_attributes
+    options.merge(
+      id: "tab-#{context.id}-content",
+      class: tab_content_classes,
+      role: "tabpanel",
+      "aria-labelledby": "tab-#{context.id}"
+    )
+  end
+
+  def tab_content_classes
+    [].tap do |classes|
+      classes << 'tab-pane'
+      classes << 'fade'
+      classes << 'show ' if context.active
+      classes << 'active' if context.active
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+end

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

@@ -1,6 +1,9 @@
 import * as bootstrap from 'bootstrap'
+import Vue from 'vue/dist/vue.esm'
 
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-toast', {
+import MatestackUiCore from 'matestack-ui-core'
+
+Vue.component('matestack-ui-bootstrap-toast', {
 
   mixins: [MatestackUiCore.componentMixin],
   data() {
@@ -13,12 +16,18 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-toast', {
   methods: {
     show: function(event){
       const self = this;
-      if(this.componentConfig["autohide"]){
+      if(this.props["autohide"]){
         setTimeout(function () {
           self.showing = false;
         }, 5000);
       }
-      this.showing = true
+      if(this.props["delay"]){
+        setTimeout(function () {
+          self.showing = true;
+        }, parseInt(self.props["delay"]));
+      } else {
+        self.showing = true
+      }
       this.eventData = event
     },
     hide: function(event){
@@ -42,37 +51,37 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-toast', {
   created: function() {
     const self = this
 
-    if(this.componentConfig["show_on"] != undefined){
-      var show_events = this.componentConfig["show_on"].split(",")
+    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));
     }
 
-    if(this.componentConfig["hide_on"] != undefined){
-      var show_events = this.componentConfig["hide_on"].split(",")
+    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));
     }
 
-    if(this.componentConfig["dispose_on"] != undefined){
-      var show_events = this.componentConfig["dispose_on"].split(",")
+    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));
     }
   },
 
   beforeDestroy: function() {
     const self = this
-    MatestackUiCore.matestackEventHub.$off(this.componentConfig["show_on"], self.show);
-    MatestackUiCore.matestackEventHub.$off(this.componentConfig["hide_on"], self.hide);
-    MatestackUiCore.matestackEventHub.$off(this.componentConfig["dispose_on"], self.hide);
-    if(this.componentConfig["show_on"] != undefined){
-      var shown_events = this.componentConfig["show_on"].split(",")
+    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);
+    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));
     }
-    if(this.componentConfig["hide_on"] != undefined){
-      var hiden_events = this.componentConfig["hide_on"].split(",")
+    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));
     }
-    if(this.componentConfig["dispose_on"] != undefined){
-      var hiden_events = this.componentConfig["dispose_on"].split(",")
+    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));
     }
   },