matestack-ui-bootstrap 1.4.0 → 2.1.0

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

@@ -0,0 +1,113 @@
+require_relative "../base_vue_js_component"
+
+class Matestack::Ui::Bootstrap::Components::Toast < Matestack::Ui::Bootstrap::BaseVueJsComponent
+  vue_name "matestack-ui-bootstrap-toast"
+
+  # header attributes, expects a hash or string
+  # possible keys `:icon_class, :icon, :title, :subtitle`
+  optional :header
+  # body expects a string as message inside toast
+  optional :body
+  # placement attributes, expects a hash wiht possible keys: position, min-height
+  optional :placement # for adding custom css style
+  optional :important, :delay, :autohide, :animation
+  optional class: { as:  :bs_class }
+  optional :attributes, :data
+
+
+  optional :show_on, :hide_on, :dispose_on
+
+  def response
+    standard_placement_partial
+    # standard_placement_partial unless placement.present?
+    # custom_placement_partial if placement.present?
+  end
+
+  protected
+
+  def vue_props
+    {}.tap do |props|
+      props[:delay] = context.delay
+      props[:autohide] = context.autohide
+      props[:show_on] = context.show_on
+      props[:hide_on] = context.hide_on
+      props[:dispose_on] = context.dispose_on
+    end
+  end
+
+  def custom_placement_partial
+    div placement_attrs do
+      standard_placement_partial
+    end
+  end
+
+  def standard_placement_partial
+    div toast_attributes do
+      header_partial if context.header || slots && slots[:header]
+      body_partial
+    end
+  end
+
+  def header_partial
+    header = context.header.is_a?(Hash) ? context.header : { title: context.header }
+    div class: "toast-header" do
+      img class: "#{'rounded me-2' || header[:icon_class]}", path: header[:icon] if header[:icon].present?
+      strong header[:title], class: "me-auto" if header[:title].present?
+      small header[:subtitle] if header[:subtitle].present?
+
+      slot :header if slots && slots[:header]
+      bs_close dismiss: 'toast', class: "ms-2 mb-1", "@click": "hide()"
+    end
+
+  end
+
+  def body_partial
+    div class: "toast-body" do
+      plain context.body if context.body
+    end
+    unless context.header || slots && slots[:header]
+      bs_close dismiss: 'toast', class: "ms-auto me-2 btn-close-white", "@click": "hide()"
+    end
+  end
+
+  def toast_attributes
+    options.merge(
+      class: toast_classes,
+      data: toast_data
+    ).merge(toast_attrs)
+  end
+
+  def toast_data
+    (context.data || {}).tap do |hash|
+      hash["bs-delay"] = context.delay.nil? ? 5000 : context.delay
+      hash["bs-autohide"] = context.autohide.nil? ? "true" : "#{context.autohide}"
+      hash["bs-animation"] = context.animation.nil? ? "true" : "#{context.animation}"
+    end
+  end
+
+  def toast_attrs
+    (context.attributes || {}).tap do |hash|
+      hash[:role] = (context.important == false ? 'status' : 'alert')
+      hash[:'aria-live'] = (context.important ? 'assertive' : 'polite') if context.important.present? && !context.placement.present?
+      hash[:'aria-live'] = 'assertive' unless context.important.present?
+      hash[:'aria-atomic'] = 'true' unless context.placement.present?
+      hash[:style] = "z-index: 10000; position: fixed; #{context.placement[:position] || 'top: 0; right: 0;' }"  if context.placement.present?
+      hash[:"v-bind:class"] = "{'show' : showing }"
+    end
+  end
+
+  def toast_classes
+    [].tap do |classes|
+      classes << 'toast p-0 fade d-flex align-items-center border-0'
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+
+  def placement_attrs
+    {}.tap do |hash|
+      hash[:'aria-live'] = (context.important ? 'assertive' : 'polite') if context.important.present?
+      hash[:'aria-atomic'] = 'true'
+      hash[:style] = "position: relative; min-height: #{context.placement[:height]};"
+    end
+  end
+end

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

@@ -1,6 +1,9 @@
 import * as bootstrap from 'bootstrap'
+import Vue from 'vue/dist/vue.esm'
 
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-tooltip', {
+import MatestackUiCore from 'matestack-ui-core'
+
+Vue.component('matestack-ui-bootstrap-tooltip', {
 
   mixins: [MatestackUiCore.componentMixin],
   data() {

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

@@ -0,0 +1,66 @@
+require_relative "../base_vue_js_component"
+
+class Matestack::Ui::Bootstrap::Components::Tooltip < Matestack::Ui::Bootstrap::BaseVueJsComponent
+  vue_name "matestack-ui-bootstrap-tooltip"
+
+  DATA_ALIAS_ATTRIBUTES = %i[container delay selector html template fallback_placement]
+
+  DATA_ALIAS_ATTRIBUTES.each do |attribute|
+    optional :"#{attribute}"
+  end
+
+  # TODO:
+  # for security reasons the sanitize, sanitizeFn and whiteList options cannot be supplied using data attributes.
+  # sanitize sanitize_fn white_list
+  # optional :content
+  required :tooltip_title
+  optional :tag
+  optional class: { as:  :bs_class }
+  optional :id
+  DATA_ATTRIBUTES = %i[text variant animation placement tabindex trigger boundary offset popper_config]
+  optional *DATA_ATTRIBUTES
+
+  def response
+    case context.tag
+    when :div
+      div tooltip_attributes do
+        yield if block_given?
+      end
+    else
+      span tooltip_attributes do
+        yield if block_given?
+      end
+    end
+  end
+
+  protected
+
+  def tooltip_attributes
+    attributes = {}.tap do |hash|
+      hash[:class] = tooltip_classes
+      hash[:text] = context.text if context.text.present?
+      hash[:data] = {}.tap do |hash|
+        DATA_ALIAS_ATTRIBUTES.each do |attribute|
+          hash["bs-#{attribute}"] = context.send("#{attribute}") if context.send("#{attribute}")
+        end
+        DATA_ATTRIBUTES.each do |attribute|
+          hash["bs-#{attribute}"] = context.send("#{attribute}") if context.send("#{attribute}")
+        end
+        hash["bs-toggle"] = "tooltip"
+        hash["bs-type"] = context.tag
+        hash["bs-placement"] = "auto" if context.placement.nil?
+        hash["bs-title"] = context.tooltip_title
+      end
+    end
+    options.merge(
+      attributes || {}
+    )
+  end
+
+  def tooltip_classes
+    [].tap do |classes|
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+
+end

data/{app/concepts → lib}/matestack/ui/bootstrap/content/figure.rb

@@ -1,7 +1,9 @@
-class Matestack::Ui::Bootstrap::Content::Figure < Matestack::Ui::Component
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Content::Figure < Matestack::Ui::Bootstrap::BaseComponent
 
   def response
     # provide a bootstrap figure
   end
 
-end
+end

data/lib/matestack/ui/bootstrap/content/smart_collection/collection.rb

@@ -0,0 +1,120 @@
+require_relative "../../base_component"
+
+require_relative "./content"
+require_relative "./filter"
+require_relative "./paginate"
+
+class Matestack::Ui::Bootstrap::Content::SmartCollection::Collection < Matestack::Ui::Bootstrap::BaseComponent
+  include Matestack::Ui::VueJs::Components::Collection::Helper
+  include Matestack::Ui::Bootstrap::Content::SmartCollection::Content
+  include Matestack::Ui::Bootstrap::Content::SmartCollection::Filter
+  include Matestack::Ui::Bootstrap::Content::SmartCollection::Paginate
+
+  # html attributes
+  optional :id
+
+  # table configuration
+  optional :items
+  optional :columns
+  optional :filters
+  optional :footer
+  optional :paginate
+  optional :rerender_on
+  optional :item_actions_proc
+  optional :collection_rendering_proc
+
+
+  # bootstrap settings
+  optional :responsive
+  optional :variant
+  optional :striped
+  optional :hoverable
+  optional :border_variant
+  optional :borderless
+
+  attr_accessor :processed_filters
+
+  def response
+    div id: context.id, class: "smart-collection" do
+      filter_partial
+      content
+    end
+  end
+
+
+  private
+
+  def collection
+    return @collection if @collection
+    settings = {}.tap do |h|
+      h[:id] = context.id || "smartcollection"
+      h[:data] = filtered_query
+      h[:base_count] = context.items.count
+      h[:init_limit] = context.paginate if context.paginate
+      h[:filtered_count] = filtered_query.count if context.paginate
+    end
+    @collection = set_collection(settings)
+  end
+
+  def collection_id
+    collection.config[:id]
+  end
+
+  def filtered_query
+    return @filtered_query if @filtered_query
+    @filtered_query = context.items
+    unless context.filters.nil?
+      context.filters.select { |key, value| '.'.in? key.to_s }.each do |key, value|
+        associated_name = key.to_s.split(".").first
+        @filtered_query = @filtered_query.joins(associated_name.to_sym).all
+        if value.is_a?(Hash)
+          processed_filters[key] = value
+          @filtered_query = add_query_filter(@filtered_query, associated_name, key, value)
+        end
+      end
+      context.filters.reject { |key, value| '.'.in? key.to_s }.each do |key, value|
+        if value.is_a?(Hash)
+          processed_filters[key] = value
+          @filtered_query = add_query_filter(@filtered_query, nil, key, value)
+        end
+      end
+    end
+    @filtered_query
+  end
+
+  def add_query_filter(query, associated_name, key, filter_config)
+    value = get_collection_filter(collection_id)[key.to_sym]
+    if value.present?
+      if associated_name.present?
+        table_name = context.items.klass.reflections[associated_name].table_name
+        key = key.to_s.gsub(associated_name, table_name)
+      else
+        table_name = context.items.klass.table_name
+        key = key.to_s
+      end
+      case filter_config[:match]
+      when :equals
+        query = query.where("#{key}": value)
+      when :starts_with
+        query = query.where("lower(#{key}) LIKE ?", "#{value.downcase}%")
+      when :ends_with
+        query = query.where("lower(#{key}) LIKE ?", "%#{value.downcase}")
+      when :like
+        query = query.where("lower(#{key}) LIKE ?", "%#{value.downcase}%")
+      else
+        query = query.where("#{key}": value)
+      end
+    end
+    query
+  end
+
+  def head_columns
+    context.columns.map { |key, value| value.is_a?(Hash) ? value[:heading] : value }
+  end
+
+  def processed_filters
+    @filters ||= {}
+  end
+
+
+end

data/lib/matestack/ui/bootstrap/content/smart_collection/content.rb

@@ -0,0 +1,118 @@
+module Matestack::Ui::Bootstrap::Content::SmartCollection::Content
+
+  def content
+    bs_row class: 'smart-collection-content' do
+      bs_col do
+        async id: "#{collection_id}-async", rerender_on: "#{collection_id}-update, #{context.rerender_on} " do
+          collection_content collection.config do
+            div class: responsive_class do
+              if slots && slots[:collection_rendering]
+                slot :collection_rendering, collection.paginated_data
+              elsif context.columns
+                div class: "table-responsive" do
+                  table table_attributes do
+                    table_head
+                    table_body
+                    table_footer
+                  end
+                end
+              end
+            end
+            paginate_partial if context.paginate.present?
+          end
+        end
+      end
+    end
+  end
+
+  def table_head
+    thead do
+      tr do
+        context.columns&.each do |key, value|
+          th class: cell_class(value), scope: :col do
+            plain value.is_a?(Hash) ? value[:heading] : value
+          end
+        end
+        th if slots && slots[:table_item_actions]
+      end
+    end
+  end
+
+  def table_body
+    tbody do
+      collection.paginated_data.each_with_index do |data, index|
+        tr class: 'align-middle' do
+          context.columns.each do |key, value|
+            cell(data, key, value)
+          end
+          if slots && slots[:table_item_actions]
+            td class: 'text-end' do
+              slot :table_item_actions, data
+            end
+          end
+        end
+      end
+    end
+  end
+
+  def table_footer
+    tfoot do
+      tr do
+        context.footer&.each do |value|
+          td value
+        end
+      end
+    end if context.footer
+  end
+
+  private
+
+  def cell(data, key, value)
+    td class: cell_class(value) do
+      if value.is_a?(Hash) && value[:slot]
+        value[:slot].call(data)
+      else
+        plain cell_text(data, key, value)
+      end
+    end
+  end
+
+  def cell_class(value)
+    [].tap do |classes|
+      classes << "text-#{value[:text]}" if value[:text]
+      classes << "align-#{value[:align]}" if value[:align]
+    end.join(' ') if value.is_a? Hash
+  end
+
+  def cell_text(data, key, value)
+    if value.is_a?(Hash)
+      if value[:attribute].present?
+        text = data.instance_eval(value[:attribute].to_s)
+      else
+        text = data.instance_eval(key.to_s)
+      end
+      text = value[:format].call(text) if value[:format].present?
+    else
+      text = data.instance_eval(key.to_s)
+    end
+
+    text
+  end
+
+  def table_attributes
+    klass = ['table'].tap do |classes|
+      classes << "table-#{context.variant}" if context.variant
+      classes << "table-striped" if context.striped
+      classes << "table-hover" if context.hoverable
+      classes << "table-bordered border-#{context.border_variant}" if context.border_variant
+      classes << "table-borderless" if context.borderless
+    end.join(' ').strip
+    { id: collection_id, class: klass }
+  end
+
+  def responsive_class
+    return unless context.responsive
+    responsive === true ? 'table-responsive' : "table-responsive-#{context.responsive}"
+  end
+
+end