matestack-ui-bootstrap 1.4.0

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

@@ -0,0 +1,65 @@
+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 :variant, :striped, :animated, :height
+
+  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, 
+          text: prog[:text], klass: prog[:class], variant: prog[:variant] || variant,
+          striped: prog[:striped] || striped, animated: prog[:animated] || animated,
+          aria_valuenow: prog[:aria_valuenow]
+        )
+      end
+      yield_components
+    end
+  end
+
+  protected
+
+  def progress_attributes
+    attributes = {}.tap do |hash|
+      hash[:class] = "progress #{bs_class}".strip
+      hash[:attributes] = { style: "height: #{height}px;" } if height 
+    end
+    html_attributes.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      
+    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
+      }
+    }
+  end
+
+  def progress_bar_classes(klass, variant, striped, animated)
+    [].tap do |classes|
+      classes << 'progress-bar'
+      classes << "bg-#{variant || :primary}"
+      classes << "progress-bar-striped" if striped
+      classes << "progress-bar-animated" if animated
+      classes << klass
+    end.join(' ').strip
+  end
+end

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

@@ -0,0 +1,33 @@
+class Matestack::Ui::Bootstrap::Components::Scrollspy < Matestack::Ui::Component
+
+  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_components
+    end
+  end
+
+  protected
+
+  def scrollspy_attributes
+    attributes = {}.tap do |hash|
+      hash[:class] = scrollspy_classes
+      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?
+    end
+    html_attributes.merge(
+      attributes
+    )
+  end
+
+  def scrollspy_classes
+    [].tap do |classes|
+      classes << bs_class
+    end.join(' ').strip
+  end
+end

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

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

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

@@ -0,0 +1,31 @@
+class Matestack::Ui::Bootstrap::Components::Spinner < Matestack::Ui::Component
+
+  optional class: { as: :bs_class }
+  optional :kind, :variant, :size, :sr_only
+
+  def response
+    div spinner_attributes do
+      span class: "sr-only", text: sr_only
+    end
+  end
+
+  protected
+
+  def spinner_attributes
+    html_attributes.merge(
+      class: spinner_class,
+      attributes: { 'role': "status" }
+    )
+  end
+
+  def spinner_class
+    [].tap do |classes|
+      spinner_kind = kind || :border
+      classes << "spinner-#{spinner_kind}"
+      classes << "text-#{variant || 'primary'}"
+      classes << "spinner-#{spinner_kind}-sm" if size
+      #optional classes
+      classes << bs_class
+    end.join(' ').strip
+  end
+end

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

@@ -0,0 +1,81 @@
+class Matestack::Ui::Bootstrap::Components::TabNav < Matestack::Ui::Component
+
+  requires :id
+
+  optional  :items, :variant, :fill, :justified, :vertical, :vertical_up_to_sm,
+            :vertical_up_to_md, :vertical_up_to_xl, :horizontal,
+            class: { as: :bs_class }, attributes: { as: :bs_attrs}
+
+  def response
+    ul nav_attributes do
+      nav_items_partial if items.present?
+    end
+    div class: "tab-content", id: "#{id}Content" do
+      yield_components
+    end
+  end
+
+  protected
+
+  def nav_items_partial
+    items.each do |item|
+      li class: "nav-item", attributes: { role: "presentation" } do
+        # '<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>'
+        link  class: "nav-link #{'active' if item[:active]}",
+              id: "tab-#{item[:id]}",
+              path: "#tab-#{item[:id]}-content",
+              attributes: {
+                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 class: "#{'ps-3' if item[:icon]}", text: item[:text] 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[:attributes] = {}.tap do |hash|
+        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 toggle.present?
+      end
+
+      hash[:data] = { "bs-toggle": "pill" } if pills
+      hash[:data] = { "bs-toggle": "tab" } if tabs
+      hash[:path] = path
+    end
+  end
+
+  def nav_attributes
+    html_attributes.merge(
+      id: id,
+      class: nav_classes,
+      attributes: { role: "tablist"}
+    )
+  end
+
+  def nav_classes
+    [].tap do |classes|
+      classes << 'nav'
+      classes << 'nav-tabs' if variant == :tabs || variant.nil?
+      classes << 'nav-pills' if variant == :pills
+      classes << 'nav-fill' if fill
+      classes << 'nav-justified' if justified
+      classes << 'flex-column' if vertical
+      classes << 'flex-column flex-sm-column flex-md-row' if vertical_up_to_sm
+      classes << 'flex-column flex-sm-column flex-md-column flex-lg-row' if vertical_up_to_md
+      classes << 'flex-column flex-sm-column flex-md-column flex-lg-column flex-xl-row' if vertical_up_to_xl
+      classes << "justify-content-#{horizontal}" if horizontal.present?
+      classes << bs_class
+    end.join(' ').strip
+  end
+end

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

@@ -0,0 +1,32 @@
+class Matestack::Ui::Bootstrap::Components::TabNavContent < Matestack::Ui::Component
+
+  requires :id
+
+  optional :tabs, :pills, :active, class: { as: :bs_class }, attributes: { as: :bs_attrs}
+
+  def response
+    div tab_content_attributes do
+      yield_components
+    end
+  end
+
+  protected
+
+  def tab_content_attributes
+    html_attributes.merge(
+      id: "tab-#{id}-content",
+      class: tab_content_classes,
+      attributes: { role: "tabpanel", "aria-labelledby": "tab-#{id}" }
+    )
+  end
+
+  def tab_content_classes
+    [].tap do |classes|
+      classes << 'tab-pane'
+      classes << 'fade'
+      classes << 'show ' if active
+      classes << 'active' if active
+      classes << bs_class
+    end.join(' ').strip
+  end
+end

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

@@ -0,0 +1,79 @@
+import * as bootstrap from 'bootstrap'
+
+MatestackUiCore.Vue.component('matestack-ui-bootstrap-toast', {
+
+  mixins: [MatestackUiCore.componentMixin],
+  data() {
+    return {
+      toastsInstance: undefined,
+      eventData: {},
+      showing: false,
+    };
+  },
+  methods: {
+    show: function(event){
+      const self = this;
+      if(this.componentConfig["autohide"]){
+        setTimeout(function () {
+          self.showing = false;
+        }, 5000);
+      }
+      this.showing = true
+      this.eventData = event
+    },
+    hide: function(event){
+      const self = this;
+      this.showing = false
+      setTimeout(function () {
+        self.eventData = false;
+      }, 500);
+    },
+    dispose: function(){
+      const self = this;
+      self.toastsInstance.dispose()
+      self.toastsInstance = new bootstrap.Toast(self.$el)
+    }
+  },
+  mounted: function() {
+    const self = this;
+    var myToasts = self.$el
+    self.toastsInstance = new bootstrap.Toast(myToasts)
+  },
+  created: function() {
+    const self = this
+
+    if(this.componentConfig["show_on"] != undefined){
+      var show_events = this.componentConfig["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(",")
+      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(",")
+      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(",")
+      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(",")
+      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(",")
+      hiden_events.forEach(hide_event => MatestackUiCore.matestackEventHub.$off(hide_event.trim(), self.dispose));
+    }
+  },
+});

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

@@ -0,0 +1,99 @@
+class Matestack::Ui::Bootstrap::Components::Toast < Matestack::Ui::VueJsComponent
+  vue_js_component_name "matestack-ui-bootstrap-toast"
+
+  # header attributes, expects a hash or string
+  # possible keys `:icon_class, :icon, :title, :subtitle`
+  optional :header
+  # body expects a string as message inside toast
+  optional :body
+  # placement attributes, expects a hash wiht possible keys: position, min-height
+  optional :placement # for adding custom css style
+  optional :important, :delay, :autohide, :animation
+  optional class: { as: :bs_class }, attributes: { as: :bs_attrs }, data: { as: :bs_data }
+  optional :slots
+
+  def response
+    standard_placement_partial
+    # standard_placement_partial unless placement.present?
+    # custom_placement_partial if placement.present?
+  end
+
+  protected
+
+  def custom_placement_partial
+    div attributes: placement_attrs do
+      standard_placement_partial
+    end
+  end
+
+  def standard_placement_partial
+    div toast_attributes do
+      header_partial if header || slots && slots[:header]
+      body_partial
+    end
+  end
+
+  def header_partial
+    header = self.header.is_a?(Hash) ? self.header : { title: self.header }
+    div class: "toast-header" do
+      img class: "#{'rounded me-2' || header[:icon_class]}", path: header[:icon] if header[:icon].present?
+      strong class: "me-auto", text: header[:title] if header[:title].present?
+      small text: header[:subtitle] if header[:subtitle].present?
+
+      slot slots[:header] if slots && slots[:header]
+      bs_close dismiss: 'toast', class: "ms-2 mb-1", attributes: { "@click": "hide()"}
+    end
+
+  end
+
+  def body_partial
+    div class: "toast-body" do
+      plain body if body
+    end
+    unless header || slots && slots[:header]
+      bs_close dismiss: 'toast', class: "ms-auto me-2 btn-close-white", attributes: { "@click": "hide()"}
+    end
+  end
+
+  def toast_attributes
+    html_attributes.merge(
+      class: toast_classes,
+      attributes: toast_attrs,
+      data: toast_data
+    )
+  end
+
+  def toast_data
+    (bs_data || {}).tap do |hash|
+      hash["bs-delay"] = delay.nil? ? 5000 : delay
+      hash["bs-autohide"] = autohide.nil? ? "true" : "#{autohide}"
+      hash["bs-animation"] = animation.nil? ? "true" : "#{animation}"
+    end
+  end
+
+  def toast_attrs
+    (bs_attrs || {}).tap do |hash|
+      hash[:role] = (important == false ? 'status' : 'alert')
+      hash[:'aria-live'] = (important ? 'assertive' : 'polite') if important.present? && !placement.present?
+      hash[:'aria-live'] = 'assertive' unless important.present?
+      hash[:'aria-atomic'] = 'true' unless placement.present?
+      hash[:style] = "z-index: 10000; position: fixed; #{placement[:position] || 'top: 0; right: 0;' }"  if placement.present?
+      hash["v-bind:class"] = "{'show' : showing }"
+    end
+  end
+
+  def toast_classes
+    [].tap do |classes|
+      classes << 'toast p-0 fade d-flex align-items-center border-0'
+      classes << bs_class
+    end.join(' ').strip
+  end
+
+  def placement_attrs
+    {}.tap do |hash|
+      hash[:'aria-live'] = (important ? 'assertive' : 'polite') if important.present?
+      hash[:'aria-atomic'] = 'true'
+      hash[:style] = "position: relative; min-height: #{placement[:height]};"
+    end
+  end
+end