@alpinejs/docs 3.13.3-revision.2 → 3.13.4-revision.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
package/src/en/advanced/csp.md
CHANGED
|
@@ -46,7 +46,7 @@ Alpine.start()
|
|
|
46
46
|
<a name="basic-example"></a>
|
|
47
47
|
## Basic Example
|
|
48
48
|
|
|
49
|
-
To provide a glimpse of how using the CSP build might feel, here is a copy-pastable HTML file with a working counter
|
|
49
|
+
To provide a glimpse of how using the CSP build might feel, here is a copy-pastable HTML file with a working counter component using a common CSP setup:
|
|
50
50
|
|
|
51
51
|
```alpine
|
|
52
52
|
<html>
|
|
@@ -58,7 +58,7 @@ To provide a glimpse of how using the CSP build might feel, here is a copy-pasta
|
|
|
58
58
|
|
|
59
59
|
<body>
|
|
60
60
|
<div x-data="counter">
|
|
61
|
-
<button x-on:click="
|
|
61
|
+
<button x-on:click="increment"></button>
|
|
62
62
|
|
|
63
63
|
<span x-text="count"></span>
|
|
64
64
|
</div>
|
|
@@ -33,7 +33,7 @@ This is by far the simplest way to get started with Alpine. Include the followin
|
|
|
33
33
|
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.
|
|
34
34
|
|
|
35
35
|
```alpine
|
|
36
|
-
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.
|
|
36
|
+
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.4/dist/cdn.min.js"></script>
|
|
37
37
|
```
|
|
38
38
|
|
|
39
39
|
That's it! Alpine is now available for use inside your page.
|
|
@@ -37,7 +37,7 @@ As you can see we've extracted the properties and methods we would usually defin
|
|
|
37
37
|
If you've chosen to use a build step for your Alpine code, you should register your components in the following way:
|
|
38
38
|
|
|
39
39
|
```js
|
|
40
|
-
import Alpine from
|
|
40
|
+
import Alpine from 'alpinejs'
|
|
41
41
|
import dropdown from './dropdown.js'
|
|
42
42
|
|
|
43
43
|
Alpine.data('dropdown', dropdown)
|
package/src/en/plugins/anchor.md
CHANGED
|
@@ -192,7 +192,7 @@ Because `x-anchor` accepts a reference to any DOM element, you can use utilities
|
|
|
192
192
|
<div x-data="{ open: false }">
|
|
193
193
|
<button id="trigger" @click="open = ! open">Toggle</button>
|
|
194
194
|
|
|
195
|
-
<div x-show="open" x-anchor="document.getElementById('
|
|
195
|
+
<div x-show="open" x-anchor="document.getElementById('trigger')">
|
|
196
196
|
Dropdown content
|
|
197
197
|
</div>
|
|
198
198
|
</div>
|
package/src/en/plugins/focus.md
CHANGED
|
@@ -301,6 +301,13 @@ For example:
|
|
|
301
301
|
</div>
|
|
302
302
|
<!-- END_VERBATIM -->
|
|
303
303
|
|
|
304
|
+
<a name="noautofocus"></a>
|
|
305
|
+
#### .noautofocus
|
|
306
|
+
|
|
307
|
+
By default, when `x-trap` traps focous within an element, it focuses the first focussable element within that element. This is a sensible default, however there are times where you may want to disable this behavior and not automatically focus any elements when `x-trap` engages.
|
|
308
|
+
|
|
309
|
+
By adding `.noautofocus`, Alpine will not automatically focus any elements when trapping focus.
|
|
310
|
+
|
|
304
311
|
<a name="focus-magic"></a>
|
|
305
312
|
## $focus
|
|
306
313
|
|