Halaman utama Jelajahi Bantuan
Daftar Masuk
oleg
/
alpine
cermin dari https://github.com/alpinejs/alpine.git
1
0
Fork 0
Berkas Masalah 0 Wiki
Jelajahi Sumber

x-collapse: only set overflow:hidden when strictly needed (#2213)

* x-collapse: only set overflow:hidden when strictly needed

* Fix test

* Add manual test

* Fix test

* Update tests/cypress/integration/plugins/collapse.spec.js

Co-authored-by: Simone Todaro <simo.todaro@gmail.com>

* Update tests/cypress/integration/plugins/collapse.spec.js

Co-authored-by: Simone Todaro <simo.todaro@gmail.com>

Co-authored-by: Simone Todaro <simo.todaro@gmail.com>
George Boot 3 tahun lalu
induk
542e9f3a23
melakukan
55aa3cbf04
3 mengubah file dengan 33 tambahan dan 9 penghapusan
Unified View Tampilkan Statistik Diff
  1. 12 4
      packages/collapse/src/index.js
  2. 4 3
      tests/cypress/integration/plugins/collapse.spec.js
  3. 17 2
      tests/cypress/manual-transition-test.html

+ 12 - 4
packages/collapse/src/index.js
Tampilan Berkas 

@@ -3,9 +3,9 @@ export default function (Alpine) {
 
         let duration = modifierValue(modifiers, 'duration', 250) / 1000
 
         let duration = modifierValue(modifiers, 'duration', 250) / 1000
 
         let floor = 0
 
         let floor = 0
 
 
 
-        el.style.overflow = 'hidden'
 
         if (! el._x_isShown) el.style.height = `${floor}px`
 
         if (! el._x_isShown) el.style.height = `${floor}px`
 
         if (! el._x_isShown) el.style.removeProperty('display')
 
         if (! el._x_isShown) el.style.removeProperty('display')
 
+        if (! el._x_isShown) el.style.overflow = 'hidden'
 
 
 
         // Override the setStyles function with one that won't
 
         // Override the setStyles function with one that won't
 
         // revert updates to the height style.
 
         // revert updates to the height style.
 
@@ -27,21 +27,29 @@ export default function (Alpine) {
 
                 let current = el.getBoundingClientRect().height
 
                 let current = el.getBoundingClientRect().height
 
 
 
                 Alpine.setStyles(el, {
 
                 Alpine.setStyles(el, {
 
-                    height: 'auto'
 
+                    height: 'auto',
 
                 })
 
                 })
 
 
 
                 let full = el.getBoundingClientRect().height
 
                 let full = el.getBoundingClientRect().height
 
 
 
+                Alpine.setStyles(el, {
 
+                    overflow: null
 
+                })
 
+
 
                 if (current === full) { current = floor }
 
                 if (current === full) { current = floor }
 
-                
+
 
                 Alpine.transition(el, Alpine.setStyles, {
 
                 Alpine.transition(el, Alpine.setStyles, {
 
                     during: transitionStyles,
 
                     during: transitionStyles,
 
                     start: { height: current+'px' },
 
                     start: { height: current+'px' },
 
                     end: { height: full+'px' },
 
                     end: { height: full+'px' },
 
                 }, () => el._x_isShown = true, () => {})
 
                 }, () => el._x_isShown = true, () => {})
 
             },
 
             },
 
-    
+
 
             out(before = () => {}, after = () => {}) {
 
             out(before = () => {}, after = () => {}) {
 
+                Alpine.setStyles(el, {
 
+                    overflow: 'hidden'
 
+                })
 
+
 
                 let full = el.getBoundingClientRect().height
 
                 let full = el.getBoundingClientRect().height
 
 
 
                 Alpine.transition(el, setFunction, {
 
                 Alpine.transition(el, setFunction, {

+ 4 - 3
tests/cypress/integration/plugins/collapse.spec.js
Tampilan Berkas 

@@ -9,8 +9,9 @@ test('can collapse and expand element',
 
     `],
 
     `],
 
     ({ get }, reload) => {
 
     ({ get }, reload) => {
 
         get('h1').should(haveComputedStyle('height', '0px'))
 
         get('h1').should(haveComputedStyle('height', '0px'))
 
+        get('h1').should(haveAttribute('style', 'height: 0px; overflow: hidden;'))
 
         get('button').click()
 
         get('button').click()
 
-        get('h1').should(haveAttribute('style', 'overflow: hidden; height: auto;'))
 
+        get('h1').should(haveAttribute('style', 'height: auto;'))
 
         get('button').click()
 
         get('button').click()
 
         get('h1').should(haveComputedStyle('height', '0px'))
 
         get('h1').should(haveComputedStyle('height', '0px'))
 
     },
 
     },
 
@@ -27,7 +28,7 @@ test('@click.away with x-collapse (prevent race condition)',
 
     ({ get }) => {
 
     ({ get }) => {
 
         get('h1').should(haveComputedStyle('height', '0px'))
 
         get('h1').should(haveComputedStyle('height', '0px'))
 
         get('button').click()
 
         get('button').click()
 
-        get('h1').should(haveAttribute('style', 'overflow: hidden; height: auto;'))
 
+        get('h1').should(haveAttribute('style', 'height: auto;'))
 
     }
 
     }
 
 )
 
 )
 
 
 
@@ -43,6 +44,6 @@ test('@click.away with x-collapse and borders (prevent race condition)',
 
     ({ get }) => {
 
     ({ get }) => {
 
         get('h1').should(haveComputedStyle('height', '0px'))
 
         get('h1').should(haveComputedStyle('height', '0px'))
 
         get('button').click()
 
         get('button').click()
 
-        get('h1').should(haveAttribute('style', 'overflow: hidden; height: auto;'))
 
+        get('h1').should(haveAttribute('style', 'height: auto;'))
 
     }
 
     }
 
 )
 
 )

+ 17 - 2
tests/cypress/manual-transition-test.html
Tampilan Berkas 

@@ -1,4 +1,5 @@
 
 <html>
 
 <html>
 
+    <script src="/../../packages/collapse/dist/cdn.js" defer></script>
 
     <script src="/../../packages/alpinejs/dist/cdn.js" defer></script>
 
     <script src="/../../packages/alpinejs/dist/cdn.js" defer></script>
 
     <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
 
     <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
 
 
 
@@ -8,9 +9,9 @@
 
             <td>
 
             <td>
 
                 <div x-data="{ show: false }">
 
                 <div x-data="{ show: false }">
 
                     <button @click="show = true">Show</button>
 
                     <button @click="show = true">Show</button>
 
-                  
+
 
                     <h1 x-show="show" @click.away="show = false">h1</h1>
 
                     <h1 x-show="show" @click.away="show = false">h1</h1>
 
-                  
+
 
                     <h2>h2</h2>
 
                     <h2>h2</h2>
 
                   </div>
 
                   </div>
 
                 </div>
 
                 </div>
 
@@ -153,5 +154,19 @@
 
                 </div>
 
                 </div>
 
             </td>
 
             </td>
 
         </tr>
 
         </tr>
 
+
 
+        <tr>
 
+            <td><code>x-collapse with no overflow hidden when expanded</code></td>
 
+            <td>
 
+                <div x-data="{ show: false }">
 
+                    <button @click="show = !show">Show</button>
 
+
 
+                    <div x-show="show" x-collapse>
 
+                        <div class="ring-2 ring-offset-2 ring-red-400">my red ring should be fully visible</div>
 
+                    </div>
 
+                  </div>
 
+                </div>
 
+            </td>
 
+        </tr>
 
     </table>
 
     </table>
 
 </html>
 
 </html>