matestack-ui-bootstrap 1.5.1 → 2.0.0

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

@@ -1,17 +1,19 @@
-class Matestack::Ui::Bootstrap::Components::Breadcrumb < Matestack::Ui::Component
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Breadcrumb < Matestack::Ui::Bootstrap::BaseComponent
 
   optional :items # list of items  with path and text
-  optional class: { as: :bs_class} # adding custom class to breadcrumb list
+  optional class: { as:  :bs_class } # adding custom class to breadcrumb list
   optional :nav_class
 
   def response
-    nav class: nav_class, attributes: { 'aria-label': "breadcrumb" } do
+    nav class: context.nav_class, "aria-label": "breadcrumb" do
       ol breadcrumb_attributes do
-        items&.each_with_index do |item, index|
-          li link_attrs((items.size - 1) == index) do
+        context.items&.each_with_index do |item, index|
+          li link_attrs((context.items.size - 1) == index) do
             case item[:type]
             when :link
-              link item
+              a item
             when :transition
               transition item
             else
@@ -19,7 +21,7 @@ class Matestack::Ui::Bootstrap::Components::Breadcrumb < Matestack::Ui::Componen
             end
           end
         end
-        yield_components
+        yield if block_given?
       end
     end
   end
@@ -29,12 +31,12 @@ class Matestack::Ui::Bootstrap::Components::Breadcrumb < Matestack::Ui::Componen
   def link_attrs(last = false)
     {}.tap do |hash|
       hash[:class] = "breadcrumb-item #{'active' if last}"
-      hash[:attributes] = { 'aria-current': "page" } if last
+      hash[:"aria-current"] = "page" if last
     end
   end
 
   def breadcrumb_attributes
-    html_attributes.merge(
+    options.merge(
       class: breadcrumb_classes
     )
   end
@@ -42,7 +44,7 @@ class Matestack::Ui::Bootstrap::Components::Breadcrumb < Matestack::Ui::Componen
   def breadcrumb_classes
     [].tap do |classes|
       classes << "breadcrumb"
-      classes << bs_class
+      classes << context.bs_class
     end.join(' ').strip
   end
 end

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

@@ -0,0 +1,71 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Button < Matestack::Ui::Bootstrap::BaseComponent
+
+  optional :type, :variant, :size, :outline
+  optional :attributes, class: { as:  :bs_class }
+  optional :transition
+  optional :action
+  optional :onclick
+  optional :link
+
+  def response(&block)
+    if context.transition.present? && context.transition.is_a?(Hash)
+      transition button_attributes.merge(context.transition.merge({role: "button"})) do
+        inner_response(&block)
+      end
+    elsif context.action.present? && context.action.is_a?(Hash)
+      action button_attributes.merge(context.action.merge({role: "button"})) do
+        inner_response(&block)
+      end
+    elsif context.onclick.present? && context.onclick.is_a?(Hash)
+      onclick button_attributes.merge(context.onclick.merge({role: "button"})) do
+        inner_response(&block)
+      end
+    elsif context.link.present? && context.link.is_a?(Hash)
+      a button_attributes.merge(context.link.merge({role: "button"})) do
+        inner_response(&block)
+      end
+    else
+      button_response(&block)
+    end
+  end
+
+  def button_response(&block)
+    button button_attributes do
+      inner_response(&block)
+    end
+  end
+
+  def inner_response(&block)
+    plain context.text if context.text
+    yield if block_given?
+  end
+
+  protected
+
+  def button_attributes
+    options.tap do |opts|
+      opts[:type] = context.type || 'button'
+      opts[:class] = button_classes
+      opts.merge(context.attributes || {})
+    end
+  end
+
+  def button_classes
+    [].tap do |classes|
+      classes << 'btn'
+      # btn variants outlined or solid background
+      if context.outline
+        classes << "btn-outline-#{context.variant.to_s.gsub('_', '-') || 'primary'}"
+      else
+        classes << (context.variant ? "btn-#{context.variant.to_s.gsub('_', '-')}" : 'btn-primary')
+      end
+      # btn size
+      classes << "btn-#{context.size}" if context.size
+      # custom classes
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+
+end

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

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

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

@@ -0,0 +1,105 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Card < Matestack::Ui::Bootstrap::BaseComponent
+
+  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
+
+  def response
+    div card_attributes do
+      if context.header || slots && slots[:header]
+        header_partial
+      end
+
+      img_partial :top unless context.img_pos == :bottom
+      div class: context.content_wrapper_class do
+        body_partial if context.title || context.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 if block_given? end
+
+        img_partial :bottom if context.img_pos == :bottom
+
+        footer_partial if context.footer || slots && slots[:footer]
+      end
+    end
+  end
+
+  protected
+
+  def header_partial
+    header = self.context.header.is_a?(Hash) ? self.context.header : { text: self.context.header }
+    div class: "card-header #{header[:class]}" do
+      plain header[:text] if header[:text].present?
+      slot :header if slots && slots[:header]
+    end
+  end
+
+  def body_partial
+    div class: "card-body" do
+      # title
+      card_title(context.title, "card-title")
+      # subtitle
+      card_title(context.subtitle, 6, "card-subtitle text-muted")
+      # body
+      if context.body.is_a? Hash
+        paragraph class: "card-text #{body[:class]}" do
+          plain context.body[:text]
+        end
+      elsif context.body
+        paragraph class: "card-text" do
+          plain context.body
+        end
+      end
+      slot :body if slots && slots[:body]
+    end
+  end
+
+  def footer_partial
+    footer = self.context.footer.is_a?(Hash) ? self.context.footer : { text: self.context.footer }
+    div class: "card-footer #{footer[:class]}" do
+      plain footer[:text] if footer[:text].present?
+      slot :footer if slots && slots[:footer]
+    end
+  end
+
+  def img_partial pos
+    img class: "card-img-#{pos}", path: context.img_path, alt: context.alt_text if context.img_path.present?
+  end
+
+  def card_attributes
+    options.merge(
+      class: card_classes
+    )
+  end
+
+  def card_classes
+    [].tap do |classes|
+      classes << 'card'
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+
+  def card_title(options, default_size = 5, title_class)
+    if options.is_a? Hash
+      heading context.text, size: (context.size || default_size), class: "#{context.bs_class} #{title_class}"
+    elsif options
+      heading size: default_size, class: title_class do
+        plain options
+      end
+    end
+  end
+
+end

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

@@ -1,6 +1,9 @@
 import * as bootstrap from 'bootstrap'
+import Vue from 'vue/dist/vue.esm'
 
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-carousel', {
+import MatestackUiCore from 'matestack-ui-core'
+
+Vue.component('matestack-ui-bootstrap-carousel', {
   mixins: [MatestackUiCore.componentMixin],
   data() {
     return {
@@ -31,48 +34,48 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-carousel', {
     const self = this;
     var myCarousel = self.$el;
     self.carouselInstance = new bootstrap.Carousel(myCarousel, {
-      interval: (self.componentConfig['interval'] || 5000)
+      interval: (self.props['interval'] || 5000)
     })
   },
 
   created: function() {
     const self = this
-    if(self.componentConfig["cycle_on"] != undefined){
-      var cycle_events = self.componentConfig["cycle_on"].split(",")
+    if(self.props["cycle_on"] != undefined){
+      var cycle_events = self.props["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(",")
+    if(self.props["pause_on"] != undefined){
+      var pause_events = self.props["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(",")
+    if(self.props["prev_on"] != undefined){
+      var prev_events = self.props["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(",")
+    if(self.props["next_on"] != undefined){
+      var next_events = self.props["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(",")
+    if(self.props["cycle_on"] != undefined){
+      var cycle_events = self.props["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(",")
+    if(self.props["pause_on"] != undefined){
+      var pause_events = self.props["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(",")
+    if(self.props["prev_on"] != undefined){
+      var prev_events = self.props["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(",")
+    if(self.props["next_on"] != undefined){
+      var next_events = self.props["next_on"].split(",")
       next_events.forEach(next_event => MatestackUiCore.matestackEventHub.$off(next_event.trim(), self.next));
     }
   },

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

@@ -0,0 +1,103 @@
+require_relative "../base_vue_js_component"
+
+class Matestack::Ui::Bootstrap::Components::Carousel < Matestack::Ui::Bootstrap::BaseVueJsComponent
+  vue_name "matestack-ui-bootstrap-carousel"
+
+  optional :start, :controls, :indicators, :fade, :interval, :variant
+  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 response
+    div carousel_attributes do
+      # carousel indicator
+      indicator_partial if context.indicators.present?
+      # carousel content
+      div class: "carousel-inner" do
+        yield if block_given?
+        carousel_partial if context.items
+      end
+      controls_partial if context.controls
+    end
+  end
+
+  protected
+
+  def vue_props
+    {}.tap do |props|
+      props["carousel-id"] = carousel_id
+      props[:interval] = context.interval
+      props[:cycle_on] = context.cycle_on
+      props[:pause_on] = context.pause_on
+      props[:prev_on] = context.prev_on
+      props[:next_on] = context.next_on
+    end
+  end
+
+  def indicator_partial
+    ol class: "carousel-indicators" do
+      context.items.size.times do |index|
+        li data: { "bs-target": "##{carousel_id}", 'bs-slide-to': index },
+          class: "#{'active' if index == (context.start || 0) }"
+      end
+    end
+  end
+
+  def carousel_partial
+    context.items.each_with_index do |item, index|
+      div class: "carousel-item #{'active' if index == (context.start || 0) } #{item[:class]}".strip,
+        data: { "bs-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 do
+              plain item[:title]
+            end
+            paragraph do
+              plain item[:text]
+            end
+          end
+        end
+      end
+    end
+  end
+
+  def controls_partial
+    a class: "carousel-control-prev", data: { "bs-target": "##{carousel_id}", "bs-slide": :prev }, 'role': "button" do
+      span class: "carousel-control-prev-icon", 'aria-hidden': "true"
+      span class: "visually-hidden" do
+        plain "Previous"
+      end
+    end
+    a class: "carousel-control-next", data: { "bs-target": "##{carousel_id}", "bs-slide": :next }, 'role': "button" do
+      span class: "carousel-control-next-icon", 'aria-hidden': "true"
+      span class: "visually-hidden" do
+        plain "Next"
+      end
+    end
+  end
+
+  def carousel_attributes
+    options.merge(
+      id: carousel_id,
+      class: carousel_classes,
+      data: { "bs-ride": 'carousel', "bs-interval": (context.interval || 5000) }
+    )
+  end
+
+  def carousel_classes
+    [].tap do |classes|
+      classes << 'carousel slide'
+      classes << 'carousel-fade' if context.fade
+      classes << 'carousel-dark' if context.variant == :dark
+      #custom classes
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+
+  def carousel_id
+    @carousel_id ||= "matestack-carousel-#{SecureRandom.hex}"
+  end
+
+end