npm package: @suada/vue
Description: Vue components for Suada integrations
Latest version: 1.0.0-rc.18

# Suada Vue Components

This package provides Vue components for integrating with the Suada platform.

## Installation

```bash
npm install @suada/vue
```

## Usage

### Register Components Globally

```typescript
import { createApp } from 'vue';
import SuadaVue from '@suada/vue';
import App from './App.vue';

const app = createApp(App);
app.use(SuadaVue);
app.mount('#app');
```

### Use Components Individually

```typescript
import { IntegrationManager, IntegrationCard } from '@suada/vue';

export default {
  components: {
    IntegrationManager,
    IntegrationCard
  }
}
```

## Components

### IntegrationManager

The `IntegrationManager` component displays a grid of available integrations and manages their connection status.

#### Props

| Name | Type | Description |
|------|------|-------------|
| config | SuadaIntegrationsConfig | Configuration object for the integration manager |

#### Example

```vue
<template>
  <IntegrationManager :config="config" />
</template>

<script setup>
import { ref } from 'vue';
import { IntegrationManager } from '@suada/vue';

const config = ref({
  apiUrl: 'https://api.suada.io',
  apiKey: 'your-api-key',
  externalUserIdentifier: 'user-123',
  onIntegrationConnected: (type) => {
    console.log(`Integration ${type} connected`);
  },
  onIntegrationDisconnected: (type) => {
    console.log(`Integration ${type} disconnected`);
  },
  onError: (error) => {
    console.error('Integration error:', error);
  }
});
</script>
```

### IntegrationCard

The `IntegrationCard` component displays information about a single integration and allows users to connect or disconnect it.

#### Props

| Name | Type | Description |
|------|------|-------------|
| integration | Integration | Integration object with details |
| status | IntegrationStatus | Optional status of the integration |

#### Events

| Name | Payload | Description |
|------|---------|-------------|
| connect | { apiKey?: string, domain?: string, email?: string, temporaryAccessToken?: string } | Emitted when the user clicks the connect button |
| disconnect | - | Emitted when the user clicks the disconnect button |

#### Example

```vue
<template>
  <IntegrationCard
    :integration="integration"
    :status="status"
    @connect="handleConnect"
    @disconnect="handleDisconnect"
  />
</template>

<script setup>
import { ref } from 'vue';
import { IntegrationCard } from '@suada/vue';

const integration = ref({
  type: 'google_analytics',
  name: 'Google Analytics',
  description: 'Connect to Google Analytics to import your data',
  icon: 'https://example.com/ga-icon.png',
  capabilities: ['Import data', 'Real-time sync'],
  requiresApiKey: false
});

const status = ref({
  type: 'google_analytics',
  connected: false,
  enabled: false
});

const handleConnect = (credentials) => {
  console.log('Connect with credentials:', credentials);
};

const handleDisconnect = () => {
  console.log('Disconnect integration');
};
</script>
```

## Features

### Suada Branding

The `IntegrationManager` component includes Suada branding that adapts to light and dark modes.

### API Key Validation

The `IntegrationCard` component supports API key validation with required field indicators.

### Temporary Access Tokens

Both components support temporary access tokens for secure authentication.

### Property Selection

The `IntegrationManager` component includes a `selectProperty` method for selecting properties within integrations.

## Customization

You can customize the appearance of the components using CSS variables:

```css
:root {
  --suada-bg-color: #ffffff;
  --suada-text-color: #1F2937;
  --suada-primary-color: #6366F1;
  --suada-success-color: #10B981;
  --suada-error-color: #EF4444;
  --suada-container-width: 100%;
  --suada-text-size: 16px;
  --suada-icon-size: 40px;
}
```

## TypeScript Support

This package includes TypeScript definitions for all components and interfaces.