@pijushgupta/toastbite 1.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Pijush Gupta
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/toastbite.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),p=(o,e)=>{const n=o.__vccOpts||o;for(const[c,s]of e)n[c]=s;return n},v={};function _(o,e){return t.openBlock(),t.createElementBlock("div",null,e[0]||(e[0]=[t.createStaticVNode('<div><div class="toast-top-left top-left"></div></div><div><div class="toast-top-center top-center"></div></div><div><div class="toast-top-right top-right"></div></div><div><div class="toast-bottom-left bottom-left"></div></div><div><div class="toast-bottom-center bottom-center"></div></div><div><div class="toast-bottom-right bottom-right"></div></div>',6)]))}const f=p(v,[["render",_]]),r=t.reactive([]);function h({location:o,title:e,content:n,icon:c,iconColor:s,timeout:i=2e3}){var l;r.push({id:Date.now(),iconColor:s||"toast-blue dark:toast-blue",location:["top-left","top-right","top-center","bottom-left","bottom-right","bottom-center"].includes(o)?`.${o}`:".bottom-right",title:e,content:n,icon:c,timeout:i}),((l=r[0])==null?void 0:l.timeout)!==!1&&setTimeout(()=>{var a;d((a=r[0])==null?void 0:a.id)},r[0].timeout)}function d(o){const e=r.findIndex(n=>n.id===o);e!==-1&&r.splice(e,1)}function u(){return{toasts:r,addToast:h,removeToast:d}}const b={id:"toast-default",class:"toast-card",role:"alert"},g=["innerHTML"],k={class:"toast-title"},E={class:"toast-content"},N=["onClick"],T={__name:"Toastify",setup(o){const{removeToast:e,toasts:n}=u();return(c,s)=>(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(n),i=>(t.openBlock(),t.createBlock(t.Teleport,{key:i.id,to:i.location},[t.createElementVNode("div",b,[t.createElementVNode("div",{class:t.normalizeClass([i.iconColor,"toast-icon-wrap"]),innerHTML:i.icon},null,10,g),t.createElementVNode("div",null,[t.createElementVNode("div",k,t.toDisplayString(i.title),1),t.createElementVNode("div",E,t.toDisplayString(i.content),1)]),t.createElementVNode("button",{type:"button",class:"toast-close",onClick:l=>t.unref(e)(i.id),"aria-label":"Close"},s[0]||(s[0]=[t.createElementVNode("span",{class:"sr-only"},"Close",-1),t.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"icon icon-tabler icons-tabler-outline icon-tabler-x"},[t.createElementVNode("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),t.createElementVNode("path",{d:"M18 6l-12 12"}),t.createElementVNode("path",{d:"M6 6l12 12"})],-1)]),8,N)])],8,["to"]))),128))}},V={__name:"ToastTemplate",setup(o){return(e,n)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(f),t.createVNode(T)],64))}},m=document.createElement("div");document.body.appendChild(m);app=t.createApp(V);app.mount(m);exports.useToast=u;

package/dist/toastbite.css

@@ -0,0 +1 @@
+.toast-top-left{pointer-events:none;position:fixed;z-index:40;box-sizing:border-box;display:flex;min-height:100vh;width:600px;flex-direction:column;padding:.25rem}.toast-top-center{pointer-events:none;position:fixed;z-index:40;box-sizing:border-box;display:flex;min-height:100vh;width:600px;flex-direction:column;align-items:center;padding:.25rem}.toast-top-right{pointer-events:none;position:fixed;z-index:40;box-sizing:border-box;display:flex;min-height:100vh;width:600px;flex-direction:column;align-items:flex-end;padding:.25rem}.toast-bottom-left{pointer-events:none;position:fixed;z-index:40;box-sizing:border-box;display:flex;min-height:100vh;width:600px;flex-direction:column;padding:.25rem}.toast-bottom-center{pointer-events:none;position:fixed;z-index:40;box-sizing:border-box;display:flex;min-height:100vh;width:600px;flex-direction:column;align-items:center;padding:.25rem}.toast-bottom-right{pointer-events:none;position:fixed;z-index:40;box-sizing:border-box;display:flex;min-height:100vh;width:600px;flex-direction:column;align-items:flex-end;padding:.25rem}@media (min-width: 768px){.toast-top-left{left:1rem;top:1rem}.toast-top-center{left:50%;top:1rem;margin-left:-300px}.toast-top-right{right:1rem;top:1rem}.toast-bottom-left{left:1rem;bottom:1rem;flex-direction:column-reverse}.toast-bottom-center{left:50%;bottom:1rem;margin-left:-300px;flex-direction:column-reverse}.toast-bottom-right{right:1rem;bottom:1rem;flex-direction:column-reverse}}.toast-blue{background-color:#e1effe;color:#3f83f8}.dark .dark\:toast-blue{background-color:#1e429f;color:#c3ddfd}.toast-red{background-color:#fde8e8;color:#f05252}.dark .dark\:toast-red{background-color:#9b1c1c;color:#fbd5d5}.toast-orange{background-color:#feecdc;color:#ff5a1f}.dark .dark\:toast-orange{background-color:#8a2c0d;color:#fcd9bd}.toast-amber{background-color:#fef3c7;color:#f59e0b}.dark .dark\:toast-amber{background-color:#92400e;color:#fde68a}.toast-yellow{background-color:#fdf6b2;color:#c27803}.dark .dark\:toast-yellow{background-color:#723b13;color:#fce96a}.toast-lime{background-color:#ecfccb;color:#84cc16}.dark .dark\:toast-lime{background-color:#3f6212;color:#d9f99d}.toast-green{background-color:#def7ec;color:#0e9f6e}.dark .dark\:toast-green{background-color:#03543f;color:#bcf0da}.toast-emerald{background-color:#d1fae5;color:#10b981}.dark .dark\:toast-emerald{background-color:#065f46;color:#a7f3d0}.toast-teal{background-color:#d5f5f6;color:#0694a2}.dark .dark\:toast-teal{background-color:#05505c;color:#afecef}.toast-cyan{background-color:#cffafe;color:#06b6d4}.dark .dark\:toast-cyan{background-color:#155e75;color:#a5f3fc}.toast-sky{background-color:#e0f2fe;color:#0ea5e9}.dark .dark\:toast-sky{background-color:#075985;color:#bae6fd}.toast-indigo{background-color:#e5edff;color:#6875f5}.dark .dark\:toast-indigo{background-color:#42389d;color:#cddbfe}.toast-violet{background-color:#ede9fe;color:#8b5cf6}.dark .dark\:toast-violet{background-color:#5b21b6;color:#ddd6fe}.toast-purple{background-color:#edebfe;color:#9061f9}.dark .dark\:toast-purple{background-color:#5521b5;color:#dcd7fe}.toast-fuchsia{background-color:#fae8ff;color:#d946ef}.dark .dark\:toast-fuchsia{background-color:#86198f;color:#f5d0fe}.toast-pink{background-color:#fce8f3;color:#e74694}.dark .dark\:toast-pink{background-color:#99154b;color:#fad1e8}.toast-rose{background-color:#ffe4e6;color:#f43f5e}.dark .dark\:toast-rose{background-color:#9f1239;color:#fecdd3}.toast-slate{background-color:#f1f5f9;color:#64748b}.dark .dark\:toast-slate{background-color:#1e293b;color:#e2e8f0}.toast-gray{background-color:#f3f4f6;color:#6b7280}.dark .dark\:toast-gray{background-color:#1f2937;color:#e5e7eb}.toast-zinc{background-color:#f4f4f5;color:#71717a}.dark .dark\:toast-zinc{background-color:#27272a;color:#e4e4e7}.toast-neutral{background-color:#f5f5f5;color:#737373}.dark .dark\:toast-neutral{background-color:#262626;color:#e5e5e5}.toast-stone{background-color:#f5f5f4;color:#78716c}.dark .dark\:toast-stone{background-color:#292524;color:#e7e5e4}.toast-card{pointer-events:auto;z-index:50;margin-top:.25rem;margin-bottom:.25rem;display:flex;width:100%;max-width:20rem;align-items:center;border-radius:.5rem;background-color:#fff;padding:1rem;color:#6b7280;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.dark .toast-card{background-color:#1f2937;color:#9ca3af}.toast-icon-wrap{display:inline-flex;height:2rem;width:2rem;flex-shrink:0;align-items:center;justify-content:center;border-radius:.5rem}.toast-title{margin-inline-start:.75rem;font-size:.875rem;line-height:1.25rem;font-weight:600}.toast-content{margin-inline-start:.75rem;font-size:.875rem;line-height:1.25rem;font-weight:400}.toast-close{margin:-.375rem;margin-inline-start:auto;display:inline-flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.5rem;padding:.375rem;color:#9ca3af}.toast-close:hover{background-color:#f3f4f6;color:#111827}.toast-close:hover:is(.dark *){background-color:#374151;color:#fff}

package/dist/toastbite.es.js

@@ -0,0 +1,102 @@
+import { createElementBlock as d, openBlock as l, createStaticVNode as b, reactive as g, Fragment as _, renderList as k, unref as p, createBlock as T, Teleport as x, createElementVNode as o, normalizeClass as w, toDisplayString as u, createVNode as m, createApp as C } from "vue";
+const y = (e, t) => {
+  const n = e.__vccOpts || e;
+  for (const [c, s] of t)
+    n[c] = s;
+  return n;
+}, M = {};
+function B(e, t) {
+  return l(), d("div", null, t[0] || (t[0] = [
+    b('<div><div class="toast-top-left top-left"></div></div><div><div class="toast-top-center top-center"></div></div><div><div class="toast-top-right top-right"></div></div><div><div class="toast-bottom-left bottom-left"></div></div><div><div class="toast-bottom-center bottom-center"></div></div><div><div class="toast-bottom-right bottom-right"></div></div>', 6)
+  ]));
+}
+const $ = /* @__PURE__ */ y(M, [["render", B]]), r = g([]);
+function E({ location: e, title: t, content: n, icon: c, iconColor: s, timeout: i = 2e3 }) {
+  var a;
+  r.push({
+    id: Date.now(),
+    iconColor: s || "toast-blue dark:toast-blue",
+    location: ["top-left", "top-right", "top-center", "bottom-left", "bottom-right", "bottom-center"].includes(e) ? `.${e}` : ".bottom-right",
+    title: t,
+    content: n,
+    icon: c,
+    timeout: i
+  }), ((a = r[0]) == null ? void 0 : a.timeout) !== !1 && setTimeout(() => {
+    var v;
+    f((v = r[0]) == null ? void 0 : v.id);
+  }, r[0].timeout);
+}
+function f(e) {
+  const t = r.findIndex((n) => n.id === e);
+  t !== -1 && r.splice(t, 1);
+}
+function H() {
+  return { toasts: r, addToast: E, removeToast: f };
+}
+const L = {
+  id: "toast-default",
+  class: "toast-card",
+  role: "alert"
+}, N = ["innerHTML"], V = { class: "toast-title" }, z = { class: "toast-content" }, D = ["onClick"], S = {
+  __name: "Toastify",
+  setup(e) {
+    const { removeToast: t, toasts: n } = H();
+    return (c, s) => (l(!0), d(_, null, k(p(n), (i) => (l(), T(x, {
+      key: i.id,
+      to: i.location
+    }, [
+      o("div", L, [
+        o("div", {
+          class: w([i.iconColor, "toast-icon-wrap"]),
+          innerHTML: i.icon
+        }, null, 10, N),
+        o("div", null, [
+          o("div", V, u(i.title), 1),
+          o("div", z, u(i.content), 1)
+        ]),
+        o("button", {
+          type: "button",
+          class: "toast-close",
+          onClick: (a) => p(t)(i.id),
+          "aria-label": "Close"
+        }, s[0] || (s[0] = [
+          o("span", { class: "sr-only" }, "Close", -1),
+          o("svg", {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            class: "icon icon-tabler icons-tabler-outline icon-tabler-x"
+          }, [
+            o("path", {
+              stroke: "none",
+              d: "M0 0h24v24H0z",
+              fill: "none"
+            }),
+            o("path", { d: "M18 6l-12 12" }),
+            o("path", { d: "M6 6l12 12" })
+          ], -1)
+        ]), 8, D)
+      ])
+    ], 8, ["to"]))), 128));
+  }
+}, j = {
+  __name: "ToastTemplate",
+  setup(e) {
+    return (t, n) => (l(), d(_, null, [
+      m($),
+      m(S)
+    ], 64));
+  }
+}, h = document.createElement("div");
+document.body.appendChild(h);
+app = C(j);
+app.mount(h);
+export {
+  H as useToast
+};

package/dist/toastbite.umd.js

@@ -0,0 +1 @@
+(function(s,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(s=typeof globalThis<"u"?globalThis:s||self,t(s.Toastbite={},s.Vue))})(this,function(s,t){"use strict";const _=(o,e)=>{const n=o.__vccOpts||o;for(const[l,c]of e)n[l]=c;return n},h={};function b(o,e){return t.openBlock(),t.createElementBlock("div",null,e[0]||(e[0]=[t.createStaticVNode('<div><div class="toast-top-left top-left"></div></div><div><div class="toast-top-center top-center"></div></div><div><div class="toast-top-right top-right"></div></div><div><div class="toast-bottom-left bottom-left"></div></div><div><div class="toast-bottom-center bottom-center"></div></div><div><div class="toast-bottom-right bottom-right"></div></div>',6)]))}const u=_(h,[["render",b]]),r=t.reactive([]);function k({location:o,title:e,content:n,icon:l,iconColor:c,timeout:i=2e3}){var d;r.push({id:Date.now(),iconColor:c||"toast-blue dark:toast-blue",location:["top-left","top-right","top-center","bottom-left","bottom-right","bottom-center"].includes(o)?`.${o}`:".bottom-right",title:e,content:n,icon:l,timeout:i}),((d=r[0])==null?void 0:d.timeout)!==!1&&setTimeout(()=>{var f;a((f=r[0])==null?void 0:f.id)},r[0].timeout)}function a(o){const e=r.findIndex(n=>n.id===o);e!==-1&&r.splice(e,1)}function p(){return{toasts:r,addToast:k,removeToast:a}}const g={id:"toast-default",class:"toast-card",role:"alert"},T=["innerHTML"],E={class:"toast-title"},V={class:"toast-content"},N=["onClick"],v={__name:"Toastify",setup(o){const{removeToast:e,toasts:n}=p();return(l,c)=>(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(t.unref(n),i=>(t.openBlock(),t.createBlock(t.Teleport,{key:i.id,to:i.location},[t.createElementVNode("div",g,[t.createElementVNode("div",{class:t.normalizeClass([i.iconColor,"toast-icon-wrap"]),innerHTML:i.icon},null,10,T),t.createElementVNode("div",null,[t.createElementVNode("div",E,t.toDisplayString(i.title),1),t.createElementVNode("div",V,t.toDisplayString(i.content),1)]),t.createElementVNode("button",{type:"button",class:"toast-close",onClick:d=>t.unref(e)(i.id),"aria-label":"Close"},c[0]||(c[0]=[t.createElementVNode("span",{class:"sr-only"},"Close",-1),t.createElementVNode("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round",class:"icon icon-tabler icons-tabler-outline icon-tabler-x"},[t.createElementVNode("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),t.createElementVNode("path",{d:"M18 6l-12 12"}),t.createElementVNode("path",{d:"M6 6l12 12"})],-1)]),8,N)])],8,["to"]))),128))}},y={__name:"ToastTemplate",setup(o){return(e,n)=>(t.openBlock(),t.createElementBlock(t.Fragment,null,[t.createVNode(u),t.createVNode(v)],64))}},m=document.createElement("div");document.body.appendChild(m),app=t.createApp(y),app.mount(m),s.useToast=p,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@pijushgupta/toastbite",
+  "version": "1.0.6",
+  "description": "A simple Vue toast notification library",
+  "main": "dist/toastbite.cjs.js",
+  "module": "dist/toastbite.es.js",
+  "browser": "dist/toastbite.umd.js",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "exports": {
+    ".":{
+      "import": "./dist/toastbite.es.js",
+      "require": "./dist/toastbite.cjs.js",
+      "default": "./dist/toastbite.umd.js"
+    },
+    "./dist/toastbite.css":"./dist/toastbite.css"
+    
+  },
+  "files": [
+    "dist",
+    "src",
+    "index.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Pijushgupta/toastbite.git"
+  },
+  "keywords": [
+    "vue",
+    "toast",
+    "notification",
+    "vue3"
+  ],
+  "author": "Pijush Gupta",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "bugs": {
+    "url": "https://github.com/Pijushgupta/toastbite/issues"
+  },
+  "homepage": "https://github.com/Pijushgupta/toastbite#readme",
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "vite": "^6.1.0",
+    "vue": "^3.5.13"
+  }
+}

package/src/components/Toast.vue

@@ -0,0 +1,35 @@
+<!-- Toast.vue -->
+<!-- Toast wrapper to host Toastify html -->
+<template>
+    
+        <div>
+            <div>
+                <!-- top-left -->
+                <div class="toast-top-left top-left"></div>
+            </div>
+      
+            <div>
+                <!-- top-center -->
+                <div class="toast-top-center top-center"></div>
+            </div>
+      
+            <div>
+                <!-- top-right -->
+                <div class="toast-top-right top-right"></div>
+            </div>
+        
+            <div>
+                <!-- bottom-left -->
+                <div class="toast-bottom-left bottom-left"></div>
+            </div>
+            <div>
+                <!-- bottom-center -->
+                <div class="toast-bottom-center bottom-center"></div>
+            </div>
+            <div>
+                <!-- bottom-right -->
+                <div class="toast-bottom-right bottom-right"></div>
+            </div>
+        </div>
+  
+</template>

package/src/components/ToastTemplate.vue

@@ -0,0 +1,8 @@
+<script setup>
+import Toast from "./Toast.vue";
+import Toastify from "./Toastify.vue";
+</script>
+<template>
+<Toast/>
+<Toastify/>
+</template>

package/src/components/Toastify.vue

@@ -0,0 +1,30 @@
+<!-- Toastify.vue -->
+<!-- actual toast html -->
+<script setup>
+import { useToast } from "./useToast";
+
+const {removeToast,toasts} = useToast();
+
+</script>
+
+<template>
+
+    <Teleport  v-for="toast in toasts" :key="toast.id" :to="toast.location">
+        <div id="toast-default" class="toast-card" role="alert">
+            <!-- icon area -->
+            <div :class="toast.iconColor" class="toast-icon-wrap" v-html=" toast.icon"></div>
+            <!-- icon area ends -->
+            <div>
+                <div class="toast-title"> {{ toast.title }}</div>
+                <div class="toast-content">{{ toast.content }}</div>
+            </div>
+            <button type="button"
+                class="toast-close"
+                @click="removeToast(toast.id)" aria-label="Close">
+                <span class="sr-only">Close</span>
+                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
+            </button>
+        </div>
+    </Teleport>
+    
+</template>

package/src/components/useToast.js

@@ -0,0 +1,34 @@
+//useToast.js
+// composable : Its to create and maintain a global toast store and manage that.
+import { reactive } from "vue";
+
+const toasts = reactive([]);
+
+function addToast({ location, title, content, icon,iconColor,timeout = 2000}) {
+    toasts.push({
+        id: Date.now(),
+        iconColor:iconColor?iconColor:'toast-blue dark:toast-blue',
+        location: ['top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right', 'bottom-center'].includes(location) ? `.${location}` : '.bottom-right',
+        title,
+        content,
+        icon,
+        timeout
+    });
+
+    // Auto-remove after 5s
+    if(toasts[0]?.timeout !== false ){
+        setTimeout(() => {
+            removeToast(toasts[0]?.id);
+        },toasts[0].timeout);
+    }
+    
+}
+
+function removeToast(id) {
+    const index = toasts.findIndex((t) => t.id === id);
+    if (index !== -1) toasts.splice(index, 1);
+}
+
+export function useToast() {
+    return { toasts, addToast, removeToast };
+}

package/src/index.js

@@ -0,0 +1,12 @@
+import '../styles/Toastbite.css'
+import ToastTemplate from "./components/ToastTemplate.vue";
+import { useToast } from "./components/useToast.js";
+import { createApp } from 'vue';
+
+const div = document.createElement("div");
+document.body.appendChild(div);
+app = createApp(ToastTemplate);
+app.mount(div);
+
+export {useToast}
+