Vue Bank UI

Vue.js component library cho hiển thị logo các ngân hàng Việt Nam.

🚀 Installation

npm install vue-bank-ui
# hoặc
pnpm add vue-bank-ui
# hoặc
yarn add vue-bank-ui

📖 Usage

Import CSS (Required)

import 'vue-bank-ui/dist/vue-bank-ui.css'

Basic Usage

<template>
  <div>
    <!-- Sử dụng cơ bản -->
    <BankLogo bank-code="VCB" />
    <BankLogo bank-code="TCB" />
    <BankLogo bank-code="BIDV" />
  </div>
</template>

<script setup>
import { BankLogo } from 'vue-bank-ui'
</script>

Advanced Usage

<template>
  <div>
    <!-- Các kích thước khác nhau -->
    <BankLogo bank-code="VCB" size="xs" />
    <BankLogo bank-code="VCB" size="sm" />
    <BankLogo bank-code="VCB" size="md" />
    <!-- default -->
    <BankLogo bank-code="VCB" size="lg" />
    <BankLogo bank-code="VCB" size="xl" />

    <!-- Kích thước tùy chỉnh -->
    <BankLogo bank-code="TCB" :width="60" :height="60" />
    <BankLogo bank-code="TCB" width="80px" height="80px" />

    <!-- Bo góc -->
    <BankLogo bank-code="BIDV" size="lg" rounded />

    <!-- Xử lý sự kiện -->
    <BankLogo bank-code="ACB" @load="onLogoLoad" @error="onLogoError" />
  </div>
</template>

<script setup>
import { BankLogo } from 'vue-bank-ui'

const onLogoLoad = (event) => {
  console.log('Logo loaded successfully')
}

const onLogoError = (event) => {
  console.log('Failed to load logo')
}
</script>

🏦 Supported Banks

Thư viện hỗ trợ 60+ ngân hàng Việt Nam:

| Bank Code | Bank Name | Bank Code | Bank Name | | --------- | ----------------- | --------- | ----------- | | VCB | Vietcombank | TCB | Techcombank | | BIDV | BIDV | CTG | VietinBank | | ACB | Á Châu Bank | VPB | VPBank | | MSB | MSB | SCB | SCB | | TPB | TPBank | HDB | HDBank | | VIB | VIB | OCB | OCB | | SHB | SHB | SEAB | SeABank | | LPB | LienViet PostBank | EXB | Eximbank |

[... và nhiều ngân hàng khác]

📋 API Reference

Props

| Prop | Type | Default | Description | | -------------- | -------------------------------------- | ------------ | ----------------------------------------- | | bankCode | string | required | Mã ngân hàng (VD: 'VCB', 'TCB', 'BIDV') | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Kích thước logo | | width | string \| number | - | Chiều rộng tùy chỉnh | | height | string \| number | - | Chiều cao tùy chỉnh | | rounded | boolean | false | Bo góc logo | | alt | string | - | Alt text tùy chỉnh cho accessibility | | showFallback | boolean | true | Hiển thị fallback khi không tải được logo |

Events

| Event | Payload | Description | | ------- | ------- | --------------------------------- | | load | Event | Được emit khi logo tải thành công | | error | Event | Được emit khi logo tải thất bại |

Sizes

• xs: 24x24px
• sm: 32x32px
• md: 48x48px (default)
• lg: 64x64px
• xl: 96x96px

🛠️ Development

# Clone repository
git clone <repository-url>
cd vue-bank-ui

# Install dependencies
pnpm install

# Start development server
pnpm run dev

# Build library
pnpm run build-lib

# Run tests
pnpm run test:unit

📄 License

MIT

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.