matestack-ui-bootstrap 1.5.1 → 3.0.0.rc1

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
 

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

@@ -1,7 +1,9 @@
 import * as bootstrap from 'bootstrap'
+import MatestackUiVueJs from 'matestack-ui-vuejs'
 
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-modal', {
-  mixins: [MatestackUiCore.componentMixin],
+const modalComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
 
   data() {
     return {
@@ -29,62 +31,64 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-modal', {
 
   mounted: function() {
     const self = this
-    var modal = self.$el
-    self.modalInstance = new bootstrap.Modal(modal)
+    const modalElement = self.getElement()
+    self.modalInstance = new bootstrap.Modal(modalElement)
   },
 
   created: function() {
     const self = this
-    var eventHub = MatestackUiCore.matestackEventHub;
+    var eventHub = MatestackUiVueJs.eventHub;
     // 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 => eventHub.$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 => eventHub.$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 => eventHub.$on(hide_event.trim(), self.hide));
     }
     // handle_update_on event registration
-    if(self.componentConfig["handle_update_on"] != undefined){
-      var handle_update_events = self.componentConfig["handle_update_on"].split(",")
+    if(self.props["handle_update_on"] != undefined){
+      var handle_update_events = self.props["handle_update_on"].split(",")
       handle_update_events.forEach(handle_update_event => eventHub.$on(handle_update_event.trim(), self.handle_update));
     }
     // 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 => eventHub.$on(dispose_event.trim(), self.dispose));
     }
   },
 
-  beforeDestroy: function() {
+  beforeUnmount: function() {
     const self = this
-    var eventHub = MatestackUiCore.matestackEventHub;
-    if(self.componentConfig["toggle_on"] != undefined){
-      var toggle_events = self.componentConfig["toggle_on"].split(",")
+    var eventHub = MatestackUiVueJs.eventHub;
+    if(self.props["toggle_on"] != undefined){
+      var toggle_events = self.props["toggle_on"].split(",")
       toggle_events.forEach(toggle_event => eventHub.$off(toggle_event.trim(), self.toggle));
     }
-    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 => eventHub.$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 => eventHub.$off(hide_event.trim(), self.hide));
     }
-    if(self.componentConfig["handle_update_on"] != undefined){
-      var handle_update_events = self.componentConfig["handle_update_on"].split(",")
+    if(self.props["handle_update_on"] != undefined){
+      var handle_update_events = self.props["handle_update_on"].split(",")
       handle_update_events.forEach(handle_update_event => eventHub.$off(handle_update_event.trim(), self.handle_update));
     }
-    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 => eventHub.$off(dispose_event.trim(), self.dispose));
     }
   },
-});
+}
+
+export default modalComponent

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

@@ -0,0 +1,121 @@
+require_relative "../base_vue_js_component"
+
+class Matestack::Ui::Bootstrap::Components::Modal < Matestack::Ui::Bootstrap::BaseVueJsComponent
+  vue_name 'matestack-ui-bootstrap-modal'
+
+  # header attributes, expects a hash or string
+  # possible keys `:class, :text, :size`
+  optional :header
+  # body attributes, expects a hash or string
+  # possible keys `:class, :text`
+  optional :body
+  # footer is a dismiss button, expects a hash or string for button text
+  # possible keys `:class, :text`
+  optional :footer
+  optional :fade, :size
+  optional :fullscreen # fullscreen attribute, expects boolean or bootstrap breakpoint
+  optional :static, :keyboard, :scrollable, :centered
+  optional :modal_dialog_class
+  optional :id
+  # event trigger
+  optional :toggle_on, :show_on, :hide_on, :handle_update_on, :dispose_on
+
+
+
+  def response
+    div modal_attributes do
+      div class: dialog_classes do
+        div class: "modal-content" do
+          header_partial if context.header || (slots && slots[:header])
+          body_partial if context.body || slots && slots[:body]
+          footer_partial if context.footer || (slots && slots[:footer])
+          yield if block_given?
+        end
+      end
+    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[:handle_update_on] = context.handle_update_on
+      props[:dispose_on] = context.dispose_on
+    end
+  end
+
+  def header_partial
+    header = context.header.is_a?(Hash) ? context.header : { text: context.header }
+    div class: "modal-header" do
+      if slots && slots[:header]
+        slot :header
+      else
+        heading header[:text], size: (header[:size] || 5), class: "modal-title #{header[:class]}" if header[:text].present?
+        bs_close dismiss: 'modal'
+      end
+    end
+  end
+
+  def body_partial
+    body = context.body.is_a?(Hash) ? context.body : { text: context.body }
+    div class: "modal-body #{body[:class]}".strip do
+      if slots && slots[:body]
+        slot :body
+      else
+        plain body[:text] if body[:text].present?
+      end
+    end
+  end
+
+  def footer_partial
+    footer = context.footer.is_a?(Hash) ? context.footer : { text: context.footer }
+    div class: "modal-footer" do
+      slot :footer if slots && slots[:footer]
+      if footer[:text].present?
+        button class: "btn #{footer[:class].present? ? footer[:class] : 'btn-secondary'}",
+          data: { "bs-dismiss": 'modal' }, type: 'button' do
+            plain footer[:text]
+          end
+      end
+    end
+  end
+
+  def modal_attributes
+    attributes = {}.tap do |hash|
+      hash[:id] = context.id
+      hash[:class] = modal_classes
+      hash[:attributes] = { 'tabindex': "-1", 'aria-labelledby': "#{context.id}Label", 'aria-hidden': "true" }
+      hash[:data] = {}.tap do |data|
+        data[:backdrop] = "static" if context.static
+        data[:keyboard] = "false" if context.keyboard
+      end
+    end
+    options.merge(
+      attributes
+    )
+  end
+
+  def modal_classes
+    [].tap do |classes|
+      classes << 'modal'
+      classes << 'fade' if context.fade || !context.fade.present?
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+
+  def dialog_classes
+    [].tap do |classes|
+      classes << 'modal-dialog'
+      classes << 'modal-dialog-centered' if context.centered
+      classes << 'modal-dialog-scrollable' if context.scrollable
+      classes << "modal-#{context.size}" if context.size
+      if context.fullscreen.present?
+        classes << (context.fullscreen == true ? 'modal-fullscreen' : "modal-fullscreen-#{context.fullscreen}-down")
+      end
+      classes << context.modal_dialog_class
+    end.join(' ').strip
+  end
+end

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

@@ -1,9 +1,11 @@
-class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Bootstrap::BaseComponent
 
   POS_ATTRIBUTES = %i[fixed_top fixed_bottom sticky_top]
   optional *POS_ATTRIBUTES
 
-  optional class: { as: :bs_class }
+  optional class: { as:  :bs_class }
   optional :items, :items_class, :theme, :expand_at, :color, :container_size
   optional :collapse_class
   # brand expect hash or string, possible keys for hash: text, path, img
@@ -12,21 +14,22 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
   # possible keys for hash: position, class
   optional :toggle
 
+
   def prepare
-    @toggle = self.toggle.is_a?(Hash) ? self.toggle : { position: self.toggle }
+    @toggle = context.toggle.is_a?(Hash) ? context.toggle : { position: context.toggle }
   end
 
-  def response
+  def response(&block)
     nav navbar_attributes do
-      bs_container size: "#{container_size.present? ? container_size : "fluid" }" do
+      bs_container size: "#{context.container_size.present? ? context.container_size : "fluid" }" do
         # custom elements for navbar
-        if options[:slots] && options[:slots][:custom_items]
-          slot options[:slots][:custom_items]
+        if slots && slots[:custom_items]
+          slot :custom_items
         else
           toggle_button if @toggle[:position] == :left
           brand_partial
           toggle_button if !@toggle[:position].present? || @toggle[:position] == :right
-          navbar_content_partial
+          navbar_content_partial(&block)
         end
       end
     end
@@ -35,51 +38,57 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
   protected
 
   def brand_partial
-    brand = self.brand.is_a?(Hash) ? self.brand : { text: self.brand }
+    brand = context.brand.is_a?(Hash) ? context.brand : { text: context.brand }
     path = brand[:path].present? ? brand[:path] : "/"
     brand[:path] = path
     case brand[:type]
-    when :link
-      link brand.except(:text).merge(class: "navbar-brand") do
-        img height: 40, path: brand[:img], attributes: { loading: "lazy" } if brand[:img].present?
+    when :transition
+      transition brand.except(:text).merge(class: "navbar-brand") do
+        img height: 40, path: brand[:img], loading: "lazy" if brand[:img].present?
         plain brand[:text]
       end
     else
-      transition brand.except(:text).merge(class: "navbar-brand") do
-        img height: 40, path: brand[:img], attributes: { loading: "lazy" } if brand[:img].present?
+      a brand.except(:text).merge(class: "navbar-brand") do
+        img height: 40, path: brand[:img], loading: "lazy" if brand[:img].present?
         plain brand[:text]
       end
     end
   end
 
-  def navbar_content_partial
-    div class: "collapse navbar-collapse #{collapse_class}", id: 'matestackNavbarContent' do
-      if items.present?
+  def navbar_content_partial(&block)
+    div class: "collapse navbar-collapse #{context.collapse_class}", id: 'matestackNavbarContent' do
+      if context.items.present?
         ul class: items_classes do
-          items.each do |item|
+          context.items.each do |item|
             li class: "nav-item" do
               case item[:type]
               when :link
-                link link_config(item)  do
+                a link_config(item)  do
                   bs_icon name: item[:icon], size: 20 if item[:icon]
-                  span class: "ps-3", text: item[:text] if item[:text]
+                  span class: "ps-3" do
+                    plain item[:text] if item[:text]
+                  end
                 end
               when :action
                 action action_config(item) do
                   bs_icon name: item[:icon], size: 20 if item[:icon]
-                  span class: "ps-3", text: item[:text] if item[:text]
+                  span class: "ps-3" do
+                    plain item[:text] if item[:text]
+                  end
                 end
               else
                 transition transition_config(item) do
                   bs_icon name: item[:icon], size: 20 if item[:icon]
-                  span class: "ps-3", text: item[:text] if item[:text]
+                  span class: "ps-3" do
+                    plain item[:text] if item[:text]
+                  end
                 end
               end
             end
           end
         end
       end
-      yield_components
+      yield if block_given?
     end
   end
 
@@ -102,7 +111,7 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
   end
 
   def navbar_attributes
-    html_attributes.merge(
+    options.merge(
       class: navbar_classes
     )
   end
@@ -111,12 +120,12 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
     [].tap do |classes|
       classes << "navbar"
       POS_ATTRIBUTES.each do |pos|
-        classes << "#{pos}".gsub('_','-') if self.send("#{pos}")
+        classes << "#{pos}".gsub('_','-') if context.send("#{pos}")
       end
-      classes << "navbar-expand-#{ (expand_at.present? ? expand_at : "lg") }"
-      classes << "navbar-#{theme}" if  theme.present?
-      classes << (color.present? ? "bg-#{color}" : "bg-#{theme}") if theme || color
-      classes << bs_class
+      classes << "navbar-expand-#{ (context.expand_at.present? ? context.expand_at : "lg") }"
+      classes << "navbar-#{context.theme}" if  context.theme.present?
+      classes << (context.color.present? ? "bg-#{context.color}" : "bg-#{context.theme}") if context.theme || context.color
+      classes << context.bs_class
     end.join(' ').strip
   end
 
@@ -147,7 +156,7 @@ class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
   def items_classes
     [].tap do |classes|
       classes << 'navbar-nav'
-      classes << (items_class.present? ? items_class : "ms-auto mb-2 mb-lg-0")
+      classes << (context.items_class.present? ? context.items_class : "ms-auto mb-2 mb-lg-0")
       # classes << "ms-auto" unless items_class.present?
     end.join(' ').strip
   end

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

@@ -1,4 +1,6 @@
-class Matestack::Ui::Bootstrap::Components::PageHeading < Matestack::Ui::Component
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::PageHeading < Matestack::Ui::Bootstrap::BaseComponent
 
   optional :title, :subtitle, :icon
 
@@ -8,17 +10,17 @@ class Matestack::Ui::Bootstrap::Components::PageHeading < Matestack::Ui::Compone
         bs_col do
           div class: "page-heading-heading" do
             heading size: 2 do
-              bs_icon name: icon, size: "35" if icon.present?
-              plain title
+              bs_icon name: context.icon, size: "35" if context.icon.present?
+              plain context.title
             end
             heading size: 6, class: "text-muted" do
-              plain subtitle
+              plain context.subtitle
             end
           end
         end
         bs_col md: 12, xl: 4, class: "text-xl-end mt-3" do
           div class: "page-heading-actions text-xl-end" do
-            yield_components
+            yield if block_given?
           end
         end
       end

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

@@ -1,23 +1,25 @@
-class Matestack::Ui::Bootstrap::Components::Pagination < Matestack::Ui::Component
+require_relative "../base_component"
 
-  optional :aria_label, :size, class: { as: :bs_class }
+class Matestack::Ui::Bootstrap::Components::Pagination < Matestack::Ui::Bootstrap::BaseComponent
+
+  optional :aria_label, :size
   optional :items
 
   def response
     nav pagination_attributes do
       ul class: ul_classes do
-        if items.present?
-          items.each do |item|
+        if context.items.present?
+          context.items.each do |item|
             li class: "page-item #{ 'active' if item[:active] }" do
               if item[:type] == :link
-                link item.merge({ class: 'page-link' })
+                a item.merge({ class: 'page-link' })
               else
                 transition item.merge({ class: 'page-link' })
               end
             end
           end
         end
-        yield_components
+        yield if block_given?
       end
     end
   end
@@ -25,15 +27,15 @@ class Matestack::Ui::Bootstrap::Components::Pagination < Matestack::Ui::Componen
   protected
 
   def pagination_attributes
-    html_attributes.merge(
-      attributes: { 'aria-label': "#{aria_label || 'Page navigation'}" }
+    options.merge(
+      'aria-label': "#{context.aria_label || 'Page navigation'}"
     )
   end
 
   def ul_classes
     [].tap do |classes|
       classes << "pagination"
-      classes << "pagination-#{size}" if size.present?
+      classes << "pagination-#{context.size}" if context.size.present?
     end.join(' ').strip
   end
 

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

@@ -0,0 +1,30 @@
+import * as bootstrap from 'bootstrap'
+
+import MatestackUiVueJs from 'matestack-ui-vuejs'
+
+const popoverComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
+  data() {
+    return {
+      popoverInstance: undefined
+
+    };
+  },
+  methods: {
+
+  },
+  mounted: function() {
+    const self = this;
+    const popoverElement = self.getElement()
+    self.popoverInstance = new bootstrap.Popover(popoverElement, {})
+  },
+  created: function() {
+  },
+
+  beforeUnmount: function() {
+
+  },
+}
+
+export default popoverComponent