matestack-ui-bootstrap 1.4.0

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

@@ -0,0 +1,90 @@
+import * as bootstrap from 'bootstrap'
+
+MatestackUiCore.Vue.component('matestack-ui-bootstrap-modal', {
+  mixins: [MatestackUiCore.componentMixin],
+
+  data() {
+    return {
+      modalInstance: undefined,
+    };
+  },
+
+  methods: {
+    toggle: function (){
+      this.modalInstance.toggle()
+    },
+    show: function (){
+      this.modalInstance.show()
+    },
+    hide: function (){
+      this.modalInstance.hide()
+    },
+    handleUpdate: function (){
+      this.modalInstance.handleUpdate()
+    },
+    dispose: function (){
+      this.modalInstance.dispose()
+    }
+  },
+
+  mounted: function() {
+    const self = this
+    var modal = self.$el
+    self.modalInstance = new bootstrap.Modal(modal)
+  },
+
+  created: function() {
+    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(",")
+      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(",")
+      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(",")
+      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(",")
+      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(",")
+      dispose_events.forEach(dispose_event => eventHub.$on(dispose_event.trim(), self.dispose));
+    }
+  },
+
+  beforeDestroy: function() {
+    const self = this
+    var eventHub = MatestackUiCore.matestackEventHub;
+    if(self.componentConfig["toggle_on"] != undefined){
+      var toggle_events = self.componentConfig["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(",")
+      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(",")
+      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(",")
+      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(",")
+      dispose_events.forEach(dispose_event => eventHub.$off(dispose_event.trim(), self.dispose));
+    }
+  },
+});

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

@@ -0,0 +1,106 @@
+class Matestack::Ui::Bootstrap::Components::Modal < Matestack::Ui::VueJsComponent
+  vue_js_component_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, class: { as: :bs_class }, id: { as: :bs_id }
+  # event trigger
+  optional :toggle_on, :show_on, :hide_on, :handle_update_on, :dispose_on
+
+  optional :slots
+
+  def response
+    div modal_attributes do
+      div class: dialog_classes do
+        div class: "modal-content" do
+          header_partial if header || (slots && slots[:header])
+          body_partial if body || slots && slots[:body]
+          footer_partial if footer || (slots && slots[:footer])
+          yield_components
+        end
+      end
+    end
+  end
+
+  protected
+
+  def header_partial
+    header = self.header.is_a?(Hash) ? self.header : { text: self.header }
+    div class: "modal-header" do
+      if slots && slots[:header]
+        slot slots[:header]
+      else
+        heading size: (header[:size] || 5), class: "modal-title #{header[:class]}", text: header[:text] if header[:text].present?
+        bs_close dismiss: 'modal'
+      end
+    end
+  end
+
+  def body_partial
+    body = self.body.is_a?(Hash) ? self.body : { text: self.body }
+    div class: "modal-body #{body[:class]}".strip do
+      if slots && slots[:body]
+        slot slots[:body]
+      else
+        plain body[:text] if body[:text].present?
+      end
+    end
+  end
+
+  def footer_partial
+    footer = self.footer.is_a?(Hash) ? self.footer : { text: self.footer }
+    div class: "modal-footer" do
+      slot slots[:footer] if slots && slots[:footer]
+      if footer[:text].present?
+        button class: "btn #{footer[:class].present? ? footer[:class] : 'btn-secondary'}",
+          data: { dismiss: 'modal' }, attributes: { type: 'button' },
+          text: footer[:text]
+      end
+    end
+  end
+
+  def modal_attributes
+    attributes = {}.tap do |hash|
+      hash[:class] = modal_classes
+      hash[:attributes] = { 'tabindex': "-1", 'aria-labelledby': "#{bs_id}Label", 'aria-hidden': "true" }
+      hash[:data] = {}.tap do |data|
+        data[:backdrop] = "static" if static
+        data[:keyboard] = "false" if keyboard
+      end
+    end
+    html_attributes.merge(
+      attributes
+    )
+  end
+
+  def modal_classes
+    [].tap do |classes|
+      classes << 'modal'
+      classes << 'fade' if fade || !fade.present?
+      classes << bs_class
+    end.join(' ').strip
+  end
+
+  def dialog_classes
+    [].tap do |classes|
+      classes << 'modal-dialog'
+      classes << 'modal-dialog-centered' if centered
+      classes << 'modal-dialog-scrollable' if scrollable
+      classes << "modal-#{size}" if size
+      if fullscreen.present?
+        classes << (fullscreen == true ? 'modal-fullscreen' : "modal-fullscreen-#{fullscreen}-down")
+      end
+      classes << modal_dialog_class
+    end.join(' ').strip
+  end
+end

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

@@ -0,0 +1,120 @@
+class Matestack::Ui::Bootstrap::Components::Navbar < Matestack::Ui::Component
+
+  POS_ATTRIBUTES = %i[fixed_top fixed_bottom sticky_top]
+  optional *POS_ATTRIBUTES
+
+  optional class: { as: :bs_class }
+  optional :items, :items_class, :theme, :hide_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 = self.toggle.is_a?(Hash) ? self.toggle : { position: self.toggle }
+  end
+
+  def response
+    nav navbar_attributes do
+      bs_container size: "#{container_size.present? ? container_size : "fluid" }" do
+        # custom elements for navbar
+        if options[:slots] && options[:slots][:custom_items]
+          slot options[:slots][:custom_items]
+        else
+          toggle_button if @toggle[:position] == :left
+          brand_partial
+          toggle_button if !@toggle[:position].present? || @toggle[:position] == :right
+          navbar_content_partial
+        end
+      end
+    end
+  end
+
+  protected
+
+  def brand_partial
+    brand = self.brand.is_a?(Hash) ? self.brand : { text: self.brand }
+    path = brand[:path].present? ? brand[:path] : "/"
+    link class: "navbar-brand", path: path do
+      img height: 40, path: brand[:img], attributes: { loading: "lazy" } if brand[:img].present?
+      plain brand[:text]
+    end
+  end
+
+  def navbar_content_partial
+    div class: "collapse navbar-collapse #{collapse_class}", id: 'matestackNavbarContent' do
+      ul class: items_classes do
+        items.each do |item|
+          li class: "nav-item" do
+            if item[:type] == :link
+              link class: "nav-link", path: item[:path] do
+                bs_icon name: item[:icon], size: 20 if item[:icon]
+                span class: "ps-3", text: item[:text] if item[:text]
+              end
+            else
+              transition class: "nav-link", path: item[:path], delay: item[:delay] do
+                bs_icon name: item[:icon], size: 20 if item[:icon]
+                span class: "ps-3", text: item[:text] if item[:text]
+              end
+            end
+          end
+        end
+      end
+      yield_components
+    end
+  end
+
+  def navbar_attributes
+    html_attributes.merge(
+      class: navbar_classes
+    )
+  end
+
+  def navbar_classes
+    [].tap do |classes|
+      classes << "navbar"
+      POS_ATTRIBUTES.each do |pos|
+        classes << "#{pos}".gsub('_','-') if self.send("#{pos}")
+      end
+      classes << "navbar-expand-#{ (hide_at.present? ? hide_at : "lg") }"
+      classes << "navbar-#{theme}" if  theme.present?
+      classes << (color.present? ? "bg-#{color}" : "bg-#{theme}") if theme || color
+      classes << 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 << 'd-lg-none'
+      classes << 'btn btn-link'
+      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] = { toggle: 'collapse', 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 << (items_class.present? ? items_class : "ms-auto mb-2 mb-lg-0")
+      # classes << "ms-auto" unless items_class.present?
+    end.join(' ').strip
+  end
+end

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

@@ -0,0 +1,28 @@
+class Matestack::Ui::Bootstrap::Components::PageHeading < Matestack::Ui::Component
+
+  optional :title, :subtitle, :icon
+
+  def response
+    section class: "mb-5" do
+      bs_row do
+        bs_col do
+          div class: "page-heading-heading" do
+            heading size: 2 do
+              bs_icon name: icon, size: "35" if icon.present?
+              plain title
+            end
+            heading size: 6, class: "text-muted" do
+              plain 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
+          end
+        end
+      end
+    end
+  end
+
+end

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

@@ -0,0 +1,40 @@
+class Matestack::Ui::Bootstrap::Components::Pagination < Matestack::Ui::Component
+  
+  optional :aria_label, :size, class: { as: :bs_class }
+  optional :items
+
+  def response 
+    nav pagination_attributes do
+      ul class: ul_classes do
+        if items.present?
+          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'
+              else
+                transition path: item[:path], text: item[:text], class: 'page-link'
+              end
+            end
+          end
+        end
+        yield_components
+      end
+    end
+  end
+
+  protected
+
+  def pagination_attributes
+    html_attributes.merge(
+      attributes: { 'aria-label': "#{aria_label || 'Page navigation'}" }
+    )
+  end
+
+  def ul_classes
+    [].tap do |classes|
+      classes << "pagination"
+      classes << "pagination-#{size}" if size.present?
+    end.join(' ').strip
+  end
+
+end

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

@@ -0,0 +1,26 @@
+import * as bootstrap from 'bootstrap'
+
+MatestackUiCore.Vue.component('matestack-ui-bootstrap-popover', {
+
+  mixins: [MatestackUiCore.componentMixin],
+  data() {
+    return {
+      popoverInstance: undefined
+
+    };
+  },
+  methods: {
+
+  },
+  mounted: function() {
+    const self = this;
+    var popover = self.$el
+    self.popoverInstance = new bootstrap.Popover(popover, {})
+  },
+  created: function() {
+  },
+
+  beforeDestroy: function() {
+
+  },
+});

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

@@ -0,0 +1,92 @@
+class Matestack::Ui::Bootstrap::Components::Popover < Matestack::Ui::VueJsComponent
+  vue_js_component_name "matestack-ui-bootstrap-popover"
+
+  # How i imagine using a popover
+  #
+  # popover content: 'A popover' do
+  #   button text: 'Popover'
+  # end
+  # => <span data-toggle="popover" data-content="A Popover"><button>Popover</button></span>
+  #
+  # popover content: 'A popover', tag: :div do
+  #   button text: 'Popover'
+  # end
+  # => <div data-toggle="popover" data-content="A Popover"><button>Popover</button></div>
+  #
+  # popover text: 'Popover', content: 'A popover', tag: :button # should be default
+  # => <button data-toggle="popover" data-content="A Popover">Popover</button>
+  #
+  # popover text: 'Popover', content: 'A popover', dismissible: true, tabindex: 2
+  # => <a tabindex="2" data-toggle="popover" data-content="A Popover" data-trigger="focus" role="button">Popover</a>
+  #
+  # popover text: 'Popover', content: 'A popover', tag: :a
+  # => <a data-toggle="popover" data-content="A Popover">Popover</a>
+
+
+  DATA_ALIAS_ATTRIBUTES = %i[container delay selector html template fallback_placement]
+
+  DATA_ALIAS_ATTRIBUTES.each do |attribute|
+    optional "#{attribute}": { as: :"bs_#{attribute}"}
+  end
+
+  # TODO:
+  # for security reasons the sanitize, sanitizeFn and whiteList options cannot be supplied using data attributes.
+  # sanitize sanitize_fn white_list
+
+  optional class: { as: :bs_class }
+  optional id: { as: :bs_id }
+  DATA_ATTRIBUTES = %i[tag content title text variant animation placement tabindex trigger boundary offset popper_config]
+  optional *DATA_ATTRIBUTES
+  # :tag # different element to apply: div, span, links, button, ...
+  # :content, :title # popover title and content strings
+  # :animation # boolean, default true
+  # :variant, :text # button styling & text
+  # :placement # placement direction as string
+
+  def response
+    if tag.present?
+      public_send(tag, popover_attributes) do
+        content_partial
+      end
+    else
+      btn popover_attributes do
+        content_partial
+      end
+    end
+  end
+
+  protected
+
+  def content_partial
+    plain text if text
+    yield_components unless text
+  end
+
+  def popover_attributes
+    attributes = {}.tap do |hash|
+      hash[:class] = popover_classes
+      hash[:attributes] = { role: (text ? 'button': nil), title: "#{title}", tabindex: "#{tabindex}" }
+      hash[:data] = {}.tap do |data|
+        DATA_ALIAS_ATTRIBUTES.each do |attribute|
+          data["bs-#{attribute}"] = self.send(:"bs_#{attribute}") if self.send(:"bs_#{attribute}")
+        end
+        (DATA_ATTRIBUTES - [:tag, :text, :variant]).each do |attribute|
+          data["bs-#{attribute}"] = self.send(:"#{attribute}") if self.send(:"#{attribute}")
+        end
+        data["bs-toggle"] = "popover"
+      end
+    end
+    html_attributes.merge(
+      attributes
+    )
+  end
+
+  def popover_classes
+    [].tap do |classes|
+      classes << "d-inline-block" unless text
+      classes << "btn btn-#{variant}" if variant
+      classes << bs_class
+    end.join(' ').strip
+  end
+
+end