Add support for [x-sort:handle] attributes defined in template tags

alpinejs · Dec 22, 2024 · f9addca · f9addca
1 parent 36110b6
commit f9addca
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/packages/sort/src/index.js b/packages/sort/src/index.js
@@ -25,7 +25,9 @@ export default function (Alpine) {
 
         let preferences = {
             hideGhost: ! modifiers.includes('ghost'),
-            useHandles: !! el.querySelector('[x-sort\\:handle]'),
+            useHandles: (!! el.querySelector('[x-sort\\:handle]')) || Array.from(el.querySelectorAll('template')).some(
+                tmpl => !! tmpl.content.querySelector('[x-sort\\:handle]')
+            ),
             group: getGroupName(el, modifiers),
         }
 

diff --git a/tests/cypress/integration/plugins/sort.spec.js b/tests/cypress/integration/plugins/sort.spec.js
@@ -49,13 +49,44 @@ test.skip('can use a custom handle',
         get('ul li').eq(0).should(haveText('handle - foo'))
         get('ul li').eq(1).should(haveText('handle - bar'))
 
+        get('#1').drag('#2').then(() => {
+            get('ul li').eq(0).should(haveText('handle - foo'))
+            get('ul li').eq(1).should(haveText('handle - bar'))
+        })
+
         get('#1 span').drag('#2').then(() => {
             get('ul li').eq(0).should(haveText('handle - bar'))
             get('ul li').eq(1).should(haveText('handle - foo'))
         })
     },
 )
 
+test('can use a custom handle with x-for',
+    [html`
+        <div x-data="{items: ['1', '2']}">
+            <ul x-sort>
+                <template x-for="item in items" :key="item">
+                    <li :id="item"><span x-sort:handle>handle</span> - <span x-text="item"></span></li>
+                </template>
+            </ul>
+        </div>
+    `],
+    ({ get }) => {
+        get('ul li').eq(0).should(haveText('handle - 1'))
+        get('ul li').eq(1).should(haveText('handle - 2'))
+
+        get('#1').drag('#2').then(() => {
+            get('ul li').eq(0).should(haveText('handle - 1'))
+            get('ul li').eq(1).should(haveText('handle - 2'))
+        })
+
+        get('#1 span').eq(0).drag('#2').then(() => {
+            get('ul li').eq(0).should(haveText('handle - 2'))
+            get('ul li').eq(1).should(haveText('handle - 1'))
+        })
+    },
+)
+
 test.skip('can move items between groups',
     [html`
         <div x-data>