@alpinejs/docs 3.10.1-revision.1 → 3.10.3-revision.1

package/package.json

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

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.md#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
@@ -81,7 +81,7 @@ For easy reference, here is a list of common keys you may want to listen for.
 | `.space`                    | Space                       |
 | `.ctrl`                     | Ctrl                        |
 | `.cmd`                      | Cmd                         |
-| `.meta`                     | Cmd on Mac, Ctrl on Windows |
+| `.meta`                     | Cmd on Mac, Windows key on Windows |
 | `.alt`                      | Alt                         |
 | `.up` `.down` `.left` `.right` | Up/Down/Left/Right arrows   |
 | `.escape`                   | Escape                      |

package/src/en/directives/show.md

@@ -37,3 +37,20 @@ If you want to apply smooth transitions to the `x-show` behavior, you can use it
     </div>
 </div>
 ```
+
+<a name="using-the-important-modifier"></a>
+## Using the important modifier
+
+Sometimes you need to apply a little more force to actually hide an element. In cases where a CSS selector applies the `display` property with the `!important` flag, it will take precedence over the inline style set by Alpine.
+
+In these cases you may use the `.important` modifier to set the inline style to `display: none !important`.
+
+```alpine
+<div x-data="{ open: false }">
+    <button x-on:click="open = ! open">Toggle Dropdown</button>
+
+    <div x-show.important="open">
+        Dropdown Contents...
+    </div>
+</div>
+```

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://unpkg.com/alpinejs@3.10.1/dist/cdn.min.js"></script>
+<script defer src="https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js"></script>
 ```
 
 That's it! Alpine is now available for use inside your page.

package/src/en/magics/store.md

@@ -6,7 +6,7 @@ title: store
 
 # $store
 
-You can use `$store` to conveniently access global Alpine stores registered using [`Alpine.store(...)`](/magics/store). For example:
+You can use `$store` to conveniently access global Alpine stores registered using [`Alpine.store(...)`](/globals/alpine-store). For example:
 
 ```alpine
 <button x-data @click="$store.darkMode.toggle()">Toggle Dark Mode</button>

package/src/en/plugins/focus.md

@@ -280,7 +280,7 @@ For example:
 <!-- START_VERBATIM -->
 <div class="demo">
     <div
-        x-data="{ open: false }" 
+        x-data="{ open: false }"
         x-trap.noreturn="open"
         @click.outside="open = false"
         @keyup.escape.prevent.stop="open = false"
@@ -345,9 +345,9 @@ Let's walk through a few examples of these utilities in use. The example below a
     @keydown.right="$focus.next()"
     @keydown.left="$focus.previous()"
 >
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">First</button>
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Second</button>
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Third</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">First</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Second</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Third</button>
 </div>
 (Click a button, then use the arrow keys to move left and right)
 </div>
@@ -373,9 +373,9 @@ Notice how if the last button is focused, pressing "right arrow" won't do anythi
     @keydown.right="$focus.wrap().next()"
     @keydown.left="$focus.wrap().previous()"
 >
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">First</button>
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Second</button>
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Third</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">First</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Second</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Third</button>
 </div>
 (Click a button, then use the arrow keys to move left and right)
 </div>
@@ -410,9 +410,9 @@ Now, let's add two buttons, one to focus the first element in the button group,
     @keydown.right="$focus.wrap().next()"
     @keydown.left="$focus.wrap().previous()"
 >
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">First</button>
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Second</button>
-    <button class="focus:outline-none focus:ring-2 focus:ring-aqua-400">Third</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">First</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Second</button>
+    <button class="focus:outline-none focus:ring-2 focus:ring-cyan-400">Third</button>
 </div>
 </div>
 <!-- END_VERBATIM -->

package/src/en/plugins/mask.md

@@ -54,7 +54,7 @@ Alpine.plugin(mask)
 
 </div>
 </div>
-<button :aria-expanded="expanded" @click="expanded = ! expanded" class="text-aqua-600 font-medium underline">
+<button :aria-expanded="expanded" @click="expanded = ! expanded" class="text-cyan-600 font-medium underline">
     <span x-text="expanded ? 'Hide' : 'Show more'">Show</span> <span x-text="expanded ? '↑' : '↓'">↓</span>
 </button>
  </div>
@@ -87,57 +87,71 @@ The following wildcard characters are supported in masks:
 | `9` | Only numeric characters (0-9) |
 
 <a name="mask-functions"></a>
-## Custom Mask Functions
+## Dynamic Masks
 
-Sometimes simple mask literals (i.e. `(999) 999-9999`) are not sufficient. In these cases, `x-mask:function` allows you to dynamically generate masks on the fly based on user input.
+Sometimes simple mask literals (i.e. `(999) 999-9999`) are not sufficient. In these cases, `x-mask:dynamic` allows you to dynamically generate masks on the fly based on user input.
 
 Here's an example of a credit card input that needs to change it's mask based on if the number starts with the numbers "34" or "37" (which means it's an Amex card and therefore has a different format).
 
 ```alpine
-<input x-mask:function="
+<input x-mask:dynamic="
     $input.startsWith('34') || $input.startsWith('37')
         ? '9999 999999 99999' : '9999 9999 9999 9999'
 ">
 ```
 
-As you can see in the above example, every time a user types in the input, that value is passed to the function as `$input`. Based on the `$input`, a different mask is utilized in the field.
+As you can see in the above example, every time a user types in the input, that value is passed to the expression as `$input`. Based on the `$input`, a different mask is utilized in the field.
 
 Try it for yourself by typing a number that starts with "34" and one that doesn't.
 
 <!-- START_VERBATIM -->
 <div class="demo">
-    <input x-data x-mask:function="
+    <input x-data x-mask:dynamic="
         $input.startsWith('34') || $input.startsWith('37')
             ? '9999 999999 99999' : '9999 9999 9999 9999'
     ">
 </div>
 <!-- END_VERBATIM -->
 
+`x-mask:dynamic` also accepts a function as a result of the expression and will automatically pass it the `$input` as the the first paramter. For example:
+
+```alpine
+<input x-mask:dynamic="creditCardMask">
+
+<script>
+function creditCardMask(input) {
+    return input.startsWith('34') || input.startsWith('37')
+        ? '9999 999999 99999'
+        : '9999 9999 9999 9999'
+}
+</script>
+```
+
 <a name="money-inputs"></a>
 ## Money Inputs
 
-Because writing your own custom mask function for money inputs is fairly complex, Alpine offers a prebuilt one and makes it available as `$money()`.
+Because writing your own dynamic mask expression for money inputs is fairly complex, Alpine offers a prebuilt one and makes it available as `$money()`.
 
 Here is a fully functioning money input mask:
 
 ```alpine
-<input x-mask:function="$money($input)">
+<input x-mask:dynamic="$money($input)">
 ```
 
 <!-- START_VERBATIM -->
 <div class="demo" x-data>
-    <input type="text" x-mask:function="$money($input)" placeholder="0.00">
+    <input type="text" x-mask:dynamic="$money($input)" placeholder="0.00">
 </div>
 <!-- END_VERBATIM -->
 
 If you wish to swap the periods for commas and vice versa (as is required in certain currencies), you can do so using the second optional parameter:
 
 ```alpine
-<input x-mask:function="$money($input, ',')">
+<input x-mask:dynamic="$money($input, ',')">
 ```
 
 <!-- START_VERBATIM -->
 <div class="demo" x-data>
-    <input type="text" x-mask:function="$money($input, ',')"  placeholder="0.00">
+    <input type="text" x-mask:dynamic="$money($input, ',')"  placeholder="0,00">
 </div>
 <!-- END_VERBATIM -->

package/src/en/plugins/morph.md

@@ -21,10 +21,10 @@ The best way to understand its purpose is with the following interactive visuali
 
     <div class="flex w-full justify-between" style="padding-bottom: 1rem">
         <div class="w-1/2 px-4">
-            <button @click="slide = (slide === 1) ? 13 : slide - 1" class="w-full bg-aqua-400 rounded-full text-center py-3 font-bold text-white">Previous</button>
+            <button @click="slide = (slide === 1) ? 13 : slide - 1" class="w-full bg-cyan-400 rounded-full text-center py-3 font-bold text-white">Previous</button>
         </div>
         <div class="w-1/2 px-4">
-            <button @click="slide = (slide % 13) + 1" class="w-full bg-aqua-400 rounded-full text-center py-3 font-bold text-white">Next</button>
+            <button @click="slide = (slide % 13) + 1" class="w-full bg-cyan-400 rounded-full text-center py-3 font-bold text-white">Next</button>
         </div>
     </div>
 </div>
@@ -82,8 +82,8 @@ Here's an example of using `Alpine.morph()` to update an Alpine component with n
 
 ```alpine
 <div x-data="{ message: 'Change me, then press the button!' }">
-    <input type="text" x-model="message"> 
-    <span x-text="message"></span> 
+    <input type="text" x-model="message">
+    <span x-text="message"></span>
 </div>
 
 <button>Run Morph</button>
@@ -95,9 +95,9 @@ Here's an example of using `Alpine.morph()` to update an Alpine component with n
         Alpine.morph(el, `
             <div x-data="{ message: 'Change me, then press the button!' }">
                 <h2>See how new elements have been added</h2>
-                
-                <input type="text" x-model="message"> 
-                <span x-text="message"></span> 
+
+                <input type="text" x-model="message">
+                <span x-text="message"></span>
 
                 <h2>but the state of this component hasn't changed? Magical.</h2>
             </div>
@@ -110,9 +110,9 @@ Here's an example of using `Alpine.morph()` to update an Alpine component with n
 <div class="demo">
     <div x-data="{ message: 'Change me, then press the button!' }" id="morph-demo-1" class="space-y-2">
         <input type="text" x-model="message" class="w-full">
-        <span x-text="message"></span> 
+        <span x-text="message"></span>
     </div>
-    
+
     <button id="morph-button-1" class="mt-4">Run Morph</button>
 </div>
 
@@ -123,8 +123,8 @@ Here's an example of using `Alpine.morph()` to update an Alpine component with n
         Alpine.morph(el, `
             <div x-data="{ message: 'Change me, then press the button!' }" id="morph-demo-1" class="space-y-2">
                 <h4>See how new elements have been added</h4>
-                <input type="text" x-model="message" class="w-full"> 
-                <span x-text="message"></span> 
+                <input type="text" x-model="message" class="w-full">
+                <span x-text="message"></span>
                 <h4>but the state of this component hasn't changed? Magical.</h4>
             </div>
         `)

package/src/en/ui.md

@@ -0,0 +1,6 @@
+---
+order: 5
+title: UI
+font-type: mono
+type: sub-directory
+---