matestack-ui-bootstrap 1.5.1 → 3.0.0.rc1

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

@@ -1,53 +0,0 @@
-import * as bootstrap from 'bootstrap'
-
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-alert', {
-  mixins: [MatestackUiCore.componentMixin],
-
-  data() {
-    return {
-      alertInstance: undefined,
-    };
-  },
-
-  methods: {
-    close: function (){
-      this.alertInstance.close()
-    },
-    dispose: function (){
-      this.alertInstance.dispose()
-      // this.alertInstance = new bootstrap.Alert(self.$el)
-    }
-  },
-
-  mounted: function() {
-    const self = this
-    var alert = self.$el
-    self.alertInstance = new bootstrap.Alert(alert)
-  },
-
-  created: function() {
-    const self = this
-    // close_on event registration
-    if(self.componentConfig["close_on"] != undefined){
-      var close_events = self.componentConfig["close_on"].split(",")
-      close_events.forEach(close_event => MatestackUiCore.matestackEventHub.$on(close_event.trim(), self.close));
-    }
-    // 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["close_on"] != undefined){
-      var closen_events = self.componentConfig["close_on"].split(",")
-      closen_events.forEach(close_event => MatestackUiCore.matestackEventHub.$off(close_event.trim(), self.close));
-    }
-    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/alert.rb

@@ -1,34 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Alert < Matestack::Ui::VueJsComponent
-  vue_js_component_name "matestack-ui-bootstrap-alert"
-
-  optional :title, :text, :variant, :dismissible, :animate, :title_size, class: { as: :bs_class }
-  optional :close_on, :dispose_on # event names on which occourences we close or dispose the modal
-
-  def response
-    div alert_attributes do
-      heading size: (title_size || 4), class: 'alert-heading', text: title if title
-      plain text if text
-      yield_components
-      bs_close dismiss: "alert" if dismissible
-    end
-  end
-
-  protected
-
-  def alert_classes
-    classes = ['alert']
-    classes << "alert-#{variant || "primary"}"
-    classes << "alert-dismissible" if dismissible
-    classes << "fade show" if animate
-    classes << bs_class
-    classes.join(' ')
-  end
-
-  def alert_attributes
-    html_attributes.merge(
-      class: alert_classes,
-      attributes: { role: :alert }
-    )
-  end
-
-end

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

@@ -1,27 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Avatar < Matestack::Ui::Component
-
-  optional :text, :bg_variant, :text_variant, :img_path, :size, class: { as: :bs_class }
-
-  def response
-    if text.present? && img_path.nil?
-      div class: "rounded-circle bg-#{bg_variant || 'primary'} text-#{text_variant || 'white'} text-center p-2 #{bs_class}",
-          attributes: { style: "height: #{height}px; width: #{width}px; display: inline-block;"} do
-        plain text
-      end
-    else
-      div class: "rounded-circle text-#{text_variant || 'white'} text-center p-2 #{bs_class}",
-          attributes: { style: "height: #{height}px; width: #{width}px; display: inline-block; background-image: url(#{img_path}); background-size: contain;"} do
-        plain text
-      end
-    end
-  end
-
-  def height
-    size || 40
-  end
-
-  def width
-    size || 40
-  end
-
-end

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

@@ -1,30 +0,0 @@
-class Matestack::Ui::Bootstrap::Components::Badge < Matestack::Ui::Component
-
-  optional class: { as: :bs_class }
-  optional :text, :variant, :rounded, :visually_hidden
-
-  def response
-    span badge_attributes do
-      plain text if text
-      yield_components
-    end
-    span class: "visually-hidden", text: visually_hidden if visually_hidden.present?
-  end
-
-  protected
-
-  def badge_attributes
-    html_attributes.merge(
-      class: badge_classes
-    )
-  end
-
-  def badge_classes
-    [].tap do |classes|
-      classes << 'badge'
-      classes << (variant.present? ? "bg-#{variant}" : "bg-secondary")
-      classes << "rounded-pill" if rounded
-      classes << bs_class
-    end.join(' ').strip
-  end
-end

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

@@ -1,69 +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 transition: { as: :bs_btn_transition }
-  optional action: { as: :bs_btn_action }
-  optional onclick: { as: :bs_btn_onclick }
-  optional link: { as: :bs_btn_link }
-
-  def response
-    if bs_btn_transition.present? && bs_btn_transition.is_a?(Hash)
-      transition button_attributes.merge(bs_btn_transition.merge({attributes: { role: "button"} })) do
-        inner_response
-      end
-    elsif bs_btn_action.present? && bs_btn_action.is_a?(Hash)
-      action button_attributes.merge(bs_btn_action.merge({attributes: { role: "button"} })) do
-        inner_response
-      end
-    elsif bs_btn_onclick.present? && bs_btn_onclick.is_a?(Hash)
-      onclick button_attributes.merge(bs_btn_onclick.merge({attributes: { role: "button"} })) do
-        inner_response
-      end
-    elsif bs_btn_link.present? && bs_btn_link.is_a?(Hash)
-      link button_attributes.merge(bs_btn_link.merge({attributes: { role: "button"} })) 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.js

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

@@ -1,86 +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, :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 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: { "bs-target": "##{carousel_id}", 'bs-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: { "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, text: item[:title]
-            paragraph text: item[:text]
-          end
-        end
-      end
-    end
-  end
-
-  def controls_partial
-    link class: "carousel-control-prev", data: { "bs-target": "##{carousel_id}", "bs-slide": :prev }, attributes: { 'role': "button" } do
-      span class: "carousel-control-prev-icon", attributes: { 'aria-hidden': "true" }
-      span class: "visually-hidden", text: "Previous"
-    end
-    link class: "carousel-control-next", data: { "bs-target": "##{carousel_id}", "bs-slide": :next }, attributes: { 'role': "button" } do
-      span class: "carousel-control-next-icon", attributes: { 'aria-hidden': "true" }
-      span class: "visually-hidden", text: "Next"
-    end
-  end
-
-  def carousel_attributes
-    html_attributes.merge(
-      id: carousel_id,
-      class: carousel_classes,
-      data: { "bs-ride": 'carousel', "bs-interval": (interval || 5000) }
-    )
-  end
-
-  def carousel_classes
-    [].tap do |classes|
-      classes << 'carousel slide'
-      classes << 'carousel-fade' if fade
-      classes << 'carousel-dark' if variant == :dark
-      #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/collapse.js

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

@@ -1,43 +0,0 @@
-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: { "bs-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

@@ -1,14 +0,0 @@
-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/icon.rb

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