matestack-ui-bootstrap 1.4.0 → 2.1.0

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: { 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/{app/concepts → lib}/matestack/ui/bootstrap/components/collapse.js

@@ -1,6 +1,9 @@
 import * as bootstrap from 'bootstrap'
+import Vue from 'vue/dist/vue.esm'
 
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-collapse', {
+import MatestackUiCore from 'matestack-ui-core'
+
+Vue.component('matestack-ui-bootstrap-collapse', {
   mixins: [MatestackUiCore.componentMixin],
   data() {
     return {
@@ -41,43 +44,43 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-collapse', {
     const self = this
 
     // toggle_on event registration
-    if(self.componentConfig["toggle_on"] != undefined){
-      var toggle_events = self.componentConfig["toggle_on"].split(",")
+    if(self.props["toggle_on"] != undefined){
+      var toggle_events = self.props["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(",")
+    if(self.props["show_on"] != undefined){
+      var show_events = self.props["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(",")
+    if(self.props["hide_on"] != undefined){
+      var hide_events = self.props["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(",")
+    if(self.props["dispose_on"] != undefined){
+      var dispose_events = self.props["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(",")
+    if(self.props["toggle_on"] != undefined){
+      var show_events = self.props["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(",")
+    if(self.props["show_on"] != undefined){
+      var show_events = self.props["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(",")
+    if(self.props["hide_on"] != undefined){
+      var hide_events = self.props["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(",")
+    if(self.props["dispose_on"] != undefined){
+      var dispose_events = self.props["dispose_on"].split(",")
       dispose_events.forEach(dispose_event => MatestackUiCore.matestackEventHub.$off(dispose_event.trim(), self.dispose));
     }
   }

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/{app/concepts → lib}/matestack/ui/bootstrap/components/dropdown.js

@@ -1,6 +1,9 @@
 import * as bootstrap from 'bootstrap'
+import Vue from 'vue/dist/vue.esm'
 
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-dropdown', {
+import MatestackUiCore from 'matestack-ui-core'
+
+Vue.component('matestack-ui-bootstrap-dropdown', {
   mixins: [MatestackUiCore.componentMixin],
   data() {
     return {
@@ -8,7 +11,7 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-dropdown', {
     };
   },
   mounted() {
-    // var mydropdown = document.getElementById(this.componentConfig["dropdown-id"])
+    // var mydropdown = document.getElementById(this.props["dropdown-id"])
     // this.dropdownInstance = new bootstrap.Dropdown(mydropdown)
   }
 });

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,9 +32,9 @@ 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:"sr-only" do plain "Toggle Dropdown" end
+      span class:"visually-hidden" do plain "Toggle Dropdown" end
     end
   end
 
@@ -42,11 +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]}", style: "cursor: pointer;" ) do plain item[:text] end end
       else
         span class: "dropdown-item-text" do plain item[:text] end
       end
@@ -54,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
@@ -62,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
 
@@ -92,24 +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,
-      data: { toggle: 'dropdown' },
-      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

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

@@ -0,0 +1,148 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::ListGroup < Matestack::Ui::Bootstrap::BaseComponent
+  optional :role
+
+  optional :items
+  optional :horizontal, :horizontal_size, :checkbox
+  optional :variant, class: { as:  :bs_class }
+
+
+  def response
+    if actionable_items?
+      div list_group_attributes do
+        yield if block_given? unless context.items
+        list_partial if context.items
+      end
+    else
+      ul list_group_attributes do
+        yield if block_given? unless context.items
+        list_partial if context.items
+      end
+    end
+  end
+
+  protected
+
+  def actionable_items?
+    if context.items.present?
+      context.items.any? { |item| [:tab, :transition, :action, :link].include?(item[:type]) }
+    else
+      false
+    end
+  end
+
+  def tab_nav?
+    if context.items.present?
+      context.items.any? { |item| item[:type] == :tab }
+    else
+      false
+    end
+  end
+
+  def list_partial
+    context.items.each do |item|
+      case item[:type]
+      when :link
+        a link_attrs(item) do
+          text_rendering(item)
+        end
+      when :tab
+        a tab_attrs(item) do
+          text_rendering(item)
+        end
+      when :transition
+        transition transition_attrs(item) do
+          text_rendering(item)
+        end
+      when :action
+        action action_attrs(item) do
+          text_rendering(item)
+        end
+      when :label
+        label id: item[:id], class: "#{list_classes item, false}" do
+          input class: "form-check-input me-1", 'type': "checkbox", 'value': ""  if context.checkbox
+          text_rendering(item)
+        end
+      else
+        li id: item[:id], class: "#{list_classes item, false}", "aria-disabled": "#{true if item[:disabled]}" do
+          # this implementation is useless, would need to be connected to a form through bs_form_checkbox
+          # input class: "form-check-input me-1", 'type': "checkbox", 'value': "", 'aria-label': "#{item[:text]}" if checkbox
+          text_rendering(item)
+          bs_badge variant: :primary, rounded: true, text: item[:badge] if item[:badge]
+        end
+      end
+    end
+  end
+
+  def text_rendering(item)
+    bs_icon name: item[:icon] if item[:icon]
+    plain item[:text]
+  end
+
+  def list_group_attributes
+    attributes = {}.tap do |hash|
+      hash[:class] = list_group_classes
+      hash[:role] = "tablist" if tab_nav?
+    end
+    options.merge(
+      attributes
+    )
+  end
+
+  def list_group_classes
+    [].tap do |classes|
+      classes << 'list-group'
+      classes << (context.horizontal_size.present? ? "list-group-horizontal-#{context.horizontal_size}": "list-group-horizontal") if context.horizontal
+      classes << 'list-group-flush' if context.variant == :flush
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+
+  def link_attrs(item)
+    attrs = item
+    attrs[:class] = "#{list_classes item, true}"
+    attrs["aria-disabled"] = "#{true if item[:disabled]}" if item[:disabled]
+    attrs
+  end
+
+  def tab_attrs(item)
+    {}.tap do |hash|
+      hash[:id] = "tab-#{item[:id]}" if tab_nav?
+      hash[:class] = "#{list_classes item, true}"
+      hash[:data] = { "bs-toggle": "list" }
+      hash["aria-disabled"] = "#{true if item[:disabled]}" if item[:disabled]
+      hash['aria-controls'] = "#tab-#{item[:id]}-content"
+      hash[:role] = "tab"
+      hash[:path] = "#tab-#{item[:id]}-content"
+      hash[:target] = item[:target]
+    end
+  end
+
+  def transition_attrs(item)
+    attrs = item
+    attrs[:class] = "#{list_classes item, true}"
+    attrs["aria-disabled"] = "#{true if item[:disabled]}" if item[:disabled]
+    attrs
+  end
+
+  def action_attrs(item)
+    attrs = item
+    attrs[:class] = "#{list_classes item, true}"
+    attrs["aria-disabled"] = "#{true if item[:disabled]}" if item[:disabled]
+    attrs
+  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 << 'disabled' if item[:disabled]
+      classes << 'd-flex justify-content-between align-items-center' if item[:badge].present?
+      classes << item[:class]
+    end.join(' ').strip
+  end
+
+end