https://bayjs.org/assets/accordion-0877eeb0.js

1const t=`<bay-accordion bay="#bay-accordion" title="expand 1">\r
2  <p :style="padding: 1rem;">\r
3    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur rerum dolor mollitia\r
4    itaque explicabo, corporis iure qui magni suscipit. Corrupti, sit. Odit, dolore itaque\r
5    architecto fugit cum animi repudiandae molestias!\r
6  </p>\r
7</bay-accordion>\r
8\r
9<bay-accordion bay="#bay-accordion" title="expand 2">\r
10  <p :style="padding: 1rem;">\r
11    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur rerum dolor mollitia\r
12    itaque explicabo, corporis iure qui magni suscipit. Corrupti, sit. Odit, dolore itaque\r
13    architecto fugit cum animi repudiandae molestias!\r
14  </p>\r
15</bay-accordion>\r
16\r
17<bay-accordion bay="#bay-accordion" title="expand 3">\r
18  <p :style="padding: 1rem;">\r
19    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur rerum dolor mollitia\r
20    itaque explicabo, corporis iure qui magni suscipit. Corrupti, sit. Odit, dolore itaque\r
21    architecto fugit cum animi repudiandae molestias!\r
22  </p>\r
23</bay-accordion>\r
24\r
25<template id="bay-accordion">\r
26  <button :click="this.expand = !this.expand">\${this.title}</button>\r
27  <bay-slide bay="#bay-slide" open="\${this.expand}" transition=".5s">\r
28    \${$el.innerHTML}\r
29  </bay-slide>\r
30  <script>\r
31    this.title = this.title || 'no title set';\r
32  <\/script>\r
33</template>\r
34\r
35<template id="bay-slide">\r
36  <div \r
37    id="container-content"\r
38    :style="\r
39      overflow: hidden;\r
40      height: \${this.container_content_height};\r
41      transition: height \${this.transition || '.25s ease'};"\r
42    :transitionend="this.transition_end()">\r
43    <slot></slot>\r
44  </div>\r
45  <script>\r
46    this.container_content_height = 0;\r
47    this.slide = (open) => {\r
48      let element = $bay.querySelector('#container-content');\r
49      let now_height = element.getBoundingClientRect().height;\r
50      let height = 0;\r
51      if (open === 'true') {\r
52        element.style.height = 'auto';\r
53        height = element.getBoundingClientRect().height;\r
54      }\r
55      element.style.height = now_height + 'px';\r
56      this.container_content_height = height + 'px';\r
57    };\r
58    this.transition_end = () => {\r
59      if (this.open === 'true') {\r
60        this.container_content_height = 'auto';\r
61      }\r
62    }\r
63  <\/script>\r
64  <script props>\r
65    this.slide(this.open);\r
66  <\/script>\r
67  <script mounted>\r
68    if (this.open === 'true') {\r
69      this.container_content_height = 'auto';\r
70    } else if (this.open === 'false') {\r
71      this.container_content_height = '0px';\r
72    }\r
73  <\/script>\r
74</template>`;export{t as default};