npm package: @schoolaid/notifications-client
Description: Vue 3 email client component library with dark mode support
Author: Said
Latest version: 1.5.6

# @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

```bash
npm install @schoolaid/notifications-client
```

## Quick Start

### 1. Install the plugin

```typescript
// 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

```vue
<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.

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

### MailsView
Complete email interface with list and detail panels.

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

### MailsList
Email list component with search and filtering.

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

### CreateEmailView
Email composition interface with rich text editor.

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

## Composables

### useMails
Reactive email management composable.

```typescript
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

```typescript
// 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:

```css
: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:

```typescript
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](./MANUAL_SETUP.md) for detailed instructions.

## TypeScript Support

Full TypeScript support with exported types:

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

## Development

```bash
# 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