@schoolaid/notifications-client

A Vue 3 email client component library with dark mode support, TypeScript, and rich text editing capabilities.

Features

• 🌟 Vue 3 & TypeScript - Built with modern Vue 3 Composition API and full TypeScript support
• 🎨 Dark Mode - Built-in dark/light theme switching
• 📧 Email Management - Complete email client with listing, viewing, creating, and deleting
• 🔍 Advanced Filters - Search by subject, name, date ranges
• 📎 File Attachments - Support for file uploads with image resizing
• 📝 Rich Text Editor - Quill.js integration with image upload capabilities
• 🎯 Responsive Design - Mobile-friendly responsive layout
• 🔌 Plugin Architecture - Easy integration with existing Vue applications
• 🌐 API Integration - Built-in API service layer with customizable endpoints

Installation

npm install @schoolaid/notifications-client

Quick Start

1. Install the plugin

// main.ts
import { createApp } from 'vue'
import { NotificationsClientPlugin } from '@schoolaid/notifications-client'
import '@schoolaid/notifications-client/style.css'
import App from './App.vue'

const app = createApp(App)

app.use(NotificationsClientPlugin, {
  apiBaseUrl: 'http://localhost:8000',
  apiPrefix: '/web-api',
  globalComponents: true, // Registra componentes globalmente
  features: {
    themeSwitch: true,
    attachments: true,
    richTextEditor: true
  },
  debug: true // Solo para development
})

app.mount('#app')

2. Use the components

<template>
  <div>
    <!-- Complete email client -->
    <EmailClient title="My Email Client">
      <MailsView 
        @mail-selected="handleMailSelected"
        @mail-deleted="handleMailDeleted"
        @create-mail="handleCreateMail"
      />
    </EmailClient>
    
    <!-- Or individual components -->
    <MailsList 
      @mail-selected="handleMailSelected"
      @create-mail="handleCreateMail"
    />
  </div>
</template>

<script setup lang="ts">
import { 
  EmailClient, 
  MailsView, 
  MailsList,
  type Mail 
} from '@schoolaid/notifications-client'

const handleMailSelected = (mail: Mail) => {
  console.log('Selected mail:', mail)
}

const handleMailDeleted = (mailId: number) => {
  console.log('Deleted mail ID:', mailId)
}

const handleCreateMail = () => {
  console.log('Create new mail')
}
</script>

Components

EmailClient

The main wrapper component that provides theming and layout structure.

<EmailClient 
  title="My Email System"
  :hide-header="false"
>
  <!-- Your content -->
</EmailClient>

MailsView

Complete email interface with list and detail panels.

<MailsView 
  @mail-selected="handleMailSelected"
  @mail-deleted="handleMailDeleted"
  @create-mail="handleCreateMail"
/>

MailsList

Email list component with search and filtering.

<MailsList 
  :auto-load="true"
  @mail-selected="handleMailSelected"
  @create-mail="handleCreateMail"
/>

CreateEmailView

Email composition interface with rich text editor.

<CreateEmailView 
  @email-sent="handleEmailSent"
  @email-cancelled="handleCancel"
/>

Composables

useMails

Reactive email management composable.

import { useMails } from '@schoolaid/notifications-client'

const {
  mails,
  loading,
  error,
  loadMails,
  createMail,
  deleteMail,
  applyFilters,
  searchMails
} = useMails()

API Configuration

The library expects a REST API with the following endpoints:

GET    /web-api/mails              - List mails
POST   /web-api/mails              - Create mail
GET    /web-api/mails/:id          - Get mail details
DELETE /web-api/mails/:id          - Delete mail
GET    /web-api/customer-types     - List customer types
GET    /web-api/customers          - List customers
POST   /web-api/attachment-hub-api/file - Upload file

API Response Format

// Mail list response
{
  data: Mail[],
  meta: {
    current_page: number,
    per_page: number,
    total: number,
    last_page: number
  }
}

// Mail object
{
  id: number,
  subject: string,
  name: string,
  text: string,
  createdAt: string,
  labels: string[],
  attachments: Attachment[],
  receipts: MailReceipt[]
}

Styling

The library includes a complete CSS system with CSS custom properties for easy customization:

:root {
  --email-primary: #0EA5E9;
  --email-primary-hover: #0284c7;
  --email-bg-base: #ffffff;
  --email-text-primary: #1e293b;
  /* ... more variables */
}

Image Modules (Optional)

The library includes automatic loading of image enhancement modules. If you see messages about modules not being found, you can register them manually:

import { useQuillModules } from '@schoolaid/notifications-client'
import ImageResize from 'quill-image-resizor'
import ImageDropAndPaste from 'quill-image-drop-and-paste'

const { registerModules } = useQuillModules()
registerModules({ ImageResize, ImageDropAndPaste })

See MANUAL_SETUP.md for detailed instructions.

TypeScript Support

Full TypeScript support with exported types:

import type { 
  Mail, 
  MailsResponse, 
  CreateMailRequest,
  MailFilters,
  EmailClientConfig
} from '@schoolaid/notifications-client'

Development

# Install dependencies
npm install

# Development server
npm run dev

# Build library
npm run build

# Build demo
npm run build-demo

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Said