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

package/package.json

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

package/src/en/advanced/csp.md

@@ -118,3 +118,26 @@ Alpine.data('counter', () => ({
     },
 }))
 ```
+
+The CSP build supports accessing nested properties (property accessors) using the dot notation.
+
+```alpine
+<!-- This works too -->
+<div x-data="counter">
+    <button @click="foo.increment">Increment</button>
+
+    <span x-text="foo.count"></span>
+</div>
+```
+
+```js
+Alpine.data('counter', () => ({
+    foo: {
+        count: 1,
+
+        increment() {
+            this.count++
+        },
+    },
+}))
+```

package/src/en/directives/for.md

@@ -51,7 +51,7 @@ You may also pass objects to `x-for`.
 
 There are two rules worth noting about `x-for`:
 
->`x-for` MUST be declared on a `<template>` element
+>`x-for` MUST be declared on a `<template>` element.
 > That `<template>` element MUST contain only one root element
 
 <a name="keys"></a>

package/src/en/directives/on.md

@@ -13,7 +13,7 @@ Here's an example of simple button that shows an alert when clicked.
 <button x-on:click="alert('Hello World!')">Say Hi</button>
 ```
 
-> `x-on` can only listen for events with lower case names, as HTML attributes are case-insensitive. Writing `x-on:CLICK` will listen for an event named `click`. If you need to listen for a custom event with a camelCase name, you can use the [`.camel` helper](#camel) to work around this limitation. Alternatively, you can use  [`x-bind`](/directives/bind#bind-directives) to attach an `x-on` directive to an element in javascript code (where case will be preserved).
+> `x-on` can only listen for events with lower case names, as HTML attributes are case-insensitive. Writing `x-on:CLICK` will listen for an event named `click`. If you need to listen for a custom event with a camelCase name, you can use the [`.camel` helper](#camel) to work around this limitation. Alternatively, you can use [`x-bind`](/directives/bind#bind-directives) to attach an `x-on` directive to an element in javascript code (where case will be preserved).
 
 <a name="shorthand-syntax"></a>
 ## Shorthand syntax
@@ -74,23 +74,64 @@ You can directly use any valid key names exposed via [`KeyboardEvent.key`](https
 
 For easy reference, here is a list of common keys you may want to listen for.
 
-| Modifier                   | Keyboard Key                |
-| -------------------------- | --------------------------- |
-| `.shift`                    | Shift                       |
-| `.enter`                    | Enter                       |
-| `.space`                    | Space                       |
-| `.ctrl`                     | Ctrl                        |
-| `.cmd`                      | Cmd                         |
-| `.meta`                     | Cmd on Mac, Windows key on Windows |
-| `.alt`                      | Alt                         |
-| `.up` `.down` `.left` `.right` | Up/Down/Left/Right arrows   |
-| `.escape`                   | Escape                      |
-| `.tab`                      | Tab                         |
-| `.caps-lock`                | Caps Lock                   |
-| `.equal`                    | Equal, `=`                  |
-| `.period`                   | Period, `.`                 |
-| `.comma`                    | Comma, `,`                  |
-| `.slash`                    | Forward Slash, `/`           |
+| Modifier                       | Keyboard Key                       |
+| ------------------------------ | ---------------------------------- |
+| `.shift`                       | Shift                              |
+| `.enter`                       | Enter                              |
+| `.space`                       | Space                              |
+| `.ctrl`                        | Ctrl                               |
+| `.cmd`                         | Cmd                                |
+| `.meta`                        | Cmd on Mac, Windows key on Windows |
+| `.alt`                         | Alt                                |
+| `.up` `.down` `.left` `.right` | Up/Down/Left/Right arrows          |
+| `.escape`                      | Escape                             |
+| `.tab`                         | Tab                                |
+| `.caps-lock`                   | Caps Lock                          |
+| `.equal`                       | Equal, `=`                         |
+| `.period`                      | Period, `.`                        |
+| `.comma`                       | Comma, `,`                         |
+| `.slash`                       | Forward Slash, `/`                 |
+
+<a name="mouse-events"></a>
+## Mouse events
+
+Like the above Keyboard Events, Alpine allows the use of some key modifiers for handling `click` events.
+
+| Modifier | Event Key |
+| -------- | --------- |
+| `.shift` | shiftKey  |
+| `.ctrl`  | ctrlKey   |
+| `.cmd`   | metaKey   |
+| `.meta`  | metaKey   |
+| `.alt`   | altKey    |
+
+These work on `click`, `auxclick`, `context` and `dblclick` events, and even `mouseover`, `mousemove`, `mouseenter`, `mouseleave`, `mouseout`, `mouseup` and `mousedown`.
+
+Here's an example of a button that changes behaviour when the `Shift` key is held down.
+
+```alpine
+<button type="button"
+    @click="message = 'selected'"
+    @click.shift="message = 'added to selection'">
+    @mousemove.shift="message = 'add to selection'"
+    @mouseout="message = 'select'"
+    x-text="message"></button>
+```
+
+<!-- START_VERBATIM -->
+<div class="demo">
+    <div x-data="{ message: '' }">
+        <button type="button"
+            @click="message = 'selected'"
+            @click.shift="message = 'added to selection'"
+            @mousemove.shift="message = 'add to selection'"
+            @mouseout="message = 'select'"
+            x-text="message"></button>
+    </div>
+</div>
+<!-- END_VERBATIM -->
+
+> Note: Normal click events with some modifiers (like `ctrl`) will automatically become `contextmenu` events in most browsers. Similarly, `right-click` events will trigger a `contextmenu` event, but will also trigger an `auxclick` event if the `contextmenu` event is prevented.
 
 <a name="custom-events"></a>
 ## Custom events
@@ -311,4 +352,3 @@ Add this modifier if you want to execute this listener in the event's capturing
 ```
 
 [→ Read more about the capturing and bubbling phase of events](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#usecapture)
-

package/src/en/directives/transition.md

@@ -21,9 +21,9 @@ The simplest way to achieve a transition using Alpine is by adding `x-transition
 <div x-data="{ open: false }">
     <button @click="open = ! open">Toggle</button>
 
-    <span x-show="open" x-transition>
+    <div x-show="open" x-transition>
         Hello 👋
-    </span>
+    </div>
 </div>
 ```
 
@@ -32,9 +32,9 @@ The simplest way to achieve a transition using Alpine is by adding `x-transition
     <div x-data="{ open: false }">
         <button @click="open = ! open">Toggle</button>
 
-        <span x-show="open" x-transition>
+        <div x-show="open" x-transition>
             Hello 👋
-        </span>
+        </div>
     </div>
 </div>
 <!-- END_VERBATIM -->

package/src/en/essentials/installation.md

@@ -33,11 +33,13 @@ 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.10/dist/cdn.min.js"></script>
+<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
 ```
 
 That's it! Alpine is now available for use inside your page.
 
+Note that you will still need to define a component with `x-data` in order for any Alpine.js attributes to work. See <https://github.com/alpinejs/alpine/discussions/3805> for more information.
+
 <a name="as-a-module"></a>
 ## As a module
 

package/src/en/start-here.md

@@ -96,14 +96,14 @@ When a `click` event happens, Alpine will call the associated JavaScript express
 ### Reacting to changes
 
 ```alpine
-<h1 x-text="count"></h1>
+<span x-text="count"></span>
 ```
 
 `x-text` is an Alpine directive you can use to set the text content of an element to the result of a JavaScript expression.
 
-In this case, we're telling Alpine to always make sure that the contents of this `h1` tag reflect the value of the `count` property.
+In this case, we're telling Alpine to always make sure that the contents of this `span` tag reflect the value of the `count` property.
 
-In case it's not clear, `x-text`, like most directives accepts a plain JavaScript expression as an argument. So for example, you could instead set its contents to: `x-text="count * 2"` and the text content of the `h1` will now always be 2 times the value of `count`.
+In case it's not clear, `x-text`, like most directives accepts a plain JavaScript expression as an argument. So for example, you could instead set its contents to: `x-text="count * 2"` and the text content of the `span` will now always be 2 times the value of `count`.
 
 [→ Read more about `x-text`](/directives/text)