matestack-ui-bootstrap 1.4.0 → 2.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba5c4e5ee5de8fa5f54ea36e927a971339b37c9b8db2a360543a01e77e134eb4
-  data.tar.gz: b4c4d1c23cf14620a27b53de3ae53a05e6adc2ef4cbf010cd7c314bdcd503ed0
+  metadata.gz: 765f0c5d8c9c1ff744e18f2f9cf03e988b45527941b13d420b777e304bd04149
+  data.tar.gz: 2b24f828ef784ce5c7f137a7354f3f6eeb6ee46679e38e8e6e1670089bd9d092
 SHA512:
-  metadata.gz: e62de426827277bbdf8a66de6f6290d0366d3da00a83d59a5d5503d6a548c3fc7d397c839661f91b80ace1e3d6e9bec646aab8277cf58b3ddc42c9aa6aa187d0
-  data.tar.gz: 84ad2178a7652766cd265cfe7b768279d87583856a96e1771a5464f81b6b1e1d5300e25350a89e90de185bc4b55418894203eef596dd67f9a118ae5ced8cfa1b
+  metadata.gz: 4576738c13b40735fe220ad577416834b0adc0ec129426cb438843dc7513957d193de42948050e64d1309da6545cb1dbc38d24969d339c7e7b1f10e1ad81e615
+  data.tar.gz: 496c5eefd617f97462c4987a172a4510743f5c896d828f5bf5f7186e2cf8fd46977d049375ffd93be9c588ed1a34e51eb503dee8303632274f05aa66e5ae737c

data/LICENSE

@@ -1,8 +1,20 @@
 Copyright (c) Matestack GmbH
 
-matestack-ui-bootstrap is an Open Source project licensed under the terms of
-the LGPLv3 license.  Please see <http://www.gnu.org/licenses/lgpl-3.0.html>
-for license text.
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
 
-Matestack will provide a commercial-friendly license allowing private forks
-and modifications of matestack-ui-bootstrap.  Please request at jonas@matestack.io
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -1,26 +1,60 @@
-# Matestack Ui Bootstrap
+[![Specs](https://github.com/matestack/matestack-ui-bootstrap/workflows/specs/badge.svg)](https://github.com/matestack/matestack-ui-bootstrap/actions)
+[![Discord](https://img.shields.io/discord/771413294136426496.svg)](https://discord.com/invite/c6tQxFG)
+[![Gem Version](https://badge.fury.io/rb/matestack-ui-bootstrap.svg)](https://badge.fury.io/rb/matestack-ui-bootstrap)
+[![Docs](https://img.shields.io/badge/docs-matestack-blue.svg)](https://docs.matestack.io/matestack-ui-bootstrap)
+[![Twitter Follow](https://img.shields.io/twitter/follow/matestack.svg?style=social)](https://twitter.com/matestack)
 
+![matestack logo](./logo.png)
 
-## Develpment
+# matestack-ui-bootstrap | beautiful, reactive UIs in pure Ruby
 
-```shell
-bundle install
-yarn install
-rake db:setup
-rails s
-./bin/webpack --watch
-```
+As an extension for [`matestack-ui-core`](https://github.com/matestack/matestack-ui-core), `matestack-ui-bootstrap` ships all you need to build beautiful,
+reactive UIs in pure Ruby and smart CRUD components based on Bootstrap v5.
 
-```shell
-rails s
-```
+----
 
-```shell
-./bin/webpack --watch
-```
+`matestack-ui-core` enables you to craft maintainable web UIs in pure Ruby, skipping ERB and HTML. UI code becomes a native and fun part of your Rails app. Thanks to reactive core components, reactivity can be optionally added on top without writing JavaScript, just using a simple Ruby DSL.
 
-## Testing
+You end up writing 50% less code while increasing productivity, maintainability and developer happiness. Work with pure Ruby. If necessary, extend with pure JavaScript. No Opal involved.
 
-```shell
-bundle exec rspec
-```
+----
+
+`matestack-ui-core` does not have an opinion on styling. In contrast, `matestack-ui-bootstrap` ships all Bootstrap v5 components as Matestack UI components usable in pure Ruby. Additionally layout and CRUD components help you to build a beautiful web app meeting typical requirements of a data driven web app.
+
+Don't think about styling anymore and just create admin or application UIs faster than ever before!
+
+[<img src="https://img.youtube.com/vi/bwsVgCb97v0/0.jpg" width="350">](https://www.youtube.com/watch?v=bwsVgCb97v0)
+
+## Compatibility
+
+### Ruby/Rails
+
+`matestack-ui-bootstrap` is tested against:
+
+- Rails 6.1.1 + Ruby 3.0.0
+- Rails 6.1.1 + Ruby 2.7.2
+- Rails 6.0.3.4 + Ruby 2.6.6
+- Rails 5.2.4.4 + Ruby 2.6.6
+
+Rails versions below 5.2 are not supported.
+
+### Vue.js
+
+`matestack-ui-bootstrap` requires Vue.js and Vuex for its reactivity features. Following version ranges are supported:
+
+- Vue.js ^2.6.0
+- Vuex ^3.6.0
+
+Vue 3 / Vuex 4 update is planned for Q2 2021.
+
+## Documentation/Installation
+
+Documentation can be found [here](https://docs.matestack.io/matestack-ui-bootstrap)
+
+## Changelog
+
+Changelog can be found [here](./CHANGELOG.md)
+
+## License
+
+`matestack-ui-bootstrap` is an Open Source project licensed under the terms of the [MIT license](./LICENSE)

data/lib/matestack/ui/bootstrap.rb

@@ -1,27 +1,107 @@
-# require 'trailblazer'
-# require 'trailblazer/rails'
-# require 'trailblazer/cell'
-# require 'cell/rails'
-# require 'cell/haml'
-
 require "matestack/ui/core"
-require "matestack/ui/bootstrap/engine"
+
+base_path = 'matestack/ui/bootstrap'
+require "#{base_path}/version"
+
+module Matestack
+  module Ui
+    module Bootstrap
+    end
+  end
+end
+
+require "#{base_path}/base_component"
+require "#{base_path}/base_vue_js_component"
+
+module Matestack
+  module Ui
+    module Bootstrap
+      module Apps
+      end
+    end
+  end
+end
+require "#{base_path}/apps/admin_template"
 
 module Matestack
   module Ui
     module Bootstrap
-      # https://github.com/rails/webpacker/blob/5-x-stable/docs/engines.md
-      # ROOT_PATH = Pathname.new(File.expand_path("../../../../", Pathname.new(__FILE__).realpath))
-      ROOT_PATH = Pathname.new(File.join(__dir__, "../../../"))
-
-      class << self
-        def webpacker
-          @webpacker ||= ::Webpacker::Instance.new(
-            root_path: ROOT_PATH,
-            config_path: ROOT_PATH.join("config/webpacker.yml")
-          )
+      module Layout
+      end
+    end
+  end
+end
+require "#{base_path}/layout/row"
+require "#{base_path}/layout/column"
+require "#{base_path}/layout/container"
+require "#{base_path}/layout/sidebar"
+
+module Matestack
+  module Ui
+    module Bootstrap
+      module Components
+      end
+    end
+  end
+end
+require "#{base_path}/components/collapse"
+require "#{base_path}/components/navbar"
+require "#{base_path}/components/page_heading"
+require "#{base_path}/components/section_card"
+require "#{base_path}/components/carousel"
+require "#{base_path}/components/tooltip"
+require "#{base_path}/components/alert"
+require "#{base_path}/components/breadcrumb"
+require "#{base_path}/components/tab_nav"
+require "#{base_path}/components/progress"
+require "#{base_path}/components/toast"
+require "#{base_path}/components/accordion"
+require "#{base_path}/components/avatar"
+require "#{base_path}/components/close"
+require "#{base_path}/components/card"
+require "#{base_path}/components/dropdown"
+require "#{base_path}/components/modal"
+require "#{base_path}/components/list_group"
+require "#{base_path}/components/scrollspy"
+require "#{base_path}/components/button"
+require "#{base_path}/components/spinner"
+require "#{base_path}/components/pagination"
+require "#{base_path}/components/tab_nav_content"
+require "#{base_path}/components/popover"
+require "#{base_path}/components/badge"
+require "#{base_path}/components/button_group"
+require "#{base_path}/components/icon"
+
+module Matestack
+  module Ui
+    module Bootstrap
+      module Content
+        module SmartCollection
         end
       end
     end
   end
 end
+require "#{base_path}/content/figure"
+require "#{base_path}/content/smart_collection/collection"
+require "#{base_path}/content/smart_collection/content"
+require "#{base_path}/content/smart_collection/filter"
+require "#{base_path}/content/smart_collection/paginate"
+
+module Matestack
+  module Ui
+    module Bootstrap
+      module Form
+      end
+    end
+  end
+end
+require "#{base_path}/form/checkbox"
+require "#{base_path}/form/input"
+require "#{base_path}/form/textarea"
+require "#{base_path}/form/radio"
+require "#{base_path}/form/select"
+require "#{base_path}/form/submit"
+require "#{base_path}/form/switch"
+
+require "#{base_path}/registry"

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

@@ -1,9 +1,19 @@
+require_relative "../registry"
+
 class Matestack::Ui::Bootstrap::Apps::AdminTemplate < Matestack::Ui::App
 
-  def response
+  include Matestack::Ui::Bootstrap::Registry
+
+  def response(&block)
+    matestack 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 }
+        bs_sidebar sidebar_navigation_items: sidebar_navigation_items, slots: { sidebar_top: method(:sidebar_top_slot) }
       end
       div id: "content", class: "content-wrapper w-100 #{content_background_class}" do
         if should_show_navbar?
@@ -16,7 +26,7 @@ class Matestack::Ui::Bootstrap::Apps::AdminTemplate < Matestack::Ui::App
           end
         end
         bs_container class: "my-5 px-4 pt-5" do
-          yield_page slots: { loading_state: loading_state_slot }
+          yield if block_given?
         end
       end
     end
@@ -40,9 +50,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 +89,4 @@ class Matestack::Ui::Bootstrap::Apps::AdminTemplate < Matestack::Ui::App
     "bg-light"
   end
 
-
 end

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

@@ -0,0 +1,13 @@
+require_relative "./registry"
+
+module Matestack
+  module Ui
+    module Bootstrap
+      class BaseComponent < Matestack::Ui::Component
+
+        include Matestack::Ui::Bootstrap::Registry
+
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+require_relative "./registry"
+
+module Matestack
+  module Ui
+    module Bootstrap
+      class BaseVueJsComponent < Matestack::Ui::VueJsComponent
+
+        include Matestack::Ui::Bootstrap::Registry
+
+      end
+    end
+  end
+end

data/lib/matestack/ui/bootstrap/components/accordion.rb

@@ -0,0 +1,58 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Accordion < Matestack::Ui::Bootstrap::BaseComponent
+
+  # [ {header: { class, id, text, size, btn_variant, btn_class }, body: { class, text, multi } } ]
+  optional :items # array with 2 Hashes: header and body
+  optional :open
+  optional :variant
+  optional :attributes, class: { as:  :bs_class }
+  optional :id
+
+  def prepare
+    @accordion_id = (context.id.present? ? context.id : "matestack-accordion-#{SecureRandom.hex(3)}")
+  end
+
+  def response
+    div accordion_attributes do
+      accordion_content_partial if context.items.present?
+      yield if block_given?
+    end
+  end
+
+  protected
+
+  def accordion_content_partial
+    context.items.each_with_index do | item, index |
+      div class: "accordion-item" do
+        heading class: "accordion-header #{item[:header][:class]}", id: (item[:header][:id] || "header-#{index}"), size: (item[:header][:size] || 2) do
+          button class: "accordion-button", text:item[:header][:text],
+            data: { "bs-toggle": "collapse", "bs-target": "#collapse-#{(item[:header][:id] || "header-#{index}") }" },
+            "aria-expanded": "false", "aria-controls": "collapse-#{(item[:header][:id] || "header-#{index}")}", type: "button"
+        end
+        bs_collapse class: "accordion-collapse #{ 'show' if context.open || item[:open] }", id: "collapse-#{(item[:header][:id] || "header-#{index}")}", labelledby: (item[:header][:id] || "header-#{index}"),
+          parent: @accordion_id, multi: (item[:body][:multi] || false) do
+            div class: "accordion-body #{item[:body][:class]}" do
+              plain item[:body][:text]
+            end
+        end
+      end
+    end
+  end
+
+  def accordion_attributes
+    options.merge(
+      id: @accordion_id,
+      class: accordion_classes
+      ).merge(context.attributes || {})
+  end
+
+  def accordion_classes
+    [].tap do |classes|
+      classes << 'accordion'
+      classes << 'open' if context.open
+      classes << 'accordion-flush' if context.variant == :flush
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+end

data/{app/concepts → lib}/matestack/ui/bootstrap/components/alert.js

@@ -1,6 +1,9 @@
 import * as bootstrap from 'bootstrap'
+import Vue from 'vue/dist/vue.esm'
 
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-alert', {
+import MatestackUiCore from 'matestack-ui-core'
+
+Vue.component('matestack-ui-bootstrap-alert', {
   mixins: [MatestackUiCore.componentMixin],
 
   data() {
@@ -28,25 +31,25 @@ MatestackUiCore.Vue.component('matestack-ui-bootstrap-alert', {
   created: function() {
     const self = this
     // close_on event registration
-    if(self.componentConfig["close_on"] != undefined){
-      var close_events = self.componentConfig["close_on"].split(",")
+    if(self.props["close_on"] != undefined){
+      var close_events = self.props["close_on"].split(",")
       close_events.forEach(close_event => MatestackUiCore.matestackEventHub.$on(close_event.trim(), self.close));
     }
     // dispose_on event registration
-    if(self.componentConfig["dispose_on"] != undefined){
-      var dispose_events = self.componentConfig["dispose_on"].split(",")
+    if(self.props["dispose_on"] != undefined){
+      var dispose_events = self.props["dispose_on"].split(",")
       dispose_events.forEach(dispose_event => MatestackUiCore.matestackEventHub.$on(dispose_event.trim(), self.dispose));
     }
   },
 
   beforeDestroy: function() {
     const self = this
-    if(self.componentConfig["close_on"] != undefined){
-      var closen_events = self.componentConfig["close_on"].split(",")
+    if(self.props["close_on"] != undefined){
+      var closen_events = self.props["close_on"].split(",")
       closen_events.forEach(close_event => MatestackUiCore.matestackEventHub.$off(close_event.trim(), self.close));
     }
-    if(self.componentConfig["dispose_on"] != undefined){
-      var dispose_events = self.componentConfig["dispose_on"].split(",")
+    if(self.props["dispose_on"] != undefined){
+      var dispose_events = self.props["dispose_on"].split(",")
       dispose_events.forEach(dispose_event => MatestackUiCore.matestackEventHub.$off(dispose_event.trim(), self.dispose));
     }
   },

data/lib/matestack/ui/bootstrap/components/alert.rb

@@ -0,0 +1,43 @@
+require_relative "../base_vue_js_component"
+
+class Matestack::Ui::Bootstrap::Components::Alert < Matestack::Ui::Bootstrap::BaseVueJsComponent
+  vue_name "matestack-ui-bootstrap-alert"
+
+  optional :title, :variant, :dismissible, :animate, :title_size, class: { as:  :bs_class }
+  optional :close_on, :dispose_on # event names on which occourences we close or dispose the modal
+
+  def response
+    div alert_attributes do
+      heading context.title, size: (context.title_size || 4), class: 'alert-heading' if context.title
+      plain context.text if context.text
+      yield if block_given?
+      bs_close dismiss: "alert" if context.dismissible
+    end
+  end
+
+  protected
+
+  def vue_props
+    {}.tap do |props|
+      props[:close_on] = context.close_on
+      props[:dispose_on] = context.dispose_on
+    end
+  end
+
+  def alert_classes
+    classes = ['alert']
+    classes << "alert-#{context.variant || "primary"}"
+    classes << "alert-dismissible" if context.dismissible
+    classes << "fade show" if context.animate
+    classes << context.bs_class
+    classes.join(' ')
+  end
+
+  def alert_attributes
+    {}.tap do |attrs|
+      attrs[:class] = alert_classes,
+      attrs[:role] = :alert
+    end
+  end
+
+end