Primitive — phản hồi

Hộp thoại, drawer, cảnh báo, khung chờ.

import { CModal, CDrawer, CPopconfirm, CResult, CSpin, CSkeleton, CAlert, CProgress } from '@tasco/ui'

<script setup lang="ts">
import { ref } from 'vue'
import { CAlert, CDrawer, CModal, CPopconfirm, CProgress, message } from '@tasco/ui'

// Primitive phản hồi: cảnh báo tại chỗ, hộp thoại, drawer, xác nhận nhanh.
const modalOpen = ref(false)
const drawerOpen = ref(false)
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px">
    <CAlert
      type="warning"
      message="Đơn hàng này đang bị khoá công nợ."
      description="Liên hệ kế toán trước khi xuất kho."
      show-icon
    />

    <CProgress :percent="62" />

    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <CButton
        variant="outline"
        @click="modalOpen = true"
      >
        Mở hộp thoại
      </CButton>

      <CButton
        variant="outline"
        @click="drawerOpen = true"
      >
        Mở drawer
      </CButton>

      <CPopconfirm
        title="Gỡ đơn khỏi danh sách?"
        ok-text="Gỡ"
        cancel-text="Huỷ"
        @confirm="message.success('Đã gỡ')"
      >
        <CButton
          variant="text"
          size="sm"
        >
          Gỡ nhanh
        </CButton>
      </CPopconfirm>
    </div>

    <CModal
      v-model:open="modalOpen"
      title="Chi tiết đơn DH-0001"
      :footer="null"
    >
      Nội dung chi tiết đặt ở đây.
    </CModal>

    <CDrawer
      v-model:open="drawerOpen"
      title="Bộ lọc nâng cao"
      placement="right"
    >
      Các điều kiện lọc ít dùng.
    </CDrawer>
  </div>
</template>

Chọn đúng component

Tình huống	Dùng
Xác nhận hành động phá huỷ	useConfirm
Xác nhận nhanh ngay tại nút	CPopconfirm
Nhập thêm dữ liệu trong một bước phụ	CModal
Biểu mẫu phụ dài (bộ lọc, chi tiết)	CDrawer
Cảnh báo nằm trong trang, không chặn thao tác	CAlert
Toast thông báo ngắn	message — xem Gọi theo kiểu lệnh
Đang tải một khối	CSpin, CSkeleton
Trang kết quả (404, 403, thành công)	CResult
Tiến độ công việc dài	CProgress

CModal và CDrawer

<CModal v-model:open="open" title="Chi tiết đơn" :footer="null">…</CModal>
<CDrawer v-model:open="open" title="Bộ lọc" placement="right" width="420">…</CDrawer>

• Cả hai dùng Teleport → là điểm gãy khi bật SSR; bọc <ClientOnly> cho route có SSR.
• Drawer đóng thì trả focus về nút đã mở nó. CTable đã làm sẵn cho drawer lọc và thiết lập; drawer tự viết thì tự lo.
• Nội dung nặng chỉ nên dựng khi mở (v-if bên trong), tránh tải dữ liệu cho drawer chưa ai mở.

CAlert và CResult

CAlert cho cảnh báo trong ngữ cảnh: "Đơn đang bị khoá công nợ". Đặt ngay cạnh phần nó nói tới, đừng dồn hết lên đầu trang.

CResult cho cả màn hình: trang 403, 404, hoặc trang "Đã gửi duyệt thành công". Trang lỗi fatal của app đã dùng nó sẵn — xem Hiển thị lỗi.

Khung chờ

<CSkeleton :loading="loading" active>
  <ThongTinDonHang :order="order" />
</CSkeleton>

CSkeleton giữ nguyên hình dáng bố cục nên trang không nhảy khi dữ liệu về — tốt hơn CSpin cho khối nội dung. CSpin hợp với vùng nhỏ hoặc thao tác ngắn.

Bảng thì dùng loading của CTable, không bọc thêm.

Lưu ý

• Đừng chồng hộp thoại: mở modal từ trong modal là dấu hiệu luồng cần tách thành trang riêng.
• Modal không phải chỗ đặt form dài — từ năm trường trở lên nên là trang hoặc drawer.
• Thông báo lỗi dùng handler chung, không tự dựng modal báo lỗi riêng — xem Hiển thị lỗi.

Liên quan

• useConfirm · useErrorHandler.
• Gọi theo kiểu lệnh.