feat: allow class array in containerClass and wrapperClass theme

Author: stafyniaksacha

README.md

@@ -72,8 +72,9 @@ const { $nt } = useNuxtApp()
 
 $nt.show({
   /**
-   * The content of the toast, can be a render function
+   * The content of the toast, can be a render function (a.k.a stateless component)
    * 
+   * @type {string | number | Record<string, any> | (() => Component)}
    * @required
    */
   content: 'Hello world',
@@ -84,7 +85,6 @@ $nt.show({
    * @default 5000
    */
   duration: 5000,
-  
 
   /**
    * Pause the duration timer on hover, or focus
@@ -122,8 +122,26 @@ $nt.show({
    * The theme used for the toast
    */
   theme: {
+    /**
+     * The container id where the toast will be rendered
+     * If not exists, it will be created automatically
+     * 
+     * @default 'nt-container'
+     */
     containerId: 'nt-container',
+    /**
+     * The class name for the toaster container (applyed to toast container)
+     * 
+     * @type {string | string[]}
+     * @default ''
+     */
     containerClass: 'nt-container-class',
+    /**
+     * The class name for the toast wrapper (applyed to each toast)
+     * 
+     * @type {string | string[]}
+     * @default ''
+     */
     wrapperClass: 'nt-wrapper-class',
   }
 })
@@ -245,11 +263,11 @@ export default defineNuxtPlugin(() => {
       'flex-col-reverse',
       'items-start',
       'gap-2'
-    ].join(' '),
+    ],
     wrapperClass: [
       'pointer-events-auto',
       'cursor-pointer',
-    ].join(' '),
+    ],
   }
 
   // set default show options here

playground/app.vue

@@ -20,7 +20,7 @@ function showCustomToast() {
         message: `Hello ${i} from Nuxt module playground!`
       }),
     transition: {
-      name: 'fadeOut'
+      name: 'toaster'
     },
     maxToasts: 5,
     theme: {
@@ -34,7 +34,7 @@ function showCustomToast() {
         'flex-col-reverse',
         'items-start',
         'gap-2'
-      ].join(' '),
+      ],
       wrapperClass: 'pointer-events-auto cursor-pointer'
     }
   })
@@ -60,7 +60,7 @@ async function showAdvancedToast() {
         'flex-col',
         'items-end',
         'gap-2'
-      ].join(' '),
+      ],
       wrapperClass: [
         'pointer-events-auto',
         'rounded',
@@ -70,7 +70,7 @@ async function showAdvancedToast() {
         'focus:outline-2',
         'focus-within:outline',
         'focus-within:outline-2'
-      ].join(' ')
+      ]
     },
     transition: {
       enterActiveClass: 'transition duration-300 ease-out',
@@ -129,137 +129,25 @@ function clearTopLeftToast() {
 </template>
 
 <style>
-// Animations are taken from animate.css
-// https://daneden.github.io/animate.css
-.fadeOut {
-  animation-name: fadeOut;
+.toaster-enter-active,
+.toaster-leave-active {
+  transform: translateY(0);
+  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
 }
-.fadeInDown {
-  animation-name: fadeInDown;
-}
-.fadeInUp {
-  animation-name: fadeInUp;
-}
-.fade-enter-active {
-  transition: opacity 300ms ease-in;
-}
-.fade-leave-active {
-  transition: opacity 150ms ease-out;
-}
-.fade-enter,
-.fade-leave-to {
+
+.toaster-enter-from {
+  transform: translateY(100%);
   opacity: 0;
 }
-@-moz-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@-webkit-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@-o-keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@-moz-keyframes fadeInDown {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-webkit-keyframes fadeInDown {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-o-keyframes fadeInDown {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@keyframes fadeInDown {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, -100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-moz-keyframes fadeInUp {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-webkit-keyframes fadeInUp {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-@-o-keyframes fadeInUp {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
-  }
+
+.toaster-leave-to {
+  opacity: 0;
 }
-@keyframes fadeInUp {
-  from {
-    opacity: 0.5;
-    transform: translate3d(0, 100%, 0);
-  }
-  to {
-    opacity: 1;
-    transform: none;
+
+@media (prefers-reduced-motion: reduce) {
+  .toaster-enter-active,
+  .toaster-leave-active {
+    transition: none;
   }
 }
 </style>

src/runtime/components/NinjaToaster.ts

@@ -221,7 +221,10 @@ export default defineComponent({
           {
             role: 'alert',
             tabindex: 0,
-            class: props.theme?.wrapperClass,
+            class:
+              props.theme && Array.isArray(props.theme?.wrapperClass)
+                ? props.theme.wrapperClass.join(' ')
+                : props.theme?.wrapperClass,
             onMouseover,
             onMouseleave,
             onFocus,

src/runtime/composables/useNinjaToasterContainer.ts

@@ -18,7 +18,9 @@ export function useNinjaToasterContainer(theme?: NinjaToasterTheme) {
     }
 
     if (theme?.containerClass) {
-      container.value.className = theme.containerClass
+      container.value.className = Array.isArray(theme.containerClass)
+        ? theme.containerClass.join(' ')
+        : theme.containerClass
     }
   })
 

src/runtime/create.ts

@@ -42,6 +42,15 @@ export interface NinjaToasterShow {
   close: () => void
 }
 
+function ensureClassesArray(theme: NinjaToasterTheme) {
+  if (theme?.containerClass && !Array.isArray(theme.containerClass)) {
+    theme.containerClass = [theme.containerClass]
+  }
+  if (theme?.wrapperClass && !Array.isArray(theme.wrapperClass)) {
+    theme.wrapperClass = [theme.wrapperClass]
+  }
+}
+
 export function createNinjaToaster(
   createProps: Omit<NinjaToasterProps, 'content'> = {}
 ) {
@@ -59,6 +68,10 @@ export function createNinjaToaster(
         ? { content: options }
         : options
 
+    ensureClassesArray(userProps.theme)
+    ensureClassesArray(createProps.theme)
+    ensureClassesArray(appConfigProps.theme)
+
     const props: NinjaToasterProps = defu(
       userProps,
       createProps,

src/theme.d.ts

@@ -1,5 +1,5 @@
 export interface NinjaToasterTheme {
   containerId: string;
-  containerClass?: string;
-  wrapperClass?: string;
+  containerClass?: string | string[];
+  wrapperClass?: string | string[];
 }