add position context

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vt-notifications",
   "description": "A headless vue notification library to use with tailwind",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "author": "sansil",
   "main": "src/index.js",
   "scripts": {
@@ -38,4 +38,4 @@
     "toast"
   ],
   "license": "MIT"
-}
+}

src/VTNotification.vue

@@ -3,7 +3,7 @@
 import { state, methods } from "./notifications.js";
 export default {
   inject: {
-    context: { default: { group: "" } },
+    context: { default: { group: "", position: "top" } },
   },
   props: {
     maxNotifications: {
@@ -22,7 +22,7 @@ export default {
           leaveActiveClass: "transition ease-in duration-500",
           leaveClass: "opacity-100",
           leaveToClass: "opacity-0",
-          moveClass: "transition duration-500 ",
+          moveClass: "transition duration-500",
         };
       },
     },
@@ -59,6 +59,9 @@ export default {
   },
   computed: {
     sortedNotifications() {
+      if (this.context.position === "bottom")
+        return [...this.notificationsByGroup].slice(0, this.maxNotifications);
+      // if not bottom reverse the array
       return [...this.notificationsByGroup]
         .reverse()
         .slice(0, this.maxNotifications);

src/VTNotificationGroup.vue

@@ -7,10 +7,18 @@ export default {
       type: String,
       default: "",
     },
+    position: {
+      type: String,
+      default: "top",
+      validator(value) {
+        return ["top", "bottom"].includes(value);
+      },
+    },
   },
+
   provide() {
     return {
-      ["context"]: { group: this.group },
+      ["context"]: { group: this.group, position: this.position },
     };
   },
   render() {