matestack-ui-bootstrap 1.5.1 → 3.0.0.rc1

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/lib/matestack/ui/bootstrap/components/carousel.js

@@ -0,0 +1,84 @@
+import * as bootstrap from 'bootstrap'
+
+import MatestackUiVueJs from 'matestack-ui-vuejs'
+
+const carouselComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
+  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.getElement();
+    self.carouselInstance = new bootstrap.Carousel(myCarousel, {
+      interval: (self.props['interval'] || 5000)
+    })
+  },
+
+  created: function() {
+    const self = this
+    if(self.props["cycle_on"] != undefined){
+      var cycle_events = self.props["cycle_on"].split(",")
+      cycle_events.forEach(cycle_event => MatestackUiVueJs.eventHub.$on(cycle_event.trim(), self.cycle));
+    }
+    if(self.props["pause_on"] != undefined){
+      var pause_events = self.props["pause_on"].split(",")
+      pause_events.forEach(pause_event => MatestackUiVueJs.eventHub.$on(pause_event.trim(), self.pause));
+    }
+    if(self.props["prev_on"] != undefined){
+      var prev_events = self.props["prev_on"].split(",")
+      prev_events.forEach(prev_event => MatestackUiVueJs.eventHub.$on(prev_event.trim(), self.prev));
+    }
+    if(self.props["next_on"] != undefined){
+      var next_events = self.props["next_on"].split(",")
+      next_events.forEach(next_event => MatestackUiVueJs.eventHub.$on(next_event.trim(), self.next));
+    }
+  },
+
+  beforeUnmount: function() {
+    const self = this
+    if(self.props["cycle_on"] != undefined){
+      var cycle_events = self.props["cycle_on"].split(",")
+      cycle_events.forEach(cycle_event => MatestackUiVueJs.eventHub.$off(cycle_event.trim(), self.cycle));
+    }
+
+    if(self.props["pause_on"] != undefined){
+      var pause_events = self.props["pause_on"].split(",")
+      pause_events.forEach(pause_event => MatestackUiVueJs.eventHub.$off(pause_event.trim(), self.pause));
+    }
+
+    if(self.props["prev_on"] != undefined){
+      var prev_events = self.props["prev_on"].split(",")
+      prev_events.forEach(prev_event => MatestackUiVueJs.eventHub.$off(prev_event.trim(), self.prev));
+    }
+    if(self.props["next_on"] != undefined){
+      var next_events = self.props["next_on"].split(",")
+      next_events.forEach(next_event => MatestackUiVueJs.eventHub.$off(next_event.trim(), self.next));
+    }
+  },
+}
+
+export default carouselComponent

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

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

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

data/lib/matestack/ui/bootstrap/components/collapse.js

@@ -0,0 +1,89 @@
+import * as bootstrap from 'bootstrap'
+
+import MatestackUiVueJs from 'matestack-ui-vuejs'
+
+const collapseComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
+  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;
+    const collapseElement = self.getElement()
+    self.collapseInstance = new bootstrap.Collapse(collapseElement, {
+      toggle: false
+    })
+  },
+
+  created: function() {
+    const self = this
+
+    // toggle_on event registration
+    if(self.props["toggle_on"] != undefined){
+      var toggle_events = self.props["toggle_on"].split(",")
+      toggle_events.forEach(toggle_event => MatestackUiVueJs.eventHub.$on(toggle_event.trim(), self.toggle));
+    }
+    // show_on event registration
+    if(self.props["show_on"] != undefined){
+      var show_events = self.props["show_on"].split(",")
+      show_events.forEach(show_event => MatestackUiVueJs.eventHub.$on(show_event.trim(), self.show));
+    }
+    // hide_on event registration
+    if(self.props["hide_on"] != undefined){
+      var hide_events = self.props["hide_on"].split(",")
+      hide_events.forEach(hide_event => MatestackUiVueJs.eventHub.$on(hide_event.trim(), self.hide));
+    }
+    // dispose_on event registration
+    if(self.props["dispose_on"] != undefined){
+      var dispose_events = self.props["dispose_on"].split(",")
+      dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$on(dispose_event.trim(), self.dispose));
+    }
+  },
+
+  beforeUnmount: function(){
+    const self = this
+    if(self.props["toggle_on"] != undefined){
+      var show_events = self.props["toggle_on"].split(",")
+      show_events.forEach(show_event => MatestackUiVueJs.eventHub.$off(show_event.trim(), self.show));
+    }
+    if(self.props["show_on"] != undefined){
+      var show_events = self.props["show_on"].split(",")
+      show_events.forEach(show_event => MatestackUiVueJs.eventHub.$off(show_event.trim(), self.show));
+    }
+    if(self.props["hide_on"] != undefined){
+      var hide_events = self.props["hide_on"].split(",")
+      hide_events.forEach(hide_event => MatestackUiVueJs.eventHub.$off(hide_event.trim(), self.hide));
+    }
+    if(self.props["dispose_on"] != undefined){
+      var dispose_events = self.props["dispose_on"].split(",")
+      dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$off(dispose_event.trim(), self.dispose));
+    }
+  }
+}
+
+export default collapseComponent

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

@@ -0,0 +1,54 @@
+require_relative "../base_vue_js_component"
+
+class Matestack::Ui::Bootstrap::Components::Collapse < Matestack::Ui::Bootstrap::BaseVueJsComponent
+  vue_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 context.card
+      yield if block_given?
+    end
+  end
+
+  protected
+
+  def vue_props
+    {}.tap do |props|
+      props[:toggle_on] = context.toggle_on
+      props[:show_on] = context.show_on
+      props[:hide_on] = context.hide_on
+      props[:dispose_on] = context.dispose_on
+    end
+  end
+
+  def card_partial
+    tmp_card = context.card.is_a?(Hash) ? context.card : { text: context.card }
+    div class: "card card-body #{tmp_card[:class]}".strip do
+      plain tmp_card[:text]
+    end
+  end
+
+  def collapse_attributes
+    options.merge(
+      class: collapse_classes,
+      data: { "bs-parent": context.parent },
+      'aria-labelledby': "#{context.labelledby}"
+    )
+  end
+
+  def collapse_classes
+    [].tap do |classes|
+      classes << 'collapse'
+      # mulit target
+      classes << 'multi-collapse' if context.multi
+      #custom classes
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+
+end

data/lib/matestack/ui/bootstrap/components/dropdown.js

@@ -0,0 +1,19 @@
+import * as bootstrap from 'bootstrap'
+
+import MatestackUiVueJs from 'matestack-ui-vuejs'
+
+const dropdownComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
+  data() {
+    return {
+      dropdownInstance: undefined
+    };
+  },
+  mounted() {
+    // var mydropdown = document.getElementById(this.props["dropdown-id"])
+    // this.dropdownInstance = new bootstrap.Dropdown(mydropdown)
+  }
+}
+
+export default dropdownComponent

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

@@ -1,18 +1,22 @@
-class Matestack::Ui::Bootstrap::Components::Dropdown < Matestack::Ui::VueJsComponent
-  vue_js_component_name "matestack-ui-bootstrap-dropdown"
+require_relative "../base_vue_js_component"
 
-  optional :variant, :text, :btn_class # button attributes
+class Matestack::Ui::Bootstrap::Components::Dropdown < Matestack::Ui::Bootstrap::BaseVueJsComponent
+  vue_name "matestack-ui-bootstrap-dropdown"
+
+  optional :variant, :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 class: { as:  :bs_class }
+  optional :id, :data
+
   optional :size
 
   def prepare
-    @bs_menu = self.menu.is_a?(Hash) ? self.menu : { items: self.menu }
+    @bs_menu = context.menu.is_a?(Hash) ? context.menu : { items: context.menu }
   end
+
   def response
     div dropdown_attributes do
       split_btn_partial if slots && slots[:split_btn]
@@ -20,7 +24,7 @@ class Matestack::Ui::Bootstrap::Components::Dropdown < Matestack::Ui::VueJsCompo
 
       ul menu_attributes do
         menu_partial unless @bs_menu[:items].blank?
-        yield_components
+        yield if block_given?
       end
     end
   end
@@ -28,7 +32,7 @@ class Matestack::Ui::Bootstrap::Components::Dropdown < Matestack::Ui::VueJsCompo
   protected
 
   def split_btn_partial
-    slot slots[:split_btn]
+    slot :split_btn
     bs_btn btn_attributes do
       span class:"visually-hidden" do plain "Toggle Dropdown" end
     end
@@ -42,13 +46,13 @@ class Matestack::Ui::Bootstrap::Components::Dropdown < Matestack::Ui::VueJsCompo
       when :divider
         li do hr class: "dropdown-divider" end
       when :link
-        li do link item.merge(class: "dropdown-item #{item[:class]}") end
+        li do a 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
       when :onclick
-        li do onclick item.merge(class: "dropdown-item #{item[:class]}", attributes: { style: "cursor: pointer;" }) do plain item[:text] end end
+        li do onclick item.merge(class: "dropdown-item #{item[:class]}", style: "cursor: pointer;" ) do plain item[:text] end end
       else
         span class: "dropdown-item-text" do plain item[:text] end
       end
@@ -56,7 +60,7 @@ class Matestack::Ui::Bootstrap::Components::Dropdown < Matestack::Ui::VueJsCompo
   end
 
   def dropdown_attributes
-    html_attributes.merge(
+    options.merge(
       class: dropdown_classes
     )
   end
@@ -64,28 +68,28 @@ class Matestack::Ui::Bootstrap::Components::Dropdown < Matestack::Ui::VueJsCompo
   def dropdown_classes
     [].tap do |classes|
       classes << ((slots && slots[:split_btn]) ? 'btn-group' : 'dropdown')
-      classes << "drop#{direction}" if direction.present?
-      classes << bs_class
+      classes << "drop#{context.direction}" if context.direction.present?
+      classes << context.bs_class
     end.join(' ').strip
   end
 
   def btn_attributes
     {
-      id: bs_id,
-      text: "#{text unless (slots && slots[:split_btn])}",
-      variant: (variant || :primary),
+      id: context.id,
+      text: "#{context.text unless (slots && slots[:split_btn])}",
+      variant: (context.variant || :primary),
       class: btn_classes,
       data: btn_data,
-      size: size,
-      attributes: { 'aria-expanded': "false" }
+      size: context.size,
+      'aria-expanded': "false"
     }
   end
 
   def btn_data
-    (bs_data || {}).tap do |hash|
+    (context.data || {}).tap do |hash|
       hash["bs-toggle"] = 'dropdown'
-      hash[:offset] = offset if offset.present?
-      hash[:reference] = reference if reference.present?
+      hash[:offset] = context.offset if context.offset.present?
+      hash[:reference] = context.reference if context.reference.present?
     end
   end
 
@@ -94,23 +98,23 @@ class Matestack::Ui::Bootstrap::Components::Dropdown < Matestack::Ui::VueJsCompo
       classes << 'dropdown-toggle'
       classes << 'dropdown-toggle-split' if slots && slots[:split_btn]
       #custom classes
-      classes << btn_class
+      classes << context.btn_class
     end.join(' ').strip
   end
 
   def menu_attributes
     {
       class: menu_classes,
-      attributes: { 'aria-labelledby': bs_id }
+      'aria-labelledby': context.id
     }
   end
 
   def menu_classes
     [].tap do |classes|
       classes << 'dropdown-menu'
-      classes << "dropdown-menu-#{align}" if align.present?
+      classes << "dropdown-menu-#{context.align}" if context.align.present?
       #custom classes
-      classes << @bs_menu[:class] if menu.is_a?(Hash)
+      classes << @bs_menu[:class] if context.menu.is_a?(Hash)
     end.join(' ').strip
   end
 

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

@@ -0,0 +1,21 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Icon < Matestack::Ui::Bootstrap::BaseComponent
+
+  required :name
+  optional :size
+  optional class: { as:  :bs_class }
+
+  def response
+    svg class: "bi #{context.bs_class}", width: get_size, height: get_size, fill: 'currentColor' do
+      unescape("<use xlink:href='#{asset_path("icons/bootstrap-icons.svg")}##{context.name}'/>")
+    end
+  end
+
+  def get_size
+    context.size || 20
+  end
+
+
+
+end