├── .editorconfig
├── .eslintrc.cjs
├── .github
    ├── FUNDING.yml
    ├── dependabot.yml
    ├── pull_request_template.md
    └── workflows
    │   └── publish.yml
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.cjs
├── public
    └── favicon.ico
├── src
    ├── App.vue
    ├── app-components
    │   ├── AppInput.vue
    │   ├── AppSelect.vue
    │   ├── AppStatusDisplay.vue
    │   ├── AppTextarea.vue
    │   ├── AppThemeToggle.vue
    │   └── AppToggle.vue
    ├── assets
    │   ├── container.scss
    │   ├── themes
    │   │   ├── common.scss
    │   │   ├── dark.scss
    │   │   └── light.scss
    │   └── toast.scss
    ├── components
    │   ├── Node.ts
    │   ├── ProgressBar.vue
    │   ├── ToastContainer.vue
    │   ├── VtIcon.vue
    │   ├── VtToast.vue
    │   └── VtTransition.vue
    ├── composables
    │   ├── createVtTheme.ts
    │   ├── useDraggable.ts
    │   ├── useSettings.ts
    │   ├── useToast.ts
    │   └── useVtEvents.ts
    ├── index.ts
    ├── main.ts
    ├── plugin.ts
    ├── shims
    │   └── vue.d.ts
    ├── type.ts
    └── utils.ts
├── tailwind.config.js
├── tsconfig.build.json
├── tsconfig.json
└── vite.config.ts


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | insert_final_newline = true
 6 | trim_trailing_whitespace = true
 7 | max_line_length = 120
 8 | end_of_line = lf
 9 | indent_style = space
10 | indent_size = 4
11 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |     root: true,
  3 |     env: {
  4 |         node: true
  5 |     },
  6 |     extends: [
  7 |         'eslint:recommended',
  8 |         'plugin:@typescript-eslint/recommended',
  9 |         'plugin:@typescript-eslint/recommended-requiring-type-checking',
 10 |         'plugin:vue/vue3-recommended',
 11 |         '@vue/typescript/recommended',
 12 |     ],
 13 |     plugins: [
 14 |         'vue',
 15 |         '@stylistic/ts'
 16 |     ],
 17 |     ignorePatterns: [
 18 |         'node_modules',
 19 |         '*.js'
 20 |     ],
 21 |     parserOptions: {
 22 |         ecmaVersion: 2020,
 23 |         parser: '@typescript-eslint/parser',
 24 |         sourceType: 'module',
 25 |         project: './tsconfig.json',
 26 |         tsconfigRootDir: __dirname,
 27 |         extraFileExtensions: ['.vue'],
 28 |     },
 29 |     rules: {
 30 |         // https://eslint.org/docs/rules/
 31 |         'no-console': 'warn',
 32 |         'no-debugger': 'warn',
 33 |         'semi': 'off',
 34 |         'indent': 'off',
 35 |         'no-unused-expressions': 'off',
 36 |         'space-before-function-paren': ['warn', {
 37 |             'anonymous': 'never',
 38 |             'named': 'never',
 39 |             'asyncArrow': 'always'
 40 |         }],
 41 |         'no-trailing-spaces': 'warn',
 42 |         'no-any': 'off',
 43 |         'no-prototype-builtins': 'off',
 44 |         'no-unused-vars': 'off',
 45 |         'prefer-rest-params': 'warn',
 46 |         'no-extra-parens': 'off',
 47 |         'quotes': 'off',
 48 |         'func-call-spacing': 'off',
 49 |         'comma-spacing': 'off',
 50 |         'keyword-spacing': 'off',
 51 |         'object-curly-spacing': ['warn', 'always'],
 52 |         'comma-dangle': ['warn', 'never'],
 53 |         'max-len': ['warn', 120],
 54 |         'eqeqeq': 'error',
 55 | 
 56 |         // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#supported-rules
 57 |         '@stylistic/ts/indent': ['warn', 4],
 58 |         '@stylistic/ts/semi': 'error',
 59 |         '@typescript-eslint/no-unused-expressions': ['error', {
 60 |             allowTernary: true,
 61 |             allowShortCircuit: true
 62 |         }],
 63 |         '@stylistic/ts/quotes': ['warn', 'single'],
 64 |         '@stylistic/ts/no-extra-parens': 'error',
 65 |         '@typescript-eslint/no-unused-vars': 'warn',
 66 |         '@typescript-eslint/no-useless-constructor': 'warn',
 67 |         '@typescript-eslint/no-explicit-any': 'off',
 68 |         '@typescript-eslint/ban-ts-comment': 'off',
 69 |         '@typescript-eslint/no-unsafe-return': 'off',
 70 |         '@typescript-eslint/no-unsafe-assignment': 'off',
 71 |         '@typescript-eslint/explicit-module-boundary-types': ['error', {
 72 |             allowArgumentsExplicitlyTypedAsAny: true,
 73 |             allowedNames: ['setup']
 74 |         }],
 75 |         '@typescript-eslint/prefer-nullish-coalescing': 'warn',
 76 |         '@typescript-eslint/prefer-optional-chain': 'warn',
 77 |         '@typescript-eslint/prefer-ts-expect-error': 'warn',
 78 |         '@typescript-eslint/promise-function-async': 'error',
 79 |         '@stylistic/ts/func-call-spacing': ['error', 'never'],
 80 |         '@stylistic/ts/comma-spacing': 'warn',
 81 |         '@stylistic/ts/keyword-spacing': 'warn',
 82 |         // '@typescript-eslint/consistent-indexed-object-style': ['error', 'record'], // waiting on dependency updates
 83 |         // '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
 84 |         '@stylistic/ts/member-delimiter-style': 'warn',
 85 |         '@stylistic/ts/type-annotation-spacing': 'warn',
 86 |         '@typescript-eslint/naming-convention': ['error',
 87 |             {
 88 |                 selector: 'default',
 89 |                 format: ['camelCase']
 90 |             },
 91 |             {
 92 |                 selector: 'import',
 93 |                 format: null
 94 |             },
 95 |             {
 96 |                 selector: 'objectLiteralProperty',
 97 |                 format: ['camelCase', 'PascalCase']
 98 |             },
 99 |             {
100 |                 selector: 'typeLike',
101 |                 format: ['PascalCase']
102 |             },
103 |             {
104 |                 selector: 'parameter',
105 |                 format: null,
106 |                 filter: {
107 |                     regex: '^_.*',
108 |                     match: true
109 |                 }
110 |             }
111 |         ],
112 |         '@typescript-eslint/no-non-null-assertion': 'off',
113 | 
114 |         // https://eslint.vuejs.org/rules/
115 |         // if unsure and eslint doesn't cover it please refer to https://v3.vuejs.org/style-guide/
116 |         'vue/html-indent': ['warn', 4],
117 |         'vue/component-name-in-template-casing': ['warn', 'PascalCase'],
118 |         'vue/match-component-file-name': ['off', { // until we have storybook working
119 |             extensions: ['jsx', 'vue', 'tsx']
120 |         }],
121 |         'vue/new-line-between-multi-line-property': 'warn',
122 |         'vue/max-attributes-per-line': [
123 |             'warn', {
124 |                 'singleline': 3,
125 |                 'multiline': 1
126 |             }
127 |         ],
128 |         'vue/first-attribute-linebreak': ['warn', {
129 |             'singleline': 'ignore',
130 |             'multiline': 'beside'
131 |         }],
132 |         'vue/no-boolean-default': ['error', 'default-false'],
133 |         'vue/no-duplicate-attr-inheritance': 'error',
134 |         'vue/no-empty-component-block': 'warn',
135 |         'vue/no-multiple-objects-in-class': 'error',
136 |         'vue/no-potential-component-option-typo': ['error', {
137 |             presets: ['vue', 'vue-router']
138 |         }],
139 |         'vue/no-reserved-component-names': ['error', {
140 |             'disallowVueBuiltInComponents': true,
141 |             'disallowVue3BuiltInComponents': true
142 |         }],
143 |         'vue/no-template-target-blank': 'error',
144 |         'vue/no-unsupported-features': ['error', {
145 |             'version': '^3.0.0'
146 |         }],
147 |         'vue/no-useless-mustaches': 'warn',
148 |         'vue/no-useless-v-bind': 'error',
149 |         'vue/padding-line-between-blocks': 'warn',
150 |         'vue/require-name-property': 'error',
151 |         'vue/v-for-delimiter-style': 'error',
152 |         'vue/v-on-event-hyphenation': 'error',
153 |         'vue/v-on-function-call': ['error', 'never', {
154 |             'ignoreIncludesComment': true
155 |         }],
156 |         'vue/eqeqeq': 'error',
157 |         'vue/no-extra-parens': 'warn',
158 |         'vue/html-closing-bracket-newline': ['warn', {
159 |             'multiline': 'never'
160 |         }],
161 |         'vue/no-v-html': 'off',
162 |         'vue/require-default-prop': 'off',
163 |         'vue/no-v-text-v-html-on-component': 'off'
164 |     }
165 | }
166 | 


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


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 | 
 4 | - package-ecosystem: npm
 5 |   directory: '/'
 6 |   target-branch: release/0.x
 7 |   schedule:
 8 |     interval: monthly
 9 |     time: '00:00'
10 |   open-pull-requests-limit: 10
11 |   commit-message:
12 |     prefix: fix
13 |     prefix-development: chore
14 |     include: scope
15 | 
16 | 
17 | - package-ecosystem: github-actions
18 |   directory: '/'
19 |   target-branch: release/0.x
20 |   schedule:
21 |     interval: monthly
22 |     time: '00:00'
23 |   open-pull-requests-limit: 10
24 |   commit-message:
25 |     prefix: fix
26 |     prefix-development: chore
27 |     include: scope
28 | 


--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | <!---
 2 | ☝️ PR title should follow conventional commits (https://conventionalcommits.org)
 3 | 
 4 | Please carefully read the contribution docs before creating a pull request
 5 |  👉 https://upfrontjs.com/prologue/contributing.html
 6 | -->
 7 | 
 8 | ### 🔗 Linked issue
 9 | 
10 | <!-- Please ensure there is an open issue and mention its number as #123 -->
11 | 
12 | ### ❓ Type of change
13 | 
14 | <!-- What types of changes does your code introduce? Put an `x` in all the boxes that apply. -->
15 | 
16 | - [ ] 🧹 Updates to the build process or auxiliary tools and libraries
17 | - [ ] 📖 Documentation (updates to the documentation or readme)
18 | - [ ] 🐞 Bug fix (a non-breaking change that fixes an issue)
19 | - [ ] 🚀 Enhancement (improving an existing functionality like performance)
20 | - [ ] ✨ New feature (a non-breaking change that adds functionality)
21 | - [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)
22 | 
23 | ### 📚 Description
24 | 
25 | <!-- Describe your changes in detail -->
26 | <!-- Why is this change required? What problem does it solve? -->
27 | <!-- If it resolves an open issue, please link to the issue here. For example "Resolves #1337" -->
28 | 
29 | ### 📝 Checklist
30 | 
31 | <!-- Put an `x` in all the boxes that apply. -->
32 | <!-- If your change requires a documentation PR, please link it appropriately -->
33 | <!-- If you're unsure about any of these, don't hesitate to ask. -->
34 | 
35 | - [ ] I have linked an issue or discussion.
36 | - [ ] I have updated the documentation accordingly.
37 | 
38 | 


--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
 1 | name: Publish Package to npmjs
 2 | on:
 3 |     release:
 4 |         types: [published]
 5 | jobs:
 6 |     build:
 7 |         runs-on: ubuntu-latest
 8 |         permissions:
 9 |             contents: read
10 |             id-token: write
11 |         steps:
12 |             - uses: actions/checkout@v4
13 |             - uses: actions/setup-node@v4
14 |               with:
15 |                   node-version: 'lts/*'
16 |                   registry-url: 'https://registry.npmjs.org'
17 |             - run: npm ci
18 |             - run: npm run build:lib
19 |             - run: npm publish --provenance --access public
20 |               env:
21 |                   NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | .DS_Store
 3 | *.local
 4 | .idea
 5 | 
 6 | # distribution files
 7 | dist
 8 | vue-toastify-*
 9 | 
10 | # Local Netlify folder
11 | .netlify
12 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | **v2.1.0** *15/03/2025*
  2 | 
  3 | Chore:
  4 | - Add a missing build step
  5 | - Convert toast container to setup for better type inference
  6 | 
  7 | Fix:
  8 | - fix typings internal to the package/demo
  9 | - fix toast sizing issue on chrome
 10 | - fix logic for getting title - respect defaultTitle setting
 11 | - added `enableHtmlInterpretation` flag enabling v-html input for the body and icon (xss risk)
 12 | - fix text legibility issue on theme generator
 13 | - fix centering issue on small screens
 14 | 
 15 | Feature:
 16 | - Add JSX support for body and icon
 17 | - updated dependencies
 18 | - added some a11y attributes
 19 | - allow overwriting built in methods with `customNotifications`
 20 | 
 21 | **v2.0.1** *11/09/2024*
 22 | 
 23 | Chore:
 24 | - Add a missing build step
 25 | 
 26 | **v2.0.0** *10/09/2024*
 27 | 
 28 | Performance:
 29 | - ***BREAKING***: removed include of all styles by default. You now have to import the base styles **AND** the theme you want to use.
 30 | - Add `will-change` for transitioning toasts too.
 31 | - Added separate exports for composables.
 32 | 
 33 | Fix:
 34 | - Fixed toast might stay on screen if the duration is very low.
 35 | 
 36 | Chore:
 37 | - Fixed eslint issues.
 38 | - Updated dependencies.
 39 | - Updated demo app styling.
 40 | - Documented nuxt usage.
 41 | 
 42 | **v2.0.0-alpha** *13/04/2023*
 43 | 
 44 | Refactor:
 45 | - Rewritten codebase using v3 of Vue, and its composition api.
 46 | - Removed support for passing in router to the plugin. (Developer can just use the callback option)
 47 | - Added pauseOnFocusLoss option to pause the timer when the window loses focus.
 48 | - Added dynamic theme creation
 49 | 
 50 | **v1.8.1** *25/11/2021*
 51 | 
 52 | Fix:
 53 | - Resolved xss vulnerability stemming from an url option not being encoded (#26).
 54 | 
 55 | ***
 56 | 
 57 | **v1.8.0** *05/05/2020*
 58 | 
 59 |  Feature:
 60 |  - Added a new event for when the notification is being dragged.
 61 |  - Drag event payloads now also include the position of the notification.
 62 |  - Added toastify to the vue as a static method for easier handling in vuex.
 63 | 
 64 | ***
 65 | 
 66 | **v1.7.0** *28/03/2020*
 67 | 
 68 |  Feature:
 69 |  - Added vue router support to the `url` setting.
 70 |  - `getSettings()` can now return a single setting's value, given the key.
 71 | 
 72 |  Fix:
 73 |  - `changeToast` now returns `false` as expected when the toast isn't found.
 74 | 
 75 | ***
 76 | 
 77 | *v1.6.1* *11/03/2020*
 78 | 
 79 |  Fix:
 80 |  - Drag behavior fixed to the toast not only the parent element.
 81 |  - Added will change optimisation to dragging.
 82 | 
 83 | ***
 84 | 
 85 | **v1.6.0** *10/03/2020*
 86 | 
 87 |  Feature:
 88 |  - Added one type at a time option.
 89 |  - Added max number of notifications on screen option.
 90 |  - Added `getSettings()` function. (This is more verbose than `setSettings({})`)
 91 | 
 92 |  Fix:
 93 |  - Concatenated queue with toasts on `getToast` and added return value on not found.
 94 |  - Fixed positioning of the toast on singular dismiss
 95 |  - Fixed `stopLoader` when passed an array of ids
 96 | 
 97 | ***
 98 | 
 99 | *v1.5.2* *20/01/2020*
100 | 
101 |  Fix:
102 |  - Fixed width issue with long content on leave transition.
103 | 
104 | ***
105 | 
106 | *v1.5.1* *20/01/2020*
107 | 
108 |  Fix:
109 |  - Added extra check for icon selection.
110 | 
111 | ***
112 | 
113 | **v1.5.0** *19/01/2020*
114 | 
115 |  Fix:
116 |  - Added the return statement to the custom notification methods
117 |  - Fixed the setSettings when using with falsy value.
118 |  - Added logic to delay the notification move on removal
119 |  - Fixed transition positions
120 |  - Added more style namespaces and a whitelist pattern
121 | 
122 |  Feature:
123 |  - Added draggable option to dismiss toast by dragging.
124 |  - Added function to listen for events emitted by the notifications.
125 | 
126 | ***
127 | 
128 | **v1.4.0** *03/01/2020*
129 | 
130 |  Fix:
131 |  - Removed bodyMaxWidth from props and added to the styles
132 |  - Updated adding feature to return id instead of currently showing toasts if it is in singular mode.
133 |  - Removed prototype builtins.
134 |  - Added missing checks for notification coming from server.
135 |  - Added packages for testing.
136 |  - Styling adjustment for the notification content
137 | 
138 |  Feature:
139 |  - Added sass functions for easier theme creation
140 |  - Added option for accepting icons in object format
141 | 
142 | ***
143 | 
144 | *v1.3.1* *27/12/2019*
145 | 
146 |  Fix:
147 |  - Removed polyfills from bundle
148 | 
149 | ***
150 | 
151 | **v1.3.0** *27/12/2019*
152 | 
153 |  Fix:
154 |  - Container now ignores clicks thanks to `pointer-events: none;`
155 |  - Better responsiveness added to the toasts
156 |  - Fixed notification timeout close logic
157 |  - General refactor for maintainability
158 |  - The status' title attribute will no longer get capitalised (Sorry I didn't see major bump version justified)
159 | 
160 |  Feature:
161 |  - Moved transition into group transition for using the FLIP technique
162 |  - Added notification display ordering option
163 |  - Plugin now accepts custom transitions
164 | 
165 | ***
166 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 nandi95
 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## <p align="center">🔥Vue Toastify🔥</p>
  2 | <p align="center">Simple and dependency-free notification plugin.</p>
  3 | 
  4 | ## Installation
  5 | 
  6 | ```bash
  7 | npm i vue-toastify
  8 | ```
  9 | 
 10 | ```ts
 11 | import { createApp } from 'vue';
 12 | import plugin from 'vue-toastify';
 13 | // base styles
 14 | import 'vue-toastify/index.css';
 15 | // theme styles
 16 | import 'vue-toastify/themes/dark.css';
 17 | import type { Settings } from 'vue-toastify';
 18 | 
 19 | const app = createApp({  });
 20 | app.use<Settings>(plugin, {  });
 21 | app.mount('#app');
 22 | ```
 23 | 
 24 | [Usage with Nuxt](#usage-with-nuxt)
 25 | 
 26 | ## Options:
 27 |  - [ToastOptions](src/type.ts#L195) - settings per toast
 28 |  - [Settings](src/type.ts#L113) - global settings (default settings [here](src/composables/useSettings.ts#L7))
 29 |  - [ToastPluginAPI](src/composables/useToast.ts#L13) - methods available on the `useToast()` composable
 30 |  - [Events](src/composables/useVtEvents.ts#L6) - events emitted by the plugin
 31 | 
 32 | ## Migration Information
 33 | 
 34 | In the future `enableHtmlInterpretation` setting will default to `false`. If you rely on that behavior, make sure to enable it in the settings. If you don't want user input treated as html, make sure to set it to `false`.
 35 | 
 36 | ## Custom styling
 37 | Styles include a `'dark'`(default) and a `'light'` theme. If you would like to create your own styles you may use the following helpers:
 38 | 
 39 | ```ts
 40 | import { createVtTheme, getCssRules } from 'vue-toastify';
 41 | 
 42 | // this will create a stylesheet if doesn't exists and insert it into the head
 43 | createVtTheme('myThemeName', '#8f6b42');
 44 | // then you can set the theme of the status or the global settings
 45 | // alternatively, you can get an array of css rules using getCssRules
 46 | getCssRules('myThemeName', '#8f6b42').forEach(rule => {...});
 47 | // this will give you a good starting point to customise the theme
 48 | ```
 49 | 
 50 | ## Custom notifications
 51 | You may create some methods on the `useToast()` so it will shortcut any repetition you may have in your app. To register them add a `customNotifications` key to the settings when registering the plugin.
 52 | 
 53 | ```ts
 54 | app.use<Settings>(plugin, {
 55 |     customNotifications: {
 56 |         authenticationError: {
 57 |             body: 'Authentication error',
 58 |             // ... rest of the toast options here
 59 |         }
 60 |     }
 61 | });
 62 | // then later you can use it as
 63 | useToast().authenticationError();
 64 | ```
 65 | 
 66 | ## Ambient declaration for custom notifications
 67 | 
 68 | ```ts
 69 | import type { ToastPluginAPI, CustomMethods } from 'vue-toastify';
 70 | 
 71 | declare module 'vue-toastify' {
 72 |     interface MyMethods extends CustomMethods {
 73 |         authenticationError(): string;
 74 |     }
 75 | 
 76 |     function useToast(): ToastPluginAPI & MyMethods;
 77 | }
 78 | ```
 79 | 
 80 | ## Events
 81 | The plugin emits events that you can listen to which allows for using callbacks at different points in the toast's lifecycle.
 82 | 
 83 | ```ts
 84 | import { useVtEvents, useToast } from 'vue-toastify';
 85 | 
 86 | const toast = useToast().success({ body: 'Hello world', canTimeout: true });
 87 | 
 88 | useVtEvents().once('vtPaused', payload => {
 89 |     if (payload.id === toast.id) {
 90 |         // do something
 91 |     }
 92 | })
 93 | ```
 94 | 
 95 | ### Usage with Nuxt
 96 | The recommended way to install is by creating a plugin. As notifications are expected to be responses to user actions, we can lazy load the plugin to reduce the initial bundle size.
 97 | 
 98 | Be sure
 99 | to familiarise yourself with the [Nuxt plugin documentation](https://nuxt.com/docs/guide/directory-structure/plugins).
100 | 
101 | ```ts
102 | // plugins/toast.client.ts
103 | // .client will only run the plugin on the client side.
104 | import type { Settings } from 'vue-toastify';
105 | 
106 | export default defineNuxtPlugin({
107 |     name: 'toast',
108 |     // can load the same time as the rest of the plugins
109 |     parallel: true,
110 |     setup: nuxt => {
111 |         // this will lazy load the plugin therefore won't be included in the entry point
112 |         void import('vue-toastify').then(exports => {
113 |             nuxt.vueApp.use<Settings>(exports.default, {
114 |                 pauseOnHover: true,
115 |                 theme: 'light',
116 |                 position: 'top-right'
117 |             });
118 |         });
119 |     }
120 | });
121 | 
122 | ```
123 | Then specify the auto-imported preset in your configuration.
124 | ```ts
125 | // nuxt.config.ts
126 | export default defineNuxtConfig({
127 |     css: [
128 |         // required base themes
129 |         'vue-toastify/index.css',
130 |         // include the theme you want to use
131 |         'vue-toastify/themes/light.css'
132 |         // or generate one of your own as described in the custom styling section
133 |     ],
134 |     imports: {
135 |         // this will include the composables that the plugin provides
136 |         // which is negligable in size compared to the plugin itself
137 |         presets: [
138 |             {
139 |                 from: 'vue-toastify',
140 |                 imports: [
141 |                     // include only the composables you need auto-imported
142 |                     'useToast',
143 |                     // 'useVtEvents',
144 |                     // 'useVtSettings'
145 |                 ]
146 |             }
147 |         ]
148 |     },
149 | })
150 | ```
151 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" data-theme="emerald">
 3 | <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vue Toastify</title>
 8 |     <script>
 9 |           if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
10 |               document.documentElement.dataset.theme = 'dim';
11 |           }
12 |     </script>
13 | </head>
14 | <body>
15 | <div id="app"></div>
16 | <script type="module" src="/src/main.ts"></script>
17 | </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "vue-toastify",
 3 |     "version": "2.1.0",
 4 |     "license": "MIT",
 5 |     "type": "module",
 6 |     "author": "Nandor Kraszlan",
 7 |     "scripts": {
 8 |         "dev": "vite",
 9 |         "build:demo": "vite build",
10 |         "serve": "vite preview",
11 |         "lint": "eslint . --fix --ext .ts,.vue,.tsx",
12 |         "build:lib": "vite build --mode=library && tsc -p tsconfig.build.json"
13 |     },
14 |     "module": "dist/index.mjs",
15 |     "main": "dist/index.cjs",
16 |     "exports": {
17 |         ".": {
18 |             "types": "./dist/types/src/index.d.ts",
19 |             "import": "./dist/index.mjs",
20 |             "require": "./dist/index.cjs"
21 |         },
22 |         "./useToast": {
23 |             "types": "./dist/types/src/composables/useToast.d.ts",
24 |             "import": "./dist/useToast.mjs",
25 |             "require": "./dist/useToast.cjs"
26 |         },
27 |         "./useVtEvents": {
28 |             "types": "./dist/types/src/composables/useVtEvents.d.ts",
29 |             "import": "./dist/useVtEvents.mjs",
30 |             "require": "./dist/useVtEvents.cjs"
31 |         },
32 |         "./useVtSetting": {
33 |             "types": "./dist/types/src/composables/useSetting.d.ts",
34 |             "import": "./dist/useVtEvents.mjs",
35 |             "require": "./dist/useVtEvents.cjs"
36 |         },
37 |         "./index.css": "./dist/index.css",
38 |         "./themes/dark.css": "./dist/themes/dark.css",
39 |         "./themes/light.css": "./dist/themes/light.css"
40 |     },
41 |     "types": "dist/types/src/index.d.ts",
42 |     "files": [
43 |         "dist"
44 |     ],
45 |     "repository": {
46 |         "type": "git",
47 |         "url": "git+https://github.com/nandi95/vue-toastify.git"
48 |     },
49 |     "dependencies": {
50 |         "vue": "^3.0.11"
51 |     },
52 |     "devDependencies": {
53 |         "@rollup/plugin-commonjs": "^28.0.3",
54 |         "@rollup/plugin-typescript": "^12.1.2",
55 |         "@stylistic/eslint-plugin-ts": "^2.8.0",
56 |         "@tailwindcss/forms": "^0.5.3",
57 |         "@typescript-eslint/eslint-plugin": "^8.5.0",
58 |         "@typescript-eslint/parser": "^8.5.0",
59 |         "@vitejs/plugin-vue": "^5.1.3",
60 |         "@vue/compiler-sfc": "^3.0.5",
61 |         "@vue/eslint-config-typescript": "^13.0.0",
62 |         "autoprefixer": "^10.2.5",
63 |         "daisyui": "^4.12.10",
64 |         "eslint": "^8.24.0",
65 |         "eslint-plugin-import": "^2.22.1",
66 |         "eslint-plugin-vue": "^9.5.1",
67 |         "postcss": "^8.2.8",
68 |         "rollup": "^4.21.2",
69 |         "rollup-plugin-vue": "^6.0.0",
70 |         "sass": "^1.78.0",
71 |         "tailwindcss": "^3.1.8",
72 |         "typescript": "^5.0.2",
73 |         "vite": "^6.2.2",
74 |         "vite-plugin-static-copy": "^2.3.0",
75 |         "vue-router": "^4.1.6"
76 |     },
77 |     "keywords": [
78 |         "vue",
79 |         "toast",
80 |         "notification",
81 |         "vue3",
82 |         "alert",
83 |         "vue-toastify",
84 |         "vue-toast",
85 |         "snackbar",
86 |         "toast-notification",
87 |         "notice",
88 |         "toastify",
89 |         "toast-component",
90 |         "toast-plugin",
91 |         "toastify-component",
92 |         "vue-notification"
93 |     ]
94 | }
95 | 


--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     plugins: {
3 |         tailwindcss: {},
4 |         autoprefixer: {},
5 |     }
6 | }
7 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nandi95/vue-toastify/18c8daf2992c6b8f88f1a45a9f1f533573e562cf/public/favicon.ico


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="bg-gradient-to-br from-base-100/25 to-base-300/75 pb-2 min-h-screen">
  3 |         <header class="navbar flex-wrap sm:flex-nowrap bg-base-300/20 mb-10">
  4 |             <div class="navbar-start">
  5 |                 <AppThemeToggle />
  6 |             </div>
  7 |             <div class="w-full order-first sm:w-auto sm:order-1 navbar-center flex justify-center text-center flex-col
  8 |                         flex-no-wrap">
  9 |                 <h2 class="text-primary font-bold text-3xl mb-2">
 10 |                     Vue Toastify
 11 |                 </h2>
 12 |                 <p class="text-base-content">
 13 |                     A fuss free notification component.
 14 |                 </p>
 15 |             </div>
 16 |             <div class="navbar-end order-last">
 17 |                 <a href="https://github.com/nandi95/vue-toastify/">
 18 |                     <svg width="98"
 19 |                          height="96"
 20 |                          style="transform: scale(35%)"
 21 |                          class="text-gray-500"
 22 |                          xmlns="http://www.w3.org/2000/svg">
 23 |                         <path fill-rule="evenodd"
 24 |                               fill="currentColor"
 25 |                               clip-rule="evenodd"
 26 |                               d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059
 27 |                      3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59
 28 |                      2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015
 29 |                      4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378
 30 |                      3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778
 31 |                      5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1
 32 |                      12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97
 33 |                      11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548
 34 |                      3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52
 35 |                      33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
 36 |                     </svg>
 37 |                 </a>
 38 |             </div>
 39 |         </header>
 40 |         <main class="px-2">
 41 |             <div class="flex gap-2 xl:justify-center justify-around flex-wrap flex-row">
 42 |                 <div class="flex flex-col w-auto sm:max-w-50 sm:mr-2">
 43 |                     <AppStatusDisplay :status="status" />
 44 |                     <div class="w-full mx-auto">
 45 |                         <AppInput v-model="status.title" name="title" label="Title" />
 46 |                         <AppTextarea v-model="status.body"
 47 |                                      name="body"
 48 |                                      :label="jsx ? 'JSX string body' : 'Body'" />
 49 |                         <AppSelect v-model="status.type"
 50 |                                    name="type"
 51 |                                    label="Type"
 52 |                                    :options="typeOptions"
 53 |                                    :disabled="status.mode === 'loader' || status.mode === 'prompt'" />
 54 |                         <AppSelect v-model="status.mode"
 55 |                                    name="mode"
 56 |                                    label="Mode"
 57 |                                    :options="modeOptions"
 58 |                                    @change="disableProps" />
 59 |                         <AppTextarea v-if="status.mode === 'prompt'"
 60 |                                      v-model="answers"
 61 |                                      name="answers"
 62 |                                      label="Answers"
 63 |                                      :error="jsonError"
 64 |                                      placeholder="eg.: &apos;{&quot;Yes&quot;:true,&quot;No&quot;:false}&apos;"
 65 |                                      @update:model-value="updateAnswers" />
 66 |                     </div>
 67 |                 </div>
 68 |                 <div class="w-full sm:w-1/2 xl:w-1/4 sm:max-w-50 sm:ml-2">
 69 |                     <div class="w-1/2 md:mx-auto lg:w-2/3 xl:w-1/2 mt-12 md:mt-0 mb-12 space-y-1">
 70 |                         <AppToggle v-model="status.pauseOnHover"
 71 |                                    :disabled="!status.canTimeout"
 72 |                                    label="Can be Paused"
 73 |                                    @change="checkTimingProps" />
 74 |                         <AppToggle v-model="status.canTimeout"
 75 |                                    label="Can Timeout"
 76 |                                    @change="
 77 |                                        checkTimingProps();
 78 |                                        disableProps();
 79 |                                    " />
 80 |                         <AppToggle v-model="status.defaultTitle" label="Use Default Title" @change="disableProps" />
 81 |                         <AppToggle v-model="lightTheme" label="Use Light Theme" />
 82 |                         <AppToggle v-model="withBackdrop" label="With Backdrop" />
 83 |                         <AppToggle v-model="singular" label="One notification at a time" @change="checkIfLoading" />
 84 |                         <AppToggle v-model="oneTypeAtAtime"
 85 |                                    :disabled="singular"
 86 |                                    label="One type at a time"
 87 |                                    @change="checkIfLoading" />
 88 |                         <AppToggle v-model="jsx" label="Use JSX" />
 89 |                         <AppToggle v-model="status.enableHtmlInterpretation" label="Allow HTML" />
 90 |                     </div>
 91 |                     <div class="flex flex-col justify-around w-full">
 92 |                         <AppInput v-model="status.duration"
 93 |                                   name="duration"
 94 |                                   label="Duration"
 95 |                                   :disabled="!status.canTimeout"
 96 |                                   placeholder="ms"
 97 |                                   type="number"
 98 |                                   min="1"
 99 |                                   step="1" />
100 |                         <AppTextarea v-model="status.icon"
101 |                                      name="icon"
102 |                                      label="Icon"
103 |                                      :placeholder="
104 |                                          status.enableHtmlInterpretation ?
105 |                                              'Html is expected' :
106 |                                              'icon className'"
107 |                                      :disabled="jsx" />
108 |                     </div>
109 |                 </div>
110 |             </div>
111 |             <div class="flex justify-around items-center align-middle flex-wrap mt-2">
112 |                 <button v-if="status.mode === 'loader'" class="btn btn-primary" @click="loadStop">
113 |                     Call .stopLoader()
114 |                 </button>
115 |                 <button class="btn btn-primary my-4 md:my-0" @click="addToast">
116 |                     Toastify!
117 |                 </button>
118 |             </div>
119 |         </main>
120 |         <transition name="warning">
121 |             <div v-if="showWarning"
122 |                  class="bg-gray-200 rounded-lg shadow-lg px-4 py-3 warning absolute text-center"
123 |                  style="z-index: 51">
124 |                 <h3 class="font-bold">
125 |                     With backdrop the rest of the page is inaccessible.
126 |                 </h3>
127 |                 <h4 class="text-sm mb-3">
128 |                     Make sure to also cancel the loading if your process has failed.
129 |                 </h4>
130 |                 <button class="btn btn-primary" @click="loadStop">
131 |                     Call .stopLoader()
132 |                 </button>
133 |             </div>
134 |         </transition>
135 |     </div>
136 | </template>
137 | 
138 | <script lang="ts">
139 | import { defineComponent, markRaw, onMounted, reactive, ref, watch, h } from 'vue';
140 | import { ToastOptions } from './type';
141 | import { useToast } from './index';
142 | import AppToggle from './app-components/AppToggle.vue';
143 | import AppInput from './app-components/AppInput.vue';
144 | import AppSelect from './app-components/AppSelect.vue';
145 | import AppTextarea from './app-components/AppTextarea.vue';
146 | import AppStatusDisplay from './app-components/AppStatusDisplay.vue';
147 | import { isObject } from './utils';
148 | import AppThemeToggle from './app-components/AppThemeToggle.vue';
149 | 
150 | export default defineComponent({
151 |     name: 'App',
152 |     components: { AppThemeToggle, AppStatusDisplay, AppTextarea, AppSelect, AppInput, AppToggle },
153 | 
154 |     setup: () => {
155 |         const status = reactive<
156 |             Omit<ToastOptions, 'body' | 'icon' | 'duration'> & { body: string; icon?: string; duration?: string }
157 |         >({
158 |             title: 'Toastified!',
159 |             body: 'This is the body.',
160 |             type: undefined,
161 |             pauseOnHover: false,
162 |             canTimeout: false,
163 |             defaultTitle: true,
164 |             duration: undefined,
165 |             icon: undefined,
166 |             mode: undefined,
167 |             answers: undefined,
168 |             enableHtmlInterpretation: true
169 |         });
170 |         const lightTheme = ref(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
171 |         const defaultTitle = ref(true);
172 |         const withBackdrop = ref(false);
173 |         const singular = ref(false);
174 |         const body = ref(null);
175 |         const showWarning = ref(false);
176 |         const toast = useToast();
177 |         const jsonError = ref('');
178 |         const modeOptions = markRaw([
179 |             { value: '', text: 'Leave empty', selected: true },
180 |             { value: 'prompt', text: 'Prompt', selected: false },
181 |             { value: 'loader', text: 'Loader', selected: false }
182 |         ]);
183 |         const typeOptions = markRaw([
184 |             { value: '', text: 'Leave empty', selected: true },
185 |             { value: 'info', text: 'Info', selected: false },
186 |             { value: 'success', text: 'Success', selected: false },
187 |             { value: 'warning', text: 'Warning', selected: false },
188 |             { value: 'error', text: 'Error', selected: false }
189 |         ]);
190 |         const answers = ref('{"Yes":true,"No":false}');
191 |         const oneTypeAtAtime = ref(false);
192 |         const jsx = ref(false);
193 | 
194 |         const updateAnswers = (val: string) => {
195 |             if (!val) {
196 |                 return 'Required';
197 |             }
198 | 
199 |             let object;
200 |             // '{"Yes":true,"No":false}' => {Yes: true, No: false
201 |             try {
202 |                 object = JSON.parse(val);
203 |             } catch (e) {
204 |                 jsonError.value = 'Must be a valid JSON';
205 |                 return;
206 |             }
207 | 
208 |             if (!isObject(object)) {
209 |                 jsonError.value = 'Must be a valid object';
210 |                 return;
211 |             }
212 | 
213 |             if (Object.keys(object).length < 2) {
214 |                 jsonError.value = 'At least 2 answers are required';
215 |                 return;
216 |             }
217 | 
218 |             status.answers = object;
219 |         };
220 | 
221 |         watch(() => answers.value, updateAnswers);
222 | 
223 |         onMounted(() => {
224 |             addToast();
225 |         });
226 | 
227 |         watch(
228 |             () => withBackdrop.value,
229 |             (val) => {
230 |                 if (val && toast.getToasts().find((t) => t.mode === 'loader')) {
231 |                     showWarning.value = true;
232 |                 }
233 |                 toast.settings({ withBackdrop: val });
234 |             }
235 |         );
236 |         watch(
237 |             () => lightTheme.value,
238 |             (val) => toast.settings({ theme: val ? 'light' : 'dark' }),
239 |             { immediate: true }
240 |         );
241 |         watch(
242 |             () => defaultTitle.value,
243 |             (val) => {
244 |                 toast.settings({ defaultTitle: val });
245 |             }
246 |         );
247 |         watch(
248 |             () => singular.value,
249 |             (val) => {
250 |                 toast.settings({ singular: val });
251 |             }
252 |         );
253 |         watch(
254 |             () => oneTypeAtAtime.value,
255 |             (val) => {
256 |                 toast.settings({ oneType: val });
257 |             }
258 |         );
259 | 
260 |         const addToast = () => {
261 |             const options: ToastOptions = {
262 |                 ...status,
263 |                 duration: status.duration ? Number(status.duration) : undefined
264 |             };
265 |             if (status.mode === 'prompt' && jsonError.value.length) {
266 |                 toast.error(jsonError.value, '😠');
267 |             } else {
268 |                 if (jsx.value) {
269 |                     options.body = h('div', null, [
270 |                         h('p', null, 'This is a JSX element. HTML in the body text will be escaped.'),
271 |                         h('p', null, status.body)
272 |                     ]);
273 |                     options.icon = h(
274 |                         'div',
275 |                         {
276 |                             style: {
277 |                                 padding: '5px',
278 |                                 border: '2px solid currentColor',
279 |                                 display: 'flex',
280 |                                 justifyContent: 'space-around',
281 |                                 alignItems: 'center'
282 |                             }
283 |                         },
284 |                         'jsx'
285 |                     );
286 |                 }
287 |                 toast.notify(options);
288 |                 if (status.mode === 'loader' && withBackdrop.value) {
289 |                     showWarning.value = true;
290 |                 }
291 |             }
292 |         };
293 |         const checkTimingProps = () => {
294 |             if (!status.canTimeout) {
295 |                 status.duration = undefined;
296 |                 status.pauseOnHover = false;
297 |             }
298 |         };
299 |         const disableProps = () => {
300 |             if (status.mode === 'prompt' || status.mode === 'loader') {
301 |                 status.duration = undefined;
302 |                 status.defaultTitle = false;
303 |                 status.pauseOnHover = false;
304 |                 status.canTimeout = false;
305 |                 status.type = undefined;
306 |             }
307 |         };
308 |         const loadStop = () => {
309 |             toast.stopLoader();
310 |             showWarning.value = false;
311 |         };
312 |         const checkIfLoading = () => {
313 |             if (toast.getToasts().length < 1) {
314 |                 withBackdrop.value = false;
315 |             }
316 |         };
317 | 
318 |         return {
319 |             status,
320 |             lightTheme,
321 |             defaultTitle,
322 |             withBackdrop,
323 |             singular,
324 |             body,
325 |             showWarning,
326 |             addToast,
327 |             checkTimingProps,
328 |             disableProps,
329 |             loadStop,
330 |             checkIfLoading,
331 |             jsonError,
332 |             updateAnswers,
333 |             typeOptions,
334 |             modeOptions,
335 |             answers,
336 |             oneTypeAtAtime,
337 |             jsx
338 |         };
339 |     }
340 | });
341 | </script>
342 | 
343 | <style lang="scss">
344 | @tailwind base;
345 | @tailwind components;
346 | @tailwind utilities;
347 | 
348 | .warning {
349 |     top: 50%;
350 |     left: 50%;
351 |     transform: translate(-50%, -50%);
352 | }
353 | 
354 | .warning-enter-active {
355 |     transition: all 150ms ease-out;
356 |     transition-delay: 150ms;
357 | }
358 | 
359 | .warning-leave-active {
360 |     transition: all 100ms ease-in;
361 | }
362 | 
363 | .warning-enter-from,
364 | .warning-leave-to {
365 |     opacity: 0;
366 | }
367 | </style>
368 | 


--------------------------------------------------------------------------------
/src/app-components/AppInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <label :for="name" class="label">
 4 |             {{ label }}
 5 |         </label>
 6 |         <div class="mt-2">
 7 |             <input :id="name"
 8 |                    :value="modelValue"
 9 |                    :name="name"
10 |                    type="text"
11 |                    class="input input-bordered"
12 |                    v-bind="$attrs"
13 |                    :class="{
14 |                        'text-red-900 placeholder-text-300 ring-red-300 focus:ring-red-500': error
15 |                    }"
16 |                    @input="updateValue">
17 |         </div>
18 |         <p v-if="error" class="mt-2 text-sm text-red-600" v-text="error" />
19 |     </div>
20 | </template>
21 | 
22 | <script lang="ts">
23 | import { defineComponent } from 'vue';
24 | 
25 | export default defineComponent({
26 |     name: 'AppInput',
27 | 
28 |     inheritAttrs: false,
29 | 
30 |     props: {
31 |         modelValue: {
32 |             type: String,
33 |             default: ''
34 |         },
35 | 
36 |         label: {
37 |             type: String,
38 |             required: true
39 |         },
40 | 
41 |         name: {
42 |             type: String,
43 |             required: true
44 |         },
45 | 
46 |         error: {
47 |             type: String,
48 |             default: ''
49 |         }
50 |     },
51 | 
52 |     emits: ['update:modelValue', 'change'],
53 | 
54 |     setup(props, { emit }) {
55 |         const updateValue = (e: Event) => {
56 |             const el = e.currentTarget as HTMLInputElement;
57 |             const value = el.value;
58 |             emit('update:modelValue', value);
59 |             emit('change', value);
60 |         };
61 | 
62 |         return {
63 |             updateValue
64 |         };
65 |     }
66 | });
67 | </script>
68 | 


--------------------------------------------------------------------------------
/src/app-components/AppSelect.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <label :for="name" class="label">
 4 |             {{ label }}
 5 |         </label>
 6 |         <select :id="name"
 7 |                 :name="name"
 8 |                 :value="modelValue"
 9 |                 v-bind="$attrs"
10 |                 class="select select-bordered"
11 |                 :class="{
12 |                     'text-red-900 placeholder-text-300 ring-red-300 focus:ring-red-500': error
13 |                 }"
14 |                 @change="updateValue">
15 |             <option v-for="option in options"
16 |                     :key="option.value"
17 |                     :value="option.value"
18 |                     :selected="option.selected"
19 |                     v-text="option.text" />
20 |         </select>
21 |         <p v-if="error" class="mt-2 text-sm text-red-600" v-text="error" />
22 |     </div>
23 | </template>
24 | 
25 | <script lang="ts">
26 | import { defineComponent, PropType } from 'vue';
27 | 
28 | export default defineComponent({
29 |     name: 'AppSelect',
30 | 
31 |     inheritAttrs: false,
32 | 
33 |     props: {
34 |         modelValue: {
35 |             type: String,
36 |             default: ''
37 |         },
38 | 
39 |         options: {
40 |             type: Array as PropType<{ value: string; text: string; selected: boolean }[]>,
41 |             required: true
42 |         },
43 | 
44 |         label: {
45 |             type: String,
46 |             required: true
47 |         },
48 | 
49 |         name: {
50 |             type: String,
51 |             required: true
52 |         },
53 | 
54 |         error: {
55 |             type: String,
56 |             default: ''
57 |         }
58 |     },
59 | 
60 |     emits: ['update:modelValue', 'change'],
61 | 
62 |     setup(props, { emit }) {
63 |         const updateValue = (e: Event) => {
64 |             const el = e.currentTarget as HTMLSelectElement;
65 |             const value = el.value;
66 |             emit('update:modelValue', value);
67 |             emit('change', value);
68 |         };
69 | 
70 |         return {
71 |             updateValue
72 |         };
73 |     }
74 | });
75 | </script>
76 | 


--------------------------------------------------------------------------------
/src/app-components/AppStatusDisplay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="mockup-code max-w-lg overflow-x-auto">
 3 |         <pre data-prefix="1"><code>// status object</code></pre>
 4 |         <pre v-for="(line, i) in lines" :key="i" :data-prefix="i + 2"><code>{{ line }}</code></pre>
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script lang="ts">
 9 | import { computed, defineComponent, PropType } from 'vue';
10 | import { ToastOptions } from '../type';
11 | 
12 | export default defineComponent({
13 |     name: 'AppStatusDisplay',
14 | 
15 |     props: {
16 |         status: {
17 |             type: Object as PropType<Omit<ToastOptions, 'duration'> & {duration?: string}>,
18 |             required: true
19 |         }
20 |     },
21 | 
22 |     setup: (props) => {
23 |         const lines = computed(() => {
24 |             const clone = Object.fromEntries(Object.entries(props.status).flatMap(([key, value])=>{
25 |                 if (value===undefined || value ===false || value==='') return [];
26 |                 return [[key, value]];
27 |             }));
28 | 
29 |             return JSON.stringify(clone, null, 4)
30 |                 .split('\n')
31 |                 .map(line => line
32 |                     .replace('"', '')
33 |                     .replace('"', '')
34 |                     .replace(/"(\d+)"/g, '$1')
35 |                 );
36 |         });
37 | 
38 |         return {
39 |             lines
40 |         };
41 |     }
42 | });
43 | </script>
44 | 


--------------------------------------------------------------------------------
/src/app-components/AppTextarea.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="form-control">
 3 |         <label class="label">
 4 |             <span class="label-text">{{ label }}</span>
 5 |         </label>
 6 |         <textarea :id="name"
 7 |                   rows="4"
 8 |                   :name="name"
 9 |                   :value="modelValue"
10 |                   v-bind="$attrs"
11 |                   class="textarea textarea-bordered"
12 |                   :class="{
13 |                       'text-red-900 placeholder-text-300 ring-red-300 focus:ring-red-500': error
14 |                   }"
15 |                   @input="updateValue" />
16 |         <p v-if="error" class="mt-2 text-sm text-red-600" v-text="error" />
17 |     </div>
18 | </template>
19 | 
20 | <script lang="ts">
21 | import { defineComponent } from 'vue';
22 | 
23 | export default defineComponent({
24 |     name: 'AppTextarea',
25 | 
26 |     inheritAttrs: false,
27 | 
28 |     props: {
29 |         modelValue: {
30 |             type: String,
31 |             default: ''
32 |         },
33 | 
34 |         label: {
35 |             type: String,
36 |             required: true
37 |         },
38 | 
39 |         name: {
40 |             type: String,
41 |             required: true
42 |         },
43 | 
44 |         error: {
45 |             type: String,
46 |             default: ''
47 |         }
48 |     },
49 | 
50 |     emits: ['update:modelValue', 'change'],
51 | 
52 |     setup(props, { emit }) {
53 |         const updateValue = (e: Event) => {
54 |             const el = e.currentTarget as HTMLTextAreaElement;
55 |             const value = el.value;
56 |             emit('update:modelValue', value);
57 |             emit('change', value);
58 |         };
59 | 
60 |         return {
61 |             updateValue
62 |         };
63 |     }
64 | });
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/app-components/AppThemeToggle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <AppToggle v-model="isDark" label="Dark theme" />
 3 | </template>
 4 | 
 5 | <script lang="ts">
 6 | import { defineComponent, ref, watch } from 'vue';
 7 | import AppToggle from './AppToggle.vue';
 8 | 
 9 | export default defineComponent({
10 |     name: 'AppThemeToggle',
11 | 
12 |     components: { AppToggle },
13 | 
14 |     setup: () => {
15 |         const isDark = ref(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
16 | 
17 |         watch(
18 |             isDark,
19 |             value => document.documentElement.dataset.theme = value ? 'dim' : 'emerald'
20 |         );
21 | 
22 |         return {
23 |             isDark
24 |         };
25 |     }
26 | });
27 | </script>
28 | 


--------------------------------------------------------------------------------
/src/app-components/AppToggle.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="flex">
 3 |         <label class="cursor-pointer label">
 4 |             <input v-model="model"
 5 |                    type="checkbox"
 6 |                    :disabled="disabled"
 7 |                    class="toggle toggle-primary">
 8 |             <span class="label-text ml-2">{{ label }}</span>
 9 |         </label>
10 |     </div>
11 | </template>
12 | 
13 | <script lang="ts">
14 | import { computed, defineComponent } from 'vue';
15 | 
16 | export default defineComponent({
17 |     name: 'AppToggle',
18 | 
19 |     props: {
20 |         modelValue: {
21 |             type: Boolean,
22 |             default:false
23 |         },
24 | 
25 |         label: {
26 |             type: String,
27 |             required: true
28 |         },
29 | 
30 |         disabled: {
31 |             type: Boolean,
32 |             default: false
33 |         }
34 |     },
35 | 
36 |     emits: ['update:modelValue', 'change'],
37 | 
38 |     setup(props, { emit }) {
39 |         const model = computed({
40 |             get: () => props.modelValue,
41 |             set: (value: boolean) => {
42 |                 emit('update:modelValue', value);
43 |                 emit('change', value);
44 |             }
45 |         });
46 | 
47 |         return {
48 |             model
49 |         };
50 |     }
51 | });
52 | </script>
53 | 


--------------------------------------------------------------------------------
/src/assets/container.scss:
--------------------------------------------------------------------------------
 1 | $tinyScreen: 268px;
 2 | 
 3 | .vt-notification-container {
 4 |     pointer-events: none;
 5 |     box-sizing: border-box;
 6 |     position: fixed;
 7 |     display: flex;
 8 |     gap: 10px;
 9 |     width: auto;
10 |     height: auto;
11 |     z-index: 9999;
12 | }
13 | 
14 | .vt-backdrop-hidden {
15 |     transition: all 150ms ease-out;
16 |     opacity: 0;
17 |     visibility: hidden;
18 |     z-index: 50;
19 |     top: 0;
20 |     left: 0;
21 |     right: 0;
22 |     bottom: 0;
23 |     position: fixed;
24 | }
25 | 
26 | .vt-backdrop-visible {
27 |     opacity: 1;
28 |     visibility: visible;
29 | }
30 | 
31 | .vt-top {
32 |     top: 10px;
33 | }
34 | 
35 | .vt-centerY {
36 |     top: 50%;
37 |     transform: translateY(-50%);
38 | }
39 | 
40 | .vt-bottom {
41 |     bottom: 10px;
42 | }
43 | 
44 | .vt-left {
45 |     left: 10px;
46 | }
47 | 
48 | .vt-centerX {
49 |     left: 50%;
50 |     transform: translateX(-50%);
51 | }
52 | 
53 | .vt-right {
54 |     right: 10px;
55 | }
56 | 
57 | .vt-center-center {
58 |     top: 50%;
59 |     left: 50%;
60 |     transform: translate(-50%, -50%);
61 | }
62 | 
63 | @media (max-width: $tinyScreen) {
64 |     .vt-notification-container {
65 |         width: 100%;
66 |         margin: 0;
67 |         right: 0;
68 |         &:not(.vt-centerX) {
69 |             left: 0;
70 |         }
71 |     }
72 | }
73 | 


--------------------------------------------------------------------------------
/src/assets/themes/common.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:color";
 2 | @use "sass:map";
 3 | @use "sass:math";
 4 | 
 5 | @function luminance($color) {
 6 |     $colors: (
 7 |         'red': color.channel($color, "red", $space: rgb),
 8 |         'green': color.channel($color, "green", $space: rgb),
 9 |         'blue': color.channel($color, "blue", $space: rgb)
10 |     );
11 | 
12 |     @each $name, $value in $colors {
13 |         $value: calc($value / 255);
14 | 
15 |         @if $value < 0.03928 {
16 |             $value: calc($value / 12.92);
17 |         } @else {
18 |             $value: calc(($value + .055) / 1.055);
19 |             $value: math.pow($value, 2); // todo exponent used to be 2.4
20 |         }
21 | 
22 |         $colors: map.merge($colors, ($name: $value));
23 |     }
24 | 
25 |     @return (map.get($colors, 'red') * .2126) + (map.get($colors, 'green') * .7152) + (map.get($colors, 'blue') * .0722);
26 | }
27 | @function color-change($color, $percentage) {
28 |     @if (luminance($color) > 0.4) {
29 |         $color: color.adjust($color, $lightness: -$percentage);
30 |     } @else {
31 |         $color: color.adjust($color, $lightness: $percentage);
32 |     }
33 |     @return $color;
34 | }
35 | 
36 | @mixin generate-theme($name, $color) {
37 |     .vt-theme-#{$name} {
38 |         background-color: $color;
39 |         & > .vt-progress-bar {
40 |             background-color: color-change($color, 10%);
41 |             & > .vt-progress {
42 |                 background-color: color-change($color, 30%);
43 |             }
44 |         }
45 |         & > .vt-content {
46 |             & > .vt-title {
47 |                 color: color-change($color, 75%);
48 |             }
49 |             & > .vt-paragraph {
50 |                 color: color-change($color, 75%);
51 |             }
52 |         }
53 |         & > .vt-buttons {
54 |             & > button {
55 |                 border: solid 1px color-change($color, 10%);
56 |                 background-color: color-change($color, 10%);
57 |                 color: color-change($color, 75%);
58 |                 transition: all 0.2s ease-out;
59 |                 &:hover {
60 |                     background-color: color-change($color, 65%);
61 |                     color: color-change($color, 5%);
62 |                     transition: all 0.2s ease-out;
63 |                 }
64 |             }
65 |         }
66 |         & > .vt-prompt {
67 |             & > .vt-icon > svg {
68 |                 fill: color-change($color, 70%);
69 |             }
70 |             & {
71 |                 border-color: color-change($color, 70%);
72 |             }
73 |         }
74 |         & > .vt-icon-container > .vt-spinner {
75 |             border: 2px solid color-change($color, 30%);
76 |             border-top: 2px solid color-change($color, 90%);
77 |         }
78 |     }
79 | }
80 | 


--------------------------------------------------------------------------------
/src/assets/themes/dark.scss:
--------------------------------------------------------------------------------
1 | @use "./common.scss";
2 | 
3 | @include common.generate-theme('dark', #1d1d1d);
4 | 


--------------------------------------------------------------------------------
/src/assets/themes/light.scss:
--------------------------------------------------------------------------------
1 | @use "./common";
2 | 
3 | @include common.generate-theme('light', #f0f0f0);
4 | 


--------------------------------------------------------------------------------
/src/assets/toast.scss:
--------------------------------------------------------------------------------
  1 | @use "container";
  2 | // This is all the styles the toast component uses.
  3 | // You may change any of the default values
  4 | // by appending the value with !important.
  5 | 
  6 | .vt-success {
  7 |     & > .vt-icon > svg {
  8 |         fill: #199919;
  9 |     }
 10 |     & {
 11 |         border-color: #199919;
 12 |     }
 13 | }
 14 | .vt-info {
 15 |     & > .vt-icon > svg {
 16 |         fill: #003bc8;
 17 |     }
 18 |     & {
 19 |         border-color: #003bc8;
 20 |     }
 21 | }
 22 | .vt-warning {
 23 |     & > .vt-icon > svg {
 24 |         fill: #ffb300;
 25 |     }
 26 |     & {
 27 |         border-color: #ffb300;
 28 |     }
 29 | }
 30 | .vt-error {
 31 |     & > .vt-icon > svg {
 32 |         fill: #b11414;
 33 |     }
 34 |     & {
 35 |         border-color: #b11414;
 36 |     }
 37 | }
 38 | // You may reorganise the items with the order rule
 39 | .vt-notification {
 40 |     transition: transform 100ms ease; // This ensures that on drag the notification slides back to its original position
 41 |     box-sizing: border-box;
 42 |     pointer-events: auto;
 43 |     box-shadow: 0 0 10px 0.5px rgba(0, 0, 0, 0.35);
 44 |     padding: 10px 20px;
 45 |     min-height: 100px;
 46 |     min-width: 250px;
 47 |     border-radius: 5px;
 48 |     margin-left: auto;
 49 |     margin-right: auto;
 50 |     z-index: 9999;
 51 |     display: flex;
 52 |     justify-content: space-around;
 53 |     align-items: center;
 54 |     flex-flow: wrap row;
 55 |     align-content: center;
 56 |     user-select: none;
 57 |     & > .vt-progress-bar {
 58 |         height: 3px;
 59 |         width: 100%;
 60 |         margin-bottom: 5px;
 61 |         & > .vt-progress {
 62 |             max-width: 100%;
 63 |             height: 3px;
 64 |             overflow: hidden;
 65 |             transition: max-width 1ms ease-in-out;
 66 |         }
 67 |     }
 68 |     & > .vt-content {
 69 |         width: auto;
 70 |         height: 100%;
 71 |         max-width: 250px;
 72 |         word-break: break-word;
 73 |         & > .vt-title {
 74 |             font-size: 1.4rem;
 75 |             margin: 0;
 76 |         }
 77 |         & > .vt-paragraph {
 78 |             font-size: 1rem;
 79 |             margin: 0.5rem 0;
 80 |         }
 81 |     }
 82 |     & > .vt-circle {
 83 |         border-style: solid;
 84 |         border-width: 2px;
 85 |         width: 65px;
 86 |         height: 65px;
 87 |         border-radius: 50%;
 88 |         margin: 5px !important;
 89 |     }
 90 |     & > .vt-icon-container {
 91 |         margin: 0 20px;
 92 |         position: relative;
 93 |         & > .vt-icon {
 94 |             position: absolute;
 95 |             top: 50%;
 96 |             left: 50%;
 97 |             transform: translate(-50%, -50%);
 98 |         }
 99 |     }
100 |     & > .vt-buttons {
101 |         flex-basis: 100%;
102 |         display: flex;
103 |         flex-flow: row wrap;
104 |         align-content: center;
105 |         align-items: center;
106 |         justify-content: space-evenly;
107 |         margin: 5px -23px 0;
108 |         & > button {
109 |             flex-basis: 48%;
110 |             width: auto;
111 |             margin-bottom: 4px;
112 |             border-radius: 4px;
113 |         }
114 |     }
115 | }
116 | @media (max-width: container.$tinyScreen) {
117 |     .vt-notification {
118 |         min-height: auto;
119 |         min-width: 100%;
120 |         border-radius: 0;
121 |         & > .vt-content {
122 |             text-align: center;
123 |         }
124 |     }
125 | }
126 | .vt-will-change {
127 |     will-change: transform, opacity;
128 | }
129 | 
130 | // This controls how the notification should move when others are added/removed
131 | .vt-move {
132 |     transition-timing-function: ease-in-out;
133 |     transition-property: all;
134 |     transition-duration: 200ms;
135 |     &[data-delayed="true"] {
136 |         transition-delay: 200ms !important; // this should be set to the same as the transition leave duration
137 |     }
138 | }
139 | .vt-spinner {
140 |     width: 60px;
141 |     height: 60px;
142 |     border-radius: 50%;
143 |     background-color: transparent;
144 |     animation: 1s spin linear infinite;
145 | }
146 | .vt-cursor-wait {
147 |     cursor: wait;
148 | }
149 | 
150 | @keyframes spin {
151 |     from {
152 |         -webkit-transform: rotate(0deg);
153 |         transform: rotate(0deg);
154 |     }
155 |     to {
156 |         -webkit-transform: rotate(360deg);
157 |         transform: rotate(360deg);
158 |     }
159 | }
160 | 
161 | .vt-right-enter-active,
162 | .vt-left-enter-active,
163 | .vt-bottom-enter-active,
164 | .vt-top-enter-active,
165 | .vt-center-enter-active {
166 |     transition: transform 200ms ease-out, opacity 200ms ease-out;
167 | }
168 | 
169 | .vt-right-leave-active,
170 | .vt-left-leave-active,
171 | .vt-bottom-leave-active,
172 | .vt-top-leave-active,
173 | .vt-center-leave-active {
174 |     transition: transform 200ms ease-in, opacity 200ms ease-in;
175 | }
176 | 
177 | .vt-right-enter-from,
178 | .vt-right-leave-to {
179 |     transform: translateX(50px);
180 |     opacity: 0;
181 | }
182 | 
183 | .vt-left-enter-from,
184 | .vt-left-leave-to {
185 |     transform: translateX(-50px);
186 |     opacity: 0;
187 | }
188 | 
189 | .vt-bottom-enter-from,
190 | .vt-bottom-leave-to {
191 |     transform: translateY(50px);
192 |     opacity: 0;
193 | }
194 | 
195 | .vt-top-enter-from,
196 | .vt-top-leave-to {
197 |     transform: translateY(-50px);
198 |     opacity: 0;
199 | }
200 | 
201 | .vt-center-enter-from,
202 | .vt-center-leave-to {
203 |     opacity: 0;
204 | }
205 | 


--------------------------------------------------------------------------------
/src/components/Node.ts:
--------------------------------------------------------------------------------
1 | import type { VNode } from 'vue';
2 | // This is a JSX component - Pascal-case tends to be the norm
3 | // eslint-disable-next-line @typescript-eslint/naming-convention
4 | export default function Node(props: { node: VNode | string }): VNode|string {
5 |     return props.node;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/components/ProgressBar.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="vt-progress-bar"
  3 |          :aria-valuenow="progress"
  4 |          aria-valuemin="0"
  5 |          aria-valuemax="100"
  6 |          role="progressbar">
  7 |         <div class="vt-progress" :style="{ width: progress + '%' }" />
  8 |     </div>
  9 | </template>
 10 | 
 11 | <script lang="ts">
 12 | import { defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue';
 13 | import useVtEvents from '../composables/useVtEvents';
 14 | 
 15 | export default defineComponent({
 16 |     name: 'ProgressBar',
 17 | 
 18 |     props: {
 19 |         isPaused: { type: Boolean },
 20 |         duration: { type: Number, default: 0 },
 21 |         id: { type: String, required: true }
 22 |     },
 23 | 
 24 |     emits: ['vtFinished'],
 25 | 
 26 |     expose: ['progress'],
 27 | 
 28 |     setup: (props, ctx) => {
 29 |         const progress = ref(0);
 30 |         const progressId = ref<ReturnType<typeof requestAnimationFrame>>();
 31 |         const timerId = ref<ReturnType<typeof setTimeout>>();
 32 |         // start of the timer (a constant)
 33 |         const timerStartedAt = ref(new Date());
 34 |         // initial time to calculate with on the first start
 35 |         const timerPausedAt = ref(new Date());
 36 |         // eslint-disable-next-line vue/no-setup-props-destructure
 37 |         const timerFinishesAt = ref(new Date(props.duration + Date.now()));
 38 |         const events = useVtEvents();
 39 | 
 40 |         const timerStart = () => {
 41 |             timerStartedAt.value = new Date(
 42 |                 timerStartedAt.value.getTime() + (Date.now() - timerPausedAt.value.getTime())
 43 |             );
 44 | 
 45 |             // new future date = future date + elapsed time since pausing
 46 |             timerFinishesAt.value = new Date(
 47 |                 timerFinishesAt.value.getTime() + (Date.now() - timerPausedAt.value.getTime())
 48 |             );
 49 | 
 50 |             if (!timerId.value && progress.value > 0) {
 51 |                 events.emit('vtResumed', { id: props.id });
 52 |             }
 53 | 
 54 |             // set new timeout
 55 |             timerId.value = window.setTimeout(
 56 |                 () => {
 57 |                     progress.value = 100;
 58 |                     ctx.emit('vtFinished');
 59 |                 },
 60 |                 timerFinishesAt.value.getTime() - Date.now()
 61 |             );
 62 |             // animation start
 63 |             progressId.value = requestAnimationFrame(progressBar);
 64 |         };
 65 |         const timerPause = () => {
 66 |             // stop notification from closing
 67 |             window.clearTimeout(timerId.value);
 68 |             // set to null so animation won't stay in a loop
 69 |             timerId.value = undefined;
 70 |             // stop loader animation from progressing
 71 |             cancelAnimationFrame(progressId.value!);
 72 |             progressId.value = undefined;
 73 |             events.emit('vtPaused', { id: props.id });
 74 |             timerPausedAt.value = new Date();
 75 |         };
 76 |         const progressBar = () => {
 77 |             if (progress.value < 100) {
 78 |                 const wholeTime = timerFinishesAt.value.getTime() - timerStartedAt.value.getTime();
 79 |                 const elapsed = Date.now() - timerStartedAt.value.getTime();
 80 | 
 81 |                 progress.value = elapsed / wholeTime * 100;
 82 | 
 83 |                 // if the timer is running
 84 |                 if (timerId.value) {
 85 |                     progressId.value = requestAnimationFrame(progressBar);
 86 |                 }
 87 |             } else {
 88 |                 cancelAnimationFrame(progressId.value!);
 89 |                 progressId.value = undefined;
 90 |             }
 91 |         };
 92 | 
 93 |         watch(() => props.isPaused, boolean => boolean ? timerPause(): timerStart());
 94 | 
 95 |         onMounted(() => {
 96 |             events.emit('vtStarted', { id: props.id });
 97 |             timerStart();
 98 |         });
 99 | 
100 |         onBeforeUnmount(() => {
101 |             progress.value = 0;
102 |             window.clearTimeout(timerId.value);
103 |             if (progressId.value) {
104 |                 cancelAnimationFrame(progressId.value);
105 |                 progressId.value = undefined;
106 |             }
107 |         });
108 | 
109 |         return {
110 |             progress
111 |         };
112 |     }
113 | });
114 | </script>
115 | 


--------------------------------------------------------------------------------
/src/components/ToastContainer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div>
  3 |         <div v-cloak
  4 |              class="vt-backdrop-hidden"
  5 |              :class="{
  6 |                  'vt-backdrop-visible': toasts.length > 0 && settings.withBackdrop
  7 |              }"
  8 |              :style="{
  9 |                  backgroundColor: settings.backdrop
 10 |              }" />
 11 |         <VtTransition class="vt-notification-container"
 12 |                       :class="positionClasses"
 13 |                       :style="flexDirection"
 14 |                       :transition="getTransition"
 15 |                       :position="settings.position">
 16 |             <VtToast v-for="status in toasts"
 17 |                      :key="status.id"
 18 |                      :status="status"
 19 |                      :delayed="!!status.delayed || false"
 20 |                      :base-icon-class="settings.baseIconClass"
 21 |                      @vt-remove="remove(status.id)" />
 22 |         </VtTransition>
 23 |     </div>
 24 | </template>
 25 | 
 26 | <script lang="ts">
 27 | export default {
 28 |     name:'VueToastify'
 29 | };
 30 | </script>
 31 | 
 32 | <script setup lang="ts">
 33 | // todo backdrop to transition with dragging if that's the only one left in the toasts and next isn't queued?
 34 | // todo: create 3 containers and create a manager that manages the queue to push to the correct container
 35 | //  (each container has 3 positions)
 36 | //  (position will be held on the status) this will allow for separated transitions
 37 | import VtToast from './VtToast.vue';
 38 | import { isBetween, isBoolean, uuidV4 } from '../utils';
 39 | import VtTransition from './VtTransition.vue';
 40 | import { computed, CSSProperties, nextTick, ref, watch } from 'vue';
 41 | import type { ContainerMethods, ToastOptions, Toast } from '../type';
 42 | import useVtEvents from '../composables/useVtEvents';
 43 | import useSettings from '../composables/useSettings';
 44 | 
 45 | const temp = {} as { orderLatest?: boolean };
 46 | 
 47 | const toasts = ref<(Toast & { delayed?: boolean })[]>([]);
 48 | const queue = ref<(Toast & { delayed?: boolean })[]>([]);
 49 | const { settings, updateSettings } = useSettings();
 50 | const events = useVtEvents();
 51 | 
 52 | /**
 53 |  * Return the appropriate transition
 54 |  * based on the position.
 55 |  */
 56 | const getTransition = computed(() => {
 57 |     if (settings.transition) {
 58 |         return settings.transition;
 59 |     }
 60 | 
 61 |     const position = settings.position.split('-');
 62 | 
 63 |     if (position[1] === 'left') {
 64 |         return 'vt-left';
 65 |     }
 66 | 
 67 |     if (position[1] === 'center') {
 68 |         return 'vt-' + position[0];
 69 |     }
 70 | 
 71 |     return 'vt-right';
 72 | });
 73 | /**
 74 |  * Return a style object for determining
 75 |  * the toasts order.
 76 |  * todo - simplify this
 77 |  */
 78 | const flexDirection = computed<CSSProperties>(() => {
 79 |     return {
 80 |         flexDirection:
 81 |             settings.orderLatest &&
 82 |             settings.position.split('-')[0] === 'bottom'
 83 |                 ? 'column'
 84 |                 : 'column-reverse'
 85 |     };
 86 | });
 87 | /**
 88 |  * Return the appropriate classes
 89 |  * based on the position.
 90 |  */
 91 | const positionClasses = computed(() => {
 92 |     const position = settings.position.split('-');
 93 |     const classes: Record<string, boolean> = {};
 94 |     if (position[0] === position[1]) {
 95 |         classes['vt-center-center'] = true;
 96 |         return classes;
 97 |     }
 98 |     classes[
 99 |         position[0] === 'center' ? 'vt-centerY' : 'vt-' + position[0]
100 |     ] = true;
101 |     classes[
102 |         position[1] === 'center' ? 'vt-centerX' : 'vt-' + position[1]
103 |     ] = true;
104 |     return classes;
105 | });
106 | 
107 | /**
108 |  * Find the toast with the given id in the toasts
109 |  * and return its index from the array
110 |  */
111 | const findToast = (id: Toast['id']) => {
112 |     return toasts.value.findIndex(toast => {
113 |         return toast.id === id;
114 |     });
115 | };
116 | /**
117 |  * Find the toast with the given id in the queue
118 |  * and return its index from the array
119 |  */
120 | const findQueuedToast = (id: Toast['id']) => {
121 |     return queue.value.findIndex(toast => {
122 |         return toast.id === id;
123 |     });
124 | };
125 | /**
126 |  * Figure out the title from the status object.
127 |  */
128 | const getTitle = (status: ToastOptions) => {
129 |     if (status.title) {
130 |         return status.title;
131 |     }
132 | 
133 |     if (status.mode === 'prompt' || status.mode === 'loader') {
134 |         return '';
135 |     }
136 | 
137 |     if (
138 |         (
139 |             isBoolean(status.defaultTitle) && status.defaultTitle
140 |             || isBoolean(settings.defaultTitle) && settings.defaultTitle
141 |         )
142 |         && status.type
143 |     ) {
144 |         return status.type.charAt(0).toUpperCase() + status.type.slice(1);
145 |     }
146 | 
147 |     return '';
148 | };
149 | /**
150 |  * Check if the toast already is being displayed.
151 |  */
152 | const arrayHasType = (status: ToastOptions) => {
153 |     return !!toasts.value.find(toast =>
154 |         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
155 |         toast.mode && toast.mode === status.mode || toast.type && toast.type === status.type
156 |     );
157 | };
158 | 
159 | /**
160 |  * Dismiss the loader for the given ids
161 |  * or all of the loaders. Return
162 |  * the count of the dismissed
163 |  * loaders.
164 |  */
165 | const stopLoader: ContainerMethods['stopLoader'] = (id) => {
166 |     const ids = [];
167 |     if (typeof id === 'string') {
168 |         ids.push(id);
169 |     } else if (Array.isArray(id)) {
170 |         ids.push(...id);
171 |     } else {
172 |         //get all loaders
173 |         ids.push(...toasts.value.filter(toast => toast.mode === 'loader').map(toast => toast.id));
174 |     }
175 |     ids.forEach(id => {
176 |         events.emit('vtLoadStop', { id: id });
177 |         remove(id);
178 |     });
179 |     return ids.length;
180 | };
181 | /**
182 |  * Add a new toast object to the toasts
183 |  * or queue respectively with all
184 |  * the parameters assigned.
185 |  * Return the uuid.
186 |  */
187 | const add: ContainerMethods['add'] = (status) => {
188 |     // copy object
189 |     const toast = Object.assign(
190 |         {},
191 |         status,
192 |         {
193 |             id: uuidV4()
194 |         }
195 |     ) as Toast; //todo update to deep copy
196 |     // if object doesn't have default values, set them
197 |     toast.duration = settings.warningInfoDuration;
198 | 
199 |     if (Number(status.duration) > 0) {
200 |         toast.duration = Number(status.duration);
201 |     } else if (status.type) {
202 |         toast.duration =
203 |             status.type === 'error'
204 |                 ? settings.errorDuration
205 |                 : status.type === 'success'
206 |                     ? settings.successDuration
207 |                     : settings.warningInfoDuration;
208 |     }
209 | 
210 |     toast.answers =
211 |         status.answers && Object.keys(status.answers).length > 0
212 |             ? status.answers
213 |             : { Yes: true, No: false };
214 |     toast.pauseOnHover = isBoolean(status.pauseOnHover)
215 |         ? status.pauseOnHover
216 |         : settings.pauseOnHover;
217 |     toast.pauseOnFocusLoss = isBoolean(status.pauseOnFocusLoss)
218 |         ? status.pauseOnFocusLoss
219 |         : settings.pauseOnFocusLoss;
220 |     toast.hideProgressbar = isBoolean(status.hideProgressbar)
221 |         ? status.hideProgressbar
222 |         : settings.hideProgressbar;
223 |     toast.title = getTitle(status);
224 |     toast.canTimeout = isBoolean(status.canTimeout)
225 |         ? status.canTimeout
226 |         : settings.canTimeout;
227 |     toast.iconEnabled = isBoolean(status.iconEnabled)
228 |         ? status.iconEnabled
229 |         : settings.iconEnabled;
230 |     toast.enableHtmlInterpretation = isBoolean(status.enableHtmlInterpretation)
231 |         ? status.enableHtmlInterpretation
232 |         : settings.enableHtmlInterpretation;
233 | 
234 |     if (status.mode === 'prompt' || status.mode === 'loader') {
235 |         toast.draggable = false;
236 |     } else {
237 |         toast.draggable = isBoolean(status.draggable)
238 |             ? status.draggable
239 |             : settings.draggable;
240 |     }
241 | 
242 |     toast.dragThreshold = status.dragThreshold && isBetween(status.dragThreshold, 0, 5)
243 |         ? status.dragThreshold
244 |         : settings.dragThreshold;
245 | 
246 |     if (status.mode === 'prompt' || status.mode === 'loader') {
247 |         toast.canTimeout = false;
248 |     }
249 | 
250 |     toast.theme = status.theme ? status.theme : settings.theme;
251 | 
252 |     if (
253 |         // if singular and there's 1 already showing
254 |         settings.singular && toasts.value.length > 0 ||
255 |         // if oneType turned on and that type already showing
256 |         settings.oneType && arrayHasType(toast) ||
257 |         // if it exceeds the max number of displayed toasts
258 |         toasts.value.length >= settings.maxToasts
259 |     ) {
260 |         if (toast.delay) {
261 |             setTimeout(() => {
262 |                 queue.value.push({ ...toast, delayed: true });
263 |             }, toast.delay);
264 |         } else {
265 |             queue.value.push({ ...toast, delayed: true });
266 |         }
267 | 
268 |         return toast.id;
269 |     }
270 | 
271 |     if (toast.delay) {
272 |         setTimeout(() => {
273 |             toasts.value.push(toast);
274 |         }, toast.delay);
275 |     } else {
276 |         toasts.value.push(toast);
277 |     }
278 | 
279 |     return toast.id;
280 | };
281 | /**
282 |  * Find the toast from the toast
283 |  * or the queue, if not found
284 |  * return false, otherwise
285 |  * return all.
286 |  */
287 | const get: ContainerMethods['get'] = (id) => {
288 |     if (id) {
289 |         return toasts.value.find(toast => toast.id === id) ?? queue.value.find(toast => toast.id === id);
290 |     }
291 | 
292 |     return [
293 |         ...toasts.value,
294 |         ...queue.value
295 |     ] as ReturnType<ContainerMethods['get']>;
296 | };
297 | /**
298 |  * Update toast by merging the
299 |  * argument and the existing status.
300 |  * Returns whether the update was
301 |  * successful or not.
302 |  */
303 | const set: ContainerMethods['set'] = (id, status) => {
304 |     const toast = get(id);
305 | 
306 |     if (!toast) {
307 |         return false;
308 |     }
309 | 
310 |     if (findToast(id) !== -1) {
311 |         toasts.value = toasts.value.map(toast => {
312 |             if (toast.id === id) {
313 |                 return Object.assign(toast, status);
314 |             }
315 | 
316 |             return toast;
317 |         });
318 |         return true;
319 |     }
320 | 
321 |     toasts.value[findQueuedToast(id)] = Object.assign(toast, status);
322 |     return true;
323 | };
324 | /**
325 |  * If id given, removes the corresponding
326 |  * toast else remove all. If id not
327 |  * found returns false, otherwise
328 |  * an array of ids currently
329 |  * visible to the user.
330 |  */
331 | const remove: ContainerMethods['remove'] = (id) => {
332 |     if (id) {
333 |         let index = findQueuedToast(id);
334 | 
335 |         if (settings.singular && index !== -1) {
336 |             queue.value.splice(index, 1)[0].callback?.();
337 | 
338 |             return 1;
339 |         }
340 | 
341 |         index = findToast(id);
342 | 
343 |         if (index !== -1) {
344 |             toasts.value.splice(index, 1)[0].callback?.();
345 | 
346 |             return 1;
347 |         }
348 | 
349 |         return 0;
350 |     }
351 | 
352 |     const removeCount = toasts.value.length + queue.value.length;
353 | 
354 |     toasts.value.forEach(toast => toast.callback?.());
355 |     queue.value.forEach(toast => toast.callback?.());
356 | 
357 |     toasts.value = [];
358 |     queue.value = [];
359 | 
360 |     return removeCount;
361 | };
362 | 
363 | watch(() => settings, (newSettings, oldSettings) => {
364 |     // if singular turned off release all queued toasts
365 |     if (!newSettings.singular) {
366 |         for (let i = 0; i < newSettings.maxToasts - 1; i++) {
367 |             if (!queue.value[i]) {
368 |                 continue;
369 |             }
370 | 
371 |             if (!arrayHasType(queue.value[i])) {
372 |                 toasts.value.push(queue.value.splice(i, 1)[0]);
373 |             }
374 |         }
375 |         if (isBoolean(temp.orderLatest)) {
376 |             updateSettings({ orderLatest: temp.orderLatest });
377 |             delete temp.orderLatest;
378 |         }
379 |         return;
380 |     }
381 | 
382 |     temp.orderLatest = oldSettings.orderLatest;
383 |     updateSettings({ orderLatest: false });
384 | });
385 | 
386 | watch(
387 |     () => toasts.value,
388 |     async newValue => {
389 |     // if there's anything at all in the queue
390 |         if (queue.value.length !== 0) {
391 |             await nextTick();
392 | 
393 |             // if singular than oneType and maxToasts isn't a concern
394 |             if (settings.singular) {
395 |             // todo - doesn't currently work with
396 |                 if (newValue.length === 0) {
397 |                     // fixme - this will re-trigger the watch?
398 |                     toasts.value.push({
399 |                         ...queue.value.shift()!,
400 |                         delayed: true
401 |                     });
402 |                 }
403 |                 return;
404 |             }
405 | 
406 |             if (settings.oneType) {
407 |                 return queue.value.forEach((status, index) => {
408 |                     if (
409 |                         !arrayHasType(status) &&
410 |                     toasts.value.length < settings.maxToasts
411 |                     ) {
412 |                         toasts.value.push({
413 |                             ...queue.value.splice(index, 1)[0],
414 |                             delayed: true
415 |                         });
416 |                     }
417 |                 });
418 |             }
419 | 
420 |             if (toasts.value.length < settings.maxToasts) {
421 |                 toasts.value.push({
422 |                     ...queue.value.shift()!,
423 |                     delayed: true
424 |                 });
425 |             }
426 |         }
427 |     },
428 |     { deep: true }
429 | );
430 | 
431 | defineExpose<ContainerMethods>({ add, get, set, remove, stopLoader });
432 | </script>
433 | 
434 | <style lang="scss">
435 | @use "../assets/toast";
436 | </style>
437 | 


--------------------------------------------------------------------------------
/src/components/VtIcon.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="vt-icon-container" :class="containerClasses">
  3 |         <template v-if="userIcon">
  4 |             <component :is="userIcon.tag"
  5 |                        v-if="userIcon.type==='icon'"
  6 |                        class="vt-icon"
  7 |                        :class="userIcon.class"
  8 |                        v-html="userIcon.ligature" />
  9 |             <div v-else class="vt-icon">
 10 |                 <Node :node="userIcon.node" />
 11 |             </div>
 12 |         </template>
 13 |         <div v-else-if="mode === 'loader'" class="vt-spinner" />
 14 |         <div v-else-if="mode === 'prompt'" class="vt-icon">
 15 |             <svg aria-hidden="true" style="width: 24px; height: 24px" viewBox="0 0 24 24">
 16 |                 <path d="M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33
 17 |                        13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33
 18 |                        13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z" />
 19 |             </svg>
 20 |         </div>
 21 |         <div v-else-if="containerClasses['vt-success']" class="vt-icon">
 22 |             <svg xmlns="http://www.w3.org/2000/svg"
 23 |                  width="36"
 24 |                  height="36"
 25 |                  aria-hidden="true"
 26 |                  viewBox="0 0 24 24">
 27 |                 <path d="M9 16.2l-3.5-3.5c-.39-.39-1.01-.39-1.4 0-.39.39-.39 1.01 0 1.4l4.19 4.19c.39.39 1.02.39 1.41
 28 |                          0L20.3 7.7c.39-.39.39-1.01 0-1.4-.39-.39-1.01-.39-1.4 0L9 16.2z" />
 29 |             </svg>
 30 |         </div>
 31 |         <div v-else-if="containerClasses['vt-error']" class="vt-icon">
 32 |             <svg xmlns="http://www.w3.org/2000/svg"
 33 |                  width="36"
 34 |                  height="36"
 35 |                  aria-hidden="true"
 36 |                  viewBox="0 0 24 24">
 37 |                 <path d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02
 38 |                          0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89
 39 |                          4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z" />
 40 |             </svg>
 41 |         </div>
 42 |         <div v-else-if="containerClasses['vt-warning']" class="vt-icon">
 43 |             <svg xmlns="http://www.w3.org/2000/svg"
 44 |                  width="36"
 45 |                  height="36"
 46 |                  aria-hidden="true"
 47 |                  viewBox="0 0 24 24">
 48 |                 <circle cx="12" cy="19" r="2" />
 49 |                 <path d="M12 3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2V5c0-1.1-.9-2-2-2z" />
 50 |             </svg>
 51 |         </div>
 52 |         <div v-else-if="containerClasses['vt-info']" class="vt-icon">
 53 |             <svg xmlns="http://www.w3.org/2000/svg"
 54 |                  style="transform: rotate(180deg)"
 55 |                  width="36"
 56 |                  aria-hidden="true"
 57 |                  height="36"
 58 |                  viewBox="0 0 24 24">
 59 |                 <path d="M12 3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2V5c0-1.1-.9-2-2-2z" />
 60 |                 <circle cx="12" cy="19" r="2" />
 61 |             </svg>
 62 |         </div>
 63 |     </div>
 64 | </template>
 65 | 
 66 | <script lang="ts">
 67 | import { isObject } from '../utils';
 68 | import { computed, defineComponent, isVNode } from 'vue';
 69 | import type { PropType, VNode } from 'vue';
 70 | import type { Icon } from '../type';
 71 | import Node from './Node';
 72 | 
 73 | export default defineComponent({
 74 |     name: 'VtIcon',
 75 |     components: { Node },
 76 | 
 77 |     props: {
 78 |         mode: { type: String },
 79 |         type: { type: String },
 80 |         icon: { type: [Object, String] as PropType<Icon | string | VNode> },
 81 |         baseIconClass: { type: String, default: '' },
 82 |         enableHtml: { type: Boolean, required: true }
 83 |     },
 84 | 
 85 | 
 86 |     setup: (props) => {
 87 |         const userIcon = computed(() => {
 88 |             if (!props.icon) {
 89 |                 return false;
 90 |             }
 91 | 
 92 |             let icon: {type: 'icon'; tag: string; ligature: string; class: string} | {type: 'node'; node: VNode} = {
 93 |                 type:'icon',
 94 |                 tag: 'i',
 95 |                 ligature: '',
 96 |                 class: props.baseIconClass
 97 |             };
 98 | 
 99 |             if (typeof props.icon === 'string') {
100 |                 if (props.enableHtml && props.icon.toLowerCase().includes('<svg')) {
101 |                     icon.tag = 'div';
102 |                     icon.ligature = props.icon;
103 |                 } else {
104 |                     icon.class = icon.class + ' ' + props.icon;
105 |                 }
106 |             } else if (isVNode(props.icon)){
107 |                 icon = { type:'node', node: props.icon };
108 |             } else if (isObject(props.icon)) {
109 |                 icon = Object.assign(icon, props.icon);
110 |             }
111 | 
112 |             return icon;
113 |         });
114 | 
115 |         const containerClasses = computed(() => {
116 |             const obj: Record<string, boolean> = {};
117 | 
118 |             if (props.mode !== 'loader') {
119 |                 obj['vt-circle'] = !props.icon;
120 |             }
121 | 
122 |             obj['vt-prompt'] = props.mode === 'prompt';
123 | 
124 |             if (props.mode === undefined || props.mode.length === 0) {
125 |                 obj['vt-' + (props.type ? props.type : 'info')] = true;
126 |             }
127 | 
128 |             return obj;
129 |         });
130 | 
131 |         return {
132 |             userIcon,
133 |             containerClasses
134 |         };
135 |     }
136 | });
137 | </script>
138 | 


--------------------------------------------------------------------------------
/src/components/VtToast.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="vt-notification"
  3 |          :role="status.type === 'error' || status.type === 'warning' ? 'alert' : 'status'"
  4 |          :style="draggableStyles"
  5 |          :class="notificationClass"
  6 |          draggable="false"
  7 |          :aria-label="status.title || `${status.type || 'info'} notification`"
  8 |          :data-delayed="delayed"
  9 |          @click="dismiss"
 10 |          @mouseenter="isHovered = true"
 11 |          @mouseleave="isHovered = false"
 12 |          @touchstart="isHovered = true"
 13 |          @touchend="isHovered = false">
 14 |         <ProgressBar v-if="isNotification && status.canTimeout"
 15 |                      v-show="!status.hideProgressbar"
 16 |                      :id="status.id"
 17 |                      ref="progressBar"
 18 |                      :duration="status.duration"
 19 |                      :is-paused="status.pauseOnHover && isHovered || !hasFocus || isDragged"
 20 |                      @vt-finished="finish" />
 21 |         <div class="vt-content">
 22 |             <h2 v-if="status.title" class="vt-title" v-text="status.title" />
 23 |             <template v-if="status.body">
 24 |                 <div v-if="isJSXBody" class="vt-paragraph">
 25 |                     <Node :node="status.body" />
 26 |                 </div>
 27 |                 <p v-else-if="status.enableHtmlInterpretation" class="vt-paragraph" v-html="status.body" />
 28 |                 <p v-else class="vt-paragraph">
 29 |                     {{ status.body }}
 30 |                 </p>
 31 |             </template>
 32 |         </div>
 33 |         <VtIcon v-if="status.iconEnabled"
 34 |                 :mode="status.mode"
 35 |                 :type="status.type"
 36 |                 :icon="status.icon"
 37 |                 :base-icon-class="baseIconClass"
 38 |                 :enable-html="status.enableHtmlInterpretation" />
 39 |         <div v-if="status.mode === 'prompt'" class="vt-buttons">
 40 |             <button v-for="(answer, i) in answers"
 41 |                     :key="i"
 42 |                     @click="respond(status.answers![answer])"
 43 |                     v-text="answer" />
 44 |         </div>
 45 |     </div>
 46 | </template>
 47 | 
 48 | <script lang="ts">
 49 | import ProgressBar from './ProgressBar.vue';
 50 | import VtIcon from './VtIcon.vue';
 51 | import useDraggable from '../composables/useDraggable';
 52 | import { computed, defineComponent, isVNode, onMounted, onUnmounted, ref } from 'vue';
 53 | import type { PropType } from 'vue';
 54 | import type { Toast } from '../type';
 55 | import useVtEvents from '../composables/useVtEvents';
 56 | import Node from './Node';
 57 | export default defineComponent({
 58 |     name: 'VtToast',
 59 | 
 60 |     components: { ProgressBar, VtIcon, Node },
 61 | 
 62 |     props: {
 63 |         status: {
 64 |             type: Object as PropType<Toast>,
 65 |             required: true
 66 |         },
 67 | 
 68 |         baseIconClass: {
 69 |             type: String,
 70 |             default: ''
 71 |         },
 72 | 
 73 |         delayed: {
 74 |             type: Boolean,
 75 |             default: false
 76 |         }
 77 |     },
 78 | 
 79 |     emits: ['vtRemove'],
 80 | 
 81 |     setup: (props, ctx) => {
 82 |         const isHovered = ref(false);
 83 |         const hasFocus = ref(true);
 84 |         const events = useVtEvents();
 85 |         const progressBar = ref<{ progress: number }>();
 86 | 
 87 |         const notificationClass = computed(() => {
 88 |             const obj: Record<string, boolean> = {};
 89 | 
 90 |             if (props.status.mode === 'loader') {
 91 |                 obj['vt-cursor-wait'] = true;
 92 |             }
 93 | 
 94 |             obj['vt-theme-' + props.status.theme] = true;
 95 | 
 96 |             return obj;
 97 |         });
 98 |         const isNotification = computed(() => ['prompt', 'loader'].indexOf(props.status.mode!) === -1);
 99 |         const isJSXBody = computed(() => isVNode(props.status.body));
100 | 
101 |         const answers = computed(() => {
102 |             return props.status.answers ? Object.keys(props.status.answers) : [];
103 |         });
104 | 
105 |         const dismiss = () => {
106 |             if (isNotification.value && !hasMoved.value) {
107 |                 events.emit('vtDismissed', { id: props.status.id });
108 |                 ctx.emit('vtRemove');
109 |             }
110 |         };
111 |         const dismissedByDrag = () => {
112 |             if (isNotification.value && hasMoved.value) {
113 |                 events.emit('vtDismissed', { id: props.status.id });
114 |                 ctx.emit('vtRemove');
115 |             }
116 |         };
117 |         const respond = (response: any) => {
118 |             events.emit('vtPromptResponse', {
119 |                 id: props.status.id,
120 |                 response: response
121 |             });
122 |             ctx.emit('vtRemove');
123 |         };
124 |         const finish = () => {
125 |             const progress = Math.ceil(progressBar.value?.progress ?? NaN);
126 | 
127 |             // if the notification has finished displaying
128 |             if (progress >= 100 && isNotification.value) {
129 |                 events.emit('vtFinished', { id: props.status.id });
130 |                 ctx.emit('vtRemove');
131 |             }
132 |         };
133 | 
134 |         const { hasMoved, draggableStyles, isDragged } = useDraggable(props, dismissedByDrag);
135 | 
136 |         const onBlur = () => hasFocus.value = false;
137 |         const onFocus = () => hasFocus.value = true;
138 | 
139 |         onMounted(() => {
140 |             if (props.status.pauseOnFocusLoss) {
141 |                 addEventListener('blur', onBlur);
142 |                 addEventListener('focus', onFocus);
143 |             }
144 |         });
145 | 
146 |         onUnmounted(() => {
147 |             if (props.status.pauseOnFocusLoss) {
148 |                 removeEventListener('blur', onBlur);
149 |                 removeEventListener('focus', onFocus);
150 |             }
151 |         });
152 | 
153 |         return {
154 |             isHovered,
155 |             notificationClass,
156 |             isNotification,
157 |             isJSXBody,
158 |             respond,
159 |             dismiss,
160 |             draggableStyles,
161 |             progressBar,
162 |             answers,
163 |             finish,
164 |             isDragged,
165 |             hasFocus
166 |         };
167 |     }
168 | });
169 | </script>
170 | 


--------------------------------------------------------------------------------
/src/components/VtTransition.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <transition-group :name="typeof transition!=='string' ? transition?.name : transition"
  3 |                       :css="true"
  4 |                       tag="div"
  5 |                       :move-class="(typeof transition!=='string' ? transition?.moveClass : null )??'vt-move'"
  6 |                       @leave="leave"
  7 |                       @before-enter="beforeEnter"
  8 |                       @after-enter="afterEnter"
  9 |                       @before-leave="beforeLeave">
 10 |         <slot />
 11 |     </transition-group>
 12 | </template>
 13 | 
 14 | <script lang="ts">
 15 | import { defineComponent, getCurrentInstance } from 'vue';
 16 | import useSettings from '../composables/useSettings';
 17 | import type { Settings, XPosition, YPosition, Position } from '../type';
 18 | import type { PropType } from 'vue';
 19 | 
 20 | export default defineComponent({
 21 |     name: 'VtTransition',
 22 | 
 23 |     props: {
 24 |         transition: {
 25 |             type: [String, Object] as PropType<Settings['transition'] | string>,
 26 |             required: true
 27 |         },
 28 | 
 29 |         position: {
 30 |             type: String as PropType<Position>,
 31 |             required: true
 32 |         }
 33 |     },
 34 | 
 35 |     setup: (props) => {
 36 |         const { settings } = useSettings();
 37 |         const instance = getCurrentInstance();
 38 | 
 39 |         const leave = (el: Element) => {
 40 |             if (
 41 |                 settings.singular ||
 42 |                 settings.oneType && el.parentNode!.childNodes.length === 1
 43 |                 || !(el instanceof HTMLElement)
 44 |             ) {
 45 |                 return;
 46 |             }
 47 |             const position = props.position.split('-') as [YPosition, XPosition];
 48 |             // https://forum.vuejs.org/t/transition-group-move-class-not-occuring-in-the-array/6381/5
 49 |             // these rules ensure the toast stays where it is
 50 |             const { height, width, marginBottom } = window.getComputedStyle(el);
 51 |             // Add a tiny bit extra to account for fractional pixels being lopped off
 52 |             const widthPx = parseFloat(width) + 0.01;
 53 | 
 54 |             // when the last toast removed the container collapses hence the need for the width subtraction
 55 |             el.style.left =
 56 |                 String(el.offsetLeft - (el.parentNode!.childNodes.length === 1 ? widthPx / 2 : 0)) + 'px';
 57 |             el.style.top = String(el.offsetTop) + 'px';
 58 | 
 59 |             if (position[0] === 'center') {
 60 |                 el.style.top =
 61 |                     String(parseInt(el.style.top) -
 62 |                     parseInt(height) / 2 -
 63 |                     parseInt(marginBottom) / 2) +
 64 |                     'px';
 65 |             }
 66 | 
 67 |             if (position[0] === 'bottom') {
 68 |                 el.style.top =
 69 |                     String(parseInt(el.style.top) - parseInt(height) - parseInt(marginBottom)) + 'px';
 70 |             }
 71 | 
 72 |             // an absolute position may mess with the width, so let's set to initial
 73 |             el.style.width = `${widthPx}px`;
 74 |             el.style.position = 'absolute';
 75 |         };
 76 | 
 77 |         const beforeEnter = (el: Element) => {
 78 |             if (!(el instanceof HTMLElement)) return;
 79 |             const toastContainer = instance?.vnode.el as HTMLDivElement;
 80 | 
 81 |             for (let i = 0; i < toastContainer.children.length; i++) {
 82 |                 delete (toastContainer.children.item(i) as HTMLDivElement).dataset.delayed;
 83 |             }
 84 | 
 85 |             if (el.dataset.delayed) {
 86 |                 el.classList.add('vt-move', 'vt-will-change');
 87 |             }
 88 |         };
 89 | 
 90 |         const afterEnter = (el: Element) => {
 91 |             if (!(el instanceof HTMLElement)) return;
 92 |             el.removeAttribute('data-delayed');
 93 |             el.classList.remove('vt-move', 'vt-will-change');
 94 |         };
 95 | 
 96 |         const beforeLeave = (el: Element) => {
 97 |             if (!(el instanceof HTMLElement)) return;
 98 |             el.classList.add('vt-will-change');
 99 | 
100 |             // this ensures that notifications won't move until the other has been removed
101 |             for (let i = 0; i < el.parentNode!.childNodes.length; i++) {
102 |                 if (el.parentNode!.childNodes[i].isSameNode(el)) {
103 |                     continue;
104 |                 }
105 | 
106 |                 (el.parentElement!.children[i] as HTMLDivElement).dataset.delayed = 'true';
107 |             }
108 |         };
109 | 
110 |         return {
111 |             beforeEnter,
112 |             afterEnter,
113 |             beforeLeave,
114 |             leave
115 |         };
116 |     }
117 | });
118 | </script>
119 | 


--------------------------------------------------------------------------------
/src/composables/createVtTheme.ts:
--------------------------------------------------------------------------------
  1 | function hexToHSL(hex: string): { h: number; s: number; l: number } {
  2 |     // Remove # if present
  3 |     hex = hex.replace(/^#/, '');
  4 | 
  5 |     // Parse hex to RGB
  6 |     const r = parseInt(hex.slice(0, 2), 16) / 255;
  7 |     const g = parseInt(hex.slice(2, 4), 16) / 255;
  8 |     const b = parseInt(hex.slice(4, 6), 16) / 255;
  9 | 
 10 |     const max = Math.max(r, g, b);
 11 |     const min = Math.min(r, g, b);
 12 |     let h = 0, s = 0;
 13 |     const l = (max + min) / 2;
 14 | 
 15 |     if (max !== min) {
 16 |         const d = max - min;
 17 |         s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
 18 | 
 19 |         switch (max) {
 20 |             case r: h = (g - b) / d + (g < b ? 6 : 0); break;
 21 |             case g: h = (b - r) / d + 2; break;
 22 |             case b: h = (r - g) / d + 4; break;
 23 |         }
 24 | 
 25 |         h /= 6;
 26 |     }
 27 | 
 28 |     return { h, s, l };
 29 | }
 30 | 
 31 | function hslToHex(h: number, s: number, l: number): string {
 32 |     let r, g, b;
 33 | 
 34 |     if (s === 0) {
 35 |         r = g = b = l;
 36 |     } else {
 37 |         const hue2rgb = (p: number, q: number, t: number): number => {
 38 |             if (t < 0) t += 1;
 39 |             if (t > 1) t -= 1;
 40 |             if (t < 1/6) return p + (q - p) * 6 * t;
 41 |             if (t < 1/2) return q;
 42 |             if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
 43 |             return p;
 44 |         };
 45 | 
 46 |         const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
 47 |         const p = 2 * l - q;
 48 | 
 49 |         r = hue2rgb(p, q, h + 1/3);
 50 |         g = hue2rgb(p, q, h);
 51 |         b = hue2rgb(p, q, h - 1/3);
 52 |     }
 53 | 
 54 |     const toHex = (x: number): string => {
 55 |         const hex = Math.round(x * 255).toString(16);
 56 |         return hex.length === 1 ? '0' + hex : hex;
 57 |     };
 58 | 
 59 |     return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 60 | }
 61 | 
 62 | function darken(color: string, percentage: number): string {
 63 |     const hsl = hexToHSL(color);
 64 |     hsl.l = Math.max(0, hsl.l - percentage / 100);
 65 |     return hslToHex(hsl.h, hsl.s, hsl.l);
 66 | }
 67 | 
 68 | function lighten(color: string, percentage: number): string {
 69 |     const hsl = hexToHSL(color);
 70 |     hsl.l = Math.min(1, hsl.l + percentage / 100);
 71 |     return hslToHex(hsl.h, hsl.s, hsl.l);
 72 | }
 73 | 
 74 | function luminance(color: string): number {
 75 |     const colors = {
 76 |         red: parseInt(color.slice(1, 3), 16),
 77 |         green: parseInt(color.slice(3, 5), 16),
 78 |         blue: parseInt(color.slice(5, 7), 16)
 79 |     };
 80 | 
 81 |     for (const [name, value] of Object.entries(colors)) {
 82 |         let normalizedValue = value / 255;
 83 | 
 84 |         if (normalizedValue < 0.03928) {
 85 |             normalizedValue /= 12.92;
 86 |         } else {
 87 |             // todo exponent used to be 2.4
 88 |             normalizedValue = ((normalizedValue + 0.055) / 1.055) ** 2;
 89 |         }
 90 | 
 91 |         colors[name as keyof typeof colors] = normalizedValue;
 92 |     }
 93 | 
 94 |     const redValue = colors['red'] * 0.2126;
 95 |     const greenValue = colors['green'] * 0.7152;
 96 |     const blueValue = colors['blue'] * 0.0722;
 97 | 
 98 |     return redValue + greenValue + blueValue;
 99 | }
100 | 
101 | function colorChange(color: string, amount: number): string {
102 |     return luminance(color) > 0.4 ? darken(color, amount) : lighten(color, amount);
103 | }
104 | 
105 | export function getCssRules(name: string, colour: string): string[] {
106 |     return [
107 |         `.vt-theme-${name} {
108 |             background-color: ${colour};
109 |         }`,
110 |         `.vt-theme-${name} > .vt-progress-bar {
111 |             background-color: ${colorChange(colour, 10)};
112 |         }`,
113 |         `.vt-theme-${name} > .vt-progress-bar > .vt-progress {
114 |             background-color: ${colorChange(colour, 30)};
115 |         }`,
116 |         `.vt-theme-${name} > .vt-content > .vt-title {
117 |             color: ${colorChange(colour, 75)};
118 |         }`,
119 |         `.vt-theme-${name} > .vt-content > .vt-paragraph {
120 |             color: ${colorChange(colour, 75)};
121 |         }`,
122 |         `.vt-theme-${name} > .vt-buttons > .button {
123 |             background-color: ${colorChange(colour, 10)};
124 |             color: ${colorChange(colour, 75)};
125 |             border: 1px solid ${colorChange(colour, 10)};
126 |             transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
127 |         }`,
128 |         `.vt-theme-${name} > .vt-buttons > .button:hover {
129 |             background-color: ${colorChange(colour, 65)};
130 |             color: ${colorChange(colour, 5)};
131 |             transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
132 |         }`,
133 |         `.vt-theme-${name} > .vt-prompt {
134 |             border-color: ${colorChange(colour, 70)};
135 |         }`,
136 |         `.vt-theme-${name} > .vt-prompt > .vt-icon > .svg {
137 |             fill: ${colorChange(colour, 70)};
138 |         }`,
139 |         `.vt-theme-${name} > .vt-icon-container > .vt-spinner {
140 |             border: 2px solid ${colorChange(colour, 30)};
141 |             border-top: 2px solid ${colorChange(colour, 90)};
142 |         }`
143 |     ];
144 | }
145 | 
146 | const styleSheetId = Symbol('vue-toastify-themes');
147 | 
148 | export default function createVtTheme(name: string, colour: string): void {
149 |     let style = document.getElementById(styleSheetId.toString()) as HTMLStyleElement | null;
150 | 
151 |     if (!style) {
152 |         style = document.createElement('style');
153 |         style.id = styleSheetId.toString();
154 |         document.head.appendChild(style);
155 |     }
156 | 
157 |     getCssRules(name, colour)
158 |         .forEach(rule => style.sheet!.insertRule(
159 |             rule.replaceAll('  ', '').replaceAll('\n', ' ')
160 |         ));
161 | }
162 | 


--------------------------------------------------------------------------------
/src/composables/useDraggable.ts:
--------------------------------------------------------------------------------
  1 | import { onMounted, onBeforeUnmount, getCurrentInstance, ref, computed } from 'vue';
  2 | import type { Ref, ComputedRef, CSSProperties } from 'vue';
  3 | import useVtEvents from './useVtEvents';
  4 | import { Toast } from '../type';
  5 | 
  6 | export function xPos(event: TouchEvent | MouseEvent): number {
  7 |     return 'targetTouches' in event && event.targetTouches.length > 0
  8 |         ? event.targetTouches[0].clientX
  9 |         : (event as MouseEvent).clientX;
 10 | }
 11 | export function yPos(event: TouchEvent | MouseEvent): number {
 12 |     return 'targetTouches' in event && event.targetTouches.length > 0
 13 |         ? event.targetTouches[0].clientY
 14 |         : (event as MouseEvent).clientY;
 15 | }
 16 | 
 17 | export type Coordinates = {
 18 |     x: number;
 19 |     y: number;
 20 | };
 21 | 
 22 | type Draggable = {
 23 |     hasMoved: ComputedRef<boolean>;
 24 |     draggableStyles: ComputedRef<CSSProperties>;
 25 |     isDragged: Readonly<Ref<boolean>>;
 26 | };
 27 | 
 28 | export default function useDraggable(
 29 |     props: { status: Required<Pick<Toast, 'id' | 'dragThreshold' | 'draggable'>> },
 30 |     close: () => void
 31 | ): Draggable {
 32 |     const instance = getCurrentInstance()!;
 33 |     const dragStartPos = ref<Coordinates>();
 34 |     const dragPos = ref<Coordinates>();
 35 |     const isDragged = ref(false);
 36 |     const startingClientRect = ref<DOMRect>();
 37 |     const events = useVtEvents();
 38 | 
 39 |     const element = computed(() => instance.proxy?.$el as HTMLDivElement);
 40 |     const hasMoved = computed(() => {
 41 |         return !!dragPos.value && dragStartPos.value?.x !== dragPos.value.x;
 42 |     });
 43 |     const dragXDistance = computed(() => {
 44 |         return isDragged.value ? dragPos.value!.x - dragStartPos.value!.x : 0;
 45 |     });
 46 |     const removalDistance = computed(() => {
 47 |         if (!startingClientRect.value) {
 48 |             return 15;
 49 |         }
 50 | 
 51 |         return startingClientRect.value.width * props.status.dragThreshold;
 52 |     });
 53 |     const draggableStyles = computed<CSSProperties>(() => {
 54 |         if (!isDragged.value
 55 |             || dragPos.value !== undefined
 56 |                 && dragStartPos.value !== undefined
 57 |                 && dragStartPos.value.x === dragPos.value.x
 58 |             || !hasMoved.value
 59 |         ) {
 60 |             return {};
 61 |         }
 62 | 
 63 |         let opacity = 1 - Math.abs(dragXDistance.value / removalDistance.value);
 64 |         opacity = isNaN(opacity) ? 1 : opacity;
 65 | 
 66 |         return {
 67 |             transform: `translateX(${dragXDistance.value}px)`,
 68 |             opacity: String(opacity),
 69 |             userSelect: 'none'
 70 |         };
 71 |     });
 72 | 
 73 |     const dragStarted = (event: TouchEvent | MouseEvent) => {
 74 |         element.value.classList.add('vt-will-change');
 75 |         isDragged.value = true;
 76 |         dragStartPos.value = { x: xPos(event), y: yPos(event) };
 77 |         startingClientRect.value = element.value.getBoundingClientRect();
 78 |     };
 79 |     const beingDragged = (event: TouchEvent | MouseEvent) => {
 80 |         // prevent page scroll
 81 |         event.preventDefault();
 82 |         if (isDragged.value) {
 83 |             dragPos.value = { x: xPos(event), y: yPos(event) };
 84 |             if (!hasMoved.value) {
 85 |                 events.emit('vtDragStarted', {
 86 |                     id: props.status.id,
 87 |                     position: dragStartPos.value!
 88 |                 });
 89 |             } else {
 90 |                 events.emit('vtBeingDragged', {
 91 |                     id: props.status.id,
 92 |                     position: dragPos.value
 93 |                 });
 94 |             }
 95 |         }
 96 |     };
 97 |     const dragFinished = () => {
 98 |         if (hasMoved.value) {
 99 |             events.emit('vtDragFinished', {
100 |                 id: props.status.id,
101 |                 position: dragPos.value!
102 |             });
103 |             // todo if at least 75% of the notification is out of the window (in case of mobile)
104 |             // eslint-disable-next-line @typescript-eslint/no-unused-vars
105 |             const isAlmostOffRight =
106 |                 element.value.getBoundingClientRect().right > window.innerWidth &&
107 |                 element.value.getBoundingClientRect().right - window.innerWidth >
108 |                 startingClientRect.value!.width * 0.75;
109 |             // eslint-disable-next-line @typescript-eslint/no-unused-vars
110 |             const isAlmostOffLeft =
111 |                 element.value.getBoundingClientRect().right < startingClientRect.value!.width * 0.25;
112 |             // todo - if they dragging with high speed then the removal distance can be shortened somewhat
113 |             if (
114 |                 Math.abs(startingClientRect.value!.left - element.value.getBoundingClientRect().left) >
115 |                 removalDistance.value
116 |             ) {
117 |                 close();
118 |             }
119 |             isDragged.value = false;
120 |             // execute after the next event cycle
121 |             setTimeout(() => {
122 |                 dragPos.value = undefined;
123 |                 dragStartPos.value = undefined;
124 |                 startingClientRect.value = undefined;
125 |                 element.value.classList.remove('vt-will-change');
126 |             });
127 |         }
128 |     };
129 | 
130 |     if (props.status.draggable) {
131 |         onMounted(() => {
132 |             element.value.addEventListener('touchstart', dragStarted);
133 |             element.value.addEventListener('mousedown', dragStarted);
134 |             addEventListener('touchmove', beingDragged);
135 |             addEventListener('mousemove', beingDragged);
136 |             addEventListener('touchend', dragFinished);
137 |             addEventListener('mouseup', dragFinished);
138 |         });
139 |         onBeforeUnmount(() => {
140 |             element.value.removeEventListener('touchstart', dragStarted);
141 |             element.value.removeEventListener('mousedown', dragStarted);
142 |             removeEventListener('touchmove', beingDragged);
143 |             removeEventListener('mousemove', beingDragged);
144 |             removeEventListener('touchend', dragFinished);
145 |             removeEventListener('mouseup', dragFinished);
146 |         });
147 |     }
148 | 
149 |     return {
150 |         hasMoved,
151 |         draggableStyles,
152 |         isDragged
153 |     };
154 | }
155 | 


--------------------------------------------------------------------------------
/src/composables/useSettings.ts:
--------------------------------------------------------------------------------
 1 | import type { Settings } from '../type';
 2 | import { reactive, readonly } from 'vue';
 3 | 
 4 | type DefaultSettings = Omit<Required<Settings>, 'transition'> & Pick<Settings, 'transition'>;
 5 | 
 6 | const settings = reactive<DefaultSettings>({
 7 |     singular: false,
 8 |     withBackdrop: false,
 9 |     backdrop: 'rgba(0, 0, 0, 0.2)',
10 |     position: 'bottom-right',
11 |     defaultTitle: true,
12 |     canTimeout: true,
13 |     pauseOnHover: false,
14 |     pauseOnFocusLoss: true,
15 |     iconEnabled: true,
16 |     draggable: true,
17 |     dragThreshold: 0.75,
18 |     hideProgressbar: false,
19 |     errorDuration: 8000,
20 |     successDuration: 4000,
21 |     warningInfoDuration: 6000,
22 |     theme: 'dark',
23 |     baseIconClass: '',
24 |     orderLatest: true,
25 |     transition: undefined,
26 |     oneType: false,
27 |     maxToasts: 6,
28 |     customNotifications: {},
29 |     enableHtmlInterpretation: true
30 | });
31 | 
32 | type UseSettings = {
33 |     settings: DefaultSettings;
34 |     updateSettings: <T extends keyof Settings | Settings>(
35 |         key: T,
36 |         value?: T extends keyof Settings ? Settings[T] : never
37 |     ) => Settings;
38 | };
39 | 
40 | /**
41 |  * Base settings applying plugin wide.
42 |  */
43 | export default function useSettings(): UseSettings {
44 |     return {
45 |         settings: readonly(settings) as DefaultSettings,
46 |         updateSettings: (key, newSettings) => {
47 |             let settingsNew = {} as Settings;
48 | 
49 |             if (typeof key === 'object' && newSettings === undefined) {
50 |                 settingsNew = key;
51 |             } else if (typeof key === 'string') {
52 |                 settingsNew = { [key]: newSettings };
53 |             }
54 | 
55 |             return readonly(Object.assign(settings, settingsNew)) as Settings;
56 |         }
57 |     };
58 | }
59 | 


--------------------------------------------------------------------------------
/src/composables/useToast.ts:
--------------------------------------------------------------------------------
  1 | import type { ContainerMethods, Settings, Status, Toast, ToastOptions } from '../type';
  2 | import useSettings from './useSettings';
  3 | import useVtEvents from './useVtEvents';
  4 | import { isBody } from '../utils';
  5 | 
  6 | export type CustomMethods = Record<string, (status?: Status, title?: string) => string>;
  7 | 
  8 | export interface ToastPluginAPI {
  9 |     notify: (status: Status, title?: string) => Toast['id'];
 10 |     success: (status: Status, title?: string) => Toast['id'];
 11 |     info: (status: Status, title?: string) => Toast['id'];
 12 |     warning: (status: Status, title?: string) => Toast['id'];
 13 |     error: (status: Status, title?: string) => Toast['id'];
 14 |     loader: (status: Status, title?: string) => Toast['id'];
 15 |     prompt: <T>(status: Omit<ToastOptions, 'mode' | 'answers'> & { answers: Record<string, T> }) => Promise<T>;
 16 |     updateToast: (id: Toast['id'], status: ToastOptions) => boolean;
 17 |     settings: (settings?: Settings) => Settings;
 18 |     findToast: <T extends Toast['id']>(id: T) => Toast | undefined;
 19 |     getToasts: () => Toast[];
 20 |     stopLoader: (id?: Toast['id']) => number;
 21 |     remove: (id?: Toast['id']) => number;
 22 | }
 23 | 
 24 | // @ts-expect-error
 25 | //eslint-disable-next-line prefer-const
 26 | export let app: { container: ContainerMethods } = {};
 27 | 
 28 | const notify = (status: Status, title?: string): ReturnType<ToastPluginAPI['notify']> => {
 29 |     if (isBody(status)) {
 30 |         status = {
 31 |             body: status
 32 |         };
 33 |     }
 34 |     if (title) {
 35 |         status.title = title;
 36 |     }
 37 |     if (!status.type) {
 38 |         status.type = 'success';
 39 |     }
 40 |     return app.container.add(status);
 41 | };
 42 | 
 43 | export const toastMethods: ToastPluginAPI = {
 44 |     notify,
 45 |     success: (status: Status, title?: string) => notify(status, title),
 46 |     info: (status: Status, title?: string) => {
 47 |         if (isBody(status)) {
 48 |             status = {
 49 |                 body: status
 50 |             };
 51 |         }
 52 |         if (title) {
 53 |             status.title = title;
 54 |         }
 55 |         status.type = 'info';
 56 |         return notify(status);
 57 |     },
 58 |     warning: (status: Status, title?: string) => {
 59 |         if (isBody(status)) {
 60 |             status = {
 61 |                 body: status
 62 |             };
 63 |         }
 64 |         if (title) {
 65 |             status.title = title;
 66 |         }
 67 |         status.type = 'warning';
 68 |         return notify(status);
 69 |     },
 70 |     error: (status: Status, title?: string) => {
 71 |         const notification = {} as ToastOptions;
 72 | 
 73 |         if (isBody(status)) {
 74 |             notification.body = status;
 75 |         }
 76 | 
 77 |         if (title) {
 78 |             notification.title = title;
 79 |         }
 80 | 
 81 |         notification.type = 'error';
 82 | 
 83 |         return notify(notification);
 84 |     },
 85 |     loader: (status: Status, title?: string) => {
 86 |         if (isBody(status)) {
 87 |             status = {
 88 |                 body: status
 89 |             };
 90 |         }
 91 |         if (title) {
 92 |             status.title = title;
 93 |         }
 94 |         status.mode = 'loader';
 95 |         return notify(status);
 96 |     },
 97 |     prompt: async <T>(status: Omit<ToastOptions, 'mode' | 'answers'> & { answers: Record<string, T> }) => {
 98 |         (status as ToastOptions).mode = 'prompt';
 99 | 
100 |         const events = useVtEvents();
101 |         const toastId = app.container.add(status);
102 | 
103 |         return new Promise<T>(resolve => {
104 |             events.once('vtPromptResponse', payload => {
105 |                 if (payload.id === toastId) {
106 |                     resolve(payload.response as T);
107 |                 }
108 |             });
109 |         });
110 |     },
111 |     stopLoader(id?: Toast['id']): number {
112 |         return app.container.stopLoader(id);
113 |     },
114 |     findToast(id?: Toast['id']): Toast | undefined {
115 |         return app.container.get(id);
116 |     },
117 |     getToasts(): Toast[] {
118 |         return app.container.get() as unknown as Toast[];
119 |     },
120 |     updateToast(id: Toast['id'], status: ToastOptions): boolean {
121 |         return app.container.set(id, status);
122 |     },
123 |     remove(id?: Toast['id']): number {
124 |         return app.container.remove(id);
125 |     },
126 |     settings(settings?: Settings): Settings {
127 |         const settingsComposable = useSettings();
128 | 
129 |         return settings ? settingsComposable.updateSettings(settings) : settingsComposable.settings;
130 |     }
131 | };
132 | 
133 | export default function useToast(): ToastPluginAPI {
134 |     return toastMethods;
135 | }
136 | 


--------------------------------------------------------------------------------
/src/composables/useVtEvents.ts:
--------------------------------------------------------------------------------
 1 | import type { Coordinates } from './useDraggable';
 2 | 
 3 | /**
 4 |  * Event name mapping to the payload of the type.
 5 |  */
 6 | type EventMap = {
 7 |     vtDragFinished: { id: string; position: Coordinates };
 8 |     vtBeingDragged: { id: string; position: Coordinates };
 9 |     vtDragStarted: { id: string; position: Coordinates };
10 |     vtDismissed: { id: string };
11 |     vtStarted: { id: string };
12 |     vtFinished: { id: string };
13 |     vtLoadStop: { id: string };
14 |     vtPromptResponse: { id: string; response: any };
15 |     vtPaused: { id: string };
16 |     vtResumed: { id: string };
17 | };
18 | 
19 | export type EventName = keyof EventMap;
20 | 
21 | type Events = {
22 |     on: <T extends EventName>(event: T, callback: (payload: EventMap[T]) => void) => void;
23 |     once: <T extends EventName>(event: T, callback: (payload: EventMap[T]) => void) => void;
24 |     off: <T extends EventName>(event: T, callback?: (payload: EventMap[T]) => void) => void;
25 |     emit: <T extends EventName>(event: T, payload: EventMap[T]) => void;
26 | };
27 | 
28 | const events: Record<keyof EventMap, CallableFunction[]> = {
29 |     vtDragFinished: [],
30 |     vtBeingDragged: [],
31 |     vtDragStarted: [],
32 |     vtDismissed: [],
33 |     vtStarted: [],
34 |     vtFinished: [],
35 |     vtLoadStop: [],
36 |     vtPromptResponse: [],
37 |     vtPaused: [],
38 |     vtResumed: []
39 | };
40 | 
41 | export default function useVtEvents(): Events {
42 |     return {
43 |         on(event, callback) {
44 |             if (!events[event]) {
45 |                 events[event] = [];
46 |             }
47 | 
48 |             events[event].push(callback);
49 |         },
50 |         once(event, callback) {
51 |             const onceCallback = (payload: EventMap[typeof event]) => {
52 |                 callback(payload);
53 |                 this.off(event, onceCallback);
54 |             };
55 | 
56 |             this.on(event, onceCallback);
57 |         },
58 |         off(event, callback) {
59 |             if (!events[event]) {
60 |                 return;
61 |             }
62 | 
63 |             if (callback) {
64 |                 events[event] = events[event].filter(cb => cb !== callback);
65 |             } else {
66 |                 events[event] = [];
67 |             }
68 |         },
69 |         emit(event, payload) {
70 |             if (!events[event]) {
71 |                 return;
72 |             }
73 | 
74 |             events[event].forEach(callback => callback(payload));
75 |         }
76 |     };
77 | }
78 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import useVtEvents from './composables/useVtEvents';
 2 | import plugin from './plugin';
 3 | import useToast from './composables/useToast';
 4 | import { default as useVtSettings } from './composables/useSettings';
 5 | import createVtTheme, { getCssRules } from './composables/createVtTheme';
 6 | 
 7 | export type { Settings, ToastOptions, Status } from './type';
 8 | export type { ToastPluginAPI, CustomMethods } from './composables/useToast';
 9 | 
10 | export {
11 |     useVtEvents,
12 |     useToast,
13 |     useVtSettings,
14 |     createVtTheme,
15 |     getCssRules
16 | };
17 | 
18 | export default plugin;
19 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue';
 2 | import App from './App.vue';
 3 | import plugin from './index';
 4 | import type { Settings } from './type';
 5 | import './assets/toast.scss';
 6 | import './assets/themes/dark.scss';
 7 | import './assets/themes/light.scss';
 8 | 
 9 | createApp(App).use<Settings>(plugin, {}).mount('#app');
10 | 


--------------------------------------------------------------------------------
/src/plugin.ts:
--------------------------------------------------------------------------------
 1 | import type { InjectionKey, Plugin } from 'vue';
 2 | import type { ContainerMethods, Settings, Status, ToastOptions } from './type';
 3 | import { createApp } from 'vue';
 4 | // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
 5 | // @ts-ignore - the shim is not being picked up by the build ts config, and we don't want to deliver the shim either
 6 | import ToastContainer from './components/ToastContainer.vue';
 7 | import { toastMethods, app } from './composables/useToast';
 8 | import useSettings from './composables/useSettings';
 9 | import { isBody } from './utils';
10 | 
11 | const pluginInjectionKey: InjectionKey<any> = Symbol('vue-toastify');
12 | const plugin: Plugin = (_, settings: Settings = {}) => {
13 |     useSettings().updateSettings(settings);
14 | 
15 |     const mountPoint = document.createElement('div');
16 |     mountPoint.setAttribute('id', pluginInjectionKey.toString());
17 |     document.body.appendChild(mountPoint);
18 | 
19 |     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
20 |     app.container = createApp(ToastContainer).mount(mountPoint) as unknown as ContainerMethods;
21 | 
22 |     if (
23 |         settings.customNotifications &&
24 |             Object.entries(settings.customNotifications).length > 0
25 |     ) {
26 |         Object.entries(settings.customNotifications).forEach(keyValArr => {
27 |             Object.defineProperty(toastMethods, keyValArr[0], {
28 |                 get() {
29 |                     return (status: Status, title?: string) => {
30 |                         let toast: ToastOptions = Object.assign({}, keyValArr[1]);
31 | 
32 |                         if (isBody(status)) {
33 |                             toast.body = status;
34 |                         } else {
35 |                             toast = { ...keyValArr[1], ...status };
36 |                         }
37 | 
38 |                         if (title) {
39 |                             toast.title = title;
40 |                         }
41 | 
42 |                         if (!toast.type) {
43 |                             toast.type = 'success';
44 |                         }
45 | 
46 |                         return app.container.add(toast);
47 |                     };
48 |                 }
49 |             });
50 |         });
51 |     }
52 | };
53 | 
54 | export default plugin;
55 | 


--------------------------------------------------------------------------------
/src/shims/vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |     import type { DefineComponent } from 'vue';
3 |     const component: DefineComponent;
4 |     export default component;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/type.ts:
--------------------------------------------------------------------------------
  1 | import type { VNode } from 'vue';
  2 | 
  3 | export type XPosition = 'left' | 'center' | 'right';
  4 | export type YPosition = 'top' | 'center' | 'bottom';
  5 | export type Position = `${YPosition}-${XPosition}`;
  6 | 
  7 | export type MaybeArray<T> = T | T[];
  8 | 
  9 | export interface Icon {
 10 |     /**
 11 |      * The HTML element name to use.
 12 |      */
 13 |     tag?: keyof HTMLElementTagNameMap;
 14 |     /**
 15 |      * The HTML to use.
 16 |      */
 17 |     ligature?: string;
 18 | }
 19 | 
 20 | /**
 21 |  * Settings that can be applied to both toasts and global settings.
 22 |  */
 23 | export interface BaseSettings {
 24 |     /**
 25 |      * Whether the toast disappears after a time.
 26 |      *
 27 |      * @default true
 28 |      */
 29 |     canTimeout?: boolean;
 30 | 
 31 |     /**
 32 |      * Whether the toast can be paused by hovering over the toast.
 33 |      *
 34 |      * @default true
 35 |      */
 36 |     pauseOnHover?: boolean;
 37 | 
 38 |     /**
 39 |      * Whether a default title should be shown if no title is supplied.
 40 |      *
 41 |      * @default true
 42 |      */
 43 |     defaultTitle?: boolean;
 44 | 
 45 |     /**
 46 |      * Whether the progressbar should be shown on the notification or not.
 47 |      *
 48 |      * @default false
 49 |      */
 50 |     hideProgressbar?: boolean;
 51 | 
 52 |     /**
 53 |      * The theme that should be displaying.
 54 |      * By default, there's `light` and `dark` theme.
 55 |      *
 56 |      * @default 'dark'
 57 |      */
 58 |     // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 59 |     theme?: 'light' | 'dark' | string;
 60 | 
 61 |     /**
 62 |      * If string supplied this will apply the usual transition classes (e.g.: .name-enter-active).
 63 |      * If an object is supplied, it expects a `name` and optionally a `moveClass`
 64 |      *   (this class has to use `!important` for its rules) attribute.
 65 |      * The name will be applied as above. The move class is applied when the notifications adjust their position.
 66 |      */
 67 |     transition?: string | { name: string; moveClass?: string };
 68 | 
 69 |     /**
 70 |      * If set to false, no icon will be shown on the notification.
 71 |      *
 72 |      * @default true
 73 |      */
 74 |     iconEnabled?: boolean;
 75 | 
 76 |     /**
 77 |      * Whether to enable dismissing the notification by dragging or not.
 78 |      *
 79 |      * @default true
 80 |      */
 81 |     draggable?: boolean;
 82 | 
 83 |     /**
 84 |      * A number between 0-5 representing how far the notification should be dragged to dismiss.
 85 |      *
 86 |      * @default 0.75
 87 |      */
 88 |     // todo - 5 is probably an option for too high value
 89 |     dragThreshold?: number;
 90 | 
 91 |     /**
 92 |      * Whether the toast should pause when the window loses focus.
 93 |      *
 94 |      * @default true
 95 |      */
 96 |     pauseOnFocusLoss?: boolean;
 97 | 
 98 |     /**
 99 |      * If set to true, the string body and string icon of a toast can be interpreted as HTML directly.
100 |      *
101 |      * **Warning**: This is a potential avenue for XSS issues,
102 |      * so use sanitisers (e.g. dompurify) when putting user input in toasts if you have this enabled.
103 |      *
104 |      * - For the body, any string will be treated as HTML.
105 |      * - For the icon, if the string has `<svg` in it, then it will be treated as HTML
106 |      * otherwise it will be treated as the `className`.
107 |      *
108 |      * @default true - This will be changed to `false` in a later release for security reasons
109 |      */
110 |     enableHtmlInterpretation?: boolean;
111 | }
112 | 
113 | export interface Settings extends BaseSettings {
114 |     /**
115 |      * Only display one toast at a time.
116 |      */
117 |     singular?: boolean;
118 | 
119 |     /**
120 |      * Whether new notifications should display on top of the stack or not.
121 |      *
122 |      * @default true
123 |      */
124 |     orderLatest?: boolean;
125 | 
126 |     /**
127 |      * Show a backdrop that blocks the rest of the page.
128 |      *
129 |      * @default false
130 |      */
131 |     withBackdrop?: boolean;
132 | 
133 |     /**
134 |      * The colour of the backdrop.
135 |      *
136 |      * @default rgba(0, 0, 0, 0.2)
137 |      */
138 |     backdrop?: string;
139 | 
140 |     /**
141 |      * The position of the toast.
142 |      *
143 |      * @default bottom-right
144 |      */
145 |     position?: Position;
146 | 
147 |     /**
148 |      * The duration in milliseconds the error notification should be visible for.
149 |      *
150 |      * @default 8000
151 |      */
152 |     errorDuration?: number;
153 | 
154 |     /**
155 |      * The duration in milliseconds the success notification should be visible for.
156 |      *
157 |      * @default 4000
158 |      */
159 |     successDuration?: number;
160 | 
161 |     /**
162 |      * The duration in milliseconds the warning and info notification should be visible for.
163 |      *
164 |      * @default 6000
165 |      */
166 |     warningInfoDuration?: number;
167 | 
168 |     /**
169 |      * If string is set, this will be appended to every user-supplied icon's class.
170 |      */
171 |     baseIconClass?: string;
172 | 
173 |     /**
174 |      * Defines how many toasts should be visible at a time. Others are queued.
175 |      *
176 |      * @default 6
177 |      */
178 |     maxToasts?: number;
179 | 
180 |     /**
181 |      * If turned on, only toasts with unique mode/type will be shown.
182 |      * Others are queued.
183 |      *
184 |      * @default false
185 |      */
186 |     oneType?: boolean;
187 | 
188 |     customNotifications?: Record<string, ToastOptions>;
189 | }
190 | 
191 | export type ToastBody = string | VNode;
192 | 
193 | export type ToastIcon = string | Icon | VNode;
194 | 
195 | export interface ToastOptions extends BaseSettings {
196 |     /**
197 |      * The time the notification is displayed for in milliseconds regardless of its type. (this cannot be updated later)
198 |      */
199 |     duration?: number;
200 | 
201 |     /**
202 |      * String to display, JSX, or alternatively an HTML string.
203 |      */
204 |     body?: ToastBody;
205 | 
206 |     /**
207 |      * Title to display for the toast.
208 |      */
209 |     title?: string;
210 | 
211 |     /**
212 |      * Defines what notification type should be showing available types:
213 |      * "success", "warning", "info", "error".
214 |      *
215 |      * @default 'success'
216 |      */
217 |     type?: 'info' | 'warning' | 'error' | 'success';
218 | 
219 |     /**
220 |      * If set, the notification will be shown in the given mode: loader, prompt.
221 |      * Alternatively, you may use the methods: `useToast().loader("more readable")`
222 |      */
223 |     mode?: 'loader' | 'prompt';
224 | 
225 |     /**
226 |      * If the type is prompt, the object keys will display to the user and the value will be returned to the promise.
227 |      *
228 |      * @default {{ Yes: true, No: false }}
229 |      */
230 |     answers?: Record<string, any>;
231 | 
232 |     /**
233 |      * This will be displayed instead of the default icons.
234 |      * If is a string the string will be assigned to the class unless it is a svg.
235 |      */
236 |     icon?: ToastIcon;
237 | 
238 |     /**
239 |      * This function will be called when the notification has been dismissed or the timeout has finished.
240 |      */
241 |     callback?: CallableFunction;
242 | 
243 |     /**
244 |      * Delay the notification by the given number of milliseconds.
245 |      */
246 |     delay?: number;
247 | }
248 | 
249 | export type Status = ToastBody | ToastOptions;
250 | 
251 | export type RequireSome<T, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;
252 | 
253 | export interface Toast extends RequireSome<ToastOptions, Exclude<keyof BaseSettings, 'customNotifications'>> {
254 |     /**
255 |      * v4 uuid.
256 |      */
257 |     id: string;
258 | }
259 | 
260 | export type ContainerMethods = {
261 |     /**
262 |      * Add new toast.
263 |      * @param status
264 |      */
265 |     add: (status: ToastOptions) => Toast['id'];
266 |     /**
267 |      * Remove toast by id or all toasts (queued included) if no id given.
268 |      * @param id
269 |      */
270 |     remove: (id?: Toast['id']) => number;
271 |     /**
272 |      * Get toast by id or all toasts (queued included) if no id given.
273 |      * @param id
274 |      */
275 |     get: <T extends Toast['id']>(id?: T) => T extends undefined ? Toast[] : Toast | undefined;
276 |     /**
277 |      * Update toast by id.
278 |      * @param id
279 |      * @param toast
280 |      */
281 |     set: (id: string, toast: ToastOptions) => boolean;
282 |     /**
283 |      * Stop the loader toast by id or all loaders if no id given.
284 |      * @param id
285 |      */
286 |     stopLoader: (id?: MaybeArray<Toast['id']>) => number;
287 | };
288 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | import { isVNode } from 'vue';
 2 | import { Status, ToastBody } from './type';
 3 | 
 4 | export const isBoolean = (value: any): value is boolean => {
 5 |     return typeof value === 'boolean';
 6 | };
 7 | export function isObject<T extends Record<any, any>>(value: any): value is NonNullable<T> {
 8 |     return value !== null && typeof value === 'object' && !Array.isArray(value);
 9 | }
10 | export const isBetween = (value: number, min: number, max: number): boolean => value > min && value <= max;
11 | export const uuidV4 = (): string => {
12 |     const search = /[018]/g;
13 |     const replace = (c: any): string => {
14 |         return (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16);
15 |     };
16 | 
17 |     return '10000000-1000-4000-8000-100000000000'.replace(search, replace);
18 | };
19 | 
20 | export const isBody = (value: Status): value is ToastBody => typeof value === 'string' || isVNode(value);
21 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @type {import("@types/tailwindcss").TailwindConfig}
 3 |  */
 4 | module.exports = {
 5 |     darkMode: "class",
 6 |     content: ["./src/**/*.{ts,tsx,vue}"],
 7 |     plugins: [
 8 |         require("daisyui")
 9 |     ],
10 |     daisyui: {
11 |         themes: ['emerald', 'dim'],
12 |         logs: false
13 |     }
14 | };
15 | 


--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "./tsconfig.json",
 3 |     "compilerOptions": {
 4 |         "emitDeclarationOnly": true
 5 |     },
 6 |     "include": [
 7 |         "src/index.ts",
 8 |         "src/type.ts",
 9 |         "src/composables/useSettings.ts",
10 |         "src/composables/useToast.ts",
11 |         "src/composables/useVtEvents.ts"
12 |     ]
13 | }
14 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "target": "esnext",
 4 |         "module": "esnext",
 5 |         "declaration": true,
 6 |         "declarationDir": "dist/types",
 7 |         "rootDir": "./",
 8 |         "moduleResolution": "bundler",
 9 |         "strict": true,
10 |         "jsx": "preserve",
11 |         "sourceMap": true,
12 |         "resolveJsonModule": true,
13 |         "esModuleInterop": true,
14 |         "skipLibCheck": true,
15 |         "lib": [
16 |             "esnext",
17 |             "dom"
18 |         ],
19 |         "types": [
20 |             "vite/client"
21 |         ]
22 |     },
23 |     "include": [
24 |         "src/**/*.ts",
25 |         "src/**/*.tsx",
26 |         "src/**/*.vue",
27 |         "vite.config.ts"
28 |     ]
29 | }
30 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite';
 2 | import vue from '@vitejs/plugin-vue';
 3 | import pkg from './package.json' with { type: 'json' };
 4 | import { viteStaticCopy } from 'vite-plugin-static-copy';
 5 | import { compileString, compileStringAsync } from 'sass';
 6 | 
 7 | const banner = `
 8 | /*! ================================
 9 | ${pkg.name} v${pkg.version}
10 | (c) 2019-present ${pkg.author}
11 | Released under ${pkg.license} License
12 | ================================== */
13 | `;
14 | 
15 | export default defineConfig(({ mode }) => {
16 |     const config: Parameters<typeof defineConfig>[0] = {
17 |         plugins: [
18 |             vue(),
19 |             viteStaticCopy({
20 |                 targets: [
21 |                     {
22 |                         src: ['src/assets/themes/*.scss', '!src/assets/themes/common.scss'],
23 |                         dest: 'themes',
24 |                         rename: (fileName) => {
25 |                             return `${fileName}.css`;
26 |                         },
27 |                         transform: (content) => {
28 |                             return compileString(
29 |                                 content,
30 |                                 {
31 |                                     syntax: 'scss',
32 |                                     style: 'compressed',
33 |                                     // required to be able to resolve common.scss
34 |                                     loadPaths: ['src/assets/themes']
35 |                                 }
36 |                             ).css;
37 |                         }
38 |                     }
39 |                 ]
40 |             })
41 |         ],
42 |         define: {
43 |             // eslint-disable-next-line @typescript-eslint/naming-convention
44 |             __VUE_OPTIONS_API__: false
45 |         }
46 |     };
47 | 
48 |     if (mode === 'library') {
49 |         config.build = {
50 |             minify: true,
51 |             copyPublicDir: false,
52 |             lib: {
53 |                 entry: {
54 |                     'index': 'src/index.ts',
55 |                     'useToast': 'src/composables/useToast.ts',
56 |                     'useVtEvents': 'src/composables/useVtEvents.ts',
57 |                     'useVtSettings': 'src/composables/useSettings.ts'
58 |                 },
59 |                 name: pkg.name,
60 |                 fileName: (format, entryName) => {
61 |                     if (format === 'es') {
62 |                         return `${entryName}.mjs`;
63 |                     }
64 | 
65 |                     if (format === 'cjs') {
66 |                         return `${entryName}.cjs`;
67 |                     }
68 | 
69 |                     return `${entryName}.${format}.js`;
70 |                 }
71 |             },
72 |             rollupOptions: {
73 |                 external: ['vue'],
74 |                 output: {
75 |                     globals: {
76 |                         vue: 'Vue'
77 |                     },
78 |                     assetFileNames: assetInfo => {
79 |                         return assetInfo.names.includes('vue-toastify.css') ? 'index.css' : assetInfo.names[0];
80 |                     },
81 |                     exports: 'named',
82 |                     banner
83 |                 }
84 |             }
85 |         };
86 |     }
87 | 
88 |     return config;
89 | });
90 | 


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