Tait UI Components Library

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

📚 Documentation

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

📦 Installation

npm install @tait/ui-components

🚀 Quick Start

1. Install Dependencies

npm install vue@^3.0.0 primevue@^3.0.0 primeicons

2. Import and Use

// 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

<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

<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

<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

<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

// 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

// 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

<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: [email protected]

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