@alpinejs/docs 3.13.9-revision.1 → 3.13.10-revision.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alpinejs/docs",
-    "version": "3.13.9-revision.1",
+    "version": "3.13.10-revision.2",
     "description": "The documentation for Alpine",
     "author": "Caleb Porzio",
     "license": "MIT"

package/src/en/directives/on.md

@@ -89,6 +89,7 @@ For easy reference, here is a list of common keys you may want to listen for.
 | `.caps-lock`                | Caps Lock                   |
 | `.equal`                    | Equal, `=`                  |
 | `.period`                   | Period, `.`                 |
+| `.comma`                    | Comma, `,`                  |
 | `.slash`                    | Forward Slash, `/`           |
 
 <a name="custom-events"></a>

package/src/en/essentials/installation.md

@@ -33,7 +33,7 @@ This is by far the simplest way to get started with Alpine. Include the followin
 Notice the `@3.x.x` in the provided CDN link. This will pull the latest version of Alpine version 3. For stability in production, it's recommended that you hardcode the latest version in the CDN link.
 
 ```alpine
-<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.9/dist/cdn.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.10/dist/cdn.min.js"></script>
 ```
 
 That's it! Alpine is now available for use inside your page.

package/src/en/plugins/sort.md

@@ -32,7 +32,7 @@ You can include the CDN build of this plugin as a `<script>` tag; just make sure
 
 ### Via NPM
 
-You can install Anchor from NPM for use inside your bundle like so:
+You can install Sort from NPM for use inside your bundle like so:
 
 ```shell
 npm install @alpinejs/sort
@@ -65,9 +65,9 @@ The primary API for using this plugin is the `x-sort` directive. By adding `x-so
 <!-- START_VERBATIM -->
 <div x-data>
     <ul x-sort>
-        <li x-sort:item>foo</li>
-        <li x-sort:item>bar</li>
-        <li x-sort:item>baz</li>
+        <li x-sort:item class="cursor-pointer">foo</li>
+        <li x-sort:item class="cursor-pointer">bar</li>
+        <li x-sort:item class="cursor-pointer">baz</li>
     </ul>
 </div>
 <!-- END_VERBATIM -->
@@ -88,9 +88,9 @@ You can react to sorting changes by passing a handler function to `x-sort` and a
 <!-- START_VERBATIM -->
 <div x-data>
     <ul x-sort="alert($item + ' - ' + $position)">
-        <li x-sort:item="1">foo</li>
-        <li x-sort:item="2">bar</li>
-        <li x-sort:item="3">baz</li>
+        <li x-sort:item="1" class="cursor-pointer">foo</li>
+        <li x-sort:item="2" class="cursor-pointer">bar</li>
+        <li x-sort:item="3" class="cursor-pointer">baz</li>
     </ul>
 </div>
 <!-- END_VERBATIM -->
@@ -161,13 +161,13 @@ By default, each `x-sort:item` element is draggable by clicking and dragging any
 <div x-data>
     <ul x-sort>
         <li x-sort:item>
-            <span x-sort:handle> - </span>foo
+            <span x-sort:handle class="cursor-pointer"> - </span>foo
         </li>
         <li x-sort:item>
-            <span x-sort:handle> - </span>bar
+            <span x-sort:handle class="cursor-pointer"> - </span>bar
         </li>
         <li x-sort:item>
-            <span x-sort:handle> - </span>baz
+            <span x-sort:handle class="cursor-pointer"> - </span>baz
         </li>
     </ul>
 </div>
@@ -195,9 +195,9 @@ If you would like to show a "ghost" of the original element in its place instead
 <!-- START_VERBATIM -->
 <div x-data>
     <ul x-sort.ghost>
-        <li x-sort:item>foo</li>
-        <li x-sort:item>bar</li>
-        <li x-sort:item>baz</li>
+        <li x-sort:item class="cursor-pointer">foo</li>
+        <li x-sort:item class="cursor-pointer">bar</li>
+        <li x-sort:item class="cursor-pointer">baz</li>
     </ul>
 </div>
 <!-- END_VERBATIM -->
@@ -226,9 +226,9 @@ This makes it easy to add any custom styling you would like:
 <!-- START_VERBATIM -->
 <div x-data>
     <ul x-sort.ghost x-sort:config="{ ghostClass: 'opacity-50' }">
-        <li x-sort:item>foo</li>
-        <li x-sort:item>bar</li>
-        <li x-sort:item>baz</li>
+        <li x-sort:item class="cursor-pointer">foo</li>
+        <li x-sort:item class="cursor-pointer">bar</li>
+        <li x-sort:item class="cursor-pointer">baz</li>
     </ul>
 </div>
 <!-- END_VERBATIM -->
@@ -280,9 +280,9 @@ If you drag one of the elements in the list below you will see that the hover ef
 <!-- START_VERBATIM -->
 <div x-data>
     <ul x-sort class="flex flex-col items-start">
-        <li x-sort:item class="hover:border border-black">foo</li>
-        <li x-sort:item class="hover:border border-black">bar</li>
-        <li x-sort:item class="hover:border border-black">baz</li>
+        <li x-sort:item class="hover:border border-black cursor-pointer">foo</li>
+        <li x-sort:item class="hover:border border-black cursor-pointer">bar</li>
+        <li x-sort:item class="hover:border border-black cursor-pointer">baz</li>
     </ul>
 </div>
 <!-- END_VERBATIM -->
@@ -304,9 +304,9 @@ Now you can see below that the hover effect is only applied to the dragging elem
 <!-- START_VERBATIM -->
 <div x-data>
     <ul x-sort class="flex flex-col items-start">
-        <li x-sort:item class="[body:not(.sorting)_&]:hover:border border-black">foo</li>
-        <li x-sort:item class="[body:not(.sorting)_&]:hover:border border-black">bar</li>
-        <li x-sort:item class="[body:not(.sorting)_&]:hover:border border-black">baz</li>
+        <li x-sort:item class="[body:not(.sorting)_&]:hover:border border-black cursor-pointer">foo</li>
+        <li x-sort:item class="[body:not(.sorting)_&]:hover:border border-black cursor-pointer">bar</li>
+        <li x-sort:item class="[body:not(.sorting)_&]:hover:border border-black cursor-pointer">baz</li>
     </ul>
 </div>
 <!-- END_VERBATIM -->
@@ -327,9 +327,9 @@ Alpine chooses sensible defaults for configuring [SortableJS](https://github.com
 <!-- START_VERBATIM -->
 <div x-data>
     <ul x-sort x-sort:config="{ animation: 0 }">
-        <li x-sort:item>foo</li>
-        <li x-sort:item>bar</li>
-        <li x-sort:item>baz</li>
+        <li x-sort:item class="cursor-pointer">foo</li>
+        <li x-sort:item class="cursor-pointer">bar</li>
+        <li x-sort:item class="cursor-pointer">baz</li>
     </ul>
 </div>
 <!-- END_VERBATIM -->