matestack-ui-bootstrap 1.4.0 → 2.1.0

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

@@ -1,54 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Button < Matestack::Ui::Component
-
-  optional :text, :type, :variant, :size, :outline
-  optional attributes: { as: :bs_attrs }, class: { as: :bs_class }
-  optional :is_transition
-
-  def response
-    if is_transition
-      transition button_attributes.merge({path: root_path}) do
-        inner_response
-      end
-    else
-      button_response
-    end
-  end
-
-  def button_response
-    button button_attributes do
-      inner_response
-    end
-  end
-
-  def inner_response
-    plain text if text
-    yield_components
-  end
-
-  protected
-
-  def button_attributes
-    html_attributes.merge(
-      type: type || 'button',
-      class: button_classes,
-      attributes: bs_attrs
-    )
-  end
-
-  def button_classes
-    [].tap do |classes|
-      classes << 'btn'
-      # btn variants outlined or solid background
-      if outline
-        classes << "btn-outline-#{variant.to_s.gsub('_', '-') || 'primary'}"
-      else
-        classes << (variant ? "btn-#{variant.to_s.gsub('_', '-')}" : 'btn-primary')
-      end
-      # btn size
-      classes << "btn-#{size}" if size
-      # custom classes
-      classes << bs_class
-    end.join(' ').strip
-  end
-
-end

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

@@ -1,36 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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.rb

@@ -1,85 +0,0 @@
-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

@@ -1,232 +0,0 @@
-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() {
-
-  },
-});