@rosadorito/vue-toast 0.0.1

package/README.md

@@ -0,0 +1,311 @@
+# Vue Toast
+
+A lightweight, customizable toast notification library for Vue 3.
+
+## Features
+
+- 🎨 **Multiple toast types**: Success, Error, Warning, Info, and Default
+- 📍 **Flexible positioning**: 6 different positions (top/bottom-left/center/right)
+- ⏱️ **Auto-dismiss**: Configurable duration with auto-removal
+- 🎯 **Programmatic API**: Use via composable or global plugin
+- ♿ **Accessible**: ARIA labels and proper semantic markup
+- 📱 **Responsive**: Works on mobile and desktop
+- 🎨 **Customizable**: Style with CSS custom properties
+- 🧪 **TypeScript**: Full TypeScript support
+- 🌳 **Tree-shakable**: Only import what you need
+
+## Installation
+
+```bash
+npm install vue-toast
+# or
+yarn add vue-toast
+# or
+pnpm add vue-toast
+```
+
+## Quick Start
+
+### As a Plugin (Global)
+
+```javascript
+import { createApp } from 'vue'
+import App from './App.vue'
+import VueToast from 'vue-toast'
+
+const app = createApp(App)
+app.use(VueToast)
+app.mount('#app')
+```
+
+Now you can use it anywhere in your components:
+
+```vue
+<template>
+  <button @click="showToast">Show Toast</button>
+</template>
+
+<script setup>
+const showToast = () => {
+  // Using global $toast
+  this.$toast.success('Operation completed successfully!')
+  
+  // Or with options
+  this.$toast.error('Something went wrong!', {
+    duration: 3000,
+    position: 'top-center',
+  })
+}
+</script>
+```
+
+### Using Composables (Recommended)
+
+```vue
+<template>
+  <div>
+    <button @click="showSuccess">Success</button>
+    <button @click="showError">Error</button>
+    
+    <!-- Render toasts -->
+    <div v-for="(toasts, position) in groupedToasts" :key="position">
+      <VueToast
+        v-for="(toast, index) in toasts"
+        :key="toast.id"
+        :toast="toast"
+        :index="index"
+        :total="toasts.length"
+        @close="removeToast(toast.id)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { VueToast, useToast } from 'vue-toast'
+
+const { 
+  success, 
+  error, 
+  warning, 
+  info, 
+  addToast, 
+  removeToast, 
+  groupedToasts 
+} = useToast()
+
+const showSuccess = () => {
+  success('Operation completed!', {
+    duration: 3000,
+    position: 'bottom-right',
+  })
+}
+
+const showError = () => {
+  error('Something went wrong!', {
+    duration: 5000,
+    dismissible: false,
+  })
+}
+</script>
+```
+
+## API Reference
+
+### Toast Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `message` | `string` | **Required** | The message to display |
+| `type` | `'success' \| 'error' \| 'warning' \| 'info' \| 'default'` | `'default'` | Toast type |
+| `duration` | `number` | `5000` | Duration in milliseconds (0 for no auto-dismiss) |
+| `position` | `ToastPosition` | `'top-right'` | Position on screen |
+| `dismissible` | `boolean` | `true` | Whether to show close button |
+| `id` | `string` | Auto-generated | Unique identifier |
+| `onClose` | `() => void` | - | Callback when toast closes |
+| `onClick` | `() => void` | - | Callback when toast is clicked |
+
+### Toast Positions
+
+```typescript
+type ToastPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right'
+```
+
+### useToast() Composables
+
+```typescript
+const {
+  // State
+  toasts,           // Array of all toasts
+  groupedToasts,    // Toasts grouped by position
+  
+  // Methods
+  addToast,         // Add a toast with custom options
+  removeToast,      // Remove a toast by id
+  clearToasts,      // Remove all toasts
+  
+  // Convenience methods
+  success,          // Add success toast
+  error,            // Add error toast
+  warning,          // Add warning toast
+  info,             // Add info toast
+} = useToast(defaultPosition?: ToastPosition)
+```
+
+### Global Plugin API
+
+When installed as a plugin, `$toast` is available on Vue instances:
+
+```typescript
+// In Options API
+this.$toast.success('Message')
+
+// In Composition API setup()
+import { getCurrentInstance } from 'vue'
+
+const instance = getCurrentInstance()
+instance?.proxy?.$toast.success('Message')
+```
+
+Methods available on `$toast`:
+- `success(message, options?)`
+- `error(message, options?)`
+- `warning(message, options?)`
+- `info(message, options?)`
+- `add(options)`
+
+## Styling
+
+### CSS Custom Properties
+
+You can customize the appearance using CSS custom properties:
+
+```css
+:root {
+  --vue-toast-border-radius: 6px;
+  --vue-toast-padding: 12px 16px;
+  --vue-toast-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --vue-toast-font-size: 14px;
+  --vue-toast-line-height: 1.4;
+  --vue-toast-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Type-specific colors */
+.vue-toast--success {
+  --vue-toast-border-color: #10b981;
+  --vue-toast-bg-color: #f0fdf4;
+  --vue-toast-text-color: #065f46;
+}
+
+.vue-toast--error {
+  --vue-toast-border-color: #ef4444;
+  --vue-toast-bg-color: #fef2f2;
+  --vue-toast-text-color: #991b1b;
+}
+```
+
+### Overriding Styles
+
+You can override the default styles by targeting the component classes:
+
+```css
+.vue-toast {
+  /* Your custom styles */
+}
+
+.vue-toast__close {
+  /* Custom close button styles */
+}
+```
+
+## TypeScript
+
+Full TypeScript support is included. Import types as needed:
+
+```typescript
+import type { ToastOptions, ToastPosition, ToastType } from 'vue-toast'
+```
+
+## Examples
+
+### Multiple Toasts with Different Positions
+
+```vue
+<template>
+  <div>
+    <button @click="addTopLeft">Top Left</button>
+    <button @click="addBottomCenter">Bottom Center</button>
+    
+    <div v-for="(toasts, position) in groupedToasts" :key="position">
+      <VueToast
+        v-for="(toast, index) in toasts"
+        :key="toast.id"
+        :toast="toast"
+        :index="index"
+        :total="toasts.length"
+        @close="removeToast(toast.id)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useToast } from 'vue-toast'
+
+const { addToast, removeToast, groupedToasts } = useToast()
+
+const addTopLeft = () => {
+  addToast({
+    message: 'Top left notification',
+    type: 'info',
+    position: 'top-left',
+    duration: 3000,
+  })
+}
+
+const addBottomCenter = () => {
+  addToast({
+    message: 'Bottom center warning',
+    type: 'warning',
+    position: 'bottom-center',
+    duration: 5000,
+  })
+}
+</script>
+```
+
+### Toast with Callbacks
+
+```javascript
+const showToastWithCallback = () => {
+  addToast({
+    message: 'Click me!',
+    type: 'success',
+    onClick: () => {
+      console.log('Toast clicked!')
+      // Navigate or perform action
+    },
+    onClose: () => {
+      console.log('Toast closed')
+      // Cleanup or tracking
+    },
+  })
+}
+```
+
+## Browser Support
+
+- Chrome 60+
+- Firefox 60+
+- Safari 12+
+- Edge 79+
+
+## License
+
+MIT

package/dist/components/Toast/Toast.vue.d.ts

@@ -0,0 +1,10 @@
+import { ToastComponentProps } from '../../types';
+declare const _default: import('vue').DefineComponent<ToastComponentProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: (id?: string | undefined) => any;
+    click: () => any;
+}, string, import('vue').PublicProps, Readonly<ToastComponentProps> & Readonly<{
+    onClose?: ((id?: string | undefined) => any) | undefined;
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=Toast.vue.d.ts.map

package/dist/components/Toast/Toast.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.vue"],"names":[],"mappings":"AAyCA;AAgQA,OAAO,KAAK,EAAE,mBAAmB,EAAa,MAAM,SAAS,CAAA;;;;;;;;AAyJ7D,wBAQG"}

package/dist/components/Toast/index.d.ts

@@ -0,0 +1,4 @@
+import { default as Toast } from './Toast.vue';
+export { Toast };
+export default Toast;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,aAAa,CAAA;AAE/B,OAAO,EAAE,KAAK,EAAE,CAAA;AAChB,eAAe,KAAK,CAAA"}

package/dist/composables/useToast.d.ts

@@ -0,0 +1,20 @@
+import { Ref } from 'vue';
+import { ToastOptions, ToastPosition } from '../types';
+interface ToastInstance extends ToastOptions {
+    id: string;
+    timer?: ReturnType<typeof setTimeout>;
+}
+export declare function useToast(defaultPosition?: ToastPosition): {
+    toasts: Ref<ToastInstance[], ToastInstance[]>;
+    groupedToasts: import('vue').ComputedRef<Record<string, ToastInstance[]>>;
+    addToast: (options: ToastOptions) => string;
+    removeToast: (id: string) => void;
+    clearToasts: () => void;
+    success: (message: string, options?: Omit<ToastOptions, "message" | "type">) => string;
+    error: (message: string, options?: Omit<ToastOptions, "message" | "type">) => string;
+    warning: (message: string, options?: Omit<ToastOptions, "message" | "type">) => string;
+    info: (message: string, options?: Omit<ToastOptions, "message" | "type">) => string;
+};
+export type UseToastReturn = ReturnType<typeof useToast>;
+export {};
+//# sourceMappingURL=useToast.d.ts.map

package/dist/composables/useToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/composables/useToast.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE1D,UAAU,aAAc,SAAQ,YAAY;IAC1C,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAA;CACtC;AAED,wBAAgB,QAAQ,CAAC,eAAe,GAAE,aAA2B;;;wBAKxC,YAAY;sBAqBd,MAAM;;uBA6BL,MAAM,YAAW,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,CAAC;qBAQzD,MAAM,YAAW,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,CAAC;uBAQrD,MAAM,YAAW,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,CAAC;oBAQ1D,MAAM,YAAW,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,CAAC;EAqC/E;AAED,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAA"}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { App } from 'vue';
+import { default as Toast } from './components/Toast';
+import { useToast } from './composables/useToast';
+import { ToastOptions, ToastPosition, ToastType } from './types';
+export { Toast, useToast };
+export type { ToastOptions, ToastPosition, ToastType };
+declare const VueToast: {
+    install: (app: App, pluginOptions?: {
+        defaultPosition?: ToastPosition;
+    }) => void;
+};
+export default VueToast;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAC9B,OAAO,KAAK,MAAM,oBAAoB,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACjD,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAErE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAA;AAC1B,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,CAAA;AAEtD,QAAA,MAAM,QAAQ;mBACG,GAAG,kBAAkB;QAAE,eAAe,CAAC,EAAE,aAAa,CAAA;KAAE;CA0BxE,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/types/index.d.ts

@@ -0,0 +1,18 @@
+export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'default';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastOptions {
+    id?: string;
+    type?: ToastType;
+    message: string;
+    duration?: number;
+    position?: ToastPosition;
+    dismissible?: boolean;
+    onClose?: () => void;
+    onClick?: () => void;
+}
+export interface ToastComponentProps {
+    toast: ToastOptions;
+    index: number;
+    total: number;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;AAE5E,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAA;AAElB,MAAM,WAAW,YAAY;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,YAAY,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd"}

package/dist/vue-toast.css

@@ -0,0 +1 @@
+.vue-toast[data-v-38db861e]{position:relative;display:flex;align-items:center;justify-content:space-between;min-width:300px;max-width:500px;padding:12px 16px;margin-bottom:8px;border-radius:6px;box-shadow:0 4px 12px #00000026;background-color:#fff;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.4;animation:toast-slide-in-38db861e .3s ease-out;transition:transform .2s ease,opacity .2s ease;z-index:calc(1000 + var(--toast-index));cursor:pointer}.vue-toast[data-v-38db861e]:hover{transform:translateY(-1px);box-shadow:0 6px 16px #0003}.vue-toast--success[data-v-38db861e]{border-left:4px solid #10b981;background-color:#f0fdf4;color:#065f46}.vue-toast--error[data-v-38db861e]{border-left:4px solid #ef4444;background-color:#fef2f2;color:#991b1b}.vue-toast--warning[data-v-38db861e]{border-left:4px solid #f59e0b;background-color:#fffbeb;color:#92400e}.vue-toast--info[data-v-38db861e]{border-left:4px solid #3b82f6;background-color:#eff6ff;color:#1e40af}.vue-toast--default[data-v-38db861e]{border-left:4px solid #6b7280;background-color:#f9fafb;color:#374151}.vue-toast__content[data-v-38db861e]{flex:1;margin-right:8px}.vue-toast__message[data-v-38db861e]{word-break:break-word}.vue-toast__close[data-v-38db861e]{flex-shrink:0;background:none;border:none;padding:4px;margin-left:8px;cursor:pointer;color:inherit;opacity:.7;border-radius:4px;transition:opacity .2s ease,background-color .2s ease}.vue-toast__close[data-v-38db861e]:hover{opacity:1;background-color:#0000001a}.vue-toast__close[data-v-38db861e]:focus{outline:2px solid currentColor;outline-offset:2px}.vue-toast__close-icon[data-v-38db861e]{display:block}.vue-toast--topleft[data-v-38db861e]{position:fixed;top:20px;left:20px}.vue-toast--topcenter[data-v-38db861e]{position:fixed;top:20px;left:50%;transform:translate(-50%)}.vue-toast--topright[data-v-38db861e]{position:fixed;top:20px;right:20px}.vue-toast--bottomleft[data-v-38db861e]{position:fixed;bottom:20px;left:20px}.vue-toast--bottomcenter[data-v-38db861e]{position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.vue-toast--bottomright[data-v-38db861e]{position:fixed;bottom:20px;right:20px}@keyframes toast-slide-in-38db861e{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.vue-toast[data-v-38db861e]{min-width:calc(100vw - 40px);max-width:calc(100vw - 40px);margin-left:20px;margin-right:20px}.vue-toast--topleft[data-v-38db861e],.vue-toast--topcenter[data-v-38db861e],.vue-toast--topright[data-v-38db861e]{top:10px}.vue-toast--bottomleft[data-v-38db861e],.vue-toast--bottomcenter[data-v-38db861e],.vue-toast--bottomright[data-v-38db861e]{bottom:10px}}

package/dist/vue-toast.es.js

@@ -0,0 +1,233 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, createElementVNode, toDisplayString, withModifiers, createCommentVNode, ref, onUnmounted } from "vue";
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = { class: "vue-toast__content" };
+const _hoisted_3 = { class: "vue-toast__message" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Toast",
+  props: {
+    toast: {},
+    index: {},
+    total: {}
+  },
+  emits: ["close", "click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const positionClass = computed(() => {
+      const position = props.toast.position || "top-right";
+      return position.replace("-", "");
+    });
+    const toastStyle = computed(() => ({
+      "--toast-index": props.index,
+      "--toast-total": props.total
+    }));
+    const ariaLabel = computed(() => {
+      const type = props.toast.type || "default";
+      const typeLabels = {
+        success: "Success notification",
+        error: "Error notification",
+        warning: "Warning notification",
+        info: "Information notification",
+        default: "Notification"
+      };
+      return typeLabels[type];
+    });
+    const handleClose = () => {
+      emit("close", props.toast.id);
+    };
+    const handleClick = () => {
+      if (props.toast.onClick) {
+        props.toast.onClick();
+      }
+      emit("click");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "vue-toast",
+          `vue-toast--${__props.toast.type || "default"}`,
+          `vue-toast--${positionClass.value}`,
+          { "vue-toast--dismissible": __props.toast.dismissible }
+        ]),
+        style: normalizeStyle(toastStyle.value),
+        onClick: handleClick,
+        role: "alert",
+        "aria-live": "polite",
+        "aria-label": ariaLabel.value
+      }, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("span", _hoisted_3, toDisplayString(__props.toast.message), 1)
+        ]),
+        __props.toast.dismissible ? (openBlock(), createElementBlock("button", {
+          key: 0,
+          class: "vue-toast__close",
+          onClick: withModifiers(handleClose, ["stop"]),
+          "aria-label": "Close notification"
+        }, [..._cache[0] || (_cache[0] = [
+          createElementVNode("svg", {
+            class: "vue-toast__close-icon",
+            viewBox: "0 0 24 24",
+            width: "16",
+            height: "16",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          }, [
+            createElementVNode("line", {
+              x1: "18",
+              y1: "6",
+              x2: "6",
+              y2: "18"
+            }),
+            createElementVNode("line", {
+              x1: "6",
+              y1: "6",
+              x2: "18",
+              y2: "18"
+            })
+          ], -1)
+        ])])) : createCommentVNode("", true)
+      ], 14, _hoisted_1);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const Toast = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-38db861e"]]);
+function useToast(defaultPosition = "top-right") {
+  const toasts = ref([]);
+  const generateId = () => `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  const addToast = (options) => {
+    const id = options.id || generateId();
+    const toast = {
+      ...options,
+      id,
+      position: options.position || defaultPosition,
+      duration: options.duration ?? 5e3,
+      dismissible: options.dismissible ?? true
+    };
+    toasts.value.push(toast);
+    if (toast.duration && toast.duration > 0) {
+      toast.timer = setTimeout(() => {
+        removeToast(id);
+      }, toast.duration);
+    }
+    return id;
+  };
+  const removeToast = (id) => {
+    const index = toasts.value.findIndex((t) => t.id === id);
+    if (index === -1) return;
+    const toast = toasts.value[index];
+    if (toast.timer) {
+      clearTimeout(toast.timer);
+    }
+    if (toast.onClose) {
+      toast.onClose();
+    }
+    toasts.value.splice(index, 1);
+  };
+  const clearToasts = () => {
+    toasts.value.forEach((toast) => {
+      if (toast.timer) {
+        clearTimeout(toast.timer);
+      }
+      if (toast.onClose) {
+        toast.onClose();
+      }
+    });
+    toasts.value = [];
+  };
+  const success = (message, options = {}) => {
+    return addToast({
+      ...options,
+      message,
+      type: "success"
+    });
+  };
+  const error = (message, options = {}) => {
+    return addToast({
+      ...options,
+      message,
+      type: "error"
+    });
+  };
+  const warning = (message, options = {}) => {
+    return addToast({
+      ...options,
+      message,
+      type: "warning"
+    });
+  };
+  const info = (message, options = {}) => {
+    return addToast({
+      ...options,
+      message,
+      type: "info"
+    });
+  };
+  const groupedToasts = computed(() => {
+    const groups = {};
+    toasts.value.forEach((toast) => {
+      const position = toast.position || defaultPosition;
+      if (!groups[position]) {
+        groups[position] = [];
+      }
+      groups[position].push(toast);
+    });
+    return groups;
+  });
+  onUnmounted(() => {
+    clearToasts();
+  });
+  return {
+    toasts,
+    groupedToasts,
+    addToast,
+    removeToast,
+    clearToasts,
+    success,
+    error,
+    warning,
+    info
+  };
+}
+const VueToast = {
+  install: (app, pluginOptions) => {
+    app.component("VueToast", Toast);
+    app.config.globalProperties.$toast = {
+      success: (message, options) => {
+        const { success } = useToast((options == null ? void 0 : options.position) || (pluginOptions == null ? void 0 : pluginOptions.defaultPosition));
+        return success(message, options);
+      },
+      error: (message, options) => {
+        const { error } = useToast((options == null ? void 0 : options.position) || (pluginOptions == null ? void 0 : pluginOptions.defaultPosition));
+        return error(message, options);
+      },
+      warning: (message, options) => {
+        const { warning } = useToast((options == null ? void 0 : options.position) || (pluginOptions == null ? void 0 : pluginOptions.defaultPosition));
+        return warning(message, options);
+      },
+      info: (message, options) => {
+        const { info } = useToast((options == null ? void 0 : options.position) || (pluginOptions == null ? void 0 : pluginOptions.defaultPosition));
+        return info(message, options);
+      },
+      add: (options) => {
+        const { addToast } = useToast(options.position);
+        return addToast(options);
+      }
+    };
+  }
+};
+export {
+  Toast,
+  VueToast as default,
+  useToast
+};
+//# sourceMappingURL=vue-toast.es.js.map

package/dist/vue-toast.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-toast.es.js","sources":["../src/components/Toast/Toast.vue","../src/composables/useToast.ts","../src/index.ts"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'vue-toast',\n      `vue-toast--${toast.type || 'default'}`,\n      `vue-toast--${positionClass}`,\n      { 'vue-toast--dismissible': toast.dismissible }\n    ]\"\n    :style=\"toastStyle\"\n    @click=\"handleClick\"\n    role=\"alert\"\n    aria-live=\"polite\"\n    :aria-label=\"ariaLabel\"\n  >\n    <div class=\"vue-toast__content\">\n      <span class=\"vue-toast__message\">{{ toast.message }}</span>\n    </div>\n    \n    <button\n      v-if=\"toast.dismissible\"\n      class=\"vue-toast__close\"\n      @click.stop=\"handleClose\"\n      aria-label=\"Close notification\"\n    >\n      <svg\n        class=\"vue-toast__close-icon\"\n        viewBox=\"0 0 24 24\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n      </svg>\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { ToastComponentProps, ToastType } from '@/types'\n\nconst props = defineProps<ToastComponentProps>()\n\nconst emit = defineEmits<{\n  close: [id?: string]\n  click: []\n}>()\n\nconst positionClass = computed(() => {\n  const position = props.toast.position || 'top-right'\n  return position.replace('-', '')\n})\n\nconst toastStyle = computed(() => ({\n  '--toast-index': props.index,\n  '--toast-total': props.total,\n}))\n\nconst ariaLabel = computed(() => {\n  const type = props.toast.type || 'default'\n  const typeLabels: Record<ToastType, string> = {\n    success: 'Success notification',\n    error: 'Error notification',\n    warning: 'Warning notification',\n    info: 'Information notification',\n    default: 'Notification',\n  }\n  return typeLabels[type]\n})\n\nconst handleClose = () => {\n  emit('close', props.toast.id)\n}\n\nconst handleClick = () => {\n  if (props.toast.onClick) {\n    props.toast.onClick()\n  }\n  emit('click')\n}\n</script>\n\n<style scoped>\n.vue-toast {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-width: 300px;\n  max-width: 500px;\n  padding: 12px 16px;\n  margin-bottom: 8px;\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  background-color: white;\n  color: #333;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  font-size: 14px;\n  line-height: 1.4;\n  animation: toast-slide-in 0.3s ease-out;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n  z-index: calc(1000 + var(--toast-index));\n  cursor: pointer;\n}\n\n.vue-toast:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n}\n\n.vue-toast--success {\n  border-left: 4px solid #10b981;\n  background-color: #f0fdf4;\n  color: #065f46;\n}\n\n.vue-toast--error {\n  border-left: 4px solid #ef4444;\n  background-color: #fef2f2;\n  color: #991b1b;\n}\n\n.vue-toast--warning {\n  border-left: 4px solid #f59e0b;\n  background-color: #fffbeb;\n  color: #92400e;\n}\n\n.vue-toast--info {\n  border-left: 4px solid #3b82f6;\n  background-color: #eff6ff;\n  color: #1e40af;\n}\n\n.vue-toast--default {\n  border-left: 4px solid #6b7280;\n  background-color: #f9fafb;\n  color: #374151;\n}\n\n.vue-toast__content {\n  flex: 1;\n  margin-right: 8px;\n}\n\n.vue-toast__message {\n  word-break: break-word;\n}\n\n.vue-toast__close {\n  flex-shrink: 0;\n  background: none;\n  border: none;\n  padding: 4px;\n  margin-left: 8px;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.7;\n  border-radius: 4px;\n  transition: opacity 0.2s ease, background-color 0.2s ease;\n}\n\n.vue-toast__close:hover {\n  opacity: 1;\n  background-color: rgba(0, 0, 0, 0.1);\n}\n\n.vue-toast__close:focus {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n.vue-toast__close-icon {\n  display: block;\n}\n\n/* Position classes */\n.vue-toast--topleft {\n  position: fixed;\n  top: 20px;\n  left: 20px;\n}\n\n.vue-toast--topcenter {\n  position: fixed;\n  top: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.vue-toast--topright {\n  position: fixed;\n  top: 20px;\n  right: 20px;\n}\n\n.vue-toast--bottomleft {\n  position: fixed;\n  bottom: 20px;\n  left: 20px;\n}\n\n.vue-toast--bottomcenter {\n  position: fixed;\n  bottom: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.vue-toast--bottomright {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n}\n\n/* Animation */\n@keyframes toast-slide-in {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n  .vue-toast {\n    min-width: calc(100vw - 40px);\n    max-width: calc(100vw - 40px);\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n  \n  .vue-toast--topleft,\n  .vue-toast--topcenter,\n  .vue-toast--topright {\n    top: 10px;\n  }\n  \n  .vue-toast--bottomleft,\n  .vue-toast--bottomcenter,\n  .vue-toast--bottomright {\n    bottom: 10px;\n  }\n}\n</style>","import { ref, computed, onUnmounted, type Ref } from 'vue'\nimport type { ToastOptions, ToastPosition } from '@/types'\n\ninterface ToastInstance extends ToastOptions {\n  id: string\n  timer?: ReturnType<typeof setTimeout>\n}\n\nexport function useToast(defaultPosition: ToastPosition = 'top-right') {\n  const toasts: Ref<ToastInstance[]> = ref([])\n\n  const generateId = () => `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n\n  const addToast = (options: ToastOptions) => {\n    const id = options.id || generateId()\n    const toast: ToastInstance = {\n      ...options,\n      id,\n      position: options.position || defaultPosition,\n      duration: options.duration ?? 5000,\n      dismissible: options.dismissible ?? true,\n    }\n\n    toasts.value.push(toast)\n\n    if (toast.duration && toast.duration > 0) {\n      toast.timer = setTimeout(() => {\n        removeToast(id)\n      }, toast.duration)\n    }\n\n    return id\n  }\n\n  const removeToast = (id: string) => {\n    const index = toasts.value.findIndex(t => t.id === id)\n    if (index === -1) return\n\n    const toast = toasts.value[index]\n    \n    if (toast.timer) {\n      clearTimeout(toast.timer)\n    }\n\n    if (toast.onClose) {\n      toast.onClose()\n    }\n\n    toasts.value.splice(index, 1)\n  }\n\n  const clearToasts = () => {\n    toasts.value.forEach(toast => {\n      if (toast.timer) {\n        clearTimeout(toast.timer)\n      }\n      if (toast.onClose) {\n        toast.onClose()\n      }\n    })\n    toasts.value = []\n  }\n\n  const success = (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) => {\n    return addToast({\n      ...options,\n      message,\n      type: 'success',\n    })\n  }\n\n  const error = (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) => {\n    return addToast({\n      ...options,\n      message,\n      type: 'error',\n    })\n  }\n\n  const warning = (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) => {\n    return addToast({\n      ...options,\n      message,\n      type: 'warning',\n    })\n  }\n\n  const info = (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) => {\n    return addToast({\n      ...options,\n      message,\n      type: 'info',\n    })\n  }\n\n  const groupedToasts = computed(() => {\n    const groups: Record<string, ToastInstance[]> = {}\n    \n    toasts.value.forEach(toast => {\n      const position = toast.position || defaultPosition\n      if (!groups[position]) {\n        groups[position] = []\n      }\n      groups[position].push(toast)\n    })\n\n    return groups\n  })\n\n  onUnmounted(() => {\n    clearToasts()\n  })\n\n  return {\n    toasts,\n    groupedToasts,\n    addToast,\n    removeToast,\n    clearToasts,\n    success,\n    error,\n    warning,\n    info,\n  }\n}\n\nexport type UseToastReturn = ReturnType<typeof useToast>","import { type App } from 'vue'\nimport Toast from './components/Toast'\nimport { useToast } from './composables/useToast'\nimport type { ToastOptions, ToastPosition, ToastType } from './types'\n\nexport { Toast, useToast }\nexport type { ToastOptions, ToastPosition, ToastType }\n\nconst VueToast = {\n  install: (app: App, pluginOptions?: { defaultPosition?: ToastPosition }) => {\n    app.component('VueToast', Toast)\n    \n    app.config.globalProperties.$toast = {\n      success: (message: string, options?: Omit<ToastOptions, 'message' | 'type'>) => {\n        const { success } = useToast(options?.position || pluginOptions?.defaultPosition)\n        return success(message, options)\n      },\n      error: (message: string, options?: Omit<ToastOptions, 'message' | 'type'>) => {\n        const { error } = useToast(options?.position || pluginOptions?.defaultPosition)\n        return error(message, options)\n      },\n      warning: (message: string, options?: Omit<ToastOptions, 'message' | 'type'>) => {\n        const { warning } = useToast(options?.position || pluginOptions?.defaultPosition)\n        return warning(message, options)\n      },\n      info: (message: string, options?: Omit<ToastOptions, 'message' | 'type'>) => {\n        const { info } = useToast(options?.position || pluginOptions?.defaultPosition)\n        return info(message, options)\n      },\n      add: (options: ToastOptions) => {\n        const { addToast } = useToast(options.position)\n        return addToast(options)\n      },\n    }\n  },\n}\n\nexport default VueToast"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_toDisplayString"],"mappings":"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"}

package/dist/vue-toast.umd.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).VueToast={},e.Vue)}(this,function(e,t){"use strict";const o=["aria-label"],s={class:"vue-toast__content"},i={class:"vue-toast__message"},n=((e,t)=>{const o=e.__vccOpts||e;for(const[s,i]of t)o[s]=i;return o})(t.defineComponent({__name:"Toast",props:{toast:{},index:{},total:{}},emits:["close","click"],setup(e,{emit:n}){const a=e,l=n,r=t.computed(()=>(a.toast.position||"top-right").replace("-","")),u=t.computed(()=>({"--toast-index":a.index,"--toast-total":a.total})),c=t.computed(()=>({success:"Success notification",error:"Error notification",warning:"Warning notification",info:"Information notification",default:"Notification"}[a.toast.type||"default"])),d=()=>{l("close",a.toast.id)},p=()=>{a.toast.onClick&&a.toast.onClick(),l("click")};return(n,a)=>(t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["vue-toast",`vue-toast--${e.toast.type||"default"}`,`vue-toast--${r.value}`,{"vue-toast--dismissible":e.toast.dismissible}]),style:t.normalizeStyle(u.value),onClick:p,role:"alert","aria-live":"polite","aria-label":c.value},[t.createElementVNode("div",s,[t.createElementVNode("span",i,t.toDisplayString(e.toast.message),1)]),e.toast.dismissible?(t.openBlock(),t.createElementBlock("button",{key:0,class:"vue-toast__close",onClick:t.withModifiers(d,["stop"]),"aria-label":"Close notification"},[...a[0]||(a[0]=[t.createElementVNode("svg",{class:"vue-toast__close-icon",viewBox:"0 0 24 24",width:"16",height:"16",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},[t.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),t.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"})],-1)])])):t.createCommentVNode("",!0)],14,o))}}),[["__scopeId","data-v-38db861e"]]);function a(e="top-right"){const o=t.ref([]),s=t=>{const s=t.id||`toast-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,n={...t,id:s,position:t.position||e,duration:t.duration??5e3,dismissible:t.dismissible??!0};return o.value.push(n),n.duration&&n.duration>0&&(n.timer=setTimeout(()=>{i(s)},n.duration)),s},i=e=>{const t=o.value.findIndex(t=>t.id===e);if(-1===t)return;const s=o.value[t];s.timer&&clearTimeout(s.timer),s.onClose&&s.onClose(),o.value.splice(t,1)},n=()=>{o.value.forEach(e=>{e.timer&&clearTimeout(e.timer),e.onClose&&e.onClose()}),o.value=[]},a=t.computed(()=>{const t={};return o.value.forEach(o=>{const s=o.position||e;t[s]||(t[s]=[]),t[s].push(o)}),t});return t.onUnmounted(()=>{n()}),{toasts:o,groupedToasts:a,addToast:s,removeToast:i,clearToasts:n,success:(e,t={})=>s({...t,message:e,type:"success"}),error:(e,t={})=>s({...t,message:e,type:"error"}),warning:(e,t={})=>s({...t,message:e,type:"warning"}),info:(e,t={})=>s({...t,message:e,type:"info"})}}const l={install:(e,t)=>{e.component("VueToast",n),e.config.globalProperties.$toast={success:(e,o)=>{const{success:s}=a((null==o?void 0:o.position)||(null==t?void 0:t.defaultPosition));return s(e,o)},error:(e,o)=>{const{error:s}=a((null==o?void 0:o.position)||(null==t?void 0:t.defaultPosition));return s(e,o)},warning:(e,o)=>{const{warning:s}=a((null==o?void 0:o.position)||(null==t?void 0:t.defaultPosition));return s(e,o)},info:(e,o)=>{const{info:s}=a((null==o?void 0:o.position)||(null==t?void 0:t.defaultPosition));return s(e,o)},add:e=>{const{addToast:t}=a(e.position);return t(e)}}}};e.Toast=n,e.default=l,e.useToast=a,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+//# sourceMappingURL=vue-toast.umd.js.map

package/dist/vue-toast.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue-toast.umd.js","sources":["../src/components/Toast/Toast.vue","../src/composables/useToast.ts","../src/index.ts"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'vue-toast',\n      `vue-toast--${toast.type || 'default'}`,\n      `vue-toast--${positionClass}`,\n      { 'vue-toast--dismissible': toast.dismissible }\n    ]\"\n    :style=\"toastStyle\"\n    @click=\"handleClick\"\n    role=\"alert\"\n    aria-live=\"polite\"\n    :aria-label=\"ariaLabel\"\n  >\n    <div class=\"vue-toast__content\">\n      <span class=\"vue-toast__message\">{{ toast.message }}</span>\n    </div>\n    \n    <button\n      v-if=\"toast.dismissible\"\n      class=\"vue-toast__close\"\n      @click.stop=\"handleClose\"\n      aria-label=\"Close notification\"\n    >\n      <svg\n        class=\"vue-toast__close-icon\"\n        viewBox=\"0 0 24 24\"\n        width=\"16\"\n        height=\"16\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n        <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n      </svg>\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { ToastComponentProps, ToastType } from '@/types'\n\nconst props = defineProps<ToastComponentProps>()\n\nconst emit = defineEmits<{\n  close: [id?: string]\n  click: []\n}>()\n\nconst positionClass = computed(() => {\n  const position = props.toast.position || 'top-right'\n  return position.replace('-', '')\n})\n\nconst toastStyle = computed(() => ({\n  '--toast-index': props.index,\n  '--toast-total': props.total,\n}))\n\nconst ariaLabel = computed(() => {\n  const type = props.toast.type || 'default'\n  const typeLabels: Record<ToastType, string> = {\n    success: 'Success notification',\n    error: 'Error notification',\n    warning: 'Warning notification',\n    info: 'Information notification',\n    default: 'Notification',\n  }\n  return typeLabels[type]\n})\n\nconst handleClose = () => {\n  emit('close', props.toast.id)\n}\n\nconst handleClick = () => {\n  if (props.toast.onClick) {\n    props.toast.onClick()\n  }\n  emit('click')\n}\n</script>\n\n<style scoped>\n.vue-toast {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  min-width: 300px;\n  max-width: 500px;\n  padding: 12px 16px;\n  margin-bottom: 8px;\n  border-radius: 6px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  background-color: white;\n  color: #333;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  font-size: 14px;\n  line-height: 1.4;\n  animation: toast-slide-in 0.3s ease-out;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n  z-index: calc(1000 + var(--toast-index));\n  cursor: pointer;\n}\n\n.vue-toast:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n}\n\n.vue-toast--success {\n  border-left: 4px solid #10b981;\n  background-color: #f0fdf4;\n  color: #065f46;\n}\n\n.vue-toast--error {\n  border-left: 4px solid #ef4444;\n  background-color: #fef2f2;\n  color: #991b1b;\n}\n\n.vue-toast--warning {\n  border-left: 4px solid #f59e0b;\n  background-color: #fffbeb;\n  color: #92400e;\n}\n\n.vue-toast--info {\n  border-left: 4px solid #3b82f6;\n  background-color: #eff6ff;\n  color: #1e40af;\n}\n\n.vue-toast--default {\n  border-left: 4px solid #6b7280;\n  background-color: #f9fafb;\n  color: #374151;\n}\n\n.vue-toast__content {\n  flex: 1;\n  margin-right: 8px;\n}\n\n.vue-toast__message {\n  word-break: break-word;\n}\n\n.vue-toast__close {\n  flex-shrink: 0;\n  background: none;\n  border: none;\n  padding: 4px;\n  margin-left: 8px;\n  cursor: pointer;\n  color: inherit;\n  opacity: 0.7;\n  border-radius: 4px;\n  transition: opacity 0.2s ease, background-color 0.2s ease;\n}\n\n.vue-toast__close:hover {\n  opacity: 1;\n  background-color: rgba(0, 0, 0, 0.1);\n}\n\n.vue-toast__close:focus {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n}\n\n.vue-toast__close-icon {\n  display: block;\n}\n\n/* Position classes */\n.vue-toast--topleft {\n  position: fixed;\n  top: 20px;\n  left: 20px;\n}\n\n.vue-toast--topcenter {\n  position: fixed;\n  top: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.vue-toast--topright {\n  position: fixed;\n  top: 20px;\n  right: 20px;\n}\n\n.vue-toast--bottomleft {\n  position: fixed;\n  bottom: 20px;\n  left: 20px;\n}\n\n.vue-toast--bottomcenter {\n  position: fixed;\n  bottom: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.vue-toast--bottomright {\n  position: fixed;\n  bottom: 20px;\n  right: 20px;\n}\n\n/* Animation */\n@keyframes toast-slide-in {\n  from {\n    opacity: 0;\n    transform: translateY(-20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n  .vue-toast {\n    min-width: calc(100vw - 40px);\n    max-width: calc(100vw - 40px);\n    margin-left: 20px;\n    margin-right: 20px;\n  }\n  \n  .vue-toast--topleft,\n  .vue-toast--topcenter,\n  .vue-toast--topright {\n    top: 10px;\n  }\n  \n  .vue-toast--bottomleft,\n  .vue-toast--bottomcenter,\n  .vue-toast--bottomright {\n    bottom: 10px;\n  }\n}\n</style>","import { ref, computed, onUnmounted, type Ref } from 'vue'\nimport type { ToastOptions, ToastPosition } from '@/types'\n\ninterface ToastInstance extends ToastOptions {\n  id: string\n  timer?: ReturnType<typeof setTimeout>\n}\n\nexport function useToast(defaultPosition: ToastPosition = 'top-right') {\n  const toasts: Ref<ToastInstance[]> = ref([])\n\n  const generateId = () => `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n\n  const addToast = (options: ToastOptions) => {\n    const id = options.id || generateId()\n    const toast: ToastInstance = {\n      ...options,\n      id,\n      position: options.position || defaultPosition,\n      duration: options.duration ?? 5000,\n      dismissible: options.dismissible ?? true,\n    }\n\n    toasts.value.push(toast)\n\n    if (toast.duration && toast.duration > 0) {\n      toast.timer = setTimeout(() => {\n        removeToast(id)\n      }, toast.duration)\n    }\n\n    return id\n  }\n\n  const removeToast = (id: string) => {\n    const index = toasts.value.findIndex(t => t.id === id)\n    if (index === -1) return\n\n    const toast = toasts.value[index]\n    \n    if (toast.timer) {\n      clearTimeout(toast.timer)\n    }\n\n    if (toast.onClose) {\n      toast.onClose()\n    }\n\n    toasts.value.splice(index, 1)\n  }\n\n  const clearToasts = () => {\n    toasts.value.forEach(toast => {\n      if (toast.timer) {\n        clearTimeout(toast.timer)\n      }\n      if (toast.onClose) {\n        toast.onClose()\n      }\n    })\n    toasts.value = []\n  }\n\n  const success = (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) => {\n    return addToast({\n      ...options,\n      message,\n      type: 'success',\n    })\n  }\n\n  const error = (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) => {\n    return addToast({\n      ...options,\n      message,\n      type: 'error',\n    })\n  }\n\n  const warning = (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) => {\n    return addToast({\n      ...options,\n      message,\n      type: 'warning',\n    })\n  }\n\n  const info = (message: string, options: Omit<ToastOptions, 'message' | 'type'> = {}) => {\n    return addToast({\n      ...options,\n      message,\n      type: 'info',\n    })\n  }\n\n  const groupedToasts = computed(() => {\n    const groups: Record<string, ToastInstance[]> = {}\n    \n    toasts.value.forEach(toast => {\n      const position = toast.position || defaultPosition\n      if (!groups[position]) {\n        groups[position] = []\n      }\n      groups[position].push(toast)\n    })\n\n    return groups\n  })\n\n  onUnmounted(() => {\n    clearToasts()\n  })\n\n  return {\n    toasts,\n    groupedToasts,\n    addToast,\n    removeToast,\n    clearToasts,\n    success,\n    error,\n    warning,\n    info,\n  }\n}\n\nexport type UseToastReturn = ReturnType<typeof useToast>","import { type App } from 'vue'\nimport Toast from './components/Toast'\nimport { useToast } from './composables/useToast'\nimport type { ToastOptions, ToastPosition, ToastType } from './types'\n\nexport { Toast, useToast }\nexport type { ToastOptions, ToastPosition, ToastType }\n\nconst VueToast = {\n  install: (app: App, pluginOptions?: { defaultPosition?: ToastPosition }) => {\n    app.component('VueToast', Toast)\n    \n    app.config.globalProperties.$toast = {\n      success: (message: string, options?: Omit<ToastOptions, 'message' | 'type'>) => {\n        const { success } = useToast(options?.position || pluginOptions?.defaultPosition)\n        return success(message, options)\n      },\n      error: (message: string, options?: Omit<ToastOptions, 'message' | 'type'>) => {\n        const { error } = useToast(options?.position || pluginOptions?.defaultPosition)\n        return error(message, options)\n      },\n      warning: (message: string, options?: Omit<ToastOptions, 'message' | 'type'>) => {\n        const { warning } = useToast(options?.position || pluginOptions?.defaultPosition)\n        return warning(message, options)\n      },\n      info: (message: string, options?: Omit<ToastOptions, 'message' | 'type'>) => {\n        const { info } = useToast(options?.position || pluginOptions?.defaultPosition)\n        return info(message, options)\n      },\n      add: (options: ToastOptions) => {\n        const { addToast } = useToast(options.position)\n        return addToast(options)\n      },\n    }\n  },\n}\n\nexport default VueToast"],"names":["props","__props","emit","__emit","positionClass","computed","toast","position","replace","toastStyle","index","total","ariaLabel","success","error","warning","info","default","type","handleClose","id","handleClick","onClick","_createElementBlock","class","_normalizeClass","value","dismissible","style","role","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","message","viewBox","width","height","fill","stroke","x1","y1","x2","y2","useToast","defaultPosition","toasts","ref","addToast","options","Date","now","Math","random","toString","substr","duration","push","timer","setTimeout","removeToast","findIndex","t","clearTimeout","onClose","splice","clearToasts","forEach","groupedToasts","groups","onUnmounted","VueToast","install","app","pluginOptions","component","Toast","config","globalProperties","$toast","add"],"mappings":"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"}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@rosadorito/vue-toast",
+  "version": "0.0.1",
+  "description": "A lightweight, customizable toast notification library for Vue 3",
+  "type": "module",
+  "main": "./dist/vue-toast.umd.js",
+  "module": "./dist/vue-toast.es.js",
+  "types": "./dist/index.d.ts",
+  "private": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vue-toast.es.js",
+      "require": "./dist/vue-toast.umd.js"
+    },
+    "./style.css": "./dist/style.css",
+    "./dist/*": "./dist/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite --config examples/vite.config.js",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview --config examples/vite.config.js",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "type-check": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run build",
+    "build:examples": "vite build --config examples/vite.config.js"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "toast",
+    "notification",
+    "component-library",
+    "ui",
+    "alert"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yourusername/vue-toast.git"
+  },
+  "bugs": {
+    "url": "https://github.com/yourusername/vue-toast/issues"
+  },
+  "homepage": "https://github.com/yourusername/vue-toast#readme",
+  "packageManager": "pnpm@10.30.1",
+  "dependencies": {
+    "vue": "^3.5.32"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.6",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-typescript": "^14.2.0",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.6.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "jsdom": "^26.0.0",
+    "terser": "^5.46.1",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.8",
+    "vue-tsc": "^2.1.10"
+  },
+  "sideEffects": false
+}