@yidev/wtoast 0.1.9 → 0.1.10
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/CHANGELOG.md +12 -4
- package/README.md +72 -15
- package/dist/cdn/index.css +109 -0
- package/dist/cdn/index.css.map +1 -0
- package/dist/cdn/index.d.ts +64 -0
- package/dist/cdn/index.js +423 -0
- package/dist/cdn/index.js.map +1 -0
- package/dist/index.cjs +49 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +64 -0
- package/dist/index.js +5 -5
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,7 +1,15 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
|
-
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
|
+
|
|
5
|
+
### [0.1.10](https://github.com/Xeuz27/wToast/compare/v0.1.9...v0.1.10) (2026-01-12)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Added
|
|
9
|
+
|
|
10
|
+
* soporte de uso a traves de cdn con multiples buids ([960a46a](https://github.com/Xeuz27/wToast/commit/960a46a36b92126190f1ff22fbac8cc83039118c))
|
|
11
|
+
* uso de frameworkds como react es ahora dinamico ([3eff960](https://github.com/Xeuz27/wToast/commit/3eff96081f058b6c85c6a2ce06828f1e96f0ea30))
|
|
12
|
+
|
|
5
13
|
### [0.1.9](https://github.com/Xeuz27/wToast/compare/v0.1.8...v0.1.10) (2025-12-29)
|
|
6
14
|
|
|
7
15
|
### Fixed
|
package/README.md
CHANGED
|
@@ -84,31 +84,76 @@ Metodos encadenables:
|
|
|
84
84
|
|
|
85
85
|
## 📦 Uso en frameworks
|
|
86
86
|
|
|
87
|
-
###
|
|
87
|
+
### 🌟 Astro
|
|
88
88
|
|
|
89
|
-
|
|
90
|
-
import { wToast } from "@yidev/wtoast"
|
|
91
|
-
const { show } = wToast()
|
|
92
|
-
//styles/index.css
|
|
93
|
-
import "@yidev/wtoast/index.css"
|
|
89
|
+
Funciona sin configuración adicional.
|
|
94
90
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
}
|
|
91
|
+
```astro
|
|
92
|
+
---
|
|
93
|
+
const { text, id } = Astro.props
|
|
94
|
+
import '@yidev/wtoast/index.css'
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
<button id='algun-id' class='btn'>alguna Accion</button>
|
|
99
|
+
|
|
100
|
+
<script>
|
|
101
|
+
import { wToast } from '@yidev/wtoast'
|
|
102
|
+
const { show, promise } = wToast()
|
|
103
|
+
|
|
104
|
+
document.getElementById("algun-id")?.addEventListener("click", () => {
|
|
105
|
+
show("toast para alguna accion", {
|
|
106
|
+
type: "info",
|
|
107
|
+
duration: 2500,
|
|
108
|
+
})
|
|
109
|
+
})
|
|
110
|
+
</script>
|
|
98
111
|
```
|
|
99
112
|
|
|
100
|
-
|
|
113
|
+
si usas navegacion en tu sitio web tienes que envolver tus eventos en astro:page-load de el componente <clientRouter/>
|
|
114
|
+
como se especifica en [manejo de scripts con view transitions](https://docs.astro.build/es/guides/view-transitions/#script-behavior-with-view-transitions)
|
|
101
115
|
|
|
102
|
-
|
|
116
|
+
```astro
|
|
117
|
+
---
|
|
118
|
+
import {ClientRouter} from 'astro:transitions'
|
|
119
|
+
---
|
|
120
|
+
<!-- index.astro -->
|
|
121
|
+
<head>
|
|
122
|
+
<meta charset="utf-8" />
|
|
123
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
124
|
+
<meta name="viewport" content="width=device-width" />
|
|
125
|
+
<meta name="generator" content={Astro.generator} />
|
|
126
|
+
<title>Astro</title>
|
|
127
|
+
<ClientRouter />
|
|
128
|
+
</head>
|
|
129
|
+
```
|
|
103
130
|
|
|
104
|
-
```
|
|
131
|
+
```astro
|
|
105
132
|
---
|
|
106
|
-
|
|
133
|
+
const { text, id } = Astro.props
|
|
107
134
|
import '@yidev/wtoast/index.css'
|
|
108
|
-
const { show } = wToast()
|
|
109
135
|
---
|
|
110
136
|
|
|
111
|
-
<button
|
|
137
|
+
<button id='algun-id' class='btn'>alguna promesa</button>
|
|
138
|
+
|
|
139
|
+
<script>
|
|
140
|
+
import { wToast } from '@yidev/wtoast'
|
|
141
|
+
const { show, promise } = wToast()
|
|
142
|
+
|
|
143
|
+
document.addEventListener("astro:page-load", () => {
|
|
144
|
+
|
|
145
|
+
document.getElementById("algun-id")?.addEventListener("click", () => {
|
|
146
|
+
promise(fetch("/api"), {
|
|
147
|
+
loading: "Cargando promesa...",
|
|
148
|
+
success: "Promesa resuelta 🎉",
|
|
149
|
+
error: "Error en promesa 😞",
|
|
150
|
+
})
|
|
151
|
+
.onResolve((data) => console.log(data))
|
|
152
|
+
.onReject((err) => console.error(err))
|
|
153
|
+
})
|
|
154
|
+
|
|
155
|
+
})
|
|
156
|
+
</script>
|
|
112
157
|
```
|
|
113
158
|
|
|
114
159
|
### ⚛️ React
|
|
@@ -123,6 +168,16 @@ export default function Button() {
|
|
|
123
168
|
}
|
|
124
169
|
```
|
|
125
170
|
|
|
171
|
+
## 🤝 Contribuir
|
|
172
|
+
|
|
173
|
+
¡Gracias por querer ayudar! Puedes contribuir mediante:
|
|
174
|
+
|
|
175
|
+
- Issues: reportando bugs o sugerencias
|
|
176
|
+
- Pull Requests: si quieres proponer cambios
|
|
177
|
+
- Revisar el roadmap / todos para ver áreas que necesitan ayuda
|
|
178
|
+
|
|
179
|
+
Por favor, lee las notas de estilo de código y sigue la convención de commits `conventional commits`.
|
|
180
|
+
|
|
126
181
|
## roadmap / to do
|
|
127
182
|
|
|
128
183
|
### ✅ completado
|
|
@@ -214,3 +269,5 @@ Explicar cómo funciona la detección de framework en futuro
|
|
|
214
269
|
- [ ] - usar formatter
|
|
215
270
|
- [ ] - hacer test
|
|
216
271
|
- [ ] - crear un c/i
|
|
272
|
+
|
|
273
|
+
- [ ] - uso de cdn
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/* src/assets/style/toast.css */
|
|
2
|
+
.toasts-container {
|
|
3
|
+
position: fixed;
|
|
4
|
+
bottom: 1rem;
|
|
5
|
+
left: 1.5rem;
|
|
6
|
+
right: 1.5rem;
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
align-items: end;
|
|
10
|
+
gap: 8px;
|
|
11
|
+
z-index: 9999;
|
|
12
|
+
}
|
|
13
|
+
.toast {
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
gap: 8px;
|
|
17
|
+
background-color: oklch(97% 0.001 106.424);
|
|
18
|
+
outline: 2px solid oklch(37.4% 0.01 67.558);
|
|
19
|
+
color: oklch(37.4% 0.01 67.558);
|
|
20
|
+
max-width: fit-content;
|
|
21
|
+
padding: 0.75rem 1rem;
|
|
22
|
+
border-radius: 4px;
|
|
23
|
+
font-size: 1rem;
|
|
24
|
+
font-weight: 600;
|
|
25
|
+
animation: fadeIn 0.3s ease-out;
|
|
26
|
+
word-break: break-all;
|
|
27
|
+
position: relative;
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
}
|
|
30
|
+
.timeLeft {
|
|
31
|
+
position: absolute;
|
|
32
|
+
bottom: 0;
|
|
33
|
+
left: 0;
|
|
34
|
+
right: 0;
|
|
35
|
+
width: 100%;
|
|
36
|
+
height: 2px;
|
|
37
|
+
background-color: oklch(72.3% 0.219 149.579);
|
|
38
|
+
content: "";
|
|
39
|
+
}
|
|
40
|
+
.toast-success {
|
|
41
|
+
width: 100%;
|
|
42
|
+
color: #0d7811;
|
|
43
|
+
}
|
|
44
|
+
.toast-error {
|
|
45
|
+
width: 100%;
|
|
46
|
+
color: #86160e;
|
|
47
|
+
}
|
|
48
|
+
.toast-info {
|
|
49
|
+
width: 100%;
|
|
50
|
+
color: #115389;
|
|
51
|
+
}
|
|
52
|
+
.toast-warning {
|
|
53
|
+
width: 100%;
|
|
54
|
+
color: #b86807;
|
|
55
|
+
}
|
|
56
|
+
.toast-title {
|
|
57
|
+
align-self: center;
|
|
58
|
+
text-transform: capitalize;
|
|
59
|
+
font-size: 18px;
|
|
60
|
+
font-weight: 600;
|
|
61
|
+
font-family:
|
|
62
|
+
"Segoe UI",
|
|
63
|
+
Tahoma,
|
|
64
|
+
Geneva,
|
|
65
|
+
Verdana,
|
|
66
|
+
sans-serif;
|
|
67
|
+
}
|
|
68
|
+
.toast-icon {
|
|
69
|
+
font-weight: 700;
|
|
70
|
+
width: fit-content;
|
|
71
|
+
}
|
|
72
|
+
.toast-icon svg {
|
|
73
|
+
width: 24px;
|
|
74
|
+
height: 24px;
|
|
75
|
+
}
|
|
76
|
+
@media (prefers-color-scheme: dark) {
|
|
77
|
+
.toast {
|
|
78
|
+
background: oklch(20.8% 0.042 265.755);
|
|
79
|
+
outline: 2px solid oklch(41.283% 0.00005 271.152);
|
|
80
|
+
color: oklch(87.483% 0.00267 230.235);
|
|
81
|
+
}
|
|
82
|
+
.toast-success {
|
|
83
|
+
width: 100%;
|
|
84
|
+
background: #08490a;
|
|
85
|
+
}
|
|
86
|
+
.toast-error {
|
|
87
|
+
width: 100%;
|
|
88
|
+
background: #420b07;
|
|
89
|
+
}
|
|
90
|
+
.toast-info {
|
|
91
|
+
width: 100%;
|
|
92
|
+
background: #092c48;
|
|
93
|
+
}
|
|
94
|
+
.toast-warning {
|
|
95
|
+
width: 100%;
|
|
96
|
+
background: #924900;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
@keyframes fadeIn {
|
|
100
|
+
from {
|
|
101
|
+
opacity: 0;
|
|
102
|
+
transform: translateY(10px);
|
|
103
|
+
}
|
|
104
|
+
to {
|
|
105
|
+
opacity: 1;
|
|
106
|
+
transform: translateY(0);
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/assets/style/toast.css"],"sourcesContent":[".toasts-container {\r\n\tposition: fixed;\r\n\tbottom: 1rem;\r\n\tleft: 1.5rem;\r\n\tright: 1.5rem;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\talign-items: end;\r\n\tgap: 8px;\r\n\tz-index: 9999;\r\n}\r\n.toast {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tgap: 8px;\r\n\tbackground-color: oklch(97% 0.001 106.424);\r\n\toutline: 2px solid oklch(37.4% 0.01 67.558);\r\n\tcolor: oklch(37.4% 0.01 67.558);\r\n\tmax-width: fit-content;\r\n\tpadding: 0.75rem 1rem;\r\n\tborder-radius: 4px;\r\n\tfont-size: 1rem;\r\n\tfont-weight: 600;\r\n\tanimation: fadeIn 0.3s ease-out;\r\n\tword-break: break-all;\r\n\tposition: relative;\r\n\toverflow: hidden;\r\n}\r\n.timeLeft {\r\n\tposition: absolute;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tright: 0;\r\n\twidth: 100%;\r\n\theight: 2px;\r\n\tbackground-color: oklch(72.3% 0.219 149.579);\r\n\tcontent: \"\";\r\n}\r\n\r\n.toast-success {\r\n\twidth: 100%;\r\n\tcolor: #0d7811;\r\n}\r\n.toast-error {\r\n\twidth: 100%;\r\n\tcolor: #86160e;\r\n}\r\n.toast-info {\r\n\twidth: 100%;\r\n\tcolor: #115389;\r\n}\r\n.toast-warning {\r\n\twidth: 100%;\r\n\tcolor: #b86807;\r\n}\r\n.toast-title {\r\n\talign-self: center;\r\n\ttext-transform: capitalize;\r\n\tfont-size: 18px;\r\n\tfont-weight: 600;\r\n\tfont-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\r\n}\r\n.toast-icon {\r\n\tfont-weight: 700;\r\n\r\n\twidth: fit-content;\r\n}\r\n.toast-icon svg {\r\n\twidth: 24px;\r\n\theight: 24px;\r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n\t.toast {\r\n\t\tbackground: oklch(20.8% 0.042 265.755);\r\n\t\toutline: 2px solid oklch(41.283% 0.00005 271.152);\r\n\t\tcolor: oklch(87.483% 0.00267 230.235);\r\n\t}\r\n\t.toast-success {\r\n\t\twidth: 100%;\r\n\t\tbackground: #08490a;\r\n\t}\r\n\t.toast-error {\r\n\t\twidth: 100%;\r\n\t\tbackground: #420b07;\r\n\t}\r\n\t.toast-info {\r\n\t\twidth: 100%;\r\n\t\tbackground: #092c48;\r\n\t}\r\n\t.toast-warning {\r\n\t\twidth: 100%;\r\n\t\tbackground: #924900;\r\n\t}\r\n}\r\n\r\n@keyframes fadeIn {\r\n\tfrom {\r\n\t\topacity: 0;\r\n\t\ttransform: translateY(10px);\r\n\t}\r\n\tto {\r\n\t\topacity: 1;\r\n\t\ttransform: translateY(0);\r\n\t}\r\n}\r\n"],"mappings":";AAAA,CAAC;AACA,YAAU;AACV,UAAQ;AACR,QAAM;AACN,SAAO;AACP,WAAS;AACT,kBAAgB;AAChB,eAAa;AACb,OAAK;AACL,WAAS;AACV;AACA,CAAC;AACA,WAAS;AACT,eAAa;AACb,OAAK;AACL,oBAAkB,MAAM,IAAI,MAAM;AAClC,WAAS,IAAI,MAAM,MAAM,MAAM,KAAK;AACpC,SAAO,MAAM,MAAM,KAAK;AACxB,aAAW;AACX,WAAS,QAAQ;AACjB,iBAAe;AACf,aAAW;AACX,eAAa;AACb,aAAW,OAAO,KAAK;AACvB,cAAY;AACZ,YAAU;AACV,YAAU;AACX;AACA,CAAC;AACA,YAAU;AACV,UAAQ;AACR,QAAM;AACN,SAAO;AACP,SAAO;AACP,UAAQ;AACR,oBAAkB,MAAM,MAAM,MAAM;AACpC,WAAS;AACV;AAEA,CAAC;AACA,SAAO;AACP,SAAO;AACR;AACA,CAAC;AACA,SAAO;AACP,SAAO;AACR;AACA,CAAC;AACA,SAAO;AACP,SAAO;AACR;AACA,CAAC;AACA,SAAO;AACP,SAAO;AACR;AACA,CAAC;AACA,cAAY;AACZ,kBAAgB;AAChB,aAAW;AACX,eAAa;AACb;AAAA,IAAa,UAAU;AAAA,IAAE,MAAM;AAAA,IAAE,MAAM;AAAA,IAAE,OAAO;AAAA,IAAE;AACnD;AACA,CAAC;AACA,eAAa;AAEb,SAAO;AACR;AACA,CALC,WAKW;AACX,SAAO;AACP,UAAQ;AACT;AAEA,QAAO,sBAAuB;AAC7B,GA9DA;AA+DC,gBAAY,MAAM,MAAM,MAAM;AAC9B,aAAS,IAAI,MAAM,MAAM,QAAQ,QAAQ;AACzC,WAAO,MAAM,QAAQ,QAAQ;AAC9B;AACA,GAvCA;AAwCC,WAAO;AACP,gBAAY;AACb;AACA,GAvCA;AAwCC,WAAO;AACP,gBAAY;AACb;AACA,GAvCA;AAwCC,WAAO;AACP,gBAAY;AACb;AACA,GAvCA;AAwCC,WAAO;AACP,gBAAY;AACb;AACD;AAEA,WAzEY;AA0EX;AACC,aAAS;AACT,eAAW,WAAW;AACvB;AACA;AACC,aAAS;AACT,eAAW,WAAW;AACvB;AACD;","names":[]}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { JSX } from 'react';
|
|
2
|
+
|
|
3
|
+
type ToastType = "success" | "error" | "loading" | "default" | "info" | "warning"
|
|
4
|
+
//prettier-ignore
|
|
5
|
+
type ToastPositions = "bottom-left" | "bottom-right" | "top-left" | "top-right"
|
|
6
|
+
|
|
7
|
+
type ToastStyles = Partial<CSSStyleDeclaration> & {
|
|
8
|
+
[key: string]: string | undefined
|
|
9
|
+
}
|
|
10
|
+
type ToastPromiseMessages = {
|
|
11
|
+
success?: string
|
|
12
|
+
error?: string
|
|
13
|
+
loading?: string
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
type ToastOptions = {
|
|
17
|
+
title?: string
|
|
18
|
+
type?: ToastType
|
|
19
|
+
duration?: number
|
|
20
|
+
className?: string
|
|
21
|
+
icon?: HTMLElement | string | any | JSX.Element
|
|
22
|
+
styles?: ToastStyles
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
type ToastDefaults = {
|
|
26
|
+
position: ToastPositions
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
type Toast = {
|
|
30
|
+
id: string
|
|
31
|
+
title?: string
|
|
32
|
+
message: string
|
|
33
|
+
options: ToastOptions
|
|
34
|
+
rendered: boolean
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
type ToastState = {
|
|
38
|
+
toasts: Toast[]
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
declare class toastPromise<T> {
|
|
42
|
+
private promise;
|
|
43
|
+
private messages;
|
|
44
|
+
private options;
|
|
45
|
+
private onResolveConfig;
|
|
46
|
+
private onRejectConfig;
|
|
47
|
+
private onResolveCallback?;
|
|
48
|
+
private onRejectCallback?;
|
|
49
|
+
constructor(promise: Promise<T>, messages: ToastPromiseMessages, options?: ToastOptions, onResolveConfig?: ToastOptions, onRejectConfig?: ToastOptions);
|
|
50
|
+
onResolve(config: ToastOptions): this;
|
|
51
|
+
onResolve(callback: (data: unknown) => void): this;
|
|
52
|
+
onResolve(config: ToastOptions, callback: (data: unknown) => void): this;
|
|
53
|
+
onReject(config: ToastOptions): this;
|
|
54
|
+
onReject(callback: (error: Error) => void): this;
|
|
55
|
+
onReject(config: ToastOptions, callback: (error: Error) => void): this;
|
|
56
|
+
run(): Promise<[null, T] | [Error, null]>;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
declare function wToast(): {
|
|
60
|
+
show: (message: string, options?: ToastOptions) => void;
|
|
61
|
+
promise: <T>(promise: Promise<T>, messages: ToastPromiseMessages, options?: ToastOptions) => toastPromise<T>;
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
export { type Toast, type ToastDefaults, type ToastOptions, type ToastPositions, type ToastPromiseMessages, type ToastState, type ToastStyles, type ToastType, wToast };
|