bs5_expandable_list_group 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fb85128dd2e5cbcfadab803722f3641dc1f899d48f7648967790c4c07167e53e
-  data.tar.gz: 7e35116c8fd0739e75387b65d99b071d68b4b99de79df9aeb2b538e37a94e9e9
+  metadata.gz: d0fe287158fb9bd8dc214ab834588e700e6a1c87c13410afa2761f6200a34dc8
+  data.tar.gz: 20e7875417d6b574f86c92e6c70595cad7cfd555ebbbde4f68e9c7bdf082d661
 SHA512:
-  metadata.gz: 2020c90cf7b667d478018ed5d508b58167f28303f82bb79e9fb36010499e1e54e5e1bed16c13ce9408b7813363baad4a46322b250d232be895166e0c26eb41e8
-  data.tar.gz: 0b380cdc5f32d767177cb16e2bd72b7df0088f41b23eb706591654d37dfd96bd8c035b11a4ea2f6175bc0c04238d4140521d6dd8f42815027a9b37fdd3856351
+  metadata.gz: 9ae2e083544567258691eb1a6d0b60b4c43de0bc7c9bbe4dbabb98d46e9df9c7d06c67b9febbd2daa156bee4a863a63f1a1e05fa31649ab11f960867ebd22fe7
+  data.tar.gz: 80aee9b9c941a123cde3190788c6d1e528ea65aff3eea285197edddb3627818ae8f86ab3daeb8cf0d1da5f5ba833caa779dad6a7a9eca090cfcef48c7f51bbbf

data/README.md

@@ -66,7 +66,7 @@ Stylesheets are copied to `app/javascript/stylesheets`. If needed, you can add t
 
 ## Usage
 
-To render a **Bootstrap 5 expandable list group** you use `render(Bs5::ExpandableListGroupComponent.new)` and pass it a block for rendering every list item.
+To render a **Bootstrap 5 expandable list group** you use `bs5_expandable_list_group` and pass it a block for rendering every list item.
 
 Given that you have assigned a list of `Post` instances to `@posts`, to render these `@posts` in a **Bootstrap 5 expandable list group**, you put the following code in your template:
 
@@ -160,7 +160,25 @@ To show a different set on hovering:
   <% end %>
 ```
 
-### Omitting the `item` methods
+#### Bypassing the hover behaviour
+
+By default, when an item is collapsed, actions only show when you hover your mouse over the item. Since we use the `visibility` CSS property for this, you can bypass this behaviour one or more actions by setting its `visibility` property to `visible`. The following example uses the [`visible` utility](https://getbootstrap.com/docs/5.0/utilities/visibility/) from Bootstrap 5, but of course you can also use CSS:
+
+```erb
+  ...
+  <% c.item do |i| %>
+    <%= i.title do |t| %>
+      ...
+    <% end %>
+    <% i.actions do |a| %>
+      <%= link_to 'Not so important link', ... %>
+      <%= link_to 'Very important link', ..., class: 'visible` %>
+    <% end %>      
+    <%= i.body { ... } %>
+  <% end %>
+```
+
+### Omitting the `item`'s methods
 
 Instead of using the `item`'s methods `title`, `body` and/or `actions` you can just use (HTML-) text as a block.  
 This will render just a [list group item](https://getbootstrap.com/docs/5.0/components/list-group/#basic-example), but will come in handy when you, i.e. show the first 25 items of a longer list and want to present a "Load more" link as last item of the list (for simplicity sake the sample uses a non-working `link_to_next_page` although this is [part of Kaminari](https://github.com/kaminari/kaminari#the-link_to_next_page-and-link_to_previous_page-aliased-to-link_to_prev_page-helper-methods)):
@@ -181,9 +199,49 @@ This will render just a [list group item](https://getbootstrap.com/docs/5.0/comp
 <% end %>
 ```
 
+### Omitting the `item`
+
+Instead of calling the `item` method on the yielded component, when you pass a block, it's rendered wrapped in the container element:
+
+```erb
+<%= bs5_expandable_list_group do %>
+  <%= render @posts %>
+<% end %>
+```
+
+This will give you the same results as wrapping the posts in a `div` with the class **list-group**, but you can still pass other options to the `bs5_expandable_list_group` (although not all of them will be effective).
+
+### Rendering a single item
+
+By calling the `item` method on the passed component you can render an item. But this can also be achieved outside the block by using the `bs5_expandable_list_group_item` helper method. The following snippet has the same result as other examples, but it does not use the `bs5_expandable_list_group` method:
+
+```erb
+<div id="posts" class="list-group">
+  <% @posts.each do |post| %>
+    <% bs5_expandable_list_group_item(parent_id: 'posts') do |i| %>
+      <%= i.title { post.title } %>
+      <%= i.body  { post.text } %>
+    <% end %>
+  <% end %>
+</div>
+```
+
+An application for rendering a single item is when you want to update an item without doing a full page reload by sending a response that contains only the list item and use JavaScript or (preferably) [Turbo](https://turbo.hotwire.dev/) to update the page.
+
+#### Passing options
+
+The following options can be passed to `bs5_expandable_list_group_item`:
+
+| name  |  default | description |
+|---|---|---|
+| `tag` | `:div` | A symbol or string of a valid HTML tag that is used for the tag of the list item. |
+| `parent_id` |  | ID of a parent element to add accordion-like behaviour. |
+|  `stretchable` | `false`  | Expanded items are shown a little bit bigger as if they come out a bit. |
+
+
 ### Wrap an item in an extra element
 
-Every list item is a `div` with one or more CSS classes and, dependent on block passed, some `data` attributes and is not customizable (yet).  
+Every list item is a `div` (or the element specified with `tag`) with one or more CSS classes and, dependent on block passed, some `data` attributes.  
 However, you can wrap a list item in a extra element by passing a `wrapper_html` option to the `item` method:
 
 ```erb
@@ -205,20 +263,21 @@ All options passed to the item method are used as HTML attributes of the wrapper
 
 ### Passing options
 
-The following options can be passed to `Bs5::ExpandableListGroupComponent.new`:
+The following options can be passed to `bs5_expandable_list_group`:
 
 | name  |  default | description |
 |---|---|---|
-| `tag` | `:div` | A symbol or string of a valid HTML tag that is used for the tag of the list group |
-|  `id` |   | is used to assign an id HTML attribute to the rendered container |
-| `class`  |   | is added to the class attribute of the rendered container |
-|  `accordion` | `false`  | Behaves as an Bootstrap [accordion](https://getbootstrap.com/docs/5.0/components/accordion/) by having only 1 item expanded |
-|  `expandable` | `false`  | Expanded items are shown a little bit bigger as if they come out a bit|
+| `tag` | `:div` | A symbol or string of a valid HTML tag that is used for the tag of the list group. |
+|  `id` |   | is used to assign an id HTML attribute to the rendered container. |
+| `class`  |   | is added to the class attribute of the rendered container. |
+|  `accordion` | `false`  | Behaves as an Bootstrap [accordion](https://getbootstrap.com/docs/5.0/components/accordion/) by having only 1 item expanded (only effective when used with `item` in the passed block). |
+|  `stretchable` | `false`  | Expanded items are shown a little bit bigger as if they come out a bit. |
+| `expanded` | `false` | Show the item expanded. |
 
 Example:
 
 ```erb
-<%= bs5_expandable_list_group(accordion: true, expandable: true) do |c| %>
+<%= bs5_expandable_list_group(accordion: true, stretchable: true) do |c| %>
   ...
 <% end %>
 ```

data/app/components/bs5/expandable_list/group_component.html.erb

@@ -0,0 +1,9 @@
+<%= tag.send(tag_name, **component_attributes) do %>
+  <% if items.any? %>
+    <% items.each do |item| %>
+      <%= item %>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+<% end %>

data/app/components/bs5/expandable_list/group_component.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Bs5
+  module ExpandableList
+    class GroupComponent < ViewComponent::Base
+      renders_many :items, lambda { |options = {}|
+        options.merge!(parent_id: id, stretchable: stretchable?)
+        GroupItemComponent.new(**options)
+      }
+
+      attr_reader :options, :is_accordion, :is_stretchable, :tag_name
+
+      DEFAULT_TAG_NAME = :div
+
+      def initialize(options = {})
+        @is_accordion = options.delete(:accordion)
+        @is_stretchable = options.delete(:stretchable)
+        @id = options.delete(:id)
+        @tag_name = options.delete(:tag) || DEFAULT_TAG_NAME
+        @options = options
+      end
+
+      private
+
+      def id
+        @id || (accordion? && "list-group-#{object_id}")
+      end
+
+      def component_class
+        ['list-group'].tap do |arr|
+          arr << @options[:class]
+        end
+      end
+
+      def component_attributes
+        options.merge(id: id, class: component_class)
+      end
+
+      alias accordion? is_accordion
+      alias stretchable? is_stretchable
+    end
+  end
+end

data/app/components/bs5/expandable_list/group_item_component.html.erb

@@ -0,0 +1,15 @@
+<%= wrapper do %>
+  <% if simple_content? %>
+    <%= tag.send(tag_name, content, **component_attributes) %>
+  <% else %>
+    <%= tag.send(tag_name, **component_attributes) do %>
+      <div class="expandable-item-header">
+        <%= title %>
+        <%= actions %>
+      </div>
+      <%= tag.div(id: target_id, class: body_class, data: body_data_options) do %>
+        <%= body %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/bs5/expandable_list/group_item_component.rb

@@ -0,0 +1,100 @@
+# frozen_string_literal: true
+
+module Bs5
+  module ExpandableList
+    class GroupItemComponent < ViewComponent::Base
+      DEFAULT_WRAPPER_TAG = :div
+      DEFAULT_TAG_NAME = :div
+      renders_one :title, lambda {
+        GroupItemHeader::TitleComponent.new(target_id: target_id, expanded: expanded?)
+      }
+      renders_one :actions, GroupItemHeader::ActionsComponent
+      renders_one :body
+
+      attr_reader :parent_id, :is_stretchable, :is_expanded, :tag_name, :wrapper_html, :options
+
+      def initialize(options = {})
+        @parent_id = options.delete(:parent_id)
+        @is_stretchable = options.delete(:stretchable)
+        @is_expanded = options.delete(:expanded)
+        @tag_name = options.delete(:tag) || DEFAULT_TAG_NAME
+        @wrapper_html = options.delete(:wrapper_html)
+        @options = options
+      end
+
+      private
+
+      def wrapper_html?
+        @wrapper_html.present?
+      end
+
+      def wrapper_tag
+        @wrapper_html.delete(:tag) || DEFAULT_WRAPPER_TAG
+      end
+
+      def wrapper(&block)
+        if wrapper_html?
+          tag.send(wrapper_tag, **wrapper_html, &block)
+        else
+          capture { block.call }
+        end
+      end
+
+      def simple_content?
+        title.blank? && body.blank? && actions.blank?
+      end
+
+      def target_id
+        "expandable-list-item-#{object_id}"
+      end
+
+      def body_data_options
+        {}.tap do |h|
+          h['bs-parent'] = "##{parent_id}" if parent_id
+        end
+      end
+
+      def component_data_options
+        {}.tap do |h|
+          h.merge!(stimulus_attributes) if stretchable?
+        end
+      end
+
+      def component_class
+        ['list-group-item'].tap do |arr|
+          arr << 'expandable-item' unless simple_content?
+          arr << 'stretchable-item'
+          arr << 'stretched' if !simple_content? && expanded?
+        end
+      end
+
+      def body_class
+        %w[expandable-item-body collapse].tap do |arr|
+          arr << 'show' if expanded?
+        end
+      end
+
+      def component_attributes
+        options.tap do |h|
+          h[:class] = component_class
+          h[:data] =  component_data_options unless simple_content?
+        end
+      end
+
+      def stimulus_attributes
+        {
+          controller: stimulus_controller,
+          "#{stimulus_controller}-target": 'container',
+          "#{stimulus_controller}-stretched-class": 'stretched'
+        }
+      end
+
+      def stimulus_controller
+        'stretchable-item'
+      end
+
+      alias stretchable? is_stretchable
+      alias expanded? is_expanded
+    end
+  end
+end

data/app/components/bs5/{expandable_list_item_header_actions_component.html.erb → expandable_list/group_item_header/actions_component.html.erb}

@@ -1,6 +1,6 @@
 <div class="expandable-item-header-actions">
   <% if variable_actions? %>
-    <%= tag.div(class: "expandable-item-header-actions-collaped") do %>
+    <%= tag.div(class: "expandable-item-header-actions-collapsed") do %>
       <%= collapsed %>
     <% end %>
     <%= tag.div(class: "expandable-item-header-actions-expanded") do %>

data/app/components/bs5/expandable_list/group_item_header/actions_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Bs5
+  module ExpandableList
+    module GroupItemHeader
+      class ActionsComponent < ViewComponent::Base
+        renders_one :collapsed
+        renders_one :expanded
+
+        private
+
+        def variable_actions?
+          collapsed || expanded
+        end
+      end
+    end
+  end
+end

data/app/components/bs5/{expandable_list_item_header_title_component.html.erb → expandable_list/group_item_header/title_component.html.erb}

@@ -1,6 +1,6 @@
-<%= tag.div(class: "expandable-item-header-title", data: { "bs-toggle": :collapse, "bs-target": "##{target_id}" } ) do %>
+<%= tag.div(class: "expandable-item-header-title", data: { "bs-toggle": :collapse, "bs-target": "##{target_id}" }, aria: { expanded: expanded? } ) do %>
   <% if variable_title? %>
-    <%= tag.div(class: "expandable-item-header-title-collaped") do %>
+    <%= tag.div(class: "expandable-item-header-title-collapsed") do %>
       <%= collapsed %>
     <% end %>
     <%= tag.div(class: "expandable-item-header-title-expanded") do %>

data/app/components/bs5/expandable_list/group_item_header/title_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Bs5
+  module ExpandableList
+    module GroupItemHeader
+      class TitleComponent < ViewComponent::Base
+        renders_one :collapsed
+        renders_one :expanded
+
+        attr_reader :target_id, :is_expanded
+
+        def initialize(target_id:, expanded: false)
+          @target_id = target_id
+          @is_expanded = expanded
+        end
+
+        private
+
+        def variable_title?
+          collapsed || expanded
+        end
+
+        alias expanded? is_expanded
+      end
+    end
+  end
+end

data/app/helpers/bs5_expandable_list_group/view_components_helper.rb

@@ -1,7 +1,13 @@
 module Bs5ExpandableListGroup
   module ViewComponentsHelper
     def bs5_expandable_list_group(*args)
-      render ::Bs5::ExpandableListGroupComponent.new(*args) do |c|
+      render ::Bs5::ExpandableList::GroupComponent.new(*args) do |c|
+        yield c if block_given?
+      end
+    end
+
+    def bs5_expandable_list_group_item(*args)
+      render ::Bs5::ExpandableList::GroupItemComponent.new(*args) do |c|
         yield c if block_given?
       end
     end

data/lib/bs5_expandable_list_group/version.rb

@@ -1,3 +1,3 @@
 module Bs5ExpandableListGroup
-  VERSION = '0.4.0'
+  VERSION = '0.5.0'
 end

data/lib/generators/bs5_expandable_list_group/install/templates/controllers/stretchable_item_controller.js

@@ -5,7 +5,7 @@ const HIDE_EVENT = "hide.bs.collapse";
 
 export default class extends Controller {
   static targets = ["container"];
-  static classes = ["item", "stretched"];
+  static classes = ["stretched"];
 
   initialize() {
     this.onShow = this._onShow.bind(this);
@@ -14,7 +14,6 @@ export default class extends Controller {
   }
 
   connect() {
-    this.containerTarget.classList.add(this.itemClass);
     this.contentNode.addEventListener(SHOW_EVENT, this.onShow);
     this.contentNode.addEventListener(HIDE_EVENT, this.onHide);
   }

data/lib/generators/bs5_expandable_list_group/install/templates/stylesheets/_expandable-items.scss

@@ -3,7 +3,14 @@
     position: relative;
     cursor: pointer;
 
-    &-actions {
+    &-title-expanded {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+    }
+
+    &-actions-collapsed, &-actions-expanded {
       position: absolute;
       top: 0;
       right: 0;
@@ -12,17 +19,18 @@
 
   &:hover &-header-actions,
   &-header-title[aria-expanded="true"] &-header-title-expanded,
-  &-header-title:not([aria-expanded="true"]) &-header-title-collaped,
+  &-header-title:not([aria-expanded="true"]) &-header-title-collapsed,
   &-header-title[aria-expanded="true"] + &-header-actions,
-  &-header-title[aria-expanded="true"] + &-header-actions &-header-actions-expanded {
-    display: revert;
+  &-header-title[aria-expanded="true"] + &-header-actions &-header-actions-expanded,
+  &-header-actions :focus-within {
+    visibility: visible;
   }
 
   &-header &-header-actions,
-  &-header-title[aria-expanded="true"] &-header-title-collaped,
+  &-header-title[aria-expanded="true"] &-header-title-collapsed,
   &-header-title:not([aria-expanded="true"]) &-header-title-expanded,
   &-header-actions-expanded,
-  &-header-title[aria-expanded="true"] + &-header-actions &-header-actions-collaped {
-    display: none;
+  &-header-title[aria-expanded="true"] + &-header-actions &-header-actions-collapsed {
+    visibility: hidden;
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bs5_expandable_list_group
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Patrick Baselier
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-06-03 00:00:00.000000000 Z
+date: 2021-06-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -100,14 +100,14 @@ files:
 - Rakefile
 - app/assets/config/bs5_expandable_list_group_manifest.js
 - app/assets/stylesheets/bs5_expandable_list_group/application.css
-- app/components/bs5/expandable_list_group_component.html.erb
-- app/components/bs5/expandable_list_group_component.rb
-- app/components/bs5/expandable_list_item_component.html.erb
-- app/components/bs5/expandable_list_item_component.rb
-- app/components/bs5/expandable_list_item_header_actions_component.html.erb
-- app/components/bs5/expandable_list_item_header_actions_component.rb
-- app/components/bs5/expandable_list_item_header_title_component.html.erb
-- app/components/bs5/expandable_list_item_header_title_component.rb
+- app/components/bs5/expandable_list/group_component.html.erb
+- app/components/bs5/expandable_list/group_component.rb
+- app/components/bs5/expandable_list/group_item_component.html.erb
+- app/components/bs5/expandable_list/group_item_component.rb
+- app/components/bs5/expandable_list/group_item_header/actions_component.html.erb
+- app/components/bs5/expandable_list/group_item_header/actions_component.rb
+- app/components/bs5/expandable_list/group_item_header/title_component.html.erb
+- app/components/bs5/expandable_list/group_item_header/title_component.rb
 - app/controllers/bs5_expandable_list_group/application_controller.rb
 - app/helpers/bs5_expandable_list_group/application_helper.rb
 - app/helpers/bs5_expandable_list_group/view_components_helper.rb

data/app/components/bs5/expandable_list_group_component.html.erb

@@ -1,5 +0,0 @@
-<%= tag.send(tag_name, **component_attributes) do %>
-  <% items.each do |item| %>
-    <%= item %>
-  <% end %>
-<% end %>

data/app/components/bs5/expandable_list_group_component.rb

@@ -1,41 +0,0 @@
-# frozen_string_literal: true
-
-module Bs5
-  class ExpandableListGroupComponent < ViewComponent::Base
-    renders_many :items, lambda { |options = {}|
-      options.merge!(parent_id: id, stretchable: stretchable?)
-      ExpandableListItemComponent.new(**options)
-    }
-
-    attr_reader :options, :accordion, :stretchable, :tag_name
-
-    DEFAULT_TAG_NAME = :div
-
-    def initialize(options = {})
-      @accordion = options.delete(:accordion)
-      @stretchable = options.delete(:stretchable)
-      @id = options.delete(:id)
-      @tag_name = options.delete(:tag) || DEFAULT_TAG_NAME
-      @options = options
-    end
-
-    private
-
-    def id
-      @id || (accordion? && "list-group-#{object_id}")
-    end
-
-    def component_class
-      class_names = ['list-group']
-      class_names << @options[:class]
-      class_names
-    end
-
-    def component_attributes
-      options.merge(id: id, class: component_class)
-    end
-
-    alias accordion? accordion
-    alias stretchable? stretchable
-  end
-end

data/app/components/bs5/expandable_list_item_component.html.erb

@@ -1,15 +0,0 @@
-<%= wrapper do %>
-  <% if simple_content? %>
-    <%= tag.div(content, class: "list-group-item") %>
-  <% else %>
-    <%= tag.div(class: "list-group-item expandable-item", data: component_data_options) do %>
-      <div class="expandable-item-header">
-        <%= title %>
-        <%= actions %>
-      </div>
-      <%= tag.div(id: target_id, class: "expandable-item-body collapse", data: body_data_options) do %>
-        <%= body %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/components/bs5/expandable_list_item_component.rb

@@ -1,74 +0,0 @@
-# frozen_string_literal: true
-
-module Bs5
-  class ExpandableListItemComponent < ViewComponent::Base
-    DEFAULT_WRAPPER_TAG = :div
-    renders_one :title, lambda {
-      ExpandableListItemHeaderTitleComponent.new(target_id: target_id)
-    }
-    renders_one :actions, ExpandableListItemHeaderActionsComponent
-    renders_one :body
-
-    attr_reader :parent_id, :stretchable, :wrapper_html
-
-    def initialize(options = {})
-      @parent_id = options.delete(:parent_id)
-      @stretchable = options.delete(:stretchable)
-      @wrapper_html = options.delete(:wrapper_html)
-      @options = options
-    end
-
-    private
-
-    def wrapper_html?
-      @wrapper_html.present?
-    end
-
-    def wrapper_tag
-      @wrapper_html.delete(:tag) || DEFAULT_WRAPPER_TAG
-    end
-
-    def wrapper(&block)
-      if wrapper_html?
-        tag.send(wrapper_tag, **wrapper_html, &block)
-      else
-        capture { block.call }
-      end
-    end
-
-    def simple_content?
-      title.blank? && body.blank? && actions.blank?
-    end
-
-    def target_id
-      "expandable-list-item-#{object_id}"
-    end
-
-    def body_data_options
-      {}.tap do |h|
-        h['bs-parent'] = "##{parent_id}" if parent_id
-      end
-    end
-
-    def component_data_options
-      {}.tap do |h|
-        h.merge!(stimulus_attributes) if stretchable?
-      end
-    end
-
-    def stimulus_attributes
-      {
-        controller: stimulus_controller,
-        "#{stimulus_controller}-target": 'container',
-        "#{stimulus_controller}-item-class": 'stretchable-item',
-        "#{stimulus_controller}-stretched-class": 'stretched'
-      }
-    end
-
-    def stimulus_controller
-      'stretchable-item'
-    end
-
-    alias stretchable? stretchable
-  end
-end

data/app/components/bs5/expandable_list_item_header_actions_component.rb

@@ -1,14 +0,0 @@
-# frozen_string_literal: true
-
-module Bs5
-  class ExpandableListItemHeaderActionsComponent < ViewComponent::Base
-    renders_one :collapsed
-    renders_one :expanded
-
-    private
-
-    def variable_actions?
-      collapsed || expanded
-    end
-  end
-end

data/app/components/bs5/expandable_list_item_header_title_component.rb

@@ -1,20 +0,0 @@
-# frozen_string_literal: true
-
-module Bs5
-  class ExpandableListItemHeaderTitleComponent < ViewComponent::Base
-    renders_one :collapsed
-    renders_one :expanded
-
-    attr_reader :target_id
-
-    def initialize(target_id:)
-      @target_id = target_id
-    end
-
-    private
-
-    def variable_title?
-      collapsed || expanded
-    end
-  end
-end