vue-dk-toast - npm Package Compare versions

Comparing version 2.2.3 to 3.0.0

dist/dkToast.d.ts

@@ -1,33 +0,62 @@
-/* eslint-disable */
-import type { ComponentCustomProperties, Plugin } from 'vue';
+import type { Plugin } from 'vue';
 
-declare module '@vue/runtime-core' {
-  interface ComponentCustomProperties {
-    /**
-     *
-     * @param text Text to display in toast notification.
-     * @param localOptions Optional config for individual toast.
-     *
-     * ---
-     * **Options:**
-     * @property `class` - Local class to be added to individual toast.
-     * @property `disableClick` - Disable toast removal on click.
-     * @property `duration` - Time in milliseconds before hiding the toast notification, set to `false` for an indefinite duration.
-     * @property `link` - Object with `href` and `targetBlank` properties, turns the toast into an `<a>` element which has a `href` of the one provided and optional `target="_blank"`.
-     * @property `positionX` - 'left', 'right' or 'center'.
-     * @property `positionY` - 'top' or 'bottom'.
-     * @property `slot` - (deprecated) Slot for displaying HTML on the right side of provided text.
-     * @property `slotLeft` - Slot for displaying HTML on the left-side of provided text.
-     * @property `slotRight` - Slot for displaying HTML on the right-side of provided text.
-     * @property `styles` - CSS key/value pairs.
-     * @property `type` - Default classes for `success`, `error` and `passive`.
-     */
-    $toast: Toast;
+/**
+ * **Options:**
+ * @property `class` - Global class to be added to each toast.
+ * @property `disableClick` - Disable toast removal on click.
+ * @property `duration` - Time in milliseconds before hiding the toast notification,
+ * set to `false` for an indefinite duration.
+ * @property `max` - Max number of toasts allowed at any one time.
+ * @property `positionX` - 'left', 'right' or 'center'.
+ * @property `positionY` - 'top' or 'bottom'.
+ * @property `styles` - CSS key/value pairs.
+ */
+declare const DKToast: Plugin;
+export default DKToast;
+
+// CDN compatibility
+declare global {
+  interface Window {
+    DKToast?: typeof DKToast;
   }
 }
 
-interface LocalOptions {
+/**
+ * **Options:**
+ * @property `class` - Global class to be added to each toast.
+ * @property `disableClick` - Disable toast removal on click.
+ * @property `duration` - Time in milliseconds before hiding the toast notification,
+ * set to `false` for an indefinite duration.
+ * @property `max` - Max number of toasts allowed at any one time.
+ * @property `positionX` - 'left', 'right' or 'center'.
+ * @property `positionY` - 'top' or 'bottom'.
+ * @property `styles` - CSS key/value pairs.
+ */
+export interface Options {
   class?: string;
   disableClick?: boolean;
   duration?: number | false;
+  max?: number;
+  positionX?: 'left' | 'right' | 'center';
+  positionY?: 'top' | 'bottom';
+  styles?: Record<string, string>;
+}
+
+/**
+ * @property `class?: string`
+ * @property `disableClick?: boolean`
+ * @property `duration?: number | false`
+ * @property `link?: { href: string; targetBlank?: boolean }`
+ * @property `positionX?: 'left' | 'right' | 'center'`
+ * @property `positionY?: 'top' | 'bottom'`
+ * @property `slot?: string`
+ * @property `slotLeft?: string`
+ * @property `slotRight?: string`
+ * @property `styles?: Record<string, string>`
+ * @property `type?: 'error' | 'success' | 'passive'`
+ */
+export interface LocalOptions {
+  class?: string;
+  disableClick?: boolean;
+  duration?: number | false;
   link?: { href: string; targetBlank?: boolean };
@@ -44,33 +73,29 @@ positionX?: 'left' | 'right' | 'center';
 /**
- * @param options Optional global config for toast notifications.
- *
+ * @param text Text to display in toast notification.
+ * @param localOptions Optional config for individual toast.
  * ---
  * **Options:**
- * @property `class` - Global class to be added to each toast.
+ * @property `class` - Local class to be added to individual toast.
  * @property `disableClick` - Disable toast removal on click.
- * @property `duration` - Time in milliseconds before hiding the toast notification, set to `false` for an indefinite duration.
- * @property `max` - Max number of toasts allowed at any one time.
+ * @property `duration` - Time in milliseconds before hiding the toast notification,
+ * set to `false` for an indefinite duration.
+ * @property `link` - Object with `href` and `targetBlank` properties, turns the toast
+ * into an `<a>` element which has a `href` of the one provided and optional `target="_blank"`.
  * @property `positionX` - 'left', 'right' or 'center'.
  * @property `positionY` - 'top' or 'bottom'.
+ * @property `slot` - (deprecated) Slot for displaying HTML on the right side of provided text.
+ * @property `slotLeft` - Slot for displaying HTML on the left-side of provided text.
+ * @property `slotRight` - Slot for displaying HTML on the right-side of provided text.
  * @property `styles` - CSS key/value pairs.
+ * @property `type` - Default classes for `success`, `error` and `passive`.
  */
-declare const DKToast: Plugin;
-export default DKToast;
-
-/**
- * Used for typing main plugin function.
- *
- * @example
- * ```ts
- * import type { Toast } from 'vue-dk-toast'
- * ...
- * setup() {
- *   const toast = inject<Toast>('$toast')
- *
- *   if (toast) toast('Simple!')
- * }
- * ```
- */
 export type Toast = {
+  // eslint-disable-next-line no-unused-vars
   (text: string, localOptions?: LocalOptions): void;
 };
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $toast: Toast;
+  }
+}

dist/dkToast.umd.min.js

@@ -1,3 +0,2 @@
-(function(m,_){typeof exports=="object"&&typeof module!="undefined"?module.exports=_():typeof define=="function"&&define.amd?define(_):(m=typeof globalThis!="undefined"?globalThis:m||self,m["vue-dk-toast"]=_())})(this,function(){"use strict";function m(o){o.positionX!=="left"&&o.positionX!=="right"&&o.positionX!=="center"&&console.error(`vue-dk-toast [Error]: positionX must be either "left", "right" or "center", received "${o.positionX}"`),o.positionY!=="top"&&o.positionY!=="bottom"&&console.error(`vue-dk-toast [Error]: positionY must be either "top" or "bottom", received "${o.positionY}"`)}function _(o,i){let t=!0;return!o&&!i.slotLeft&&!i.slotRight&&!i.slot&&(console.error("vue-dk-toast [Error]: a text/slot value is required"),t=!1),i.slot&&console.warn("vue-dk-toast [Warn]: slot is now deprecated. Use slotRight instead"),t}function Y(o){let i=!1,t=!1;return o.split("").map(e=>((e==="."||e==="@"||e==="#")&&!t&&(i=!0),i&&(e===","||e==="{")&&(i=!1),e===":"&&!i&&(t=!0),e===";"&&!i&&(t=!1),(e===" "||e===`
-`||e==="\r")&&!i&&!t?"":e)).join("").split(" {").join("{").split(": ").join(":")}function y(o,i){const t=o||{};let r=Object.keys(t).map(e=>{const a=e.split("").map((n,s)=>{const d=e.split("webkit")[0]==="",c=e.split("moz")[0]==="",l=e.split("ms")[0]==="";return n==="-"?n:(d||c||l)&&s===0?`-${n.toLowerCase()}`:n===n.toUpperCase()?`-${n.toLowerCase()}`:n}).join("");if(!!t)return`${a}: ${t[e]};`}).join("");return i?r+=`animation-delay: 0s, ${i/1e3-.15}s;`:r+="animation: dk__toast-in 0.15s;",r}function E(o){const{duration:i,styles:t,positionY:r}=o,e=y(t,i),a=document.createElement("style");a.type="text/css",a.textContent=Y(`
+(function(f,u){typeof exports=="object"&&typeof module!="undefined"?module.exports=u():typeof define=="function"&&define.amd?define(u):(f=typeof globalThis!="undefined"?globalThis:f||self,f["vue-dk-toast"]=u())})(this,function(){"use strict";const f=i=>console.error(`vue-dk-toast [Error]: ${i}`),u=i=>console.warn(`vue-dk-toast [Warn]: ${i}`);function T(i){var e,t;/^(?:left|right|center)$/.test((e=i.positionX)!=null?e:"")||f(`positionX must be either "left", "right" or "center", received "${i.positionX}"`),/^(?:top|bottom)$/.test((t=i.positionY)!=null?t:"")||f(`positionY must be either "top" or "bottom", received "${i.positionY}"`)}function j(i,e){let t=!0;return!i&&!e.slotLeft&&!e.slotRight&&!e.slot&&(f("a text/slot value is required"),t=!1),e.slot&&u("slot is now deprecated. Use slotRight instead"),t}const y="dk__toast-in 0.15s",h=`animation: ${y}`,N=`${y} reverse forwards`;function S(i){let e=!1,t=!1;function r(n){return/[\.@#]/.test(n)&&!t&&(e=!0),/[,\{]/.test(n)&&e&&(e=!1),n===":"&&!e&&(t=!0),n===";"&&!e&&(t=!1),/\s/.test(n)&&!e&&!t?"":n}return i.split("").map(r).join("").replace(" {","{").replace(": ",":")}function v(i,e){const t=i||{};function r(n){return`${n.split("").map((s,a)=>s==="-"?s:/^(?:webkit|moz|ms)/.test(n)&&a===0||s===s.toUpperCase()?`-${s.toLowerCase()}`:s).join("")}: ${t[n]};`}let o=Object.keys(t).map(r).join("");if(e){const n=e/1e3-.15;o+=`${h}, ${N} ${n}s`}else o+=`${h};`;return o}function A(i){const{duration:e,styles:t,positionY:r}=i,o=v(t,e),n=document.createElement("style");n.type="text/css",n.textContent=S(`
     .dk__toast-container {
@@ -33,3 +32,3 @@ pointer-events: none;
     .dk__toast {
-      ${o.disableClick?"":"cursor: pointer;"}
+      ${i.disableClick?"":"cursor: pointer;"}
       pointer-events: all;
@@ -58,4 +57,3 @@ display: -webkit-box;
       transition: opacity 0.25s;
-      animation: dk__toast-in 0.15s, dk__toast-in 0.15s reverse forwards;
-      ${e||""}
+      ${o||""}
     }
@@ -83,3 +81,3 @@ .dk__toast-top-left {
     }
-    ${o.disableClick?"":".dk__toast:hover { opacity: 0.7; }"}
+    ${i.disableClick?"":".dk__toast:hover { opacity: 0.7; }"}
     .dk__icon-left,
@@ -114,15 +112,18 @@ .dk__icon-right {
     }
-    .dk__toast.dk__click-disabled {
+    .dk__click-disabled {
       cursor: default;
       opacity: 1;
     }
-    .dk__toast.dk__error {
+    .dk__click-disabled:hover {
+      opacity: 1;
+    }
+    .dk__error {
       background-color: rgb(255, 0, 0);
       color: #fff;
     }
-    .dk__toast.dk__success {
+    .dk__success {
       background-color: rgb(31, 218, 56);
       color: #fff;
     }
-    .dk__toast.dk__passive {
+    .dk__passive {
       background-color: rgb(31, 59, 218);
@@ -194,2 +195,2 @@ color: #fff;
     }
-  `),document.head.appendChild(a)}const u=[];function b(o,i,t){o.className=i,t.appendChild(o)}function L(o,i,t,r){var d,c;const e=((d=t.link)==null?void 0:d.href)?document.createElement("a"):document.createElement("div"),a=t.slotLeft,n=t.slot||t.slotRight;if((c=t.link)==null?void 0:c.href){const l=e;l.href=t.link.href,l.rel="noopener",t.link.targetBlank&&(l.target="_blank")}e.className="dk__toast",i.class&&e.classList.add(i.class),t.class&&e.classList.add(t.class),t.type&&e.classList.add(`dk__${t.type}`),e.setAttribute("role","status"),e.setAttribute("aria-live","polite"),e.setAttribute("aria-atomic","false"),o&&(e.textContent=o),a&&(e.innerHTML=`<div class="dk__icon-left">${a}</div>${e.innerHTML}`),n&&(e.innerHTML+=`<div class="dk__icon-right">${n}</div>`),!o&&(a||n)&&e.classList.add("dk__icon-only");const s=t.styles?t.styles:i.styles;return e.setAttribute("style",y(s,r)),t.disableClick&&e.classList.add("dk__click-disabled"),e}function j(o,i){const t=document.createElement("div"),r=document.createElement("div");b(t,"dk__toast-container",document.body),b(r,"dk__toast-mobile-container",document.body);function e(a,n){var w,$;const s=n||{};if(!s||!_(a,s))return;const d={y:s.positionY||i.positionY,x:s.positionX||i.positionX},c=document.querySelector(`.dk__toast-${d.y}-${d.x}`)||document.createElement("div"),l=document.querySelector(`.dk__toast-mobile-${d.y}`)||document.createElement("div"),T=document.querySelectorAll(".dk__toast").length/2;if(i.max&&T>=i.max){const f=u[0][0],C=u[0][1];(w=f.parentElement)==null||w.removeChild(f),($=C.parentElement)==null||$.removeChild(C),u.shift()}if(!c.className){const f=`dk__toast-section dk__toast-${d.y}-${d.x}`;b(c,f,t)}if(!l.className){const f=`dk__toast-mobile-section dk__toast-mobile-${d.y}`;b(l,f,r)}const g=s.duration||s.duration===!1?s.duration:i.duration,p=L(a,i,s,g),k=p.cloneNode(!0);let v;function x(f){f&&(v=!0),[...c.children].includes(p)&&c.removeChild(p),[...l.children].includes(k)&&l.removeChild(k),u.shift()}!i.disableClick&&!s.disableClick&&(p.addEventListener("click",x),k.addEventListener("click",x)),u.push([p,k]),c.appendChild(p),l.appendChild(k),!!g&&setTimeout(()=>{v||x()},g)}o.config.globalProperties.$toast=e,o.provide("$toast",e)}const h={install:(o,i)=>{const t=i||{};!t.duration&&t.duration!==!1&&(t.duration=5e3),t.positionY||(t.positionY="bottom"),t.positionX||(t.positionX="right"),m(t),E(t),j(o,t)}};return window!==void 0&&window.Vue&&(window.DKToast=h),h});
+  `),document.head.appendChild(n)}const _=[];function b(i,e,t){i.className=e,t.appendChild(i)}function P(i,e,t,r){var a,d;const o=((a=t.link)==null?void 0:a.href)?document.createElement("a"):document.createElement("div"),n=t.slotLeft,m=t.slot||t.slotRight;if((d=t.link)==null?void 0:d.href){const l=o;l.href=t.link.href,l.rel="noopener",t.link.targetBlank&&(l.target="_blank")}o.className="dk__toast",e.class&&o.classList.add(e.class),t.class&&o.classList.add(t.class),t.type&&o.classList.add(`dk__${t.type}`),o.setAttribute("role","status"),o.setAttribute("aria-live","polite"),o.setAttribute("aria-atomic","false"),i&&(o.textContent=i),n&&(o.innerHTML=`<div class="dk__icon-left">${n}</div>${o.innerHTML}`),m&&(o.innerHTML+=`<div class="dk__icon-right">${m}</div>`),!i&&(n||m)&&o.classList.add("dk__icon-only");const s=t.styles||e.styles;return o.setAttribute("style",v(s,r)),t.disableClick&&o.classList.add("dk__click-disabled"),o}function X(i,e){const t=document.createElement("div"),r=document.createElement("div");b(t,"dk__toast-container",document.body),b(r,"dk__toast-mobile-container",document.body);function o(n,m){var C,Y,E;const s=m||{};if(!s||!j(n,s))return;const a={y:s.positionY||e.positionY,x:s.positionX||e.positionX},d=document.querySelector(`.dk__toast-${a.y}-${a.x}`)||document.createElement("div"),l=document.querySelector(`.dk__toast-mobile-${a.y}`)||document.createElement("div"),q=document.querySelectorAll(".dk__toast").length/2;if(e.max&&q>=e.max){const c=_[0][0],L=_[0][1];(C=c.parentElement)==null||C.removeChild(c),(Y=L.parentElement)==null||Y.removeChild(L),_.shift()}if(!d.className){const c=`dk__toast-section dk__toast-${a.y}-${a.x}`;b(d,c,t)}if(!l.className){const c=`dk__toast-mobile-section dk__toast-mobile-${a.y}`;b(l,c,r)}const g=(E=s.duration)!=null?E:e.duration,p=P(n,e,s,g),k=p.cloneNode(!0);let $;function x(c){c&&($=!0),[...d.children].includes(p)&&d.removeChild(p),[...l.children].includes(k)&&l.removeChild(k),_.shift()}!e.disableClick&&!s.disableClick&&(p.addEventListener("click",x),k.addEventListener("click",x)),_.push([p,k]),d.appendChild(p),l.appendChild(k),!!g&&setTimeout(()=>{$||x()},g)}i.config.globalProperties.$toast=o,i.provide("$toast",o)}const w={install(i,e){const t=e||{};!t.duration&&t.duration!==!1&&(t.duration=5e3),t.positionY||(t.positionY="bottom"),t.positionX||(t.positionX="right"),T(t),A(t),X(i,t)}};return window!==void 0&&"Vue"in window&&(window.DKToast=w),w});

package.json

 {
   "name": "vue-dk-toast",
-  "version": "2.2.3",
+  "version": "3.0.0",
   "private": false,
@@ -25,19 +25,19 @@ "description": "Lightweight toast notification plugin for Vue 3",
   "devDependencies": {
-    "@types/node": "^16.11.13",
-    "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "@typescript-eslint/parser": "^5.7.0",
+    "@types/node": "^17.0.8",
+    "@typescript-eslint/eslint-plugin": "^5.9.1",
+    "@typescript-eslint/parser": "^5.9.1",
     "@vitejs/plugin-vue": "^2.0.1",
     "@vue/compiler-sfc": "^3.2.26",
-    "@vue/eslint-config-typescript": "^9.1.0",
-    "eslint": "^8.4.1",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "eslint": "^8.6.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vue": "^8.3.0",
     "prettier": "^2.5.1",
     "typescript": "~4.5.4",
-    "vite": "^2.7.2",
+    "vite": "^2.7.12",
     "vue-eslint-parser": "^8.0.1",
-    "vue-tsc": "^0.29.8"
+    "vue-tsc": "^0.30.2"
   },
@@ -44,0 +44,0 @@ "keywords": [

README.md

@@ -79,3 +79,3 @@ # `vue-dk-toast`
 ```html
-<script src="https://unpkg.com/vue-dk-toast@2.0.6"></script>
+<script src="https://unpkg.com/vue-dk-toast@3.0.0"></script>
 ```
@@ -89,4 +89,4 @@
 import { createApp } from 'vue';
+import DKToast from 'vue-dk-toast';
 import App from './App.vue';
-import DKToast from 'vue-dk-toast';
 
@@ -115,3 +115,3 @@ createApp(App).use(DKToast).mount('#app');
 
-```js
+```jsx
 @click="$toast('Simple!')"
@@ -122,13 +122,13 @@ ```
 
-```vue
+```html
 <script>
-import { inject } from 'vue';
+  import { inject } from 'vue';
 
-export default {
-  setup() {
-    const toast = inject('$toast');
+  export default {
+    setup() {
+      const toast = inject('$toast');
 
-    toast('Simple!');
-  },
-};
+      toast('Simple!');
+    },
+  };
 </script>
@@ -211,14 +211,14 @@ ```
 
-```vue
+```html
 <script lang="ts">
-import { defineComponent, inject } from 'vue';
-import type { Toast } from 'vue-dk-toast';
+  import { defineComponent, inject } from 'vue';
+  import type { Toast } from 'vue-dk-toast';
 
-export default defineComponent({
-  setup() {
-    const toast = inject<Toast>('$toast');
+  export default defineComponent({
+    setup() {
+      const toast = inject<Toast>('$toast');
 
-    if (toast) toast('Simple!');
-  },
-});
+      if (toast) toast('Simple!');
+    },
+  });
 </script>
@@ -225,0 +225,0 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

23098

3.52%

Lines of code

299

8.73%

No dependency changes