<BSSCheckbox> / <BSSItem>

Mô tả

Trong kiến trúc React mới, Control Checkbox cũ được phân tách thành 2 component kết hợp chặt chẽ với nhau:

1. BSSItem: Là component checkbox "trần" (cơ bản). Nó xử lý trực tiếp các logic về bắt phím Enter nhảy ô, biến đổi giá trị checked thành quy ước chuẩn ERP ('C' là Có, 'K' là Không), và hiển thị text bên phải ô đánh dấu.
2. BSSCheckbox: Là component Form Control bao ngoài, cung cấp tính năng nhãn (label), validation (error, required), và hỗ trợ 2 chế độ hiển thị:
   • Chế độ Single (Đơn lẻ): Render trực tiếp một checkbox kèm theo label bên trái.
   • Chế độ Group (Nhóm): Đóng vai trò container nhóm nhiều BSSItem lại với nhau dưới cùng một nhãn tổng, tự động xếp hàng chữ (flex wrap).

Thuộc tính của <BSSCheckbox>

Tên	Kiểu	Mặc định	Có thể có	Mục đích
name	string			Tên của input (name property) dùng trong Single mode, hoặc dùng làm key bắt lỗi (validation).
label	string			Nhãn hiển thị bên trái (tự động dịch đa ngôn ngữ).
labelWidth	number / string	var(--bss-label-width)	100, '120px'	Độ rộng của nhãn (label).
text	string			(Chế độ Single) Chữ hiển thị sát ngay bên phải ô checkbox.
value	string		'C', 'K'	(Chế độ Single) Giá trị binding. Nhận chuỗi 'C' để đánh dấu chọn.
required	bool	false	true / false	Đánh dấu field bắt buộc (hiển thị sao đỏ ở label).
error	string			Chuỗi báo lỗi, nếu rỗng sẽ tự tìm lỗi theo tên từ context.
children	ReactNode		<BSSItem />	Nếu truyền component con, nó sẽ tự động kích hoạt Chế độ Group.
className	string	''		Class CSS bổ sung cho thẻ bao ngoài (wrapper div).

Thuộc tính của <BSSItem>

Được dùng khi nằm độc lập trong lưới hoặc nhét làm con (children) của <BSSCheckbox>.

Tên	Kiểu	Mặc định	Có thể có	Mục đích
name	string	sinh tự động		Tên field trả về khi có sự kiện onChange.
text	string			Chữ hiển thị sát ngay bên phải ô checkbox.
value	string		'C', 'K'	Giá trị đầu vào ('C' = checked).
checked	bool	false	true / false	Fallback dùng giá trị boolean truyền thống nếu không dùng value chuỗi.
onChange	function		(e) => void	Sự kiện click. Trả ra e.target đã bị ghi đè: value (thành 'C' hoặc 'K') và type (thành 'checkbox').

Phím tắt & Thao tác

• Hỗ trợ click vào nhãn (text hoặc label) để thay đổi trạng thái check (vì được bọc thẻ <label>).
• Khi focus vào ô vuông checkbox, nhấn Enter sẽ tự động kích hoạt tính năng nhảy trỏ chuột (focus) sang input/control kế tiếp giống luồng nhập liệu bàn phím tiêu chuẩn (khi component nằm trong form id #dt_ct).

Ví dụ

Chế độ Đơn lẻ (Single Mode): Dùng cho mục đích bật/tắt (On/Off) một thuộc tính.

<BSSCheckbox 
  label="Trạng thái" 
  text="Hoạt động" 
  name="trang_thai" 
  value={data.trang_thai} // 'C' hoặc 'K'
  onChange={handleChange}
/>

Chế độ Nhóm (Group Mode): Dùng khi có một danh sách nhiều lựa chọn nằm ngang dưới cùng một tiêu đề.

<BSSCheckbox label="Các quyền hạn" required={true}>
  {/* Chú ý: BSSCheckbox lúc này đóng vai trò container */}
  
  <BSSItem 
    name="quyen_xem" 
    text="Được phép xem" 
    value={data.quyen_xem} 
    onChange={handleChange} 
  />
  
  <BSSItem 
    name="quyen_sua" 
    text="Được phép sửa" 
    value={data.quyen_sua} 
    onChange={handleChange} 
  />
  
  <BSSItem 
    name="quyen_xoa" 
    text="Được phép xóa" 
    value={data.quyen_xoa} 
    onChange={handleChange} 
  />
</BSSCheckbox>

Sử dụng trên Lưới (Grid): Dùng BSSItem trần (không có bao ngoài của BSSCheckbox) để tiết kiệm diện tích và hiển thị trực tiếp.

<BSSItem 
  value={row.da_duyet} 
  onChange={(e) => updateRowField(row.id, 'da_duyet', e.target.value)} 
  className="justify-center"
/>