@windui/snackbar - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

package.json

@@ -21,3 +21,3 @@ {
   "name": "@windui/snackbar",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "contributors": [
@@ -24,0 +24,0 @@ "Swôth <[e-mail]>"

windui.snackbar.js

@@ -1,209 +0,1 @@
-module.exports = class Snackbar {
-    /**
-     * @param {Object} WindUI
-     * @param {Object} WindUI.options
-     * @param {Number} [WindUI.options.duration=3000] Default: 3000
-     * @param {Number} [WindUI.options.speed=500] Default: 500
-     * @param {('info'|'success'|'error'|'warning')} [WindUI.options.type=info] Default: info
-     * @param {('right'|'left')} [WindUI.options.align=right] Default: Right
-     * @param {('bottom'|'top')} [WindUI.options.position=bottom] Default: bottom
-     * @param {String} WindUI.title
-     * @param {String} WindUI.message
-     * @returns WindUI Snackbar
-     */
-    constructor(WindUI = {}) {
-        let { 
-            options, 
-            title, 
-            message 
-        } = WindUI;
-
-        let $ = {
-            duration: 3000,
-            speed: 500,
-            type: "info",
-            align: "right",
-            position: "bottom"
-        };
-
-        options = {
-            duration: options ? options["duration"] || $["duration"] : $["duration"],
-            position: options ? options["position"] || $["position"] : $["position"],
-            align: options ? options["align"] || $["align"] : $["align"],
-            speed: options ? options["speed"] || $["speed"] : $["speed"],
-            type: options ? options["type"] || $["type"] : $["type"]
-        };
-
-        let RightSnackbarList = document.querySelector("div#windui-right-snackbar-list");
-        let LeftSnackbarList = document.querySelector("div#windui-left-snackbar-list");
-        let SnackbarCSS = document.querySelector("style#windui-snackbar-style");
-
-        const ElementStyles = {
-            position: "fixed",
-            zIndex: 9999,
-            [options.position]: 0,
-            [options.align]: 0,
-            padding: "1.25rem",                    
-            display: "flex",
-            transition: "200ms all",
-            flexDirection: "column",
-            justifyContent: options.position == "top" ? "start" : "end",
-            alignItems: "end"
-        };
-
-        if (!SnackbarCSS) {
-            const Styles = `
-            /*
-            * WindUI - Snackbar Styles
-            */
-
-            @-webkit-keyframes WUIfadeIn {
-                from {
-                    transform: translateX(var(--wui-direction));
-                }
-                to {
-                    transform: translateX(0px);
-                }
-            }
-    
-            @keyframes WUIfadeIn {
-                from {
-                    transform: translateX(var(--wui-direction));
-                }
-                to {
-                    transform: translateX(0px);
-                }
-            }
-    
-            @-webkit-keyframes WUIfadeOut {
-                to {
-                    transform: translateX(var(--wui-direction));
-                    opacity: 0;
-                }
-            }
-    
-            @keyframes WUIfadeOut {
-                to {
-                    transform: translateX(var(--wui-direction));
-                    opacity: 0;
-                }
-            }
-
-            div.windui-snackbar {
-                animation-fill-mode: forwards;
-                -webkit-animation-fill-mode: forwards;
-                -webkit-animation: WUIfadeIn var(--wui-speed), WUIfadeOut var(--wui-speed) var(--wui-duration);
-                animation: WUIfadeIn var(--wui-speed), WUIfadeOut var(--wui-speed) var(--wui-duration);
-                background: linear-gradient(to bottom right, var(--wui-bg-1), var(--wui-bg-2));
-                box-shadow: 0 15px 20px -5px var(--wui-shadow), 0 8px 10px -6px var(--wui-shadow);
-                min-width: 20rem;
-                margin-top: 1rem;
-                padding: 1rem 1.25rem;
-                border-radius: .5rem;
-                display: flex;
-            }
-            div.windui-snackbar.windui-hidden {
-                opacity: 0;
-            }
-            div.windui-snackbar svg {
-                margin-right: .5rem;
-            }
-            div.windui-snackbar div h1 {
-                font-weight: bold;
-                font-size: 1rem;
-            }
-            `;
-
-            const StyleElement = document.createElement("style");
-            StyleElement.innerHTML = Styles;
-            StyleElement.id = "windui-snackbar-style";
-            (document.head || document.body).appendChild(StyleElement);
-        };
-
-        if (options.align == "right" && !RightSnackbarList) {
-            const RightListElement = document.createElement("div");
-            Object.keys(ElementStyles).forEach(style => (RightListElement.style[style] = ElementStyles[style]));
-            RightListElement.id = "windui-right-snackbar-list";
-            RightSnackbarList = RightListElement;
-            document.body.appendChild(RightListElement);
-        };
-
-        if (options.align == "left" && !LeftSnackbarList) {
-            const LeftListElement = document.createElement("div");
-            Object.keys(ElementStyles).forEach(style => (LeftListElement.style[style] = ElementStyles[style]));
-            LeftListElement.id = "windui-left-snackbar-list";
-            LeftSnackbarList = LeftListElement;
-            document.body.appendChild(LeftListElement);
-        };
-
-        this.snackbar = {
-            id: Math.random().toString(36).substring(2),
-            parent: options.align == "left" ? LeftSnackbarList : RightSnackbarList,
-            title,
-            message,
-            ...options
-        };
-
-        return this;
-    };
-
-    show() {
-        const SnackbarTypes = {
-            info: {
-                color: [ '#67e8f9', '#38bdf8' ],
-                shadow: 'rgba(56, 189, 248, 0.1)',
-                icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>'
-            },
-            success: {
-                color: [ '#34d399', '#22c55e' ],
-                shadow: 'rgba(34, 197, 94, 0.1)',
-                icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1 17l-5-5.299 1.399-1.43 3.574 3.736 6.572-7.007 1.455 1.403-8 8.597z"/></svg>'
-            },
-            error: {
-                color: [ '#fb7185', '#ef4444' ],
-                shadow: 'rgba(239, 68, 68, 0.1)',
-                icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.151 17.943l-4.143-4.102-4.117 4.159-1.833-1.833 4.104-4.157-4.162-4.119 1.833-1.833 4.155 4.102 4.106-4.16 1.849 1.849-4.1 4.141 4.157 4.104-1.849 1.849z"/></svg>'
-            },
-            warning: {
-                color: [ '#fde047', '#fbbf24' ],
-                shadow: 'rgba(251, 191, 36, 0.1)',
-                icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.5 5h3l-1 10h-1l-1-10zm1.5 14.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z"/></svg>'
-            }
-        };
-
-        const IsUnique = document.getElementById(this.snackbar.id) ? false : true;
-        if (!IsUnique) return false;
-        const SnackbarElement = document.createElement("div");
-        const SnackbarHTML = `
-        <div id="${this.snackbar.id}" class="windui-snackbar" style="--wui-bg-1: ${SnackbarTypes[this.snackbar.type].color[0]}; --wui-bg-2: ${SnackbarTypes[this.snackbar.type].color[1]}; --wui-shadow: ${SnackbarTypes[this.snackbar.type].shadow}; --wui-speed: ${Number(this.snackbar.speed) / 1000}s; --wui-duration: ${(Number(this.snackbar.duration) - Number(this.snackbar.speed)) / 1000}s; --wui-direction: ${this.snackbar.align == "left" ? "-150%" : "150%"};">
-            ${SnackbarTypes[this.snackbar.type].icon}
-            <div>
-                <h1>${this.snackbar.title || "Title not found!"}</h1>
-                <p>${this.snackbar.message || "Message not found!"}</p>
-            </div>
-        </div>
-        `;
-
-        SnackbarElement.innerHTML = SnackbarHTML;
-        this.snackbar.parent.style.top = this.snackbar.position == "top" ? 0 : "";
-        this.snackbar.parent.style.bottom = this.snackbar.position == "bottom" ? 0 : "";
-        this.snackbar.parent.appendChild(SnackbarElement);
-
-        setTimeout(() => {
-            this.snackbar.parent.removeChild(SnackbarElement);
-        }, Number(this.snackbar.duration));
-        return true;
-    };
-
-    hide() {
-        const SnackbarElement = document.getElementById(this.snackbar.id);
-        if (!SnackbarElement) return false;
-        SnackbarElement.style.transition = `${this.snackbar.speed}ms all`;
-        SnackbarElement.style.transform = `translateX(150%)`;
-
-        setTimeout(() => {
-            SnackbarElement.remove();
-        }, Number(this.snackbar.speed));
-        return true;
-    };
-};
+module.exports=class{constructor(n={}){let{options:t,title:i,message:e}=n,a=3e3,s=500,r="info",o="right",d="bottom";t={duration:t&&t.duration||a,position:t&&t.position||d,align:t&&t.align||o,speed:t&&t.speed||s,type:t&&t.type||r};let c=document.querySelector("div#windui-right-snackbar-list"),l=document.querySelector("div#windui-left-snackbar-list"),m=document.querySelector("style#windui-snackbar-style");const h={position:"fixed",zIndex:9999,[t.position]:0,[t.align]:0,padding:"1.25rem",display:"flex",transition:"200ms all",flexDirection:"column",justifyContent:"top"==t.position?"start":"end",alignItems:"end"};if(!m){const n="\n            /*\n            * WindUI - Snackbar Styles\n            */\n\n            @-webkit-keyframes WUIfadeIn {\n                from {\n                    transform: translateX(var(--wui-direction));\n                }\n                to {\n                    transform: translateX(0px);\n                }\n            }\n    \n            @keyframes WUIfadeIn {\n                from {\n                    transform: translateX(var(--wui-direction));\n                }\n                to {\n                    transform: translateX(0px);\n                }\n            }\n    \n            @-webkit-keyframes WUIfadeOut {\n                to {\n                    transform: translateX(var(--wui-direction));\n                    opacity: 0;\n                }\n            }\n    \n            @keyframes WUIfadeOut {\n                to {\n                    transform: translateX(var(--wui-direction));\n                    opacity: 0;\n                }\n            }\n\n            div.windui-snackbar {\n                animation-fill-mode: forwards;\n                -webkit-animation-fill-mode: forwards;\n                -webkit-animation: WUIfadeIn var(--wui-speed), WUIfadeOut var(--wui-speed) var(--wui-duration);\n                animation: WUIfadeIn var(--wui-speed), WUIfadeOut var(--wui-speed) var(--wui-duration);\n                background: linear-gradient(to bottom right, var(--wui-bg-1), var(--wui-bg-2));\n                box-shadow: 0 15px 20px -5px var(--wui-shadow), 0 8px 10px -6px var(--wui-shadow);\n                min-width: 20rem;\n                margin-top: 1rem;\n                padding: 1rem 1.25rem;\n                border-radius: .5rem;\n                display: flex;\n            }\n            div.windui-snackbar.windui-hidden {\n                opacity: 0;\n            }\n            div.windui-snackbar svg {\n                margin-right: .5rem;\n            }\n            div.windui-snackbar div h1 {\n                font-weight: bold;\n                font-size: 1rem;\n            }\n            ",t=document.createElement("style");t.innerHTML=n,t.id="windui-snackbar-style",(document.head||document.body).appendChild(t)}if("right"==t.align&&!c){const n=document.createElement("div");Object.keys(h).forEach(t=>n.style[t]=h[t]),n.id="windui-right-snackbar-list",c=n,document.body.appendChild(n)}if("left"==t.align&&!l){const n=document.createElement("div");Object.keys(h).forEach(t=>n.style[t]=h[t]),n.id="windui-left-snackbar-list",l=n,document.body.appendChild(n)}return this.snackbar={id:Math.random().toString(36).substring(2),parent:"left"==t.align?l:c,title:i,message:e,...t},this}show(){const n={info:{color:["#67e8f9","#38bdf8"],shadow:"rgba(56, 189, 248, 0.1)",icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-.001 5.75c.69 0 1.251.56 1.251 1.25s-.561 1.25-1.251 1.25-1.249-.56-1.249-1.25.559-1.25 1.249-1.25zm2.001 12.25h-4v-1c.484-.179 1-.201 1-.735v-4.467c0-.534-.516-.618-1-.797v-1h3v6.265c0 .535.517.558 1 .735v.999z"/></svg>'},success:{color:["#34d399","#22c55e"],shadow:"rgba(34, 197, 94, 0.1)",icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1 17l-5-5.299 1.399-1.43 3.574 3.736 6.572-7.007 1.455 1.403-8 8.597z"/></svg>'},error:{color:["#fb7185","#ef4444"],shadow:"rgba(239, 68, 68, 0.1)",icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.151 17.943l-4.143-4.102-4.117 4.159-1.833-1.833 4.104-4.157-4.162-4.119 1.833-1.833 4.155 4.102 4.106-4.16 1.849 1.849-4.1 4.141 4.157 4.104-1.849 1.849z"/></svg>'},warning:{color:["#fde047","#fbbf24"],shadow:"rgba(251, 191, 36, 0.1)",icon:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.5 5h3l-1 10h-1l-1-10zm1.5 14.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z"/></svg>'}};if(!!document.getElementById(this.snackbar.id))return!1;const t=document.createElement("div"),i=`\n        <div id="${this.snackbar.id}" class="windui-snackbar" style="--wui-bg-1: ${n[this.snackbar.type].color[0]}; --wui-bg-2: ${n[this.snackbar.type].color[1]}; --wui-shadow: ${n[this.snackbar.type].shadow}; --wui-speed: ${Number(this.snackbar.speed)/1e3}s; --wui-duration: ${(Number(this.snackbar.duration)-Number(this.snackbar.speed))/1e3}s; --wui-direction: ${"left"==this.snackbar.align?"-150%":"150%"};">\n            ${n[this.snackbar.type].icon}\n            <div>\n                <h1>${this.snackbar.title||"Title not found!"}</h1>\n                <p>${this.snackbar.message||"Message not found!"}</p>\n            </div>\n        </div>\n        `;return t.innerHTML=i,this.snackbar.parent.style.top="top"==this.snackbar.position?0:"",this.snackbar.parent.style.bottom="bottom"==this.snackbar.position?0:"",this.snackbar.parent.appendChild(t),setTimeout(()=>{this.snackbar.parent.removeChild(t)},Number(this.snackbar.duration)),!0}hide(){const n=document.getElementById(this.snackbar.id);return!!n&&(n.style.transition=`${this.snackbar.speed}ms all`,n.style.transform="translateX(150%)",setTimeout(()=>{n.remove()},Number(this.snackbar.speed)),!0)}};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

8877

decreased by-62.19%

Number of package files

3

decreased by-25%

Lines of code

0

decreased by-100%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes