@windui/snackbar - npm Package Compare versions

Comparing version 1.2.1 to 2.0.0

package.json

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

README.md

@@ -12,5 +12,34 @@ <h1 align="center">@windui/snackbar</h1>
 
+<h1><img src="https://emojipedia-us.s3.amazonaws.com/source/skype/289/party-popper_1f389.png" width="30px"> Snackbar Components ᴺᴱᵂ</h1>
+
+<img src="https://i.ibb.co/k5Qv0gk/image.png">
+
+```js
+new Snackbar({
+    title: "Hello components!",
+    message: "Confirm or cancel.",
+    options: {
+        type: "success",
+        components: {
+            // default: Confirm
+            confirmText: "Approuver",
+            // default: Cancel
+            cancelText: "Annuler",
+            confirmEvent: ({ $, event }) => {
+                alert(`Clicked to ${$.snackbar.title}`);
+                $.hide();
+                // also you can use $.show() again
+            },
+            cancelEvent: ({ $, event }) => {
+                alert(`Cancelled!`);
+                $.hide();
+            }
+        }
+    }
+})
+```
+
 # CDN & DOM Usage
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@windui/snackbar@1.2.1/windui.snackbar.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@windui/snackbar@x.x.x/windui.snackbar.min.js"></script>
 <script>
@@ -17,0 +46,0 @@ new WindUI.Snackbar({

windui.snackbar.js

@@ -11,2 +11,7 @@ const WindUI = {
          * @param {('bottom'|'top')} [WindUI.options.position=bottom] Default: bottom
+         * @param {Object} [WindUI.options.components=null] Default: null
+         * @param {String} [WindUI.options.components.confirmText=Confirm] Default: Confirm
+         * @param {String} [WindUI.options.components.cancelText=Cancel] Default: Cancel
+         * @param {Function} [WindUI.options.components.confirmEvent]
+         * @param {Function} [WindUI.options.components.cancelEvent]
          * @param {String} WindUI.title
@@ -28,3 +33,4 @@ * @param {String} WindUI.message
                 align: "right",
-                position: "bottom"
+                position: "bottom",
+                components: null
             };
@@ -37,3 +43,4 @@
                 speed: options ? options["speed"] || $["speed"] : $["speed"],
-                type: options ? options["type"] || $["type"] : $["type"]
+                type: options ? options["type"] || $["type"] : $["type"],
+                components: options ? options["components"] || $["components"] : $["components"]
             };
@@ -99,2 +106,3 @@
                 div.windui-snackbar {
+                    --windui-text-color: #050505;
                     font-family: 'Poppins', sans-serif;
@@ -111,2 +119,30 @@ animation-fill-mode: forwards;
                     border-radius: .5rem;
+                }
+                div.windui-snackbar div.windui-components {
+                    display: flex;
+                    align-items-center;
+                    gap: 0 1rem;
+                    padding-top: .75rem;
+                }
+                div.windui-snackbar div.windui-components button {
+                    color: var(--wui-bg-1);
+                    width: 100%;
+                    font-family: 'Poppins', sans-serif;
+                    height: 2rem;
+                    background: var(--windui-text-color);
+                    border: 0;
+                    outline: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: .5rem;
+                    letter-spacing: .05rem;
+                    cursor: pointer;
+                }
+                div.windui-snackbar div.windui-components button svg {
+                    fill: var(--wui-bg-1);
+                    height: 50%;
+                    margin-right: .1rem;
+                }
+                div.windui-snackbar div.windui-content {
                     flex-shrink: 0;
@@ -118,6 +154,8 @@ display: flex;
                 }
-                div.windui-snackbar svg {
+                div.windui-snackbar div.windui-content svg {
+                    fill: var(--windui-text-color);
                     margin-right: .5rem;
                 }
-                div.windui-snackbar div h1 {
+                div.windui-snackbar div.windui-content div h1 {
+                    color: var(--windui-text-color);
                     font-weight: bold;
@@ -127,3 +165,4 @@ font-size: 1rem;
                 }
-                div.windui-snackbar div p {
+                div.windui-snackbar div.windui-content div p {
+                    color: var(--windui-text-color);
                     margin-top: 0px;
@@ -194,9 +233,22 @@ margin-bottom: 0;
             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 class="windui-content">
+                    ${SnackbarTypes[this.snackbar.type].icon}
+                    <div>
+                        <h1>${this.snackbar.title || "Title not found!"}</h1>
+                        <p>${this.snackbar.message || "Message not found!"}</p>
+                    </div>
                 </div>
+                ${typeof this.snackbar.components == "object" ? `
+                    <div class="windui-components">
+                        <button id="confirm-btn">
+                            ${SnackbarTypes["success"].icon} ${this.snackbar.components.confirmText || "Confirm"}
+                        </button>
+                        <button id="cancel-btn">
+                            ${SnackbarTypes["error"].icon} ${this.snackbar.components.cancelText || "Cancel"}
+                        </button>
+                    </div>
+                ` : ``}
             </div>
@@ -210,2 +262,28 @@ `;
 
+            if (this.snackbar.components) {
+                const confirmBtn = SnackbarElement.querySelector("button#confirm-btn");
+                confirmBtn.addEventListener("click", event => {
+                    return (
+                        this.snackbar.components.confirmEvent || (({ $ }) => {
+                            return $.hide();
+                        })
+                    )({
+                        $: this,
+                        event
+                    });
+                });
+
+                const cancelBtn = SnackbarElement.querySelector("button#cancel-btn");
+                cancelBtn.addEventListener("click", event => {
+                    return (
+                        this.snackbar.components.cancelEvent || (({ $ }) => {
+                            return $.hide();
+                        })
+                    )({
+                        $: this,
+                        event
+                    });
+                });
+            };
+
             setTimeout(() => {
@@ -212,0 +290,0 @@ this.snackbar.parent.removeChild(SnackbarElement);

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

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

Improved metrics

Total package byte prevSize

16827

increased by36.22%

Lines of code

279

increased by36.76%

Number of lines in readme file

82

increased by54.72%

No dependency changes