rails_accordion 0.1.11.pre.beta → 0.2.0.pre.beta

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 284d8cf2918779c43bc9ad68ee5d7e34d0a6b88b518f1477afd8b1d8311f2b81
-  data.tar.gz: c00f66ee4f7017135e24604d363bb9bfa02f3173d2f0bd7cc6eac60327b0afe2
+  metadata.gz: 5e9e757eaa0cead4dab2b564df0a1ca006e5638d11c1d0fa6261595ea3faf367
+  data.tar.gz: 89a3fd28498cf34c6ac666abd5be076aba75a8c0125b3903a9eaa36b68d2d822
 SHA512:
-  metadata.gz: c0a1cbbc177318dbfbfcfdc8e196c02a49467288406c5ba9a38e338b0dffd33fa1e98a0c75235a997df031818779b65a8d811979e1f07335f0f4f63266651ef3
-  data.tar.gz: 216f76b79299ac8e6f5a899db55420cbee4743f1fdafa7872ccacd6ae762d85080978a48b8cdc030c0e7a0ddccc4360545f5d8438ed86fab73afef6498d2c49a
+  metadata.gz: a1c850657c4d42d3a00db7f82aee4862e7e8f8c26843c2092ed435913349ee5870961b79fd88ed6cb84a9400e5ceb37cb02caeb75d43344ec90d5b34a5928f38
+  data.tar.gz: 2a319415261a298555ad85e36f735f4775cb2c42c7f2ec53420bc366c608e9d8ba60db35e59d2fb51ae21bb1f83ad59fe00afc68d214a78b80bb7a9af0eb65e2

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    rails_accordion (0.1.11.pre.beta)
+    rails_accordion (0.2.0.pre.beta)
       stimulus-rails (~> 1.2)
       view_component (~> 2.52)
       zeitwerk (~> 2.6)

data/README.md

@@ -5,13 +5,17 @@ rails_accordion is a Ruby gem that provides an easy-to-use accordion component f
 ## Installation
 
 ```rb
-gem 'rails_accordion', '~> 0.1.10.pre.beta'
+gem 'rails_accordion', '~> 0.1.12.pre.beta'
 ```
 
 ```shell
 bundle install
 ```
 
+```shell
+rails generate rails_accordion:install
+```
+
 In config/importmap.rb, add:
 
 ```rb
@@ -23,6 +27,11 @@ And in app/javascript/application.js, add:
 import 'rails_accordion'
 ```
 
+in application.scss, add:
+```scss
+@import 'rails_accordion'
+```
+
 ## Usage
 
 ```erb

data/app/assets/builds/rails_accordion.css

@@ -518,10 +518,14 @@ video {
   width: 100%;
   overflow: hidden;
   transition-property: all;
+  transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
 }
 
 .accordion_toggle {
   cursor: pointer;
 }
+
+.accordion_content-container {
+  height: max-content;
+}

data/app/assets/builds/rails_accordion.js

@@ -368,7 +368,7 @@
             return r2.path = "/v4/" + r2.authority + ".json", r2.params.push("secure"), this._makeAPIURL(r2, this._customAccessToken || e2);
           }, G.prototype.normalizeSpriteURL = function(t2, e2, r2, n2) {
             var i2 = Y(t2);
-            return Z(t2) ? (i2.path = "/styles/v1" + i2.path + "/sprite" + e2 + r2, this._makeAPIURL(i2, this._customAccessToken || n2)) : (i2.path += "" + e2 + r2, $(i2));
+            return Z(t2) ? (i2.path = "/styles/v1" + i2.path + "/sprite" + e2 + r2, this._makeAPIURL(i2, this._customAccessToken || n2)) : (i2.path += "" + e2 + r2, $2(i2));
           }, G.prototype.normalizeTileURL = function(t2, e2) {
             if (this._isSkuTokenExpired() && this._createSkuToken(), t2 && !Z(t2)) {
               return t2;
@@ -409,7 +409,7 @@
               i2 >= 0 && t2.params.splice(i2, 1);
             }
             if ("/" !== n2.path && (t2.path = "" + n2.path + t2.path), !R.REQUIRE_ACCESS_TOKEN) {
-              return $(t2);
+              return $2(t2);
             }
             if (!(e2 = e2 || R.ACCESS_TOKEN)) {
               throw new Error("An API access token is required to use Mapbox GL. " + r2);
@@ -419,7 +419,7 @@
             }
             return t2.params = t2.params.filter(function(t3) {
               return -1 === t3.indexOf("access_token");
-            }), t2.params.push("access_token=" + e2), $(t2);
+            }), t2.params.push("access_token=" + e2), $2(t2);
           };
           var X = /^((https?:)?\/\/)?([^\/]+\.)?mapbox\.c(n|om)(\/|\?|$)/i;
           function J(t2) {
@@ -433,7 +433,7 @@
             }
             return { protocol: e2[1], authority: e2[2], path: e2[3] || "/", params: e2[4] ? e2[4].split("&") : [] };
           }
-          function $(t2) {
+          function $2(t2) {
             var e2 = t2.params.length ? "?" + t2.params.join("&") : "";
             return t2.protocol + "://" + t2.authority + t2.path + e2;
           }
@@ -488,7 +488,7 @@
             if (R.EVENTS_URL) {
               var a2 = Y(R.EVENTS_URL);
               a2.params.push("access_token=" + (n2 || R.ACCESS_TOKEN || ""));
-              var o2 = { event: this.type, created: new Date(t2).toISOString(), sdkIdentifier: "mapbox-gl-js", sdkVersion: "1.13.3", skuId: K, userId: this.anonId }, s2 = e2 ? h(o2, e2) : o2, u2 = { url: $(a2), headers: { "Content-Type": "text/plain" }, body: JSON.stringify([s2]) };
+              var o2 = { event: this.type, created: new Date(t2).toISOString(), sdkIdentifier: "mapbox-gl-js", sdkVersion: "1.13.3", skuId: K, userId: this.anonId }, s2 = e2 ? h(o2, e2) : o2, u2 = { url: $2(a2), headers: { "Content-Type": "text/plain" }, body: JSON.stringify([s2]) };
               this.pendingRequest = wt(u2, function(t3) {
                 i2.pendingRequest = null, r2(t3), i2.saveEventData(), i2.processRequests(n2);
               });
@@ -8832,8 +8832,8 @@
                       var Y3 = n4.horizontal[H3];
                       if (!z4) {
                         R4 = ha(Y3.text);
-                        var $3 = s5.layout.get("text-rotate").evaluate(b4, {}, S4);
-                        z4 = new Wu(u5, e4, l4, p5, c6, Y3, h5, f5, y4, $3);
+                        var $4 = s5.layout.get("text-rotate").evaluate(b4, {}, S4);
+                        z4 = new Wu(u5, e4, l4, p5, c6, Y3, h5, f5, y4, $4);
                       }
                       var W3 = 1 === Y3.positionedLines.length;
                       if (V4 += sl(t4, e4, Y3, a5, s5, y4, b4, d4, M4, n4.vertical ? wu.horizontal : wu.horizontalOnly, W3 ? Object.keys(n4.horizontal) : [H3], O4, D4, w4, S4), W3) {
@@ -8876,8 +8876,8 @@
                   }
                 } else if ("Point" === e3.type) {
                   for (var J2 = 0, H2 = e3.geometry; J2 < H2.length; J2 += 1) {
-                    for (var Y2 = 0, $2 = H2[J2]; Y2 < $2.length; Y2 += 1) {
-                      var W2 = $2[Y2];
+                    for (var Y2 = 0, $3 = H2[J2]; Y2 < $3.length; Y2 += 1) {
+                      var W2 = $3[Y2];
                       P3([W2], new Fu(W2.x, W2.y, 0));
                     }
                   }
@@ -9453,7 +9453,7 @@
               e2.minX = Math.min(e2.minX, t2[r2]), e2.minY = Math.min(e2.minY, t2[r2 + 1]), e2.maxX = Math.max(e2.maxX, t2[r2]), e2.maxY = Math.max(e2.maxY, t2[r2 + 1]);
             }
           }
-          function $(e2, t2, r2, i2) {
+          function $2(e2, t2, r2, i2) {
             if (t2.geometry) {
               var o2 = t2.geometry.coordinates, n2 = t2.geometry.type, a2 = Math.pow(r2.tolerance / ((1 << r2.maxZoom) * r2.extent), 2), s2 = [], l2 = t2.id;
               if (r2.promoteId ? l2 = t2.properties[r2.promoteId] : r2.generateId && (l2 = i2 || 0), "Point" === n2) {
@@ -9478,7 +9478,7 @@
                 if ("MultiPolygon" !== n2) {
                   if ("GeometryCollection" === n2) {
                     for (u2 = 0; u2 < t2.geometry.geometries.length; u2++) {
-                      $(e2, { id: l2, geometry: t2.geometry.geometries[u2], properties: t2.properties }, r2, i2);
+                      $2(e2, { id: l2, geometry: t2.geometry.geometries[u2], properties: t2.properties }, r2, i2);
                     }
                     return;
                   }
@@ -9735,10 +9735,10 @@
               var r3 = [];
               if ("FeatureCollection" === e3.type) {
                 for (var i3 = 0; i3 < e3.features.length; i3++) {
-                  $(r3, e3.features[i3], t3, i3);
+                  $2(r3, e3.features[i3], t3, i3);
                 }
               } else {
-                $(r3, "Feature" === e3.type ? e3 : { geometry: e3 }, t3);
+                $2(r3, "Feature" === e3.type ? e3 : { geometry: e3 }, t3);
               }
               return r3;
             }(e2, t2);
@@ -11155,7 +11155,7 @@
                 t3 ? e3.enable(e3.STENCIL_TEST) : e3.disable(e3.STENCIL_TEST), this.current = t3, this.dirty = false;
               }
             }, e2;
-          }(j), $ = function(t2) {
+          }(j), $2 = function(t2) {
             function e2() {
               t2.apply(this, arguments);
             }
@@ -11451,7 +11451,7 @@
           };
           Ct.disabled = new Ct(false, 1029, 2305), Ct.backCCW = new Ct(true, 1029, 2305);
           var zt = function(t2) {
-            this.gl = t2, this.extVertexArrayObject = this.gl.getExtension("OES_vertex_array_object"), this.clearColor = new V(this), this.clearDepth = new G(this), this.clearStencil = new W(this), this.colorMask = new X(this), this.depthMask = new H(this), this.stencilMask = new K(this), this.stencilFunc = new Y(this), this.stencilOp = new J(this), this.stencilTest = new Q(this), this.depthRange = new $(this), this.depthTest = new tt(this), this.depthFunc = new et(this), this.blend = new it(this), this.blendFunc = new ot(this), this.blendColor = new rt(this), this.blendEquation = new at(this), this.cullFace = new nt(this), this.cullFaceSide = new st(this), this.frontFace = new lt(this), this.program = new ct(this), this.activeTexture = new ut(this), this.viewport = new ht(this), this.bindFramebuffer = new pt(this), this.bindRenderbuffer = new dt(this), this.bindTexture = new _t(this), this.bindVertexBuffer = new ft(this), this.bindElementBuffer = new mt(this), this.bindVertexArrayOES = this.extVertexArrayObject && new gt(this), this.pixelStoreUnpack = new vt(this), this.pixelStoreUnpackPremultiplyAlpha = new yt(this), this.pixelStoreUnpackFlipY = new xt(this), this.extTextureFilterAnisotropic = t2.getExtension("EXT_texture_filter_anisotropic") || t2.getExtension("MOZ_EXT_texture_filter_anisotropic") || t2.getExtension("WEBKIT_EXT_texture_filter_anisotropic"), this.extTextureFilterAnisotropic && (this.extTextureFilterAnisotropicMax = t2.getParameter(this.extTextureFilterAnisotropic.MAX_TEXTURE_MAX_ANISOTROPY_EXT)), this.extTextureHalfFloat = t2.getExtension("OES_texture_half_float"), this.extTextureHalfFloat && (t2.getExtension("OES_texture_half_float_linear"), this.extRenderToTextureHalfFloat = t2.getExtension("EXT_color_buffer_half_float")), this.extTimerQuery = t2.getExtension("EXT_disjoint_timer_query"), this.maxTextureSize = t2.getParameter(t2.MAX_TEXTURE_SIZE);
+            this.gl = t2, this.extVertexArrayObject = this.gl.getExtension("OES_vertex_array_object"), this.clearColor = new V(this), this.clearDepth = new G(this), this.clearStencil = new W(this), this.colorMask = new X(this), this.depthMask = new H(this), this.stencilMask = new K(this), this.stencilFunc = new Y(this), this.stencilOp = new J(this), this.stencilTest = new Q(this), this.depthRange = new $2(this), this.depthTest = new tt(this), this.depthFunc = new et(this), this.blend = new it(this), this.blendFunc = new ot(this), this.blendColor = new rt(this), this.blendEquation = new at(this), this.cullFace = new nt(this), this.cullFaceSide = new st(this), this.frontFace = new lt(this), this.program = new ct(this), this.activeTexture = new ut(this), this.viewport = new ht(this), this.bindFramebuffer = new pt(this), this.bindRenderbuffer = new dt(this), this.bindTexture = new _t(this), this.bindVertexBuffer = new ft(this), this.bindElementBuffer = new mt(this), this.bindVertexArrayOES = this.extVertexArrayObject && new gt(this), this.pixelStoreUnpack = new vt(this), this.pixelStoreUnpackPremultiplyAlpha = new yt(this), this.pixelStoreUnpackFlipY = new xt(this), this.extTextureFilterAnisotropic = t2.getExtension("EXT_texture_filter_anisotropic") || t2.getExtension("MOZ_EXT_texture_filter_anisotropic") || t2.getExtension("WEBKIT_EXT_texture_filter_anisotropic"), this.extTextureFilterAnisotropic && (this.extTextureFilterAnisotropicMax = t2.getParameter(this.extTextureFilterAnisotropic.MAX_TEXTURE_MAX_ANISOTROPY_EXT)), this.extTextureHalfFloat = t2.getExtension("OES_texture_half_float"), this.extTextureHalfFloat && (t2.getExtension("OES_texture_half_float_linear"), this.extRenderToTextureHalfFloat = t2.getExtension("EXT_color_buffer_half_float")), this.extTimerQuery = t2.getExtension("EXT_disjoint_timer_query"), this.maxTextureSize = t2.getParameter(t2.MAX_TEXTURE_SIZE);
           };
           zt.prototype.setDefault = function() {
             this.unbindVAO(), this.clearColor.setDefault(), this.clearDepth.setDefault(), this.clearStencil.setDefault(), this.colorMask.setDefault(), this.depthMask.setDefault(), this.stencilMask.setDefault(), this.stencilFunc.setDefault(), this.stencilOp.setDefault(), this.stencilTest.setDefault(), this.depthRange.setDefault(), this.depthTest.setDefault(), this.depthFunc.setDefault(), this.blend.setDefault(), this.blendFunc.setDefault(), this.blendColor.setDefault(), this.blendEquation.setDefault(), this.cullFace.setDefault(), this.cullFaceSide.setDefault(), this.frontFace.setDefault(), this.program.setDefault(), this.activeTexture.setDefault(), this.bindFramebuffer.setDefault(), this.pixelStoreUnpack.setDefault(), this.pixelStoreUnpackPremultiplyAlpha.setDefault(), this.pixelStoreUnpackFlipY.setDefault();
@@ -12452,8 +12452,8 @@
                   if (K2 || Y2 ? Y2 ? K2 || (P3 = P3 && T3) : T3 = P3 && T3 : P3 = T3 = P3 && T3, T3 && d3 && d3.box && r2.collisionIndex.insertCollisionBox(d3.box, s2.get("text-ignore-placement"), n2.bucketInstanceId, D3 && D3.box && R2 ? R2 : L2, f2.ID), P3 && M2 && r2.collisionIndex.insertCollisionBox(M2.box, s2.get("icon-ignore-placement"), n2.bucketInstanceId, k2, f2.ID), A3 && (T3 && r2.collisionIndex.insertCollisionCircles(A3.circles, s2.get("text-ignore-placement"), n2.bucketInstanceId, L2, f2.ID), o2)) {
                     var J2 = n2.bucketInstanceId, Q2 = r2.collisionCircleArrays[J2];
                     void 0 === Q2 && (Q2 = r2.collisionCircleArrays[J2] = new me());
-                    for (var $2 = 0; $2 < A3.circles.length; $2 += 4) {
-                      Q2.circles.push(A3.circles[$2 + 0]), Q2.circles.push(A3.circles[$2 + 1]), Q2.circles.push(A3.circles[$2 + 2]), Q2.circles.push(A3.collisionDetected ? 1 : 0);
+                    for (var $3 = 0; $3 < A3.circles.length; $3 += 4) {
+                      Q2.circles.push(A3.circles[$3 + 0]), Q2.circles.push(A3.circles[$3 + 1]), Q2.circles.push(A3.circles[$3 + 2]), Q2.circles.push(A3.collisionDetected ? 1 : 0);
                     }
                   }
                   r2.placements[e3.crossTileID] = new fe(T3 || E2, P3 || I2, S3 || n2.justReloaded), i2[e3.crossTileID] = true;
@@ -13710,15 +13710,15 @@
                   }
                   var V2 = pe(C2, 1, e2.transform.zoom), G2 = Jt(S2.posMatrix, g2, m2, e2.transform, V2), W2 = Qt(S2.posMatrix, g2, m2, e2.transform, V2), X2 = T2 && z2.hasTextData(), H2 = "none" !== o2.layout.get("icon-text-fit") && X2 && z2.hasIconData();
                   v2 && ie(z2, S2.posMatrix, e2, a2, G2, W2, g2, u2);
-                  var K2 = e2.translatePosMatrix(S2.posMatrix, C2, n2, s2), Y2 = v2 || a2 && T2 || H2 ? Ji : G2, J2 = e2.translatePosMatrix(W2, C2, n2, s2, true), Q2 = M2 && 0 !== o2.paint.get(a2 ? "text-halo-width" : "icon-halo-width").constantOr(1), $2 = { program: k2, buffers: D2, uniformValues: M2 ? z2.iconsInText ? Wi(L2.kind, B2, y2, g2, e2, K2, Y2, J2, O2, F2) : Gi(L2.kind, B2, y2, g2, e2, K2, Y2, J2, a2, O2, true) : Vi(L2.kind, B2, y2, g2, e2, K2, Y2, J2, a2, O2), atlasTexture: U2, atlasTextureIcon: Z2, atlasInterpolation: N2, atlasInterpolationIcon: q2, isSDF: M2, hasHalo: Q2 };
+                  var K2 = e2.translatePosMatrix(S2.posMatrix, C2, n2, s2), Y2 = v2 || a2 && T2 || H2 ? Ji : G2, J2 = e2.translatePosMatrix(W2, C2, n2, s2, true), Q2 = M2 && 0 !== o2.paint.get(a2 ? "text-halo-width" : "icon-halo-width").constantOr(1), $3 = { program: k2, buffers: D2, uniformValues: M2 ? z2.iconsInText ? Wi(L2.kind, B2, y2, g2, e2, K2, Y2, J2, O2, F2) : Gi(L2.kind, B2, y2, g2, e2, K2, Y2, J2, a2, O2, true) : Vi(L2.kind, B2, y2, g2, e2, K2, Y2, J2, a2, O2), atlasTexture: U2, atlasTextureIcon: Z2, atlasInterpolation: N2, atlasInterpolationIcon: q2, isSDF: M2, hasHalo: Q2 };
                   if (x2 && z2.canOverlap) {
                     b2 = true;
                     for (var tt2 = 0, et2 = D2.segments.get(); tt2 < et2.length; tt2 += 1) {
                       var it2 = et2[tt2];
-                      E2.push({ segments: new t.SegmentVector([it2]), sortKey: it2.sortKey, state: $2 });
+                      E2.push({ segments: new t.SegmentVector([it2]), sortKey: it2.sortKey, state: $3 });
                     }
                   } else {
-                    E2.push({ segments: D2.segments, sortKey: 0, state: $2 });
+                    E2.push({ segments: D2.segments, sortKey: 0, state: $3 });
                   }
                 }
               }
@@ -19667,35 +19667,52 @@
   var accordion_controller_default = class extends Controller {
     connect() {
       this.initAccordion();
+      this.initDefaultState();
+    }
+    initDefaultState() {
+      const items = this.element.querySelectorAll(".accordion_item");
+      switch ($(this.element).data("default-state")) {
+        case "all_closed":
+          this.hideAll(items);
+          break;
+        case "all_opened":
+          this.showAll(items);
+          break;
+        case "first_opened":
+          this.hideAll(items);
+          this.open(items[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 (item.classList.contains("active")) {
-            this.hide(item);
+          if (content.classList.contains("accordion_active")) {
+            this.hide(content);
           } else {
-            this.hideAll(items);
-            this.open(item);
+            if ($(this.element).data("multiple-open") != true) {
+              this.hideAll(items);
+            }
+            this.open(content);
           }
         });
       });
     }
     hideAll(items) {
-      items.forEach((item) => this.hide(item));
+      items.forEach((item) => this.hide(item.querySelector(".accordion_content")));
+    }
+    showAll(items) {
+      items.forEach((item) => this.open(item.querySelector(".accordion_content")));
     }
     hide(item) {
-      item.classList.remove("active");
-      const content = item.querySelector(".accordion_content");
-      content.style.height = "0px";
+      item.classList.remove("accordion_active");
+      item.style.height = 0;
     }
     open(item) {
-      item.classList.add("active");
-      const content = item.querySelector(".accordion_content");
-      content.style.height = "auto";
-      const contentHeight = content.style.height;
-      content.animate({ height: contentHeight + "px" }, 50);
+      item.classList.add("accordion_active");
+      item.style.height = item.scrollHeight + "px";
     }
   };