matestack-ui-bootstrap 1.4.0

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

@@ -0,0 +1,36 @@
+class Matestack::Ui::Bootstrap::Components::ButtonGroup < Matestack::Ui::Component
+
+  optional class: { as: :bs_class }
+  optional label: { as: :bs_label }
+  optional :toolbar, :size, :vertical
+
+  def response 
+    div buttongroup_attributes do
+      yield_components
+    end
+  end
+
+  protected
+
+  def buttongroup_attributes
+    attributes = {}.tap do |hash|
+      hash[:class] = buttongroup_classes
+      hash[:attributes] = { 
+        role: "#{toolbar ? :toolbar : :group}", 
+        'aria-label': bs_label 
+      } 
+    end
+    html_attributes.merge(
+      attributes
+    )
+  end
+
+  def buttongroup_classes
+    [].tap do |classes|
+      classes << ("btn-#{toolbar ? :toolbar : :group}#{'-vertical' if vertical}")
+      classes << "btn-group-#{size}" if size.present?
+      classes << bs_class
+    end.join(' ').strip
+  end
+
+end

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

@@ -0,0 +1,100 @@
+class Matestack::Ui::Bootstrap::Components::Card < Matestack::Ui::Component
+
+  optional class: { as: :bs_class }
+
+  # header attributes, expects a hash or string
+  # possible keys `:class, :text`
+  optional :header
+  # footer attributes, expects a hash or string
+  # possible keys `:class, :text`
+  optional :footer
+
+  optional :title, :body, :subtitle # body attributes
+  optional :img_path, :img_pos, :alt_text # image attributes
+
+  optional :content_wrapper_class # class for content wrapper -> useful for content padding without affecting top image
+
+  optional :slots # passed in slots for card header or footer
+
+  def response
+    div card_attributes do
+      if header || slots && slots[:header]
+        header_partial
+      end
+
+      img_partial :top unless img_pos == :bottom
+      div class: content_wrapper_class do
+        body_partial if title || body || slots && slots[:body]
+
+        # custom body components
+        # needed a div otherwise it will be displayed below footer
+        div class: "p-3 pt-1" do yield_components end
+
+        img_partial :bottom if img_pos == :bottom
+
+        footer_partial if footer || slots && slots[:footer]
+      end
+    end
+  end
+
+  protected
+
+  def header_partial
+    header = self.header.is_a?(Hash) ? self.header : { text: self.header }
+    div class: "card-header #{header[:class]}" do
+      plain header[:text] if header[:text].present?
+      slot slots[:header] if slots && slots[:header]
+    end
+  end
+
+  def body_partial
+    div class: "card-body" do
+      # title
+      card_title(title, "card-title")
+      # subtitle
+      card_title(subtitle, 6, "card-subtitle text-muted")
+      # body
+      if body.is_a? Hash
+        paragraph class: "card-text #{body[:class]}", text: body[:text]
+      elsif body
+        paragraph class: "card-text", text: body
+      end
+      slot slots[:body] if slots && slots[:body]
+    end
+  end
+
+  def footer_partial
+    footer = self.footer.is_a?(Hash) ? self.footer : { text: self.footer }
+    div class: "card-footer #{footer[:class]}" do
+      plain footer[:text] if footer[:text].present?
+      slot slots[:footer] if slots && slots[:footer]
+    end
+  end
+
+  def img_partial pos
+    img class: "card-img-#{pos}", path: img_path, alt: alt_text if img_path.present?
+  end
+
+  def card_attributes
+    html_attributes.except(:title).merge(
+      class: card_classes
+    )
+  end
+
+  def card_classes
+    [].tap do |classes|
+      classes << 'card'
+      classes << bs_class
+    end.join(' ').strip
+  end
+
+  def card_title(options, default_size = 5, title_class)
+    if options.is_a? Hash
+      heading size: (options[:size] || default_size), class: "#{options[:class]} #{title_class}",
+        text: options[:text]
+    elsif options
+      heading size: default_size, class: title_class, text: options
+    end
+  end
+
+end

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

@@ -0,0 +1,79 @@
+import * as bootstrap from 'bootstrap'
+
+MatestackUiCore.Vue.component('matestack-ui-bootstrap-carousel', {
+  mixins: [MatestackUiCore.componentMixin],
+  data() {
+    return {
+      carouselInstance: undefined
+    };
+  },
+
+  methods: {
+    cycle: function(){
+      const self = this;
+      self.carouselInstance.cycle()
+    },
+    pause: function(){
+      const self = this;
+      self.carouselInstance.pause()
+    },
+    prev: function(){
+      const self = this;
+      self.carouselInstance.prev()
+    },
+    next: function(){
+      const self = this;
+      self.carouselInstance.next()
+    }
+  },
+
+  mounted: function() {
+    const self = this;
+    var myCarousel = self.$el;
+    self.carouselInstance = new bootstrap.Carousel(myCarousel, {
+      interval: (self.componentConfig['interval'] || 5000)
+    })
+  },
+
+  created: function() {
+    const self = this
+    if(self.componentConfig["cycle_on"] != undefined){
+      var cycle_events = self.componentConfig["cycle_on"].split(",")
+      cycle_events.forEach(cycle_event => MatestackUiCore.matestackEventHub.$on(cycle_event.trim(), self.cycle));
+    }
+    if(self.componentConfig["pause_on"] != undefined){
+      var pause_events = self.componentConfig["pause_on"].split(",")
+      pause_events.forEach(pause_event => MatestackUiCore.matestackEventHub.$on(pause_event.trim(), self.pause));
+    }
+    if(self.componentConfig["prev_on"] != undefined){
+      var prev_events = self.componentConfig["prev_on"].split(",")
+      prev_events.forEach(prev_event => MatestackUiCore.matestackEventHub.$on(prev_event.trim(), self.prev));
+    }
+    if(self.componentConfig["next_on"] != undefined){
+      var next_events = self.componentConfig["next_on"].split(",")
+      next_events.forEach(next_event => MatestackUiCore.matestackEventHub.$on(next_event.trim(), self.next));
+    }
+  },
+
+  beforeDestroy: function() {
+    const self = this
+    if(self.componentConfig["cycle_on"] != undefined){
+      var cycle_events = self.componentConfig["cycle_on"].split(",")
+      cycle_events.forEach(cycle_event => MatestackUiCore.matestackEventHub.$off(cycle_event.trim(), self.cycle));
+    }
+
+    if(self.componentConfig["pause_on"] != undefined){
+      var pause_events = self.componentConfig["pause_on"].split(",")
+      pause_events.forEach(pause_event => MatestackUiCore.matestackEventHub.$off(pause_event.trim(), self.pause));
+    }
+
+    if(self.componentConfig["prev_on"] != undefined){
+      var prev_events = self.componentConfig["prev_on"].split(",")
+      prev_events.forEach(prev_event => MatestackUiCore.matestackEventHub.$off(prev_event.trim(), self.prev));
+    }
+    if(self.componentConfig["next_on"] != undefined){
+      var next_events = self.componentConfig["next_on"].split(",")
+      next_events.forEach(next_event => MatestackUiCore.matestackEventHub.$off(next_event.trim(), self.next));
+    }
+  },
+});

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

@@ -0,0 +1,85 @@
+class Matestack::Ui::Bootstrap::Components::Carousel < Matestack::Ui::VueJsComponent
+  vue_js_component_name "matestack-ui-bootstrap-carousel" 
+  
+  optional :start, :controls, :indicators, :fade, :interval
+  optional :items, class: { as: :bs_class }
+  # possible keys for items: path, title, text, interval
+  # event trigger
+  optional :cycle_on, :pause_on, :prev_on, :next_on
+
+  def setup
+    @component_config["carousel-id"] = carousel_id
+  end
+  
+  def response
+    div carousel_attributes do
+      # carousel indicator
+      indicator_partial if indicators.present?
+      # carousel content
+      div class: "carousel-inner" do
+        yield_components
+        carousel_partial if items
+      end
+      controls_partial if controls
+    end
+  end
+
+  protected
+
+  def indicator_partial
+    ol class: "carousel-indicators" do
+      items.size.times do |index|
+        li data: { target: carousel_id, 'slide-to': index }, 
+          class: "#{'active' if index == (start || 0) }"
+      end
+    end
+  end
+
+  def carousel_partial
+    items.each_with_index do |item, index|
+      div class: "carousel-item #{'active' if index == (start || 0) } #{item[:class]}".strip, 
+        data: { interval: item[:interval] } do
+        img class: "d-block w-100", path: item[:path]
+        if item[:title] || item[:text]
+          div class: "carousel-caption d-none d-md-block #{item[:title_class]}" do
+            heading size: 5, text: item[:title]
+            paragraph text: item[:text]
+          end
+        end
+      end
+    end
+  end
+
+  def controls_partial
+    link class: "carousel-control-prev", path: "##{carousel_id}", data: { slide: :prev }, attributes: { 'role': "button" } do
+      span class: "carousel-control-prev-icon", attributes: { 'aria-hidden': "true" }
+      span class: "sr-only", text: "Previous"
+    end
+    link class: "carousel-control-next", path: "##{carousel_id}", data: { slide: :next }, attributes: { 'role': "button" } do
+      span class: "carousel-control-next-icon", attributes: { 'aria-hidden': "true" }
+      span class: "sr-only", text: "Next"
+    end
+  end
+
+  def carousel_attributes
+    html_attributes.merge(
+      id: carousel_id,
+      class: carousel_classes,
+      data: { ride: 'carousel', interval: (interval || 5000) }
+    )
+  end
+
+  def carousel_classes
+    [].tap do |classes|
+      classes << 'carousel slide'
+      classes << 'carousel-fade' if fade
+      #custom classes 
+      classes << bs_class
+    end.join(' ').strip
+  end
+
+  def carousel_id
+    @carousel_id ||= "matestack-carousel-#{SecureRandom.hex}"
+  end
+
+end

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

@@ -0,0 +1,232 @@
+import Chart from 'chart.js';
+
+MatestackUiCore.Vue.component('matestack-ui-bootstrap-chart', {
+  mixins: [MatestackUiCore.componentMixin],
+
+  data() {
+    return {
+      chartJsInstance: undefined,
+      defaultColor: undefined,
+      fontColor: undefined,
+      fontFamily: undefined
+    };
+  },
+
+  methods: {
+    getThemeColor: function(key){
+      const style = getComputedStyle(document.body);
+      return style.getPropertyValue('--bs-'+key);
+    },
+    getThemeColorArray: function(keysArray){
+      let result = []
+      const style = getComputedStyle(document.body);
+      keysArray.forEach(function(key){
+        result.push(style.getPropertyValue('--bs-'+key))
+      })
+      return result;
+    },
+    drawBarChart: function(chartElement){
+      const self = this;
+      this.componentConfig["datasets"].forEach(function(item){
+        if (item["backgroundColor"] === undefined){
+          item["backgroundColor"] = self.getThemeColor("primary")
+        }else{
+          if(Array.isArray(item["backgroundColor"])){
+            item["backgroundColor"] = self.getThemeColorArray(item["backgroundColor"])
+          }else{
+            item["backgroundColor"] = self.getThemeColor(item["backgroundColor"])
+          }
+        }
+        item["hoverBackgroundColor"] = "rgba(0, 0, 0, 0.1)"
+        if (item["barThickness"] === undefined){
+          item["barThickness"] = 10;
+        }
+      })
+      this.chartJsInstance = new Chart(chartElement, {
+        type: 'bar',
+        data: {
+            labels: this.componentConfig["labels"],
+            datasets: this.componentConfig["datasets"]
+        },
+        options: {
+            legend: {
+              display: this.componentConfig["display_legend"],
+            },
+            scales: {
+                yAxes: [{
+                    display: this.componentConfig["display_y_axes"],
+                    gridLines: {
+                      display: false,
+                    },
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }],
+                xAxes: [{
+                    display: this.componentConfig["display_x_axes"],
+                    gridLines: {
+                      display: false,
+                    },
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            }
+        }
+      });
+    },
+    drawLineChart: function(chartElement){
+      const self = this;
+      this.componentConfig["datasets"].forEach(function(item){
+        if (item["borderColor"] === undefined){
+          item["borderColor"] = self.getThemeColor("primary")
+        }else{
+          item["borderColor"] = self.getThemeColor(item["borderColor"])
+        }
+        item["hoverBackgroundColor"] = "rgba(0, 0, 0, 0.1)"
+        if (item["fill"] === undefined){
+          item["fill"] = false;
+        }
+      })
+      this.chartJsInstance = new Chart(chartElement, {
+        type: 'line',
+        data: {
+            labels: this.componentConfig["labels"],
+            datasets: this.componentConfig["datasets"]
+        },
+        options: {
+            legend: {
+              display: this.componentConfig["display_legend"],
+            },
+            scales: {
+                yAxes: [{
+                    display: this.componentConfig["display_y_axes"],
+                    gridLines: {
+                      display: false,
+                    },
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }],
+                xAxes: [{
+                    display: this.componentConfig["display_x_axes"],
+                    gridLines: {
+                      display: false,
+                    },
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            }
+        }
+      });
+    },
+    drawDoughnutChart: function(chartElement){
+      const self = this;
+      this.componentConfig["datasets"].forEach(function(item){
+        if (item["backgroundColor"] === undefined){
+          item["backgroundColor"] = self.getThemeColor("primary")
+        }else{
+          if(Array.isArray(item["backgroundColor"])){
+            item["backgroundColor"] = self.getThemeColorArray(item["backgroundColor"])
+          }else{
+            item["backgroundColor"] = self.getThemeColor(item["backgroundColor"])
+          }
+        }
+        item["hoverBackgroundColor"] = "rgba(0, 0, 0, 0.1)"
+        if (item["borderColor"] === undefined){
+          item["borderColor"] = self.getThemeColor("white")
+        }else{
+          item["borderColor"] = self.getThemeColor(item["borderColor"])
+        }
+        if (item["hoverBorderColor"] === undefined){
+          item["hoverBorderColor"] = self.getThemeColor("white")
+        }else{
+          item["hoverBorderColor"] = self.getThemeColor(item["hoverBorderColor"])
+        }
+        if (item["borderWidth"] === undefined){
+          item["borderWidth"] = 10
+        }
+        if (item["weight"] === undefined){
+          item["weight"] = 1
+        }
+      })
+      this.chartJsInstance = new Chart(chartElement, {
+        type: 'doughnut',
+        data: {
+            labels: this.componentConfig["labels"],
+            datasets: this.componentConfig["datasets"]
+        },
+        options: {
+            legend: {
+              display: this.componentConfig["display_legend"],
+            },
+            cutoutPercentage: this.componentConfig["cutout_percentage"]
+        }
+      });
+    },
+    drawPieChart: function(chartElement){
+      const self = this;
+      this.componentConfig["datasets"].forEach(function(item){
+        if (item["backgroundColor"] === undefined){
+          item["backgroundColor"] = self.getThemeColor("primary")
+        }else{
+          if(Array.isArray(item["backgroundColor"])){
+            item["backgroundColor"] = self.getThemeColorArray(item["backgroundColor"])
+          }else{
+            item["backgroundColor"] = self.getThemeColor(item["backgroundColor"])
+          }
+        }
+        item["hoverBackgroundColor"] = "rgba(0, 0, 0, 0.1)"
+      })
+      this.chartJsInstance = new Chart(chartElement, {
+        type: 'pie',
+        data: {
+            labels: this.componentConfig["labels"],
+            datasets: this.componentConfig["datasets"]
+        },
+        options: {
+            legend: {
+              display: this.componentConfig["display_legend"],
+            }
+        }
+      });
+    },
+  },
+
+  mounted: function() {
+    const style = getComputedStyle(document.body);
+
+    this.defaultColor = style.getPropertyValue('--bs-primary');
+    this.fontColor = style.getPropertyValue('--bs-secondary');
+    this.fontFamily = style.getPropertyValue('--bs-font-sans-serif');
+
+    Chart.defaults.global.defaultFontColor = this.fontColor
+    Chart.defaults.global.defaultFontFamily = this.fontFamily
+    Chart.defaults.global.defaultColor = this.fontFamily
+
+    const chartElement = this.$refs.chart
+
+    if(this.componentConfig["type"] == "bar"){
+      this.drawBarChart(chartElement);
+    }
+    if(this.componentConfig["type"] == "line"){
+      this.drawLineChart(chartElement);
+    }
+    if(this.componentConfig["type"] == "doughnut"){
+      this.drawDoughnutChart(chartElement);
+    }
+    if(this.componentConfig["type"] == "pie"){
+      this.drawPieChart(chartElement);
+    }
+
+  },
+
+  created: function() {
+
+  },
+
+  beforeDestroy: function() {
+
+  },
+});