matestack-ui-bootstrap 1.4.0 → 2.1.0

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

@@ -1,4 +1,4 @@
-module Matestack::Ui::Bootstrap::Content::Collection::Filter
+module Matestack::Ui::Bootstrap::Content::SmartCollection::Filter
 
   def filter_partial
     collection_filter collection.config do
@@ -18,15 +18,19 @@ module Matestack::Ui::Bootstrap::Content::Collection::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(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(class: 'form-control')
+      bs_form_input attributes.merge(class: 'smart-collection-filter')
     end
   end
 

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

@@ -1,11 +1,11 @@
-module Matestack::Ui::Bootstrap::Content::Collection::Paginate
+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,9 +15,9 @@ module Matestack::Ui::Bootstrap::Content::Collection::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 #{ 'disabled' if current_page == 1 }" do
+        li class: "page-item previous #{ 'disabled' if current_page == 1 }" do
           collection_content_previous class: 'page-link' do
             bs_icon name: "chevron-left", size: 10
           end
@@ -30,7 +30,7 @@ module Matestack::Ui::Bootstrap::Content::Collection::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::Collection::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
@@ -59,7 +59,7 @@ module Matestack::Ui::Bootstrap::Content::Collection::Paginate
             end
           end
         end
-        li class: "page-item #{ 'disabled' if current_page == last_page }" do
+        li class: "page-item next #{ 'disabled' if current_page == last_page }" do
           collection_content_next class: 'page-link' do
             bs_icon name: "chevron-right", size: 10
           end
@@ -77,15 +77,20 @@ module Matestack::Ui::Bootstrap::Content::Collection::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,90 @@
+class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::VueJs::Components::Form::Checkbox
+
+  include Matestack::Ui::Bootstrap::Registry
+
+  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,118 @@
+class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::VueJs::Components::Form::Input
+
+  include Matestack::Ui::Bootstrap::Registry
+
+  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,57 @@
+class Matestack::Ui::Bootstrap::Form::Radio < Matestack::Ui::VueJs::Components::Form::Radio
+
+  include Matestack::Ui::Bootstrap::Registry
+
+  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

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

@@ -0,0 +1,63 @@
+class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::VueJs::Components::Form::Select
+
+  include Matestack::Ui::Bootstrap::Registry
+
+  vue_name "matestack-ui-core-form-select"
+
+  optional :variant
+  optional :size
+  optional :form_text
+
+  def response
+    div class: "matestack-ui-bootstrap-form-select" do
+      label input_label, ":for": id,  class: "form-label" if input_label
+      select select_attributes.merge(bootstrap_select_attributes) do
+        render_options
+      end
+      render_errors
+      render_form_text
+    end
+  end
+
+  def bootstrap_select_attributes
+    {
+      class: form_select_class,
+      size: size_class,
+      disabled: context.disabled
+    }
+  end
+
+  def form_select_class
+    case context.variant
+    when :lg
+      (options[:class] || "") << (" form-select form-select-lg")
+    when :sm
+      (options[:class] || "") << (" form-select form-select-sm")
+    else
+      (options[:class] || "") << (" form-select")
+    end
+  end
+
+  def size_class
+    context.size
+  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/submit.rb

@@ -0,0 +1,20 @@
+class Matestack::Ui::Bootstrap::Form::Submit < Matestack::Ui::Bootstrap::BaseComponent
+
+  optional :button_variant
+  optional :spinner_variant
+  optional :loading_text
+  optional :loading_class
+  optional :size
+  optional class: { as:  :bs_class }
+
+  def response
+    bs_btn type: "submit", size:context.size, class: "#{context.bs_class}", variant: context.button_variant || :primary, "v-if": "!loading" do
+      plain context.text || "Submit"
+    end
+    bs_btn type: "submit", size: context.size, class: "#{context.bs_class} #{context.loading_class}", variant: context.button_variant || :primary, disabled: true, "v-if": "loading" do
+      bs_spinner variant: context.spinner_variant || :light, size: :sm
+      plain context.loading_text || "Loading..."
+    end
+  end
+
+end