matestack-ui-bootstrap 1.4.0

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

@@ -0,0 +1,71 @@
+class Matestack::Ui::Bootstrap::Components::Chart < Matestack::Ui::VueJsComponent
+  vue_js_component_name "matestack-ui-bootstrap-chart"
+
+  requires :type
+  requires :datasets
+  optional :labels
+  optional :height
+  optional :width
+  optional :display_legend
+  optional :display_x_axes
+  optional :display_y_axes
+  optional :cutout_percentage
+  optional class: { as: :bs_class }
+
+  def setup
+    @component_config[:type] = type
+    @component_config[:datasets] = datasets
+    @component_config[:labels] = labels
+    @component_config[:display_legend] = !display_legend.nil? ? display_legend : false
+    @component_config[:display_x_axes] = !display_x_axes.nil? ? display_x_axes : true
+    @component_config[:display_y_axes] = !display_y_axes.nil? ? display_y_axes : true
+    @component_config[:display_y_axes] = !display_y_axes.nil? ? display_y_axes : true
+    @component_config[:cutout_percentage] = !cutout_percentage.nil? ? cutout_percentage : 70
+  end
+
+  def response
+    div class: "chart-container #{bs_class}", attributes: { style: "width: 100%; height: 100%;" } do
+      plain "<canvas ref='chart'></canvas>".html_safe
+    end
+  end
+
+end
+
+# chart class: "w-50", type: :bar, datasets: [
+#   {
+#     label: "€",
+#     data: [total, last_7_days, last_30_days],
+#     backgroundColor: :primary
+#   },
+# ], labels: ["total", "last 7 days", "last 30 days"]
+
+# chart type: :doughnut, datasets: [
+#   {
+#     label: "€",
+#     data: [total, last_7_days, last_30_days],
+#     backgroundColor: [:orange, :secondary, :primary]
+#   },
+# ], labels: ["total", "last 7 days", "last 30 days"]
+
+# chart type: :line, datasets: [
+#   {
+#     label: "€",
+#     data: [total, last_7_days, last_30_days],
+#     borderColor: :primary,
+#     pointRadius: 0
+#   },
+#   {
+#     label: "€",
+#     data: [last_7_days, total, last_30_days],
+#     borderColor: :danger,
+#     fill: false
+#   },
+# ], labels: ["total", "last 7 days", "last 30 days"], display_x_axes: false, display_y_axes: false
+
+# chart type: :pie, datasets: [
+#   {
+#     label: "€",
+#     data: [total, last_7_days, last_30_days],
+#     backgroundColor: [:orange, :secondary, :primary]
+#   },
+# ], labels: ["total", "last 7 days", "last 30 days"]

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

@@ -0,0 +1,30 @@
+class Matestack::Ui::Bootstrap::Components::Close < Matestack::Ui::Component
+
+  optional :dismiss, class: { as: :bs_class }
+  optional :attributes
+
+  def response
+    button close_attributes do
+      span attributes: { 'aria-hidden': 'true' } do
+        # plain "&times;".html_safe
+      end
+    end
+  end
+
+  def close_attributes
+    html_attributes.merge(
+      class: close_classes,
+      data: { dismiss: "#{dismiss}" },
+      type: 'button',
+      attributes: (attributes || {}).merge({ 'aria-label': 'Close' })
+    )
+  end
+
+  def close_classes
+    [].tap do |classes|
+      classes << 'btn-close'
+      classes << bs_class
+    end.join(' ').strip
+  end
+
+end

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

@@ -0,0 +1,84 @@
+import * as bootstrap from 'bootstrap'
+
+MatestackUiCore.Vue.component('matestack-ui-bootstrap-collapse', {
+  mixins: [MatestackUiCore.componentMixin],
+  data() {
+    return {
+      collapseInstance: undefined
+    };
+  },
+
+  methods: {
+    toggle: function (){
+      const self = this;
+      self.collapseInstance.toggle();
+    },
+    show: function(){
+      const self = this;
+      self.collapseInstance.show();
+    },
+    hide: function(){
+      const self = this;
+      self.collapseInstance.hide();
+    },
+    dispose: function(){
+      const self = this;
+      self.collapseInstance.hide();
+      self.collapseInstance.dispose();
+      // ToDo: Error occurs after dispose when click on the button again
+    }
+  },
+
+  mounted: function() {
+    const self = this;
+    var myCollapse = self.$el;
+    self.collapseInstance = new bootstrap.Collapse(myCollapse, {
+      toggle: false
+    })
+  },
+
+  created: function() {
+    const self = this
+
+    // toggle_on event registration
+    if(self.componentConfig["toggle_on"] != undefined){
+      var toggle_events = self.componentConfig["toggle_on"].split(",")
+      toggle_events.forEach(toggle_event => MatestackUiCore.matestackEventHub.$on(toggle_event.trim(), self.toggle));
+    }
+    // show_on event registration
+    if(self.componentConfig["show_on"] != undefined){
+      var show_events = self.componentConfig["show_on"].split(",")
+      show_events.forEach(show_event => MatestackUiCore.matestackEventHub.$on(show_event.trim(), self.show));
+    }
+    // hide_on event registration
+    if(self.componentConfig["hide_on"] != undefined){
+      var hide_events = self.componentConfig["hide_on"].split(",")
+      hide_events.forEach(hide_event => MatestackUiCore.matestackEventHub.$on(hide_event.trim(), self.hide));
+    }
+    // dispose_on event registration
+    if(self.componentConfig["dispose_on"] != undefined){
+      var dispose_events = self.componentConfig["dispose_on"].split(",")
+      dispose_events.forEach(dispose_event => MatestackUiCore.matestackEventHub.$on(dispose_event.trim(), self.dispose));
+    }
+  },
+
+  beforeDestroy: function(){
+    const self = this
+    if(self.componentConfig["toggle_on"] != undefined){
+      var show_events = self.componentConfig["toggle_on"].split(",")
+      show_events.forEach(show_event => MatestackUiCore.matestackEventHub.$off(show_event.trim(), self.show));
+    }
+    if(self.componentConfig["show_on"] != undefined){
+      var show_events = self.componentConfig["show_on"].split(",")
+      show_events.forEach(show_event => MatestackUiCore.matestackEventHub.$off(show_event.trim(), self.show));
+    }
+    if(self.componentConfig["hide_on"] != undefined){
+      var hide_events = self.componentConfig["hide_on"].split(",")
+      hide_events.forEach(hide_event => MatestackUiCore.matestackEventHub.$off(hide_event.trim(), self.hide));
+    }
+    if(self.componentConfig["dispose_on"] != undefined){
+      var dispose_events = self.componentConfig["dispose_on"].split(",")
+      dispose_events.forEach(dispose_event => MatestackUiCore.matestackEventHub.$off(dispose_event.trim(), self.dispose));
+    }
+  }
+});

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

@@ -0,0 +1,43 @@
+class Matestack::Ui::Bootstrap::Components::Collapse < Matestack::Ui::VueJsComponent
+  vue_js_component_name "matestack-ui-bootstrap-collapse" 
+  
+  optional :multi, :labelledby, :parent, class: { as: :bs_class }
+  optional :card # possible keys: class, text
+  # event trigger
+  optional :toggle_on, :show_on, :hide_on, :dispose_on
+
+  def response 
+    div collapse_attributes do
+      card_partial if card
+      yield_components
+    end
+  end
+
+  protected
+
+  def card_partial
+    tmp_card = card.is_a?(Hash) ? self.card : { text: self.card }
+    div class: "card card-body #{tmp_card[:class]}".strip do
+      plain tmp_card[:text]
+    end
+  end
+
+  def collapse_attributes
+    html_attributes.merge(
+      class: collapse_classes,
+      data: { parent: parent },
+      attributes: { 'aria-labelledby': "#{labelledby}" }
+    )
+  end
+
+  def collapse_classes
+    [].tap do |classes|
+      classes << 'collapse'
+      # mulit target
+      classes << 'multi-collapse' if multi
+      #custom classes 
+      classes << bs_class
+    end.join(' ').strip
+  end
+
+end

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

@@ -0,0 +1,14 @@
+import * as bootstrap from 'bootstrap'
+
+MatestackUiCore.Vue.component('matestack-ui-bootstrap-dropdown', {
+  mixins: [MatestackUiCore.componentMixin],
+  data() {
+    return {
+      dropdownInstance: undefined
+    };
+  },
+  mounted() {
+    // var mydropdown = document.getElementById(this.componentConfig["dropdown-id"])
+    // this.dropdownInstance = new bootstrap.Dropdown(mydropdown)
+  }
+});

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

@@ -0,0 +1,116 @@
+class Matestack::Ui::Bootstrap::Components::Dropdown < Matestack::Ui::VueJsComponent
+  vue_js_component_name "matestack-ui-bootstrap-dropdown"
+
+  optional :variant, :text, :btn_class # button attributes
+  optional :direction, :align, :offset, :reference
+  # dropdown menu attributes, expects an array of items with possible keys: type, path, text
+  # or hash with possible keys: items, class
+  optional :menu
+  optional class: { as: :bs_class }, id: { as: :bs_id }, data: { as: :bs_data }
+  optional :slots
+  optional :size
+
+  def prepare
+    @bs_menu = self.menu.is_a?(Hash) ? self.menu : { items: self.menu }
+  end
+  def response
+    div dropdown_attributes do
+      split_btn_partial if slots && slots[:split_btn]
+      bs_btn btn_attributes unless slots && slots[:split_btn]
+
+      ul menu_attributes do
+        menu_partial unless @bs_menu[:items].blank?
+        yield_components
+      end
+    end
+  end
+
+  protected
+
+  def split_btn_partial
+    slot slots[:split_btn]
+    bs_btn btn_attributes do
+      span class:"sr-only" do plain "Toggle Dropdown" end
+    end
+  end
+
+  def menu_partial
+    @bs_menu[:items].each do |item|
+      case item[:type]
+      when :button
+        li do bs_btn item.merge(class: "dropdown-item #{item[:class]}") end
+      when :divider
+        li do hr class: "dropdown-divider" end
+      when :link
+        li do link item.merge(class: "dropdown-item #{item[:class]}") end
+      when :transition
+        li do transition item.merge(class: "dropdown-item #{item[:class]}") end
+      when :action
+        li do action item.merge(class: "dropdown-item #{item[:class]}") do plain item[:text] end end
+      else
+        span class: "dropdown-item-text" do plain item[:text] end
+      end
+    end
+  end
+
+  def dropdown_attributes
+    html_attributes.merge(
+      class: dropdown_classes
+    )
+  end
+
+  def dropdown_classes
+    [].tap do |classes|
+      classes << ((slots && slots[:split_btn]) ? 'btn-group' : 'dropdown')
+      classes << "drop#{direction}" if direction.present?
+      classes << bs_class
+    end.join(' ').strip
+  end
+
+  def btn_attributes
+    {
+      id: bs_id,
+      text: "#{text unless (slots && slots[:split_btn])}",
+      variant: (variant || :primary),
+      class: btn_classes,
+      data: btn_data,
+      size: size,
+      attributes: { 'aria-expanded': "false" }
+    }
+  end
+
+  def btn_data
+    (bs_data || {}).tap do |hash|
+      hash["bs-toggle"] = 'dropdown'
+      hash[:offset] = offset if offset.present?
+      hash[:reference] = reference if reference.present?
+    end
+  end
+
+  def btn_classes
+    [].tap do |classes|
+      classes << 'dropdown-toggle'
+      classes << 'dropdown-toggle-split' if slots && slots[:split_btn]
+      #custom classes
+      classes << btn_class
+    end.join(' ').strip
+  end
+
+  def menu_attributes
+    {
+      class: menu_classes,
+      data: { toggle: 'dropdown' },
+      attributes: { 'aria-labelledby': bs_id }
+    }
+  end
+
+  def menu_classes
+    [].tap do |classes|
+      classes << 'dropdown-menu'
+      classes << "dropdown-menu-#{align}" if align.present?
+      #custom classes
+      classes << @bs_menu[:class] if menu.is_a?(Hash)
+    end.join(' ').strip
+  end
+
+end

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

@@ -0,0 +1,19 @@
+class Matestack::Ui::Bootstrap::Components::Icon < Matestack::Ui::Component
+
+  requires :name
+  optional :size
+  optional class: { as: :bs_class }
+
+  def response
+    plain " <svg class='bi #{bs_class}' width='#{get_size}' height='#{get_size}' fill='currentColor'>
+              <use xlink:href='#{image_url("icons/bootstrap-icons.svg")}##{name}'/>
+            </svg>".html_safe
+  end
+
+  def get_size
+    size || 20
+  end
+
+
+
+end

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

@@ -0,0 +1,83 @@
+class Matestack::Ui::Bootstrap::Components::ListGroup < Matestack::Ui::Component
+  html_attributes :role
+
+  #  optional :id 
+  optional :items 
+  optional :horizontal, :horizontal_size, :checkbox
+  optional :flush, :tablist, class: { as: :bs_class }
+
+
+  def response 
+    ul list_group_attributes do
+      yield_components unless items
+      list_partial if items
+    end
+  end
+
+  protected
+
+  def list_partial
+    items.each do |item|
+      case item[:type]        
+      when :link 
+        link link_attrs(item)  do
+          plain item[:text]
+        end
+      when :transition 
+        transition link_attrs(item)  do
+          plain item[:text]
+        end
+      when :label 
+        label id: item[:id], class: "#{list_classes item, false}" do
+          input class: "form-check-input me-1", attributes: { 'type': "checkbox", 'value': "" } if checkbox
+          plain item[:text]
+        end
+      else
+        li id: item[:id], class: "#{list_classes item, false}" do
+          input class: "form-check-input me-1", attributes: { 'type': "checkbox", 'value': "", 'aria-label': "#{item[:text]}" } if checkbox
+          plain item[:text]
+        end
+      end
+    end
+  end
+
+  def list_group_attributes
+    attributes = {}.tap do |hash|
+      hash[:class] = list_group_classes
+      hash[:attributes] = { role: "tablist" } if tablist
+    end
+    html_attributes.merge(
+      attributes
+    )
+  end
+
+  def list_group_classes
+    [].tap do |classes|
+      classes << 'list-group'
+      classes << (horizontal_size.present? ? "list-group-horizontal-#{horizontal_size}": "list-group-horizontal") if horizontal
+      classes << 'list-group-flush' if flush
+      classes << bs_class
+    end.join(' ').strip
+  end
+
+  def link_attrs(item)
+    {}.tap do |hash|
+      hash[:id] = item[:id]
+      hash[:class] = "#{list_classes item, true}"
+      hash[:data] = { toggle: "list" } if tablist
+      hash[:attributes] = { 'aria-controls': "#{id}", role: "tab" } if tablist
+      hash[:path] = item[:path]
+    end
+  end
+
+  def list_classes(item, action)
+    [].tap do |classes|
+      classes << 'list-group-item'
+      classes << 'list-group-item-action' if action
+      classes << "list-group-item-#{item[:variant]}" if item[:variant].present?
+      classes << 'active' if item[:active]
+      classes << item[:class]
+    end.join(' ').strip
+  end
+
+end