@hobui/viui

Thư viện Vue 3 components cho iNET Design System, xây dựng trên Vuetify 3.

Cài đặt

npm install @hobui/viui

Peer Dependencies

Cài đặt kèm các thư viện phụ thuộc:

npm install vue@^3.4.0 vuetify@^3.5.0

Tùy chọn (cần nếu dùng chart/icon components):

npm install @tabler/icons-vue@^3.0.0 apexcharts@^5.0.0 vue3-apexcharts@^1.11.0

Cách dùng nhanh

// main.ts
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import App from './App.vue'

// Import CSS
import '@hobui/viui/style.css'

const app = createApp(App)
app.use(createVuetify())
app.mount('#app')

<!-- MyComponent.vue -->
<script setup lang="ts">
import { ViButton, ViInput, ViCard } from '@hobui/viui'
</script>

<template>
  <ViCard>
    <ViInput label="Tên" />
    <ViButton>Xác nhận</ViButton>
  </ViCard>
</template>

Danh sách components

| Component | Mô tả | |---|---| | ViButton | Nút bấm | | ViButtonToggle | Nhóm nút chọn | | ViInput | Ô nhập liệu | | ViTextarea | Ô nhập liệu nhiều dòng | | ViSelect | Dropdown chọn | | ViAutocomplete | Tìm kiếm + chọn | | ViCheckbox | Ô tích | | ViRadioGroup | Nhóm radio | | ViSwitch | Công tắc | | ViCard | Thẻ nội dung | | ViDialog | Hộp thoại | | ViAlert | Thông báo cảnh báo | | ViToast | Thông báo nhanh | | ViDataTable | Bảng dữ liệu | | ViChart | Biểu đồ (ApexCharts) | | ViSparkline | Biểu đồ thu nhỏ | | ViLoading | Chỉ báo tải | | ViSkeletonLoader | Skeleton loading | | ViPagination | Phân trang | | ViMenu | Menu dropdown | | ViAppBar | Thanh ứng dụng | | ViNavigationDrawer | Ngăn điều hướng | | ViLayout | Bố cục trang | | ViExpansionPanels | Bảng mở rộng | | ViChip | Nhãn chip | | ViAvatar | Ảnh đại diện |

TypeScript

Package đi kèm type definitions đầy đủ, không cần cài thêm @types/*.

import type { ViButtonProps } from '@hobui/viui'

Tài liệu & Storybook

Xem tài liệu chi tiết và demo tương tác tại Storybook của dự án.

License

MIT