@t007/dialog 0.0.5 → 0.0.7
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/LICENSE +21 -0
- package/README.md +233 -0
- package/dist/index.global.js +8 -4
- package/dist/standalone.js +8 -4
- package/package.json +13 -10
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 OLUWATOBILOBA OKETADE
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
# @t007/dialog
|
|
2
|
+
|
|
3
|
+
> A lightweight, promise-based vanilla JavaScript dialog system providing modern, accessible replacements for native `alert`, `confirm`, and `prompt` windows.
|
|
4
|
+
|
|
5
|
+
[](LICENSE)
|
|
6
|
+
[](https://www.npmjs.com/package/@t007/dialog)
|
|
7
|
+
|
|
8
|
+
[Live Demo](https://tobi007-del.github.io/t007-tools/packages/dialog/src/index.html) | [Report Bug](https://github.com/Tobi007-del/t007-tools/issues)
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Table of contents
|
|
13
|
+
|
|
14
|
+
- [@t007/dialog](#t007dialog)
|
|
15
|
+
- [Table of contents](#table-of-contents)
|
|
16
|
+
- [Overview](#overview)
|
|
17
|
+
- [Demo \& Screenshots](#demo--screenshots)
|
|
18
|
+
- [Features](#features)
|
|
19
|
+
- [Tech Stack](#tech-stack)
|
|
20
|
+
- [Getting Started](#getting-started)
|
|
21
|
+
- [Usage](#usage)
|
|
22
|
+
- [API Reference](#api-reference)
|
|
23
|
+
- [Customization](#customization)
|
|
24
|
+
- [Author](#author)
|
|
25
|
+
- [Acknowledgments](#acknowledgments)
|
|
26
|
+
- [Star History](#star-history)
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## Overview
|
|
31
|
+
|
|
32
|
+
**@t007/dialog** is a sophisticated UI library that completely overrides the ugly, thread-blocking native browser dialogs with beautiful, non-blocking, Promise-based alternatives.
|
|
33
|
+
|
|
34
|
+
### Why @t007/dialog?
|
|
35
|
+
|
|
36
|
+
- ✅ **Non-Blocking Promises:** Awaits user input asynchronously without freezing the main thread.
|
|
37
|
+
- ✅ **Native Accessibility:** Built on top of the modern HTML5 `<dialog>` element.
|
|
38
|
+
- ✅ **Smart Loading:** The `prompt` dialog dynamically lazy-loads the `@t007/input` dependency only when needed.
|
|
39
|
+
- ✅ **Zero Frameworks:** Pure vanilla JS, meaning it works flawlessly in React, Vue, Angular, or raw HTML.
|
|
40
|
+
- ✅ **Global Injection:** Automatically attaches to `window.Alert`, `window.Confirm`, and `window.Prompt` for drop-in legacy code replacement.
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## Demo & Screenshots
|
|
45
|
+
|
|
46
|
+
### Alert Dialog
|
|
47
|
+
A clean, single-action notification window.
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
### Confirm Dialog
|
|
51
|
+
A dual-action window returning a strict boolean based on user choice.
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
### Prompt Dialog
|
|
55
|
+
Integrates with the `t007.FM` (Form Manager) to capture, validate, and return user input.
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## Features
|
|
61
|
+
|
|
62
|
+
- **Promise-Based API**: Use `async/await` for incredibly clean control flow.
|
|
63
|
+
- **Form Validation**: Native form validation built directly into the prompt modal.
|
|
64
|
+
- **Keyboard Navigation**: Native `Esc` key cancellation and auto-focusing capabilities.
|
|
65
|
+
- **Tree-Shakeable**: Import only the specific dialogs you need.
|
|
66
|
+
- **Highly Customizable**: Clean DOM structure with distinct CSS classes for easy overriding.
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## Tech Stack
|
|
71
|
+
|
|
72
|
+
### Built with
|
|
73
|
+
|
|
74
|
+
- Semantic HTML5 `<dialog>` API
|
|
75
|
+
- CSS Custom Properties & Flexbox
|
|
76
|
+
- Vanilla JavaScript (ES6+)
|
|
77
|
+
- Bundled via `tsup` (ESM, CJS, IIFE outputs)
|
|
78
|
+
|
|
79
|
+
---
|
|
80
|
+
|
|
81
|
+
## Getting Started
|
|
82
|
+
|
|
83
|
+
### Installation
|
|
84
|
+
|
|
85
|
+
Install via your preferred package manager:
|
|
86
|
+
|
|
87
|
+
```bash
|
|
88
|
+
npm install @t007/dialog
|
|
89
|
+
# or
|
|
90
|
+
yarn add @t007/dialog
|
|
91
|
+
# or
|
|
92
|
+
pnpm add @t007/dialog
|
|
93
|
+
````
|
|
94
|
+
|
|
95
|
+
-----
|
|
96
|
+
|
|
97
|
+
## Usage
|
|
98
|
+
|
|
99
|
+
### Modern Bundlers (ESM)
|
|
100
|
+
|
|
101
|
+
If you are using Vite, Webpack, Next.js, or any modern build tool:
|
|
102
|
+
|
|
103
|
+
```javascript
|
|
104
|
+
import '@t007/dialog/style.css';
|
|
105
|
+
import { alert, confirm, prompt } from '@t007/dialog'; // also attached to window.t007
|
|
106
|
+
|
|
107
|
+
// 1. Alert
|
|
108
|
+
async function triggerAlert() {
|
|
109
|
+
await alert('Operation completed successfully!');
|
|
110
|
+
console.log('User dismissed the alert.');
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// 2. Confirm
|
|
114
|
+
async function triggerConfirm() {
|
|
115
|
+
const isSure = await confirm('Are you sure you want to delete this file?');
|
|
116
|
+
if (isSure) {
|
|
117
|
+
console.log('Deleting...');
|
|
118
|
+
} else {
|
|
119
|
+
console.log('Action cancelled.');
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// 3. Prompt
|
|
124
|
+
async function triggerPrompt() {
|
|
125
|
+
const username = await prompt('Enter your new username:', 'guest_user');
|
|
126
|
+
if (username !== null) {
|
|
127
|
+
console.log(`Username changed to: ${username}`);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### CDN / Browser (Global)
|
|
133
|
+
|
|
134
|
+
If you are not using a bundler, the IIFE build automatically injects the dialogs into the global `t007` object and provides convenient capitalized window fallbacks (`window.Alert`, `window.Confirm`, `window.Prompt`).
|
|
135
|
+
|
|
136
|
+
```html
|
|
137
|
+
<!DOCTYPE html>
|
|
138
|
+
<html>
|
|
139
|
+
<head>
|
|
140
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.css">
|
|
141
|
+
</head>
|
|
142
|
+
<body>
|
|
143
|
+
|
|
144
|
+
<script src="https://cdn.jsdelivr.net/npm/@t007/dialog@latest"></script>
|
|
145
|
+
|
|
146
|
+
<script>
|
|
147
|
+
// The library automatically maps to window.Confirm!
|
|
148
|
+
document.getElementById('deleteBtn').addEventListener('click', async () => {
|
|
149
|
+
const proceed = await Confirm("Proceed with formatting?"); // or use `t007.confirm()`
|
|
150
|
+
if(proceed) doFormat();
|
|
151
|
+
});
|
|
152
|
+
</script>
|
|
153
|
+
</body>
|
|
154
|
+
</html>
|
|
155
|
+
```
|
|
156
|
+
-----
|
|
157
|
+
|
|
158
|
+
## API Reference
|
|
159
|
+
|
|
160
|
+
### `alert(message, options)`
|
|
161
|
+
|
|
162
|
+
Displays a simple message and a confirmation button.
|
|
163
|
+
|
|
164
|
+
- **`message`** *(String)*: The text to display.
|
|
165
|
+
- **`options`** *(Object)*: Optional configuration.
|
|
166
|
+
- `options.confirmText` *(String)*: Custom text for the button (Default: `"OK"`).
|
|
167
|
+
- **Returns**: `Promise<true>`
|
|
168
|
+
|
|
169
|
+
### `confirm(question, options)`
|
|
170
|
+
|
|
171
|
+
Displays a question with confirm and cancel buttons.
|
|
172
|
+
|
|
173
|
+
- **`question`** *(String)*: The question to ask the user.
|
|
174
|
+
- **`options`** *(Object)*: Optional configuration.
|
|
175
|
+
- `options.confirmText` *(String)*: Custom text for the confirm button (Default: `"OK"`).
|
|
176
|
+
- `options.cancelText` *(String)*: Custom text for the cancel button (Default: `"Cancel"`).
|
|
177
|
+
- **Returns**: `Promise<boolean>` (`true` if confirmed, `false` if cancelled).
|
|
178
|
+
|
|
179
|
+
### `prompt(question, defaultValue, options)`
|
|
180
|
+
|
|
181
|
+
Displays an input field to collect data from the user. Note: This automatically loads the `@t007/input` dependency if required.
|
|
182
|
+
|
|
183
|
+
- **`question`** *(String)*: The prompt instructions.
|
|
184
|
+
- **`defaultValue`** *(String)*: The initial value placed inside the input.
|
|
185
|
+
- **`options`** *(Object)*: Optional configuration passed directly to the input field generation.
|
|
186
|
+
- `options.confirmText` *(String)*: Custom text for the submit button.
|
|
187
|
+
- `options.cancelText` *(String)*: Custom text for the cancel button.
|
|
188
|
+
- *Accepts standard HTML input attributes (type, required, placeholder, etc.)*
|
|
189
|
+
- **Returns**: `Promise<String | null>` (Returns the string value, or `null` if cancelled).
|
|
190
|
+
|
|
191
|
+
-----
|
|
192
|
+
|
|
193
|
+
## Customization
|
|
194
|
+
|
|
195
|
+
The dialogs are built with semantic, easily targetable CSS classes. You can easily override these in your own stylesheet to match your application's theme.
|
|
196
|
+
|
|
197
|
+
### CSS Selectors
|
|
198
|
+
|
|
199
|
+
- `.t007-dialog`: The main `<dialog>` container.
|
|
200
|
+
- `.t007-dialog-top-section`: The wrapper for the text content.
|
|
201
|
+
- `.t007-dialog-question`: The actual message/question text.
|
|
202
|
+
- `.t007-dialog-bottom-section`: The wrapper for the action buttons.
|
|
203
|
+
- `.t007-dialog-confirm-button`: The primary action button.
|
|
204
|
+
- `.t007-dialog-cancel-button`: The secondary/cancel button.
|
|
205
|
+
- `.t007-input-form`: The form wrapper used exclusively in the `prompt` dialog.
|
|
206
|
+
|
|
207
|
+
Example override:
|
|
208
|
+
|
|
209
|
+
```css
|
|
210
|
+
/* Change the confirm button to a red destructive button */
|
|
211
|
+
.t007-dialog-confirm-button {
|
|
212
|
+
background-color: #dc3545;
|
|
213
|
+
color: white;
|
|
214
|
+
border-radius: 8px;
|
|
215
|
+
}
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
-----
|
|
219
|
+
|
|
220
|
+
## Author
|
|
221
|
+
|
|
222
|
+
- Developer - [Oketade Oluwatobiloba (Tobi007-del)](https://github.com/Tobi007-del)
|
|
223
|
+
- Project - [t007-tools](https://github.com/Tobi007-del/t007-tools/)
|
|
224
|
+
|
|
225
|
+
## Acknowledgments
|
|
226
|
+
|
|
227
|
+
Built to support modern web applications requiring non-blocking, highly customizable UI interfaces. Part of the `@t007` utility ecosystem.
|
|
228
|
+
|
|
229
|
+
## Star History
|
|
230
|
+
|
|
231
|
+
If you find this project useful, please consider giving it a star! ⭐
|
|
232
|
+
|
|
233
|
+
[](https://github.com/Tobi007-del/t007-tools)
|
package/dist/index.global.js
CHANGED
|
@@ -25,8 +25,11 @@
|
|
|
25
25
|
for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
|
-
|
|
28
|
+
var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
|
|
29
|
+
function loadResource(req, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
|
|
29
30
|
w.t007._resourceCache ??= {};
|
|
31
|
+
if (req === VIRTUAL_RESOURCE || "symbol" === typeof req) return Promise.resolve();
|
|
32
|
+
const src = req;
|
|
30
33
|
if (w.t007._resourceCache[src]) return w.t007._resourceCache[src];
|
|
31
34
|
const existing = type === "script" ? Array.prototype.find.call(w.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(w.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
|
|
32
35
|
if (existing) return w.t007._resourceCache[src] = Promise.resolve(existing);
|
|
@@ -68,12 +71,13 @@
|
|
|
68
71
|
}
|
|
69
72
|
if (typeof window !== "undefined") {
|
|
70
73
|
window.t007 ??= {};
|
|
74
|
+
t007.VIRTUAL_RESOURCE = VIRTUAL_RESOURCE;
|
|
71
75
|
window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
|
|
72
76
|
window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
|
|
73
77
|
window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
|
|
74
|
-
window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/index.css`;
|
|
75
|
-
window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/index.css`;
|
|
76
|
-
window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.css`;
|
|
78
|
+
window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/index.min.css`;
|
|
79
|
+
window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/index.min.css`;
|
|
80
|
+
window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.min.css`;
|
|
77
81
|
}
|
|
78
82
|
|
|
79
83
|
// src/index.js
|
package/dist/standalone.js
CHANGED
|
@@ -23,8 +23,11 @@ function assignEl(el, props, dataset, styles) {
|
|
|
23
23
|
for (const k of Object.keys(styles)) if (styles[k] !== void 0) el.style[k] = styles[k];
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
|
|
26
|
+
var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
|
|
27
|
+
function loadResource(req, type = "style", { module, media, crossOrigin, integrity, referrerPolicy, nonce, fetchPriority, attempts = 3, retryKey = false } = {}, w = window) {
|
|
27
28
|
w.t007._resourceCache ??= {};
|
|
29
|
+
if (req === VIRTUAL_RESOURCE || "symbol" === typeof req) return Promise.resolve();
|
|
30
|
+
const src = req;
|
|
28
31
|
if (w.t007._resourceCache[src]) return w.t007._resourceCache[src];
|
|
29
32
|
const existing = type === "script" ? Array.prototype.find.call(w.document.scripts, (s) => isSameURL(s.src, src)) : type === "style" ? Array.prototype.find.call(w.document.styleSheets, (s) => isSameURL(s.href, src)) : null;
|
|
30
33
|
if (existing) return w.t007._resourceCache[src] = Promise.resolve(existing);
|
|
@@ -66,12 +69,13 @@ function bindAllMethods(owner) {
|
|
|
66
69
|
}
|
|
67
70
|
if (typeof window !== "undefined") {
|
|
68
71
|
window.t007 ??= {};
|
|
72
|
+
t007.VIRTUAL_RESOURCE = VIRTUAL_RESOURCE;
|
|
69
73
|
window.T007_TOAST_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest`;
|
|
70
74
|
window.T007_INPUT_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest`;
|
|
71
75
|
window.T007_DIALOG_JS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`;
|
|
72
|
-
window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/index.css`;
|
|
73
|
-
window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/index.css`;
|
|
74
|
-
window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.css`;
|
|
76
|
+
window.T007_TOAST_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/index.min.css`;
|
|
77
|
+
window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/index.min.css`;
|
|
78
|
+
window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.min.css`;
|
|
75
79
|
}
|
|
76
80
|
|
|
77
81
|
// src/index.js
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@t007/dialog",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"description": "A lightweight, pure JS dialog system.",
|
|
5
5
|
"author": "Oketade Oluwatobiloba <tobioketade007@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"repository": {
|
|
8
8
|
"type": "git",
|
|
9
|
-
"url": "git+https://github.com/
|
|
9
|
+
"url": "git+https://github.com/Tobi007-del/t007-tools.git",
|
|
10
10
|
"directory": "packages/dialog"
|
|
11
11
|
},
|
|
12
|
-
"homepage": "https://github.com/
|
|
12
|
+
"homepage": "https://github.com/Tobi007-del/t007-tools/tree/main/packages/dialog#readme",
|
|
13
13
|
"bugs": {
|
|
14
|
-
"url": "https://github.com/
|
|
14
|
+
"url": "https://github.com/Tobi007-del/t007-tools/issues"
|
|
15
15
|
},
|
|
16
16
|
"type": "module",
|
|
17
17
|
"main": "./dist/index.js",
|
|
@@ -33,24 +33,27 @@
|
|
|
33
33
|
"./global": "./dist/index.global.js",
|
|
34
34
|
"./style.css": "./dist/index.css"
|
|
35
35
|
},
|
|
36
|
+
"publishConfig": {
|
|
37
|
+
"access": "public"
|
|
38
|
+
},
|
|
36
39
|
"scripts": {
|
|
37
|
-
"build": "tsup --config ../../tsup.config.ts"
|
|
40
|
+
"build": "tsup --config ../../tsup.config.ts",
|
|
41
|
+
"prepublishOnly": "shx cp ../../LICENSE ."
|
|
38
42
|
},
|
|
39
43
|
"files": [
|
|
40
|
-
"dist"
|
|
41
|
-
"./dist/index.d.ts",
|
|
42
|
-
"./dist/index.css"
|
|
44
|
+
"dist"
|
|
43
45
|
],
|
|
44
46
|
"keywords": [
|
|
45
47
|
"t007",
|
|
48
|
+
"ecosystem",
|
|
49
|
+
"ui",
|
|
50
|
+
"vanilla-js",
|
|
46
51
|
"dialog",
|
|
47
52
|
"modal",
|
|
48
53
|
"popup",
|
|
49
54
|
"alert",
|
|
50
55
|
"confirm",
|
|
51
56
|
"prompt",
|
|
52
|
-
"ui",
|
|
53
|
-
"vanilla-js",
|
|
54
57
|
"accessible"
|
|
55
58
|
],
|
|
56
59
|
"dependencies": {
|