@cicciosgamino/snack-bar 1.1.0 → 1.4.0

package/CHANGELOG.md

@@ -6,10 +6,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.4.0] - 02-01-2025
+### Added
+  - New method `show(msg, time=2700, bkColor='#333', txtColor='#f5f5f5')` to show the snackbar with custom message, time, background-color and text-color 
+
+## [1.3.0] - 06-06-2023
+
+### Changed
+  - Minor fix
+  - Click to close the component
+
 ## [1.1.0] - 29-07-2021
+
 ### Changed
   - Change module part in package.json, link to source snack-bar.js
 
 ## [1.0.0] - 07-07-2021
+
 ### Added
   - Init the Element  [@cicciosgamino](https://github.com/CICCIOSGAMINO).

package/LICENSE

@@ -652,7 +652,7 @@ Also add information on how to contact you by electronic and paper mail.
   If the program does terminal interaction, make it output a short
 notice like this when it starts in an interactive mode:
 
-    web-socket  Copyright (C) 2021  @cicciosgamino
+    snack-bar Copyright (C) 2026  @cicciosgamino
     This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
     This is free software, and you are welcome to redistribute it
     under certain conditions; type `show c' for details.

package/README.md

@@ -56,12 +56,14 @@ npm install --save @cicciosgamino/snack-bar
 | timing  | Number  | `3000`  | Snackbar active timing
 | title   | String  | `🌰 ... SnackBar Title` | Snackbar title
 | active  | Boolean | `` | Snackbar active attribute (present/NOT)
+| closebtn| Boolean | `` | Show the close button when attribute is present
 
 
 ### Methods
 
 | Name     | Description
 | -------- | -------------
+| `show(msg, time=2700, bkColor='#333', txtColor='#f5f5f5') => void` | Show the snackbar with custom message, time, background-color and text-color
 | `closeSnackbar() => void`  | Close the snackbar
 
 

package/index.html

@@ -16,7 +16,7 @@
   <meta name="author" content="@cicciosgamino"> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <title>🍣 Sushi</title>
+  <title>🍣 SnackBar</title>
 
   <style>
     :root {
@@ -49,7 +49,7 @@
     }
 
     snack-bar {
-      --snack-bottom: 10rem;
+      /* --snack-bottom: 10rem;  absolute position from bottom */
     }
   </style>
   
@@ -67,8 +67,14 @@
     </section>
   </main>
 
-  <!-- Use the snackbar -->
-  <snack-bar timing="5000" title="@Cicciosgamino"></snack-bar>
+  <!-- (default)
+  <snack-bar></snack-bar> -->
+
+  <!-- (default) with close button -->
+  <snack-bar closebtn></snack-bar>
+
+  <!-- Use the snackbar custom timing / title with close button
+  <snack-bar timing="5000" title="@Cicciosgamino" closebtn></snack-bar> -->
 
   <noscript>
     Please enable JavaScript to view this website.
@@ -80,14 +86,21 @@
   <script>
     window.addEventListener('DOMContentLoaded', () => {
       const snack = document.querySelector('snack-bar')
+
       setTimeout(() => {
         // active the snack
         snack.setAttribute('active', '')
-      }, 5000)
+      }, 1000)
+
       setTimeout(() => {
         // close the snack (before timing ended)
         snack.closeSnackbar()
-      }, 8000)
+      }, 2800)
+
+      setTimeout(() => {
+        // re-active the snack
+        snack.show('Reactivated SnackBar!', 3000, '#ff0000', '#fff')
+      }, 3200)
     })
   </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cicciosgamino/snack-bar",
-  "version": "1.1.0",
+  "version": "1.4.0",
   "description": "Simple snackbar Lit Element",
   "main": "snack-bar.js",
   "module": "snack-bar.js",
@@ -30,9 +30,6 @@
     "lit": "*"
   },
   "devDependencies": {
-    "vite": "^2.4.3"
-  },
-  "directories": {
-    "example": "examples/index.html"
+    "vite": "^7.3.0"
   }
 }

package/snack-bar.js

@@ -18,18 +18,21 @@ class SnackBar extends LitElement {
         padding: 0;
         box-sizing: border-box;
       }
+
       :host {
         display: none;
         animation-name: fadeOut;
         animation-duration: 0.5s;
         animation-fill-mode: forwards;
       }
+
       :host-context([active]) {
         /* Handle CSS when host active */
         animation-name: fadeIn;
         animation-duration: 0.5s;
         animation-fill-mode: forwards;
       }
+
       #snackbar {
         border-radius: var(--snack-radius, 1px);
         min-width: 100%;
@@ -43,18 +46,18 @@ class SnackBar extends LitElement {
         transform: translate(-50%, 0);
         bottom: var(--snack-bottom, 0);
       }
+
       #container {
         margin: calc(var(--snack-font-size, 2.1rem) * 1.1);
-        display: grid;
-        grid-template-columns: 5fr 1fr;
-        grid-template-rows: 1fr;
       }
+
       p {
         font-size: var(--snack-font-size, 2.1rem);
         font-weight: 400;
         line-height: var(--snack-font-size, 2.1rem);
       }
-      button {
+
+      #snackBtn {
         width: var(--snack-font-size, 2.1rem);
         height: var(--snack-font-size, 2.1rem);
 
@@ -62,8 +65,11 @@ class SnackBar extends LitElement {
         border: none;
         cursor: pointer;
 
-        position: relative;
+        position: absolute;
+        top: calc(var(--snack-font-size, 2.1rem) * 1.3);
+        right: 3rem;
       }
+
       button::after {
         content: '';
         position: absolute;
@@ -79,14 +85,17 @@ class SnackBar extends LitElement {
         transform: scale(0);
         transition: 0.3s cubic-bezier(.95, .32, .37, 1.21);
       }
+
       button:hover::after {
         transform: scale(1);
       }
+
       button svg {
         width: var(--snack-font-size, 2.1rem);
         height: var(--snack-font-size, 2.1rem);
         fill: var(--snack-txt-color, #f5f5f5);
       }
+
       button:hover svg {
         transform: scale(0.95);
       }
@@ -117,18 +126,25 @@ class SnackBar extends LitElement {
         reflect: true
       },
       active: Boolean,
-      timing: Number
+      timing: Number,
+      closebtn: {
+        type: Boolean,
+        reflect: true
+      }
     }
   }
 
   constructor () {
     super()
     this.title = '🌰 ... SnackBar Title' || ''
-    this.timing = 3000
+    this.timing = 5000
   }
 
   connectedCallback () {
     super.connectedCallback()
+    this.addEventListener('click', this.#deactivate)
+
+    console.log('@CLOSE-BTN >> ', this.closebtn)
   }
 
   disconnectedCallback () {
@@ -136,6 +152,20 @@ class SnackBar extends LitElement {
     super.disconnectedCallback()
   }
 
+  /**
+   * Direct method to show the snackbar
+   * @returns {void}
+   */
+  show (msg, time=2700, bkColor='#333', txtColor='#f5f5f5') {
+    
+    this.title = msg
+    this.timing = time
+
+    this.style.setProperty('--snack-bk-color', bkColor)
+    this.style.setProperty('--snack-txt-color', txtColor)
+    this.setAttribute('active', '')
+  }
+
   updated (changed) {
     if (changed.has('active')) {
       if (this.hasAttribute('active')) {
@@ -179,12 +209,18 @@ class SnackBar extends LitElement {
             ${this.title}
           </p>
 
-          <button @click=${this.closeSnackbar}>
-            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
-              <path d="M0 0h24v24H0V0z" fill="none"/>
-              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
-            </svg>
-          </button>
+          ${this.closebtn ?
+            html`
+              <!-- deprecated -->
+              <button
+                id="snackBtn"
+                @click=${this.closeSnackbar}>
+                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
+                  <path d="M0 0h24v24H0V0z" fill="none"/>
+                  <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/>
+                </svg>
+              </button>` : null
+          }
 
         </div>
       </div>

package/vite.config.js

@@ -3,15 +3,20 @@ import { resolve } from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  build: {
-    lib: {
-      entry: 'snack-bar.js',
-      formats: ['es']
-    },
-    rollupOptions: {
-      input: {
-        main: resolve(__dirname, 'index.html')
-      }
-    }
-  }
-})
+	build: {
+		lib: {
+			entry: 'src/app-lite.js',
+			formats: ['es']
+		},
+		rollupOptions: {
+			input: {
+				main: resolve(__dirname, 'index.html')
+			}
+		}
+	},
+	esbuild: {
+		supported: {
+			'top-level-await': true	// top-level-await feature
+		}
+	}
+})