<Cthuvien:kieu> - <BSSKieu>

Mô tả

BSSKieu là component UI thay thế cho control <Cthuvien:kieu> cũ. Nó cho phép người dùng chọn nhanh một trong các giá trị tĩnh được định nghĩa trước bằng thao tác nhấp chuột (click) để lật qua lại (toggle) giữa các tùy chọn, thay vì phải xổ danh sách (dropdown) mất thời gian.

Điểm nổi bật của BSSKieu:

• Chuyển đổi tức thì (Toggle): Nhấp chuột trực tiếp vào ô chữ để chuyển sang giá trị kế tiếp trong mảng lke. Khi đến cuối mảng sẽ quay lại giá trị đầu tiên.
• Tiết kiệm diện tích: Thường dùng cho các trường dữ liệu có ít tùy chọn (VD: Nam/Nữ, Có/Không, Thu/Chi) để thay thế Checkbox hoặc ComboBox.
• Tương tác Phím tắt: Hỗ trợ dùng phím Space (dấu cách) để chuyển giá trị, và phím Enter để nhảy trỏ chuột (focus) sang ô kế tiếp.
• Tích hợp Tooltip: Hỗ trợ dịch tự động và hiển thị tooltip (title) giải nghĩa cho các mã viết tắt (Ví dụ hiển thị "T" nhưng di chuột vào hiện "Tạm trú").

Thuộc tính

So sánh thuộc tính cũ và mới

Control Cũ	<BSSKieu>	Kiểu	Mô tả / Chú ý khi chuyển đổi
ten	label	string	Tên nhãn hiển thị bên trái (tự động dịch đa ngôn ngữ).
nhap	disabled	bool	Cũ: nhap="K" (Khóa nhập). Mới: Dùng cờ disabled={true} để khóa lật.
lke	lke	Array	Cũ: Chuỗi lke="N,A" phẩy phân cách. Mới: Mảng Object chuẩn hóa [{ value: 'N', label: 'Nam' }].
tra	(Không còn)		Việc gán mã và hiển thị được gộp chung vào mảng cấu hình lke.

Các thuộc tính của <BSSKieu>

Tên	Kiểu	Mặc định	Có thể có	Mục đích
id	string	useId()		Định danh của control. Render ra HTML với prefix BSS_.
name	string	sinh tự động		Tên trường dữ liệu gửi lên form (dùng làm key lưu trữ).
label	string			Nhãn (text) hiển thị bên trái ô chọn.
lke	Array	[]	[{ value, label, title? }]	Danh sách cấu hình các trạng thái lật. value (giá trị lưu), label (chữ hiển thị lọt lòng), title (tooltip giải nghĩa).
value	string / number			Giá trị binding hiện tại (phải khớp với 1 trong các value của mảng lke).
gtriDau	string / number			Giá trị mặc định ban đầu nếu không dùng value binding.
labelWidth	number / string	var(--bss-label-width)	80, '120px'	Độ rộng của nhãn label.
inputWidth	number / string	'35px'	50, '60px'	Độ rộng của ô chọn kiểu lọt lòng bên phải. Thường thiết lập nhỏ gọn đủ chứa label dài nhất.
required	bool	false	true / false	Đánh dấu bắt buộc chọn (hiện sao đỏ).
disabled	bool	false	true / false	Vô hiệu hóa, không cho click chuyển kiểu.
error	string			Nội dung lỗi từ context. Làm viền và chữ chuyển đỏ.
onChange	function		(e) => void	Sự kiện bắn ra khi người dùng click/Space chuyển kiểu. Trả về { target: { name, value: 'giá trị tiếp theo' } }.

Hoạt động phía Client

• Lắng nghe phím Space: Khi người dùng đang focus vào ô, thay vì click chuột, họ có thể gõ phím Space (dấu cách), component sẽ tự động giả lập lệnh click để lật sang giá trị tiếp theo.
• Lắng nghe phím Enter: Nếu trong form có mã định danh #dt_ct, component tự động tìm tất cả các thẻ có thể focus (input, select, button...) và nhảy trỏ chuột sang phần tử tiếp theo ngay sau nó.
• Trạng thái Mặc định: Nếu cả value và gtriDau đều rỗng, component sẽ tự động nhận giá trị của phần tử đầu tiên trong mảng lke làm mặc định hiển thị.

Ví dụ

1. Chọn Giới tính (Nam/Nữ):

<BSSKieu 
  id="gioi_tinh"
  name="gioi_tinh"
  label="Giới tính" 
  labelWidth={80}
  inputWidth={50} // Nới rộng ô để vừa chữ "Nam"/"Nữ"
  lke={[
    { value: 'M', label: 'Nam' },
    { value: 'F', label: 'Nữ' }
  ]}
  value={data.gioi_tinh}
  onChange={handleChange}
/>

2. Chọn Phân loại Có Tooltip giải nghĩa (Thu/Chi):

<BSSKieu 
  label="Loại giao dịch"
  name="loai_gd"
  lke={[
    { value: 'T', label: 'T', title: 'Khoản Thu' }, // Click sẽ hiện chữ "T", hover hiện "Khoản Thu"
    { value: 'C', label: 'C', title: 'Khoản Chi' }
  ]}
  gtriDau="T"
  onChange={handleChange}
/>

3. Sử dụng trong lưới GridX (Ẩn label, gọn gàng):

<BSSKieu 
  name="trang_thai"
  lke={[
    { value: 'C', label: 'Có' },
    { value: 'K', label: 'Không' }
  ]}
  value={row.trang_thai}
  onChange={(e) => updateRowField(row.id, 'trang_thai', e.target.value)}
  className="justify-center"
/>