New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
vue-toast-notification
Advanced tools
vue-toast-notification - npm Package Compare versions
Comparing version 3.1.1 to 3.1.2
@@ -15,3 +15,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| /***/ 661: | ||
| /***/ 772: | ||
| /***/ ((__unused_webpack_module, exports) => { | ||
@@ -105,7 +105,7 @@ | ||
| __webpack_require__.d(__webpack_exports__, { | ||
| "ToastComponent": () => (/* reexport */ Component), | ||
| "ToastPlugin": () => (/* binding */ ToastPlugin), | ||
| "ToastPositions": () => (/* reexport */ positions), | ||
| ToastComponent: () => (/* reexport */ Component), | ||
| ToastPlugin: () => (/* binding */ ToastPlugin), | ||
| ToastPositions: () => (/* reexport */ positions), | ||
| "default": () => (/* binding */ src), | ||
| "useToast": () => (/* reexport */ useToast) | ||
| useToast: () => (/* reexport */ useToast) | ||
| }); | ||
@@ -115,3 +115,3 @@ | ||
| var external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_ = __webpack_require__(976); | ||
| ;// CONCATENATED MODULE: ./node_modules/.pnpm/babel-loader@9.1.2_la66t7xldg4uecmyawueag5wkm/node_modules/babel-loader/lib/index.js!./node_modules/.pnpm/vue-loader@17.0.1_ceoavo7i67lvjzxxtqa4yhrx7m/node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/.pnpm/vue-loader@17.0.1_ceoavo7i67lvjzxxtqa4yhrx7m/node_modules/vue-loader/dist/index.js??ruleSet[1].rules[6].use[0]!./src/js/Component.vue?vue&type=template&id=f73c8b4e | ||
| ;// CONCATENATED MODULE: ./node_modules/.pnpm/babel-loader@9.1.2_@babel+core@7.22.1_webpack@5.84.1/node_modules/babel-loader/lib/index.js!./node_modules/.pnpm/vue-loader@17.1.1_@vue+compiler-sfc@3.3.4_vue@3.3.4_webpack@5.84.1/node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/.pnpm/vue-loader@17.1.1_@vue+compiler-sfc@3.3.4_vue@3.3.4_webpack@5.84.1/node_modules/vue-loader/dist/index.js??ruleSet[1].rules[6].use[0]!./src/js/Component.vue?vue&type=template&id=f73c8b4e | ||
@@ -202,3 +202,3 @@ const _hoisted_1 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_.createElementVNode)("div", { | ||
| /* harmony default export */ const bus = (eventBus); | ||
| ;// CONCATENATED MODULE: ./node_modules/.pnpm/babel-loader@9.1.2_la66t7xldg4uecmyawueag5wkm/node_modules/babel-loader/lib/index.js!./node_modules/.pnpm/vue-loader@17.0.1_ceoavo7i67lvjzxxtqa4yhrx7m/node_modules/vue-loader/dist/index.js??ruleSet[1].rules[6].use[0]!./src/js/Component.vue?vue&type=script&lang=js | ||
| ;// CONCATENATED MODULE: ./node_modules/.pnpm/babel-loader@9.1.2_@babel+core@7.22.1_webpack@5.84.1/node_modules/babel-loader/lib/index.js!./node_modules/.pnpm/vue-loader@17.1.1_@vue+compiler-sfc@3.3.4_vue@3.3.4_webpack@5.84.1/node_modules/vue-loader/dist/index.js??ruleSet[1].rules[6].use[0]!./src/js/Component.vue?vue&type=script&lang=js | ||
@@ -362,4 +362,4 @@ | ||
| // EXTERNAL MODULE: ./node_modules/.pnpm/vue-loader@17.0.1_ceoavo7i67lvjzxxtqa4yhrx7m/node_modules/vue-loader/dist/exportHelper.js | ||
| var exportHelper = __webpack_require__(661); | ||
| // EXTERNAL MODULE: ./node_modules/.pnpm/vue-loader@17.1.1_@vue+compiler-sfc@3.3.4_vue@3.3.4_webpack@5.84.1/node_modules/vue-loader/dist/exportHelper.js | ||
| var exportHelper = __webpack_require__(772); | ||
| ;// CONCATENATED MODULE: ./src/js/Component.vue | ||
@@ -366,0 +366,0 @@ |
@@ -1,1 +0,1 @@ | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define("VueToast",["vue"],e):"object"==typeof exports?exports.VueToast=e(require("vue")):t.VueToast=e(t.Vue)}(this,(t=>(()=>{"use strict";var e={661:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.default=(t,e)=>{const s=t.__vccOpts||t;for(const[t,o]of e)s[t]=o;return s}},976:e=>{e.exports=t}},s={};function o(t){var i=s[t];if(void 0!==i)return i.exports;var n=s[t]={exports:{}};return e[t](n,n.exports,o),n.exports}o.d=(t,e)=>{for(var s in e)o.o(e,s)&&!o.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};return(()=>{o.r(i),o.d(i,{ToastComponent:()=>d,ToastPlugin:()=>h,ToastPositions:()=>l,default:()=>v,useToast:()=>m});var t=o(976);const e=(0,t.createElementVNode)("div",{class:"v-toast__icon"},null,-1),s=["innerHTML"];function n(t){void 0!==t.remove?t.remove():t.parentNode?.removeChild(t)}function r(e,s,o){let i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};const n=(0,t.h)(e,s,i),r=document.createElement("div");return r.classList.add("v-toast--pending"),o.appendChild(r),(0,t.render)(n,r),n.component}class a{constructor(t,e){this.startedAt=Date.now(),this.callback=t,this.delay=e,this.timer=setTimeout(t,e)}pause(){this.stop(),this.delay-=Date.now()-this.startedAt}resume(){this.stop(),this.startedAt=Date.now(),this.timer=setTimeout(this.callback,this.delay)}stop(){clearTimeout(this.timer)}}const l=Object.freeze({TOP_RIGHT:"top-right",TOP:"top",TOP_LEFT:"top-left",BOTTOM_RIGHT:"bottom-right",BOTTOM:"bottom",BOTTOM_LEFT:"bottom-left"});var c;const u={all:c=c||new Map,on:function(t,e){var s=c.get(t);s?s.push(e):c.set(t,[e])},off:function(t,e){var s=c.get(t);s&&(e?s.splice(s.indexOf(e)>>>0,1):c.set(t,[]))},emit:function(t,e){var s=c.get(t);s&&s.slice().map((function(t){t(e)})),(s=c.get("*"))&&s.slice().map((function(s){s(t,e)}))}},p=(0,t.defineComponent)({name:"Toast",props:{message:{type:String,required:!0},type:{type:String,default:"success"},position:{type:String,default:l.BOTTOM_RIGHT,validator:t=>Object.values(l).includes(t)},duration:{type:Number,default:3e3},dismissible:{type:Boolean,default:!0},onDismiss:{type:Function,default:()=>{}},onClick:{type:Function,default:()=>{}},queue:Boolean,pauseOnHover:{type:Boolean,default:!0}},data:()=>({isActive:!1,parentTop:null,parentBottom:null,isHovered:!1}),beforeMount(){this.setupContainer()},mounted(){this.showNotice(),u.on("toast-clear",this.dismiss)},methods:{setupContainer(){if(this.parentTop=document.querySelector(".v-toast.v-toast--top"),this.parentBottom=document.querySelector(".v-toast.v-toast--bottom"),this.parentTop&&this.parentBottom)return;this.parentTop||(this.parentTop=document.createElement("div"),this.parentTop.className="v-toast v-toast--top"),this.parentBottom||(this.parentBottom=document.createElement("div"),this.parentBottom.className="v-toast v-toast--bottom");const t=document.body;t.appendChild(this.parentTop),t.appendChild(this.parentBottom)},shouldQueue(){return!!this.queue&&(this.parentTop.childElementCount>0||this.parentBottom.childElementCount>0)},dismiss(){this.timer&&this.timer.stop(),clearTimeout(this.queueTimer),this.isActive=!1,setTimeout((()=>{this.onDismiss.apply(null,arguments);const e=this.$refs.root;(0,t.render)(null,e),n(e)}),150)},showNotice(){if(this.shouldQueue())return void(this.queueTimer=setTimeout(this.showNotice,250));const t=this.$refs.root.parentElement;this.correctParent.insertAdjacentElement("afterbegin",this.$refs.root),n(t),this.isActive=!0,this.duration&&(this.timer=new a(this.dismiss,this.duration))},whenClicked(){this.dismissible&&(this.onClick.apply(null,arguments),this.dismiss())},toggleTimer(t){this.pauseOnHover&&this.timer&&(t?this.timer.pause():this.timer.resume())}},computed:{correctParent(){switch(this.position){case l.TOP:case l.TOP_RIGHT:case l.TOP_LEFT:return this.parentTop;case l.BOTTOM:case l.BOTTOM_RIGHT:case l.BOTTOM_LEFT:return this.parentBottom}},transition(){switch(this.position){case l.TOP:case l.TOP_RIGHT:case l.TOP_LEFT:return{enter:"v-toast--fade-in-down",leave:"v-toast--fade-out"};case l.BOTTOM:case l.BOTTOM_RIGHT:case l.BOTTOM_LEFT:return{enter:"v-toast--fade-in-up",leave:"v-toast--fade-out"}}}},beforeUnmount(){u.off("toast-clear",this.dismiss)}});const d=(0,o(661).default)(p,[["render",function(o,i,n,r,a,l){return(0,t.openBlock)(),(0,t.createBlock)(t.Transition,{"enter-active-class":o.transition.enter,"leave-active-class":o.transition.leave},{default:(0,t.withCtx)((()=>[(0,t.withDirectives)((0,t.createElementVNode)("div",{ref:"root",role:"alert",class:(0,t.normalizeClass)(["v-toast__item",[`v-toast__item--${o.type}`,`v-toast__item--${o.position}`]]),onMouseover:i[0]||(i[0]=t=>o.toggleTimer(!0)),onMouseleave:i[1]||(i[1]=t=>o.toggleTimer(!1)),onClick:i[2]||(i[2]=function(){return o.whenClicked&&o.whenClicked(...arguments)})},[e,(0,t.createElementVNode)("p",{class:"v-toast__text",innerHTML:o.message},null,8,s)],34),[[t.vShow,o.isActive]])])),_:1},8,["enter-active-class","leave-active-class"])}]]),m=function(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return{open(e){let s=null;"string"==typeof e&&(s=e);const o={message:s},i=Object.assign({},o,t,e);return{dismiss:r(d,i,document.body).ctx.dismiss}},clear(){u.emit("toast-clear")},success(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.open(Object.assign({},{message:t,type:"success"},e))},error(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.open(Object.assign({},{message:t,type:"error"},e))},info(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.open(Object.assign({},{message:t,type:"info"},e))},warning(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.open(Object.assign({},{message:t,type:"warning"},e))},default(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.open(Object.assign({},{message:t,type:"default"},e))}}},h={install:function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},s=m(e);t.config.globalProperties.$toast=s,t.provide("$toast",s)}},v=h})(),i})())); | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define("VueToast",["vue"],e):"object"==typeof exports?exports.VueToast=e(require("vue")):t.VueToast=e(t.Vue)}(this,(t=>(()=>{"use strict";var e={772:(t,e)=>{Object.defineProperty(e,"__esModule",{value:!0}),e.default=(t,e)=>{const s=t.__vccOpts||t;for(const[t,o]of e)s[t]=o;return s}},976:e=>{e.exports=t}},s={};function o(t){var i=s[t];if(void 0!==i)return i.exports;var n=s[t]={exports:{}};return e[t](n,n.exports,o),n.exports}o.d=(t,e)=>{for(var s in e)o.o(e,s)&&!o.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};return(()=>{o.r(i),o.d(i,{ToastComponent:()=>p,ToastPlugin:()=>m,ToastPositions:()=>a,default:()=>h,useToast:()=>d});var t=o(976);const e=(0,t.createElementVNode)("div",{class:"v-toast__icon"},null,-1),s=["innerHTML"];function n(t){void 0!==t.remove?t.remove():t.parentNode?.removeChild(t)}class r{constructor(t,e){this.startedAt=Date.now(),this.callback=t,this.delay=e,this.timer=setTimeout(t,e)}pause(){this.stop(),this.delay-=Date.now()-this.startedAt}resume(){this.stop(),this.startedAt=Date.now(),this.timer=setTimeout(this.callback,this.delay)}stop(){clearTimeout(this.timer)}}const a=Object.freeze({TOP_RIGHT:"top-right",TOP:"top",TOP_LEFT:"top-left",BOTTOM_RIGHT:"bottom-right",BOTTOM:"bottom",BOTTOM_LEFT:"bottom-left"});var l;const c={all:l=l||new Map,on:function(t,e){var s=l.get(t);s?s.push(e):l.set(t,[e])},off:function(t,e){var s=l.get(t);s&&(e?s.splice(s.indexOf(e)>>>0,1):l.set(t,[]))},emit:function(t,e){var s=l.get(t);s&&s.slice().map((function(t){t(e)})),(s=l.get("*"))&&s.slice().map((function(s){s(t,e)}))}},u=(0,t.defineComponent)({name:"Toast",props:{message:{type:String,required:!0},type:{type:String,default:"success"},position:{type:String,default:a.BOTTOM_RIGHT,validator:t=>Object.values(a).includes(t)},duration:{type:Number,default:3e3},dismissible:{type:Boolean,default:!0},onDismiss:{type:Function,default:()=>{}},onClick:{type:Function,default:()=>{}},queue:Boolean,pauseOnHover:{type:Boolean,default:!0}},data:()=>({isActive:!1,parentTop:null,parentBottom:null,isHovered:!1}),beforeMount(){this.setupContainer()},mounted(){this.showNotice(),c.on("toast-clear",this.dismiss)},methods:{setupContainer(){if(this.parentTop=document.querySelector(".v-toast.v-toast--top"),this.parentBottom=document.querySelector(".v-toast.v-toast--bottom"),this.parentTop&&this.parentBottom)return;this.parentTop||(this.parentTop=document.createElement("div"),this.parentTop.className="v-toast v-toast--top"),this.parentBottom||(this.parentBottom=document.createElement("div"),this.parentBottom.className="v-toast v-toast--bottom");const t=document.body;t.appendChild(this.parentTop),t.appendChild(this.parentBottom)},shouldQueue(){return!!this.queue&&(this.parentTop.childElementCount>0||this.parentBottom.childElementCount>0)},dismiss(){this.timer&&this.timer.stop(),clearTimeout(this.queueTimer),this.isActive=!1,setTimeout((()=>{this.onDismiss.apply(null,arguments);const e=this.$refs.root;(0,t.render)(null,e),n(e)}),150)},showNotice(){if(this.shouldQueue())return void(this.queueTimer=setTimeout(this.showNotice,250));const t=this.$refs.root.parentElement;this.correctParent.insertAdjacentElement("afterbegin",this.$refs.root),n(t),this.isActive=!0,this.duration&&(this.timer=new r(this.dismiss,this.duration))},whenClicked(){this.dismissible&&(this.onClick.apply(null,arguments),this.dismiss())},toggleTimer(t){this.pauseOnHover&&this.timer&&(t?this.timer.pause():this.timer.resume())}},computed:{correctParent(){switch(this.position){case a.TOP:case a.TOP_RIGHT:case a.TOP_LEFT:return this.parentTop;case a.BOTTOM:case a.BOTTOM_RIGHT:case a.BOTTOM_LEFT:return this.parentBottom}},transition(){switch(this.position){case a.TOP:case a.TOP_RIGHT:case a.TOP_LEFT:return{enter:"v-toast--fade-in-down",leave:"v-toast--fade-out"};case a.BOTTOM:case a.BOTTOM_RIGHT:case a.BOTTOM_LEFT:return{enter:"v-toast--fade-in-up",leave:"v-toast--fade-out"}}}},beforeUnmount(){c.off("toast-clear",this.dismiss)}});const p=(0,o(772).default)(u,[["render",function(o,i,n,r,a,l){return(0,t.openBlock)(),(0,t.createBlock)(t.Transition,{"enter-active-class":o.transition.enter,"leave-active-class":o.transition.leave},{default:(0,t.withCtx)((()=>[(0,t.withDirectives)((0,t.createElementVNode)("div",{ref:"root",role:"alert",class:(0,t.normalizeClass)(["v-toast__item",[`v-toast__item--${o.type}`,`v-toast__item--${o.position}`]]),onMouseover:i[0]||(i[0]=t=>o.toggleTimer(!0)),onMouseleave:i[1]||(i[1]=t=>o.toggleTimer(!1)),onClick:i[2]||(i[2]=function(){return o.whenClicked&&o.whenClicked(...arguments)})},[e,(0,t.createElementVNode)("p",{class:"v-toast__text",innerHTML:o.message},null,8,s)],34),[[t.vShow,o.isActive]])])),_:1},8,["enter-active-class","leave-active-class"])}]]),d=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return{open(s){let o=null;"string"==typeof s&&(o=s);const i={message:o},n=Object.assign({},i,e,s),r=function(e,s,o){let i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{};const n=(0,t.h)(e,s,i),r=document.createElement("div");return r.classList.add("v-toast--pending"),o.appendChild(r),(0,t.render)(n,r),n.component}(p,n,document.body);return{dismiss:r.ctx.dismiss}},clear(){c.emit("toast-clear")},success(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.open(Object.assign({},{message:t,type:"success"},e))},error(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.open(Object.assign({},{message:t,type:"error"},e))},info(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.open(Object.assign({},{message:t,type:"info"},e))},warning(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.open(Object.assign({},{message:t,type:"warning"},e))},default(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return this.open(Object.assign({},{message:t,type:"default"},e))}}},m={install:function(t){let e=d(arguments.length>1&&void 0!==arguments[1]?arguments[1]:{});t.config.globalProperties.$toast=e,t.provide("$toast",e)}},h=m})(),i})())); |
| { | ||
| "name": "vue-toast-notification", | ||
| "version": "3.1.1", | ||
| "version": "3.1.2", | ||
| "description": "Vue.js toast notification plugin", | ||
@@ -40,28 +40,28 @@ "main": "dist/index.js", | ||
| "devDependencies": { | ||
| "@babel/core": "^7.20.12", | ||
| "@babel/preset-env": "^7.20.2", | ||
| "@vue/compiler-sfc": "^3.2.45", | ||
| "@vue/test-utils": "^2.2.7", | ||
| "@vue/vue3-jest": "^29.2.2", | ||
| "babel-jest": "^29.3.1", | ||
| "@babel/core": "^7.22.1", | ||
| "@babel/preset-env": "^7.22.2", | ||
| "@vue/compiler-sfc": "^3.3.4", | ||
| "@vue/test-utils": "^2.3.2", | ||
| "@vue/vue3-jest": "^29.2.4", | ||
| "babel-jest": "^29.5.0", | ||
| "babel-loader": "^9.1.2", | ||
| "bootstrap": "^4.6.2", | ||
| "cross-env": "^7.0.3", | ||
| "css-loader": "^6.7.3", | ||
| "css-loader": "^6.8.1", | ||
| "file-loader": "^6.2.0", | ||
| "html-webpack-plugin": "^5.5.0", | ||
| "jest": "^29.3.1", | ||
| "jest-environment-jsdom": "^29.3.1", | ||
| "mini-css-extract-plugin": "^2.7.2", | ||
| "html-webpack-plugin": "^5.5.1", | ||
| "jest": "^29.5.0", | ||
| "jest-environment-jsdom": "^29.5.0", | ||
| "mini-css-extract-plugin": "^2.7.6", | ||
| "mitt": "^3.0.0", | ||
| "sass": "~1.57.1", | ||
| "sass-loader": "^13.2.0", | ||
| "style-loader": "^3.3.1", | ||
| "sass": "~1.62.1", | ||
| "sass-loader": "^13.3.1", | ||
| "style-loader": "^3.3.3", | ||
| "svg-url-loader": "^8.0.0", | ||
| "vue": "^3.2.45", | ||
| "vue-loader": "^17.0.1", | ||
| "webpack": "^5.75.0", | ||
| "webpack-cli": "^5.0.1", | ||
| "webpack-dev-server": "^4.11.1", | ||
| "webpack-remove-empty-scripts": "^1.0.1" | ||
| "vue": "^3.3.4", | ||
| "vue-loader": "^17.1.1", | ||
| "webpack": "^5.84.1", | ||
| "webpack-cli": "^5.1.1", | ||
| "webpack-dev-server": "^4.15.0", | ||
| "webpack-remove-empty-scripts": "^1.0.3" | ||
| }, | ||
@@ -68,0 +68,0 @@ "peerDependencies": { |
@@ -17,6 +17,6 @@ # Vue Toast Notification | ||
| | Vue.js version | Package version | Branch | | ||
| | :--- |:---------------:| ---: | | ||
| | Vue.js version | Package version | Branch | | ||
| |:---------------|:---------------:|--------------------------------------------------------------------:| | ||
| | 2.x | 1.x | [1.x](https://github.com/ankurk91/vue-toast-notification/tree/v1.x) | | ||
| | 3.x | 3.x | `main` | | ||
| | 3.x | 3.x | `main` | | ||
@@ -26,3 +26,3 @@ ## Installation | ||
| ```bash | ||
| npm install vue-toast-notification@^3.0 | ||
| npm install vue-toast-notification@^3 | ||
| ``` | ||
@@ -34,2 +34,4 @@ | ||
| Install the plugin | ||
| ```js | ||
@@ -45,10 +47,18 @@ import {createApp} from 'vue'; | ||
| app.mount('#app'); | ||
| ``` | ||
| let instance = app.$toast.open('You did it!'); | ||
| Then use in your components | ||
| // Force dismiss specific toast | ||
| instance.dismiss(); | ||
| ```js | ||
| export default { | ||
| mounted() { | ||
| let instance = this.$toast.open('You did it!'); | ||
| // Dismiss all opened toast immediately | ||
| app.$toast.clear(); | ||
| // Force dismiss specific toast | ||
| instance.dismiss(); | ||
| // Dismiss all opened toast immediately | ||
| this.$toast.clear(); | ||
| } | ||
| } | ||
| ``` | ||
@@ -59,9 +69,5 @@ | ||
| ```js | ||
| import {createApp} from 'vue'; | ||
| import {useToast} from 'vue-toast-notification'; | ||
| import 'vue-toast-notification/dist/theme-sugar.css'; | ||
| const app = createApp({}); | ||
| app.mount('#app'); | ||
| const $toast = useToast(); | ||
@@ -81,17 +87,17 @@ let instance = $toast.success('You did it!'); | ||
| | Attribute | Type | Default | Description | | ||
| | :--- | :---: | :---: | :--- | | ||
| | message | String | -- | Message text/html (required) | | ||
| | type | String | `success` | One of `success`, `info`, `warning`, `error`, `default` | | ||
| | position | String | `bottom-right` | One of `top`, `bottom`, `top-right`, `bottom-right`,`top-left`, `bottom-left` | | ||
| | duration | Number | `3000` | Visibility duration in milliseconds, set to `0` to keep toast visible | | ||
| | dismissible | Boolean | `true` | Allow user dismiss by clicking | | ||
| | onClick | Function | -- | Do something when user clicks | | ||
| | onDismiss | Function | -- | Do something after toast gets dismissed | | ||
| | queue | Boolean | `false` | Wait for existing to dismiss before showing new | | ||
| | pauseOnHover | Boolean | `true` | Pause the timer when mouse on over a toast | | ||
| | Attribute | Type | Default | Description | | ||
| |:-------------|:--------:|:--------------:|:------------------------------------------------------------------------------| | ||
| | message | String | -- | Message text/html (required) | | ||
| | type | String | `success` | One of `success`, `info`, `warning`, `error`, `default` | | ||
| | position | String | `bottom-right` | One of `top`, `bottom`, `top-right`, `bottom-right`,`top-left`, `bottom-left` | | ||
| | duration | Number | `3000` | Visibility duration in milliseconds, set to `0` to keep toast visible | | ||
| | dismissible | Boolean | `true` | Allow user dismiss by clicking | | ||
| | onClick | Function | -- | Do something when user clicks | | ||
| | onDismiss | Function | -- | Do something after toast gets dismissed | | ||
| | queue | Boolean | `false` | Wait for existing to dismiss before showing new | | ||
| | pauseOnHover | Boolean | `true` | Pause the timer when mouse on over a toast | | ||
| ## API methods | ||
| ### `app.$toast.open(options)` | ||
| ### `this.$toast.open(options)` | ||
@@ -102,6 +108,6 @@ This is generic method, you can use this method to make any kind of toast. | ||
| // Can accept a message as string and apply rest of options from defaults | ||
| app.$toast.open('Howdy!'); | ||
| this.$toast.open('Howdy!'); | ||
| // Can accept an Object of options | ||
| app.$toast.open({ | ||
| this.$toast.open({ | ||
| message: 'Something went wrong!', | ||
@@ -113,3 +119,3 @@ type: 'error', | ||
| ### `app.$toast.success(message,?options)` | ||
| ### `this.$toast.success(message,?options)` | ||
@@ -119,3 +125,3 @@ There are some proxy methods to make it more readable. | ||
| ```js | ||
| app.$toast.success('Profile saved.', { | ||
| this.$toast.success('Profile saved.', { | ||
| // optional options Object | ||
@@ -125,9 +131,9 @@ }) | ||
| ### `app.$toast.error(message,?options)` | ||
| ### `this.$toast.error(message,?options)` | ||
| ### `app.$toast.warning(message,?options)` | ||
| ### `this.$toast.warning(message,?options)` | ||
| ### `app.$toast.info(message,?options)` | ||
| ### `this.$toast.info(message,?options)` | ||
| ### `app.$toast.default(message,?options)` | ||
| ### `this.$toast.default(message,?options)` | ||
@@ -148,3 +154,3 @@ ## Global options | ||
| ```js | ||
| app.$toast.success('Order placed.', { | ||
| this.$toast.success('Order placed.', { | ||
| // override the global option | ||
@@ -174,3 +180,3 @@ position: 'bottom' | ||
| * Clone this repo | ||
| * Make sure you have node-js `>=18.14` and [pnpm](https://pnpm.io/) `>=7.25` pre-installed | ||
| * Make sure you have node-js `>=18.16` and [pnpm](https://pnpm.io/) `>=8.3` pre-installed | ||
| * Install dependencies - `pnpm install` | ||
@@ -177,0 +183,0 @@ * Run webpack dev server - `pnpm start` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by0.73%
55844
- Number of lines in readme file
- increased by3.43%
181
No dependency changes