matestack-ui-bootstrap 1.4.0 → 1.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba5c4e5ee5de8fa5f54ea36e927a971339b37c9b8db2a360543a01e77e134eb4
-  data.tar.gz: b4c4d1c23cf14620a27b53de3ae53a05e6adc2ef4cbf010cd7c314bdcd503ed0
+  metadata.gz: '08d09d04a3fd7038133603a6e950ee7aa83903545028028eb518a05a60abf737'
+  data.tar.gz: 5a0bb2d33f779374a167658c884790adc87de8f7e7b9b28282e325b4d2d70ab0
 SHA512:
-  metadata.gz: e62de426827277bbdf8a66de6f6290d0366d3da00a83d59a5d5503d6a548c3fc7d397c839661f91b80ace1e3d6e9bec646aab8277cf58b3ddc42c9aa6aa187d0
-  data.tar.gz: 84ad2178a7652766cd265cfe7b768279d87583856a96e1771a5464f81b6b1e1d5300e25350a89e90de185bc4b55418894203eef596dd67f9a118ae5ced8cfa1b
+  metadata.gz: 725e1fda66e9ecc1fbc9aff03a235e009dbe2b81cdf0c5b0ef7f61a472bc573580b326ee8e63df784982a2f5265e7c92d12d3d083e3656c8a6341338b836dbe6
+  data.tar.gz: 24f136ee905fa88d41dcb48a92e311569ae5bbd212cd6b0a76bcae6df118e0b216c6551a6266dbd023bef11c79fd667191e984f3f5edb046537d252f2f6c9a28

data/README.md

@@ -1,26 +1,84 @@
 # Matestack Ui Bootstrap
 
+**Docs and specs in progress, please wait for official release announcement before using this gem**
 
-## Develpment
+## Development
+
+### Dummy App
+
+**initial setup**
+
+```shell
+docker-compose build dummy
+docker-compose run --rm dummy bash
+```
+
+inside container:
 
 ```shell
 bundle install
 yarn install
-rake db:setup
-rails s
-./bin/webpack --watch
+cd spec/dummy
+bundle install
+npm install (npm and not yarn!)
+rails app:db:setup
 ```
 
+**dummy app start**
+
+on your host:
 ```shell
-rails s
+docker-compose up dummy
 ```
 
+and
+
 ```shell
-./bin/webpack --watch
+docker-compose run --rm dummy sh -c "cd spec/dummy && ./bin/webpack --watch"
 ```
 
+simultaneously to be able to visit the demo app on [localhost:3000](localhost:3000).
+
 ## Testing
 
+**initial setup**
+
+```shell
+docker-compose build dummy
+docker-compose run --rm dummy bash
+```
+
+inside container:
+
+```shell
+bundle install
+yarn install
+cd spec/dummy
+bundle install
+npm install (npm and not yarn!)
+rails app:db:setup
+```
+
+**test run**
+
+```shell
+docker-compose run --rm builder bash
+
+```
+
+inside container:
+
+```shell
+bundle exec rspec spec/test
+```
+
+## Release
+
 ```shell
-bundle exec rspec
+docker-compose run --rm builder
+gem bump ...
+gem release
+npm bump ...
+npm release
+git tag ...
 ```

data/app/concepts/matestack/ui/bootstrap/components/accordion.rb

@@ -2,17 +2,18 @@ class Matestack::Ui::Bootstrap::Components::Accordion < Matestack::Ui::Component
 
   # [ {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: { as: :bs_attrs }, class: { as: :bs_class }, id: { as: :bs_id }
 
   def setup
     @accordion_id = (bs_id.present? ? bs_id : "matestack-accordion-#{SecureRandom.hex(3)}")
   end
+
   def response
     div accordion_attributes do
-      div class: "card" do
-        accordion_content_partial if items.present?
-        yield_components
-      end
+      accordion_content_partial if items.present?
+      yield_components
     end
   end
 
@@ -20,17 +21,17 @@ class Matestack::Ui::Bootstrap::Components::Accordion < Matestack::Ui::Component
 
   def accordion_content_partial
     items.each_with_index do | item, index |
-      div class: "card-header p-0 #{item[:header][:class]}", id: (item[:header][:id] || "header-#{index}") do
-        heading size: (item[:header][:size] || 2), class: "mb-0" do
-          bs_btn variant: (item[:header][:variant] || :link), size: :block, class: (item[:header][:class] || "text-start"), text:item[:header][:text],
-                data: { toggle: "collapse", target: "#collapse-#{(item[:header][:id] || "header-#{index}") }" },
-                attributes: { "aria-expanded": "false", "aria-controls": "collapse-#{(item[:header][:id] || "header-#{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}") }" },
+            attributes: { "aria-expanded": "false", "aria-controls": "collapse-#{(item[:header][:id] || "header-#{index}")}", type: "button" }
         end
-      end
-      bs_collapse id: "collapse-#{(item[:header][:id] || "header-#{index}")}", labelledby: (item[:header][:id] || "header-#{index}"), 
-              parent: @accordion_id, multi: (item[:body][:multi] || false) do
-        div class: "card-body #{item[:body][:class]}" do
-          plain item[:body][:text]
+        bs_collapse class: "accordion-collapse #{ 'show' if 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
@@ -47,6 +48,8 @@ class Matestack::Ui::Bootstrap::Components::Accordion < Matestack::Ui::Component
   def accordion_classes
     [].tap do |classes|
       classes << 'accordion'
+      classes << 'open' if open
+      classes << 'accordion-flush' if variant == :flush
       classes << bs_class
     end.join(' ').strip
   end

data/app/concepts/matestack/ui/bootstrap/components/alert.rb

@@ -7,7 +7,7 @@ class Matestack::Ui::Bootstrap::Components::Alert < Matestack::Ui::VueJsComponen
   def response
     div alert_attributes do
       heading size: (title_size || 4), class: 'alert-heading', text: title if title
-      paragraph text: text if text
+      plain text if text
       yield_components
       bs_close dismiss: "alert" if dismissible
     end

data/app/concepts/matestack/ui/bootstrap/components/badge.rb

@@ -1,14 +1,14 @@
 class Matestack::Ui::Bootstrap::Components::Badge < Matestack::Ui::Component
-  
+
   optional class: { as: :bs_class }
-  optional :text, :variant, :rounded, :sr_only
+  optional :text, :variant, :rounded, :visually_hidden
 
   def response
     span badge_attributes do
       plain text if text
       yield_components
     end
-    span class: "sr-only", text: sr_only if sr_only.present?
+    span class: "visually-hidden", text: visually_hidden if visually_hidden.present?
   end
 
   protected
@@ -27,4 +27,4 @@ class Matestack::Ui::Bootstrap::Components::Badge < Matestack::Ui::Component
       classes << bs_class
     end.join(' ').strip
   end
-end
+end

data/app/concepts/matestack/ui/bootstrap/components/breadcrumb.rb

@@ -4,20 +4,22 @@ class Matestack::Ui::Bootstrap::Components::Breadcrumb < Matestack::Ui::Componen
   optional class: { as: :bs_class} # adding custom class to breadcrumb list
   optional :nav_class
 
-  def response 
+  def response
     nav class: nav_class, attributes: { 'aria-label': "breadcrumb" } do
-      ol breadcrumb_attributes do    
+      ol breadcrumb_attributes do
         items&.each_with_index do |item, index|
           li link_attrs((items.size - 1) == index) do
             case item[:type]
             when :link
-              link path: item[:path], text: item[:text]
+              link item
+            when :transition
+              transition item
             else
-              transition path: item[:path], text: item[:text]
+              plain item[:text]
             end
           end
         end
-        yield_components 
+        yield_components
       end
     end
   end
@@ -43,4 +45,4 @@ class Matestack::Ui::Bootstrap::Components::Breadcrumb < Matestack::Ui::Componen
       classes << bs_class
     end.join(' ').strip
   end
-end
+end

data/app/concepts/matestack/ui/bootstrap/components/button.rb

@@ -2,11 +2,26 @@ class Matestack::Ui::Bootstrap::Components::Button < Matestack::Ui::Component
 
   optional :text, :type, :variant, :size, :outline
   optional attributes: { as: :bs_attrs }, class: { as: :bs_class }
-  optional :is_transition
+  optional transition: { as: :bs_btn_transition }
+  optional action: { as: :bs_btn_action }
+  optional onclick: { as: :bs_btn_onclick }
+  optional link: { as: :bs_btn_link }
 
   def response
-    if is_transition
-      transition button_attributes.merge({path: root_path}) do
+    if bs_btn_transition.present? && bs_btn_transition.is_a?(Hash)
+      transition button_attributes.merge(bs_btn_transition.merge({attributes: { role: "button"} })) do
+        inner_response
+      end
+    elsif bs_btn_action.present? && bs_btn_action.is_a?(Hash)
+      action button_attributes.merge(bs_btn_action.merge({attributes: { role: "button"} })) do
+        inner_response
+      end
+    elsif bs_btn_onclick.present? && bs_btn_onclick.is_a?(Hash)
+      onclick button_attributes.merge(bs_btn_onclick.merge({attributes: { role: "button"} })) do
+        inner_response
+      end
+    elsif bs_btn_link.present? && bs_btn_link.is_a?(Hash)
+      link button_attributes.merge(bs_btn_link.merge({attributes: { role: "button"} })) do
         inner_response
       end
     else

data/app/concepts/matestack/ui/bootstrap/components/carousel.rb

@@ -1,7 +1,7 @@
 class Matestack::Ui::Bootstrap::Components::Carousel < Matestack::Ui::VueJsComponent
-  vue_js_component_name "matestack-ui-bootstrap-carousel" 
-  
-  optional :start, :controls, :indicators, :fade, :interval
+  vue_js_component_name "matestack-ui-bootstrap-carousel"
+
+  optional :start, :controls, :indicators, :fade, :interval, :variant
   optional :items, class: { as: :bs_class }
   # possible keys for items: path, title, text, interval
   # event trigger
@@ -10,7 +10,7 @@ class Matestack::Ui::Bootstrap::Components::Carousel < Matestack::Ui::VueJsCompo
   def setup
     @component_config["carousel-id"] = carousel_id
   end
-  
+
   def response
     div carousel_attributes do
       # carousel indicator
@@ -29,7 +29,7 @@ class Matestack::Ui::Bootstrap::Components::Carousel < Matestack::Ui::VueJsCompo
   def indicator_partial
     ol class: "carousel-indicators" do
       items.size.times do |index|
-        li data: { target: carousel_id, 'slide-to': index }, 
+        li data: { "bs-target": "##{carousel_id}", 'bs-slide-to': index },
           class: "#{'active' if index == (start || 0) }"
       end
     end
@@ -37,8 +37,8 @@ class Matestack::Ui::Bootstrap::Components::Carousel < Matestack::Ui::VueJsCompo
 
   def carousel_partial
     items.each_with_index do |item, index|
-      div class: "carousel-item #{'active' if index == (start || 0) } #{item[:class]}".strip, 
-        data: { interval: item[:interval] } do
+      div class: "carousel-item #{'active' if index == (start || 0) } #{item[:class]}".strip,
+        data: { "bs-interval": item[:interval] } do
         img class: "d-block w-100", path: item[:path]
         if item[:title] || item[:text]
           div class: "carousel-caption d-none d-md-block #{item[:title_class]}" do
@@ -51,13 +51,13 @@ class Matestack::Ui::Bootstrap::Components::Carousel < Matestack::Ui::VueJsCompo
   end
 
   def controls_partial
-    link class: "carousel-control-prev", path: "##{carousel_id}", data: { slide: :prev }, attributes: { 'role': "button" } do
+    link class: "carousel-control-prev", data: { "bs-target": "##{carousel_id}", "bs-slide": :prev }, attributes: { 'role': "button" } do
       span class: "carousel-control-prev-icon", attributes: { 'aria-hidden': "true" }
-      span class: "sr-only", text: "Previous"
+      span class: "visually-hidden", text: "Previous"
     end
-    link class: "carousel-control-next", path: "##{carousel_id}", data: { slide: :next }, attributes: { 'role': "button" } do
+    link class: "carousel-control-next", data: { "bs-target": "##{carousel_id}", "bs-slide": :next }, attributes: { 'role': "button" } do
       span class: "carousel-control-next-icon", attributes: { 'aria-hidden': "true" }
-      span class: "sr-only", text: "Next"
+      span class: "visually-hidden", text: "Next"
     end
   end
 
@@ -65,7 +65,7 @@ class Matestack::Ui::Bootstrap::Components::Carousel < Matestack::Ui::VueJsCompo
     html_attributes.merge(
       id: carousel_id,
       class: carousel_classes,
-      data: { ride: 'carousel', interval: (interval || 5000) }
+      data: { "bs-ride": 'carousel', "bs-interval": (interval || 5000) }
     )
   end
 
@@ -73,7 +73,8 @@ class Matestack::Ui::Bootstrap::Components::Carousel < Matestack::Ui::VueJsCompo
     [].tap do |classes|
       classes << 'carousel slide'
       classes << 'carousel-fade' if fade
-      #custom classes 
+      classes << 'carousel-dark' if variant == :dark
+      #custom classes
       classes << bs_class
     end.join(' ').strip
   end
@@ -82,4 +83,4 @@ class Matestack::Ui::Bootstrap::Components::Carousel < Matestack::Ui::VueJsCompo
     @carousel_id ||= "matestack-carousel-#{SecureRandom.hex}"
   end
 
-end
+end

data/app/concepts/matestack/ui/bootstrap/components/close.rb

@@ -14,7 +14,7 @@ class Matestack::Ui::Bootstrap::Components::Close < Matestack::Ui::Component
   def close_attributes
     html_attributes.merge(
       class: close_classes,
-      data: { dismiss: "#{dismiss}" },
+      data: { "bs-dismiss": "#{dismiss}" },
       type: 'button',
       attributes: (attributes || {}).merge({ 'aria-label': 'Close' })
     )

data/app/concepts/matestack/ui/bootstrap/components/collapse.rb

@@ -1,12 +1,12 @@
 class Matestack::Ui::Bootstrap::Components::Collapse < Matestack::Ui::VueJsComponent
-  vue_js_component_name "matestack-ui-bootstrap-collapse" 
-  
+  vue_js_component_name "matestack-ui-bootstrap-collapse"
+
   optional :multi, :labelledby, :parent, class: { as: :bs_class }
   optional :card # possible keys: class, text
   # event trigger
   optional :toggle_on, :show_on, :hide_on, :dispose_on
 
-  def response 
+  def response
     div collapse_attributes do
       card_partial if card
       yield_components
@@ -25,7 +25,7 @@ class Matestack::Ui::Bootstrap::Components::Collapse < Matestack::Ui::VueJsCompo
   def collapse_attributes
     html_attributes.merge(
       class: collapse_classes,
-      data: { parent: parent },
+      data: { "bs-parent": parent },
       attributes: { 'aria-labelledby': "#{labelledby}" }
     )
   end
@@ -35,9 +35,9 @@ class Matestack::Ui::Bootstrap::Components::Collapse < Matestack::Ui::VueJsCompo
       classes << 'collapse'
       # mulit target
       classes << 'multi-collapse' if multi
-      #custom classes 
+      #custom classes
       classes << bs_class
     end.join(' ').strip
   end
 
-end
+end

data/app/concepts/matestack/ui/bootstrap/components/dropdown.rb

@@ -30,7 +30,7 @@ class Matestack::Ui::Bootstrap::Components::Dropdown < Matestack::Ui::VueJsCompo
   def split_btn_partial
     slot slots[:split_btn]
     bs_btn btn_attributes do
-      span class:"sr-only" do plain "Toggle Dropdown" end
+      span class:"visually-hidden" do plain "Toggle Dropdown" end
     end
   end
 
@@ -47,6 +47,8 @@ class Matestack::Ui::Bootstrap::Components::Dropdown < Matestack::Ui::VueJsCompo
         li do transition item.merge(class: "dropdown-item #{item[:class]}") end
       when :action
         li do action item.merge(class: "dropdown-item #{item[:class]}") do plain item[:text] end end
+      when :onclick
+        li do onclick item.merge(class: "dropdown-item #{item[:class]}", attributes: { style: "cursor: pointer;" }) do plain item[:text] end end
       else
         span class: "dropdown-item-text" do plain item[:text] end
       end
@@ -99,7 +101,6 @@ class Matestack::Ui::Bootstrap::Components::Dropdown < Matestack::Ui::VueJsCompo
   def menu_attributes
     {
       class: menu_classes,
-      data: { toggle: 'dropdown' },
       attributes: { 'aria-labelledby': bs_id }
     }
   end

data/app/concepts/matestack/ui/bootstrap/components/list_group.rb

@@ -1,50 +1,87 @@
 class Matestack::Ui::Bootstrap::Components::ListGroup < Matestack::Ui::Component
   html_attributes :role
 
-  #  optional :id 
-  optional :items 
+  optional :items
   optional :horizontal, :horizontal_size, :checkbox
-  optional :flush, :tablist, class: { as: :bs_class }
+  optional :variant, class: { as: :bs_class }
 
 
-  def response 
-    ul list_group_attributes do
-      yield_components unless items
-      list_partial if items
+  def response
+    if actionable_items?
+      div list_group_attributes do
+        yield_components unless items
+        list_partial if items
+      end
+    else
+      ul list_group_attributes do
+        yield_components unless items
+        list_partial if items
+      end
     end
   end
 
   protected
 
+  def actionable_items?
+    if items.present?
+      items.any? { |item| [:tab, :transition, :action, :link].include?(item[:type]) }
+    else
+      false
+    end
+  end
+
+  def tab_nav?
+    if items.present?
+      items.any? { |item| item[:type] == :tab }
+    else
+      false
+    end
+  end
+
   def list_partial
     items.each do |item|
-      case item[:type]        
-      when :link 
+      case item[:type]
+      when :link
         link link_attrs(item)  do
-          plain item[:text]
+          text_rendering(item)
+        end
+      when :tab
+        link tab_attrs(item)  do
+          text_rendering(item)
         end
-      when :transition 
-        transition link_attrs(item)  do
-          plain item[:text]
+      when :transition
+        transition transition_attrs(item)  do
+          text_rendering(item)
         end
-      when :label 
+      when :action
+        action action_attrs(item)  do
+          text_rendering(item)
+        end
+      when :label
         label id: item[:id], class: "#{list_classes item, false}" do
           input class: "form-check-input me-1", attributes: { 'type': "checkbox", 'value': "" } if checkbox
-          plain item[:text]
+          text_rendering(item)
         end
       else
-        li id: item[:id], class: "#{list_classes item, false}" do
-          input class: "form-check-input me-1", attributes: { 'type': "checkbox", 'value': "", 'aria-label': "#{item[:text]}" } if checkbox
-          plain item[:text]
+        li id: item[:id], class: "#{list_classes item, false}", attributes: { "aria-disabled": "#{true if item[:disabled]}" } do
+          # this implementation is useless, would need to be connected to a form through bs_form_checkbox
+          # input class: "form-check-input me-1", attributes: { 'type': "checkbox", 'value': "", 'aria-label': "#{item[:text]}" } if checkbox
+          text_rendering(item)
+          bs_badge variant: :primary, rounded: true, text: item[:badge] if item[:badge]
         end
       end
     end
   end
 
+  def text_rendering(item)
+    bs_icon name: item[:icon] if item[:icon]
+    plain item[:text]
+  end
+
   def list_group_attributes
     attributes = {}.tap do |hash|
       hash[:class] = list_group_classes
-      hash[:attributes] = { role: "tablist" } if tablist
+      hash[:attributes] = { role: "tablist" } if tab_nav?
     end
     html_attributes.merge(
       attributes
@@ -55,29 +92,54 @@ class Matestack::Ui::Bootstrap::Components::ListGroup < Matestack::Ui::Component
     [].tap do |classes|
       classes << 'list-group'
       classes << (horizontal_size.present? ? "list-group-horizontal-#{horizontal_size}": "list-group-horizontal") if horizontal
-      classes << 'list-group-flush' if flush
+      classes << 'list-group-flush' if variant == :flush
       classes << bs_class
     end.join(' ').strip
   end
 
   def link_attrs(item)
+    attrs = item
+    attrs[:class] = "#{list_classes item, true}"
+    attrs[:attributes] = { "aria-disabled": "#{true if item[:disabled]}" } if item[:disabled]
+    attrs
+  end
+
+  def tab_attrs(item)
     {}.tap do |hash|
-      hash[:id] = item[:id]
+      hash[:id] = "tab-#{item[:id]}" if tab_nav?
       hash[:class] = "#{list_classes item, true}"
-      hash[:data] = { toggle: "list" } if tablist
-      hash[:attributes] = { 'aria-controls': "#{id}", role: "tab" } if tablist
-      hash[:path] = item[:path]
+      hash[:data] = { "bs-toggle": "list" }
+      hash[:attributes] = { "aria-disabled": "#{true if item[:disabled]}" } if item[:disabled]
+      hash[:attributes] = { 'aria-controls': "#tab-#{item[:id]}-content", role: "tab" }
+      hash[:path] = "#tab-#{item[:id]}-content"
+      hash[:target] = item[:target]
     end
   end
 
+  def transition_attrs(item)
+    attrs = item
+    attrs[:class] = "#{list_classes item, true}"
+    attrs[:attributes] = { "aria-disabled": "#{true if item[:disabled]}" } if item[:disabled]
+    attrs
+  end
+
+  def action_attrs(item)
+    attrs = item
+    attrs[:class] = "#{list_classes item, true}"
+    attrs[:attributes] = { "aria-disabled": "#{true if item[:disabled]}" } if item[:disabled]
+    attrs
+  end
+
   def list_classes(item, action)
     [].tap do |classes|
       classes << 'list-group-item'
       classes << 'list-group-item-action' if action
       classes << "list-group-item-#{item[:variant]}" if item[:variant].present?
       classes << 'active' if item[:active]
+      classes << 'disabled' if item[:disabled]
+      classes << 'd-flex justify-content-between align-items-center' if item[:badge].present?
       classes << item[:class]
     end.join(' ').strip
   end
 
-end
+end