npm package: @newsoftglobal/feedbackkit-vue
Description: FeedbackKit Vue 3 SDK - Collect user feedback with screenshots, comments, and tracking
Author: NewSoft Global
Latest version: 1.0.2

# @newsoftglobal/feedbackkit-vue

> 🎯 Collect user feedback with screenshots directly from your Vue.js app.

A lightweight Vue 3 plugin that adds a feedback widget to your app. Users can select a screen region, capture a screenshot, submit feedback, and track their submissions — all without leaving your app.

## Features

- 📸 **Screen Capture** — Drag to select any area, auto-capture with html2canvas
- 💬 **Feedback Form** — Title, description, type (bug/feature/improvement), email
- 📋 **My Feedbacks** — Users can view their submitted feedbacks and status
- 🗨️ **Comments** — Two-way conversation between users and admin
- 🔑 **User Identity** — `setUser` / `clearUser` pattern for delayed auth
- 🎨 **Dark Theme** — Premium dark UI that blends with any app
- ⚡ **Lightweight** — ~60KB gzipped (includes html2canvas)

## Installation

```bash
npm install @newsoftglobal/feedbackkit-vue
```

## Quick Start

```js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import FeedbackKit from '@newsoftglobal/feedbackkit-vue'
import '@newsoftglobal/feedbackkit-vue/style.css'

const app = createApp(App)

app.use(FeedbackKit, {
  apiKey: 'your-api-key'
})

app.mount('#app')
```

Add the widget to your root component:

```vue
<template>
  <div>
    <!-- Your app content -->
    <FeedbackWidget />
  </div>
</template>
```

That's it! A purple floating button will appear at the bottom-right corner.

## User Identity

FeedbackKit supports **init first, set user later** — perfect for apps where login happens after page load.

```js
import { useFeedbackKit } from '@newsoftglobal/feedbackkit-vue'

// In your login handler:
const { setUser, clearUser } = useFeedbackKit()

// After user logs in
setUser({
  id: 'user-123',         // required
  name: 'John Doe',       // optional
  email: 'john@email.com' // optional
})

// On logout
clearUser()
```

Or via Options API:

```js
// In any component
this.$feedbackKit.setUser({ id: 'user-123', name: 'John' })
this.$feedbackKit.clearUser()
```

## How It Works

1. User clicks the **floating button** → Panel opens with two tabs
2. **"New Feedback"** tab → Click "Select Area & Capture"
3. **Drag to select** a region on the screen → Click "✓ Capture"
4. Fill in the **feedback form** → Submit
5. **"My Feedbacks"** tab → View all submitted feedbacks with status
6. Click a feedback → See **detail & comments** (chat with admin)

## Configuration

```js
app.use(FeedbackKit, {
  apiKey: string,      // Required - API key from your FeedbackKit admin
  serverUrl: string    // Required - Your FeedbackKit backend URL
})
```

## API

### `useFeedbackKit()` (Composition API)

```js
const { setUser, clearUser, user, hasUser } = useFeedbackKit()
```

| Method | Description |
|---|---|
| `setUser({ id, name?, email? })` | Set current user identity |
| `clearUser()` | Clear user identity (on logout) |
| `user` | Reactive user object |
| `hasUser` | Boolean — whether a user is set |

### `this.$feedbackKit` (Options API)

Same methods available on `this.$feedbackKit` in any component.

## Backend

This SDK requires a FeedbackKit backend server. The SDK communicates via:

| Endpoint | Method | Auth | Description |
|---|---|---|---|
| `/api/feedbacks` | POST | API Key | Submit feedback |
| `/api/feedbacks/user` | GET | API Key | List user's feedbacks |
| `/api/feedbacks/user/:id` | GET | API Key | Get feedback detail |
| `/api/feedbacks/user/:id/comments` | POST | API Key | Add user comment |

All requests include `x-api-key` header automatically.

## Environment Variables (Vite)

```env
VITE_FEEDBACKKIT_API_KEY=your-api-key
VITE_FEEDBACKKIT_SERVER_URL=http://localhost:3000
```

```js
app.use(FeedbackKit, {
  apiKey: import.meta.env.VITE_FEEDBACKKIT_API_KEY,
  serverUrl: import.meta.env.VITE_FEEDBACKKIT_SERVER_URL
})
```

## License

MIT