rails_accordion 1.0.0 → 1.0.1

data/app/components/accordion_component.rb

@@ -1,23 +1,23 @@
 # frozen_string_literal: true
 
 class AccordionComponent < ViewComponent::Base
-
   def initialize(**args)
-    super
     @args = args.presence || {}
-    set_data_params
   end
 
   def call
-    content_tag(:div, content, **@args)
+    content_tag(:div, content, data: data_options, **@args)
   end
 
   private
 
-  def set_data_params
-    @args[:data] ||= {}
-    @args[:data][:controller] = [@args[:data][:controller], "accordion"].compact.join(" ")
-    @args[:data][:multiple_open] = @args.delete(:multiple_open) || RailsAccordion.configuration.multiple_open
-    @args[:data][:default_state] = @args.delete(:default_state) || RailsAccordion.configuration.default_state
+  def data_options
+    data = @args.delete(:data) || {}
+    {
+      controller: [data.delete(:controller), "accordion"].compact.join(" "),
+      accordion_multiple_open_value: @args.delete(:multiple_open) || RailsAccordion.configuration.multiple_open,
+      accordion_default_state_value: @args.delete(:default_state) || RailsAccordion.configuration.default_state,
+      **data
+    }
   end
 end

data/app/components/item_component.rb

@@ -5,13 +5,11 @@ class ItemComponent < ViewComponent::Base
   renders_one :header
 
   def initialize(**args)
-    super
     @args = args.presence || {}
-    set_classes
   end
 
   def call
-    content_tag :div, **@args do
+    content_tag :div, class: [@args.delete(:class), "accordion_item"].compact.join(" "), data: { accordion_target: "item" }, **@args do
       header_component + body_component
     end
   end
@@ -19,7 +17,7 @@ class ItemComponent < ViewComponent::Base
   private
 
   def header_component
-    content_tag :div, header, class: "accordion_toggle"
+    content_tag :div, header, class: "accordion_toggle", data: { action: "click->accordion#toggle" }
   end
 
   def body_component
@@ -32,10 +30,6 @@ class ItemComponent < ViewComponent::Base
     end
   end
 
-  def set_classes
-    @args[:class] = [@args[:class], "accordion_item"].compact.join(" ")
-  end
-
   def content_styles
     "transition-duration: #{parse_duration}ms;"
   end

data/app/javascript/controllers/accordion_controller.js

@@ -1,46 +1,39 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  connect() {
-    this.initAccordion();
+  static targets = [ "item" ]
 
-    this.initDefaultState()
+  static values = {
+    multipleOpen: Boolean,
+    defaultState: String
   }
 
-  initDefaultState() {
-    const items = this.element.querySelectorAll('.accordion_item');
-
-    switch($(this.element).data('default-state')) {
+  connect() {
+    // inits default state for accordion
+    switch(this.defaultStateValue) {
       case 'all_closed':
-        this.hideAll(items);
+        this.hideAll(this.itemTargets);
         break;
       case 'all_opened':
-        this.showAll(items);
+        this.showAll(this.itemTargets);
         break;
       case 'first_opened':
-        this.hideAll(items)
-        this.open(items[0].querySelector('.accordion_content'))
+        this.hideAll(this.itemTargets)
+        this.open(this.itemTargets[0].querySelector('.accordion_content'))
     }
   }
 
-  initAccordion() {
-    const items = this.element.querySelectorAll('.accordion_item');
-
-    items.forEach((item) => {
-      const toggle = item.querySelector('.accordion_toggle');
-      const content = item.querySelector('.accordion_content')
-
-      toggle.addEventListener('click', (e) => {
-        if (content.classList.contains('accordion_active')) {
-          this.hide(content);
-        } else {
-          if ($(this.element).data('multiple-open') != true) {
-            this.hideAll(items);
-          }
-          this.open(content);
-        }
-      });
-    });
+  toggle(e) {
+    const content = e.currentTarget.parentNode.querySelector('.accordion_content')
+
+    if (content.classList.contains('accordion_active')) {
+      this.hide(content);
+    } else {
+      if (!this.multipleOpenValue) {
+        this.hideAll(this.itemTargets);
+      }
+      this.open(content);
+    }
   }
 
   hideAll(items) {
@@ -58,6 +51,12 @@ export default class extends Controller {
 
   open(item) {
     item.classList.add("accordion_active")
-    item.style.height = item.scrollHeight + 'px'
+    item.style.height = item.scrollHeight + 'px';
+
+    item.querySelectorAll('.accordion_content').forEach(function(child) {
+      new ResizeObserver(function() {
+        item.style.height = item.scrollHeight + 'px';
+      }).observe(child);
+    });
   }
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails_accordion
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.0.1
 platform: ruby
 authors:
 - Ahmadshoh Nasrullozoda
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-06-07 00:00:00.000000000 Z
+date: 2023-06-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: stimulus-rails