vue-toasts-lite 0.1.1 → 0.1.3

package/LICENSE

@@ -20,3 +20,4 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
+

package/README.md

@@ -20,21 +20,14 @@ A lightweight toast notifications library for Vue 3.
 - 🎯 Promise support
 - 🖱️ Pause on hover
 
-## Installation
+## Quick Start
 
+### 1. Install the package:
 ```bash
 npm install vue-toasts-lite
 ```
 
-## Quick Start
-
-**Three steps to start using toasts:**
-
-1. Install the package
-2. Add `ToastsLiteProvider` to your app
-3. Call `toasts.success()` from anywhere
-
-### 1. Add the provider to your `App.vue`:
+### 2. Add `ToastsLiteProvider` & `vue-toasts-lite/style.css` to app:
 
 ```vue
 <script setup>
@@ -50,7 +43,7 @@ import 'vue-toasts-lite/style.css'
 </template>
 ```
 
-### 2. Use anywhere in your app:
+### 3. Use anywhere in your app:
 
 ```vue
 <script setup>
@@ -129,14 +122,6 @@ await toasts.promise(
 )
 ```
 
-### Custom Controller
-
-```js
-import { ToastsController } from 'vue-toasts-lite'
-
-const notifications = new ToastsController()
-notifications.success('Hello!')
-```
 
 ## Styling
 

package/dist/index.d.ts

@@ -3,9 +3,9 @@ import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
 import { PublicProps } from 'vue';
 
-export declare type Id = string;
+declare type Id = string;
 
-export declare interface Toast {
+declare interface IToastsController {
     add: (options: ToastOptions) => Id;
     update: (id: Id, options: ToastOptions) => Id;
     success: (message: string, options?: ToastSimpleOptions) => Id;
@@ -15,107 +15,296 @@ export declare interface Toast {
     promise: <T>(promise: Promise<T>, options: ToastPromiseOptions) => Promise<Id>;
     remove: (id?: Id) => void;
     clear: () => void;
-    onToastsListChange: (callback: (toasts: ToastProps[]) => void) => () => void;
+    onToastsListChange: (callback: (toasts: Toast[]) => void) => () => void;
 }
 
-export declare type ToastOptions = Partial<ToastProps>;
+declare type Toast = {
+    /**
+     * Unique identifier for the toast.
+     * Auto-generated if not provided when creating a toast.
+     */
+    id: Id;
+    /**
+     * Visual type of the toast notification.
+     * Determines the icon and color scheme.
+     * @default "success"
+     */
+    type: ToastType;
+    /**
+     * Text content displayed in the toast.
+     * @default "Hello from Toasts Lite"
+     */
+    message: string;
+    /**
+     * Whether the toast should automatically close after {@link duration} milliseconds.
+     * @default true
+     */
+    autoClose: boolean;
+    /**
+     * Time in milliseconds before the toast auto-closes.
+     * Only applies when {@link autoClose} is `true`.
+     * @default 3000
+     */
+    duration: number;
+    /**
+     * Position of the toast on the screen.
+     * @default "top-center"
+     */
+    position?: ToastPosition;
+};
+
+export declare type ToastOptions = Partial<Toast>;
 
 export declare type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "middle-center";
 
 export declare type ToastPromiseOptions = {
+    /** Message displayed while the promise is pending */
     loading: string;
+    /** Message displayed when the promise resolves successfully */
     success: string;
+    /** Message displayed when the promise rejects */
     error: string;
+    /** Optional position for the toast on the screen */
     position?: ToastPosition;
+    /** Optional custom ID for the toast */
     id?: Id;
 };
 
-export declare type ToastProps = {
-    /** toast id */
-    id: Id;
-    /** toast type */
-    type: ToastType;
-    /** toast message */
-    message: string;
-    /** auto close the toast */
-    autoClose: boolean;
-    /** duration in milliseconds */
-    duration: number;
-    /** Position of the toast on the screen. */
-    position?: ToastPosition;
-};
-
+/**
+ * Main toast controller instance.
+ * @example
+ * ```ts
+ * import { toasts } from 'vue-toasts-lite'
+ *
+ * toasts.success('Hello, World!')
+ * ```
+ */
 export declare const toasts: ToastsController;
 
-export declare class ToastsController implements Toast {
+declare class ToastsController implements IToastsController {
     private counter;
     private toasts;
     constructor();
-    get toastList(): ToastProps[];
-    onToastsListChange(callback: (toasts: ToastProps[]) => void): () => void;
-    private ID;
-    private addOrUpdate;
     /**
-     * Add a toast
-     * @param options - The options for the toast
-     * @returns The id of the toast
+     * Returns an array of all currently active toasts.
+     * @description Useful for debugging or external monitoring
+     *
+     * @returns Array of toast properties for all active toasts
+     */
+    get toastList(): Toast[];
+    /**
+     * Subscribes to changes in the toast list.
+     *
+     * @param callback - Function called whenever toasts are added, updated, or removed
+     * @returns Unsubscribe function to stop listening for changes
+     *
+     * @example
+     * ```ts
+     * const unsubscribe = toasts.onToastsListChange((toastsList) => {
+     *   console.log('Toasts updated:', toastsList)
+     * })
+     *
+     * // Later, to stop listening:
+     * unsubscribe()
+     * ```
+     */
+    onToastsListChange(callback: (toasts: Toast[]) => void): () => void;
+    /**
+     * Creates a toast notification with custom options. If toast with the same ID already exists, it will be updated.
+     * @description Use this method when you need full control over toast configuration.
+     * @description For simpler use cases, consider using {@link success}, {@link error}, {@link warn}, or {@link loading} methods.
+     *
+     * @param options - Configuration options for the toast
+     * @returns Unique identifier of the created toast
+     *
+     * @example
+     * ```ts
+     * // Create a custom toast
+     * const id = toasts.add({
+     *   type: 'success',
+     *   message: 'Custom notification',
+     *   duration: 5000,
+     *   position: 'top-right',
+     *   autoClose: true
+     * })
+     *
+     * // Create with custom ID for later reference
+     * toasts.add({ id: 'my-toast', type: 'loading', message: 'Processing...' })
+     * ```
      */
     add(options: ToastOptions): string;
     /**
-     * Update a toast by id
-     * @param id - The id of the toast to update
-     * @param options - The options for the toast
-     * @returns The id of the toast
+     * Updates an existing toast notification by its ID.
+     * @description Useful for changing the content or appearance of a toast that is already displayed, such as updating a loading toast to show success or error state.
+     *
+     * @param id - Unique identifier of the toast to update
+     * @param options - New configuration options to apply
+     * @returns The same toast ID
+     *
+     * @example
+     * ```ts
+     * // Create a loading toast
+     * const id = toasts.loading('Uploading file...')
+     *
+     * // Later, update it to show success
+     * toasts.update(id, { type: 'success', message: 'File uploaded!' })
+     * ```
      */
     update(id: Id, options: ToastOptions): string;
     /**
-     * Remove a toast by id
-     * If no id is provided, all current toasts will be removed
-     * @param id - The id of the toast to remove
+     * Removes a toast notification from the screen.
+     * @description If no ID is provided, all currently visible toasts will be removed. If the specified ID doesn't exist, this method does nothing.
+     *
+     * @param id - Optional unique identifier of the toast to remove.
+     *             If omitted, all toasts are removed.
+     *
+     * @example
+     * ```ts
+     * // Remove a specific toast
+     * const id = toasts.success('Hello!')
+     * toasts.remove(id)
+     *
+     * // Remove all toasts
+     * toasts.remove()
+     * ```
+     *
+     * @see {@link clear} for explicitly removing all toasts
      */
     remove(id?: Id): void;
     /**
-     * Remove all current toasts
+     * Removes all currently visible toast notifications.
+     *
+     * @example
+     * ```ts
+     * // Clear all toasts on route change
+     * router.beforeEach(() => {
+     *   toasts.clear()
+     * })
+     * ```
      */
     clear(): void;
     /**
-     * Add a success toast
-     * @param message - The message to display in the toast
-     * @param options - The options for the toast
-     * @returns The id of the toast
+     * Displays a **success** toast notification.
+     *
+     * @param message - Text content to display in the toast
+     * @param options - Optional configuration (position, duration, autoClose, id)
+     * @returns Unique identifier of the created toast
+     *
+     * @example
+     * ```ts
+     * // Simple success message
+     * toasts.success('Changes saved successfully!')
+     *
+     * // With custom options
+     * toasts.success('Profile updated', {
+     *   duration: 5000,
+     *   position: 'bottom-center'
+     * })
+     * ```
      */
     success(message: string, options?: Omit<ToastSimpleOptions, "type">): string;
     /**
-     * Add an error toast
-     * @param message - The message to display in the toast
-     * @param options - The options for the toast
-     * @returns The id of the toast
+     * Displays an **error** toast notification.
+     *
+     * @param message - Text content to display in the toast
+     * @param options - Optional configuration (position, duration, autoClose, id)
+     * @returns Unique identifier of the created toast
+     *
+     * @example
+     * ```ts
+     * // Simple error message
+     * toasts.error('Failed to save changes')
+     *
+     * // Non-auto-closing error
+     * toasts.error('Critical error occurred', { autoClose: false })
+     * ```
      */
     error(message: string, options?: Omit<ToastSimpleOptions, "type">): string;
     /**
-     * Add a warning toast
-     * @param message - The message to display in the toast
-     * @param options - The options for the toast
-     * @returns The id of the toast
+     * Displays a **warning** toast notification.
+     *
+     * @param message - Text content to display in the toast
+     * @param options - Optional configuration (position, duration, autoClose, id)
+     * @returns Unique identifier of the created toast
+     *
+     * @example
+     * ```ts
+     * // Simple warning message
+     * toasts.warn('Your session will expire soon')
+     *
+     * // With longer duration
+     * toasts.warn('Unsaved changes detected', { duration: 10000 })
+     * ```
      */
     warn(message: string, options?: Omit<ToastSimpleOptions, "type">): string;
     /**
-     * Add a loading toast
-     * @param message - The message to display in the toast
-     * @param options - The options for the toast
-     * @returns The id of the toast
+     * Displays a **loading** toast notification.
+     *
+     * Loading toasts are typically used as placeholders while
+     * an async operation is in progress.
+     *
+     * @param message - Text content to display in the toast
+     * @param options - Optional configuration (position, duration, autoClose, id)
+     * @returns Unique identifier of the created toast
+     *
+     * @example
+     * ```ts
+     * // Manual loading state management
+     * const id = toasts.loading('Saving...')
+     *
+     * try {
+     *   await saveData()
+     *   toasts.update(id, { type: 'success', message: 'Saved!' })
+     * } catch {
+     *   toasts.update(id, { type: 'error', message: 'Save failed' })
+     * }
+     * ```
+     *
+     * @see {@link promise} for automatic promise-based state management
      */
     loading(message: string, options?: Omit<ToastSimpleOptions, "type">): string;
     /**
-     * Add a promise toast
-     * @param promise - The promise to display in the toast
-     * @param options - The options for the toast
-     * @returns The id of the toast
+     * Displays a **promise** toast that automatically updates based on promise resolution.
+     *
+     * Shows a loading toast while the promise is pending, then automatically
+     * transitions to success or error state based on the promise outcome.
+     *
+     * @template T - Type of the promise result
+     * @param promise - The promise to track
+     * @param options - Messages for each state and optional positioning
+     * @param options.loading - Message to show while promise is pending
+     * @param options.success - Message to show when promise resolves
+     * @param options.error - Message to show when promise rejects
+     * @param options.position - Optional toast position on screen
+     * @param options.id - Optional custom ID for the toast
+     * @returns Promise that resolves to the toast ID
+     * @throws Error with the error message if the promise rejects
+     *
+     * @example
+     * ```ts
+     * // Basic usage
+     * await toasts.promise(fetchUserData(), {
+     *   loading: 'Loading user data...',
+     *   success: 'User data loaded!',
+     *   error: 'Failed to load user data'
+     * })
+     *
+     * // With custom position
+     * await toasts.promise(uploadFile(file), {
+     *   loading: 'Uploading...',
+     *   success: 'File uploaded successfully!',
+     *   error: 'Upload failed',
+     *   position: 'bottom-right'
+     * })
+     * ```
      */
     promise<T>(promise: Promise<T>, options: ToastPromiseOptions): Promise<string>;
+    private ID;
+    private addOrUpdate;
+    private mergeWithDefaultOptions;
 }
 
-export declare type ToastSimpleOptions = Partial<Omit<ToastProps, "message">>;
+export declare type ToastSimpleOptions = Partial<Omit<Toast, "message">>;
 
 export declare const ToastsLiteProvider: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 

package/dist/index.js

@@ -1,57 +1,11 @@
-var L = Object.defineProperty;
-var M = (a, t, e) => t in a ? L(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
-var f = (a, t, e) => M(a, typeof t != "symbol" ? t + "" : t, e);
-import { defineComponent as w, ref as h, watchEffect as O, createElementBlock as m, openBlock as d, withModifiers as E, normalizeStyle as $, createCommentVNode as U, createElementVNode as v, normalizeClass as C, toDisplayString as D, computed as k, onBeforeUpdate as x, createBlock as g, Teleport as B, Fragment as b, renderList as T, createVNode as P, TransitionGroup as A, withCtx as I, unref as N } from "vue";
-const S = {
-  key: 0,
-  class: "toasts-lite__icon"
-}, V = { class: "toasts-lite__content" }, z = { class: "toasts-lite__content-message" }, F = /* @__PURE__ */ w({
-  __name: "ToastsLiteItem",
-  props: {
-    id: {},
-    type: {},
-    message: {},
-    autoClose: { type: Boolean },
-    duration: {},
-    position: {}
-  },
-  emits: ["close"],
-  setup(a, { expose: t, emit: e }) {
-    const o = a, n = e, i = h(null), p = h(0), c = h(0);
-    function s() {
-      i.value && clearTimeout(i.value), n("close");
-    }
-    function r() {
-      i.value && (clearTimeout(i.value), i.value = null, c.value = o.duration - (Date.now() - p.value));
-    }
-    function u() {
-      !i.value && c.value > 0 && (i.value = setTimeout(s, c.value));
-    }
-    return O(() => {
-      i.value && (clearTimeout(i.value), i.value = null), o.autoClose && (p.value = Date.now(), c.value = o.duration, i.value = setTimeout(s, o.duration));
-    }), t({
-      pause: r,
-      resume: u
-    }), (l, _) => (d(), m("div", {
-      class: "toasts-lite__toast",
-      style: $(`--toast-duration: ${a.duration}s;`),
-      onClick: E(s, ["prevent"])
-    }, [
-      ["success", "error", "loading", "warn"].includes(a.type) ? (d(), m("div", S, [
-        v("div", {
-          class: C(`toasts-lite__${a.type}`)
-        }, null, 2)
-      ])) : U("", !0),
-      v("div", V, [
-        v("div", z, D(a.message), 1)
-      ])
-    ], 4));
-  }
-});
-class R extends Map {
+var M = Object.defineProperty;
+var $ = (r, t, e) => t in r ? M(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var v = (r, t, e) => $(r, typeof t != "symbol" ? t + "" : t, e);
+import { ref as h, defineComponent as O, watch as L, onMounted as U, onUnmounted as k, createElementBlock as g, openBlock as d, withModifiers as A, normalizeStyle as E, createCommentVNode as x, createElementVNode as p, normalizeClass as D, toDisplayString as B, computed as P, createBlock as y, Teleport as I, Fragment as b, renderList as T, unref as m, createVNode as N, TransitionGroup as R, withCtx as S } from "vue";
+class V extends Map {
   constructor() {
     super(...arguments);
-    f(this, "subscribers", []);
+    v(this, "subscribers", []);
   }
   set(e, o) {
     return super.set(e, o), this.notify(), this;
@@ -72,108 +26,251 @@ class R extends Map {
     this.subscribers.forEach((e) => e(Array.from(this.values())));
   }
 }
-const j = {
+const w = {
   type: "success",
   message: "Hello from Toasts Lite",
   autoClose: !0,
   duration: 3e3,
   position: "top-center"
 };
-class G {
+class j {
   constructor() {
-    f(this, "counter", 0);
-    f(this, "toasts");
-    this.toasts = new R();
+    v(this, "counter", 0);
+    v(this, "toasts");
+    this.toasts = new V();
   }
+  /**
+   * Returns an array of all currently active toasts.
+   * @description Useful for debugging or external monitoring
+   *
+   * @returns Array of toast properties for all active toasts
+   */
   get toastList() {
     return Array.from(this.toasts.values());
   }
+  /**
+   * Subscribes to changes in the toast list.
+   *
+   * @param callback - Function called whenever toasts are added, updated, or removed
+   * @returns Unsubscribe function to stop listening for changes
+   *
+   * @example
+   * ```ts
+   * const unsubscribe = toasts.onToastsListChange((toastsList) => {
+   *   console.log('Toasts updated:', toastsList)
+   * })
+   *
+   * // Later, to stop listening:
+   * unsubscribe()
+   * ```
+   */
   onToastsListChange(t) {
     return this.toasts.subscribe(t);
   }
-  ID() {
-    return `toast:${Date.now().toString(16)}-${this.counter++}`;
-  }
-  addOrUpdate(t) {
-    let { id: e = this.ID(), ...o } = t;
-    if (this.toasts.has(e)) {
-      const n = this.toasts.get(e);
-      return Object.assign(n, o), this.toasts.set(e, n), e;
-    }
-    return this.toasts.set(e, { id: e, ...j, ...o }), e;
-  }
   /**
-   * Add a toast
-   * @param options - The options for the toast
-   * @returns The id of the toast
+   * Creates a toast notification with custom options. If toast with the same ID already exists, it will be updated.
+   * @description Use this method when you need full control over toast configuration.
+   * @description For simpler use cases, consider using {@link success}, {@link error}, {@link warn}, or {@link loading} methods.
+   *
+   * @param options - Configuration options for the toast
+   * @returns Unique identifier of the created toast
+   *
+   * @example
+   * ```ts
+   * // Create a custom toast
+   * const id = toasts.add({
+   *   type: 'success',
+   *   message: 'Custom notification',
+   *   duration: 5000,
+   *   position: 'top-right',
+   *   autoClose: true
+   * })
+   *
+   * // Create with custom ID for later reference
+   * toasts.add({ id: 'my-toast', type: 'loading', message: 'Processing...' })
+   * ```
    */
   add(t) {
     return this.addOrUpdate(t);
   }
   /**
-   * Update a toast by id
-   * @param id - The id of the toast to update
-   * @param options - The options for the toast
-   * @returns The id of the toast
+   * Updates an existing toast notification by its ID.
+   * @description Useful for changing the content or appearance of a toast that is already displayed, such as updating a loading toast to show success or error state.
+   *
+   * @param id - Unique identifier of the toast to update
+   * @param options - New configuration options to apply
+   * @returns The same toast ID
+   *
+   * @example
+   * ```ts
+   * // Create a loading toast
+   * const id = toasts.loading('Uploading file...')
+   *
+   * // Later, update it to show success
+   * toasts.update(id, { type: 'success', message: 'File uploaded!' })
+   * ```
    */
   update(t, e) {
     return this.addOrUpdate({ ...e, id: t });
   }
   /**
-   * Remove a toast by id
-   * If no id is provided, all current toasts will be removed
-   * @param id - The id of the toast to remove
+   * Removes a toast notification from the screen.
+   * @description If no ID is provided, all currently visible toasts will be removed. If the specified ID doesn't exist, this method does nothing.
+   *
+   * @param id - Optional unique identifier of the toast to remove.
+   *             If omitted, all toasts are removed.
+   *
+   * @example
+   * ```ts
+   * // Remove a specific toast
+   * const id = toasts.success('Hello!')
+   * toasts.remove(id)
+   *
+   * // Remove all toasts
+   * toasts.remove()
+   * ```
+   *
+   * @see {@link clear} for explicitly removing all toasts
    */
   remove(t) {
     t && !this.toasts.has(t) || (t ? this.toasts.delete(t) : this.clear());
   }
   /**
-   * Remove all current toasts
+   * Removes all currently visible toast notifications.
+   *
+   * @example
+   * ```ts
+   * // Clear all toasts on route change
+   * router.beforeEach(() => {
+   *   toasts.clear()
+   * })
+   * ```
    */
   clear() {
     this.toasts.clear();
   }
   /**
-   * Add a success toast
-   * @param message - The message to display in the toast
-   * @param options - The options for the toast
-   * @returns The id of the toast
+   * Displays a **success** toast notification.
+   *
+   * @param message - Text content to display in the toast
+   * @param options - Optional configuration (position, duration, autoClose, id)
+   * @returns Unique identifier of the created toast
+   *
+   * @example
+   * ```ts
+   * // Simple success message
+   * toasts.success('Changes saved successfully!')
+   *
+   * // With custom options
+   * toasts.success('Profile updated', {
+   *   duration: 5000,
+   *   position: 'bottom-center'
+   * })
+   * ```
    */
   success(t, e) {
     return this.addOrUpdate({ ...e, message: t, type: "success" });
   }
   /**
-   * Add an error toast
-   * @param message - The message to display in the toast
-   * @param options - The options for the toast
-   * @returns The id of the toast
+   * Displays an **error** toast notification.
+   *
+   * @param message - Text content to display in the toast
+   * @param options - Optional configuration (position, duration, autoClose, id)
+   * @returns Unique identifier of the created toast
+   *
+   * @example
+   * ```ts
+   * // Simple error message
+   * toasts.error('Failed to save changes')
+   *
+   * // Non-auto-closing error
+   * toasts.error('Critical error occurred', { autoClose: false })
+   * ```
    */
   error(t, e) {
     return this.addOrUpdate({ ...e, message: t, type: "error" });
   }
   /**
-   * Add a warning toast
-   * @param message - The message to display in the toast
-   * @param options - The options for the toast
-   * @returns The id of the toast
+   * Displays a **warning** toast notification.
+   *
+   * @param message - Text content to display in the toast
+   * @param options - Optional configuration (position, duration, autoClose, id)
+   * @returns Unique identifier of the created toast
+   *
+   * @example
+   * ```ts
+   * // Simple warning message
+   * toasts.warn('Your session will expire soon')
+   *
+   * // With longer duration
+   * toasts.warn('Unsaved changes detected', { duration: 10000 })
+   * ```
    */
   warn(t, e) {
     return this.addOrUpdate({ ...e, message: t, type: "warn" });
   }
   /**
-   * Add a loading toast
-   * @param message - The message to display in the toast
-   * @param options - The options for the toast
-   * @returns The id of the toast
+   * Displays a **loading** toast notification.
+   *
+   * Loading toasts are typically used as placeholders while
+   * an async operation is in progress.
+   *
+   * @param message - Text content to display in the toast
+   * @param options - Optional configuration (position, duration, autoClose, id)
+   * @returns Unique identifier of the created toast
+   *
+   * @example
+   * ```ts
+   * // Manual loading state management
+   * const id = toasts.loading('Saving...')
+   *
+   * try {
+   *   await saveData()
+   *   toasts.update(id, { type: 'success', message: 'Saved!' })
+   * } catch {
+   *   toasts.update(id, { type: 'error', message: 'Save failed' })
+   * }
+   * ```
+   *
+   * @see {@link promise} for automatic promise-based state management
    */
   loading(t, e) {
     return this.addOrUpdate({ ...e, message: t, type: "loading" });
   }
   /**
-   * Add a promise toast
-   * @param promise - The promise to display in the toast
-   * @param options - The options for the toast
-   * @returns The id of the toast
+   * Displays a **promise** toast that automatically updates based on promise resolution.
+   *
+   * Shows a loading toast while the promise is pending, then automatically
+   * transitions to success or error state based on the promise outcome.
+   *
+   * @template T - Type of the promise result
+   * @param promise - The promise to track
+   * @param options - Messages for each state and optional positioning
+   * @param options.loading - Message to show while promise is pending
+   * @param options.success - Message to show when promise resolves
+   * @param options.error - Message to show when promise rejects
+   * @param options.position - Optional toast position on screen
+   * @param options.id - Optional custom ID for the toast
+   * @returns Promise that resolves to the toast ID
+   * @throws Error with the error message if the promise rejects
+   *
+   * @example
+   * ```ts
+   * // Basic usage
+   * await toasts.promise(fetchUserData(), {
+   *   loading: 'Loading user data...',
+   *   success: 'User data loaded!',
+   *   error: 'Failed to load user data'
+   * })
+   *
+   * // With custom position
+   * await toasts.promise(uploadFile(file), {
+   *   loading: 'Uploading...',
+   *   success: 'File uploaded successfully!',
+   *   error: 'Upload failed',
+   *   position: 'bottom-right'
+   * })
+   * ```
    */
   async promise(t, e) {
     const o = this.loading(e.loading, { position: e.position, id: e.id });
@@ -183,75 +280,153 @@ class G {
       throw this.error(e.error, { position: e.position, id: o }), new Error(e.error);
     }
   }
+  ID() {
+    return `toast:${Date.now().toString(16)}-${this.counter++}`;
+  }
+  addOrUpdate(t) {
+    let { id: e = this.ID(), ...o } = t;
+    if (this.toasts.has(e)) {
+      const n = this.toasts.get(e);
+      return Object.assign(n, o), this.toasts.set(e, n), e;
+    }
+    return this.toasts.set(e, { ...this.mergeWithDefaultOptions(o), id: e }), e;
+  }
+  mergeWithDefaultOptions(t) {
+    const e = Object.assign({}, w);
+    for (let o in w) {
+      const n = o, s = t[n];
+      s != null && (e[n] = s);
+    }
+    return e;
+  }
 }
-const y = new G(), H = ["onMouseenter", "onMouseleave"], K = /* @__PURE__ */ w({
-  __name: "ToastsLiteProvider",
-  setup(a) {
-    const t = [
-      "top-left",
-      "top-center",
-      "top-right",
-      "middle-center",
-      "bottom-left",
-      "bottom-center",
-      "bottom-right"
-    ], e = h(y.toastList);
-    y.onToastsListChange((s) => {
-      e.value = s;
-    });
-    const o = k(() => {
-      const s = /* @__PURE__ */ new Map();
-      return e.value.forEach((r) => {
-        const u = r.position || "top-center";
-        s.has(u) || s.set(u, []), s.get(u).push(r);
-      }), s;
-    }), n = h({});
-    x(() => {
-      for (const s of t)
-        n.value[s] = [];
-    });
-    function i(s) {
-      n.value[s] && n.value[s].forEach((r) => r == null ? void 0 : r.pause());
+const C = new j();
+function z() {
+  const r = h(/* @__PURE__ */ new Map());
+  function t(n, s, a) {
+    r.value.has(n) || r.value.set(n, []);
+    const i = r.value.get(n);
+    a && "pause" in a && "resume" in a && (i[s] = a);
+  }
+  function e(n) {
+    var s;
+    (s = r.value.get(n)) == null || s.forEach((a) => a == null ? void 0 : a.pause());
+  }
+  function o(n) {
+    var s;
+    (s = r.value.get(n)) == null || s.forEach((a) => a == null ? void 0 : a.resume());
+  }
+  return {
+    setRef: t,
+    pauseAll: e,
+    resumeAll: o
+  };
+}
+const F = {
+  key: 0,
+  class: "toasts-lite__icon"
+}, W = { class: "toasts-lite__content" }, G = { class: "toasts-lite__content-message" }, H = /* @__PURE__ */ O({
+  __name: "ToastsLiteItem",
+  props: {
+    id: {},
+    type: {},
+    message: {},
+    autoClose: { type: Boolean },
+    duration: {},
+    position: {}
+  },
+  emits: ["close"],
+  setup(r, { expose: t, emit: e }) {
+    const o = r, n = e, s = h(null), a = h(0), i = h(0);
+    function c() {
+      s.value && clearTimeout(s.value), n("close");
+    }
+    function u() {
+      s.value && (clearTimeout(s.value), s.value = null, i.value = o.duration - (Date.now() - a.value));
     }
-    function p(s) {
-      n.value[s] && n.value[s].forEach((r) => r == null ? void 0 : r.resume());
+    function l() {
+      !s.value && i.value > 0 && (a.value = Date.now(), s.value = setTimeout(c, i.value));
     }
-    function c(s, r) {
-      n.value[s] || (n.value[s] = []), r && "pause" in r && "resume" in r && n.value[s].push(r);
+    function f() {
+      s.value && (clearTimeout(s.value), s.value = null), o.autoClose && (a.value = Date.now(), i.value = o.duration, s.value = setTimeout(c, o.duration));
     }
-    return (s, r) => (d(), g(B, { to: "body" }, [
-      (d(), m(b, null, T(t, (u) => v("div", {
+    return L(
+      () => [o.autoClose, o.duration],
+      () => {
+        f();
+      }
+    ), U(() => {
+      f();
+    }), k(() => {
+      s.value && clearTimeout(s.value);
+    }), t({
+      pause: u,
+      resume: l
+    }), (_, J) => (d(), g("div", {
+      class: "toasts-lite__toast",
+      style: E(`--toast-duration: ${r.duration}s;`),
+      onClick: A(c, ["prevent"])
+    }, [
+      ["success", "error", "loading", "warn"].includes(r.type) ? (d(), g("div", F, [
+        p("div", {
+          class: D(`toasts-lite__${r.type}`)
+        }, null, 2)
+      ])) : x("", !0),
+      p("div", W, [
+        p("div", G, B(r.message), 1)
+      ])
+    ], 4));
+  }
+}), q = ["onMouseenter", "onMouseleave"], X = /* @__PURE__ */ O({
+  __name: "ToastsLiteProvider",
+  setup(r) {
+    const t = ["top-left", "top-center", "top-right", "middle-center", "bottom-left", "bottom-center", "bottom-right"], e = h([]), { setRef: o, pauseAll: n, resumeAll: s } = z();
+    C.onToastsListChange((i) => {
+      e.value = i;
+    });
+    const a = P(() => {
+      const i = /* @__PURE__ */ new Map();
+      return e.value.forEach((c) => {
+        const u = c.position || "top-center";
+        i.has(u) || i.set(u, []), i.get(u).push(c);
+      }), i;
+    });
+    return (i, c) => (d(), y(I, { to: "body" }, [
+      (d(), g(b, null, T(t, (u) => p("div", {
         key: u,
-        class: C(["toasts-lite__toast-container", `toasts-lite__${u}`]),
-        onMouseenter: (l) => i(u),
-        onMouseleave: (l) => p(u)
+        class: D(["toasts-lite__toast-container", `toasts-lite__${u}`])
       }, [
-        P(A, {
-          name: "toasts-lite",
-          appear: ""
-        }, {
-          default: I(() => [
-            (d(!0), m(b, null, T(o.value.get(u) || [], (l) => (d(), g(F, {
-              id: l.id,
-              ref_for: !0,
-              ref: (_) => c(u, _),
-              key: l.id,
-              type: l.type,
-              message: l.message,
-              "auto-close": l.autoClose,
-              duration: l.duration,
-              position: l.position,
-              onClose: (_) => N(y).remove(l.id)
-            }, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "onClose"]))), 128))
-          ]),
-          _: 2
-        }, 1024)
-      ], 42, H)), 64))
+        p("div", {
+          class: "toasts-lite__toast-wrapper",
+          onMouseenter: (l) => m(n)(u),
+          onMouseleave: (l) => m(s)(u)
+        }, [
+          N(R, {
+            name: "toasts-lite",
+            appear: ""
+          }, {
+            default: S(() => [
+              (d(!0), g(b, null, T(a.value.get(u) || [], (l, f) => (d(), y(H, {
+                id: l.id,
+                ref_for: !0,
+                ref: (_) => m(o)(u, f, _),
+                key: l.id,
+                type: l.type,
+                message: l.message,
+                "auto-close": l.autoClose,
+                duration: l.duration,
+                position: l.position,
+                onClose: (_) => m(C).remove(l.id)
+              }, null, 8, ["id", "type", "message", "auto-close", "duration", "position", "onClose"]))), 128))
+            ]),
+            _: 2
+          }, 1024)
+        ], 40, q)
+      ], 2)), 64))
     ]));
   }
 });
 export {
-  G as ToastsController,
-  K as ToastsLiteProvider,
-  y as toasts
+  X as ToastsLiteProvider,
+  C as toasts
 };

package/dist/style.css

@@ -1 +1 @@
-:root{--toasts-lite-font-family: var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);--toasts-lite-bg: var(--tl-bg, hsl(0, 0%, 100%));--toasts-lite-text: var(--tl-text, hsl(0, 0%, 20%));--toasts-lite-border: var(--tl-border, hsl(0, 0%, 85%));--toasts-lite-shadow: var(--tl-shadow, hsla(0, 0%, 0%, .1));--toasts-lite-success: var(--tl-success, hsl(145, 63%, 42%));--toasts-lite-error: var(--tl-error, hsl(0, 79%, 63%));--toasts-lite-warn: var(--tl-warn, hsl(45, 100%, 51%));--toasts-lite-icon-color: var(--tl-icon-color, hsl(0, 0%, 100%));--toasts-lite-loading-border-main: var(--tl-loading-border, hsl(0, 0%, 15%));--toasts-lite-loading-border-bg: var(--tl-loading-bg, hsl(0, 0%, 98%))}@keyframes scaleAnimation{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes loadingRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toasts-lite-enter-active,.toasts-lite-leave-active{transition:opacity .3s ease,transform .3s ease}.toasts-lite-enter-from,.toasts-lite-leave-to{opacity:0;transform:translateY(-10px)}.toasts-lite__toast-container{position:fixed;z-index:9999;margin:10px;overflow:visible;display:flex;flex-direction:column;align-items:center;padding-top:12px;gap:12px;pointer-events:none}.toasts-lite__toast{font-family:var(--toasts-lite-font-family);display:flex;justify-content:center;align-items:center;background:var(--toasts-lite-bg);color:var(--toasts-lite-text);border:1px solid var(--toasts-lite-border);box-shadow:var(--toasts-lite-shadow) 0 0 10px;min-width:100px;max-width:1200px;padding:10px 20px;border-radius:8px;cursor:pointer;pointer-events:auto;text-overflow:ellipsis}.toasts-lite__icon{margin-right:12px}.toasts-lite__top-left{top:0;left:0}.toasts-lite__top-center{top:0;left:50%;transform:translate(-50%);min-width:80vw}.toasts-lite__top-right{top:0;right:0}.toasts-lite__bottom-left{bottom:0;left:0}.toasts-lite__bottom-center{bottom:0;left:50%;transform:translate(-50%)}.toasts-lite__bottom-right{bottom:0;right:0}.toasts-lite__middle-center{top:50%;left:50%;transform:translate(-50%,-50%)}.toasts-lite__success{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-success);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__success:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__error{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-error);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__error:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__warn{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-warn);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__warn:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="5" stroke="currentColor" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="5" stroke="currentColor" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__loading{width:20px;height:20px;box-sizing:border-box;border:2px solid;border-radius:100%;border-color:var(--toasts-lite-loading-border-main);border-right-color:var(--toasts-lite-loading-border-bg);animation:loadingRotate 1s linear infinite}
+:root{--toasts-lite-font-family: var(--tl-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif);--toasts-lite-bg: var(--tl-bg, hsl(0, 0%, 100%));--toasts-lite-text: var(--tl-text, hsl(0, 0%, 20%));--toasts-lite-border: var(--tl-border, hsl(0, 0%, 85%));--toasts-lite-shadow: var(--tl-shadow, hsla(0, 0%, 0%, .1));--toasts-lite-success: var(--tl-success, hsl(145, 63%, 42%));--toasts-lite-error: var(--tl-error, hsl(0, 79%, 63%));--toasts-lite-warn: var(--tl-warn, hsl(45, 100%, 51%));--toasts-lite-icon-color: var(--tl-icon-color, hsl(0, 0%, 100%));--toasts-lite-loading-border-main: var(--tl-loading-border, hsl(0, 0%, 15%));--toasts-lite-loading-border-bg: var(--tl-loading-bg, hsl(0, 0%, 98%))}@keyframes scaleAnimation{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes loadingRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toasts-lite-enter-active,.toasts-lite-leave-active{transition:opacity .3s ease,transform .3s ease}.toasts-lite-enter-from,.toasts-lite-leave-to{opacity:0;transform:translateY(-10px)}.toasts-lite__toast-container{position:fixed;z-index:9999;margin:10px;overflow:visible;display:flex;flex-direction:column;align-items:center;padding-top:12px;pointer-events:none}.toasts-lite__toast-wrapper{display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:auto}.toasts-lite__toast{font-family:var(--toasts-lite-font-family);display:flex;justify-content:center;align-items:center;background:var(--toasts-lite-bg);color:var(--toasts-lite-text);border:1px solid var(--toasts-lite-border);box-shadow:var(--toasts-lite-shadow) 0 0 10px;min-width:100px;max-width:1200px;padding:10px 20px;border-radius:8px;cursor:pointer;pointer-events:auto;text-overflow:ellipsis}.toasts-lite__icon{margin-right:12px}.toasts-lite__top-left{top:0;left:0}.toasts-lite__top-center{top:0;left:50%;transform:translate(-50%);min-width:80vw}.toasts-lite__top-right{top:0;right:0}.toasts-lite__bottom-left{bottom:0;left:0}.toasts-lite__bottom-center{bottom:0;left:50%;transform:translate(-50%)}.toasts-lite__bottom-right{bottom:0;right:0}.toasts-lite__middle-center{top:50%;left:50%;transform:translate(-50%,-50%)}.toasts-lite__success{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-success);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__success:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__error{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-error);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__error:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="black"><path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6l-12 12" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__warn{width:20px;height:20px;border-radius:10px;background-color:var(--toasts-lite-warn);position:relative;opacity:0;animation:scaleAnimation .3s cubic-bezier(.75,.885,.32,1.275) forwards;animation-delay:.1s}.toasts-lite__warn:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="5" stroke="currentColor" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="5" stroke="currentColor" ><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14" /></svg>');background-color:var(--toasts-lite-icon-color);background-size:100%;background-position:center;background-repeat:no-repeat}.toasts-lite__loading{width:20px;height:20px;box-sizing:border-box;border:2px solid;border-radius:100%;border-color:var(--toasts-lite-loading-border-main);border-right-color:var(--toasts-lite-loading-border-bg);animation:loadingRotate 1s linear infinite}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-toasts-lite",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "scheron",
@@ -10,7 +10,7 @@
   },
   "license": "MIT",
   "description": "Lightweight toast notifications for Vue 3",
-  "keywords": [ "vue", "toast", "notification", "vue3" ],
+  "keywords": ["vue", "toast", "notification", "vue3"],
   "files": [
     "dist"
   ],
@@ -25,6 +25,10 @@
   },
   "scripts": {
     "dev": "vite",
+    "format": "prettier --write src/",
+    "format:example": "prettier --write example/",
+    "format:all": "bun run format && bun run format:example",
+    "typecheck": "vue-tsc",
     "build": "vite build",
     "build:example": "cd example && bun run build",
     "preview": "vite preview"
@@ -33,11 +37,14 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
     "@types/node": "^25.0.8",
     "@vitejs/plugin-vue": "^5.0.0",
+    "prettier": "^3.8.0",
     "typescript": "^5.8.3",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^4.5.4",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vue-tsc": "^3.2.2"
   }
 }