matestack-ui-bootstrap 1.5.1 → 3.0.0.rc1

data/{app/concepts → lib}/matestack/ui/bootstrap/form/select.rb

@@ -1,6 +1,6 @@
-class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::Core::Form::Select::Base
+class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::VueJs::Components::Form::Select
 
-  vue_js_component_name "matestack-ui-core-form-select"
+  vue_name "matestack-ui-core-form-select"
 
   optional :variant
   optional :size
@@ -8,8 +8,8 @@ class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::Core::Form::Select
 
   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
+      label input_label, ":for": id,  class: "form-label" if input_label
+      select select_attributes.merge(bootstrap_select_attributes) do
         render_options
       end
       render_errors
@@ -17,8 +17,16 @@ class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::Core::Form::Select
     end
   end
 
+  def bootstrap_select_attributes
+    {
+      class: form_select_class,
+      size: size_class,
+      disabled: context.disabled
+    }
+  end
+
   def form_select_class
-    case variant
+    case context.variant
     when :lg
       (options[:class] || "") << (" form-select form-select-lg")
     when :sm
@@ -29,12 +37,12 @@ class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::Core::Form::Select
   end
 
   def size_class
-    size
+    context.size
   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
+    if display_errors?
+      div class: 'invalid-feedback', 'v-for': "error in #{error_key}" do
         plain '{{ error }}'
       end
     end
@@ -45,8 +53,8 @@ class Matestack::Ui::Bootstrap::Form::Select < Matestack::Ui::Core::Form::Select
   end
 
   def render_form_text
-    div id: "form_text_for_#{attr_key}", class: "form-text" do
-      plain form_text
+    div class: "form-text form-text-for-#{attribute_key}" do
+      plain context.form_text
     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": "!vc.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": "vc.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,30 @@
+class Matestack::Ui::Bootstrap::Form::Switch < Matestack::Ui::Bootstrap::Form::Checkbox
+
+  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": id 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/form/textarea.rb

@@ -0,0 +1,47 @@
+class Matestack::Ui::Bootstrap::Form::Textarea < Matestack::Ui::VueJs::Components::Form::Textarea
+
+  vue_name "matestack-ui-core-form-textarea"
+
+  optional :form_text
+  optional :disabled
+  optional :placeholder
+  optional :rows
+  optional :cols
+
+  def response
+    div class: "matestack-ui-bootstrap-textarea" do
+      label input_label, ":for": id,  class: "form-label" if input_label
+      textarea options.merge(textarea_attributes).merge(bootstrap_textarea_attributes)
+      render_errors
+      render_form_text if context.form_text
+    end
+  end
+
+  def bootstrap_textarea_attributes
+    {
+      class: (options[:class] || "") << (" form-control"),
+      rows: context.rows,
+      cols: context.cols,
+      disabled: context.disabled
+    }
+  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/index.js

@@ -0,0 +1,40 @@
+// 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 alertComponent from './components/alert'
+import carouselComponent from './components/carousel'
+import collapseComponent from './components/collapse'
+import dropdownComponent from './components/dropdown'
+import modalComponent from './components/modal'
+import popoverComponent from './components/popover'
+import toastComponent from './components/toast'
+import tooltipComponent from './components/tooltip'
+import sidebarComponent from './layout/sidebar'
+import './layout/sidebar.scss'
+import './content/smart_collection/collection.scss'
+
+const registerComponents = function(appInstance){
+  appInstance.component('matestack-ui-bootstrap-alert', alertComponent)
+  appInstance.component('matestack-ui-bootstrap-carousel', carouselComponent)
+  appInstance.component('matestack-ui-bootstrap-collapse', collapseComponent)
+  appInstance.component('matestack-ui-bootstrap-dropdown', dropdownComponent)
+  appInstance.component('matestack-ui-bootstrap-modal', modalComponent)
+  appInstance.component('matestack-ui-bootstrap-popover', popoverComponent)
+  appInstance.component('matestack-ui-bootstrap-toast', toastComponent)
+  appInstance.component('matestack-ui-bootstrap-tooltip', tooltipComponent)
+  appInstance.component('matestack-ui-bootstrap-sidebar', sidebarComponent)
+
+  return appInstance
+}
+
+const MatestackUiBootstrap = {
+  registerComponents
+}
+
+window.MatestackUiBootstrap = MatestackUiBootstrap
+
+export default MatestackUiBootstrap

data/lib/matestack/ui/bootstrap/initialize.rb

@@ -0,0 +1,3 @@
+class Matestack::Ui::Core::Base
+  include Matestack::Ui::Bootstrap::Registry
+end

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,7 +1,9 @@
-const bootstrap = require('bootstrap')
+import * as bootstrap from 'bootstrap'
+import MatestackUiVueJs from 'matestack-ui-vuejs'
 
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-sidebar', {
-  mixins: [MatestackUiCore.componentMixin],
+const sidebarComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
 
   data() {
     return {
@@ -49,16 +51,18 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-sidebar', {
     }
     window.addEventListener('resize', this.resizeCallback);
     var self = this;
-    MatestackUiCore.matestackEventHub.$on("page_loaded", function(){
+    MatestackUiVueJs.eventHub.$on("page_loaded", function(){
       if (window.innerWidth <= 992){
         self.closeSideBar();
       }
     })
-    MatestackUiCore.matestackEventHub.$on("page_loading_triggered", function(){
+    MatestackUiVueJs.eventHub.$on("page_loading_triggered", function(){
       if (window.innerWidth <= 992){
         self.closeSideBar();
       }
     })
   }
 
-});
+}
+
+export default sidebarComponent

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

@@ -0,0 +1,43 @@
+require_relative "../base_vue_js_component"
+
+class Matestack::Ui::Bootstrap::Layout::Sidebar < Matestack::Ui::Bootstrap::BaseVueJsComponent
+
+  vue_name "matestack-ui-bootstrap-sidebar"
+
+  optional :sidebar_navigation_items
+
+  def response
+    nav class: 'sidebar pt-4 px-3 shadow-sm bg-white' do
+      div class: "sidebar-toggler" do
+        bs_btn variant: :link, "@click": "vc.sidebarToggle" do
+          bs_icon name: "list", size: 25, class: "text-muted"
+        end
+      end
+      div class: "sidebar-top mb-3" do
+        slot :sidebar_top if slots && slots[:sidebar_top].present?
+      end
+      div class: "sidebar-navigation my-3" do
+        sidebar_navigation_partial
+      end
+    end
+  end
+
+  def sidebar_navigation_partial
+    div class: "list-group" do
+      context.sidebar_navigation_items.each do |item|
+        if item[:type] == :link
+          a class: "list-group-item list-group-item-action border-0 rounded", href: item[:path] do
+            bs_icon name: item[:icon], size: 20 if item[:icon]
+            span item[:text], class: "ps-3" if item[:text]
+          end
+        else
+          transition class: "list-group-item list-group-item-action border-0 rounded", path: item[:path], delay: item[:delay] || 300 do
+            bs_icon name: item[:icon], size: 20 if item[:icon]
+            span item[:text], class: "ps-3" if item[:text]
+          end
+        end
+      end
+    end
+  end
+
+end

data/{app/concepts/matestack/ui/bootstrap/apps → lib/matestack/ui/bootstrap/layouts}/admin_template.rb

@@ -1,22 +1,30 @@
-class Matestack::Ui::Bootstrap::Apps::AdminTemplate < Matestack::Ui::App
+require_relative "../registry"
 
-  def response
+class Matestack::Ui::Bootstrap::Layouts::AdminTemplate < Matestack::Ui::Layout
+
+  def response(&block)
+    matestack_vue_js_app do
+      body_response(&block)
+    end
+  end
+
+  def body_response(&block)
     div class: "d-flex flex-row" do
       if should_show_sidebar?
-        bs_sidebar sidebar_navigation_items: sidebar_navigation_items, slots: { sidebar_top: sidebar_top_slot }
+        div id: "sidebar", class: "sidebar-wrapper" do
+          bs_sidebar sidebar_navigation_items: sidebar_navigation_items, slots: { sidebar_top: method(:sidebar_top_slot) }
+        end
       end
       div id: "content", class: "content-wrapper w-100 #{content_background_class}" do
         if should_show_navbar?
           bs_container do
-            bs_navbar brand: navbar_brand_config, items: navbar_items, class: "pt-4 #{'ps-5' if should_show_sidebar?}", collapse_class: "text-end text-lg-start pe-3" do
-              # div class: "d-flex" do
-              #   navbar_end_partial if self.respond_to?(:navbar_end_partial)
-              # end
-            end
+            bs_navbar brand: navbar_brand_config, items: navbar_items, class: "pt-4 #{'ps-5' if should_show_sidebar?}", collapse_class: "text-end text-lg-start pe-3"
           end
         end
         bs_container class: "my-5 px-4 pt-5" do
-          yield_page slots: { loading_state: loading_state_slot }
+          page_switch do
+            yield if block_given?
+          end
         end
       end
     end
@@ -40,9 +48,7 @@ class Matestack::Ui::Bootstrap::Apps::AdminTemplate < Matestack::Ui::App
   end
 
   def sidebar_top_slot
-    slot do
-      sidebar_top_partial if self.respond_to?(:sidebar_top_partial)
-    end
+    sidebar_top_partial if self.respond_to?(:sidebar_top_partial)
   end
 
   def toasts_partial
@@ -81,5 +87,4 @@ class Matestack::Ui::Bootstrap::Apps::AdminTemplate < Matestack::Ui::App
     "bg-light"
   end
 
-
 end

data/lib/matestack/ui/bootstrap/registry.rb

@@ -0,0 +1,173 @@
+module Matestack::Ui::Bootstrap::Registry
+
+  def bs_accordion(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Accordion.(text, options, &block)
+  end
+
+  def bs_alert(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Alert.(text, options, &block)
+  end
+
+  def bs_avatar(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Avatar.(text, options, &block)
+  end
+
+  def bs_badge(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Badge.(text, options, &block)
+  end
+
+  def bs_breadcrumb(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Breadcrumb.(text, options, &block)
+  end
+
+  def bs_btn(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Button.(text, options, &block)
+  end
+
+  def bs_btn_group(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::ButtonGroup.(text, options, &block)
+  end
+
+  def bs_card(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Card.(text, options, &block)
+  end
+
+  def bs_carousel(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Carousel.(text, options, &block)
+  end
+
+  def bs_close(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Close.(text, options, &block)
+  end
+
+  def bs_collapse(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Collapse.(text, options, &block)
+  end
+
+  def bs_dropdown(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Dropdown.(text, options, &block)
+  end
+
+  def bs_icon(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Icon.(text, options, &block)
+  end
+
+  def bs_list_group(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::ListGroup.(text, options, &block)
+  end
+
+  def bs_modal(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Modal.(text, options, &block)
+  end
+
+  def bs_navbar(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Navbar.(text, options, &block)
+  end
+
+  def bs_pagination(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Pagination.(text, options, &block)
+  end
+
+  def bs_page_heading(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::PageHeading.(text, options, &block)
+  end
+
+  def bs_popover(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Popover.(text, options, &block)
+  end
+
+  def bs_progress(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Progress.(text, options, &block)
+  end
+
+  def bs_scrollspy(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Scrollspy.(text, options, &block)
+  end
+
+  def bs_section_card(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::SectionCard.(text, options, &block)
+  end
+
+  def bs_spinner(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Spinner.(text, options, &block)
+  end
+
+  def bs_tab_nav(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::TabNav.(text, options, &block)
+  end
+
+  def bs_tab_nav_content(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::TabNavContent.(text, options, &block)
+  end
+
+  def bs_toast(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Toast.(text, options, &block)
+  end
+
+  def bs_tooltip(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Components::Tooltip.(text, options, &block)
+  end
+
+
+
+  def bs_form_input(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Form::Input.(text, options, &block)
+  end
+
+  def bs_form_textarea(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Form::Textarea.(text, options, &block)
+  end
+
+  def bs_form_select(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Form::Select.(text, options, &block)
+  end
+
+  def bs_form_checkbox(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Form::Checkbox.(text, options, &block)
+  end
+
+  def bs_form_radio(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Form::Radio.(text, options, &block)
+  end
+
+  def bs_form_switch(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Form::Switch.(text, options, &block)
+  end
+
+  def bs_form_submit(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Form::Submit.(text, options, &block)
+  end
+
+
+
+
+  def bs_figure(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Content::Figure.(text, options, &block)
+  end
+
+  def bs_smart_collection(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Content::SmartCollection::Collection.(text, options, &block)
+  end
+
+
+
+
+  def bs_col(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Layout::Column.(text, options, &block)
+  end
+
+  def bs_container(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Layout::Container.(text, options, &block)
+  end
+
+  def bs_row(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Layout::Row.(text, options, &block)
+  end
+
+  def bs_sidebar(text=nil, options=nil, &block)
+    Matestack::Ui::Bootstrap::Layout::Sidebar.(text, options, &block)
+  end
+
+
+
+end

data/lib/matestack/ui/bootstrap/version.rb

@@ -1,7 +1,7 @@
 module Matestack
   module Ui
     module Bootstrap
-      VERSION = '1.5.1'
+      VERSION = '3.0.0.rc1'
     end
   end
 end