matestack-ui-bootstrap 1.4.0

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

@@ -0,0 +1,20 @@
+class Matestack::Ui::Bootstrap::Form::Submit < Matestack::Ui::Component
+
+  optional :button_variant
+  optional :spinner_variant
+  optional :text
+  optional :loading_text
+
+  def response
+    form_submit do
+      bs_btn type: "submit", 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_spinner variant: spinner_variant || :light, size: :sm
+        plain loading_text || "Loading..."
+      end
+    end
+  end
+
+end

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

@@ -0,0 +1,90 @@
+class Matestack::Ui::Bootstrap::Form::Switch < Matestack::Ui::Core::Form::Checkbox::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
+    end
+    render_form_text
+  end
+
+  private
+
+  def checkbox_wrapper(options = {}, &block)
+    div class: "form-check form-switch #{'form-check-inline' if variant == :inline}", attributes: options[:attributes] do
+      yield
+    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
+
+end

data/app/concepts/matestack/ui/bootstrap/layout/column.rb

@@ -0,0 +1,47 @@
+class Matestack::Ui::Bootstrap::Layout::Column < Matestack::Ui::Component
+
+  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_components
+    end
+  end
+
+  protected
+
+  def col_attributes
+    html_attributes.merge(
+      class: col_classes,
+      attributes: options[:attributes]
+    )
+  end
+
+  def col_classes
+    classes = []      
+    COL_ATTRIBUTES.each do |attrs| 
+      classes << "col-#{ self.send(:"#{attrs}") }" if attrs == :default and self.send(:"#{attrs}")
+      classes << "col-#{attrs}-#{ self.send(:"#{attrs}") }" if attrs != :default and self.send(:"#{attrs}")
+    end
+    ORDER_ATTRIBUTES.each do |attrs| 
+      classes << "#{attrs}-#{ self.send(:"#{attrs}") }".gsub('_', '-') if self.send(:"#{attrs}")
+    end
+    OFFSET_ATTRIBUTES.each do |attrs| 
+      classes << "#{attrs}-#{ self.send(:"#{attrs}") }".gsub('_', '-') if self.send(:"#{attrs}")
+    end
+    classes << "align-self-#{align_self}" if align_self.present?
+    classes << "col" if classes.blank?
+    classes << bs_class
+    classes.join(' ').strip
+  end
+end

data/app/concepts/matestack/ui/bootstrap/layout/container.rb

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

data/app/concepts/matestack/ui/bootstrap/layout/row.rb

@@ -0,0 +1,15 @@
+class Matestack::Ui::Bootstrap::Layout::Row < Matestack::Ui::Component
+  def prepare
+    @row_classes = []
+
+    @row_classes << "align-items-#{options[:vertical]}" if options[:vertical].present?
+    @row_classes << "justify-content-#{options[:horizontal]}" if options[:horizontal].present?
+    @row_classes << "#{options[:class]}" if options[:class].present?
+  end
+
+  def response 
+    div id: "#{options[:id]}", class: "row #{@row_classes.join(' ')}" do
+      yield_components
+    end
+  end
+end

data/app/concepts/matestack/ui/bootstrap/layout/sidebar.js

@@ -0,0 +1,64 @@
+const bootstrap = require('bootstrap')
+
+MatestackUiCore.Vue.component('matestack-ui-bootstrap-sidebar', {
+  mixins: [MatestackUiCore.componentMixin],
+
+  data() {
+    return {
+      sidebarOpen: false,
+    };
+  },
+
+  methods: {
+    sidebarToggle: function() {
+      var sidebarElement = document.getElementById("sidebar");
+      if (sidebarElement.classList.contains("closed")) {
+        this.openSideBar();
+      } else {
+        this.closeSideBar();
+      }
+    },
+    openSideBar: function(){
+      var sidebarElement = document.getElementById("sidebar");
+      var contentElement = document.getElementById("content")
+      this.sidebarOpen = true;
+      sidebarElement.classList.remove("closed")
+      sidebarElement.classList.add("open")
+      contentElement.classList.add("sidebar-open")
+    },
+    closeSideBar: function(){
+      var sidebarElement = document.getElementById("sidebar");
+      var contentElement = document.getElementById("content")
+      this.sidebarOpen = false;
+      sidebarElement.classList.add("closed")
+      sidebarElement.classList.remove("open")
+      contentElement.classList.remove("sidebar-open")
+    },
+    resizeCallback: function(){
+      if (window.innerWidth <= 992){
+        this.closeSideBar();
+      } else {
+        this.openSideBar();
+      }
+    }
+  },
+
+  mounted: function(){
+    if (window.innerWidth <= 992){
+      this.sidebarOpen = true;
+    }
+    window.addEventListener('resize', this.resizeCallback);
+    var self = this;
+    MatestackUiCore.matestackEventHub.$on("page_loaded", function(){
+      if (window.innerWidth <= 992){
+        self.closeSideBar();
+      }
+    })
+    MatestackUiCore.matestackEventHub.$on("page_loading_triggered", function(){
+      if (window.innerWidth <= 992){
+        self.closeSideBar();
+      }
+    })
+  }
+
+});

data/app/concepts/matestack/ui/bootstrap/layout/sidebar.rb

@@ -0,0 +1,45 @@
+class Matestack::Ui::Bootstrap::Layout::Sidebar < Matestack::Ui::VueJsComponent
+
+  vue_js_component_name "matestack-ui-bootstrap-sidebar"
+
+  optional :slots
+  optional :sidebar_navigation_items
+
+  def response
+    div class: "sidebar-wrapper shadow-sm bg-white", id: "sidebar" do
+      nav class: 'sidebar pt-4 px-3' do
+        div class: "sidebar-toggler" do
+          bs_btn variant: :link, attributes: { "@click": "sidebarToggle" } do
+            bs_icon name: "list", size: 25, class: "text-muted"
+          end
+        end
+        div class: "sidebar-top mb-3" do
+          slot slots[:sidebar_top] if slots[:sidebar_top].present?
+        end
+        div class: "sidebar-navigation my-3" do
+          sidebar_navigation_partial
+        end
+      end
+    end
+  end
+
+  def sidebar_navigation_partial
+    div class: "list-group" do
+      sidebar_navigation_items.each do |item|
+        if item[:type] == :link
+          link class: "list-group-item list-group-item-action border-0 rounded", path: item[:path] do
+            bs_icon name: item[:icon], size: 20 if item[:icon]
+            span class: "ps-3", text: item[:text] 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 class: "ps-3", text: item[:text] if item[:text]
+          end
+        end
+      end
+    end
+  end
+
+
+end

data/app/concepts/matestack/ui/bootstrap/layout/sidebar.scss

@@ -0,0 +1,57 @@
+// Sidebar
+.sidebar-wrapper{
+  position: relative;
+  z-index: 10;
+  transition: 0.5s;
+
+  flex-grow: 0;     /* do not grow   - initial value: 0 */
+  flex-shrink: 0;   /* do not shrink - initial value: 1 */
+  flex-basis: 300px; /* width/height  - initial value: auto */
+
+  .sidebar-toggler{
+    transition: 0.5s;
+    position: relative;
+    left: 290px;
+  }
+
+  &.closed {
+    margin-left: -300px;
+  }
+  &.open {
+    margin-left: 0px;
+  }
+
+  // @include media-breakpoint-down(lg) {
+  @media (max-width: 992px) {
+    margin-left: -300px;
+    &.open {
+      margin-left: 0px;
+    }
+  }
+
+  .sidebar{
+    min-height: 100vh;
+    height: 100%;
+
+
+
+    .sidebar-top{
+      margin-top: -35px;
+      a{
+        text-decoration: none;
+      }
+    }
+
+    .list-group-item{
+      &.active{
+        margin-top: 0px!important;
+      }
+      &.active-child{
+        color: var(--bs-white);
+        background-color: var(--bs-primary);
+      }
+    }
+  }
+
+
+}

data/app/concepts/matestack/ui/bootstrap/pages/devise/sign_in.rb

@@ -0,0 +1,40 @@
+class Matestack::Ui::Bootstrap::Pages::Devise::SignIn < Matestack::Ui::Page
+
+  def response
+    bs_container class: "mt-5" do
+      bs_row class: "mt-5", vertical: :center, horizontal: :center do
+        bs_col md:4 do
+          login_form_partial
+        end
+      end
+    end
+  end
+
+  private
+
+  def login_form_partial
+    section class: "mt-5 rounded shadow-sm p-4 mb-4" do
+      heading size: 2, text: 'Sign in'
+      form form_config do
+        div class: "mb-3 mt-4" do
+          bs_form_input label: 'Email', key: :email, type: :email
+        end
+        div class: "mb-3" do
+          bs_form_input label: 'Password', key: :password, type: :password
+        end
+        div class: "mb-3" do
+          bs_form_submit text: "Sign in"
+        end
+      end
+      toggle show_on: 'sign_in_failure' do
+        plain 'Your email or password is not valid.'
+      end
+      br
+      small text: "Dummy user: admin@matestack.io"
+      br
+      small text: "Dummy password: password"
+    end
+  end
+
+
+end

data/app/concepts/matestack/ui/bootstrap/registry.rb

@@ -0,0 +1,63 @@
+module Matestack::Ui::Bootstrap::Registry
+
+  COMPONENTS = {
+    bs_accordion: Matestack::Ui::Bootstrap::Components::Accordion,
+    bs_alert: Matestack::Ui::Bootstrap::Components::Alert,
+    bs_avatar: Matestack::Ui::Bootstrap::Components::Avatar,
+    bs_badge: Matestack::Ui::Bootstrap::Components::Badge,
+    bs_breadcrumb: Matestack::Ui::Bootstrap::Components::Breadcrumb,
+    bs_btn: Matestack::Ui::Bootstrap::Components::Button,
+    bs_btn_group: Matestack::Ui::Bootstrap::Components::ButtonGroup,
+    bs_card: Matestack::Ui::Bootstrap::Components::Card,
+    bs_carousel: Matestack::Ui::Bootstrap::Components::Carousel,
+    bs_chart: Matestack::Ui::Bootstrap::Components::Chart,
+    bs_close: Matestack::Ui::Bootstrap::Components::Close,
+    bs_collapse: Matestack::Ui::Bootstrap::Components::Collapse,
+    bs_dropdown: Matestack::Ui::Bootstrap::Components::Dropdown,
+    bs_icon: Matestack::Ui::Bootstrap::Components::Icon,
+    bs_list_group: Matestack::Ui::Bootstrap::Components::ListGroup,
+    bs_modal: Matestack::Ui::Bootstrap::Components::Modal,
+    bs_navbar: Matestack::Ui::Bootstrap::Components::Navbar,
+    bs_pagination: Matestack::Ui::Bootstrap::Components::Pagination,
+    bs_page_heading: Matestack::Ui::Bootstrap::Components::PageHeading,
+    bs_popover: Matestack::Ui::Bootstrap::Components::Popover,
+    bs_progress: Matestack::Ui::Bootstrap::Components::Progress,
+    bs_scrollspy: Matestack::Ui::Bootstrap::Components::Scrollspy,
+    bs_section_card: Matestack::Ui::Bootstrap::Components::SectionCard,
+    bs_spinner: Matestack::Ui::Bootstrap::Components::Spinner,
+    bs_tab_nav: Matestack::Ui::Bootstrap::Components::TabNav,
+    bs_tab_nav_content: Matestack::Ui::Bootstrap::Components::TabNavContent,
+    bs_toast: Matestack::Ui::Bootstrap::Components::Toast,
+    bs_tooltip: Matestack::Ui::Bootstrap::Components::Tooltip,
+  }
+
+  FORMS = {
+    bs_form_input: Matestack::Ui::Bootstrap::Form::Input,
+    bs_form_select: Matestack::Ui::Bootstrap::Form::Select,
+    bs_form_checkbox: Matestack::Ui::Bootstrap::Form::Checkbox,
+    bs_form_radio: Matestack::Ui::Bootstrap::Form::Radio,
+    bs_form_switch: Matestack::Ui::Bootstrap::Form::Switch,
+    bs_form_submit: Matestack::Ui::Bootstrap::Form::Submit,
+    bs_form_date: Matestack::Ui::Bootstrap::Form::Date,
+  }
+
+  CONTENT = {
+    bs_figure: Matestack::Ui::Bootstrap::Content::Figure,
+    bs_smart_collection: Matestack::Ui::Bootstrap::Content::Collection::Collection,
+  }
+
+  LAYOUTS = {
+    bs_col: Matestack::Ui::Bootstrap::Layout::Column,
+    bs_container: Matestack::Ui::Bootstrap::Layout::Container,
+    bs_row: Matestack::Ui::Bootstrap::Layout::Row,
+    bs_sidebar: Matestack::Ui::Bootstrap::Layout::Sidebar
+  }
+
+  Matestack::Ui::Core::Component::Registry.register_components(
+    **COMPONENTS,
+    **FORMS,
+    **CONTENT,
+    **LAYOUTS
+  )
+
+end