Add .threshold modifier to x-intersect

packages/intersect/src/index.js

@@ -29,8 +29,14 @@ export default function (Alpine) {
 function getThreshhold(modifiers) {
     if (modifiers.includes('full')) return 0.99
     if (modifiers.includes('half')) return 0.5
+    if (! modifiers.includes('threshold')) return 0
 
-    return 0
+    let threshhold = modifiers[modifiers.indexOf('threshold') + 1]
+
+    if (threshhold === '1') return 1
+    if (threshhold === '0') return 0
+
+    return Number(`.${threshhold}`)
 }
 
 export function getLengthValue(rawValue) {

tests/cypress/integration/plugins/intersect.spec.js

@@ -124,7 +124,7 @@ test('.once',
     },
 )
 
-test('.margin.100px',
+test('.margin',
     [html`
     <div x-data="{ count: 0 }">
         <span x-text="count"></span>
@@ -147,3 +147,24 @@ test('.margin.100px',
         get('span').should(haveText('2'))
     },
 )
+
+test('.threshold',
+    [html`
+    <div x-data="{ count: 0 }">
+        <div x-ref="foo" style="width: 250px; overflow: scroll; display: flex; justify-content: start">
+            <div style="min-width: 250px;">first</div>
+            <div style="min-width: 250px" x-intersect.threshold.50="count++;">second</div>
+        </div>
+        <button @click="$refs.foo.scrollTo({ left: 15 })" id="1">first</button>
+        <button @click="$refs.foo.scrollTo({ left: 250 })" id="2">second</button>
+        <span x-text="count"></span>
+    </div>
+    `],
+    ({ get }) => {
+        get('span').should(haveText('0'))
+        get('#1').click()
+        get('span').should(haveText('0'))
+        get('#2').click()
+        get('span').should(haveText('1'))
+    },
+)