matestack-ui-bootstrap 1.5.1 → 3.0.0.rc1

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

@@ -1,32 +1,34 @@
-class Matestack::Ui::Bootstrap::Components::Tooltip < Matestack::Ui::VueJsComponent
-  vue_js_component_name "matestack-ui-bootstrap-tooltip"
+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}": { as: :"bs_#{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
-  requires :tooltip_title
+  required :tooltip_title
   optional :tag
-  optional class: { as: :bs_class }
-  optional id: { as: :bs_id }
+  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 tag
+    case context.tag
     when :div
       div tooltip_attributes do
-        yield_components
+        yield if block_given?
       end
     else
       span tooltip_attributes do
-        yield_components
+        yield if block_given?
       end
     end
   end
@@ -36,28 +38,28 @@ class Matestack::Ui::Bootstrap::Components::Tooltip < Matestack::Ui::VueJsCompon
   def tooltip_attributes
     attributes = {}.tap do |hash|
       hash[:class] = tooltip_classes
-      hash[:text] = text if text.present?
+      hash[:text] = context.text if context.text.present?
       hash[:data] = {}.tap do |hash|
         DATA_ALIAS_ATTRIBUTES.each do |attribute|
-          hash["bs-#{attribute}"] = self.send(:"bs_#{attribute}") if self.send(:"bs_#{attribute}")
+          hash["bs-#{attribute}"] = context.send("#{attribute}") if context.send("#{attribute}")
         end
         DATA_ATTRIBUTES.each do |attribute|
-          hash["bs-#{attribute}"] = self.send(:"#{attribute}") if self.send(:"#{attribute}")
+          hash["bs-#{attribute}"] = context.send("#{attribute}") if context.send("#{attribute}")
         end
         hash["bs-toggle"] = "tooltip"
-        hash["bs-type"] = tag
-        hash["bs-placement"] = "auto" if placement.nil?
-        hash["bs-title"] = tooltip_title
+        hash["bs-type"] = context.tag
+        hash["bs-placement"] = "auto" if context.placement.nil?
+        hash["bs-title"] = context.tooltip_title
       end
     end
-    html_attributes.merge(
-      attributes
+    options.merge(
+      attributes || {}
     )
   end
 
   def tooltip_classes
     [].tap do |classes|
-      classes << bs_class
+      classes << context.bs_class
     end.join(' ').strip
   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/{app/concepts → lib}/matestack/ui/bootstrap/content/smart_collection/collection.rb

@@ -1,11 +1,17 @@
-class Matestack::Ui::Bootstrap::Content::SmartCollection::Collection < Matestack::Ui::Component
-  include Matestack::Ui::Core::Collection::Helper
+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: { as: :bs_id }
+  optional :id
 
   # table configuration
   optional :items
@@ -16,7 +22,7 @@ class Matestack::Ui::Bootstrap::Content::SmartCollection::Collection < Matestack
   optional :rerender_on
   optional :item_actions_proc
   optional :collection_rendering_proc
-  optional :slots
+
 
   # bootstrap settings
   optional :responsive
@@ -29,7 +35,7 @@ class Matestack::Ui::Bootstrap::Content::SmartCollection::Collection < Matestack
   attr_accessor :processed_filters
 
   def response
-    div id: bs_id, class: "smart-collection" do
+    div id: context.id, class: "smart-collection" do
       filter_partial
       content
     end
@@ -41,11 +47,11 @@ class Matestack::Ui::Bootstrap::Content::SmartCollection::Collection < Matestack
   def collection
     return @collection if @collection
     settings = {}.tap do |h|
-      h[:id] = bs_id || "smartcollection"
+      h[:id] = context.id || "smartcollection"
       h[:data] = filtered_query
-      h[:base_count] = items.count
-      h[:init_limit] = paginate if paginate
-      h[:filtered_count] = filtered_query.count if paginate
+      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
@@ -56,9 +62,9 @@ class Matestack::Ui::Bootstrap::Content::SmartCollection::Collection < Matestack
 
   def filtered_query
     return @filtered_query if @filtered_query
-    @filtered_query = items
-    unless filters.nil?
-      filters.select { |key, value| '.'.in? key.to_s }.each do |key, value|
+    @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)
@@ -66,7 +72,7 @@ class Matestack::Ui::Bootstrap::Content::SmartCollection::Collection < Matestack
           @filtered_query = add_query_filter(@filtered_query, associated_name, key, value)
         end
       end
-      filters.reject { |key, value| '.'.in? key.to_s }.each do |key, value|
+      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)
@@ -80,10 +86,10 @@ class Matestack::Ui::Bootstrap::Content::SmartCollection::Collection < Matestack
     value = get_collection_filter(collection_id)[key.to_sym]
     if value.present?
       if associated_name.present?
-        table_name = items.klass.reflections[associated_name].table_name
+        table_name = context.items.klass.reflections[associated_name].table_name
         key = key.to_s.gsub(associated_name, table_name)
       else
-        table_name = items.klass.table_name
+        table_name = context.items.klass.table_name
         key = key.to_s
       end
       case filter_config[:match]
@@ -103,7 +109,7 @@ class Matestack::Ui::Bootstrap::Content::SmartCollection::Collection < Matestack
   end
 
   def head_columns
-    columns.map { |key, value| value.is_a?(Hash) ? value[:heading] : value }
+    context.columns.map { |key, value| value.is_a?(Hash) ? value[:heading] : value }
   end
 
   def processed_filters

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

@@ -3,12 +3,12 @@ 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, #{rerender_on} " 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 slots[:collection_rendering].call(collection.paginated_data)
-              elsif columns
+                slot :collection_rendering, collection.paginated_data
+              elsif context.columns
                 div class: "table-responsive" do
                   table table_attributes do
                     table_head
@@ -18,7 +18,7 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Content
                 end
               end
             end
-            paginate_partial if paginate.present?
+            paginate_partial if context.paginate.present?
           end
         end
       end
@@ -28,8 +28,10 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Content
   def table_head
     thead do
       tr do
-        columns&.each do |key, value|
-          th text: value.is_a?(Hash) ? value[:heading] : value, class: cell_class(value), attributes: { scope: :col }
+        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
@@ -40,12 +42,12 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Content
     tbody do
       collection.paginated_data.each_with_index do |data, index|
         tr class: 'align-middle' do
-          columns.each do |key, value|
+          context.columns.each do |key, value|
             cell(data, key, value)
           end
           if slots && slots[:table_item_actions]
             td class: 'text-end' do
-              slot slots[:table_item_actions].call(data)
+              slot :table_item_actions, data
             end
           end
         end
@@ -56,17 +58,23 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Content
   def table_footer
     tfoot do
       tr do
-        footer&.each do |value|
-          td text: value
+        context.footer&.each do |value|
+          td value
         end
       end
-    end if footer
+    end if context.footer
   end
 
   private
 
   def cell(data, key, value)
-    td text: cell_text(data, key, value), class: cell_class(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)
@@ -77,25 +85,34 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Content
   end
 
   def cell_text(data, key, value)
-    text = data.instance_eval(key.to_s)
-    text = value[:format].call(text) if value.is_a?(Hash) && value[:format]
+    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-#{variant}" if variant
-      classes << "table-striped" if striped
-      classes << "table-hover" if hoverable
-      classes << "table-bordered border-#{border_variant}" if border_variant
-      classes << "table-borderless" if borderless
+      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 responsive
-    responsive === true ? 'table-responsive' : "table-responsive-#{responsive}"
+    return unless context.responsive
+    responsive === true ? 'table-responsive' : "table-responsive-#{context.responsive}"
   end
 
 end

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

@@ -18,15 +18,19 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Filter
 
   def filter_input(key, config)
     attributes = {
+      id: key,
       key: key,
       type: :text,
       placeholder: config[:placeholder] || key.to_s,
+      label: config[:label]
     }
     case config[:type]
     when :select
-      collection_filter_select attributes.merge(id: key, class: 'form-select', options: config[:options])
+      bs_form_select attributes.merge(options: config[:options])
+    when :checkbox
+      bs_form_checkbox attributes.merge(options: config[:options])
     else
-      collection_filter_input attributes.merge(id: key, class: 'form-control smart-collection-filter')
+      bs_form_input attributes.merge(class: 'smart-collection-filter')
     end
   end
 

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

@@ -3,9 +3,9 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Paginate
   def paginate_partial
     div class: "current-pagination-state ps-2" do
       small do
-        plain "showing #{@collection.from}"
-        plain "to #{@collection.to}"
-        plain "of #{@collection.filtered_count}"
+        plain "showing #{@collection.from} "
+        plain "to #{@collection.to} "
+        plain "of #{@collection.filtered_count} "
         if (@collection.base_count - @collection.filtered_count) > 0
           plain "(#{@collection.base_count - @collection.filtered_count} hidden by filter)"
         end
@@ -15,7 +15,7 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Paginate
   end
 
   def pagination_nav_partial
-    nav class: "table-responsive", attributes: { style: "display: -webkit-box;" } do
+    nav class: "table-responsive", style: "display: -webkit-box;" do
       ul class: ul_classes do
         li class: "page-item previous #{ 'disabled' if current_page == 1 }" do
           collection_content_previous class: 'page-link' do
@@ -30,7 +30,7 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Paginate
           end
           unless current_page == 6
             li class: "page-item disabled" do
-              link class: 'page-link', path: "#" do
+              a class: 'page-link', path: "#" do
                 plain "..."
               end
             end
@@ -48,7 +48,7 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Paginate
         if @collection.pages.count >= 9 && last_page-current_page > 4
           unless current_page == last_page-5
             li class: "page-item disabled" do
-              link class: 'page-link', path: "#" do
+              a class: 'page-link', path: "#" do
                 plain "..."
               end
             end
@@ -77,15 +77,20 @@ module Matestack::Ui::Bootstrap::Content::SmartCollection::Paginate
   end
 
   def current_page
-    current_offset = params["#{bs_id}-offset"].try(:to_i)
-    (current_offset/paginate)+1 if current_offset && paginate.present?
+    current_offset = params["#{context.id}-offset"].try(:to_i)
+    if current_offset && context.paginate.present?
+      (current_offset/context.paginate)+1 
+    elsif context.paginate.present?
+      1
+    end
   end
+    
 
   def last_page
-    if @collection.filtered_count%paginate == 0
-      (@collection.filtered_count/paginate)
+    if @collection.filtered_count%context.paginate == 0
+      (@collection.filtered_count/context.paginate)
     else
-      (@collection.filtered_count/paginate)+1
+      (@collection.filtered_count/context.paginate)+1
     end
   end
 

data/lib/matestack/ui/bootstrap/form/checkbox.rb

@@ -0,0 +1,88 @@
+class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Components::Form::Checkbox
+
+  vue_name "matestack-ui-core-form-checkbox"
+
+  optional :form_text
+  optional :disabled
+  optional :variant
+
+  def response
+    div class: "matestack-ui-bootstrap-form-checkbox" do
+      label input_label, class: "form-label", ":for": id if input_label && multiple?
+      render_options
+      render_errors
+      render_form_text unless context.form_text.nil? # otherwise renders empty div
+    end
+  end
+
+  private
+
+  def bootstrap_attributes
+    classes = 'form-check-input'
+    classes = [options[:class], classes].join(' ')
+    {
+      class: classes,
+      disabled: context.disabled
+    }
+  end
+
+  def multiple?
+   checkbox_options.present?
+  end
+
+  def render_options
+    # multiple
+    if multiple?
+     checkbox_options.to_a.each do |item|
+        checkbox_wrapper do
+          input options.merge(checkbox_attributes(item)).merge(bootstrap_attributes)
+          bootstrap_label text: item_label(item), for_input: item_id(item)
+        end
+      end
+    # checked/unchecked checkbox (true/false checkbox)
+    else
+      checkbox_wrapper do
+        input true_false_checkbox_attributes.merge(type: :hidden, id: nil, value: 0)
+        input true_false_checkbox_attributes.merge(type: :checkbox, ":id": item_id(1)).merge(bootstrap_attributes)
+
+        bootstrap_label text: input_label, for_input: item_id(1)
+      end
+    end
+  end
+
+  def checkbox_wrapper(options = {}, &block)
+    wrapper_attributes = (options[:attributes] || {}).merge({
+      class: "form-check #{'form-check-inline' if context.variant == :inline}"
+    })
+    div wrapper_attributes do
+      yield if block_given?
+    end
+  end
+
+  def bootstrap_label(text:, for_input:)
+    label text, ":for": for_input, class: 'form-check-label'
+  end
+
+  def render_errors
+    if display_errors?
+      div class: 'invalid-feedback', 'v-for': "error in #{error_key}", style: "display: block;" do
+        plain '{{ error }}'
+      end
+    end
+  end
+
+  def error_class
+    'is-invalid'
+  end
+
+  def checkbox_options
+    super || {}
+  end
+
+  def render_form_text
+    div class: "form-text form-text-for-#{attribute_key}" do
+      plain context.form_text
+    end
+  end
+
+end

data/lib/matestack/ui/bootstrap/form/input.rb

@@ -0,0 +1,116 @@
+class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::VueJs::Components::Form::Input
+
+  vue_name "matestack-ui-core-form-input"
+
+  optional :form_text
+  optional :disabled
+  optional :browse_button_text
+  optional :placeholder
+  optional :variant
+  optional :min
+  optional :max
+  optional :step
+  optional :show_value
+
+  def response
+    div class: "matestack-ui-bootstrap-input" do
+      label input_label, ":for": id,  class: "form-label" if input_label
+      case context.type
+      when :range
+        input options.merge(input_attributes).merge(bootstrap_range_attributes)
+        if context.show_value
+          div class: "form-text form-text-for-#{attribute_key}" do
+            plain "{{ data['#{attribute_key}'] }}"
+          end
+        end
+      when :file
+        file_input
+      else
+        input options.merge(input_attributes).merge(bootstrap_input_attributes)
+        render_errors
+      end
+      render_form_text if context.form_text
+    end
+  end
+
+  def bootstrap_input_attributes
+    {
+      class: (options[:class] || "") << (" form-control"),
+      disabled: context.disabled,
+      min: context.min,
+      max: context.max,
+      step: context.step
+    }
+  end
+
+  def bootstrap_range_attributes
+    {
+      class: (options[:class] || "") << (" form-range"),
+      disabled: context.disabled,
+      min: context.min,
+      max: context.max,
+      step: context.step
+    }
+  end
+
+  def bootstrap_file_input_attributes
+    {
+      class: (options[:class] || "") << (" form-file-input"),
+      disabled: context.disabled
+    }
+  end
+
+  def form_file_wrapper_class
+    case context.variant
+    when :lg
+      (options[:class] || "") << (" form-file form-file-lg")
+    when :sm
+      (options[:class] || "") << (" form-file form-file-sm")
+    else
+      (options[:class] || "") << (" form-file")
+    end
+  end
+
+  def file_input
+    div class: form_file_wrapper_class do
+      input options.merge(input_attributes).merge(bootstrap_file_input_attributes)
+      label class: "form-file-label", for: attribute_key do
+        span class: "form-file-text", "v-if": "data['#{attribute_key}']" do
+          if context.multiple
+            span "v-for": "file in data['#{attribute_key}']" do
+              plain "{{ file['name'] }}"
+            end
+          else
+            plain "{{ data['#{attribute_key}']['name'] }}"
+          end
+        end
+        span class: "form-file-text", "v-if": "!data['#{attribute_key}']" do
+          plain context.placeholder || "Choose file"
+        end
+        span class: "form-file-button" do
+          plain context.browse_button_text || "Browse"
+        end
+      end
+      render_errors
+    end
+  end
+
+  def render_errors
+    if display_errors?
+      div class: 'invalid-feedback', 'v-for': "error in #{error_key}" do
+        plain '{{ error }}'
+      end
+    end
+  end
+
+  def input_error_class
+    'is-invalid'
+  end
+
+  def render_form_text
+    div class: "form-text form-text-for-#{attribute_key}" do
+      plain context.form_text
+    end
+  end
+
+end

data/lib/matestack/ui/bootstrap/form/radio.rb

@@ -0,0 +1,55 @@
+class Matestack::Ui::Bootstrap::Form::Radio < Matestack::Ui::VueJs::Components::Form::Radio
+
+  vue_name "matestack-ui-core-form-radio"
+
+  optional :form_text
+  optional :disabled
+  optional :variant
+
+  def response
+    div class: "matestack-ui-bootstrap-radio" do
+      label input_label, class: "form-label", ":for": id if input_label
+
+      radio_options.to_a.each_with_index do |item, index|
+        div class: "form-check #{'form-check-inline' if context.variant == :inline}" do
+          input options.merge(radio_attributes(item)).merge(bootstrap_radio_attributes)
+          label item_label(item), class: "form-check-label", ":for": item_id(item_value(item))
+          if index == radio_options.to_a.size - 1
+            render_errors
+          end
+        end
+      end
+      render_form_text if context.form_text
+    end
+
+  end
+
+  private
+
+  def bootstrap_radio_attributes
+    classes = 'form-check-input'
+    {
+      class: (options[:class] || "") << classes,
+      disabled: context.disabled
+    }
+  end
+
+  def render_form_text
+    div class: "form-text form-text-for-#{attribute_key}" do
+      plain context.form_text
+    end
+  end
+
+  def render_errors
+    if display_errors?
+      div class: 'invalid-feedback', 'v-for': "error in #{error_key}", style: "display: block;" do
+        plain '{{ error }}'
+      end
+    end
+  end
+
+  def input_error_class
+    'is-invalid'
+  end
+
+end