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.