@soft-toast/vue 1.0.1 → 1.0.2
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 +41 -6
- package/dist/animations/gsapConfig.d.ts.map +1 -1
- package/dist/index.js +1130 -877
- package/dist/plugin.d.ts.map +1 -1
- package/dist/stores/toastStore.d.ts.map +1 -1
- package/dist/style.css +1 -1
- package/dist/types/index.d.ts +3 -1
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/animations/gsapConfig.ts +11 -8
- package/src/components/ToastContainer.vue +2 -1
- package/src/components/ToastItem.vue +258 -63
- package/src/components/ToastRegion.vue +360 -87
- package/src/plugin.ts +8 -6
- package/src/stores/toastStore.ts +43 -13
- package/src/styles/toast.css +36 -6
- package/src/types/index.ts +3 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ A toast notification library for Vue 3 with soft motion, compact defaults, and f
|
|
|
6
6
|
|
|
7
7
|
- **Fluid Motion**: Smooth enter, exit, stack, and swipe interactions.
|
|
8
8
|
- **Stacked Layout**: Toasts stay compact, readable, and easy to scan.
|
|
9
|
-
- **Position Options**:
|
|
9
|
+
- **Position Options**: 10 positions including corners and edges.
|
|
10
10
|
- **Motion Presets**: Choose from `smooth`, `bouncy`, `subtle`, or `snappy` presets.
|
|
11
11
|
- **Rich Content**: Supports titles, descriptions, action buttons, progress bars, and custom icons.
|
|
12
12
|
- **Promise Handling**: Built-in support for async operations with loading states.
|
|
@@ -153,7 +153,7 @@ toast.error("Network Error", {
|
|
|
153
153
|
|
|
154
154
|
| Property | Type | Default | Description |
|
|
155
155
|
| --------------- | ---------------------------------------------- | ------------- | -------------------------------------------------------------- |
|
|
156
|
-
| `position` | `ToastPosition` | `'top-right'` | Position on screen (e.g. `'top'`, `'bottom-left'`, `'
|
|
156
|
+
| `position` | `ToastPosition` | `'top-right'` | Position on screen (e.g. `'top'`, `'bottom-left'`, `'right'`) |
|
|
157
157
|
| `duration` | `number` | `4000` | Auto-close delay in ms (`Infinity` disables auto-close) |
|
|
158
158
|
| `preset` | `'smooth' \| 'bouncy' \| 'subtle' \| 'snappy'` | `'smooth'` | Motion style |
|
|
159
159
|
| `description` | `string \| VNode` | `undefined` | Secondary text below the title |
|
|
@@ -182,8 +182,28 @@ toast.info("Custom Icon", { icon: MyIcon });
|
|
|
182
182
|
|
|
183
183
|
Available slots: `#icon`, `#title`, `#description`, `#action`, `#close-button`.
|
|
184
184
|
|
|
185
|
+
When you want to provide slots, disable the plugin's automatic container and render the container in your app layout:
|
|
186
|
+
|
|
187
|
+
```typescript
|
|
188
|
+
app.use(SoftToastPlugin, {
|
|
189
|
+
autoMount: false,
|
|
190
|
+
});
|
|
191
|
+
```
|
|
192
|
+
|
|
185
193
|
```vue
|
|
186
194
|
<SoftToastContainer>
|
|
195
|
+
<template #icon="{ toast }">
|
|
196
|
+
<div class="my-custom-icon">{{ toast.type }}</div>
|
|
197
|
+
</template>
|
|
198
|
+
|
|
199
|
+
<template #title="{ toast }">
|
|
200
|
+
<strong>{{ toast.title }}</strong>
|
|
201
|
+
</template>
|
|
202
|
+
|
|
203
|
+
<template #description="{ toast }">
|
|
204
|
+
<p>{{ toast.description }}</p>
|
|
205
|
+
</template>
|
|
206
|
+
|
|
187
207
|
<!-- Override the close button -->
|
|
188
208
|
<template #close-button="{ dismiss }">
|
|
189
209
|
<button @click="dismiss" class="my-custom-close-btn">Close</button>
|
|
@@ -191,17 +211,32 @@ Available slots: `#icon`, `#title`, `#description`, `#action`, `#close-button`.
|
|
|
191
211
|
|
|
192
212
|
<!-- Override the action button -->
|
|
193
213
|
<template #action="{ toast, execute }">
|
|
194
|
-
<button
|
|
195
|
-
|
|
214
|
+
<button
|
|
215
|
+
v-for="action in Array.isArray(toast.action) ? toast.action : [toast.action]"
|
|
216
|
+
:key="action.label"
|
|
217
|
+
@click="execute(action)"
|
|
218
|
+
class="my-custom-action-btn"
|
|
219
|
+
>
|
|
220
|
+
{{ action.label }}
|
|
196
221
|
</button>
|
|
197
222
|
</template>
|
|
198
223
|
</SoftToastContainer>
|
|
199
224
|
```
|
|
200
225
|
|
|
226
|
+
Use `slotFilter` when only some toasts should use the custom slot renderer. Toasts that do not match the filter keep the built-in icon, title, action, close button, and swipe behavior:
|
|
227
|
+
|
|
228
|
+
```vue
|
|
229
|
+
<SoftToastContainer :slot-filter="(toast) => toast.id === 'custom-toast'">
|
|
230
|
+
<template #title="{ toast }">
|
|
231
|
+
<strong>{{ toast.title }}</strong>
|
|
232
|
+
</template>
|
|
233
|
+
</SoftToastContainer>
|
|
234
|
+
```
|
|
235
|
+
|
|
201
236
|
## Positions
|
|
202
237
|
|
|
203
|
-
|
|
204
|
-
`top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`, `top`, `bottom`, `left`, `right
|
|
238
|
+
10 available positions:
|
|
239
|
+
`top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`, `top`, `bottom`, `left`, `right`.
|
|
205
240
|
|
|
206
241
|
## License
|
|
207
242
|
|
|
@@ -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;
|
|
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,oBAUrB,CAAA;AAGD,eAAO,MAAM,kBAAkB,GAC7B,SAAS,WAAW,EACpB,KAAK,MAAM,oBAUZ,CAAA;AAGD,eAAO,MAAM,aAAa,GAAI,SAAS,WAAW,oBASjD,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;CACrB,oBAmEF,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"}
|