Suada Vue Components

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

Installation

npm install @suada/vue

Usage

Register Components Globally

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

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

<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

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

: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.