@samline/notify 0.2.7 → 1.0.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/LICENSE +22 -0
- package/README.md +121 -150
- package/dist/browser-notify.js +69 -0
- package/dist/cc-2Yt7NqMX.mjs +21 -0
- package/dist/cc-B6peeNak.mjs +33 -0
- package/dist/cc-BWuAzFJ6.js +12 -0
- package/dist/cc-CaBHsjUt.js +34 -0
- package/dist/cc-DGff5sSY.js +21 -0
- package/dist/cc-he3fHS3P.mjs +12 -0
- package/dist/notify.d.mts +44 -0
- package/dist/notify.d.mts.map +1 -0
- package/dist/notify.d.ts +44 -0
- package/dist/notify.d.ts.map +1 -0
- package/dist/notify.js +90 -0
- package/dist/notify.mjs +87 -0
- package/dist/react-notify-12s-7LOZlSBi.js +1068 -0
- package/dist/react-notify-12s-BjWbwTu8.mjs +1066 -0
- package/dist/react.d.mts +66 -0
- package/dist/react.d.mts.map +1 -0
- package/dist/react.d.ts +66 -0
- package/dist/react.d.ts.map +1 -0
- package/dist/react.js +18 -0
- package/dist/react.mjs +10 -0
- package/dist/styles.css +477 -89
- package/dist/svelte.d.mts +45 -0
- package/dist/svelte.d.mts.map +1 -0
- package/dist/svelte.d.ts +45 -0
- package/dist/svelte.d.ts.map +1 -0
- package/dist/svelte.js +168 -0
- package/dist/svelte.mjs +165 -0
- package/dist/vue.d.mts +103 -0
- package/dist/vue.d.mts.map +1 -0
- package/dist/vue.d.ts +103 -0
- package/dist/vue.d.ts.map +1 -0
- package/dist/vue.js +2099 -0
- package/dist/vue.mjs +2096 -0
- package/package.json +95 -57
- package/dist/index.cjs.js +0 -1249
- package/dist/index.esm.js +0 -1242
- package/dist/notify.umd.js +0 -1255
- package/docs/browser.md +0 -92
- package/docs/react.md +0 -275
- package/docs/svelte.md +0 -267
- package/docs/vanilla.md +0 -256
- package/docs/vue.md +0 -301
- package/rollup.config.mjs +0 -56
package/LICENSE
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Samuel Olvera (samline)
|
|
4
|
+
Copyright (c) 2023 Aaryan Arora (hiaaryan)
|
|
5
|
+
|
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
in the Software without restriction, including without limitation the rights
|
|
9
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
furnished to do so, subject to the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,208 +1,179 @@
|
|
|
1
|
-
|
|
2
1
|
# Notify
|
|
3
2
|
|
|
4
|
-
A
|
|
3
|
+
A toast notification library designed to bring a beautiful animated experience to React, Vue, Svelte, and Vanilla JS.
|
|
4
|
+
|
|
5
|
+
---
|
|
5
6
|
|
|
6
|
-
|
|
7
|
+
Inspired by Sileo: [https://github.com/hiaaryan/sileo](https://github.com/hiaaryan/sileo)
|
|
7
8
|
|
|
8
|
-
|
|
9
|
+
---
|
|
9
10
|
|
|
10
|
-
|
|
11
|
-
- Entry Points
|
|
12
|
-
- Quick Start
|
|
13
|
-
- Documentation Guides
|
|
14
|
-
- Shared API Summary
|
|
15
|
-
- Shared Options
|
|
16
|
-
- Notes
|
|
17
|
-
- License
|
|
11
|
+
## Table of Contents
|
|
18
12
|
|
|
19
|
-
Installation
|
|
13
|
+
- [Installation](#installation)
|
|
14
|
+
- [CDN / Browser](#cdn--browser)
|
|
15
|
+
- [Entrypoints](#entrypoints)
|
|
16
|
+
- [Quick Start](#quick-start)
|
|
17
|
+
- [What can you do?](#what-can-you-do)
|
|
18
|
+
- [General API](#general-api)
|
|
19
|
+
- [Minimal Example](#minimal-example)
|
|
20
|
+
- [Framework Documentation](#framework-documentation)
|
|
21
|
+
- [License](#license)
|
|
20
22
|
|
|
21
|
-
|
|
23
|
+
---
|
|
22
24
|
|
|
23
|
-
|
|
25
|
+
## Installation
|
|
24
26
|
|
|
25
27
|
```bash
|
|
26
28
|
npm install @samline/notify
|
|
27
29
|
```
|
|
28
30
|
|
|
29
|
-
|
|
31
|
+
---
|
|
30
32
|
|
|
31
|
-
|
|
32
|
-
pnpm add @samline/notify
|
|
33
|
-
```
|
|
33
|
+
## CDN / Browser
|
|
34
34
|
|
|
35
|
-
|
|
35
|
+
Include the generated UMD file (`dist/browser-notify.js`) in your HTML:
|
|
36
36
|
|
|
37
|
-
```
|
|
38
|
-
|
|
37
|
+
```html
|
|
38
|
+
<script src="dist/browser-notify.js"></script>
|
|
39
|
+
<script>
|
|
40
|
+
Notify.show({
|
|
41
|
+
title: 'Hello from the browser',
|
|
42
|
+
type: 'success',
|
|
43
|
+
duration: 2000,
|
|
44
|
+
})
|
|
45
|
+
</script>
|
|
39
46
|
```
|
|
40
47
|
|
|
41
|
-
|
|
48
|
+
---
|
|
42
49
|
|
|
43
|
-
|
|
44
|
-
bun add @samline/notify
|
|
45
|
-
```
|
|
50
|
+
## Entrypoints
|
|
46
51
|
|
|
47
|
-
|
|
52
|
+
| Entrypoint | Description |
|
|
53
|
+
| ---------------------------------- | ----------------------------- |
|
|
54
|
+
| @samline/notify | VanillaJS API |
|
|
55
|
+
| @samline/notify/react | React API (hooks and helpers) |
|
|
56
|
+
| @samline/notify/vue | Vue API (composable) |
|
|
57
|
+
| @samline/notify/svelte | Svelte API (store) |
|
|
58
|
+
| @samline/notify/dist/browser-notify | Global for Browser/CDN |
|
|
48
59
|
|
|
49
|
-
|
|
60
|
+
---
|
|
50
61
|
|
|
62
|
+
## Quick Start
|
|
51
63
|
|
|
52
|
-
|
|
53
|
-
<script src="https://unpkg.com/@samline/notify@0.2.7/dist/notify.umd.js"></script>
|
|
54
|
-
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.7/dist/styles.css" />
|
|
64
|
+
### Import by framework
|
|
55
65
|
|
|
56
|
-
|
|
57
|
-
// Always use an array of strings as the second argument
|
|
58
|
-
// Correct usage:
|
|
59
|
-
const api = window.notify || window.notifications;
|
|
60
|
-
api.initToasters(document.body, ['top-left']);
|
|
61
|
-
api.notify({
|
|
62
|
-
title: 'Saved',
|
|
63
|
-
description: 'Changes saved',
|
|
64
|
-
type: 'success'
|
|
65
|
-
// You can omit position if you only initialized one position
|
|
66
|
-
});
|
|
67
|
-
</script>
|
|
68
|
-
```
|
|
66
|
+
**VanillaJS (default):**
|
|
69
67
|
|
|
68
|
+
```js
|
|
69
|
+
import { showNotifyToast } from '@samline/notify'
|
|
70
|
+
showNotifyToast({ title: 'Hello world!', type: 'success' })
|
|
71
|
+
```
|
|
70
72
|
|
|
71
|
-
|
|
72
|
-
> - The second argument to `initToasters` **must be an array of strings** with the positions (e.g. `['top-left']`).
|
|
73
|
-
> - **Do not use** `document.body['top-left']` (this is `undefined` and will not work).
|
|
74
|
-
> - If you initialize only one position, toasts without an explicit position will go there automatically (dynamic fallback).
|
|
75
|
-
> - If you initialize multiple positions, toasts without an explicit position will go to `'top-right'` by default.
|
|
73
|
+
**React:**
|
|
76
74
|
|
|
77
|
-
|
|
75
|
+
```js
|
|
76
|
+
import { showNotifyToast } from '@samline/notify/react'
|
|
77
|
+
showNotifyToast({ title: 'Hello from React!', type: 'success' })
|
|
78
|
+
```
|
|
78
79
|
|
|
79
|
-
|
|
80
|
+
**Vue:**
|
|
80
81
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
| React | `import { Toaster, notify } from '@samline/notify/react'` | [docs/react.md](docs/react.md) |
|
|
86
|
-
| Vue | `import { Toaster, notify } from '@samline/notify/vue'` | [docs/vue.md](docs/vue.md) |
|
|
87
|
-
| Svelte | `import Toaster, { notify } from '@samline/notify/svelte'` | [docs/svelte.md](docs/svelte.md) |
|
|
82
|
+
```js
|
|
83
|
+
import { showNotifyToast, useNotifyToasts } from '@samline/notify/vue'
|
|
84
|
+
showNotifyToast({ title: 'Hello from Vue!', type: 'success' })
|
|
85
|
+
```
|
|
88
86
|
|
|
89
|
-
|
|
87
|
+
**Svelte:**
|
|
90
88
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
- Svelte: [docs/svelte.md](docs/svelte.md)
|
|
89
|
+
```js
|
|
90
|
+
import { showNotifyToast, notifyToasts } from '@samline/notify/svelte'
|
|
91
|
+
showNotifyToast({ title: 'Hello from Svelte!', type: 'success' })
|
|
92
|
+
```
|
|
96
93
|
|
|
97
|
-
|
|
94
|
+
Each framework imports from its own context, ensuring optimal integration and correct types. See the specific documentation for advanced examples.
|
|
98
95
|
|
|
99
|
-
|
|
96
|
+
For complete examples and plug-and-play UI, see your framework's documentation:
|
|
100
97
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
notify.info(options)
|
|
107
|
-
notify.warning(options)
|
|
108
|
-
notify.action(options)
|
|
109
|
-
notify.promise(promise, messages)
|
|
110
|
-
notify.dismiss(id)
|
|
111
|
-
notify.clear()
|
|
112
|
-
```
|
|
98
|
+
- [React](docs/react.md)
|
|
99
|
+
- [Vue 3](docs/vue.md)
|
|
100
|
+
- [Svelte](docs/svelte.md)
|
|
101
|
+
- [VanillaJS](docs/vanillajs.md)
|
|
102
|
+
- [Browser / CDN](docs/browser.md)
|
|
113
103
|
|
|
114
|
-
|
|
104
|
+
---
|
|
115
105
|
|
|
106
|
+
## What can you do?
|
|
116
107
|
|
|
108
|
+
- Show toasts with physics-based, customizable animations
|
|
109
|
+
- Use the same API in React, Vue, Svelte, VanillaJS, and Browser
|
|
110
|
+
- Customize position, duration, styles, icons, and buttons
|
|
111
|
+
- Integrate plug-and-play UI or create your own rendering
|
|
112
|
+
- Subscribe to toast changes (store/composable/callback)
|
|
113
|
+
- Use from bundlers or directly in HTML
|
|
117
114
|
|
|
118
|
-
|
|
115
|
+
---
|
|
119
116
|
|
|
120
|
-
|
|
117
|
+
## General API
|
|
121
118
|
|
|
122
|
-
|
|
123
|
-
- If you initialize multiple positions, the fallback will be `'top-right'`.
|
|
124
|
-
- If you notify to a position that was not initialized, a warning will appear in the console and the toast will not be shown. This warning is now always triggered, incluso si la posición no existe en el DOM.
|
|
119
|
+
Notify exposes a unified API for all environments. All options and methods are available in each integration.
|
|
125
120
|
|
|
126
|
-
|
|
121
|
+
### Toast Options
|
|
127
122
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
123
|
+
| Option | Type | Description |
|
|
124
|
+
| ----------- | ------------------------------------------------------------------------------------- | ---------------------------- |
|
|
125
|
+
| title | string | Toast title |
|
|
126
|
+
| description | string | Optional description |
|
|
127
|
+
| type | 'success'\|'loading'\|'error'\|'warning'\|'info'\|'action' | Toast type |
|
|
128
|
+
| duration | number | Duration in milliseconds |
|
|
129
|
+
| position | 'top-left'\|'top-center'\|'top-right'\|'bottom-left'\|'bottom-center'\|'bottom-right' | Screen position |
|
|
130
|
+
| styles | { title, description, badge, button } | Custom CSS classes |
|
|
131
|
+
| fill | string | Background color |
|
|
132
|
+
| roundness | number | Border radius |
|
|
133
|
+
| autopilot | boolean\|{ expand, collapse } | Auto expand/collapse control |
|
|
134
|
+
| button | { title: string, onClick: () => void } | Action button |
|
|
138
135
|
|
|
139
|
-
|
|
136
|
+
### Main Methods
|
|
140
137
|
|
|
141
|
-
|
|
138
|
+
- `showNotifyToast(options)` — Show a toast (in all environments)
|
|
139
|
+
- `onNotifyToastsChange(fn)` — Subscribe to changes (VanillaJS)
|
|
140
|
+
- `useNotifyToasts()` — Vue composable
|
|
141
|
+
- `notifyToasts` — Svelte store
|
|
142
142
|
|
|
143
|
-
|
|
144
|
-
| ------------- | -------------------------------------- | ----------- | ------------------------------------------- |
|
|
145
|
-
| `title` | string | — | Toast title |
|
|
146
|
-
| `description` | string \| ReactNode \| SvelteNode | — | Optional body text (JSX, HTML, or string) |
|
|
147
|
-
| `type` | `info\|success\|error\|warning\|action`| `info` | Visual intent |
|
|
148
|
-
| `position` | string | `top-right` | One of toast positions |
|
|
149
|
-
| `duration` | number \| null | `4000` | Auto-dismiss timeout in ms (null = sticky) |
|
|
150
|
-
| `button` | { title: string, onClick: () => void } | — | Optional action button |
|
|
151
|
-
| `icon` | string \| ReactNode \| SvelteNode | — | Custom icon (SVG, JSX, or node) |
|
|
152
|
-
| `fill` | string | — | Custom background color (SVG or badge) |
|
|
153
|
-
| `styles` | { title, description, badge, button } | — | Custom class overrides for sub-elements |
|
|
154
|
-
| `roundness` | number | 16 | Border radius in pixels |
|
|
155
|
-
| `autopilot` | boolean \| object | true | Auto expand/collapse timing |
|
|
143
|
+
---
|
|
156
144
|
|
|
157
|
-
|
|
145
|
+
## Minimal Example
|
|
158
146
|
|
|
159
147
|
```js
|
|
160
|
-
|
|
161
|
-
title:
|
|
162
|
-
|
|
163
|
-
|
|
148
|
+
showNotifyToast({
|
|
149
|
+
title: 'Action required',
|
|
150
|
+
description: 'Click the button to continue',
|
|
151
|
+
type: 'action',
|
|
152
|
+
button: {
|
|
153
|
+
title: 'Continue',
|
|
154
|
+
onClick: () => alert('You continued!'),
|
|
155
|
+
},
|
|
164
156
|
styles: {
|
|
165
|
-
title:
|
|
166
|
-
|
|
167
|
-
button: "bg-white/10!"
|
|
157
|
+
title: 'my-title',
|
|
158
|
+
button: 'my-button',
|
|
168
159
|
},
|
|
160
|
+
fill: '#fffae0',
|
|
169
161
|
roundness: 24,
|
|
170
|
-
|
|
171
|
-
})
|
|
162
|
+
duration: 5000,
|
|
163
|
+
})
|
|
172
164
|
```
|
|
173
165
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
The `promise` method supports advanced flows:
|
|
177
|
-
|
|
178
|
-
```js
|
|
179
|
-
notify.promise(fetchData(), {
|
|
180
|
-
loading: { title: "Loading..." },
|
|
181
|
-
success: (data) => ({ title: `Loaded ${data.name}` }),
|
|
182
|
-
error: (err) => ({ title: "Error", description: err.message }),
|
|
183
|
-
action: (data) => ({ title: "Action required", button: { title: "Retry", onClick: () => retry() } })
|
|
184
|
-
});
|
|
185
|
-
```
|
|
166
|
+
## Framework Documentation
|
|
186
167
|
|
|
187
|
-
|
|
168
|
+
- [React](docs/react.md)
|
|
169
|
+
- [Vue 3](docs/vue.md)
|
|
170
|
+
- [Svelte](docs/svelte.md)
|
|
171
|
+
- [VanillaJS](docs/vanillajs.md)
|
|
172
|
+
- [Browser / CDN](docs/browser.md)
|
|
173
|
+
- [General API](docs/api.md)
|
|
188
174
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
| Prop | Type | Default | Description |
|
|
192
|
-
| --------- | ----------------------------------------- | ------------ | ------------------------------------------- |
|
|
193
|
-
| `position`| string | top-right | Default toast position |
|
|
194
|
-
| `offset` | number \| string \| {top,right,bottom,left}| 0 | Distance from viewport edges |
|
|
195
|
-
| `options` | Partial<Options> | — | Default options for all toasts |
|
|
196
|
-
| `theme` | "light" \| "dark" \| "system" | system | Color scheme (auto, light, dark) |
|
|
197
|
-
|
|
198
|
-
See framework-specific guides for more examples.
|
|
199
|
-
|
|
200
|
-
Notes
|
|
201
|
-
|
|
202
|
-
- Accessibility: toasters use `role="status"` and `aria-live="polite"` by default. Respect `prefers-reduced-motion` in your UI.
|
|
203
|
-
- The package includes a UMD browser bundle for projects without a build step.
|
|
204
|
-
- Motion runtime is optional for module builds; UMD consumers should include the provided `dist/styles.css` for visuals.
|
|
175
|
+
---
|
|
205
176
|
|
|
206
|
-
License
|
|
177
|
+
## License
|
|
207
178
|
|
|
208
179
|
MIT
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
(() => {
|
|
2
|
+
// src/core/notify-core.ts
|
|
3
|
+
class NotifyCore {
|
|
4
|
+
toasts = [];
|
|
5
|
+
listeners = new Set;
|
|
6
|
+
position = "top-right";
|
|
7
|
+
options = undefined;
|
|
8
|
+
idCounter = 0;
|
|
9
|
+
generateId() {
|
|
10
|
+
return `${++this.idCounter}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
|
|
11
|
+
}
|
|
12
|
+
subscribe(fn) {
|
|
13
|
+
this.listeners.add(fn);
|
|
14
|
+
fn(this.toasts);
|
|
15
|
+
return () => this.listeners.delete(fn);
|
|
16
|
+
}
|
|
17
|
+
emit() {
|
|
18
|
+
for (const fn of this.listeners)
|
|
19
|
+
fn(this.toasts);
|
|
20
|
+
}
|
|
21
|
+
update(fn) {
|
|
22
|
+
this.toasts = fn(this.toasts);
|
|
23
|
+
this.emit();
|
|
24
|
+
}
|
|
25
|
+
dismiss(id) {
|
|
26
|
+
const item = this.toasts.find((t) => t.id === id);
|
|
27
|
+
if (!item || item.exiting)
|
|
28
|
+
return;
|
|
29
|
+
this.update((prev) => prev.map((t) => t.id === id ? { ...t, exiting: true } : t));
|
|
30
|
+
setTimeout(() => this.update((prev) => prev.filter((t) => t.id !== id)), 600);
|
|
31
|
+
}
|
|
32
|
+
show(opts) {
|
|
33
|
+
const id = opts.title ? `notify-${opts.title}` : "notify-default";
|
|
34
|
+
const prevItem = this.toasts.find((t) => t.id === id);
|
|
35
|
+
const instanceId = prevItem?.instanceId ?? this.generateId();
|
|
36
|
+
const state = opts.type ?? prevItem?.type ?? "success";
|
|
37
|
+
const item = {
|
|
38
|
+
...prevItem,
|
|
39
|
+
...opts,
|
|
40
|
+
id,
|
|
41
|
+
instanceId,
|
|
42
|
+
type: state
|
|
43
|
+
};
|
|
44
|
+
this.update((prev) => {
|
|
45
|
+
const filtered = prev.filter((t) => t.id !== id);
|
|
46
|
+
return [...filtered, item];
|
|
47
|
+
});
|
|
48
|
+
return id;
|
|
49
|
+
}
|
|
50
|
+
getToasts() {
|
|
51
|
+
return this.toasts;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
var notifyCore = new NotifyCore;
|
|
55
|
+
|
|
56
|
+
// src/browser-notify.js
|
|
57
|
+
var notifyApi = {
|
|
58
|
+
show: (options) => notifyCore.show(options),
|
|
59
|
+
dismiss: (id) => notifyCore.dismiss(id),
|
|
60
|
+
clear: () => {
|
|
61
|
+
for (const toast of notifyCore.getToasts()) {
|
|
62
|
+
notifyCore.dismiss(toast.id);
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
subscribe: (listener) => notifyCore.subscribe(listener)
|
|
66
|
+
};
|
|
67
|
+
window.Notify = notifyApi;
|
|
68
|
+
window.Sileo = notifyApi;
|
|
69
|
+
})();
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
function __insertCSS(code) {
|
|
2
|
+
if (!code || typeof document == 'undefined') return
|
|
3
|
+
let head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
+
let style = document.createElement('style')
|
|
5
|
+
style.type = 'text/css'
|
|
6
|
+
head.appendChild(style)
|
|
7
|
+
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
function _extends() {
|
|
11
|
+
_extends = Object.assign || function assign(target) {
|
|
12
|
+
for(var i = 1; i < arguments.length; i++){
|
|
13
|
+
var source = arguments[i];
|
|
14
|
+
for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
|
|
15
|
+
}
|
|
16
|
+
return target;
|
|
17
|
+
};
|
|
18
|
+
return _extends.apply(this, arguments);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export { _extends as _ };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
function __insertCSS(code) {
|
|
2
|
+
if (!code || typeof document == 'undefined') return
|
|
3
|
+
let head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
+
let style = document.createElement('style')
|
|
5
|
+
style.type = 'text/css'
|
|
6
|
+
head.appendChild(style)
|
|
7
|
+
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
function _extends() {
|
|
11
|
+
_extends = Object.assign || function assign(target) {
|
|
12
|
+
for(var i = 1; i < arguments.length; i++){
|
|
13
|
+
var source = arguments[i];
|
|
14
|
+
for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
|
|
15
|
+
}
|
|
16
|
+
return target;
|
|
17
|
+
};
|
|
18
|
+
return _extends.apply(this, arguments);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function _object_without_properties_loose(source, excluded) {
|
|
22
|
+
if (source == null) return {};
|
|
23
|
+
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
|
|
24
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
25
|
+
key = sourceKeys[i];
|
|
26
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
27
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
28
|
+
target[key] = source[key];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export { _extends as _, _object_without_properties_loose as a };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
function _extends() {
|
|
2
|
+
_extends = Object.assign || function assign(target) {
|
|
3
|
+
for(var i = 1; i < arguments.length; i++){
|
|
4
|
+
var source = arguments[i];
|
|
5
|
+
for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
|
|
6
|
+
}
|
|
7
|
+
return target;
|
|
8
|
+
};
|
|
9
|
+
return _extends.apply(this, arguments);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
exports._extends = _extends;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
function __insertCSS(code) {
|
|
2
|
+
if (!code || typeof document == 'undefined') return
|
|
3
|
+
let head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
+
let style = document.createElement('style')
|
|
5
|
+
style.type = 'text/css'
|
|
6
|
+
head.appendChild(style)
|
|
7
|
+
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
function _extends() {
|
|
11
|
+
_extends = Object.assign || function assign(target) {
|
|
12
|
+
for(var i = 1; i < arguments.length; i++){
|
|
13
|
+
var source = arguments[i];
|
|
14
|
+
for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
|
|
15
|
+
}
|
|
16
|
+
return target;
|
|
17
|
+
};
|
|
18
|
+
return _extends.apply(this, arguments);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
function _object_without_properties_loose(source, excluded) {
|
|
22
|
+
if (source == null) return {};
|
|
23
|
+
var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
|
|
24
|
+
for(i = 0; i < sourceKeys.length; i++){
|
|
25
|
+
key = sourceKeys[i];
|
|
26
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
27
|
+
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
|
|
28
|
+
target[key] = source[key];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
exports._extends = _extends;
|
|
34
|
+
exports._object_without_properties_loose = _object_without_properties_loose;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
function __insertCSS(code) {
|
|
2
|
+
if (!code || typeof document == 'undefined') return
|
|
3
|
+
let head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
+
let style = document.createElement('style')
|
|
5
|
+
style.type = 'text/css'
|
|
6
|
+
head.appendChild(style)
|
|
7
|
+
;style.styleSheet ? (style.styleSheet.cssText = code) : style.appendChild(document.createTextNode(code))
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
function _extends() {
|
|
11
|
+
_extends = Object.assign || function assign(target) {
|
|
12
|
+
for(var i = 1; i < arguments.length; i++){
|
|
13
|
+
var source = arguments[i];
|
|
14
|
+
for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
|
|
15
|
+
}
|
|
16
|
+
return target;
|
|
17
|
+
};
|
|
18
|
+
return _extends.apply(this, arguments);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
exports._extends = _extends;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
function _extends() {
|
|
2
|
+
_extends = Object.assign || function assign(target) {
|
|
3
|
+
for(var i = 1; i < arguments.length; i++){
|
|
4
|
+
var source = arguments[i];
|
|
5
|
+
for(var key in source)if (Object.prototype.hasOwnProperty.call(source, key)) target[key] = source[key];
|
|
6
|
+
}
|
|
7
|
+
return target;
|
|
8
|
+
};
|
|
9
|
+
return _extends.apply(this, arguments);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export { _extends as _ };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
type NotifyState = "success" | "loading" | "error" | "warning" | "info" | "action";
|
|
2
|
+
interface NotifyStyles {
|
|
3
|
+
title?: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
badge?: string;
|
|
6
|
+
button?: string;
|
|
7
|
+
}
|
|
8
|
+
interface NotifyButton {
|
|
9
|
+
title: string;
|
|
10
|
+
onClick: () => void;
|
|
11
|
+
}
|
|
12
|
+
declare const NOTIFY_POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
|
|
13
|
+
type NotifyPosition = (typeof NOTIFY_POSITIONS)[number];
|
|
14
|
+
interface NotifyOptions {
|
|
15
|
+
title?: string;
|
|
16
|
+
description?: string;
|
|
17
|
+
type?: NotifyState;
|
|
18
|
+
position?: NotifyPosition;
|
|
19
|
+
duration?: number | null;
|
|
20
|
+
icon?: any;
|
|
21
|
+
styles?: NotifyStyles;
|
|
22
|
+
fill?: string;
|
|
23
|
+
roundness?: number;
|
|
24
|
+
autopilot?: boolean | {
|
|
25
|
+
expand?: number;
|
|
26
|
+
collapse?: number;
|
|
27
|
+
};
|
|
28
|
+
button?: NotifyButton;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
interface NotifyItem extends NotifyOptions {
|
|
32
|
+
id: string;
|
|
33
|
+
instanceId: string;
|
|
34
|
+
exiting?: boolean;
|
|
35
|
+
autoExpandDelayMs?: number;
|
|
36
|
+
autoCollapseDelayMs?: number;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
declare function showNotifyToast(options: NotifyOptions): string;
|
|
40
|
+
declare function onNotifyToastsChange(fn: (toasts: NotifyItem[]) => void): () => void;
|
|
41
|
+
|
|
42
|
+
export { onNotifyToastsChange, showNotifyToast };
|
|
43
|
+
export type { NotifyButton, NotifyOptions, NotifyPosition, NotifyState, NotifyStyles };
|
|
44
|
+
//# sourceMappingURL=notify.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"notify.d.mts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/vanilla-notify.ts"],"mappings":"AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACPA,iBAAiB,eAAe,UAAU,aAAa;AACvD,iBAAiB,oBAAoB,cAAc,UAAU;;;;","names":[]}
|
package/dist/notify.d.ts
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
type NotifyState = "success" | "loading" | "error" | "warning" | "info" | "action";
|
|
2
|
+
interface NotifyStyles {
|
|
3
|
+
title?: string;
|
|
4
|
+
description?: string;
|
|
5
|
+
badge?: string;
|
|
6
|
+
button?: string;
|
|
7
|
+
}
|
|
8
|
+
interface NotifyButton {
|
|
9
|
+
title: string;
|
|
10
|
+
onClick: () => void;
|
|
11
|
+
}
|
|
12
|
+
declare const NOTIFY_POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
|
|
13
|
+
type NotifyPosition = (typeof NOTIFY_POSITIONS)[number];
|
|
14
|
+
interface NotifyOptions {
|
|
15
|
+
title?: string;
|
|
16
|
+
description?: string;
|
|
17
|
+
type?: NotifyState;
|
|
18
|
+
position?: NotifyPosition;
|
|
19
|
+
duration?: number | null;
|
|
20
|
+
icon?: any;
|
|
21
|
+
styles?: NotifyStyles;
|
|
22
|
+
fill?: string;
|
|
23
|
+
roundness?: number;
|
|
24
|
+
autopilot?: boolean | {
|
|
25
|
+
expand?: number;
|
|
26
|
+
collapse?: number;
|
|
27
|
+
};
|
|
28
|
+
button?: NotifyButton;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
interface NotifyItem extends NotifyOptions {
|
|
32
|
+
id: string;
|
|
33
|
+
instanceId: string;
|
|
34
|
+
exiting?: boolean;
|
|
35
|
+
autoExpandDelayMs?: number;
|
|
36
|
+
autoCollapseDelayMs?: number;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
declare function showNotifyToast(options: NotifyOptions): string;
|
|
40
|
+
declare function onNotifyToastsChange(fn: (toasts: NotifyItem[]) => void): () => void;
|
|
41
|
+
|
|
42
|
+
export { onNotifyToastsChange, showNotifyToast };
|
|
43
|
+
export type { NotifyButton, NotifyOptions, NotifyPosition, NotifyState, NotifyStyles };
|
|
44
|
+
//# sourceMappingURL=notify.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"notify.d.ts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/vanilla-notify.ts"],"mappings":"AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACPA,iBAAiB,eAAe,UAAU,aAAa;AACvD,iBAAiB,oBAAoB,cAAc,UAAU;;;;","names":[]}
|