@samline/notify 0.2.6 → 0.2.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/README.md +3 -3
- package/dist/index.cjs.js +3 -6
- package/dist/index.esm.js +3 -6
- package/dist/notify.umd.js +3 -6
- package/dist/styles.css +2 -27
- package/docs/browser.md +6 -6
- package/docs/vanilla.md +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -50,8 +50,8 @@ Use the browser build when your project loads scripts directly and cannot compil
|
|
|
50
50
|
|
|
51
51
|
|
|
52
52
|
```html
|
|
53
|
-
<script src="https://unpkg.com/@samline/notify@0.2.
|
|
54
|
-
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.
|
|
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" />
|
|
55
55
|
|
|
56
56
|
<script>
|
|
57
57
|
// Always use an array of strings as the second argument
|
|
@@ -81,7 +81,7 @@ Choose the entrypoint matching your stack so you only import what you need.
|
|
|
81
81
|
| Use case | Import | Guide |
|
|
82
82
|
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- |
|
|
83
83
|
| Vanilla JS | `import { notify, initToasters } from '@samline/notify/vanilla'` | [docs/vanilla.md](docs/vanilla.md) |
|
|
84
|
-
| Browser / CDN | `<script src="https://unpkg.com/@samline/notify@0.2.
|
|
84
|
+
| Browser / CDN | `<script src="https://unpkg.com/@samline/notify@0.2.5/dist/notify.umd.js"></script>`<br/>`const api = window.notify; api.initToasters(...);` | [docs/browser.md](docs/browser.md) |
|
|
85
85
|
| React | `import { Toaster, notify } from '@samline/notify/react'` | [docs/react.md](docs/react.md) |
|
|
86
86
|
| Vue | `import { Toaster, notify } from '@samline/notify/vue'` | [docs/vue.md](docs/vue.md) |
|
|
87
87
|
| Svelte | `import Toaster, { notify } from '@samline/notify/svelte'` | [docs/svelte.md](docs/svelte.md) |
|
package/dist/index.cjs.js
CHANGED
|
@@ -1021,12 +1021,9 @@ function animate(target, keyframesOrOptions, options) {
|
|
|
1021
1021
|
// SVG Gooey Filter para animaciones morphing estilo Sileo
|
|
1022
1022
|
const gooeySVG = `<svg width="0" height="0" style="position:absolute">
|
|
1023
1023
|
<filter id="sileo-gooey">
|
|
1024
|
-
<feGaussianBlur in="SourceGraphic" stdDeviation="
|
|
1025
|
-
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0
|
|
1026
|
-
<
|
|
1027
|
-
<feFuncA type="table" tableValues="0 1" />
|
|
1028
|
-
</feComponentTransfer>
|
|
1029
|
-
<feBlend in="SourceGraphic" in2="thresholded" mode="normal" />
|
|
1024
|
+
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
|
|
1025
|
+
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
|
|
1026
|
+
<feBlend in="SourceGraphic" in2="goo" />
|
|
1030
1027
|
</filter>
|
|
1031
1028
|
</svg>`;
|
|
1032
1029
|
|
package/dist/index.esm.js
CHANGED
|
@@ -1017,12 +1017,9 @@ function animate(target, keyframesOrOptions, options) {
|
|
|
1017
1017
|
// SVG Gooey Filter para animaciones morphing estilo Sileo
|
|
1018
1018
|
const gooeySVG = `<svg width="0" height="0" style="position:absolute">
|
|
1019
1019
|
<filter id="sileo-gooey">
|
|
1020
|
-
<feGaussianBlur in="SourceGraphic" stdDeviation="
|
|
1021
|
-
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0
|
|
1022
|
-
<
|
|
1023
|
-
<feFuncA type="table" tableValues="0 1" />
|
|
1024
|
-
</feComponentTransfer>
|
|
1025
|
-
<feBlend in="SourceGraphic" in2="thresholded" mode="normal" />
|
|
1020
|
+
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
|
|
1021
|
+
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
|
|
1022
|
+
<feBlend in="SourceGraphic" in2="goo" />
|
|
1026
1023
|
</filter>
|
|
1027
1024
|
</svg>`;
|
|
1028
1025
|
|
package/dist/notify.umd.js
CHANGED
|
@@ -1023,12 +1023,9 @@
|
|
|
1023
1023
|
// SVG Gooey Filter para animaciones morphing estilo Sileo
|
|
1024
1024
|
const gooeySVG = `<svg width="0" height="0" style="position:absolute">
|
|
1025
1025
|
<filter id="sileo-gooey">
|
|
1026
|
-
<feGaussianBlur in="SourceGraphic" stdDeviation="
|
|
1027
|
-
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0
|
|
1028
|
-
<
|
|
1029
|
-
<feFuncA type="table" tableValues="0 1" />
|
|
1030
|
-
</feComponentTransfer>
|
|
1031
|
-
<feBlend in="SourceGraphic" in2="thresholded" mode="normal" />
|
|
1026
|
+
<feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur" />
|
|
1027
|
+
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
|
|
1028
|
+
<feBlend in="SourceGraphic" in2="goo" />
|
|
1032
1029
|
</filter>
|
|
1033
1030
|
</svg>`;
|
|
1034
1031
|
|
package/dist/styles.css
CHANGED
|
@@ -44,11 +44,7 @@
|
|
|
44
44
|
color: var(--sileo-foreground);
|
|
45
45
|
padding: 0.75rem 0.875rem;
|
|
46
46
|
border-radius: var(--sileo-roundness, 1rem);
|
|
47
|
-
|
|
48
|
-
box-shadow:
|
|
49
|
-
0 0.75rem 1.6rem rgba(2,6,23,0.55),
|
|
50
|
-
0 0.25rem 0.6rem rgba(2,6,23,0.35),
|
|
51
|
-
inset 0 0.25rem 0.6rem rgba(255,255,255,0.02);
|
|
47
|
+
box-shadow: 0 0.375rem 1.125rem rgba(2,6,23,0.6);
|
|
52
48
|
display: flex;
|
|
53
49
|
gap: 0.5rem;
|
|
54
50
|
align-items: center;
|
|
@@ -78,32 +74,11 @@
|
|
|
78
74
|
align-items: center;
|
|
79
75
|
justify-content: center;
|
|
80
76
|
margin-right: 0.5rem;
|
|
81
|
-
box-shadow: 0 0 0.5rem 0.
|
|
77
|
+
box-shadow: 0 0 0.5rem 0.1rem rgba(0,0,0,0.10);
|
|
82
78
|
backdrop-filter: blur(2.5px);
|
|
83
79
|
animation: sileo-badge-pop 0.38s cubic-bezier(.22,1,.36,1) both;
|
|
84
80
|
}
|
|
85
81
|
|
|
86
|
-
/* Left accent / green rim similar to Sileo */
|
|
87
|
-
.sileo-toast::before{
|
|
88
|
-
content: '';
|
|
89
|
-
position: absolute;
|
|
90
|
-
left: 0;
|
|
91
|
-
top: 8%;
|
|
92
|
-
bottom: 8%;
|
|
93
|
-
width: 0.6rem;
|
|
94
|
-
border-radius: 999px;
|
|
95
|
-
background: linear-gradient(180deg, rgba(34,197,94,1) 0%, rgba(6,95,70,1) 100%);
|
|
96
|
-
box-shadow: 0 6px 18px rgba(16,185,129,0.18);
|
|
97
|
-
transform: translateX(-8%);
|
|
98
|
-
pointer-events: none;
|
|
99
|
-
mix-blend-mode: screen;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
/* Slight top badge overlap to create the 'pill' effect */
|
|
103
|
-
.sileo-toast[data-type="success"] .sileo-toast-badge{
|
|
104
|
-
box-shadow: 0 6px 18px rgba(16,185,129,0.12), 0 0 0.25rem rgba(0,0,0,0.18) inset;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
82
|
@keyframes sileo-badge-pop {
|
|
108
83
|
0% { transform: scale(0.7); opacity: 0; }
|
|
109
84
|
60% { transform: scale(1.15); opacity: 1; }
|
package/docs/browser.md
CHANGED
|
@@ -8,8 +8,8 @@ Use this package directly in the browser when you cannot use npm modules or a bu
|
|
|
8
8
|
Add the stylesheet and UMD bundle to your HTML:
|
|
9
9
|
|
|
10
10
|
```html
|
|
11
|
-
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.
|
|
12
|
-
<script src="https://unpkg.com/@samline/notify@0.2.
|
|
11
|
+
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.7/dist/styles.css">
|
|
12
|
+
<script src="https://unpkg.com/@samline/notify@0.2.7/dist/notify.umd.js"></script>
|
|
13
13
|
<script>
|
|
14
14
|
document.addEventListener('DOMContentLoaded', () => {
|
|
15
15
|
const api = window.notify; // or window.notifications for legacy
|
|
@@ -40,8 +40,8 @@ Add the stylesheet and UMD bundle to your HTML:
|
|
|
40
40
|
|
|
41
41
|
### Advanced Options
|
|
42
42
|
|
|
43
|
-
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.
|
|
44
|
-
<script src="https://unpkg.com/@samline/notify@0.2.
|
|
43
|
+
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.7/dist/styles.css">
|
|
44
|
+
<script src="https://unpkg.com/@samline/notify@0.2.7/dist/notify.umd.js"></script>
|
|
45
45
|
| Property | Type | Default | Description |
|
|
46
46
|
| ------------- | -------------------------------------- | ----------- | ------------------------------------------- |
|
|
47
47
|
| `title` | string | — | Toast title |
|
|
@@ -55,8 +55,8 @@ Add the stylesheet and UMD bundle to your HTML:
|
|
|
55
55
|
| `styles` | { title, description, badge, button } | — | Custom class overrides for sub-elements |
|
|
56
56
|
| `roundness` | number | 16 | Border radius in pixels |
|
|
57
57
|
| `autopilot` | boolean \| object | true | Auto expand/collapse timing |
|
|
58
|
-
<script src="https://unpkg.com/@samline/notify@0.2.
|
|
59
|
-
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.
|
|
58
|
+
<script src="https://unpkg.com/@samline/notify@0.2.7/dist/notify.umd.js"></script>
|
|
59
|
+
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.7/dist/styles.css" />
|
|
60
60
|
|
|
61
61
|
```js
|
|
62
62
|
api.success({
|
package/docs/vanilla.md
CHANGED
|
@@ -178,8 +178,8 @@ notify.success({
|
|
|
178
178
|
If you are not using a bundler, use the [Browser guide](./browser.md) for CDN usage. Example:
|
|
179
179
|
|
|
180
180
|
```html
|
|
181
|
-
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.
|
|
182
|
-
<script src="https://unpkg.com/@samline/notify@0.2.
|
|
181
|
+
<link rel="stylesheet" href="https://unpkg.com/@samline/notify@0.2.7/dist/styles.css">
|
|
182
|
+
<script src="https://unpkg.com/@samline/notify@0.2.7/dist/notify.umd.js"></script>
|
|
183
183
|
<script>
|
|
184
184
|
document.addEventListener('DOMContentLoaded', () => {
|
|
185
185
|
const api = window.notify;
|
package/package.json
CHANGED