@trade-sdk/vue

Vue 3 components for Trade Finance SDK - Letter of Credit Forms with built-in Tailwind CSS v4 styling.

✨ Features

• ✅ No Tailwind Installation Required - All Tailwind CSS v4 styles are pre-bundled (11KB / 3KB gzipped)
• ✅ Vue 3 Composition API - Modern Vue 3 with <script setup> syntax
• ✅ TypeScript Support - Full type definitions included
• ✅ Customizable Styles - Override default classes or use completely unstyled/headless mode
• ✅ Form Validation - Built-in validation for Letter of Credit forms
• ✅ API Integration - Ready to connect to your Trade SDK backend
• ✅ Zero Config - Works out of the box, no configuration needed

📦 Installation

npm install @trade-sdk/vue

That's it! No need to install Tailwind CSS or configure anything.

🚀 Quick Start

Basic Usage

<script setup>
import { TradeSDK } from '@trade-sdk/vue'
import '@trade-sdk/vue/style.css' // Import pre-bundled Tailwind CSS

const handleSubmit = (data) => {
  console.log('Form submitted:', data)
}

const handleSuccess = (response) => {
  console.log('API Success:', response)
}

const handleError = (error) => {
  console.error('API Error:', error)
}
</script>

<template>
  <TradeSDK
    form-type="LC"
    api-key="your-api-key-here"
    api-endpoint="https://api.yourdomain.com/v1/lc"
    @submit="handleSubmit"
    @success="handleSuccess"
    @error="handleError"
  />
</template>

📖 Detailed Usage

1. With Custom Classes

Override any default Tailwind classes to match your design:

<script setup>
import { TradeSDK } from '@trade-sdk/vue'
import '@trade-sdk/vue/style.css'

const customClasses = {
  formCard: 'bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl shadow-2xl p-10',
  submitButton: 'bg-indigo-600 hover:bg-indigo-700 text-white font-bold px-8 py-4 rounded-lg',
  input: 'border-2 border-indigo-300 rounded-lg focus:ring-4 focus:ring-indigo-500',
  label: 'text-indigo-900 font-semibold text-base'
}
</script>

<template>
  <TradeSDK
    form-type="LC"
    api-key="your-api-key"
    :class-names="customClasses"
  />
</template>

2. With Pre-filled Data

<script setup>
import { TradeSDK } from '@trade-sdk/vue'
import '@trade-sdk/vue/style.css'

const initialFormData = {
  lcNumber: 'LC-2024-001',
  lcType: 'sight',
  lcCurrency: 'USD',
  applicantName: 'Acme Corp',
  beneficiaryName: 'Global Traders Inc',
}
</script>

<template>
  <TradeSDK
    form-type="LC"
    api-key="your-api-key"
    :initial-data="initialFormData"
  />
</template>

3. With Custom Banks and Currencies

<script setup>
import { TradeSDK } from '@trade-sdk/vue'
import '@trade-sdk/vue/style.css'

const customBanks = [
  { id: '1', name: 'HSBC Bank', swift: 'HSBCGB2L' },
  { id: '2', name: 'Standard Chartered', swift: 'SCBLGB2L' },
  { id: '3', name: 'Citibank', swift: 'CITIUS33' }
]

const customCurrencies = ['USD', 'EUR', 'GBP', 'JPY', 'AED']
</script>

<template>
  <TradeSDK
    form-type="LC"
    api-key="your-api-key"
    :banks="customBanks"
    :currencies="customCurrencies"
  />
</template>

4. Unstyled / Headless Mode

Use the form logic without any styles - perfect for custom implementations:

<script setup>
import { TradeSDK } from '@trade-sdk/vue'
// No need to import style.css in unstyled mode!

const handleSubmit = (data) => {
  console.log('Custom form submitted:', data)
}
</script>

<template>
  <TradeSDK
    form-type="LC"
    api-key="your-api-key"
    :unstyled="true"
    @submit="handleSubmit"
  >
    <template #default="{ formData, handleSubmit, handleReset }">
      <!-- Your completely custom form implementation -->
      <form @submit.prevent="handleSubmit" class="my-custom-form">
        <div class="form-group">
          <label>LC Number</label>
          <input v-model="formData.lcNumber" type="text" required />
        </div>

        <div class="form-group">
          <label>LC Type</label>
          <select v-model="formData.lcType" required>
            <option value="sight">Sight LC</option>
            <option value="usance">Usance LC</option>
            <option value="standby">Standby LC</option>
          </select>
        </div>

        <!-- Add more fields as needed -->

        <div class="button-group">
          <button type="submit">Submit LC</button>
          <button type="button" @click="handleReset">Clear Form</button>
        </div>
      </form>
    </template>
  </TradeSDK>
</template>

<style scoped>
/* Your own custom styles */
.my-custom-form { /* ... */ }
</style>

🔧 Props

📤 Events

🎨 Customizable Classes

You can override any of these default Tailwind classes:

interface TradeSDKClassNames {
  container?: string
  form?: string
  formCard?: string
  section?: string
  sectionTitle?: string
  sectionDivider?: string
  label?: string
  input?: string
  select?: string
  textarea?: string
  checkbox?: string
  submitButton?: string
  resetButton?: string
  buttonContainer?: string
  errorMessage?: string
  successMessage?: string
  gridContainer?: string
  gridItem?: string
}

📘 TypeScript Support

Full TypeScript definitions included:

import type {
  LCFormData,
  TradeSDKProps,
  TradeSDKClassNames,
  Bank,
  FormType
} from '@trade-sdk/vue'

// Example: Type-safe form data
const formData: LCFormData = {
  lcNumber: 'LC-001',
  lcType: 'sight',
  issueDate: '2024-10-24',
  expiryDate: '2025-01-24',
  lcAmount: 100000,
  lcCurrency: 'USD',
  applicantName: 'Acme Corp',
  applicantAddress: '123 Business St, New York, NY',
  applicantBankName: 'HSBC Bank',
  applicantBankSwift: 'HSBCUS33',
  beneficiaryName: 'Global Traders Inc',
  beneficiaryAddress: '456 Trade Ave, London, UK',
  beneficiaryBankName: 'Barclays Bank',
  beneficiaryBankSwift: 'BARCGB22',
  portOfLoading: 'New York',
  portOfDischarge: 'London',
  latestShipmentDate: '2024-12-31',
  partialShipments: false,
  transshipment: true,
  goodsDescription: 'Electronics and accessories',
  quantity: 1000,
  totalValue: 100000,
  countryOfOrigin: 'United States'
}

🎯 Why No Tailwind Installation?

Version 1.0.x (old):

npm install @trade-sdk/vue tailwindcss  # Required Tailwind
# Plus: tailwind.config.js, postcss.config.js, content paths...

Version 1.1.0+ (new):

npm install @trade-sdk/vue  # Just the SDK!
import '@trade-sdk/vue/style.css'  // All styles included (11KB)

Benefits:

• ✅ Simpler setup - No Tailwind configuration needed
• ✅ Faster installation - One package instead of multiple
• ✅ Smaller bundle - Only includes used CSS (11KB vs full Tailwind)
• ✅ No conflicts - Styles are pre-processed and scoped
• ✅ Works anywhere - Any Vue 3 project, regardless of their CSS setup

🔐 API Integration

The SDK automatically sends form data to your backend:

// Request sent to your API endpoint
POST https://api.yourdomain.com/v1/lc
Headers:
  Content-Type: application/json
  X-API-Key: your-api-key

Body:
{
  "formType": "LC",
  "data": {
    "lcNumber": "LC-001",
    "lcType": "sight",
    // ... all form fields
  }
}

Expected response format:

{
  "success": true,
  "message": "LC created successfully",
  "lcId": "lc_abc123"
}

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

📄 License

MIT © MOD VENTURES

🔗 Links

• Homepage: https://www.themodventures.com/
• NPM: @trade-sdk/vue
• Issues: Report bugs and feature requests

🆕 Changelog

v1.1.0 (Latest)

• ✨ NEW: Tailwind CSS v4 pre-bundled - no installation required!
• ✨ Removed tailwindcss from peer dependencies
• ✨ Bundled CSS is only 11KB (3KB gzipped)
• 🐛 Fixed: Users no longer need to configure Tailwind
• 🐛 Fixed: No more style conflicts with user's Tailwind setup

v1.0.3

• Previous version (required Tailwind installation)

Made with ❤️ by MOD VENTURES