matestack-ui-bootstrap 1.4.0 → 1.5.0

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

@@ -1,4 +1,4 @@
-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
@@ -17,7 +17,7 @@ module Matestack::Ui::Bootstrap::Content::Collection::Paginate
   def pagination_nav_partial
     nav class: "table-responsive", attributes: { 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
@@ -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

data/app/concepts/matestack/ui/bootstrap/form/checkbox.rb

@@ -1,73 +1,78 @@
-class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::Core::Form::Checkbox::Checkbox
+class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::Core::Form::Checkbox::Base
+
+  vue_js_component_name "matestack-ui-core-form-checkbox"
 
   optional :form_text
   optional :disabled
   optional :variant
 
   def response
-    if !checkbox_options.empty?
-      label for: attr_key,  class: "form-label", text: input_label if input_label
-    end
-    if !checkbox_options.empty?
-      multiple_checkboxes
-    else
-      true_false_checkbox
+    div class: "matestack-ui-bootstrap-form-checkbox" do
+      label class: "form-label", text: input_label, for: attr_key if input_label && multiple?
+      render_options
+      render_errors
+      render_form_text unless form_text.nil? # otherwise renders empty div
     end
-    render_form_text
   end
 
   private
 
-  def checkbox_wrapper(options = {}, &block)
-    div class: "form-check #{'form-check-inline' if variant == :inline}", attributes: options[:attributes] do
-      yield
-    end
+  def multiple?
+    options[:options].present?
   end
 
-  def bootstrap_label(text:, for_input:)
-    label text: text, for: for_input, class: 'form-check-label'
-  end
-
-  def true_false_checkbox
-    checkbox_wrapper do
-      form_input type: :hidden, key: key, value: (false_value || 0), errors: false
-      input html_attributes.merge(
-        type: :checkbox,
-        id: "#{id_for_item(value)}",
-        name: item_name(key),
-        value: checked_value,
-        class: 'form-check-input',
-        disabled: disabled,
-        attributes: vue_attributes.merge(
-          ref: "input.#{attr_key}",
+  def render_options
+    # multiple
+    if multiple?
+      options[:options].to_a.each do |item|
+        checkbox_wrapper do
+          input html_attributes.merge(
+            attributes: vue_attributes,
+            type: :checkbox,
+            id: "#{id_for_item(item_value(item))}",
+            name: item_name(item),
+            value: item_value(item),
+            class: 'form-check-input'
+          )
+          bootstrap_label text: item_name(item), for_input: id_for_item(item_value(item))
+        end
+      end
+    # checked/unchecked checkbox (true/false checkbox)
+    else
+      checkbox_wrapper do
+        input html_attributes.merge(
+          attributes: vue_attributes_for_single_input,
+          type: :hidden,
+          value: (false_value || 0),
+          class: 'form-check-input'
         )
-      )
-      bootstrap_label text: input_label, for_input: id_for_item(value)
-      render_errors
-    end
-  end
 
-  def multiple_checkboxes
-    checkbox_options.to_a.each do |item|
-      checkbox_wrapper do
         input html_attributes.merge(
+          attributes: vue_attributes_for_single_input,
           type: :checkbox,
-          id: "#{id_for_item(item_value(item))}",
-          name: item_name(item),
-          value: item_value(item),
-          class: 'form-check-input',
-          disabled: disabled,
-          attributes: vue_attributes
+          id: id_for_item(value),
+          value: checked_value,
+          class: 'form-check-input'
         )
-        bootstrap_label text: item_name(item), for_input: id_for_item(item_value(item))
-        render_errors if checkbox_options.to_a.last == item
+
+        bootstrap_label text: input_label, for_input: id_for_item(value)
       end
     end
   end
 
+  def checkbox_wrapper(options = {}, &block)
+    div class: "form-check #{'form-check-inline' if variant == :inline}", attributes: options[:attributes] do
+      yield
+    end
+  end
+
+  def bootstrap_label(text:, for_input:)
+    label text: text, for: for_input, class: 'form-check-label'
+  end
+
   def render_errors
     unless @included_config[:errors] == false && (errors == false || errors.nil?) || errors == false
-      div class: 'invalid-feedback', attributes: { 'v-for': "error in #{error_key}" } do
+      div class: 'invalid-feedback', attributes: { 'v-for': "error in #{error_key}", style: "display: block;" } do
         plain '{{ error }}'
       end
     end
@@ -87,4 +92,8 @@ class Matestack::Ui::Bootstrap::Form::Checkbox < Matestack::Ui::Core::Form::Chec
     end
   end
 
+  def id_for_item(value)
+    "#{html_attributes[:id]}_#{value}_#{attr_key}"
+  end
+
 end

data/app/concepts/matestack/ui/bootstrap/form/input.rb

@@ -1,4 +1,6 @@
-class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::Core::Form::Input::Input
+class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::Core::Form::Input::Base
+
+  vue_js_component_name "matestack-ui-core-form-input"
 
   optional :form_text
   optional :disabled
@@ -11,7 +13,7 @@ class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::Core::Form::Input::
   optional :show_value
 
   def response
-    div do
+    div class: "matestack-ui-bootstrap-input" do
       label for: attr_key,  class: "form-label", text: input_label if input_label
       case type
       when :range
@@ -31,22 +33,9 @@ class Matestack::Ui::Bootstrap::Form::Input < Matestack::Ui::Core::Form::Input::
     end
   end
 
-  def vue_attributes
-    (options[:attributes] || {}).merge({
-      id: attr_key,
-      "@change": change_event,
-      ref: "input.#{attr_key}",
-      'init-value': init_value,
-      'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
-      "aria-describedby": attr_key,
-      "step": "any"
-    }).merge(
-      type != :file ? { "#{v_model_type}": input_key } : {}
-    ) # file inputs are readonly, no v-model possible
-  end
-
   def bootstrap_input_attributes
     {
+      id: (options[:id] || attr_key),
       class: (options[:class] || "") << (" form-control"),
       disabled: disabled
     }

data/app/concepts/matestack/ui/bootstrap/form/radio.rb

@@ -1,30 +1,34 @@
-class Matestack::Ui::Bootstrap::Form::Radio < Matestack::Ui::Core::Form::Radio::Radio
+class Matestack::Ui::Bootstrap::Form::Radio < Matestack::Ui::Core::Form::Radio::Base
+
+  vue_js_component_name "matestack-ui-core-form-radio"
 
   optional :form_text
   optional :disabled
   optional :variant
 
   def response
-    label class: "form-label", text: input_label if input_label
-
-    radio_options.to_a.each_with_index do |item, index|
-      div class: "form-check #{'form-check-inline' if variant == :inline}" do
-        input html_attributes.merge(
-          attributes: vue_attributes,
-          type: :radio,
-          id: "#{id_for_item(item_value(item))}",
-          name: item_name(item),
-          value: item_value(item),
-          class: radio_class,
-          disabled: disabled
-        )
-        label class: "form-check-label", text: item_label(item), for: id_for_item(item_value(item))
-        if index == radio_options.to_a.size - 1
-          render_errors
+    div class: "matestack-ui-bootstrap-radio" do
+      label class: "form-label", text: input_label if input_label
+
+      radio_options.to_a.each_with_index do |item, index|
+        div class: "form-check #{'form-check-inline' if variant == :inline}" do
+          input html_attributes.merge(
+            attributes: vue_attributes,
+            type: :radio,
+            id: "#{id_for_item(item_value(item))}",
+            name: item_name(item),
+            value: item_value(item),
+            class: radio_class,
+            disabled: disabled
+          )
+          label class: "form-check-label", text: item_label(item), for: id_for_item(item_value(item))
+          if index == radio_options.to_a.size - 1
+            render_errors
+          end
         end
       end
+      render_form_text if form_text
     end
-    render_form_text if form_text
 
   end
 
@@ -32,17 +36,6 @@ class Matestack::Ui::Bootstrap::Form::Radio < Matestack::Ui::Core::Form::Radio::
     (options[:class] || "") << (" form-check-input")
   end
 
-  def vue_attributes
-    (options[:attributes] || {}).merge({
-      "@change": change_event,
-      ref: "select.#{attr_key}",
-      'init-value': init_value,
-      'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
-      'value-type': value_type,
-      "#{v_model_type}": input_key,
-    })
-  end
-
   def render_form_text
     div id: "form_text_for_#{attr_key}", class: "form-text" do
       plain form_text
@@ -61,5 +54,4 @@ class Matestack::Ui::Bootstrap::Form::Radio < Matestack::Ui::Core::Form::Radio::
     'is-invalid'
   end
 
-
 end

data/app/concepts/matestack/ui/bootstrap/form/select.rb

@@ -1,21 +1,20 @@
-class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::Core::Form::Select::Select
+class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::Core::Form::Select::Base
+
+  vue_js_component_name "matestack-ui-core-form-select"
 
   optional :variant
   optional :size
   optional :form_text
 
-  def vue_attributes
-    (options[:attributes] || {}).merge({
-      "@change": change_event,
-      ref: vue_ref,
-      'init-value': determine_init_value,
-      'v-bind:class': "{ '#{input_error_class}': #{error_key} }",
-      'value-type': value_type,
-      'class': form_select_class,
-      'size': size_class,
-      'id': attr_key,
-      "#{v_model_type}": input_key,
-    })
+  def response
+    div class: "matestack-ui-bootstrap-form-select" do
+      label for: attr_key,  class: "form-label", text: input_label if input_label
+      select select_attributes.merge({ id: (options[:id] || attr_key), class: form_select_class, size: size_class }) do
+        render_options
+      end
+      render_errors
+      render_form_text
+    end
   end
 
   def form_select_class
@@ -33,26 +32,6 @@ class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::Core::Form::Select
     size
   end
 
-  def determine_init_value
-    if init_value
-      init_value
-    else
-      if multiple
-        []
-      else
-        nil
-      end
-    end
-  end
-
-  def placeholder_value
-    if multiple
-      '[]'
-    else
-      'null'
-    end
-  end
-
   def render_errors
     unless @included_config[:errors] == false && (errors == false || errors.nil?) || errors == false
       div class: 'invalid-feedback', attributes: { 'v-for': "error in #{error_key}" } do

data/app/concepts/matestack/ui/bootstrap/form/submit.rb

@@ -4,13 +4,14 @@ class Matestack::Ui::Bootstrap::Form::Submit < Matestack::Ui::Component
   optional :spinner_variant
   optional :text
   optional :loading_text
+  optional :loading_class
 
   def response
     form_submit do
-      bs_btn type: "submit", variant: button_variant || :primary, attributes: { "v-if": "!loading()" } do
+      bs_btn type: "submit", size: options[:size], class: "#{options[:class]}", variant: button_variant || :primary, attributes: { "v-if": "!loading()" } do
         plain text || "Submit"
       end
-      bs_btn type: "submit", variant: button_variant || :primary, attributes: { disabled: true, "v-if": "loading()" } do
+      bs_btn type: "submit", size: options[:size], class: "#{options[:class]} #{loading_class}", variant: button_variant || :primary, attributes: { disabled: true, "v-if": "loading()" } do
         bs_spinner variant: spinner_variant || :light, size: :sm
         plain loading_text || "Loading..."
       end

data/app/concepts/matestack/ui/bootstrap/form/switch.rb

@@ -1,19 +1,27 @@
-class Matestack::Ui::Bootstrap::Form::Switch < Matestack::Ui::Core::Form::Checkbox::Checkbox
+class Matestack::Ui::Bootstrap::Form::Switch < Matestack::Ui::Bootstrap::Form::Checkbox
+
+  vue_js_component_name "matestack-ui-core-form-checkbox"
 
   optional :form_text
   optional :disabled
   optional :variant
 
   def response
-    if !checkbox_options.empty?
-      label for: attr_key,  class: "form-label", text: input_label if input_label
-    end
-    if !checkbox_options.empty?
-      multiple_switches
-    else
-      true_false_switch
+    div class: "matestack-ui-bootstrap-switch" do
+      label class: "form-label", text: input_label, for: attr_key if input_label && multiple?
+      render_options
+      render_errors
+      render_form_text unless form_text.nil? # otherwise renders empty div
+      # if !checkbox_options.empty?
+      #   label for: attr_key,  class: "form-label", text: input_label if input_label
+      # end
+      # if !checkbox_options.empty?
+      #   multiple_switches
+      # else
+      #   true_false_switch
+      # end
+      # render_form_text unless form_text.nil? # otherwise renders empty div
     end
-    render_form_text
   end
 
   private
@@ -24,67 +32,68 @@ class Matestack::Ui::Bootstrap::Form::Switch < Matestack::Ui::Core::Form::Checkb
     end
   end
 
-  def bs_label(text:, for_input:)
-    label text: text, for: for_input, class: 'form-check-label'
-  end
-
-  def true_false_switch
-    checkbox_wrapper do
-      form_input type: :hidden, key: key, value: (false_value || 0), errors: false
-      input html_attributes.merge(
-        type: :checkbox,
-        id: "#{id_for_item(value)}",
-        name: item_name(key),
-        value: checked_value,
-        class: 'form-check-input',
-        disabled: disabled,
-        attributes: vue_attributes.merge(
-          ref: "input.#{attr_key}",
-        )
-      )
-      bs_label text: input_label, for_input: id_for_item(value)
-      render_errors
-    end
-  end
-
-  def multiple_switches
-    checkbox_options.to_a.each do |item|
-      checkbox_wrapper do
-        input html_attributes.merge(
-          type: :checkbox,
-          id: "#{id_for_item(item_value(item))}",
-          name: item_name(item),
-          value: item_value(item),
-          class: 'form-check-input',
-          disabled: disabled,
-          attributes: vue_attributes
-        )
-        bs_label text: item_name(item), for_input: id_for_item(item_value(item))
-        render_errors if checkbox_options.to_a.last == item
-      end
-    end
-  end
-
-  def render_errors
-    unless @included_config[:errors] == false && (errors == false || errors.nil?) || errors == false
-      div class: 'invalid-feedback', attributes: { 'v-for': "error in #{error_key}" } do
-        plain '{{ error }}'
-      end
-    end
-  end
-
-  def input_error_class
-    'is-invalid'
-  end
-
-  def checkbox_options
-    super || {}
-  end
-
-  def render_form_text
-    div id: "form_text_for_#{attr_key}", class: "form-text" do
-      plain form_text
-    end
-  end
+  # def bs_label(text:, for_input:)
+  #   label text: text, for: for_input, class: 'form-check-label'
+  # end
+  #
+  # def true_false_switch
+  #   checkbox_wrapper do
+  #     form_input type: :hidden, key: key, value: (false_value || 0), errors: false
+  #     input html_attributes.merge(
+  #       type: :checkbox,
+  #       id: "#{id_for_item(value)}",
+  #       # id: "#{key}", alternative to address the visible input field better?
+  #       name: item_name(key),
+  #       value: checked_value,
+  #       class: 'form-check-input',
+  #       disabled: disabled,
+  #       attributes: vue_attributes.merge(
+  #         ref: "input.#{attr_key}",
+  #       )
+  #     )
+  #     bs_label text: input_label, for_input: id_for_item(value)
+  #     render_errors
+  #   end
+  # end
+  #
+  # def multiple_switches
+  #   checkbox_options.to_a.each do |item|
+  #     checkbox_wrapper do
+  #       input html_attributes.merge(
+  #         type: :checkbox,
+  #         id: "#{id_for_item(item_value(item))}",
+  #         name: item_name(item),
+  #         value: item_value(item),
+  #         class: 'form-check-input',
+  #         disabled: disabled,
+  #         attributes: vue_attributes
+  #       )
+  #       bs_label text: item_name(item), for_input: id_for_item(item_value(item))
+  #       render_errors if checkbox_options.to_a.last == item
+  #     end
+  #   end
+  # end
+  #
+  # def render_errors
+  #   unless @included_config[:errors] == false && (errors == false || errors.nil?) || errors == false
+  #     div class: 'invalid-feedback', attributes: { 'v-for': "error in #{error_key}" } do
+  #       plain '{{ error }}'
+  #     end
+  #   end
+  # end
+  #
+  # def input_error_class
+  #   'is-invalid'
+  # end
+  #
+  # def checkbox_options
+  #   super || {}
+  # end
+  #
+  # def render_form_text
+  #   div id: "form_text_for_#{attr_key}", class: "form-text" do
+  #     plain form_text
+  #   end
+  # end
 
 end