matestack-ui-bootstrap 1.5.1 → 2.0.0

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

@@ -0,0 +1,116 @@
+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: attribute_key,  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 id: attribute_key, class: "form-text" 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
+    {
+      id: (options[:id] || attribute_key),
+      class: (options[:class] || "") << (" form-control"),
+      disabled: context.disabled
+    }
+  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 id: "form_text_for_#{attribute_key}", class: "form-text" 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
+
+  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" 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
+
+
+  def bootstrap_radio_attributes
+    {
+      class: (options[:class] || "") << (" form-check-input"),
+      disabled: context.disabled
+    }
+  end
+
+  def render_form_text
+    div id: "form_text_for_#{attribute_key}", class: "form-text" 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: attribute_key,  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 id: "form_text_for_#{attribute_key}", class: "form-text" 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

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

@@ -0,0 +1,32 @@
+class Matestack::Ui::Bootstrap::Form::Switch < Matestack::Ui::Bootstrap::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-switch" do
+      label input_label, class: "form-label", for: attribute_key if input_label && multiple?
+      render_options
+      render_errors
+      plain context.form_text
+      render_form_text if context.form_text
+    end
+  end
+
+  private
+
+  def checkbox_wrapper(options = {}, &block)
+    wrapper_attributes = (options[:attributes] || {}).merge({
+      class: "form-check form-switch #{'form-check-inline' if context.variant == :inline}"
+    })
+    div wrapper_attributes do
+      yield if block_given?
+    end
+  end
+
+end

data/lib/matestack/ui/bootstrap/index.js

@@ -0,0 +1,24 @@
+// This file is automatically compiled by Webpack, along with any other files
+// present in this directory. You're encouraged to place your actual application logic in
+// a relevant structure within javascript and only use these pack files to reference
+// that code so it'll be compiled.
+
+import "./stylesheets/matestack-ui-bootstrap.scss";
+
+import './components/alert'
+import './components/carousel'
+import './components/collapse'
+import './components/dropdown'
+import './components/modal'
+import './components/toast'
+import './components/popover'
+import './components/tooltip'
+import './layout/sidebar'
+import './layout/sidebar.scss'
+import './content/smart_collection/collection.scss'
+
+const MatestackUiBootstrap = {}
+
+window.MatestackUiBootstrap = MatestackUiBootstrap
+
+export default MatestackUiBootstrap

data/lib/matestack/ui/bootstrap/layout/column.rb

@@ -0,0 +1,49 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Layout::Column < Matestack::Ui::Bootstrap::BaseComponent
+
+  COL_ATTRIBUTES = %i[default sm md lg xl xxl]
+  optional *COL_ATTRIBUTES
+
+  ORDER_ATTRIBUTES = %i[order order_sm order_md order_lg order_xl order_xxl]
+  optional *ORDER_ATTRIBUTES
+
+  OFFSET_ATTRIBUTES = %i[offset offset_sm offset_md offset_lg offset_xl offset_xxl]
+  optional *OFFSET_ATTRIBUTES
+
+  optional class: { as:  :bs_class }
+  optional :align_self
+
+  def response
+    div col_attributes do
+      yield if block_given?
+    end
+  end
+
+  protected
+
+  def col_attributes
+    options.merge(
+      class: col_classes
+    )
+  end
+
+  def col_classes
+    classes = []
+    COL_ATTRIBUTES.each do |attrs|
+      classes << "col-#{ context.send("#{attrs}") }" if attrs == :default and context.send("#{attrs}")
+      classes << "col-#{attrs}-#{ context.send("#{attrs}") }" if attrs != :default and context.send("#{attrs}")
+    end
+    ORDER_ATTRIBUTES.each do |attrs|
+      classes << "#{attrs}-#{ context.send("#{attrs}") }".gsub('_', '-') if context.send("#{attrs}")
+    end
+    OFFSET_ATTRIBUTES.each do |attrs|
+      classes << "#{attrs}-#{ context.send("#{attrs}") }".gsub('_', '-') if context.send("#{attrs}")
+    end
+    classes << "align-self-#{context.align_self}" if context.align_self.present?
+    classes << "col" if classes.blank?
+    classes << context.bs_class
+    classes.join(' ').strip
+  end
+
+end

data/{app/concepts → lib}/matestack/ui/bootstrap/layout/container.rb

@@ -1,25 +1,28 @@
-class Matestack::Ui::Bootstrap::Layout::Container < Matestack::Ui::Component
+require_relative "../base_component"
 
-  optional :size, class: { as: :bs_class }
+class Matestack::Ui::Bootstrap::Layout::Container < Matestack::Ui::Bootstrap::BaseComponent
 
-  def response 
+  optional :size
+
+  def response
     div container_attributes do
-      yield_components
+      yield
     end
   end
 
   protected
-  
+
   def container_attributes
-    html_attributes.merge(
+    options.merge(
       class: container_classes
     )
   end
 
   def container_classes
     [].tap do |classes|
-      classes << (size.present? ? "container-#{size}" : "container")
-      classes << bs_class
+      classes << (context.size.present? ? "container-#{context.size}" : "container")
+      classes << options[:class]
     end.join(' ').strip
   end
-end
+
+end

data/lib/matestack/ui/bootstrap/layout/row.rb

@@ -0,0 +1,25 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Layout::Row < Matestack::Ui::Bootstrap::BaseComponent
+
+  optional :vertical
+  optional :horizontal
+  optional class: { as:  :bs_class }
+
+  def response
+    div options.merge(class: row_classes) do
+      yield if block_given?
+    end
+  end
+
+  def row_classes
+    classes = ["row"]
+
+    classes << "align-items-#{context.vertical}" if context.vertical.present?
+    classes << "justify-content-#{context.horizontal}" if context.horizontal.present?
+    classes << "#{context.bs_class}" if context.bs_class.present?
+
+    classes.join(' ')
+  end
+
+end

data/{app/concepts → lib}/matestack/ui/bootstrap/layout/sidebar.js

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