matestack-ui-bootstrap 1.5.1 → 2.0.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: { "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/{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,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

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

@@ -1,21 +1,23 @@
-class Matestack::Ui::Bootstrap::Components::ListGroup < Matestack::Ui::Component
-  html_attributes :role
+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 }
+  optional :variant, class: { as:  :bs_class }
 
 
   def response
     if actionable_items?
       div list_group_attributes do
-        yield_components unless items
-        list_partial if items
+        yield if block_given? unless context.items
+        list_partial if context.items
       end
     else
       ul list_group_attributes do
-        yield_components unless items
-        list_partial if items
+        yield if block_given? unless context.items
+        list_partial if context.items
       end
     end
   end
@@ -23,49 +25,49 @@ class Matestack::Ui::Bootstrap::Components::ListGroup < Matestack::Ui::Component
   protected
 
   def actionable_items?
-    if items.present?
-      items.any? { |item| [:tab, :transition, :action, :link].include?(item[:type]) }
+    if context.items.present?
+      context.items.any? { |item| [:tab, :transition, :action, :link].include?(item[:type]) }
     else
       false
     end
   end
 
   def tab_nav?
-    if items.present?
-      items.any? { |item| item[:type] == :tab }
+    if context.items.present?
+      context.items.any? { |item| item[:type] == :tab }
     else
       false
     end
   end
 
   def list_partial
-    items.each do |item|
+    context.items.each do |item|
       case item[:type]
       when :link
-        link link_attrs(item)  do
+        a link_attrs(item) do
           text_rendering(item)
         end
       when :tab
-        link tab_attrs(item)  do
+        a tab_attrs(item) do
           text_rendering(item)
         end
       when :transition
-        transition transition_attrs(item)  do
+        transition transition_attrs(item) do
           text_rendering(item)
         end
       when :action
-        action action_attrs(item)  do
+        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", attributes: { 'type': "checkbox", 'value': "" } if checkbox
+          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}", attributes: { "aria-disabled": "#{true if item[:disabled]}" } do
+        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", attributes: { 'type': "checkbox", 'value': "", 'aria-label': "#{item[:text]}" } if 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
@@ -81,9 +83,9 @@ class Matestack::Ui::Bootstrap::Components::ListGroup < Matestack::Ui::Component
   def list_group_attributes
     attributes = {}.tap do |hash|
       hash[:class] = list_group_classes
-      hash[:attributes] = { role: "tablist" } if tab_nav?
+      hash[:role] = "tablist" if tab_nav?
     end
-    html_attributes.merge(
+    options.merge(
       attributes
     )
   end
@@ -91,16 +93,16 @@ class Matestack::Ui::Bootstrap::Components::ListGroup < Matestack::Ui::Component
   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 variant == :flush
-      classes << bs_class
+      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[:attributes] = { "aria-disabled": "#{true if item[:disabled]}" } if item[:disabled]
+    attrs["aria-disabled"] = "#{true if item[:disabled]}" if item[:disabled]
     attrs
   end
 
@@ -109,8 +111,9 @@ class Matestack::Ui::Bootstrap::Components::ListGroup < Matestack::Ui::Component
       hash[:id] = "tab-#{item[:id]}" if tab_nav?
       hash[:class] = "#{list_classes item, true}"
       hash[:data] = { "bs-toggle": "list" }
-      hash[:attributes] = { "aria-disabled": "#{true if item[:disabled]}" } if item[:disabled]
-      hash[:attributes] = { 'aria-controls': "#tab-#{item[:id]}-content", role: "tab" }
+      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
@@ -119,14 +122,14 @@ class Matestack::Ui::Bootstrap::Components::ListGroup < Matestack::Ui::Component
   def transition_attrs(item)
     attrs = item
     attrs[:class] = "#{list_classes item, true}"
-    attrs[:attributes] = { "aria-disabled": "#{true if item[:disabled]}" } if item[:disabled]
+    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[:attributes] = { "aria-disabled": "#{true if item[:disabled]}" } if item[:disabled]
+    attrs["aria-disabled"] = "#{true if item[:disabled]}" if item[:disabled]
     attrs
   end