@flexilla/alpine-modal 0.0.4 → 0.1.0
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 +68 -4
- package/package.json +4 -2
- package/src/index.d.ts +7 -0
package/README.md
CHANGED
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
<h1 align="center">Alpine Modal</h1>
|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
|
-
A
|
|
4
|
+
A powerful and flexible modal dialog component for <a href="https://alpinejs.dev">Alpine.js</a>, powered by Flexilla
|
|
5
5
|
</p>
|
|
6
6
|
|
|
7
|
+
## Overview
|
|
8
|
+
|
|
9
|
+
Alpine Modal is a lightweight wrapper around Flexilla's modal component, providing seamless integration with Alpine.js. It offers:
|
|
10
|
+
|
|
11
|
+
- 🎯 Simple integration with Alpine.js directives
|
|
12
|
+
- 🎨 Highly customizable styling and animations
|
|
13
|
+
- 🔒 Accessibility features built-in
|
|
14
|
+
- 🛠 Event-driven API for programmatic control
|
|
7
15
|
|
|
8
16
|
## Installation
|
|
9
17
|
|
|
@@ -12,7 +20,7 @@
|
|
|
12
20
|
Include the following `<script>` tag in the `<head>` of your document, just before Alpine.
|
|
13
21
|
|
|
14
22
|
```html
|
|
15
|
-
|
|
23
|
+
<script src="https://cdn.jsdelivr.net/npm/@flexilla/alpine-modal@latest/dist/cdn.min.js" defer></script>
|
|
16
24
|
```
|
|
17
25
|
|
|
18
26
|
### NPM
|
|
@@ -32,12 +40,68 @@ Alpine.plugin(PluginModal);
|
|
|
32
40
|
Alpine.start();
|
|
33
41
|
```
|
|
34
42
|
|
|
35
|
-
##
|
|
43
|
+
## Usage
|
|
36
44
|
|
|
37
|
-
|
|
45
|
+
### Basic Example
|
|
38
46
|
|
|
47
|
+
```html
|
|
48
|
+
<button data-modal-target="modal-default"
|
|
49
|
+
class="bg-neutral-800 text-white px-4 py-2 rounded-lg text-sm w-max">
|
|
50
|
+
Open Modal
|
|
51
|
+
</button>
|
|
52
|
+
|
|
53
|
+
<dialog x-data data-fx-modal x-modal data-modal-id="modal-default"
|
|
54
|
+
data-modal-overlay="inset-0 fixed bg-gray-800/20 ease-linear duration-300 transition-all data-[state=close]:opacity-0 data-[state=close]:invisible"
|
|
55
|
+
class="inset-0 w-screen h-screen justify-center items-start hidden data-[state=open]:flex p-4 fixed top-0 left-0 bg-transparent">
|
|
56
|
+
<div data-modal-content
|
|
57
|
+
class="bg-white rounded-lg overflow-hidden w-full max-w-2xl flex flex-col ease-linear transition-all duration-300 absolute top-4 z-[500]">
|
|
58
|
+
<div class="border-b border-b-gray-100 dark:border-b-gray-900 p-4 flex justify-between items-center">
|
|
59
|
+
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">
|
|
60
|
+
Modal Title
|
|
61
|
+
</h2>
|
|
62
|
+
<button aria-label="close modal" data-close-modal
|
|
63
|
+
class="text-gray-700 dark:text-gray-300 rounded-full p-2 border border-gray-200 dark:border-gray-800 duration-200 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
64
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4">
|
|
65
|
+
<path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
|
|
66
|
+
</svg>
|
|
67
|
+
</button>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="px-4 py-6">
|
|
70
|
+
<!-- Your modal content here -->
|
|
71
|
+
</div>
|
|
72
|
+
<div class="border-t border-t-gray-100 dark:border-t-gray-900 p-4 flex items-center gap-x-3">
|
|
73
|
+
<button class="rounded px-4 h-8 flex items-center bg-blue-600 text-white duration-300 hover:bg-opacity-80">
|
|
74
|
+
Save
|
|
75
|
+
</button>
|
|
76
|
+
<button data-close-modal
|
|
77
|
+
class="rounded px-4 h-8 flex items-center border border-gray-200 dark:border-gray-800 text-gray-700 dark:text-gray-300 duration-300 hover:bg-gray-100 dark:hover:bg-gray-900">
|
|
78
|
+
Cancel
|
|
79
|
+
</button>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</dialog>
|
|
39
83
|
```
|
|
40
84
|
|
|
85
|
+
### Key Features
|
|
86
|
+
|
|
87
|
+
1. **Required Attributes**:
|
|
88
|
+
- `x-modal`: The main directive
|
|
89
|
+
- `data-modal-id`: Unique identifier for the modal
|
|
90
|
+
- `data-modal-content`: Marks the modal content container
|
|
91
|
+
- `data-close-modal`: Marks close trigger elements
|
|
92
|
+
|
|
93
|
+
2. **Styling**:
|
|
94
|
+
- Uses data attributes for state-based styling
|
|
95
|
+
- Fully customizable with utility classes
|
|
96
|
+
- Smooth transitions and animations
|
|
97
|
+
|
|
98
|
+
3. **Accessibility**:
|
|
99
|
+
- Uses native `<dialog>` element
|
|
100
|
+
- Proper ARIA attributes
|
|
101
|
+
- Keyboard navigation support
|
|
102
|
+
|
|
103
|
+
For complete documentation and advanced customization options, visit the [Flexilla Modal documentation](https://flexilla-docs.vercel.app/docs/components/modal).
|
|
104
|
+
|
|
41
105
|
## License
|
|
42
106
|
|
|
43
107
|
Copyright (c) 2025 Johnkat MJ and contributors.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@flexilla/alpine-modal",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "0.1.0",
|
|
4
4
|
"description": "AlpineJS plugin for creating Modal, Dialog, alert dialog components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"private": false,
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
},
|
|
19
19
|
"main": "src/index.js",
|
|
20
20
|
"module": "dist/module.esm.js",
|
|
21
|
+
"types": "src/index.d.ts",
|
|
21
22
|
"scripts": {
|
|
22
23
|
"build": "node ./scripts/build.js",
|
|
23
24
|
"watch": "node ./scripts/build.js --watch",
|
|
@@ -41,6 +42,7 @@
|
|
|
41
42
|
"LICENSE",
|
|
42
43
|
"README.md",
|
|
43
44
|
"src/index.js",
|
|
45
|
+
"src/index.d.ts",
|
|
44
46
|
"package.json",
|
|
45
47
|
"dist"
|
|
46
48
|
],
|
|
@@ -66,5 +68,5 @@
|
|
|
66
68
|
"dependencies": {
|
|
67
69
|
"@flexilla/modal": "^2.2.0"
|
|
68
70
|
},
|
|
69
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "34cb017e7b29fb1ee10ded1d4317256fa7167093"
|
|
70
72
|
}
|