vue-notifyr 0.1.0

package/dist/style.css

@@ -0,0 +1,245 @@
+@import url(https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap);
+
+:root {
+  --notification-info: #385bbb;
+  --notification-info-rgb: 56, 91, 187;
+  --notification-info-darker: hsl(224, 54%, 35%);
+  --notification-warning: #f3950d;
+  --notification-warning-rgb: 243, 149, 13;
+  --notification-warning-darker: hsl(35, 91%, 40%);
+  --notification-error: #d32f2f;
+  --notification-error-rgb: 211, 47, 47;
+  --notification-error-darker: hsl(0, 68%, 43%);
+  --notification-success: #388e3c;
+  --notification-success-rgb: 56, 142, 60;
+  --notification-success-darker: hsl(120, 54%, 35%);
+}
+
+@keyframes notificationSlideFromTop {
+  0% {
+    opacity: 0;
+    translate: 0 calc(-100% - 24px);
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes notificationSlideFromBottom {
+  0% {
+    opacity: 0;
+    translate: 0 calc(100% + 24px);
+  }
+  100% {
+    opacity: 1;
+    translate: 0 0;
+  }
+}
+
+@keyframes notificationFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes progressBar {
+  0% {
+    transform: scaleX(1);
+  }
+  100% {
+    transform: scaleX(0);
+  }
+}
+
+.notification-list {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  pointer-events: none;
+  z-index: 99999;
+  width: max-content;
+  max-width: calc(100vw - 48px);
+}
+
+.notification-list > * {
+  pointer-events: auto;
+}
+
+.notification-list[data-position^='top'] {
+  top: 24px;
+}
+
+.notification-list[data-position^='bottom'] {
+  bottom: 24px;
+}
+
+.notification-list[data-position$='left'] {
+  left: 24px;
+  right: auto;
+  transform: none;
+  align-items: flex-start;
+}
+
+.notification-list[data-position$='center'] {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.notification-list[data-position$='right'] {
+  right: 24px;
+  left: auto;
+  transform: none;
+  align-items: flex-end;
+}
+
+.notification {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  padding-right: 50px;
+  min-width: 280px;
+  max-width: 400px;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 2px solid transparent;
+  font-family: 'Nunito Sans', system-ui, helvetica, sans-serif;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+  box-shadow:
+    0 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+  color: var(--notification-info-darker);
+  background-clip: padding-box;
+}
+
+.notification-list[data-position^='top'] .notification {
+  animation: notificationSlideFromTop 0.5s ease-out forwards;
+}
+
+.notification-list[data-position^='bottom'] .notification {
+  animation: notificationSlideFromBottom 0.5s ease-out forwards;
+}
+
+.notification.notification-success {
+  color: var(--notification-success);
+  border-color: var(--notification-success);
+}
+
+.notification.notification-error {
+  color: var(--notification-error);
+  border-color: var(--notification-error);
+}
+
+.notification.notification-warning {
+  color: var(--notification-warning);
+  border-color: var(--notification-warning);
+}
+
+.notification.notification-info {
+  color: var(--notification-info);
+  border-color: var(--notification-info);
+}
+
+.notification-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.notification-title {
+  font-weight: 600;
+  font-size: 15px;
+  line-height: 1.4;
+}
+
+.notification-progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+  border-radius: 50px;
+  transform-origin: left;
+  background-color: currentColor;
+  animation: progressBar linear forwards;
+}
+
+.notification-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.notification-close button {
+  padding: 8px;
+  margin: 0;
+  border: none;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+  color: inherit;
+  font-size: 16px;
+  line-height: 1;
+}
+
+.notification-close button:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.notification-close button:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.notification-enter-active,
+.notification-leave-active {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+
+.notification-enter-from,
+.notification-leave-to {
+  opacity: 0;
+}
+
+.notification-list[data-position^='top'] .notification-enter-from,
+.notification-list[data-position^='top'] .notification-leave-to {
+  transform: translateY(-16px);
+}
+
+.notification-list[data-position^='bottom'] .notification-enter-from,
+.notification-list[data-position^='bottom'] .notification-leave-to {
+  transform: translateY(16px);
+}
+
+.notification-move {
+  transition: transform 0.2s ease;
+}
+
+@media (max-width: 480px) {
+  .notification {
+    min-width: calc(100vw - 48px);
+    max-width: calc(100vw - 48px);
+  }
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "vue-notifyr",
+  "version": "0.1.0",
+  "description": "Framework-agnostic notification library with Vue, Nuxt, and Inertia support",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css",
+    "./vue": "./dist/adapters/vue/index.js",
+    "./nuxt": "./dist/adapters/nuxt/index.js",
+    "./inertia": "./dist/adapters/inertia/index.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build && node scripts/copy-css.js",
+    "dev": "vite build --watch",
+    "lint": "eslint src --ext .ts,.vue",
+    "lint:fix": "eslint src --ext .ts,.vue --fix",
+    "format": "prettier --write src/**/*.{ts,vue,css}",
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
+  },
+  "license": "MIT",
+  "author": "Rayhan Bapari <mdrayhanbapari02@gmail.com>",
+  "keywords": [
+    "vue",
+    "nuxt",
+    "inertia",
+    "notification",
+    "toast",
+    "typescript",
+    "framework-agnostic"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rayhan-bapari/vue-notifyr"
+  },
+  "bugs": {
+    "url": "https://github.com/rayhan-bapari/vue-notifyr/issues"
+  },
+  "homepage": "https://github.com/rayhan-bapari/vue-notifyr#readme",
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "eslint": "^8.0.0",
+    "prettier": "^3.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vue": "^3.3.0"
+  }
+}

package/src/adapters/inertia/index.ts

@@ -0,0 +1,2 @@
+// Inertia adapter - since Inertia uses Vue, we re-export the Vue adapter
+export * from '../vue';

package/src/adapters/nuxt/index.ts

@@ -0,0 +1,24 @@
+import { notificationManager } from '../../core/notification-manager';
+
+/**
+ * Nuxt plugin for notification management.
+ * Integrates the notification manager into Nuxt applications.
+ */
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(createVueNotificationPlugin(notificationManager));
+});
+
+/**
+ * Create Vue plugin for Nuxt (internal use).
+ */
+function createVueNotificationPlugin(manager: any) {
+  return {
+    install(app: any) {
+      app.config.globalProperties.$notificationManager = manager;
+      app.provide('notificationManager', manager);
+    },
+  };
+}
+
+// Re-export Vue adapter functions for convenience
+export { useNotificationManager, createReactiveNotificationStore, notificationStore } from '../vue';

package/src/adapters/vue/NotificationContainer.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { notificationStore } from './index';
+import { notificationManager } from '../../core/notification-manager';
+import type { NotificationItem, NotificationPosition } from '../../types';
+
+const isClient = ref(false);
+
+if (typeof window !== 'undefined') {
+  isClient.value = true;
+}
+
+const groups = computed<Record<NotificationPosition, NotificationItem[]>>(() => {
+  const map: Record<NotificationPosition, NotificationItem[]> = {
+    'top-left': [],
+    'top-center': [],
+    'top-right': [],
+    'bottom-left': [],
+    'bottom-center': [],
+    'bottom-right': [],
+  };
+  for (const notification of notificationStore.notifications) {
+    map[notification.options.position].push(notification);
+  }
+  return map;
+});
+
+function removeNotification(id: number) {
+  notificationManager.remove(id);
+}
+</script>
+
+<template>
+  <Teleport v-if="isClient" to="body">
+    <TransitionGroup
+      v-for="(items, pos) in groups"
+      :key="pos"
+      tag="div"
+      name="notification"
+      class="notification-list"
+      :data-position="pos"
+    >
+      <article
+        v-for="notification in items"
+        :key="notification.id"
+        class="notification"
+        :class="[
+          `notification-${notification.type}`,
+          {
+            'notification-auto-close':
+              notification.options.progress && notification.options.autoClose !== false,
+          },
+        ]"
+        :data-position="pos"
+      >
+        <div class="notification-content">
+          <span class="notification-title">{{ notification.title }}</span>
+        </div>
+
+        <div
+          v-if="notification.options.progress && notification.options.autoClose !== false"
+          class="notification-progress"
+          :style="{ animationDuration: (notification.options.autoClose || 0) + 'ms' }"
+        ></div>
+
+        <div class="notification-close">
+          <button
+            type="button"
+            @click="removeNotification(notification.id)"
+            aria-label="Dismiss notification"
+          >
+            ×
+          </button>
+        </div>
+      </article>
+    </TransitionGroup>
+  </Teleport>
+</template>

package/src/adapters/vue/index.ts

@@ -0,0 +1,70 @@
+import { reactive, watchEffect } from 'vue';
+import { NotificationManager, notificationManager } from '../../core/notification-manager';
+import type { NotificationItem, NotificationOptions } from '../../types';
+
+export interface ReactiveNotificationStore {
+  notifications: NotificationItem[];
+  options: NotificationOptions;
+}
+
+/**
+ * Create a reactive store for Vue that syncs with the NotificationManager.
+ * @param manager - The NotificationManager instance (optional, uses default if not provided)
+ * @returns Reactive store
+ */
+export function createReactiveNotificationStore(
+  manager: NotificationManager = notificationManager
+): ReactiveNotificationStore {
+  const store = reactive({
+    notifications: manager.getNotifications(),
+    options: manager.getOptions(),
+  });
+
+  // Sync notifications
+  manager.on('notification-added', () => {
+    store.notifications = manager.getNotifications();
+  });
+  manager.on('notification-removed', () => {
+    store.notifications = manager.getNotifications();
+  });
+  manager.on('notifications-cleared', () => {
+    store.notifications = manager.getNotifications();
+  });
+
+  // Sync options
+  manager.on('options-changed', () => {
+    store.options = manager.getOptions();
+  });
+
+  return store;
+}
+
+// Default reactive store
+export const notificationStore = createReactiveNotificationStore();
+
+// Vue composable
+export function useNotificationManager(manager: NotificationManager = notificationManager) {
+  return {
+    success: (title: string, opts?: NotificationOptions) => manager.success(title, opts),
+    error: (title: string, opts?: NotificationOptions) => manager.error(title, opts),
+    warning: (title: string, opts?: NotificationOptions) => manager.warning(title, opts),
+    info: (title: string, opts?: NotificationOptions) => manager.info(title, opts),
+    show: (type: string, title: string, opts?: NotificationOptions) =>
+      manager.show(type as any, title, opts),
+    remove: (id: number) => manager.remove(id),
+    clear: () => manager.clear(),
+    setDefaults: (opts: NotificationOptions) => manager.setDefaults(opts),
+    getNotifications: () => manager.getNotifications(),
+    getOptions: () => manager.getOptions(),
+  };
+}
+
+// Vue plugin
+export function createVueNotificationPlugin(manager: NotificationManager = notificationManager) {
+  return {
+    install(app: any) {
+      app.config.globalProperties.$notificationManager = manager;
+      app.provide('notificationManager', manager);
+    },
+  };
+}

package/src/composables/useNotification.ts

@@ -0,0 +1,11 @@
+import { useNotificationManager } from '../adapters/vue';
+
+/**
+ * Vue composable for notification management.
+ * Provides a clean API to show notifications in Vue components.
+ *
+ * @returns Notification manager API
+ */
+export function useNotification() {
+  return useNotificationManager();
+}

package/src/core/notification-manager.ts

@@ -0,0 +1,151 @@
+import type { NotificationType, NotificationOptions, NotificationItem } from '../types';
+
+const DEFAULT_OPTIONS: Required<NotificationOptions> = {
+  position: 'top-center',
+  autoClose: 3000,
+  progress: true,
+};
+
+export class NotificationManager {
+  private notifications: NotificationItem[] = [];
+  private options: Required<NotificationOptions> = { ...DEFAULT_OPTIONS };
+  private listeners: { [event: string]: Function[] } = {};
+  private idCounter = 1;
+
+  /**
+   * Subscribe to an event.
+   * @param event - The event name ('notification-added', 'notification-removed', 'notifications-cleared', 'options-changed')
+   * @param callback - The callback function
+   */
+  on(event: string, callback: Function): void {
+    if (!this.listeners[event]) {
+      this.listeners[event] = [];
+    }
+    this.listeners[event].push(callback);
+  }
+
+  /**
+   * Unsubscribe from an event.
+   * @param event - The event name
+   * @param callback - The callback function to remove
+   */
+  off(event: string, callback: Function): void {
+    if (this.listeners[event]) {
+      this.listeners[event] = this.listeners[event].filter((cb) => cb !== callback);
+    }
+  }
+
+  private emit(event: string, data?: any): void {
+    if (this.listeners[event]) {
+      this.listeners[event].forEach((callback) => callback(data));
+    }
+  }
+
+  /**
+   * Set default options for notifications.
+   * @param opts - The options to set as defaults
+   */
+  setDefaults(opts: NotificationOptions): void {
+    this.options = { ...this.options, ...opts };
+    this.emit('options-changed', this.options);
+  }
+
+  /**
+   * Show a notification.
+   * @param type - The type of notification
+   * @param title - The title/message of the notification
+   * @param opts - Optional override options
+   */
+  show(type: NotificationType, title: string, opts?: NotificationOptions): void {
+    const options = { ...this.options, ...(opts || {}) };
+    const item: NotificationItem = {
+      id: this.idCounter++,
+      type,
+      title,
+      options,
+      createdAt: Date.now(),
+    };
+    this.notifications.push(item);
+    this.emit('notification-added', item);
+
+    if (options.autoClose !== false && typeof window !== 'undefined') {
+      setTimeout(() => this.remove(item.id), options.autoClose);
+    }
+  }
+
+  /**
+   * Remove a notification by ID.
+   * @param id - The ID of the notification to remove
+   */
+  remove(id: number): void {
+    const index = this.notifications.findIndex((n) => n.id === id);
+    if (index !== -1) {
+      const removed = this.notifications.splice(index, 1)[0];
+      this.emit('notification-removed', removed);
+    }
+  }
+
+  /**
+   * Clear all notifications.
+   */
+  clear(): void {
+    const removed = [...this.notifications];
+    this.notifications.splice(0);
+    this.emit('notifications-cleared', removed);
+  }
+
+  /**
+   * Get a copy of the current notifications.
+   * @returns Array of notification items
+   */
+  getNotifications(): NotificationItem[] {
+    return [...this.notifications];
+  }
+
+  /**
+   * Get the current default options.
+   * @returns The default options
+   */
+  getOptions(): Required<NotificationOptions> {
+    return { ...this.options };
+  }
+
+  /**
+   * Success notification shorthand.
+   * @param title - The title/message
+   * @param opts - Optional options
+   */
+  success(title: string, opts?: NotificationOptions): void {
+    this.show('success', title, opts);
+  }
+
+  /**
+   * Error notification shorthand.
+   * @param title - The title/message
+   * @param opts - Optional options
+   */
+  error(title: string, opts?: NotificationOptions): void {
+    this.show('error', title, opts);
+  }
+
+  /**
+   * Warning notification shorthand.
+   * @param title - The title/message
+   * @param opts - Optional options
+   */
+  warning(title: string, opts?: NotificationOptions): void {
+    this.show('warning', title, opts);
+  }
+
+  /**
+   * Info notification shorthand.
+   * @param title - The title/message
+   * @param opts - Optional options
+   */
+  info(title: string, opts?: NotificationOptions): void {
+    this.show('info', title, opts);
+  }
+}
+
+// Default instance for convenience
+export const notificationManager = new NotificationManager();

package/src/env.d.ts

@@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, any>;
+  export default component;
+}

package/src/index.ts

@@ -0,0 +1,27 @@
+// Core exports
+export { NotificationManager, notificationManager } from './core/notification-manager';
+export type {
+  NotificationType,
+  NotificationPosition,
+  NotificationOptions,
+  NotificationItem,
+} from './types';
+
+// Vue adapter
+export {
+  useNotificationManager,
+  createReactiveNotificationStore,
+  notificationStore,
+  createVueNotificationPlugin,
+} from './adapters/vue';
+export { default as NotificationContainer } from './adapters/vue/NotificationContainer.vue';
+
+// Composables
+export { useNotification } from './composables/useNotification';
+
+// Adapters for other frameworks
+export * from './adapters/nuxt';
+export * from './adapters/inertia';
+
+// Styles
+import './styles/style.css';