@t007/dialog 0.0.4 → 0.0.6
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 +226 -0
- package/{src/css → dist}/index.css +7 -34
- package/dist/index.global.js +8 -4
- package/dist/standalone.js +8 -4
- package/package.json +17 -14
- /package/{src/ts/types → dist}/index.d.ts +0 -0
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,226 @@
|
|
|
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
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## Overview
|
|
30
|
+
|
|
31
|
+
**@t007/dialog** is a sophisticated UI library that completely overrides the ugly, thread-blocking native browser dialogs with beautiful, non-blocking, Promise-based alternatives.
|
|
32
|
+
|
|
33
|
+
### Why @t007/dialog?
|
|
34
|
+
|
|
35
|
+
- ✅ **Non-Blocking Promises:** Awaits user input asynchronously without freezing the main thread.
|
|
36
|
+
- ✅ **Native Accessibility:** Built on top of the modern HTML5 `<dialog>` element.
|
|
37
|
+
- ✅ **Smart Loading:** The `prompt` dialog dynamically lazy-loads the `@t007/input` dependency only when needed.
|
|
38
|
+
- ✅ **Zero Frameworks:** Pure vanilla JS, meaning it works flawlessly in React, Vue, Angular, or raw HTML.
|
|
39
|
+
- ✅ **Global Injection:** Automatically attaches to `window.Alert`, `window.Confirm`, and `window.Prompt` for drop-in legacy code replacement.
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## Demo & Screenshots
|
|
44
|
+
|
|
45
|
+
### Alert Dialog
|
|
46
|
+
A clean, single-action notification window.
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
### Confirm Dialog
|
|
50
|
+
A dual-action window returning a strict boolean based on user choice.
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
### Prompt Dialog
|
|
54
|
+
Integrates with the `t007.FM` (Form Manager) to capture, validate, and return user input.
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
---
|
|
58
|
+
|
|
59
|
+
## Features
|
|
60
|
+
|
|
61
|
+
- **Promise-Based API**: Use `async/await` for incredibly clean control flow.
|
|
62
|
+
- **Form Validation**: Native form validation built directly into the prompt modal.
|
|
63
|
+
- **Keyboard Navigation**: Native `Esc` key cancellation and auto-focusing capabilities.
|
|
64
|
+
- **Tree-Shakeable**: Import only the specific dialogs you need.
|
|
65
|
+
- **Highly Customizable**: Clean DOM structure with distinct CSS classes for easy overriding.
|
|
66
|
+
|
|
67
|
+
---
|
|
68
|
+
|
|
69
|
+
## Tech Stack
|
|
70
|
+
|
|
71
|
+
### Built with
|
|
72
|
+
|
|
73
|
+
- Semantic HTML5 `<dialog>` API
|
|
74
|
+
- CSS Custom Properties & Flexbox
|
|
75
|
+
- Vanilla JavaScript (ES6+)
|
|
76
|
+
- Bundled via `tsup` (ESM, CJS, IIFE outputs)
|
|
77
|
+
|
|
78
|
+
---
|
|
79
|
+
|
|
80
|
+
## Getting Started
|
|
81
|
+
|
|
82
|
+
### Installation
|
|
83
|
+
|
|
84
|
+
Install via your preferred package manager:
|
|
85
|
+
|
|
86
|
+
```bash
|
|
87
|
+
npm install @t007/dialog
|
|
88
|
+
# or
|
|
89
|
+
yarn add @t007/dialog
|
|
90
|
+
# or
|
|
91
|
+
pnpm add @t007/dialog
|
|
92
|
+
````
|
|
93
|
+
|
|
94
|
+
-----
|
|
95
|
+
|
|
96
|
+
## Usage
|
|
97
|
+
|
|
98
|
+
### Modern Bundlers (ESM)
|
|
99
|
+
|
|
100
|
+
If you are using Vite, Webpack, Next.js, or any modern build tool:
|
|
101
|
+
|
|
102
|
+
```javascript
|
|
103
|
+
import '@t007/dialog/style.css';
|
|
104
|
+
import { alert, confirm, prompt } from '@t007/dialog'; // also attached to window.t007
|
|
105
|
+
|
|
106
|
+
// 1. Alert
|
|
107
|
+
async function triggerAlert() {
|
|
108
|
+
await alert('Operation completed successfully!');
|
|
109
|
+
console.log('User dismissed the alert.');
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// 2. Confirm
|
|
113
|
+
async function triggerConfirm() {
|
|
114
|
+
const isSure = await confirm('Are you sure you want to delete this file?');
|
|
115
|
+
if (isSure) {
|
|
116
|
+
console.log('Deleting...');
|
|
117
|
+
} else {
|
|
118
|
+
console.log('Action cancelled.');
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// 3. Prompt
|
|
123
|
+
async function triggerPrompt() {
|
|
124
|
+
const username = await prompt('Enter your new username:', 'guest_user');
|
|
125
|
+
if (username !== null) {
|
|
126
|
+
console.log(`Username changed to: ${username}`);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### CDN / Browser (Global)
|
|
132
|
+
|
|
133
|
+
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`).
|
|
134
|
+
|
|
135
|
+
```html
|
|
136
|
+
<!DOCTYPE html>
|
|
137
|
+
<html>
|
|
138
|
+
<head>
|
|
139
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.css">
|
|
140
|
+
</head>
|
|
141
|
+
<body>
|
|
142
|
+
|
|
143
|
+
<script src="https://cdn.jsdelivr.net/npm/@t007/dialog@latest"></script>
|
|
144
|
+
|
|
145
|
+
<script>
|
|
146
|
+
// The library automatically maps to window.Confirm!
|
|
147
|
+
document.getElementById('deleteBtn').addEventListener('click', async () => {
|
|
148
|
+
const proceed = await Confirm("Proceed with formatting?"); // or use `t007.confirm()`
|
|
149
|
+
if(proceed) doFormat();
|
|
150
|
+
});
|
|
151
|
+
</script>
|
|
152
|
+
</body>
|
|
153
|
+
</html>
|
|
154
|
+
```
|
|
155
|
+
-----
|
|
156
|
+
|
|
157
|
+
## API Reference
|
|
158
|
+
|
|
159
|
+
### `alert(message, options)`
|
|
160
|
+
|
|
161
|
+
Displays a simple message and a confirmation button.
|
|
162
|
+
|
|
163
|
+
- **`message`** *(String)*: The text to display.
|
|
164
|
+
- **`options`** *(Object)*: Optional configuration.
|
|
165
|
+
- `options.confirmText` *(String)*: Custom text for the button (Default: `"OK"`).
|
|
166
|
+
- **Returns**: `Promise<true>`
|
|
167
|
+
|
|
168
|
+
### `confirm(question, options)`
|
|
169
|
+
|
|
170
|
+
Displays a question with confirm and cancel buttons.
|
|
171
|
+
|
|
172
|
+
- **`question`** *(String)*: The question to ask the user.
|
|
173
|
+
- **`options`** *(Object)*: Optional configuration.
|
|
174
|
+
- `options.confirmText` *(String)*: Custom text for the confirm button (Default: `"OK"`).
|
|
175
|
+
- `options.cancelText` *(String)*: Custom text for the cancel button (Default: `"Cancel"`).
|
|
176
|
+
- **Returns**: `Promise<boolean>` (`true` if confirmed, `false` if cancelled).
|
|
177
|
+
|
|
178
|
+
### `prompt(question, defaultValue, options)`
|
|
179
|
+
|
|
180
|
+
Displays an input field to collect data from the user. Note: This automatically loads the `@t007/input` dependency if required.
|
|
181
|
+
|
|
182
|
+
- **`question`** *(String)*: The prompt instructions.
|
|
183
|
+
- **`defaultValue`** *(String)*: The initial value placed inside the input.
|
|
184
|
+
- **`options`** *(Object)*: Optional configuration passed directly to the input field generation.
|
|
185
|
+
- `options.confirmText` *(String)*: Custom text for the submit button.
|
|
186
|
+
- `options.cancelText` *(String)*: Custom text for the cancel button.
|
|
187
|
+
- *Accepts standard HTML input attributes (type, required, placeholder, etc.)*
|
|
188
|
+
- **Returns**: `Promise<String | null>` (Returns the string value, or `null` if cancelled).
|
|
189
|
+
|
|
190
|
+
-----
|
|
191
|
+
|
|
192
|
+
## Customization
|
|
193
|
+
|
|
194
|
+
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.
|
|
195
|
+
|
|
196
|
+
### CSS Selectors
|
|
197
|
+
|
|
198
|
+
- `.t007-dialog`: The main `<dialog>` container.
|
|
199
|
+
- `.t007-dialog-top-section`: The wrapper for the text content.
|
|
200
|
+
- `.t007-dialog-question`: The actual message/question text.
|
|
201
|
+
- `.t007-dialog-bottom-section`: The wrapper for the action buttons.
|
|
202
|
+
- `.t007-dialog-confirm-button`: The primary action button.
|
|
203
|
+
- `.t007-dialog-cancel-button`: The secondary/cancel button.
|
|
204
|
+
- `.t007-input-form`: The form wrapper used exclusively in the `prompt` dialog.
|
|
205
|
+
|
|
206
|
+
Example override:
|
|
207
|
+
|
|
208
|
+
```css
|
|
209
|
+
/* Change the confirm button to a red destructive button */
|
|
210
|
+
.t007-dialog-confirm-button {
|
|
211
|
+
background-color: #dc3545;
|
|
212
|
+
color: white;
|
|
213
|
+
border-radius: 8px;
|
|
214
|
+
}
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
-----
|
|
218
|
+
|
|
219
|
+
## Author
|
|
220
|
+
|
|
221
|
+
- Developer - [Oketade Oluwatobiloba (Tobi007-del)](https://github.com/Tobi007-del)
|
|
222
|
+
- Project - [t007-tools](https://github.com/Tobi007-del/t007-tools/)
|
|
223
|
+
|
|
224
|
+
## Acknowledgments
|
|
225
|
+
|
|
226
|
+
Built to support modern web applications requiring non-blocking, highly customizable UI interfaces. Part of the `@t007` utility ecosystem.
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* src/css/index.css */
|
|
1
2
|
:where(:root) {
|
|
2
3
|
--t007-dialog-font-family: inherit;
|
|
3
4
|
--t007-dialog-unit: 1rem;
|
|
@@ -31,12 +32,10 @@
|
|
|
31
32
|
--t007-dialog-button-gap: 0.65rem;
|
|
32
33
|
--t007-button-outline-width: 0.15rem;
|
|
33
34
|
--t007-button-outline-style: solid;
|
|
34
|
-
/* animation styles */
|
|
35
35
|
--t007-dialog-start-duration: 150ms;
|
|
36
36
|
--t007-dialog-start-transform: translateY(-100%);
|
|
37
37
|
--t007-dialog-start-opacity: 0;
|
|
38
38
|
}
|
|
39
|
-
|
|
40
39
|
:where(:root, .t007-dialog) {
|
|
41
40
|
--t007-confirm-button-color: grey;
|
|
42
41
|
--t007-confirm-button-background: var(--t007-cancel-button-color);
|
|
@@ -45,11 +44,9 @@
|
|
|
45
44
|
--t007-confirm-button-outline-color: var(--t007-confirm-button-color);
|
|
46
45
|
--t007-cancel-button-outline-color: var(--t007-cancel-button-color);
|
|
47
46
|
}
|
|
48
|
-
|
|
49
47
|
:where(.t007-dialog) .t007-input-field {
|
|
50
48
|
--t007-input-color: var(--t007-dialog-message-color);
|
|
51
49
|
}
|
|
52
|
-
|
|
53
50
|
.t007-dialog,
|
|
54
51
|
.t007-dialog *,
|
|
55
52
|
.t007-dialog *::after,
|
|
@@ -60,23 +57,19 @@
|
|
|
60
57
|
margin: 0;
|
|
61
58
|
padding: 0;
|
|
62
59
|
}
|
|
63
|
-
|
|
64
60
|
.t007-dialog *:disabled {
|
|
65
61
|
filter: grayscale(100%);
|
|
66
62
|
cursor: not-allowed;
|
|
67
63
|
}
|
|
68
|
-
|
|
69
64
|
.t007-dialog *:focus {
|
|
70
65
|
outline-style: dashed;
|
|
71
66
|
outline-offset: 0.1rem;
|
|
72
67
|
outline-width: 0;
|
|
73
68
|
}
|
|
74
|
-
|
|
75
69
|
.t007-dialog *:focus-visible {
|
|
76
70
|
outline-width: 0.15rem;
|
|
77
71
|
transition: none !important;
|
|
78
72
|
}
|
|
79
|
-
|
|
80
73
|
.t007-dialog :where(button) {
|
|
81
74
|
background: none;
|
|
82
75
|
border: none;
|
|
@@ -86,30 +79,30 @@
|
|
|
86
79
|
justify-content: center;
|
|
87
80
|
transition: filter 200ms ease;
|
|
88
81
|
}
|
|
89
|
-
|
|
90
82
|
:where(button):hover {
|
|
91
83
|
cursor: pointer;
|
|
92
84
|
filter: brightness(1.15);
|
|
93
85
|
}
|
|
94
|
-
|
|
95
86
|
:is(html, body):has(.t007-dialog[open]) {
|
|
96
87
|
overflow: hidden;
|
|
97
88
|
}
|
|
98
89
|
body:has(.t007-dialog[open]) {
|
|
99
|
-
overflow-y: visible;
|
|
90
|
+
overflow-y: visible;
|
|
100
91
|
}
|
|
101
|
-
|
|
102
92
|
.t007-dialog,
|
|
103
93
|
.t007-dialog::backdrop {
|
|
104
94
|
position: fixed;
|
|
105
95
|
inset: 0;
|
|
106
96
|
margin: auto;
|
|
107
97
|
display: none;
|
|
108
|
-
transition-property:
|
|
98
|
+
transition-property:
|
|
99
|
+
display,
|
|
100
|
+
transform,
|
|
101
|
+
opacity,
|
|
102
|
+
backdrop-filter;
|
|
109
103
|
transition-duration: var(--t007-dialog-start-duration);
|
|
110
104
|
transition-behavior: allow-discrete;
|
|
111
105
|
}
|
|
112
|
-
|
|
113
106
|
.t007-dialog {
|
|
114
107
|
padding: 0;
|
|
115
108
|
margin: auto;
|
|
@@ -124,7 +117,6 @@ body:has(.t007-dialog[open]) {
|
|
|
124
117
|
opacity: var(--t007-dialog-start-opacity);
|
|
125
118
|
transform: var(--t007-dialog-start-transform);
|
|
126
119
|
}
|
|
127
|
-
|
|
128
120
|
.t007-dialog[open] {
|
|
129
121
|
opacity: 1;
|
|
130
122
|
transform: none;
|
|
@@ -135,7 +127,6 @@ body:has(.t007-dialog[open]) {
|
|
|
135
127
|
transform: var(--t007-dialog-start-transform);
|
|
136
128
|
}
|
|
137
129
|
}
|
|
138
|
-
|
|
139
130
|
.t007-dialog,
|
|
140
131
|
.t007-dialog form {
|
|
141
132
|
flex-direction: column;
|
|
@@ -145,11 +136,9 @@ body:has(.t007-dialog[open]) {
|
|
|
145
136
|
.t007-dialog form {
|
|
146
137
|
display: flex;
|
|
147
138
|
}
|
|
148
|
-
|
|
149
139
|
.t007-dialog::backdrop {
|
|
150
140
|
background-color: transparent;
|
|
151
141
|
}
|
|
152
|
-
|
|
153
142
|
.t007-dialog[open]::backdrop {
|
|
154
143
|
display: block;
|
|
155
144
|
background-color: var(--t007-dialog-backdrop-background);
|
|
@@ -161,35 +150,28 @@ body:has(.t007-dialog[open]) {
|
|
|
161
150
|
background-color: transparent;
|
|
162
151
|
}
|
|
163
152
|
}
|
|
164
|
-
|
|
165
153
|
.t007-dialog > * {
|
|
166
154
|
padding-inline: var(--t007-dialog-padding);
|
|
167
155
|
}
|
|
168
|
-
|
|
169
156
|
.t007-dialog-top-section {
|
|
170
157
|
margin-top: var(--t007-dialog-padding);
|
|
171
158
|
}
|
|
172
|
-
|
|
173
159
|
.t007-dialog-bottom-section {
|
|
174
160
|
margin-bottom: var(--t007-dialog-padding);
|
|
175
161
|
}
|
|
176
|
-
|
|
177
162
|
.t007-dialog-top-section {
|
|
178
163
|
padding-block: var(--t007-dialog-content-padding-block);
|
|
179
164
|
max-height: var(--t007-dialog-max-content-height);
|
|
180
165
|
overflow-x: hidden;
|
|
181
166
|
overflow-y: auto;
|
|
182
167
|
}
|
|
183
|
-
|
|
184
168
|
.t007-dialog:has(.field) .t007-dialog-top-section {
|
|
185
169
|
padding-block-end: 0;
|
|
186
170
|
}
|
|
187
|
-
|
|
188
171
|
.t007-dialog-question {
|
|
189
172
|
color: var(--t007-dialog-message-color);
|
|
190
173
|
font-size: var(--t007-dialog-message-font-size);
|
|
191
174
|
}
|
|
192
|
-
|
|
193
175
|
.t007-dialog-bottom-section {
|
|
194
176
|
align-self: flex-end;
|
|
195
177
|
display: flex;
|
|
@@ -197,7 +179,6 @@ body:has(.t007-dialog[open]) {
|
|
|
197
179
|
justify-content: flex-end;
|
|
198
180
|
gap: var(--t007-dialog-button-gap);
|
|
199
181
|
}
|
|
200
|
-
|
|
201
182
|
.t007-dialog button {
|
|
202
183
|
font-size: var(--t007-dialog-button-font-size);
|
|
203
184
|
min-width: var(--t007-dialog-button-min-width);
|
|
@@ -212,40 +193,32 @@ body:has(.t007-dialog[open]) {
|
|
|
212
193
|
text-shadow: var(--t007-dialog-button-text-shadow);
|
|
213
194
|
transition: 100ms ease;
|
|
214
195
|
}
|
|
215
|
-
|
|
216
196
|
.t007-dialog-confirm-button {
|
|
217
197
|
color: var(--t007-confirm-button-color);
|
|
218
198
|
background: var(--t007-confirm-button-background);
|
|
219
199
|
opacity: 1;
|
|
220
200
|
}
|
|
221
|
-
|
|
222
201
|
.t007-dialog-cancel-button {
|
|
223
202
|
color: var(--t007-cancel-button-color);
|
|
224
203
|
background: var(--t007-cancel-button-background);
|
|
225
204
|
opacity: 0.9;
|
|
226
205
|
}
|
|
227
|
-
|
|
228
206
|
.t007-dialog button:hover {
|
|
229
207
|
cursor: pointer;
|
|
230
208
|
}
|
|
231
|
-
|
|
232
209
|
.t007-dialog-confirm-button:hover {
|
|
233
210
|
opacity: 0.9;
|
|
234
211
|
}
|
|
235
|
-
|
|
236
212
|
.t007-dialog-cancel-button:hover {
|
|
237
213
|
opacity: 1;
|
|
238
214
|
}
|
|
239
|
-
|
|
240
215
|
.t007-dialog button:focus {
|
|
241
216
|
outline-style: var(--t007-button-outline-style);
|
|
242
217
|
outline-width: var(--t007-button-outline-width);
|
|
243
218
|
}
|
|
244
|
-
|
|
245
219
|
.t007-dialog-confirm-button:focus {
|
|
246
220
|
outline-color: var(--t007-confirm-button-outline-color);
|
|
247
221
|
}
|
|
248
|
-
|
|
249
222
|
.t007-dialog-cancel-button:focus {
|
|
250
223
|
outline-color: var(--t007-cancel-button-outline-color);
|
|
251
224
|
}
|
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/
|
|
75
|
-
window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/
|
|
76
|
-
window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/
|
|
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/
|
|
73
|
-
window.T007_INPUT_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/input@latest/
|
|
74
|
-
window.T007_DIALOG_CSS_SRC ??= `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/
|
|
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,56 +1,59 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@t007/dialog",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
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",
|
|
18
18
|
"module": "./dist/index.js",
|
|
19
19
|
"unpkg": "./dist/index.global.js",
|
|
20
20
|
"jsdelivr": "./dist/index.global.js",
|
|
21
|
-
"types": "./
|
|
22
|
-
"style": "./
|
|
21
|
+
"types": "./dist/index.d.ts",
|
|
22
|
+
"style": "./dist/index.css",
|
|
23
23
|
"sideEffects": [
|
|
24
24
|
"*.css"
|
|
25
25
|
],
|
|
26
26
|
"exports": {
|
|
27
27
|
".": {
|
|
28
|
-
"types": "./
|
|
28
|
+
"types": "./dist/index.d.ts",
|
|
29
29
|
"import": "./dist/index.js",
|
|
30
30
|
"default": "./dist/index.js"
|
|
31
31
|
},
|
|
32
32
|
"./standalone": "./dist/standalone.js",
|
|
33
33
|
"./global": "./dist/index.global.js",
|
|
34
|
-
"./style.css": "./
|
|
34
|
+
"./style.css": "./dist/index.css"
|
|
35
|
+
},
|
|
36
|
+
"publishConfig": {
|
|
37
|
+
"access": "public"
|
|
35
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
|
-
"./src/ts/types/index.d.ts",
|
|
42
|
-
"./src/css/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": {
|
|
File without changes
|