@soft-toast/vue 1.0.2 → 1.1.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/README.md +8 -8
- package/dist/animations/gsapConfig.d.ts +2 -1
- package/dist/animations/gsapConfig.d.ts.map +1 -1
- package/dist/composables/{useToast.d.ts → useSoftToast.d.ts} +6 -6
- package/dist/composables/useSoftToast.d.ts.map +1 -0
- package/dist/composables/useSoftToast.test.d.ts +2 -0
- package/dist/composables/useSoftToast.test.d.ts.map +1 -0
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +794 -756
- package/dist/stores/toastStore.d.ts +1 -1
- package/dist/stores/toastStore.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +5 -5
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +15 -2
- package/src/animations/gsapConfig.ts +45 -14
- package/src/components/ToastItem.vue +41 -10
- package/src/components/ToastRegion.vue +6 -2
- package/src/composables/useFlash.ts +1 -1
- package/src/composables/{useToast.test.ts → useSoftToast.test.ts} +54 -54
- package/src/composables/{useToast.ts → useSoftToast.ts} +5 -5
- package/src/exports.test.ts +39 -22
- package/src/index.ts +1 -2
- package/src/stores/toastStore.ts +29 -9
- package/src/styles/toast.css +18 -9
- package/src/types/index.ts +5 -5
- package/dist/composables/useToast.d.ts.map +0 -1
- package/dist/composables/useToast.test.d.ts +0 -2
- package/dist/composables/useToast.test.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -98,12 +98,12 @@ Use it anywhere in your Vue or Nuxt components:
|
|
|
98
98
|
|
|
99
99
|
```vue
|
|
100
100
|
<script setup>
|
|
101
|
-
import {
|
|
101
|
+
import { useSoftToast } from "@soft-toast/vue";
|
|
102
102
|
|
|
103
|
-
const
|
|
103
|
+
const softToast = useSoftToast();
|
|
104
104
|
|
|
105
105
|
const showToast = () => {
|
|
106
|
-
|
|
106
|
+
softToast.success("Profile saved!", {
|
|
107
107
|
description: "Your changes have been successfully saved.",
|
|
108
108
|
position: "top-right",
|
|
109
109
|
duration: 2500,
|
|
@@ -121,7 +121,7 @@ const showToast = () => {
|
|
|
121
121
|
The plugin options are global defaults. You can override them per toast when a page needs different behavior:
|
|
122
122
|
|
|
123
123
|
```typescript
|
|
124
|
-
|
|
124
|
+
softToast.warning("File moved to trash", {
|
|
125
125
|
description: "You can restore it from the activity log.",
|
|
126
126
|
position: "bottom-right",
|
|
127
127
|
duration: Infinity,
|
|
@@ -132,14 +132,14 @@ toast.warning("File moved to trash", {
|
|
|
132
132
|
|
|
133
133
|
## API Overview
|
|
134
134
|
|
|
135
|
-
### `
|
|
135
|
+
### `softToast[type](title, options)`
|
|
136
136
|
|
|
137
137
|
Available types: `default`, `success`, `error`, `warning`, `info`, `promise`.
|
|
138
138
|
|
|
139
139
|
**Example:**
|
|
140
140
|
|
|
141
141
|
```typescript
|
|
142
|
-
|
|
142
|
+
softToast.error("Network Error", {
|
|
143
143
|
description: "Failed to connect to the server.",
|
|
144
144
|
duration: 6000,
|
|
145
145
|
action: {
|
|
@@ -169,11 +169,11 @@ Supports **Iconify** icons and custom Vue components.
|
|
|
169
169
|
|
|
170
170
|
```typescript
|
|
171
171
|
// 1. Using Iconify icon string
|
|
172
|
-
|
|
172
|
+
softToast.success("Awesome!", { icon: "line-md:star" });
|
|
173
173
|
|
|
174
174
|
// 2. Using a Custom Vue Component
|
|
175
175
|
import MyIcon from "./MyIcon.vue";
|
|
176
|
-
|
|
176
|
+
softToast.info("Custom Icon", { icon: MyIcon });
|
|
177
177
|
```
|
|
178
178
|
|
|
179
179
|
## Slot Architecture
|
|
@@ -16,7 +16,7 @@ export declare const morphAnimation: (element: HTMLElement, options?: {
|
|
|
16
16
|
bounce?: number;
|
|
17
17
|
spring?: boolean;
|
|
18
18
|
}) => gsap.core.Timeline;
|
|
19
|
-
export declare const exitAnimation: (element: HTMLElement) => gsap.core.
|
|
19
|
+
export declare const exitAnimation: (element: HTMLElement) => gsap.core.Timeline;
|
|
20
20
|
export declare const swipeExitAnimation: (element: HTMLElement, toX: number) => gsap.core.Tween;
|
|
21
21
|
export declare const swipeSnapBack: (element: HTMLElement) => gsap.core.Tween;
|
|
22
22
|
export declare const expandAnimation: (element: HTMLElement) => gsap.core.Tween;
|
|
@@ -34,6 +34,7 @@ export declare const positionAnimation: (element: HTMLElement, options: {
|
|
|
34
34
|
opacityStep?: number;
|
|
35
35
|
maxVisible?: number;
|
|
36
36
|
reposition?: boolean;
|
|
37
|
+
resetSwipe?: boolean;
|
|
37
38
|
}) => gsap.core.Tween;
|
|
38
39
|
export declare const progressAnimation: (element: HTMLElement, duration: number, onComplete?: () => void) => gsap.core.Tween;
|
|
39
40
|
export declare const pauseAnimation: (animation: gsap.core.Tween | gsap.core.Timeline) => gsap.core.Tween | gsap.core.Timeline;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gsapConfig.d.ts","sourceRoot":"","sources":["../../src/animations/gsapConfig.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAqB1G,CAAA;AAWD,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,WAI/C,CAAA;AAwCD,eAAO,MAAM,gBAAgB,GAC3B,SAAS,WAAW,EACpB,UAAS;IACP,MAAM,CAAC,EAAE,eAAe,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CACrB,uBAyCP,CAAA;AAGD,eAAO,MAAM,cAAc,GACzB,SAAS,WAAW,EACpB,UAAS;IAAE,MAAM,CAAC,EAAE,eAAe,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAO,uBAoB9E,CAAA;AAGD,eAAO,MAAM,aAAa,GACxB,SAAS,WAAW,
|
|
1
|
+
{"version":3,"file":"gsapConfig.d.ts","sourceRoot":"","sources":["../../src/animations/gsapConfig.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAqB1G,CAAA;AAWD,eAAO,MAAM,iBAAiB,GAAI,QAAQ,MAAM,WAI/C,CAAA;AAwCD,eAAO,MAAM,gBAAgB,GAC3B,SAAS,WAAW,EACpB,UAAS;IACP,MAAM,CAAC,EAAE,eAAe,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CACrB,uBAyCP,CAAA;AAGD,eAAO,MAAM,cAAc,GACzB,SAAS,WAAW,EACpB,UAAS;IAAE,MAAM,CAAC,EAAE,eAAe,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAO,uBAoB9E,CAAA;AAGD,eAAO,MAAM,aAAa,GACxB,SAAS,WAAW,uBAoBrB,CAAA;AAGD,eAAO,MAAM,kBAAkB,GAC7B,SAAS,WAAW,EACpB,KAAK,MAAM,oBAUZ,CAAA;AAGD,eAAO,MAAM,aAAa,GAAI,SAAS,WAAW,oBAUjD,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,oBACqB,CAAA;AAEzE,eAAO,MAAM,iBAAiB,GAAI,SAAS,WAAW,oBACa,CAAA;AAKnE,eAAO,MAAM,iBAAiB,GAC5B,SAAS,WAAW,EACpB,SAAS;IACP,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,eAAe,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,oBAsFF,CAAA;AAED,eAAO,MAAM,iBAAiB,GAC5B,SAAS,WAAW,EACpB,UAAU,MAAM,EAChB,aAAa,MAAM,IAAI,oBAKtB,CAAA;AAEH,eAAO,MAAM,cAAc,GAAI,WAAW,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,yCAC3D,CAAA;AAEnB,eAAO,MAAM,eAAe,GAAI,WAAW,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,yCAC7D,CAAA;AAElB,eAAO,MAAM,cAAc,GAAI,SAAS,WAAW,SACvB,CAAA"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { ToastOptions, ToastPromiseMessages } from '../types';
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const useSoftToast: () => {
|
|
3
3
|
default: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
4
4
|
success: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
5
5
|
error: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
6
6
|
warning: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
7
7
|
info: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
8
8
|
loading: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
9
|
-
promise: <T>(promiseFn: Promise<T>, messages: ToastPromiseMessages
|
|
9
|
+
promise: <T>(promiseFn: Promise<T>, messages: ToastPromiseMessages<T>, options?: Omit<ToastOptions, "type" | "promise" | "promiseMessages">) => Promise<T>;
|
|
10
10
|
custom: (options: ToastOptions) => string;
|
|
11
11
|
update: (id: string, options: Partial<ToastOptions>) => void;
|
|
12
12
|
dismiss: (id?: string) => void;
|
|
@@ -18,7 +18,7 @@ export declare const useToast: () => {
|
|
|
18
18
|
* Perfect for the "submit → redirect → show success" pattern.
|
|
19
19
|
*
|
|
20
20
|
* @example
|
|
21
|
-
* const { flash } =
|
|
21
|
+
* const { flash } = useSoftToast()
|
|
22
22
|
* await api.save()
|
|
23
23
|
* flash('Saved!', { type: 'success' })
|
|
24
24
|
* router.push('/dashboard')
|
|
@@ -32,14 +32,14 @@ export declare const useToast: () => {
|
|
|
32
32
|
/** Check if there are pending flash messages without consuming them. */
|
|
33
33
|
hasFlashes: () => boolean;
|
|
34
34
|
};
|
|
35
|
-
export declare const
|
|
35
|
+
export declare const softToast: {
|
|
36
36
|
default: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
37
37
|
success: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
38
38
|
error: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
39
39
|
warning: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
40
40
|
info: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
41
41
|
loading: (title: string, options?: Omit<ToastOptions, "type" | "title">) => string;
|
|
42
|
-
promise: <T>(promiseFn: Promise<T>, messages: ToastPromiseMessages
|
|
42
|
+
promise: <T>(promiseFn: Promise<T>, messages: ToastPromiseMessages<T>, options?: Omit<ToastOptions, "type" | "promise" | "promiseMessages">) => Promise<T>;
|
|
43
43
|
custom: (options: ToastOptions) => string;
|
|
44
44
|
update: (id: string, options: Partial<ToastOptions>) => void;
|
|
45
45
|
dismiss: (id?: string) => void;
|
|
@@ -50,4 +50,4 @@ export declare const toast: {
|
|
|
50
50
|
showFlashes: () => number;
|
|
51
51
|
hasFlashes: () => boolean;
|
|
52
52
|
};
|
|
53
|
-
//# sourceMappingURL=
|
|
53
|
+
//# sourceMappingURL=useSoftToast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSoftToast.d.ts","sourceRoot":"","sources":["../../src/composables/useSoftToast.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAMlE,eAAO,MAAM,YAAY;qBACN,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;qBAGtD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;mBAGxD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;qBAGpD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;kBAGzD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;qBAGnD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;cAG7D,CAAC,aACE,OAAO,CAAC,CAAC,CAAC,YACX,oBAAoB,CAAC,CAAC,CAAC,YACvB,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,CAAC,KACnE,OAAO,CAAC,CAAC,CAAC;sBAEK,YAAY;iBAEjB,MAAM,WAAW,OAAO,CAAC,YAAY,CAAC;mBAEpC,MAAM;;gBAGT,MAAM;iBACL,MAAM;IAEnB;;;;;;;;;OASG;mBACY,MAAM,YAAW,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IAGjE;;;OAGG;;IAGH,wEAAwE;;CAExE,CAAA;AAIF,eAAO,MAAM,SAAS;qBACH,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;qBAEtD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;mBAExD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;qBAEpD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;kBAEzD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;qBAEnD,MAAM,YAAY,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC;cAE7D,CAAC,aACE,OAAO,CAAC,CAAC,CAAC,YACX,oBAAoB,CAAC,CAAC,CAAC,YACvB,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,CAAC,KACnE,OAAO,CAAC,CAAC,CAAC;sBACK,YAAY;iBACjB,MAAM,WAAW,OAAO,CAAC,YAAY,CAAC;mBACpC,MAAM;;gBAET,MAAM;iBACL,MAAM;mBACJ,MAAM,YAAW,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;;;CAIlE,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSoftToast.test.d.ts","sourceRoot":"","sources":["../../src/composables/useSoftToast.test.ts"],"names":[],"mappings":""}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { SoftToastPlugin, getToastOptions } from './plugin';
|
|
2
|
-
export {
|
|
2
|
+
export { useSoftToast, softToast } from './composables/useSoftToast';
|
|
3
3
|
export { useFlash, queueFlash, consumeFlashes, hasPendingFlashes } from './composables/useFlash';
|
|
4
4
|
export { toastStore } from './stores/toastStore';
|
|
5
5
|
export { default as ToastContainer } from './components/ToastContainer.vue';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAC3D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAChG,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAGhD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAA;AAGjE,YAAY,EACV,KAAK,EACL,SAAS,EACT,aAAa,EACb,YAAY,EACZ,WAAW,EACX,oBAAoB,EACpB,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EAClB,eAAe,EACf,aAAa,EACd,MAAM,SAAS,CAAA"}
|