@mtktech/ui

@mtktech/ui

Thư viện component Vue 3 dùng chung cho các app trong monorepo này (và các dự án khác sau khi publish).

Xem tài liệu đầy đủ (props, slot, theme màu) tại docs/ui-library.md. Hướng dẫn thêm component mới: docs/adding-a-component.md.

Component hiện có

• MButton — nút bấm, variant primary/secondary.

• MBadge — pill hiển thị trạng thái/tag, variant neutral/success/info/warning/danger, tuỳ chọn dot.

• MDataTable — bảng dữ liệu tái sử dụng: truyền columns + rows là dùng được, có search, phân trang rút gọn kèm ô nhảy nhanh tới trang (client-side hoặc server-side qua mode="server" + total), page-size selector, scoped slot theo cột (#cell-<key>), tự chuyển thành card trên mobile, hỗ trợ dữ liệu dạng cây cha/con (children-key), theme màu qua CSS variables.

• MTreeList — panel danh sách dọc dạng cây cha/con nhiều cấp (khu vực > tiểu khu > ...), kèm search, dòng "Tất cả" tổng hợp, chọn 1 dòng (v-model), tùy biến icon/màu qua slot + CSS variables.

• MSidebar — sidebar điều hướng cho toàn app: menu phân cấp cha/con, thu gọn thành dải icon (desktop), tự chuyển thành drawer trượt vào (mobile/tablet), ẩn/hiện từng mục theo quyền qua field visible tự tính trước khi truyền vào.

• MFilterButton — nút mở panel filter, tự chuyển popover (desktop) / bottom sheet (mobile); nội dung filter ghép từ các component filter bên dưới qua slot.

• MFilterCheckboxGroup / MFilterRadioGroup / MFilterDateRange — filter dựng sẵn (checkbox nhiều lựa chọn có search tự động, radio 1 lựa chọn, khoảng ngày) — chỉ cần truyền options/v-model là dùng được, không phải tự viết markup.

• MPageHeader / MFilterDrawer / MActiveFilters / MColumnPicker / MActionMenu — bộ List Page Kit chuẩn hóa từ UI Maintenance; dùng cùng MDataTable để dựng trang danh sách mà không viết lại CSS, drawer, chip lọc, menu thao tác hoặc logic resize/lưu cột.

• MThemeToggle + useTheme() / initTheme() — dark mode cho toàn bộ thư viện (và Element Plus), xem docs/dark-mode.md.

Dùng trong workspace này

import '@mtktech/ui/style.css'
import { MButton, MBadge, MDataTable, MPageHeader, MFilterDrawer, MActiveFilters, MColumnPicker, MActionMenu } from '@mtktech/ui'

Build

npm run build -w @mtktech/ui

Output ở dist/: ES module (mtk-ui.js), CJS (mtk-ui.cjs), type declarations (dist/src/index.d.ts), CSS riêng (ui.css).