vue-sonner - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

lib/index.d.ts

@@ -0,3 +1,6 @@
+import type { Plugin } from 'vue';
 import Toaster from './Toaster.vue';
 import { toast } from './state';
 export { Toaster, toast };
+declare const plugin: Plugin;
+export default plugin;

lib/vue-sonner.js

@@ -53,3 +53,3 @@ var me = Object.defineProperty;
   }), s;
-}, Te = xe, nt = Object.assign(Te, {
+}, Te = xe, at = Object.assign(Te, {
   success: N.success,
@@ -216,3 +216,3 @@ error: N.error,
       () => e.toast.duration || e.duration || s
-    ), W = c(0), M = c(0), Y = c(G), te = c(0), V = c(null), J = p(() => e.position.split("-")), re = p(() => e.heights.reduce((o, a, u) => u >= C.value ? o : o + a.height, 0)), le = p(() => e.toast.invert || e.invert), Q = p(() => v.value === "loading"), se = p(
+    ), W = c(0), M = c(0), Y = c(G.value), te = c(0), V = c(null), J = p(() => e.position.split("-")), re = p(() => e.heights.reduce((o, a, u) => u >= C.value ? o : o + a.height, 0)), le = p(() => e.toast.invert || e.invert), Q = p(() => v.value === "loading"), se = p(
       () => {
@@ -537,6 +537,11 @@ var o;
   }
-}), at = /* @__PURE__ */ A(tt, [["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/Toaster.vue"]]);
+}), st = /* @__PURE__ */ A(tt, [["__file", "/Users/xiaoyunwei/Documents/GitHub/private/vue-sonner/packages/Toaster.vue"]]), rt = {
+  install(t) {
+    t.component("Toaster", st);
+  }
+};
 export {
-  at as Toaster,
-  nt as toast
+  st as Toaster,
+  rt as default,
+  at as toast
 };

package.json

 {
   "name": "vue-sonner",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
@@ -39,2 +39,3 @@ "author": "xiaoluoboding <[e-mail]>",
     "@vueuse/core": "^9.1.1",
+    "@vueuse/head": "^1.1.23",
     "highlight.js": "^11.6.0",
@@ -41,0 +42,0 @@ "typescript": "^4.6.4",

README.md

@@ -6,9 +6,13 @@ # Sonner for Vue
 
-> An opinionated toast component for Vue.
+> An opinionated toast component for Vue. It's a Vue port of Sonner
 
+## Preview
+
+https://user-images.githubusercontent.com/6118824/228208185-be5aefd4-7fa8-4f95-a41c-88a60c0e2800.mp4
+
 ## Introduction
 
-`Vue Sonner` is an opinionated toast component for React. It's customizable, but styled by default. Comes with a swipe to dismiss animation.
+`Vue Sonner` is an opinionated toast component for Vue. It's customizable, but styled by default. Comes with a swipe to dismiss animation.
 
-## Usage
+## Installation
 
@@ -23,2 +27,252 @@ To start using the library, install it in your project:
 
+## Usage
+
+```html
+<!-- App.vue -->
+<template>
+  <Toaster />
+  <button
+    @click="
+      () => {
+        toast('My first toast')
+      }
+    "
+  >
+    Render a toast
+  </button>
+</template>
+
+<script lang="ts" setup>
+  import { Toaster, toast } from 'vue-sonner'
+</script>
+```
+
+## Types
+
+### Default
+
+Most basic toast. You can customize it (and any other type) by passing an options object as the second argument.
+
+```ts
+toast('Event has been created')
+```
+
+With custom description:
+
+```ts
+toast('Event has been created', {
+  description: 'Monday, January 3rd at 6:00pm'
+})
+```
+
+### Success
+
+Renders a checkmark icon in front of the message.
+
+```ts
+toast.success('Event has been created')
+```
+
+### Error
+
+Renders an error icon in front of the message.
+
+```ts
+toast.error('Event has not been created')
+```
+
+### Action
+
+Renders a button.
+
+```ts
+toast('Event has been created', {
+  action: {
+    label: 'Undo',
+    onClick: () => console.log('Undo')
+  }
+})
+```
+
+### Promise
+
+Starts in a loading state and will update automatically after the promise resolves or fails.
+
+You can pass a function to the success/error messages to incorporate the result/error of the promise.
+
+```ts
+toast.promise(() => new Promise((resolve) => setTimeout(resolve, 2000)), {
+  loading: 'Loading',
+  success: (data: any) => 'Success',
+  error: (data: any) => 'Error'
+})
+```
+
+### Custom Component
+
+You 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.
+
+```html
+<script lang="ts" setup>
+  import { defineComponent, h, shallowRef } from 'vue'
+
+  const CustomDiv = defineComponent({
+    setup() {
+      return () =>
+        h('div', {
+          innerHTML: 'A custom toast with unstyling'
+        })
+    }
+  })
+
+  toast(shallowRef(CustomDiv))
+</script>
+```
+
+## Customization
+
+### Headless
+
+You can use `toast.custom` to render an unstyled toast with custom jsx while maintaining the functionality.
+
+```vue
+<script lang="ts" setup>
+import HeadlessToast from './HeadlessToast.vue'
+
+toast.custom(shallowRef(HeadlessToast), { duration: 999999 })
+</script>
+```
+
+### Theme
+
+You can change the theme using the `theme` prop. Default theme is light.
+
+```html
+<Toaster theme="dark" />
+```
+
+### Position
+
+You can change the position through the `position` prop on the `<Toaster />` component. Default is `top-right`.
+
+```html
+<!-- Available positions -->
+<!-- top-left, top-center, top-right, bottom-left, bottom-center, bottom-right -->
+
+<Toaster position="top-center" />
+```
+
+### Expanded
+
+Toasts can also be expanded by default through the `expand` prop. You can also change the amount of visible toasts which is 3 by default.
+
+```html
+<Toaster expand :visibleToasts="9" />
+```
+
+### Styling for all toasts
+
+You can style your toasts globally with the `toastOptions` prop in the `Toaster` component.
+
+```html
+<Toaster
+  toastOptions="{
+    style: { background: 'red' },
+    className: 'my-toast',
+    descriptionClassName: 'my-toast-description'
+  }"
+/>
+```
+
+### Styling for individual toast
+
+```ts
+toast('Event has been created', {
+  style: {
+    background: 'red'
+  },
+  className: 'my-toast',
+  descriptionClassName: 'my-toast-description'
+})
+```
+
+### Close button
+
+Add a close button to all toasts that shows on hover by adding the `closeButton` prop.
+
+```html
+<Toaster closeButton />
+```
+
+### Rich colors
+
+You can make error and success state more colorful by adding the `richColors` prop.
+
+```html
+<Toaster richColors />
+```
+
+### Custom offset
+
+Offset from the edges of the screen.
+
+```html
+<Toaster offset="80px" />
+```
+
+### Programmatically remove toast
+
+To remove a toast programmatically use `toast.dismiss(id)`.
+
+```ts
+const toastId = toast('Event has been created')
+
+toast.dismiss(toastId)
+```
+
+You can also use the dismiss method without the id to dismiss all toasts.
+
+```ts
+toast.dismiss()
+```
+
+### Programmatically remove toast
+
+You can change the duration of each toast by using the duration property, or change the duration of all toasts like this:
+
+```html
+<Toaster :duration="10000" />
+```
+
+```ts
+toast('Event has been created', {
+  duration: 10000
+})
+
+// Persisent toast
+toast('Event has been created', {
+  duration: Infinity
+})
+```
+
+### On Close Callback
+
+You 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).
+
+```ts
+toast('Event has been created', {
+  onDismiss: (t) => console.log(`Toast with id ${t.id} has been dismissed`),
+  onAutoClose: (t) =>
+    console.log(`Toast with id ${t.id} has been closed automatically`)
+})
+```
+
+### Keyboard focus
+
+You 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.
+
+```html
+<Toaster hotkey="['KeyC']" />
+```
+
 ## Inspiration
@@ -25,0 +279,0 @@

No alert changes

Improved metrics

Total package byte prevSize

231109

increased by264.62%

Number of package files

17

increased by13.33%

Lines of code

806

increased by1%

Number of lines in readme file

283

increased by875.86%

Worsened metrics

Dev dependency count

16

increased by6.67%

No dependency changes