{"_id":"@davidramosweb/vue-sonner","name":"@davidramosweb/vue-sonner","dist-tags":{"latest":"1.1.4"},"versions":{"1.1.4":{"name":"@davidramosweb/vue-sonner","version":"1.1.4","type":"module","author":{"name":"davidramosweb","email":"info@davidramosweb.com"},"repository":{"type":"git","url":"git+https://github.com/davidramosweb/vue-sonner.git"},"homepage":"https://github.com/davidramosweb/vue-sonner","main":"./lib/vue-sonner.cjs","module":"./lib/vue-sonner.js","exports":{".":{"types":"./lib/vue-sonner.d.ts","import":"./lib/vue-sonner.js","require":"./lib/vue-sonner.cjs"}},"sideEffects":["**/*.css"],"types":"./lib/vue-sonner.d.ts","license":"MIT","devDependencies":{"@iconify/json":"^2.2.172","@microsoft/api-extractor":"^7.42.1","@types/node":"^18.19.8","@unocss/reset":"^0.58.5","@vitejs/plugin-vue":"^5.0.4","@vue/tsconfig":"^0.5.1","@vueuse/core":"^10.9.0","@vueuse/head":"^2.0.0","clean-css":"^5.3.3","highlight.js":"^11.9.0","typescript":"^5.3.3","unocss":"^0.58.5","unplugin-icons":"^0.18.5","unplugin-vue-components":"^0.26.0","vite":"^5.1.4","vue":"^3.4.21","vue-tsc":"^2.0.1"},"scripts":{"dev":"vite","build:docs":"vite build --mode docs","build:lib":"vite build --mode lib && pnpm run build:types","build:types":"vue-tsc -p tsconfig.build.json && api-extractor run","preview":"vite preview","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0"},"description":"[![NPM][npmBadge]][npmUrl] [![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl] [![NPM Download][npmDtBadge]][npmDtUrl]","bugs":{"url":"https://github.com/davidramosweb/vue-sonner/issues"},"_id":"@davidramosweb/vue-sonner@1.1.4","_integrity":"sha512-NpFHDZgXAth4UhNp3Iagk3O+Da6MVcR0g7WPg2GzIC57fd8eO8hLckjTMdoJcbpV8iPzOMCBJgZ/mnOUzHTF0A==","_resolved":"/private/var/folders/24/r96l8m850896tty4hc3c66km0000gn/T/96945b06700bb628dd9d8635dc1d83e2/davidramosweb-vue-sonner-1.1.4.tgz","_from":"file:davidramosweb-vue-sonner-1.1.4.tgz","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-NpFHDZgXAth4UhNp3Iagk3O+Da6MVcR0g7WPg2GzIC57fd8eO8hLckjTMdoJcbpV8iPzOMCBJgZ/mnOUzHTF0A==","shasum":"6406f457f5dd70745d2265cf36b896aac04f3a7f","tarball":"https://registry.npmjs.org/@davidramosweb/vue-sonner/-/vue-sonner-1.1.4.tgz","fileCount":13,"unpackedSize":9131153,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCU//Hyy1o/MdkVc3IeeVc8MJK6DuVHgaHnZ8AZAVKY7AIhAIxhDxTY7+XOuk06FEgO+6DEkv5W9MfnPfzFeB94v+rj"}]},"_npmUser":{"name":"davidramosweb","email":"info@davidramosweb.com"},"directories":{},"maintainers":[{"name":"davidramosweb","email":"info@davidramosweb.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-sonner_1.1.4_1721668896591_0.059876226440789715"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-22T17:21:36.498Z","1.1.4":"2024-07-22T17:21:36.948Z","modified":"2024-07-22T17:21:37.207Z"},"maintainers":[{"name":"davidramosweb","email":"info@davidramosweb.com"}],"description":"[![NPM][npmBadge]][npmUrl] [![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl] [![NPM Download][npmDtBadge]][npmDtUrl]","homepage":"https://github.com/davidramosweb/vue-sonner","repository":{"type":"git","url":"git+https://github.com/davidramosweb/vue-sonner.git"},"author":{"name":"davidramosweb","email":"info@davidramosweb.com"},"bugs":{"url":"https://github.com/davidramosweb/vue-sonner/issues"},"license":"MIT","readme":"# Sonner for Vue\n\n[![NPM][npmBadge]][npmUrl]\n[![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl]\n[![NPM Download][npmDtBadge]][npmDtUrl]\n\n[npmBadge]: https://img.shields.io/npm/v/vue-sonner.svg?maxAge=2592000\n[npmUrl]: https://www.npmjs.com/package/vue-sonner\n[npmDtBadge]: https://img.shields.io/npm/dt/vue-sonner.svg\n[npmDtUrl]: https://www.npmjs.com/package/vue-sonner\n[bundlePhobiaBadge]: https://img.shields.io/bundlephobia/minzip/vue-sonner\n[bundlePhobiaUrl]: https://bundlephobia.com/package/vue-sonner@latest\n\n> An opinionated toast component for Vue. It's a Vue port of Sonner\n\n## Preview\n\nhttps://user-images.githubusercontent.com/6118824/228208185-be5aefd4-7fa8-4f95-a41c-88a60c0e2800.mp4\n\n## Introduction\n\n`Vue Sonner` is an opinionated toast component for Vue. It's customizable, but styled by default. Comes with a swipe to dismiss animation.\n\n## Table of Contents\n\n<details>\n\n<summary>TOC</summary>\n\n- [Sonner for Vue](#sonner-for-vue)\n  - [Preview](#preview)\n  - [Introduction](#introduction)\n  - [Table of Contents](#table-of-contents)\n  - [Installation](#installation)\n  - [Usage](#usage)\n    - [For Vue 3](#for-vue-3)\n    - [For Nuxt 3](#for-nuxt-3)\n    - [CDN Link](#cdn-link)\n  - [Types](#types)\n    - [Default](#default)\n    - [Success](#success)\n    - [Error](#error)\n    - [Action](#action)\n    - [Promise](#promise)\n    - [Custom Component](#custom-component)\n  - [Customization](#customization)\n    - [Headless](#headless)\n    - [Theme](#theme)\n    - [Position](#position)\n    - [Expanded](#expanded)\n    - [Styling for all toasts](#styling-for-all-toasts)\n    - [Styling for individual toast](#styling-for-individual-toast)\n    - [Tailwind CSS](#tailwind-css)\n    - [Changing Icon](#changing-icon)\n    - [Close button](#close-button)\n    - [Rich colors](#rich-colors)\n    - [Custom offset](#custom-offset)\n    - [Programmatically remove toast](#programmatically-remove-toast)\n    - [Programmatically remove toast](#programmatically-remove-toast-1)\n    - [On Close Callback](#on-close-callback)\n    - [Keyboard focus](#keyboard-focus)\n  - [Inspiration](#inspiration)\n  - [License](#license)\n\n</details>\n\n## Installation\n\nTo start using the library, install it in your project:\n\n```bash\npnpm install vue-sonner\nor\nyarn add vue-sonner\n```\n\n## Usage\n\n### For Vue 3\n\n```html\n<!-- App.vue -->\n<template>\n  <Toaster />\n  <button @click=\"() => toast('My first toast')\">Render a toast</button>\n</template>\n\n<script lang=\"ts\" setup>\n  import { Toaster, toast } from 'vue-sonner'\n</script>\n```\n\n### For Nuxt 3\n\nDefine a nuxt plugin\n\n```ts\n// plugins/sonner.client.ts\nimport { Toaster, toast } from 'vue-sonner'\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  nuxtApp.vueApp.component('Toaster', Toaster)\n\n  return {\n    provide: {\n      toast\n    }\n  }\n})\n```\n\nUse `Toaster` component and `$toast` function anywhere in the Vue SFC\n\n```html\n<!-- app.vue -->\n<template>\n  <div>\n    <NuxtPage />\n    <Toaster position=\"top-right\" />\n    <button @click=\"() => $toast('My first toast')\">Render a toast</button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  // alternatively, you can also use it here\n  const { $toast } = useNuxtApp()\n</script>\n```\n\nAdd the build transpile for `vue-sonner`\n\n```ts\n// nuxt.config.ts\nimport { defineNuxtConfig } from 'nuxt/config'\n\nexport default defineNuxtConfig({\n  ...\n  build: {\n    transpile: ['vue-sonner']\n  }\n})\n```\n\n### CDN Link\n\n**EMS version**\n\n```ts\nhttps://cdn.jsdelivr.net/npm/vue-sonner/+esm\n```\n\n**UMD version**\n\n```ts\nhttps://www.unpkg.com/vue-sonner@0.3.1/lib/vue-sonner.umd.cjs\n```\n\n## Types\n\n### Default\n\nMost basic toast. You can customize it (and any other type) by passing an options object as the second argument.\n\n```ts\ntoast('Event has been created')\n```\n\nWith custom description:\n\n```ts\ntoast('Event has been created', {\n  description: 'Monday, January 3rd at 6:00pm'\n})\n```\n\n### Success\n\nRenders a checkmark icon in front of the message.\n\n```ts\ntoast.success('Event has been created')\n```\n\n### Error\n\nRenders an error icon in front of the message.\n\n```ts\ntoast.error('Event has not been created')\n```\n\n### Action\n\nRenders a button.\n\n```ts\ntoast('Event has been created', {\n  action: {\n    label: 'Undo',\n    onClick: () => console.log('Undo')\n  }\n})\n```\n\n### Promise\n\nStarts in a loading state and will update automatically after the promise resolves or fails.\n\nYou can pass a function to the success/error messages to incorporate the result/error of the promise.\n\n```ts\ntoast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {\n  loading: 'Loading',\n  success: (data: any) => 'Success',\n  error: (data: any) => 'Error'\n})\n```\n\n### Custom Component\n\nYou can pass a Vue Component as the first argument instead of a string to render custom Component while maintaining default styling. You can use the headless version below for a custom, unstyled toast.\n\n```html\n<script lang=\"ts\" setup>\n  import { defineComponent, h, markRaw } from 'vue'\n\n  const CustomDiv = defineComponent({\n    setup() {\n      return () =>\n        h('div', {\n          innerHTML: 'A custom toast with unstyling'\n        })\n    }\n  })\n\n  toast(markRaw(CustomDiv))\n</script>\n```\n\n## Customization\n\n### Headless\n\nYou can use `toast.custom` to render an unstyled toast with custom jsx while maintaining the functionality.\n\n```vue\n<script lang=\"ts\" setup>\nimport { markRaw } from 'vue'\n\nimport HeadlessToast from './HeadlessToast.vue'\n\ntoast.custom(markRaw(HeadlessToast), { duration: 999999 })\n</script>\n```\n\n### Theme\n\nYou can change the theme using the `theme` prop. Default theme is light.\n\n```html\n<Toaster theme=\"dark\" />\n```\n\n### Position\n\nYou can change the position through the `position` prop on the `<Toaster />` component. Default is `top-right`.\n\n```html\n<!-- Available positions -->\n<!-- top-left, top-center, top-right, bottom-left, bottom-center, bottom-right -->\n\n<Toaster position=\"top-center\" />\n```\n\n### Expanded\n\nToasts can also be expanded by default through the `expand` prop. You can also change the amount of visible toasts which is 3 by default.\n\n```html\n<Toaster expand :visibleToasts=\"9\" />\n```\n\n### Styling for all toasts\n\nYou can style your toasts globally with the `toastOptions` prop in the `Toaster` component.\n\n```html\n<Toaster\n  :toastOptions=\"{\n    style: { background: 'red' },\n    class: 'my-toast',\n    descriptionClass: 'my-toast-description'\n  }\"\n/>\n```\n\n### Styling for individual toast\n\n```ts\ntoast('Event has been created', {\n  style: {\n    background: 'red'\n  },\n  class: 'my-toast',\n  descriptionClass: 'my-toast-description'\n})\n```\n\n### Tailwind CSS\n\nThe preferred way to style the toasts with tailwind is by using the `unstyled` prop. That will give you an unstyled toast which you can then style with tailwind.\n\n```vue\n<Toaster\n  :toastOptions=\"{\n    unstyled: true,\n    classes: {\n      toast: 'bg-blue-400',\n      title: 'text-red-400',\n      description: 'text-red-400',\n      actionButton: 'bg-zinc-400',\n      cancelButton: 'bg-orange-400',\n      closeButton: 'bg-lime-400'\n    }\n  }\"\n/>\n```\n\nYou can do the same when calling `toast()`.\n\n```ts\ntoast('Hello World', {\n  unstyled: true,\n  classes: {\n    toast: 'bg-blue-400',\n    title: 'text-red-400 text-2xl',\n    description: 'text-red-400',\n    actionButton: 'bg-zinc-400',\n    cancelButton: 'bg-orange-400',\n    closeButton: 'bg-lime-400'\n  }\n})\n```\n\nStyling per toast type is also possible.\n\n```vue\n<Toaster \n  :toastOptions=\"{\n    unstyled: true,\n    classes: {\n      error: 'bg-red-400',\n      success: 'text-green-400',\n      warning: 'text-yellow-400',\n      info: 'bg-blue-400',\n    }\n  }\"\n/>\n```\n\n### Changing Icon\n\nYou can change the default icons using slots:\n\n```vue\n<Toaster>\n  <template #loading-icon>\n    <LoadingIcon />\n  </template>\n  <template #success-icon>\n    <SuccessIcon />\n  </template>\n  <template #error-icon>\n    <ErrorIcon />\n  </template>\n  <template #info-icon>\n    <InfoIcon />\n  </template>\n  <template #warning-icon>\n    <WarningIcon />\n  </template>\n</Toaster>\n```\n\n### Close button\n\nAdd a close button to all toasts that shows on hover by adding the `closeButton` prop.\n\n```html\n<Toaster closeButton />\n```\n\n### Rich colors\n\nYou can make error and success state more colorful by adding the `richColors` prop.\n\n```html\n<Toaster richColors />\n```\n\n### Custom offset\n\nOffset from the edges of the screen.\n\n```html\n<Toaster offset=\"80px\" />\n```\n\n### Programmatically remove toast\n\nTo remove a toast programmatically use `toast.dismiss(id)`.\n\n```ts\nconst toastId = toast('Event has been created')\n\ntoast.dismiss(toastId)\n```\n\nYou can also use the dismiss method without the id to dismiss all toasts.\n\n```ts\ntoast.dismiss()\n```\n\n### Programmatically remove toast\n\nYou can change the duration of each toast by using the duration property, or change the duration of all toasts like this:\n\n```html\n<Toaster :duration=\"10000\" />\n```\n\n```ts\ntoast('Event has been created', {\n  duration: 10000\n})\n\n// Persisent toast\ntoast('Event has been created', {\n  duration: Infinity\n})\n```\n\n### On Close Callback\n\nYou can pass `onDismiss` and `onAutoClose` callbacks. `onDismiss` gets fired when either the close button gets clicked or the toast is swiped. `onAutoClose` fires when the toast disappears automatically after it's timeout (`duration` prop).\n\n```ts\ntoast('Event has been created', {\n  onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),\n  onAutoClose: (t) =>\n    console.log(`Toast with id ${t.id} has been closed automatically`)\n})\n```\n\n### Keyboard focus\n\nYou can focus on the toast area by pressing ⌥/alt + T. You can override it by providing an array of event.code values for each key.\n\n```html\n<Toaster hotkey=\"['KeyC']\" />\n```\n\n## Inspiration\n\n- [sonner](https://github.com/emilkowalski/sonner) - An opinionated toast component for React.\n\n## License\n\nMIT [@xiaoluoboding](https://github.com/xiaoluoboding)\n","readmeFilename":"README.md"}