rails_toastify 1.2.2 → 1.2.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1b33f974a6a2c7082875d59e1861b5068adfe03690b1d10b8e626890861e8304
-  data.tar.gz: e8f8c63dc7cef4462107e42aa964c95c400c3e78a4d8e9c290d598f90be8d84e
+  metadata.gz: 945c13b91a63c76ae7495b43253a3f2db190158570c702608c27da46e643bc93
+  data.tar.gz: d745890b255432f0444a51ed46391514f3454abffe24d443c41d774b0715f356
 SHA512:
-  metadata.gz: 4633023ac4bd9623d4bd55f7a3fa539bd40451050bdaa11ded8fc0d22157f38bfd7fc6400efa8f5a86f8c05b371b7d299187063c8ea84b1c34a12dcf48a607ce
-  data.tar.gz: fe246823ad90aa9e634bda710e0026ce02baf8a28e9881ae16fa2ad626ff62c5596a244d2c77e4f97114ec6d454530b36c3fcb923db2e07917a502ebe9016b94
+  metadata.gz: 2b5d18bd374d5cd845ad9a91f68ba9985f3e05a02133464e586eac92b573c9b1dd36c088fef83c00622b2f897e187519ec8dc3acb3e9d66cdcbfe4ed7264cadd
+  data.tar.gz: c577e75f695069e74e3d22b94e81890d6025375f6d7da1622699a74ab1172715f3f8631c0a8d77a19b8d95bb66ec0bae4ef81287a005ee51d525c01c8f0c5eac

data/CHANGELOG.md

@@ -1,3 +1,18 @@
+## 1.2.3
+
+- Fix position configuration bug (position classes now properly override default positioning)
+- Fix progress bar duration bug (was hardcoded to 3000ms, now respects configured duration)
+- Replace Font Awesome dependency for close button with inline SVG
+- Add type-specific SVG icons (info, success, warning, error) matching React Toastify
+- Add "colored" theme support
+- Add exit animations (bounce, slide, zoom, flip)
+- Add top-center and bottom-center position options
+- Add CSS variables for easy customization
+- Add z-index (9999) to toast container
+- Update visual styling to match React Toastify (dimensions, colors, shadows, typography)
+- Add mobile responsive layout
+- Improve RailsToastify.show() to use notice defaults when called without explicit options
+
 ## 1.2.2
 
 - Fix relative field to helpers to force autoload before include

data/README.md

@@ -25,13 +25,13 @@ This will create a file *config/initializers/rails_toastify.rb* where you can de
 
 ```ruby
 RailsToastify.setup do |configuration|
-  configuration.position = 'toast-container-top-right'
-  configuration.notice_animation = 'bounce' # bounce, slide, flip, zoom 
+  configuration.position = 'toast-container-top-right' # top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
+  configuration.notice_animation = 'bounce' # bounce, slide, flip, zoom
   configuration.alert_animation = 'slide' # bounce, slide, flip, zoom
   configuration.notice_duration = 3000
   configuration.alert_duration = 3000
-  configuration.notice_theme = 'light' # light, dark
-  configuration.alert_theme = 'light' # light, dark
+  configuration.notice_theme = 'light' # light, dark, colored
+  configuration.alert_theme = 'light' # light, dark, colored
   configuration.notice_type = 'default' # default, success, warning, error, info
   configuration.alert_type = 'error' # default, success, warning, error, info
 end
@@ -87,9 +87,8 @@ To see notice or alert in a toast add this in application.html.erb:
 ## Next steps
 
 - Add tests
-- Add others positions (left, center, bottom)
-- Add fade in and fade out animation
 - In addition to the colors, allow the user to choose any color for the progress bar
+- Add drag to close support
 
 ## Requirements
 

data/app/assets/javascripts/rails_toastify.js

@@ -1,19 +1,47 @@
-const totalDuration = 3000;
 let toastIdCounter = 0;
 
+const TOAST_ICONS = {
+  info: '<svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor"><path d="M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"/></svg>',
+  success: '<svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor"><path d="M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"/></svg>',
+  warning: '<svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor"><path d="M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.232-1.747-.68-2.441zM12.002 7a1.5 1.5 0 011.5 1.5v5a1.5 1.5 0 01-3 0v-5a1.5 1.5 0 011.5-1.5zm-.004 12a2 2 0 110-4 2 2 0 010 4z"/></svg>',
+  error: '<svg viewBox="0 0 24 24" width="100%" height="100%" fill="currentColor"><path d="M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"/></svg>'
+};
+
+const CLOSE_SVG = '<svg viewBox="0 0 14 14" width="14" height="14" fill="currentColor"><path d="M14 1.41L12.59 0 7 5.59 1.41 0 0 1.41 5.59 7 0 12.59 1.41 14 7 8.41 12.59 14 14 12.59 8.41 7z"/></svg>';
+
 function showToast(message, options) {
+  options = options || {};
+  const theme = options.theme || 'light';
+  const animation = options.animation || 'bounce';
+  const duration = options.duration || 3000;
+  const type = options.type || 'default';
+
   const toastContainer = document.getElementById('toast-container');
-  
+  if (!toastContainer) return;
+
+  const currentId = toastIdCounter;
   const toast = document.createElement('div');
-  toast.className = `toast toast-${options.theme} show ${options.animation}`;
-  toast.id = `toast-${toastIdCounter}`;
+  toast.id = `toast-${currentId}`;
+  toast.setAttribute('data-animation', animation);
 
-  /* Adicione a respectiva classe para mudar a cor da progress-bar */
-  toast.innerHTML = `
-    <div>${message}</div>
-    <div class="progress-bar progress-bar-${options.type}" id="progress-bar-${toastIdCounter}"></div>
-    <span class="close-icon" onclick="hideToast(${toastIdCounter})"><i class="fas fa-times"></i></span>
-  `;
+  let classes = `toast toast-${theme} show ${animation}`;
+  if (type !== 'default') {
+    classes += ` toast-type-${type}`;
+  }
+  toast.className = classes;
+
+  let iconHtml = '';
+  if (type !== 'default' && TOAST_ICONS[type]) {
+    iconHtml = `<div class="toast-icon toast-icon-${type}">${TOAST_ICONS[type]}</div>`;
+  }
+
+  toast.innerHTML =
+    `<div class="toast-body">` +
+      iconHtml +
+      `<div class="toast-message">${message}</div>` +
+    `</div>` +
+    `<span class="close-icon" onclick="hideToast(${currentId})" aria-label="close">${CLOSE_SVG}</span>` +
+    `<div class="progress-bar progress-bar-${type}" id="progress-bar-${currentId}"></div>`;
 
   toastContainer.appendChild(toast);
   toastIdCounter++;
@@ -21,10 +49,9 @@ function showToast(message, options) {
   const progressBar = toast.querySelector('.progress-bar');
   progressBar.style.width = '100%';
 
-  let remainingTime = options.duration;
+  let remainingTime = duration;
   let lastUpdateTime = Date.now();
   let paused = false;
-  let intervalId;
 
   function updateProgressBar() {
     if (!paused) {
@@ -33,16 +60,12 @@ function showToast(message, options) {
       remainingTime -= elapsedTime;
       lastUpdateTime = currentTime;
 
-      const progress = (remainingTime / totalDuration) * 100;
-      progressBar.style.width = `${progress}%`;
+      const progress = (remainingTime / duration) * 100;
+      progressBar.style.width = `${Math.max(progress, 0)}%`;
 
       if (remainingTime <= 0) {
         clearInterval(intervalId);
-        toast.classList.remove('show');
-        toast.classList.add('hide');
-        setTimeout(() => {
-          toast.parentElement.removeChild(toast);
-        }, 300);
+        dismissToast(toast);
         return;
       }
     }
@@ -57,20 +80,38 @@ function showToast(message, options) {
     lastUpdateTime = Date.now();
   });
 
-  intervalId = setInterval(updateProgressBar, 100);
+  const intervalId = setInterval(updateProgressBar, 100);
+  toast._intervalId = intervalId;
+}
+
+function dismissToast(toast) {
+  if (toast._intervalId) {
+    clearInterval(toast._intervalId);
+    toast._intervalId = null;
+  }
+
+  const animation = toast.getAttribute('data-animation') || 'bounce';
+  toast.classList.remove('show');
+  toast.classList.remove(animation);
+  toast.classList.add(`${animation}-exit`);
+
+  let removed = false;
+  const removeToast = () => {
+    if (!removed && toast.parentElement) {
+      removed = true;
+      toast.parentElement.removeChild(toast);
+    }
+  };
+
+  toast.addEventListener('animationend', removeToast);
+  setTimeout(removeToast, 1000);
 }
 
 function hideToast(toastId) {
   const toast = document.getElementById(`toast-${toastId}`);
   if (toast) {
-    toast.classList.remove('show');
-    toast.classList.add('hide');
-    setTimeout(() => {
-      toast.parentElement.removeChild(toast);
-    }, 300);
+    dismissToast(toast);
   }
 }
 
 window.hideToast = hideToast;
-
-/* showToast('slide'); */

data/app/assets/stylesheets/rails_toastify.css

@@ -1,127 +1,265 @@
+:root {
+  --toastify-color-light: #fff;
+  --toastify-color-dark: #121212;
+  --toastify-color-info: #3498db;
+  --toastify-color-success: #07bc0c;
+  --toastify-color-warning: #f1c40f;
+  --toastify-color-error: #e74c3c;
+  --toastify-toast-width: 320px;
+  --toastify-toast-offset: 16px;
+  --toastify-toast-min-height: 64px;
+  --toastify-toast-bd-radius: 6px;
+  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+  --toastify-font-family: sans-serif;
+  --toastify-z-index: 9999;
+  --toastify-text-color-light: #757575;
+  --toastify-text-color-dark: #fff;
+  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
+  --toastify-color-progress-dark: #bb86fc;
+}
+
+/* CONTAINER */
 .toast-container {
   position: fixed;
-  /**POSITION**/
-  top: 20px;
-  right: 20px;
-  /************/
+  z-index: var(--toastify-z-index);
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 12px;
 }
 
+/* POSITIONS */
+.toast-container-top-left {
+  top: var(--toastify-toast-offset);
+  left: var(--toastify-toast-offset);
+  bottom: auto;
+  right: auto;
+}
+.toast-container-top-right {
+  top: var(--toastify-toast-offset);
+  right: var(--toastify-toast-offset);
+  bottom: auto;
+  left: auto;
+}
+.toast-container-top-center {
+  top: var(--toastify-toast-offset);
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: auto;
+  right: auto;
+}
+.toast-container-bottom-left {
+  bottom: var(--toastify-toast-offset);
+  left: var(--toastify-toast-offset);
+  top: auto;
+  right: auto;
+}
+.toast-container-bottom-right {
+  bottom: var(--toastify-toast-offset);
+  right: var(--toastify-toast-offset);
+  top: auto;
+  left: auto;
+}
+.toast-container-bottom-center {
+  bottom: var(--toastify-toast-offset);
+  left: 50%;
+  transform: translateX(-50%);
+  top: auto;
+  right: auto;
+}
+
+/* TOAST */
 .toast {
-  /**THEME**/
-  /*  background e color serão adicionados através da classe escolhida colocando a respectiva toast-light ou toast-dark no javascript */
-  background-color: #fff;
-  color: #333;
-  /************/
-  padding: 20px;
-  border-radius: 5px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  width: var(--toastify-toast-width);
+  min-height: var(--toastify-toast-min-height);
+  padding: 8px;
+  border-radius: var(--toastify-toast-bd-radius);
+  box-shadow: var(--toastify-toast-shadow);
+  font-family: var(--toastify-font-family);
+  background-color: var(--toastify-color-light);
+  color: var(--toastify-text-color-light);
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
   display: flex;
   align-items: center;
-  justify-content: space-between;
   overflow: hidden;
   position: relative;
+  box-sizing: border-box;
+  cursor: default;
 }
 
 .toast.show {
   opacity: 1;
 }
 
+/* TOAST BODY */
+.toast-body {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  padding: 6px;
+  gap: 10px;
+}
+
+/* TYPE ICON */
+.toast-icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+}
+
+.toast-icon svg {
+  fill: currentColor;
+  width: 100%;
+  height: 100%;
+}
+
+/* CLOSE BUTTON */
 .close-icon {
-  margin-left: 10px;
+  align-self: flex-start;
+  color: #000;
+  background: transparent;
+  border: none;
+  outline: none;
   cursor: pointer;
+  opacity: 0.3;
+  transition: opacity 0.3s ease;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.close-icon:hover,
+.close-icon:focus {
+  opacity: 0.6;
+}
+
+.close-icon svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.toast-dark .close-icon,
+.toast-colored .close-icon {
+  color: #fff;
+  opacity: 0.7;
+}
+
+.toast-dark .close-icon:hover,
+.toast-dark .close-icon:focus,
+.toast-colored .close-icon:hover,
+.toast-colored .close-icon:focus {
+  opacity: 1;
 }
 
+/* PROGRESS BAR */
 .progress-bar {
   height: 5px;
   width: 100%;
-  /**TYPE**/
-  /*  background será adicionado através da classe escolhida colocando a respectiva progress bar no javascript */
-  /* background: linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55); */
-  /************/
   position: absolute;
   bottom: 0;
   left: 0;
   transition: width 0.1s linear;
 }
 
-/* THEME */
+/* THEMES */
 .toast-light {
-  background-color: #fff;
-  color: #333;
+  background-color: var(--toastify-color-light);
+  color: var(--toastify-text-color-light);
 }
+
 .toast-dark {
-  background-color: #333;
+  background-color: var(--toastify-color-dark);
+  color: var(--toastify-text-color-dark);
+}
+
+.toast-colored.toast-type-info {
+  background-color: var(--toastify-color-info);
   color: #fff;
 }
 
-/* TYPE */
-.progress-bar-success {
-  background-color: #4caf50;
+.toast-colored.toast-type-success {
+  background-color: var(--toastify-color-success);
+  color: #fff;
 }
-.progress-bar-info {
-  background-color: #2196f3;
+
+.toast-colored.toast-type-warning {
+  background-color: var(--toastify-color-warning);
+  color: #fff;
 }
-.progress-bar-error {
-  background-color: #f44336;
+
+.toast-colored.toast-type-error {
+  background-color: var(--toastify-color-error);
+  color: #fff;
 }
-.progress-bar-warning {
-  background-color: #ff9800;
+
+/* TYPE ICON COLORS */
+.toast-icon-info {
+  color: var(--toastify-color-info);
+}
+
+.toast-icon-success {
+  color: var(--toastify-color-success);
+}
+
+.toast-icon-warning {
+  color: var(--toastify-color-warning);
+}
+
+.toast-icon-error {
+  color: var(--toastify-color-error);
 }
+
+.toast-colored .toast-icon {
+  color: #fff;
+}
+
+/* PROGRESS BAR TYPES */
 .progress-bar-default {
-  background: linear-gradient(90deg,#4cd964,#5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55);
+  background: var(--toastify-color-progress-light);
 }
 
-/* POSITION */
-.toast-container-top-left {
-  top: 20px;
-  left: 20px;
+.progress-bar-success {
+  background-color: var(--toastify-color-success);
 }
-.toast-container-top-right {
-  top: 20px;
-  right: 20px;
+
+.progress-bar-info {
+  background-color: var(--toastify-color-info);
 }
-.toast-container-bottom-left {
-  bottom: 20px;
-  left: 20px;
+
+.progress-bar-error {
+  background-color: var(--toastify-color-error);
 }
-.toast-container-bottom-right {
-  bottom: 20px;
-  right: 20px;  
+
+.progress-bar-warning {
+  background-color: var(--toastify-color-warning);
 }
 
-/* ANIMATION */
-/* BOUNCE */
-/* @keyframes bounce-in {
-  0% {
-    transform: scale(0.8);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-  }
+.toast-dark .progress-bar-default {
+  background: var(--toastify-color-progress-dark);
 }
 
-.toast.bounce {
-  animation: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-} */
+.toast-colored .progress-bar {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+/* ENTRY ANIMATIONS */
 
+/* BOUNCE */
 @keyframes bounce-all {
   from,
   60%,
   75%,
   90%,
   to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
   }
   from {
     opacity: 0;
-    transform: translate3d(500px, 0, 0);
+    transform: translate3d(3000px, 0, 0);
   }
   60% {
     opacity: 1;
@@ -139,53 +277,166 @@
 }
 
 .toast.bounce {
-  animation: bounce-all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  animation: bounce-all 0.7s both;
 }
 
 /* SLIDE */
 @keyframes slide-in {
-  0% {
-    transform: translateX(100%);
-    opacity: 0;
+  from {
+    transform: translate3d(110%, 0, 0);
+    visibility: visible;
   }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
+  to {
+    transform: translate3d(0, 0, 0);
   }
 }
 
 .toast.slide {
-  animation: slide-in 0.2s ease-out;
+  animation: slide-in 0.3s ease-out both;
 }
 
 /* ZOOM */
 @keyframes zoom-in {
-  0% {
-    transform: scale(0);
+  from {
     opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
   }
-  100% {
-    transform: scale(1);
+  50% {
     opacity: 1;
   }
 }
 
 .toast.zoom {
-  animation: zoom-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  animation: zoom-in 0.3s both;
 }
 
 /* FLIP */
 @keyframes flip-in {
-  0% {
-    transform: rotateY(-90deg);
+  from {
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+    animation-timing-function: ease-in;
     opacity: 0;
   }
-  100% {
-    transform: rotateY(0);
+  40% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+    animation-timing-function: ease-in;
+  }
+  60% {
+    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
     opacity: 1;
   }
+  80% {
+    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+  }
+  to {
+    transform: perspective(400px);
+  }
 }
 
 .toast.flip {
-  animation: flip-in 0.5s ease-in-out;
-}
+  animation: flip-in 0.5s ease-in-out both;
+}
+
+/* EXIT ANIMATIONS */
+
+@keyframes bounce-out-right {
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  20% {
+    opacity: 1;
+    transform: translate3d(-20px, 0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+}
+
+@keyframes slide-out-right {
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(110%, 0, 0);
+  }
+}
+
+@keyframes zoom-out {
+  from {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+  50% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes flip-out {
+  from {
+    opacity: 1;
+    transform: perspective(400px);
+  }
+  30% {
+    opacity: 1;
+    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+  }
+  to {
+    opacity: 0;
+    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+  }
+}
+
+.toast.bounce-exit {
+  animation: bounce-out-right 0.7s both;
+}
+
+.toast.slide-exit {
+  animation: slide-out-right 0.3s ease-in both;
+}
+
+.toast.zoom-exit {
+  animation: zoom-out 0.3s both;
+}
+
+.toast.flip-exit {
+  animation: flip-out 0.5s ease-in-out both;
+}
+
+/* MOBILE RESPONSIVE */
+@media only screen and (max-width: 480px) {
+  .toast-container {
+    width: 100vw;
+    padding: 0;
+    margin: 0;
+  }
+  .toast-container-top-left,
+  .toast-container-top-right,
+  .toast-container-top-center {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: auto;
+    transform: none;
+  }
+  .toast-container-bottom-left,
+  .toast-container-bottom-right,
+  .toast-container-bottom-center {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: auto;
+    transform: none;
+  }
+  .toast {
+    width: 100%;
+    border-radius: 0;
+  }
+}

data/app/helpers/rails_toastify_helper.rb

@@ -10,7 +10,13 @@ module RailsToastifyHelper
           window.RailsToastify = {
             config: #{RailsToastify.configuration.to_h.to_json},
             show: function(message, options) {
-              options = Object.assign({}, this.config, options || {});
+              var defaults = {
+                theme: this.config.notice_theme || 'light',
+                animation: this.config.notice_animation || 'bounce',
+                duration: this.config.notice_duration || 3000,
+                type: this.config.notice_type || 'default'
+              };
+              options = Object.assign({}, defaults, options || {});
               showToast(message, options);
             }
           };

data/lib/generators/rails_toastify/install/templates/rails_toastify.rb

@@ -1,11 +1,11 @@
 RailsToastify.setup do |configuration|
-  configuration.position = 'toast-container-top-right'
-  configuration.notice_animation = 'bounce' # bounce, slide, flip, zoom 
+  configuration.position = 'toast-container-top-right' # top-right, top-left, top-center, bottom-right, bottom-left, bottom-center
+  configuration.notice_animation = 'bounce' # bounce, slide, flip, zoom
   configuration.alert_animation = 'slide' # bounce, slide, flip, zoom
   configuration.notice_duration = 3000
   configuration.alert_duration = 3000
-  configuration.notice_theme = 'light' # light, dark
-  configuration.alert_theme = 'light' # light, dark
+  configuration.notice_theme = 'light' # light, dark, colored
+  configuration.alert_theme = 'light' # light, dark, colored
   configuration.notice_type = 'default' # default, success, warning, error, info
   configuration.alert_type = 'error' # default, success, warning, error, info
 end

data/lib/rails_toastify/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module RailsToastify
-  VERSION = "1.2.2"
+  VERSION = "1.2.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: rails_toastify
 version: !ruby/object:Gem::Version
-  version: 1.2.2
+  version: 1.2.3
 platform: ruby
 authors:
 - Elton Santos
-autorequire: 
+autorequire:
 bindir: exe
 cert_chain: []
-date: 2024-10-19 00:00:00.000000000 Z
+date: 2026-03-25 00:00:00.000000000 Z
 dependencies: []
 description: "\U0001F389 Rails Toastify allows you to add notifications to your app
   with ease. Pay Attention: this gem still is in development. Please CONTRIBUTE"
@@ -39,7 +39,7 @@ metadata:
   homepage_uri: https://github.com/eltonsantos/rails_toastify
   source_code_uri: https://github.com/eltonsantos/rails_toastify
   changelog_uri: https://github.com/eltonsantos/rails_toastify/blob/master/CHANGELOG.md
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -54,8 +54,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.3
-signing_key: 
+rubygems_version: 3.5.11
+signing_key:
 specification_version: 4
 summary: "\U0001F389 Rails Toastify allows you to add notifications to your app with
   ease."