tait-ui-components/README.md

Tait UI Component Library - Reusable Vue 3 components

# Tait UI Components Library

A comprehensive Vue 3 component library built with TypeScript, PrimeVue, and SCSS.

## 📚 Documentation

- **[GETTING_STARTED.md](./GETTING_STARTED.md)** - Bắt đầu sử dụng (Chọn file phù hợp)
- **[USAGE_GUIDE.md](./USAGE_GUIDE.md)** - Hướng dẫn sử dụng chi tiết (Tiếng Việt)
- **[COMPONENTS_INDEX.md](./COMPONENTS_INDEX.md)** - Danh mục tìm kiếm components
- **[QUICK_START.md](./QUICK_START.md)** - Hướng dẫn nhanh 5 phút
- **[PUBLISH.md](./PUBLISH.md)** - Hướng dẫn publish và sử dụng
- **[CHANGELOG.md](./CHANGELOG.md)** - Lịch sử thay đổi

## 📦 Installation

```bash
npm install @tait/ui-components
```

## 🚀 Quick Start

### 1. Install Dependencies

```bash
npm install vue@^3.0.0 primevue@^3.0.0 primeicons
```

### 2. Import and Use

```typescript
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import TaitUI from '@tait/ui-components'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primevue/resources/primevue.min.css'
import 'primeicons/primeicons.css'
import '@tait/ui-components/dist/styles/index.css'

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

### 3. Use Components

```vue
<template>
  <div>
    <!-- Basic Components -->
    <DaButton label="Click me" />
    <DaInputText v-model="text" placeholder="Enter text" />
    
    <!-- Layout Components -->
    <MainLayout
      :menu-items="menuItems"
      :app-name="'My App'"
      :user-info="userInfo"
    >
      <div>Your content here</div>
    </MainLayout>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const text = ref('')
const menuItems = ref([
  { id: 'home', label: 'Home', icon: 'dashboard-icon', href: '/home' },
  { id: 'about', label: 'About', icon: 'info', href: '/about' }
])

const userInfo = ref({
  name: 'John Doe',
  role: 'Admin',
  avatar: 'JD'
})
</script>
```

## 📚 Component Categories

### 🎯 Basic Components (10)
- `TheLoader` - Loading spinner
- `DaColorChip` - Color display chip
- `DaError` - Error message display
- `DaMessage` - Message component
- `DaTabs` - Tab navigation
- `DaChips` - Chip components
- `DaButton` - Button component
- `DaModal` - Modal dialog
- `DaImg` - Image component with icons
- `DaCheckbox` - Checkbox input

### 📝 Form Components (10)
- `DaTextarea` - Textarea input
- `DaInputNumber` - Number input
- `DaSelectButton` - Select button group
- `DaInputText` - Text input
- `DaDropdown` - Dropdown select
- `DaInputSwitch` - Toggle switch
- `DaPassword` - Password input
- `DaPagination` - Pagination controls
- `DaMultiSelect` - Multi-select dropdown
- `DaTreeSelect` - Tree select component

### 📊 Data Components (10)
- `DaFormModal` - Form modal
- `DaDataTable` - Data table
- `DaListboxWithCheckbox` - Listbox with checkboxes
- `DaInputNumberWithUnit` - Number input with unit
- `DaCalendar` - Calendar with time picker
- `DaPieChart` - Pie chart
- `DaBarChart` - Bar chart
- `DaLineChart` - Line chart
- `DaDropdownPageSize` - Page size selector
- `DaTableSkeleton` - Table skeleton loader

### 🛠️ Utility Components (7)
- `DaLabel` - Label component
- `DaDotColor` - Color dot indicator
- `DaTriStateCheckBox` - Three-state checkbox
- `DaEllipsis` - Text ellipsis with tooltip
- `DaInputGroup` - Input group wrapper
- `DaInputMask` - Input with mask
- `IconHelp` - Help icon with popover
- `RowDetails` - Expandable row details

### 🎨 Advanced Components (1)
- `DaTieredMenu` - Multi-level menu

### ⚡ Specialized Components (7)
- `DaPopover` - Popover component
- `ErrorWithRefreshButton` - Error with refresh
- `ActionMenu` - Action menu
- `DaDropdownButton` - Dropdown button
- `DaNavbarItems` - Navbar items
- `DaTableToolBar` - Table toolbar
- `DaTableFilter` - Table filter
- `DaTableContent` - Table content

### 🏗️ Layout Components (3)
- `MainLayout` - Main layout wrapper
- `Topbar` - Top navigation bar
- `Sidebar` - Sidebar navigation

### 🎨 Icon Components (11)
- `BroadcastStationIcon` - Broadcast station icon
- `CaretIcon` - Caret icon
- `GroupIcon` - Group icon
- `NotificationIcon` - Notification icon
- `PeopleCommunityIcon` - People community icon
- `PersonIcon` - Person icon
- `RadioDeviceIcon` - Radio device icon
- `RadioUnitIcon` - Radio unit icon
- `StopIcon` - Stop icon
- `TalkgroupIcon` - Talkgroup icon
- `TrashBinIcon` - Trash bin icon

### 🔔 Toast Components (1)
- `ToastMessage` - Toast notification

### 🎯 Misc Components (2)
- `DaPopover` - Popover component
- `ErrorWithRefreshButton` - Error with refresh button

## 🎨 Customization

### MainLayout Customization

```vue
<template>
  <MainLayout
    :menu-items="customMenuItems"
    :app-name="'My Custom App'"
    :app-subtitle="'Dashboard'"
    :user-info="customUserInfo"
    :version="'2.0.0'"
    :copyright="'© 2024 My Company'"
    :default-expanded="true"
    :backgroundColor="'#f8f9fa'"
    :contentPadding="'20px'"
    @menu-click="handleMenuClick"
    @logo-click="handleLogoClick"
  >
    <div>Your content</div>
  </MainLayout>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const customMenuItems = ref([
  {
    id: 'dashboard',
    label: 'Dashboard',
    icon: 'dashboard-icon',
    href: '/dashboard' // or to: '/dashboard' for Vue Router
  },
  {
    id: 'users',
    label: 'Users',
    icon: 'reports-icon',
    href: '/users'
  }
])

const customUserInfo = ref({
  name: 'Alice Johnson',
  role: 'Product Manager',
  avatar: 'AJ'
})

const handleMenuClick = (item) => {
  if (item.href) {
    window.location.href = item.href // External link
  } else if (item.to) {
    router.push(item.to) // Vue Router
  }
}

const handleLogoClick = () => {
  router.push('/') // Navigate to home
}
</script>
```

### Chart Components

```vue
<template>
  <div>
    <!-- Pie Chart -->
    <DaPieChart :option="pieChartOption" />
    
    <!-- Bar Chart -->
    <DaBarChart :option="barChartOption" />
    
    <!-- Line Chart -->
    <DaLineChart 
      :series="lineChartSeries"
      :x-axis="lineChartXAxis"
      :option="lineChartOption"
    />
  </div>
</template>

<script setup>
const pieChartOption = ref({
  series: [{
    type: 'pie',
    data: [
      { value: 335, name: 'Direct' },
      { value: 310, name: 'Email' },
      { value: 234, name: 'Affiliate' }
    ]
  }]
})

const barChartOption = ref({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [120, 200, 150, 80, 70]
  }]
})

const lineChartSeries = ref([{
  name: 'Series 1',
  type: 'line',
  data: [120, 132, 101, 134, 90, 230, 210]
}])

const lineChartXAxis = ref(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
</script>
```

### Toast Messages

```vue
<template>
  <div>
    <ToastMessage />
    <button @click="showToast">Show Toast</button>
  </div>
</template>

<script setup>
const showToast = () => {
  if (window.triggerToast) {
    window.triggerToast({
      severity: 'success',
      detail: 'Operation completed successfully!',
      life: 3000,
      closable: true,
      position: 'top'
    })
  }
}
</script>
```

## 🎨 Styling

The library uses SCSS modules for styling. You can override styles by:

1. **CSS Variables**: Override CSS custom properties
2. **SCSS Variables**: Import and override SCSS variables
3. **Component Classes**: Use component-specific classes

```scss
// Override main layout background
.main-layout {
  --background-color: #ffffff;
}

// Override button styles
.da-button {
  --button-primary-color: #007bff;
  --button-border-radius: 8px;
}
```

## 🔧 Configuration

### Vue Router Integration

```typescript
// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/dashboard', component: Dashboard },
    { path: '/users', component: Users }
  ]
})

export default router
```

### Event Handling

```vue
<template>
  <div>
    <!-- Error with refresh -->
    <ErrorWithRefreshButton 
      error-message="Something went wrong"
      @refresh="handleRefresh"
    />
    
    <!-- Popover -->
    <DaPopover hover arrow placement="top">
      <DaButton label="Hover me" />
      <template #content>
        <div>Popover content</div>
      </template>
    </DaPopover>
  </div>
</template>

<script setup>
const handleRefresh = () => {
  // Retry the failed operation
  console.log('Refreshing...')
}
</script>
```

## 📱 Responsive Design

All components are responsive and work on:
- Desktop (1200px+)
- Tablet (768px - 1199px)
- Mobile (320px - 767px)

## 🎯 Browser Support

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

## 📄 License

Copyright (c) 2024 Tait Communications. All rights reserved.

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

## 📞 Support

For support and questions:
- Create an issue on GitHub
- Contact: support@tait.com

---

**Total Components: 62**
**Categories: 9**
**Built with: Vue 3, TypeScript, PrimeVue, SCSS**