matestack-ui-bootstrap 1.4.0 → 2.1.0

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

@@ -1,6 +1,9 @@
 import * as bootstrap from 'bootstrap'
+import Vue from 'vue/dist/vue.esm'
 
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-modal', {
+import MatestackUiCore from 'matestack-ui-core'
+
+Vue.component('matestack-ui-bootstrap-modal', {
   mixins: [MatestackUiCore.componentMixin],
 
   data() {
@@ -37,28 +40,28 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-modal', {
     const self = this
     var eventHub = MatestackUiCore.matestackEventHub;
     // 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));
     }
   },
@@ -66,24 +69,24 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-modal', {
   beforeDestroy: function() {
     const self = this
     var eventHub = MatestackUiCore.matestackEventHub;
-    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.$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));
     }
   },

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/lib/matestack/ui/bootstrap/components/navbar.rb

@@ -0,0 +1,163 @@
+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 :items, :items_class, :theme, :expand_at, :color, :container_size
+  optional :collapse_class
+  # brand expect hash or string, possible keys for hash: text, path, img
+  optional :brand
+  # toogle expect hash or a symbol (:left or :right),
+  # possible keys for hash: position, class
+  optional :toggle
+
+
+  def prepare
+    @toggle = context.toggle.is_a?(Hash) ? context.toggle : { position: context.toggle }
+  end
+
+  def response(&block)
+    nav navbar_attributes do
+      bs_container size: "#{context.container_size.present? ? context.container_size : "fluid" }" do
+        # custom elements for navbar
+        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(&block)
+        end
+      end
+    end
+  end
+
+  protected
+
+  def brand_partial
+    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
+      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
+    else
+      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
+    end
+  end
+
+  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
+          context.items.each do |item|
+            li class: "nav-item" do
+              case item[:type]
+              when :link
+                a link_config(item)  do
+                  bs_icon name: item[:icon], size: 20 if item[:icon]
+                  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" 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" do
+                    plain item[:text] if item[:text]
+                  end
+                end
+              end
+            end
+          end
+        end
+      end
+      yield if block_given?
+    end
+  end
+
+  def link_config(item)
+    config = item.except(:text)
+    config[:class] = "nav-link"
+    config
+  end
+
+  def transition_config(item)
+    config = item.except(:text)
+    config[:class] = "nav-link"
+    config
+  end
+
+  def action_config(item)
+    config = item.except(:text)
+    config[:class] = "nav-link"
+    config
+  end
+
+  def navbar_attributes
+    options.merge(
+      class: navbar_classes
+    )
+  end
+
+  def navbar_classes
+    [].tap do |classes|
+      classes << "navbar"
+      POS_ATTRIBUTES.each do |pos|
+        classes << "#{pos}".gsub('_','-') if context.send("#{pos}")
+      end
+      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
+
+  def toggle_button
+    button toggle_attributes do
+      bs_icon name: "list", size: 25, class: "text-muted"
+    end
+    # button toggle_attributes do
+    #   span class: "navbar-toggler-icon"
+    # end
+  end
+
+  def toggle_attributes
+    toggle_classes = [].tap do |classes|
+      classes << 'btn btn-link navbar-toggler'
+      classes << "ms-auto" if @toggle[:position] == :right
+      classes << "me-auto" if @toggle[:position] == :left
+      classes << @toggle[:class] if @toggle[:class]
+    end.join(' ').strip
+
+    {}.tap do |hash|
+      hash[:class] = toggle_classes
+      hash[:data] = { "bs-toggle": 'collapse', "bs-target": '#matestackNavbarContent' }
+      hash[:attributes] = { 'aria-controls': 'matestackNavbarContent', 'aria-expanded': 'false', 'aria-label': 'Toggle navigation' }
+    end
+  end
+
+  def items_classes
+    [].tap do |classes|
+      classes << 'navbar-nav'
+      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
+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
-  
-  optional :aria_label, :size, class: { as: :bs_class }
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Pagination < Matestack::Ui::Bootstrap::BaseComponent
+
+  optional :aria_label, :size
   optional :items
 
-  def response 
+  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 path: item[:path], text: item[:text], class: 'page-link'
+                a item.merge({ class: 'page-link' })
               else
-                transition path: item[:path], text: item[:text], class: 'page-link'
+                transition item.merge({ class: 'page-link' })
               end
             end
           end
         end
-        yield_components
+        yield if block_given?
       end
     end
   end
@@ -25,16 +27,16 @@ 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
 
-end
+end