├── .github
    ├── FUNDING.yml
    ├── ISSUE_TEMPLATE
    │   ├── config.yml
    │   ├── feature_request.yml
    │   └── bug_report.yml
    └── workflows
    │   └── release.yml
├── eslint.config.js
├── pnpm-workspace.yaml
├── .gitignore
├── tsconfig.node.json
├── src
    ├── vite-env.d.ts
    ├── Demo.vue
    ├── main.ts
    ├── Hero.vue
    ├── Expand.vue
    ├── Position.vue
    ├── App.vue
    ├── Types.vue
    ├── WithProgressBars.vue
    └── WithAvatars.vue
├── .changeset
    ├── config.json
    └── README.md
├── index.html
├── CHANGELOG.md
├── tsconfig.build.json
├── tsconfig.json
├── lib
    ├── VSonner.vue
    ├── types.ts
    ├── ProgressBar.vue
    ├── index.ts
    └── Toast.vue
├── api-extractor.json
├── LICENSE
├── vite.config.ts
├── public
    └── vite.svg
├── package.json
└── README.md


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: wobsoriano
2 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
1 | blank_issues_enabled: false
2 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
1 | import antfu from '@antfu/eslint-config'
2 | 
3 | export default antfu()
4 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | onlyBuiltDependencies:
2 |   - '@parcel/watcher'
3 |   - esbuild
4 |   - unrs-resolver
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .cache
 2 | .DS_Store
 3 | .idea
 4 | *.log
 5 | *.tgz
 6 | coverage
 7 | dist
 8 | lib-cov
 9 | logs
10 | node_modules
11 | temp
12 | .env
13 | .vscode
14 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "module": "ESNext",
 5 |     "moduleResolution": "Node",
 6 |     "allowSyntheticDefaultImports": true
 7 |   },
 8 |   "include": ["vite.config.ts"]
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 
3 | declare module '*.vue' {
4 |   import type { DefineComponent } from 'vue'
5 | 
6 |   const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
7 |   export default component
8 | }
9 | 


--------------------------------------------------------------------------------
/src/Demo.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { toast } from '@/index'
 3 | 
 4 | function showSonner() {
 5 |   toast('Hey, it\'s a snackbar')
 6 | }
 7 | </script>
 8 | 
 9 | <template>
10 |   <div>hello world</div>
11 |   <button @click="showSonner">
12 |     Click me
13 |   </button>
14 | </template>
15 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import '@mdi/font/css/materialdesignicons.css'
 3 | import 'vuetify/styles'
 4 | import { createVuetify } from 'vuetify'
 5 | 
 6 | import App from './App.vue'
 7 | 
 8 | const app = createApp(App)
 9 | const vuetify = createVuetify()
10 | app.use(vuetify)
11 | 
12 | app.mount('#app')
13 | 


--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json",
 3 |   "changelog": "@changesets/cli/changelog",
 4 |   "commit": false,
 5 |   "fixed": [],
 6 |   "linked": [],
 7 |   "access": "public",
 8 |   "baseBranch": "main",
 9 |   "updateInternalDependencies": "patch",
10 |   "ignore": []
11 | }
12 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vuetify Sonner</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.yml:
--------------------------------------------------------------------------------
 1 | name: Feature request
 2 | description: Request a new feature
 3 | labels: ['type: feature']
 4 | body:
 5 |   - type: textarea
 6 |     id: feature-description
 7 |     attributes:
 8 |       label: Describe the feature
 9 |       description: A clear and concise description of the feature. If you intend to submit a PR for this feature, tell us how in the description. Thanks!
10 |       placeholder: Feature description
11 |     validations:
12 |       required: true
13 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # vuetify-sonner
 2 | 
 3 | ## 0.4.2
 4 | 
 5 | ### Patch Changes
 6 | 
 7 | - d2dfb95: Fix incorrect styles export
 8 | 
 9 | ## 0.4.1
10 | 
11 | ### Patch Changes
12 | 
13 | - 67e2931: Fix missing vue-sonner styles
14 | 
15 | ## 0.4.0
16 | 
17 | ### Minor Changes
18 | 
19 | - 91d52f8: Bump vue-sonner to v2
20 | 
21 | ## 0.3.21
22 | 
23 | ### Patch Changes
24 | 
25 | - 12e1853: Bump vue-sonner to 1.3.0
26 | 
27 | ## 0.3.20
28 | 
29 | ### Patch Changes
30 | 
31 | - 6a5d845: Bump vue-sonner to 1.2.3
32 | 


--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "moduleResolution": "Node",
 6 |     "declaration": true,
 7 |     "declarationDir": "./temp",
 8 |     "emitDeclarationOnly": true,
 9 |     "noEmit": false,
10 |     "outDir": "dist"
11 |   },
12 |   "vueCompilerOptions": {
13 |     "skipTemplateCodegen": true
14 |   },
15 |   "include": [
16 |     "lib/**/*.ts",
17 |     "lib/**/*.d.ts",
18 |     "lib/**/*.tsx",
19 |     "lib/**/*.vue"
20 |   ]
21 | }
22 | 


--------------------------------------------------------------------------------
/.changeset/README.md:
--------------------------------------------------------------------------------
1 | # Changesets
2 | 
3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4 | with multi-package repos, or single-package repos to help you version and publish your code. You can
5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6 | 
7 | We have a quick list of common questions to get you started engaging with this project in
8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "moduleResolution": "Node",
 6 |     "paths": {
 7 |       "@/*": ["lib/*"],
 8 |       "~/*": ["./src/*"]
 9 |     }
10 |   },
11 |   "references": [{ "path": "./tsconfig.node.json" }],
12 |   "include": [
13 |     "src/**/*.ts",
14 |     "src/**/*.d.ts",
15 |     "src/**/*.tsx",
16 |     "src/**/*.vue",
17 |     "lib/**/*.ts",
18 |     "lib/**/*.d.ts",
19 |     "lib/**/*.tsx",
20 |     "lib/**/*.vue"
21 |   ]
22 | }
23 | 


--------------------------------------------------------------------------------
/lib/VSonner.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { Toaster, type ToasterProps } from 'vue-sonner'
 3 | import 'vue-sonner/style.css'
 4 | 
 5 | type Props = Omit<ToasterProps, 'richColors' | 'theme' | 'closeButton' | 'className' | 'style'>
 6 | 
 7 | withDefaults(defineProps<Props>(), {
 8 |   position: 'bottom-center',
 9 |   hotkey: () => ['altKey', 'KeyT'],
10 |   expand: false,
11 |   visibleToasts: 3,
12 |   offset: 32,
13 | })
14 | </script>
15 | 
16 | <template>
17 |   <Toaster
18 |     :position="position"
19 |     :hotkey="hotkey"
20 |     :expand="expand"
21 |     :visible-toasts="visibleToasts"
22 |     :duration="duration"
23 |     :toast-options="toastOptions"
24 |     :offset="offset"
25 |   />
26 |   <slot />
27 | </template>
28 | 


--------------------------------------------------------------------------------
/api-extractor.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
 3 |   "mainEntryPointFilePath": "<projectFolder>/temp/index.d.ts",
 4 |   "bundledPackages": [],
 5 |   "compiler": {
 6 |     "tsconfigFilePath": "<projectFolder>/tsconfig.build.json"
 7 |   },
 8 |   "apiReport": {
 9 |     "enabled": false
10 |   },
11 |   "docModel": {
12 |     "enabled": false
13 |   },
14 |   "dtsRollup": {
15 |     "enabled": true,
16 |     "untrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>.d.ts"
17 |   },
18 |   "tsdocMetadata": {
19 |     "enabled": false
20 |   },
21 |   "messages": {
22 |     "extractorMessageReporting": {
23 |       "ae-forgotten-export": {
24 |         "logLevel": "none"
25 |       },
26 |       "ae-missing-release-tag": {
27 |         "logLevel": "none"
28 |       }
29 |     }
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/Hero.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { toast } from '@/index'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="wrapper">
 7 |     <h1 class="text-h3">
 8 |       Vuetify Sonner
 9 |     </h1>
10 |     <p style="margin-top: 0; font-size: 18px;">
11 |       Stackable toast component for Vuetify.
12 |     </p>
13 |     <div class="buttons">
14 |       <VBtn
15 |         color="primary" size="large"
16 |         @click="() => {
17 |           toast('Vuetify Sonner', {
18 |             description: 'Stackable toast component for Vuetify.',
19 |           })
20 |         }"
21 |       >
22 |         Render a toast
23 |       </VBtn>
24 |       <VBtn
25 |         href="https://github.com/wobsoriano/vuetify-sonner" target="_blank"
26 |         size="large"
27 |       >
28 |         GitHub
29 |       </VBtn>
30 |     </div>
31 |   </div>
32 | </template>
33 | 
34 | <style>
35 | .wrapper {
36 |   display: flex;
37 |   flex-direction: column;
38 |   gap: 12px;
39 |   align-items: center;
40 | }
41 | 
42 | .buttons {
43 |   display: flex;
44 |   gap: 8px;
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Robert Soriano <https://github.com/wobsoriano>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/lib/types.ts:
--------------------------------------------------------------------------------
 1 | import type { ExternalToast, ToastClasses, ToastT, ToasterProps } from 'vue-sonner'
 2 | import type { VAvatar, VBtn, VCard, VCardActions, VCardText, VIcon, VProgressLinear } from 'vuetify/components'
 3 | import type { ComponentProps } from 'vue-component-type-helpers'
 4 | 
 5 | export interface ToastProps {
 6 |   text: string
 7 |   description?: string
 8 |   vertical?: boolean
 9 |   cardProps?: ComponentProps<typeof VCard>
10 |   cardTextProps?: ComponentProps<typeof VCardText>
11 |   cardActionsProps?: ComponentProps<typeof VCardActions>
12 |   action?: {
13 |     label?: string
14 |     onClick?: () => void
15 |     buttonProps?: ComponentProps<typeof VBtn>
16 |   }
17 |   prependIcon?: string
18 |   prependIconProps?: ComponentProps<typeof VIcon>
19 |   avatar?: string
20 |   multipleAvatars?: string[]
21 |   avatarProps?: ComponentProps<typeof VAvatar>
22 |   progressBar?: boolean
23 |   reverseProgressBar?: boolean
24 |   progressDuration?: number
25 |   progressBarProps?: ComponentProps<typeof VProgressLinear>
26 |   loading?: boolean
27 | }
28 | 
29 | export type Position = ToasterProps['position']
30 | 
31 | export type {
32 |   ExternalToast,
33 |   ToastT,
34 |   ToastClasses,
35 | }
36 | 


--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Release
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - main
 7 | 
 8 | concurrency: ${{ github.workflow }}-${{ github.ref }}
 9 | 
10 | jobs:
11 |   release:
12 |     permissions:
13 |       contents: write # to create release (changesets/action)
14 |       pull-requests: write # to create pull request (changesets/action)
15 |     name: Release
16 |     runs-on: ubuntu-latest
17 |     steps:
18 |       - name: Checkout Repo
19 |         uses: actions/checkout@v4
20 |         with:
21 |           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
22 |           fetch-depth: 0
23 |       - uses: pnpm/action-setup@v4
24 |         with:
25 |           version: 10.20.0
26 | 
27 |       - name: Setup Node.js
28 |         uses: actions/setup-node@v4
29 |         with:
30 |           node-version: 20.x
31 |           cache: pnpm
32 | 
33 |       - name: Install dependencies
34 |         run: pnpm install --frozen-lockfile
35 | 
36 |       - name: Create Release Pull Request or Publish to npm
37 |         id: changesets
38 |         uses: changesets/action@v1
39 |         with:
40 |           publish: pnpm release
41 |         env:
42 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
43 |           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
44 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import path from 'node:path'
 2 | import type { UserConfig } from 'vite'
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | import vuetify from 'vite-plugin-vuetify'
 6 | 
 7 | // https://vitejs.dev/config/
 8 | export default defineConfig(({ mode }) => {
 9 |   const userConfig: UserConfig = {}
10 | 
11 |   if (mode === 'lib') {
12 |     userConfig.build = {
13 |       lib: {
14 |         entry: path.resolve(__dirname, 'lib/index.ts'),
15 |         name: 'VuetifySonner',
16 |         fileName: 'vuetify-sonner',
17 |       },
18 |       outDir: 'dist',
19 |       emptyOutDir: true,
20 |       cssCodeSplit: false,
21 |       sourcemap: true,
22 |       rollupOptions: {
23 |         external: ['vue', 'vuetify', /vuetify\/.+/, 'vue-sonner'],
24 |         output: [
25 |           {
26 |             format: 'cjs',
27 |             entryFileNames: `vuetify-sonner.cjs`,
28 |           },
29 |           {
30 |             format: 'es',
31 |             entryFileNames: `vuetify-sonner.js`,
32 |             preserveModules: false,
33 |           },
34 |         ],
35 |       },
36 |     }
37 |   }
38 | 
39 |   return {
40 |     plugins: [
41 |       vue(),
42 |       vuetify({
43 |         autoImport: true,
44 |       }),
45 |     ],
46 |     resolve: {
47 |       alias: {
48 |         '@/': `${path.resolve(__dirname, 'lib')}/`,
49 |       },
50 |     },
51 |     ...userConfig,
52 |   }
53 | })
54 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/Expand.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed } from 'vue'
 3 | import { toast } from '@/index'
 4 | 
 5 | const props = defineProps<{
 6 |   expand: boolean
 7 | }>()
 8 | const emit = defineEmits(['update:expand'])
 9 | 
10 | const codeMap: Record<string, string> = {
11 |   true: '<VSonner expand :visible-toasts="9" />',
12 |   false: '<VSonner :expand="false" :visible-toasts="3" />',
13 | }
14 | 
15 | const code = computed(() => codeMap[String(props.expand)])
16 | 
17 | function onClick(value: boolean) {
18 |   toast('Event has been created', {
19 |     description: 'Monday, January 3rd at 6:00pm',
20 |     prependIcon: '$vuetify',
21 |   })
22 |   emit('update:expand', value)
23 | }
24 | </script>
25 | 
26 | <template>
27 |   <div>
28 |     <h2>Expand</h2>
29 |     <p>You can change the amount of toasts visible through the visibleToasts prop.</p>
30 |     <div class="buttons mt-2">
31 |       <v-btn @click="onClick(true)">
32 |         Expand
33 |       </v-btn>
34 |       <v-btn @click="onClick(false)">
35 |         Default
36 |       </v-btn>
37 |     </div>
38 |     <v-sheet
39 |       class="mt-4 code-sheet"
40 |       color="grey-lighten-4"
41 |       rounded="lg"
42 |     >
43 |       <code>{{ code }}</code>
44 |     </v-sheet>
45 |   </div>
46 | </template>
47 | 
48 | <style>
49 | .buttons {
50 |   display: flex;
51 |   flex-wrap: wrap;
52 |   gap: 8px;
53 |   margin: 0 calc(-1 * var(--side-padding));
54 |   padding: 4px var(--side-padding);
55 |   position: relative;
56 | }
57 | 
58 | .code-sheet {
59 |   padding: 12px 16px;
60 | }
61 | 
62 | .code-sheet code {
63 |   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
64 |   font-size: 14px;
65 |   color: #333;
66 | }
67 | </style>
68 | 


--------------------------------------------------------------------------------
/lib/ProgressBar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { VProgressLinear } from 'vuetify/components'
 3 | import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 4 | import type { ExternalToast, ToastProps } from './types'
 5 | 
 6 | type ProgressProps = Pick<ExternalToast, 'duration'>
 7 |   & Pick<ToastProps, 'progressBarProps'>
 8 |   & { isPaused: boolean, reverseProgressBar?: boolean }
 9 | 
10 | const props = withDefaults(defineProps<ProgressProps>(), {
11 |   duration: 5000,
12 |   isPaused: false,
13 |   reverseProgressBar: false,
14 | })
15 | 
16 | const value = props.reverseProgressBar ? ref(0) : ref(5000)
17 | 
18 | let interval: ReturnType<typeof setInterval>
19 | 
20 | watch(() => props.isPaused, (newValue) => {
21 |   if (!newValue && !props.progressBarProps?.indeterminate)
22 |     syncProgressBar()
23 | })
24 | 
25 | function syncProgressBar() {
26 |   interval = setTimeout(() => {
27 |     if (props.isPaused)
28 |       return
29 |     props.reverseProgressBar ? value.value += 120 : value.value -= 120
30 |     if (value.value <= 0 && !props.reverseProgressBar) {
31 |       value.value = 0
32 |       clearInterval(interval)
33 |     }
34 |     else if (value.value >= props.duration && props.reverseProgressBar) {
35 |       value.value = props.duration
36 |       clearInterval(interval)
37 |     }
38 |     else {
39 |       syncProgressBar()
40 |     }
41 |   }, 100)
42 | }
43 | 
44 | onMounted(() => {
45 |   if (!props.progressBarProps?.indeterminate) {
46 |     value.value = props.reverseProgressBar ? 0 : props.duration
47 |     syncProgressBar()
48 |   }
49 | })
50 | 
51 | onBeforeUnmount (() => {
52 |   clearInterval(interval)
53 | })
54 | </script>
55 | 
56 | <template>
57 |   <VProgressLinear v-bind="props.progressBarProps" :model-value="Math.floor(100 * (value / props.duration))" />
58 | </template>
59 | 


--------------------------------------------------------------------------------
/lib/index.ts:
--------------------------------------------------------------------------------
 1 | import { h, markRaw } from 'vue'
 2 | import { toast as toastOriginal } from 'vue-sonner'
 3 | import type { ExternalToast, ToastProps } from './types'
 4 | import VSonner from './VSonner.vue'
 5 | import Toast from './Toast.vue'
 6 | 
 7 | type Options = Omit<ToastProps, 'text'> & Pick<ExternalToast, 'duration' | 'onAutoClose' | 'onDismiss' | 'id' | 'important'>
 8 | 
 9 | function toastFunction(text: string, options?: Options) {
10 |   const { description, action, ...rest } = options || {}
11 |   return toastOriginal.custom(markRaw(h(Toast, {
12 |     ...rest,
13 |     progressBar: options?.progressBar ?? false,
14 |     progressDuration: options?.duration ?? 5000,
15 |     progressBarProps: {
16 |       ...options?.progressBarProps,
17 |       indeterminate: options?.loading,
18 |     },
19 |     description,
20 |     action,
21 |     text,
22 |   })), {
23 |     ...rest,
24 |     unstyled: true,
25 |   })
26 | }
27 | 
28 | function createToastFunction(color: string, icon: string) {
29 |   return function (text: string, options?: Options) {
30 |     return toastFunction(text, {
31 |       prependIcon: icon,
32 |       cardProps: {
33 |         color,
34 |         ...options?.cardProps,
35 |       },
36 |       ...options,
37 |     })
38 |   }
39 | }
40 | 
41 | export const toast = Object.assign(toastFunction, {
42 |   success: createToastFunction('success', 'mdi-check-circle'),
43 |   error: createToastFunction('error', 'mdi-cancel'),
44 |   warning: createToastFunction('warning', 'mdi-alert'),
45 |   info: createToastFunction('info', 'mdi-alert-circle'),
46 |   primary: createToastFunction('primary', 'mdi-bell'),
47 |   secondary: createToastFunction('secondary', 'mdi-bell'),
48 |   dismiss(toastId?: number | string) {
49 |     return toastOriginal.dismiss(toastId)
50 |   },
51 |   toastOriginal,
52 | })
53 | 
54 | export {
55 |   VSonner,
56 | }
57 | 


--------------------------------------------------------------------------------
/src/Position.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { toast } from '@/index'
 3 | import type { Position } from '@/types'
 4 | 
 5 | const props = defineProps<{
 6 |   position: Position
 7 | }>()
 8 | const emit = defineEmits(['update:position'])
 9 | 
10 | const positions = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'] as const
11 | 
12 | function onClick(position: (typeof positions)[number]) {
13 |   const toastsAmount = document.querySelectorAll('[data-sonner-toast]').length
14 |   emit('update:position', position)
15 | 
16 |   if (toastsAmount > 0 && position !== props.position)
17 |     return
18 | 
19 |   toast('Event has been created', {
20 |     // vertical: true,
21 |     // description: 'Monday, January 3rd at 6:00pm'
22 |     action: {
23 |       label: 'Close',
24 |       buttonProps: {
25 |         color: 'pink',
26 |       },
27 |       onClick() {},
28 |     },
29 |   })
30 | }
31 | </script>
32 | 
33 | <template>
34 |   <div>
35 |     <h2>Position</h2>
36 |     <p>Swipe direction changes depending on the position.</p>
37 |     <div class="buttons mt-2">
38 |       <v-btn v-for="p in positions" :key="p" @click="onClick(p)">
39 |         {{ p }}
40 |       </v-btn>
41 |     </div>
42 |     <v-sheet
43 |       class="mt-4 code-sheet"
44 |       color="grey-lighten-4"
45 |       rounded="lg"
46 |     >
47 |       <code>&lt;VSonner position="{{ position }}" /&gt;</code>
48 |     </v-sheet>
49 |   </div>
50 | </template>
51 | 
52 | <style>
53 | .buttons {
54 |   display: flex;
55 |   flex-wrap: wrap;
56 |   gap: 8px;
57 |   margin: 0 calc(-1 * var(--side-padding));
58 |   padding: 4px var(--side-padding);
59 |   position: relative;
60 | }
61 | 
62 | .code-sheet {
63 |   padding: 12px 16px;
64 | }
65 | 
66 | .code-sheet code {
67 |   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
68 |   font-size: 14px;
69 |   color: #333;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.yml:
--------------------------------------------------------------------------------
 1 | name: Bug report
 2 | description: Report an issue with vuetify-sonner
 3 | labels: ['type: bug']
 4 | body:
 5 |   - type: markdown
 6 |     attributes:
 7 |       value: |
 8 |         Thanks for taking the time to fill out this bug report!
 9 |   - type: textarea
10 |     id: bug-description
11 |     attributes:
12 |       label: Describe the bug
13 |       description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us how in the description. Thanks!
14 |       placeholder: Bug description
15 |     validations:
16 |       required: true
17 |   - type: textarea
18 |     id: reproduction
19 |     attributes:
20 |       label: Reproduction
21 |       description: |
22 |         Provide a minimal reproduction of the problem. Include a StackBlitz or link to a GitHub repository that we can easily run to recreate the issue. If a report is vague and does not have a reproduction, it will be closed without warning.
23 | 
24 |         To get started, you can use the following StackBlitz template:
25 |         https://stackblitz.com/edit/vitejs-vite-sbuuep
26 |     validations:
27 |       required: true
28 |   - type: textarea
29 |     id: logs
30 |     attributes:
31 |       label: Logs
32 |       description: Please include browser console and server logs around the time this bug occurred. Optional if provided reproduction. Please try not to insert an image but copy paste the log text.
33 |       render: bash
34 |   - type: textarea
35 |     id: system-info
36 |     attributes:
37 |       label: System Info
38 |       description: Output of `npx envinfo --system --npmPackages vue,vuetify --binaries --browsers`
39 |       render: bash
40 |       placeholder: System, Binaries, Browsers
41 |     validations:
42 |       required: true
43 |   - type: dropdown
44 |     id: severity
45 |     attributes:
46 |       label: Severity
47 |       description: Select the severity of this issue
48 |       options:
49 |         - annoyance
50 |         - blocking an upgrade
51 |         - blocking all usage of vuetify-sonner
52 |     validations:
53 |       required: true
54 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vuetify-sonner",
 3 |   "type": "module",
 4 |   "version": "0.4.2",
 5 |   "packageManager": "pnpm@10.20.0",
 6 |   "description": "Stackable toast component for Vuetify.",
 7 |   "author": "Robert Soriano <sorianorobertc@gmail.com>",
 8 |   "license": "MIT",
 9 |   "homepage": "https://github.com/wobsoriano/vuetify-sonner#readme",
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/wobsoriano/vuetify-sonner.git"
13 |   },
14 |   "bugs": "https://github.com/wobsoriano/vuetify-sonner/issues",
15 |   "keywords": [
16 |     "vuetify",
17 |     "vue",
18 |     "confirm",
19 |     "snackbar",
20 |     "toast"
21 |   ],
22 |   "sideEffects": false,
23 |   "exports": {
24 |     ".": {
25 |       "types": "./dist/vuetify-sonner.d.ts",
26 |       "import": "./dist/vuetify-sonner.js",
27 |       "require": "./dist/vuetify-sonner.cjs"
28 |     },
29 |     "./style.css": {
30 |       "import": "./dist/vuetify-sonner.css",
31 |       "require": "./dist/vuetify-sonner.css"
32 |     }
33 |   },
34 |   "main": "./dist/vuetify-sonner.cjs",
35 |   "module": "./dist/vuetify-sonner.js",
36 |   "types": "./dist/vuetify-sonner.d.ts",
37 |   "files": [
38 |     "dist"
39 |   ],
40 |   "scripts": {
41 |     "build": "vite build --mode lib && rimraf dist/vite.svg && pnpm build:types",
42 |     "build:types": "vue-tsc -p tsconfig.build.json && api-extractor run",
43 |     "dev": "vite",
44 |     "dev:build": "vite build",
45 |     "dev:preview": "vite preview",
46 |     "lint": "eslint .",
47 |     "prepublishOnly": "pnpm build",
48 |     "release": "changeset publish"
49 |   },
50 |   "peerDependencies": {
51 |     "vue": "^3.3.0",
52 |     "vuetify": "^3.3.0"
53 |   },
54 |   "dependencies": {
55 |     "vue-component-type-helpers": "^3.1.3",
56 |     "vue-sonner": "^2.0.9"
57 |   },
58 |   "devDependencies": {
59 |     "@antfu/eslint-config": "^2.27.3",
60 |     "@changesets/cli": "^2.29.7",
61 |     "@mdi/font": "^7.4.47",
62 |     "@microsoft/api-extractor": "^7.54.0",
63 |     "@types/node": "^20.19.24",
64 |     "@vitejs/plugin-vue": "^6.0.1",
65 |     "@vue/tsconfig": "^0.8.1",
66 |     "bumpp": "^10.3.1",
67 |     "eslint": "^9.39.1",
68 |     "rimraf": "^5.0.10",
69 |     "roboto-fontface": "^0.10.0",
70 |     "sass": "^1.93.3",
71 |     "typescript": "^5.8.2",
72 |     "vite": "^7.2.0",
73 |     "vite-plugin-vuetify": "^2.1.2",
74 |     "vue": "^3.5.24",
75 |     "vue-tsc": "^3.1.3",
76 |     "vuetify": "^3.10.9"
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue'
 3 | import Hero from './Hero.vue'
 4 | import Position from './Position.vue'
 5 | import Types from './Types.vue'
 6 | import Expand from './Expand.vue'
 7 | import WithProgressBars from './WithProgressBars.vue'
 8 | import WithAvatars from './WithAvatars.vue'
 9 | import { VSonner } from '@/index'
10 | import type { Position as PositionType } from '@/types'
11 | 
12 | const position = ref<PositionType>('bottom-right')
13 | const expand = ref(false)
14 | const range = ref([2, 9])
15 | const maxToasts = ref(3)
16 | </script>
17 | 
18 | <template>
19 |   <v-app>
20 |     <v-main>
21 |       <VSonner :position="position" :visible-toasts="maxToasts" :expand="expand" />
22 |       <div class="container">
23 |         <Hero />
24 |         <div class="content">
25 |           <Position v-model:position="position" />
26 |           <v-slider
27 |             v-model="maxToasts"
28 |             :max="range[1]"
29 |             :min="range[0]"
30 |             :show-ticks="true"
31 |             thumb-label="always"
32 | 
33 |             :step="1"
34 |             hint="Number of visible toasts at a time"
35 |             persistent-hint
36 |           >
37 |             <template #prepend>
38 |               <v-text-field
39 |                 v-model="range[0]"
40 |                 density="compact"
41 |                 style="width: 70px"
42 |                 type="number"
43 |                 variant="outlined"
44 |                 hide-details
45 |                 single-line
46 |               />
47 |             </template>
48 |             <template #append>
49 |               <v-text-field
50 |                 v-model="range[1]"
51 |                 density="compact"
52 |                 style="width: 70px"
53 |                 type="number"
54 |                 variant="outlined"
55 |                 hide-details
56 |                 single-line
57 |               />
58 |             </template>
59 |           </v-slider>
60 |           <Expand v-model:expand="expand" />
61 |           <Types />
62 |           <WithProgressBars />
63 |           <WithAvatars />
64 |         </div>
65 |       </div>
66 |     </v-main>
67 |   </v-app>
68 | </template>
69 | 
70 | <style>
71 | body {
72 |   --side-padding: 16px;
73 | }
74 | 
75 | .container {
76 |   padding-top: 100px;
77 |   max-width: 773px;
78 |   margin: 0 auto;
79 |   padding-left: max(var(--side-padding), env(safe-area-inset-left));
80 |   padding-right: max(var(--side-padding), env(safe-area-inset-right));
81 | }
82 | 
83 | * {
84 |   touch-action: manipulation;
85 | }
86 | 
87 | .content {
88 |   display: flex;
89 |   flex-direction: column;
90 |   gap: 48px;
91 |   margin-top: 96px;
92 | }
93 | </style>
94 | 


--------------------------------------------------------------------------------
/src/Types.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { computed, ref } from 'vue'
 3 | import { toast } from '@/index'
 4 | 
 5 | type ToastType = 'default' | 'success' | 'info' | 'warning' | 'error' | 'primary' | 'secondary'
 6 | 
 7 | const selectedType = ref<ToastType>('default')
 8 | 
 9 | const codeMap: Record<ToastType, string> = {
10 |   default: 'toast(\'Event has been created\')',
11 |   success: 'toast.success(\'Something happened successfully\')',
12 |   info: 'toast.info(\'Be at the area 10 minutes before the time\')',
13 |   warning: 'toast.warning(\'Event start time cannot be earlier than 8am\')',
14 |   error: 'toast.error(\'Event has not been created\')',
15 |   primary: 'toast.primary(\'Just a notification with primary color 💅\')',
16 |   secondary: 'toast.secondary(\'Another notification with secondary color 🎨\', { prependIcon: \'mdi-thumb-up\' })',
17 | }
18 | 
19 | const code = computed(() => codeMap[selectedType.value])
20 | 
21 | function onClick(type: ToastType, toastFn: () => void) {
22 |   selectedType.value = type
23 |   toastFn()
24 | }
25 | </script>
26 | 
27 | <template>
28 |   <div>
29 |     <h2>Types</h2>
30 |     <p>You can customize the type of toast you want to render, and pass an options object as the second argument.</p>
31 |     <div class="buttons mt-2">
32 |       <v-btn @click="onClick('default', () => toast('Event has been created'))">
33 |         Default
34 |       </v-btn>
35 |       <v-btn @click="onClick('success', () => toast.success('Something happened successfully'))">
36 |         Success
37 |       </v-btn>
38 |       <v-btn @click="onClick('info', () => toast.info('Be at the area 10 minutes before the time'))">
39 |         Info
40 |       </v-btn>
41 |       <v-btn @click="onClick('warning', () => toast.warning('Event start time cannot be earlier than 8am'))">
42 |         Warning
43 |       </v-btn>
44 |       <v-btn @click="onClick('error', () => toast.error('Event has not been created'))">
45 |         Error
46 |       </v-btn>
47 |       <v-btn @click="onClick('primary', () => toast.primary('Just a notification with primary color 💅'))">
48 |         Primary
49 |       </v-btn>
50 |       <v-btn @click="onClick('secondary', () => toast.secondary('Another notification with secondary color 🎨', { prependIcon: 'mdi-thumb-up' }))">
51 |         Secondary
52 |       </v-btn>
53 |     </div>
54 |     <v-sheet
55 |       class="mt-4 code-sheet"
56 |       color="grey-lighten-4"
57 |       rounded="lg"
58 |     >
59 |       <code>{{ code }}</code>
60 |     </v-sheet>
61 |   </div>
62 | </template>
63 | 
64 | <style>
65 | .buttons {
66 |   display: flex;
67 |   flex-wrap: wrap;
68 |   gap: 8px;
69 |   margin: 0 calc(-1 * var(--side-padding));
70 |   padding: 4px var(--side-padding);
71 |   position: relative;
72 | }
73 | 
74 | .code-sheet {
75 |   padding: 12px 16px;
76 | }
77 | 
78 | .code-sheet code {
79 |   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
80 |   font-size: 14px;
81 |   color: #333;
82 | }
83 | </style>
84 | 


--------------------------------------------------------------------------------
/src/WithProgressBars.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { toast } from '@/index'
 3 | 
 4 | function promise() {
 5 |   return new Promise(resolve => setTimeout(() =>
 6 |     resolve('Some Data'), 2000))
 7 | }
 8 | function promiseError() {
 9 |   return new Promise((_, reject) => setTimeout(() =>
10 |     // eslint-disable-next-line prefer-promise-reject-errors
11 |     reject('This error'), 2000))
12 | }
13 | </script>
14 | 
15 | <template>
16 |   <div>
17 |     <h2>Progress Bar</h2>
18 |     <p>You can remove or customize the progress bar</p>
19 |     <div class="buttons mt-2">
20 |       <v-btn @click="toast('Progress bar color and height changed', { progressBar: true, progressBarProps: { color: 'error', height: 12 } })">
21 |         P Bar Props
22 |       </v-btn>
23 |       <v-btn @click="toast('Progress bar reversed', { progressBar: true, reverseProgressBar: true })">
24 |         Reverse P Bar
25 |       </v-btn>
26 |       <v-btn @click="toast('Progress bar indefinite (loading)', { progressBar: true, loading: true })">
27 |         Indefinite P Bar
28 |       </v-btn>
29 |       <v-btn
30 |         @click="toast.toastOriginal.promise(promise, {
31 |           loading: 'Loading...',
32 |           success: (data) => {
33 |             toast.success(`Successful operation: ${data}`, {
34 |               progressBar: true,
35 |               action: {
36 |                 buttonProps: {
37 |                   icon: 'mdi-close',
38 |                 },
39 |                 onClick: () => {},
40 |               } })
41 |             return `Operation complete: ${data} was returned`;
42 |           },
43 |           error: (data: any) => 'Error',
44 |           action: {
45 |             label: 'Close',
46 |             onClick: () => {},
47 |           },
48 |         },
49 |         )"
50 |       >
51 |         Promise (success)
52 |       </v-btn>
53 |       <v-btn
54 |         @click="toast.toastOriginal.promise(promiseError, {
55 |           loading: 'Loading...',
56 |           success: (data) => {
57 |             return `Operation complete: ${data} was returned`;
58 |           },
59 |           error: (data: any) => {
60 |             toast.error(`Error: ${data}`, {
61 |               progressBar: true,
62 |               action: {
63 |                 buttonProps: {
64 |                   icon: 'mdi-close',
65 |                 },
66 |                 onClick: () => {},
67 |               },
68 |             })
69 |             return `Error: ${data}`
70 |           },
71 |         },
72 |         )"
73 |       >
74 |         Promise (error)
75 |       </v-btn>
76 |     </div>
77 |     <v-sheet
78 |       class="mt-4 code-sheet"
79 |       color="grey-lighten-4"
80 |       rounded="lg"
81 |     >
82 |       <code>toast('Progress bar', { progressBar: true, progressBarProps: { color: 'error', height: 12 } })</code>
83 |     </v-sheet>
84 |   </div>
85 | </template>
86 | 
87 | <style>
88 | .code-sheet {
89 |   padding: 12px 16px;
90 | }
91 | 
92 | .code-sheet code {
93 |   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
94 |   font-size: 14px;
95 |   color: #333;
96 | }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/src/WithAvatars.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { toast } from '@/index'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div>
 7 |     <h2>Avatars</h2>
 8 |     <p>You can add avatars to your toast</p>
 9 |     <div class="buttons mt-2 mb-8">
10 |       <v-btn @click="toast('This toast has an avatar', { avatar: 'https://avatars.githubusercontent.com/u/739984?v=4' })">
11 |         Avatar
12 |       </v-btn>
13 |       <v-btn @click="toast.primary('This toast has an avatar', { avatar: 'https://avatars.githubusercontent.com/u/739984?v=4', prependIcon: '$vuetify', description: 'And an icon as well' })">
14 |         With Icon
15 |       </v-btn>
16 |       <v-btn @click="toast('This avatar is small and square', { avatar: 'https://avatars.githubusercontent.com/u/739984?v=4', avatarProps: { size: 'small', tile: true }, cardProps: { color: 'deep-purple' } })">
17 |         Avatar Props
18 |       </v-btn>
19 |       <v-btn
20 |         @click="toast('Some people did a thing', {
21 |           cardProps: {
22 |             color: 'blue',
23 |           },
24 |           multipleAvatars: [
25 |             'https://randomuser.me/api/portraits/women/22.jpg',
26 |             'https://randomuser.me/api/portraits/women/21.jpg',
27 |             'https://randomuser.me/api/portraits/men/21.jpg',
28 |           // 'https://randomuser.me/api/portraits/women/20.jpg',
29 |           // 'https://randomuser.me/api/portraits/men/20.jpg',
30 |           // 'https://avatars.githubusercontent.com/u/739984?v=4',
31 |           // 'https://avatars.githubusercontent.com/u/739984?v=4',
32 |           // 'https://avatars.githubusercontent.com/u/739984?v=4'
33 |           ],
34 |           description: 'Jane + 4 others did a thing',
35 |           action: {
36 |             buttonProps: {
37 |               icon: 'mdi-arrow-right-bold',
38 |             },
39 |           },
40 |         })"
41 |       >
42 |         Multiple Avatars
43 |       </v-btn>
44 |       <v-btn
45 |         @click="toast('Several people liked your post', {
46 |           cardProps: {
47 |             color: 'blue-grey-darken-4',
48 |           },
49 |           vertical: true,
50 |           multipleAvatars: [
51 |             'https://randomuser.me/api/portraits/women/25.jpg',
52 |             'https://randomuser.me/api/portraits/women/24.jpg',
53 |             'https://randomuser.me/api/portraits/men/20.jpg',
54 |           ],
55 |           description: 'Mary and 4 others liked your post',
56 |           prependIcon: 'mdi-heart',
57 |           prependIconProps: {
58 |             color: 'error',
59 |           },
60 |         })"
61 |       >
62 |         Multiple With Icon
63 |       </v-btn>
64 |     </div>
65 |     <v-sheet
66 |       class="mt-4 code-sheet"
67 |       color="grey-lighten-4"
68 |       rounded="lg"
69 |     >
70 |       <code>toast('This toast has an avatar', { avatar: 'https://...' })</code>
71 |     </v-sheet>
72 |   </div>
73 | </template>
74 | 
75 | <style>
76 | .code-sheet {
77 |   padding: 12px 16px;
78 | }
79 | 
80 | .code-sheet code {
81 |   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
82 |   font-size: 14px;
83 |   color: #333;
84 | }
85 | </style>
86 | 


--------------------------------------------------------------------------------
/lib/Toast.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { VAvatar, VBtn, VCard, VCardActions, VCardText, VExpandTransition, VIcon, VImg, VProgressCircular, VSpacer } from 'vuetify/components'
 3 | import { ref } from 'vue'
 4 | import type { ToastProps } from './types'
 5 | import ProgressBar from './ProgressBar.vue'
 6 | 
 7 | defineOptions({
 8 |   inheritAttrs: false,
 9 | })
10 | 
11 | withDefaults(defineProps<ToastProps>(), {
12 |   vertical: false,
13 |   progressBar: false,
14 |   progressDuration: 5000,
15 |   cardActionsProps: () => ({}),
16 | })
17 | 
18 | defineEmits(['closeToast'])
19 | 
20 | const isHovered = ref(false)
21 | </script>
22 | 
23 | <template>
24 |   <VCard class="card-snackbar" v-bind="cardProps" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
25 |     <div :class="{ 'd-flex flex-no-wrap justify-space-between': !vertical }">
26 |       <VCardText v-bind="cardTextProps" :class="{ 'd-flex align-center': prependIcon || avatar || multipleAvatars }">
27 |         <VAvatar v-if="avatar" class="mr-2" v-bind="avatarProps">
28 |           <VImg :src="avatar" cover>
29 |             <template #placeholder>
30 |               <div class="d-flex align-center justify-center fill-height">
31 |                 <VProgressCircular
32 |                   color="grey-lighten-2"
33 |                   indeterminate
34 |                 />
35 |               </div>
36 |             </template>
37 |           </VImg>
38 |         </VAvatar>
39 |         <div v-else-if="multipleAvatars" class="d-flex align-center mr-8">
40 |           <VAvatar v-for="img, i in multipleAvatars.length <= 5 ? multipleAvatars : multipleAvatars.slice(0, 5)" v-bind="avatarProps" :key="i" class="mr-n6" :style="{ zIndex: 5 - i }">
41 |             <VImg :src="img" cover>
42 |               <template #placeholder>
43 |                 <div class="d-flex align-center justify-center fill-height">
44 |                   <VProgressCircular
45 |                     color="grey-lighten-2"
46 |                     indeterminate
47 |                   />
48 |                 </div>
49 |               </template>
50 |             </VImg>
51 |           </VAvatar>
52 |         </div>
53 |         <VIcon v-if="prependIcon" class="mr-2" :icon="prependIcon" v-bind="prependIconProps" />
54 |         <div v-if="description">
55 |           <div class="pb-1">
56 |             {{ text }}
57 |           </div>
58 |           <p class="font-weight-light" v-html="description" />
59 |         </div>
60 |         <template v-else>
61 |           {{ text }}
62 |         </template>
63 |       </VCardText>
64 |       <VCardActions v-if="action" v-bind="cardActionsProps">
65 |         <VSpacer />
66 |         <VBtn
67 |           v-bind="action.buttonProps"
68 |           :text="action.label"
69 |           @click="() => {
70 |             $emit('closeToast')
71 |             action?.onClick?.()
72 |           }"
73 |         />
74 |       </VCardActions>
75 |     </div>
76 |     <VExpandTransition>
77 |       <ProgressBar v-show="progressBar" :duration="progressDuration" :progress-bar-props="progressBarProps" :is-paused="isHovered" :reverse-progress-bar="reverseProgressBar" />
78 |     </VExpandTransition>
79 |   </VCard>
80 | </template>
81 | 
82 | <style scoped lang="scss">
83 | @use 'vuetify/settings';
84 | .card-snackbar {
85 |   background: settings.$snackbar-background;
86 |   color: settings.$snackbar-color;
87 |   max-width: 672px !important;
88 |   min-width: 344px !important;
89 |   min-height: 48px !important;
90 | }
91 | </style>
92 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | https://github.com/wobsoriano/vuetify-sonner/assets/13049130/3dc381ec-95b2-4bd1-9df6-624210e9d9f4
  2 | 
  3 | # vuetify-sonner
  4 | 
  5 | Stackable toast component for Vuetify.
  6 | 
  7 | > [!WARNING]
  8 | > Snackbars should appear one at a time. This component breaks the Material [spec](https://m2.material.io/components/snackbars#behavior).
  9 | 
 10 | ## Installation
 11 | 
 12 | ```bash
 13 | npm install vuetify-sonner
 14 | ```
 15 | 
 16 | ## Usage
 17 | 
 18 | Add `<VSonner />` to your app, it will be the place where all your toasts will be rendered. After that you can use `toast()` from anywhere in your app.
 19 | 
 20 | ```vue
 21 | <script setup lang="ts">
 22 | import { VSonner, toast } from 'vuetify-sonner'
 23 | import 'vuetify-sonner/style.css'
 24 | </script>
 25 | 
 26 | <template>
 27 |   <VApp>
 28 |     <VSonner />
 29 |     <VBtn @click="toast('My first toast')">
 30 |       Give me a toast
 31 |     </VBtn>
 32 |   </VApp>
 33 | </template>
 34 | ```
 35 | ### Default
 36 | 
 37 | Most basic toast. You can customize it by passing an options object as the second argument.
 38 | 
 39 | ```js
 40 | toast('My first toast')
 41 | ```
 42 | 
 43 | With description:
 44 | 
 45 | ```js
 46 | toast('Event has been created', {
 47 |   description: 'Monday, January 3rd at 6:00pm',
 48 | })
 49 | ```
 50 | 
 51 | ### Action
 52 | 
 53 | Renders a button.
 54 | 
 55 | ```js
 56 | toast('Event has been created', {
 57 |   action: {
 58 |     label: 'Undo',
 59 |     onClick: () => console.log('Undo'),
 60 |     buttonProps: {
 61 |       // v-btn props
 62 |     }
 63 |   },
 64 | })
 65 | ```
 66 | 
 67 | ## Customization
 68 | 
 69 | Behind the scenes, the toast component uses Vuetify [Cards](https://vuetifyjs.com/en/components/cards/), as the snackbar component has its own overlay logic.
 70 | 
 71 | ### Position
 72 | 
 73 | You can change the position through the `position` prop on the `<VSonner />` component. Default is `bottom-center`.
 74 | 
 75 | ```vue
 76 | <VSonner position="top-center" />
 77 | ```
 78 | 
 79 | ### Expanded
 80 | 
 81 | 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.
 82 | 
 83 | ```vue
 84 | <VSonner expand :visible-toasts="9" />
 85 | ```
 86 | 
 87 | ### Toast Options
 88 | 
 89 | ```js
 90 | toast('Event has been created', {
 91 |   description: 'Some more context of the notification', // subtitle of the snackbar
 92 |   cardProps: {
 93 |     color: 'success',
 94 |     class: 'my-toast',
 95 |     // v-card props
 96 |   },
 97 |   cardTextProps: {
 98 |     // v-card-text props
 99 |   },
100 |   cardActionsProps: {
101 |     // v-card-actions props
102 |   },
103 |   prependIcon: 'mdi-check-circle',
104 |   prependIconProps: {
105 |     // v-icon props
106 |   },
107 |   progressBar: boolean, // show or hide countdown progress bar
108 |   progressBarProps: {
109 |     // v-progress-linear props
110 |   },
111 |   reverseProgressBar: boolean, // changes progress bar direction
112 |   loading: boolean, // makes progressbar indeterminate
113 |   avatar: 'https://url.to/my/image.jpg', // avatar image url,
114 |   multipleAvatars: [
115 |     'https://url.to/image/1.jpg',
116 |     'https://url.to/image/2.jpg',
117 |     'https://url.to/image/3.jpg'
118 |     // will display first 5 images
119 |   ],
120 |   avatarProps: {
121 |     // v-avatar props
122 |   }
123 | })
124 | ```
125 | 
126 | ### Programmatically remove toast
127 | 
128 | To remove a toast programmatically use `toast.dismiss(id)`.
129 | 
130 | ```js
131 | const toastId = toast('Event has been created')
132 | 
133 | toast.dismiss(toastId)
134 | ```
135 | 
136 | You can also use the dismiss method without the id to dismiss all toasts.
137 | 
138 | ```js
139 | // Removes all toasts
140 | 
141 | toast.dismiss()
142 | ```
143 | 
144 | ### Duration
145 | 
146 | You can change the duration of each toast by using the `duration` property, or change the duration of all toasts like this:
147 | 
148 | ```vue
149 | <VSonner :duration="10000" />
150 | ```
151 | 
152 | ```js
153 | toast('Event has been created', {
154 |   duration: 10000,
155 | })
156 | 
157 | // Persisent toast
158 | toast('Event has been created', {
159 |   duration: Number.POSITIVE_INFINITY,
160 | })
161 | ```
162 | 
163 | ### On Close Callback
164 | 
165 | 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).
166 | 
167 | ```js
168 | toast('Event has been created', {
169 |   onDismiss: t => console.log(`Toast with id ${t.id} has been dismissed`),
170 |   onAutoClose: t => console.log(`Toast with id ${t.id} has been closed automatically`),
171 | })
172 | ```
173 | 
174 | ### Keyboard focus
175 | 
176 | 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.
177 | 
178 | ```vue
179 | <VSonner :hotkey="['KeyC']" />
180 | ```
181 | 
182 | ### Use Underlying `Vue-Sonner`
183 | 
184 | `vuetify-sonner`, as a wrapper over the `vue-sonner` library, grants access to all the underlying methods and properties of `vue-sonner` by using the `toast.toastOriginal` property, e.g.
185 | 
186 | ```js
187 | // Using Vue-Sonners Promise toast
188 | import { toast } from 'vuetify-sonner'
189 | 
190 | const promise = () => new Promise(resolve => setTimeout(resolve, 2000))
191 | 
192 | toast.toastOriginal
193 |   .promise(promise, {
194 |     loading: 'Loading...',
195 |     success: (data) => {
196 |       return `${data} toast has been added`
197 |     },
198 |     error: (data: any) => 'Error',
199 |   })
200 | ```
201 | 
202 | See [here for more on using vue-sonner](https://vue-sonner.vercel.app/)
203 | 
204 | ## Nuxt Usage
205 | 
206 | ```ts
207 | export default defineNuxtConfig({
208 |   build: {
209 |     transpile: ['vue-sonner']
210 |   }
211 | })
212 | ```
213 | 
214 | ```vue
215 | <script setup lang="ts">
216 | import { VSonner, toast } from 'vuetify-sonner'
217 | import 'vuetify-sonner/style.css'
218 | </script>
219 | 
220 | <template>
221 |   <VApp>
222 |     <ClientOnly>
223 |       <VSonner />
224 |     </ClientOnly>
225 |     <VBtn @click="toast('My first toast')">
226 |       Give me a toast
227 |     </VBtn>
228 |   </VApp>
229 | </template>
230 | ```
231 | 
232 | ## License
233 | 
234 | MIT
235 | 


--------------------------------------------------------------------------------