@ramstack/alpinegear-router 1.2.3 → 1.2.4
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/README.md +40 -1
- package/package.json +6 -2
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@ To include the CDN version of this plugin, add the following `<script>` tag befo
|
|
|
15
15
|
<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-router@1/alpinegear-router.min.js" defer></script>
|
|
16
16
|
|
|
17
17
|
<!-- alpine.js -->
|
|
18
|
-
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3
|
|
18
|
+
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
### Using NPM
|
|
@@ -63,6 +63,8 @@ Alpine.start();
|
|
|
63
63
|
<main x-router:outlet></main>
|
|
64
64
|
</div>
|
|
65
65
|
```
|
|
66
|
+
🚀 [Live demo | Alpine.js x-router: Basic example](https://jsfiddle.net/rameel/h9mygjcd/)<br />
|
|
67
|
+
🚀 [Live demo | Alpine.js x-router: Nested router](https://jsfiddle.net/rameel/cjoza3ng/)
|
|
66
68
|
|
|
67
69
|
## History modes
|
|
68
70
|
The router can be configured to use different history modes. There are two available modes:
|
|
@@ -334,6 +336,43 @@ You can find the source code for this plugin on GitHub:
|
|
|
334
336
|
|
|
335
337
|
https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/router
|
|
336
338
|
|
|
339
|
+
## Related projects
|
|
340
|
+
|
|
341
|
+
**[@ramstack/alpinegear-main](https://www.npmjs.com/package/@ramstack/alpinegear-main)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/main))<br>
|
|
342
|
+
Provides a combined plugin that includes several useful directives.
|
|
343
|
+
This package aggregates multiple individual plugins, offering a convenient all-in-one bundle.
|
|
344
|
+
Included directives: `x-bound`, `x-format`, `x-fragment`, `x-match`, `x-template`, and `x-when`.
|
|
345
|
+
|
|
346
|
+
**[@ramstack/alpinegear-bound](https://www.npmjs.com/package/@ramstack/alpinegear-bound)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/bound))<br>
|
|
347
|
+
Provides the `x-bound` directive, which allows for two-way binding of input elements and their associated data properties.
|
|
348
|
+
It works similarly to the binding provided by [Svelte](https://svelte.dev/docs/element-directives#bind-property)
|
|
349
|
+
and also supports synchronizing values between two `Alpine.js` data properties.
|
|
350
|
+
|
|
351
|
+
**[@ramstack/alpinegear-format](https://www.npmjs.com/package/@ramstack/alpinegear-format)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/format))<br>
|
|
352
|
+
Provides the `x-format` directive, which allows you to easily interpolate text using a template syntax similar to what's available in `Vue.js`.
|
|
353
|
+
|
|
354
|
+
**[@ramstack/alpinegear-template](https://www.npmjs.com/package/@ramstack/alpinegear-template)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/template))<br>
|
|
355
|
+
Provides the `x-template` directive, which allows you to define a template once anywhere in the DOM and reference it by its ID.
|
|
356
|
+
|
|
357
|
+
**[@ramstack/alpinegear-fragment](https://www.npmjs.com/package/@ramstack/alpinegear-fragment)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/fragment))<br>
|
|
358
|
+
Provides the `x-fragment` directive, which allows for fragment-like behavior similar to what's available in frameworks
|
|
359
|
+
like `Vue.js` or `React`, where multiple root elements can be grouped together.
|
|
360
|
+
|
|
361
|
+
**[@ramstack/alpinegear-match](https://www.npmjs.com/package/@ramstack/alpinegear-match)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/match))<br>
|
|
362
|
+
Provides the `x-match` directive, which functions similarly to the `switch` statement in many programming languages,
|
|
363
|
+
allowing you to conditionally render elements based on matching cases.
|
|
364
|
+
|
|
365
|
+
**[@ramstack/alpinegear-when](https://www.npmjs.com/package/@ramstack/alpinegear-when)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/when))<br>
|
|
366
|
+
Provides the `x-when` directive, which allows for conditional rendering of elements similar to `x-if`, but supports multiple root elements.
|
|
367
|
+
|
|
368
|
+
**[@ramstack/alpinegear-destroy](https://www.npmjs.com/package/@ramstack/alpinegear-destroy)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/destroy))<br>
|
|
369
|
+
Provides the `x-destroy` directive, which is the opposite of `x-init` and allows you to hook into the cleanup phase
|
|
370
|
+
of any element, running a callback when the element is removed from the DOM.
|
|
371
|
+
|
|
372
|
+
**[@ramstack/alpinegear-hotkey](https://www.npmjs.com/package/@ramstack/alpinegear-hotkey)** ([README](https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/hotkey))<br>
|
|
373
|
+
Provides the `x-hotkey` directive, which allows you to easily handle keyboard shortcuts within your Alpine.js components or application.
|
|
374
|
+
|
|
375
|
+
|
|
337
376
|
## Contributions
|
|
338
377
|
Bug reports and contributions are welcome.
|
|
339
378
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ramstack/alpinegear-router",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.4",
|
|
4
4
|
"description": "@ramstack/alpinegear-router provides routing-related directives for Alpine.js, enabling client-side navigation and routing functionality.",
|
|
5
5
|
"author": "Rameel Burhan",
|
|
6
6
|
"license": "MIT",
|
|
@@ -11,7 +11,11 @@
|
|
|
11
11
|
},
|
|
12
12
|
"keywords": [
|
|
13
13
|
"alpine.js",
|
|
14
|
-
"alpinejs"
|
|
14
|
+
"alpinejs",
|
|
15
|
+
"alpinejs-router",
|
|
16
|
+
"alpinejs-routing",
|
|
17
|
+
"alpinejs-directive",
|
|
18
|
+
"alpinejs-plugin"
|
|
15
19
|
],
|
|
16
20
|
"main": "alpinegear-router.js",
|
|
17
21
|
"module": "alpinegear-router.esm.js"
|