import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/functional/# Quản lý danh sách'/>

# Quản lý danh sách

Lớp **ListDataRef** là một trình điều khiển để quản lý các danh sách dữ liệu phức tạp, menu thả xuống và cây trong hệ sinh thái **Vue 3**. Nó tự động hóa các tác vụ định kỳ như lọc, chọn mục, quản lý tiêu điểm và làm việc với các cấu trúc lồng nhau.

## Khởi tạo và Dữ liệu

Trình điều khiển chấp nhận các nguồn dữ liệu phản hồi và cung cấp các bộ thuộc tính được tối ưu hóa để kết xuất các thành phần.

```javascript
import { ref } from 'vue'
import { ListDataRef } from '@dxtmisha/functional'

const items = ref([{ value: 1, label: 'Mục' }, ...])
const controller = new ListDataRef(items)

// 1. Bộ dữ liệu đầy đủ để kết xuất (với các trạng thái focus/selected/disabled)
const list = controller.fullData 

// 2. Danh sách tối ưu hóa (liteData)
// Tự động đơn giản hóa cấu trúc cho khối lượng dữ liệu rất lớn
const fastList = controller.liteData 

// 3. Bản đồ phẳng của tất cả các mục (bao gồm cả các mục lồng nhau)
const flatMap = controller.map
```

## Lựa chọn và Trạng thái

Tự động quản lý lựa chọn nhiều hoặc một mục, có tính đến các giới hạn và trạng thái địa phương hiện tại.

```javascript
const selected = ref([1])
// Sử dụng undefined để bỏ qua các đối số tùy chọn và kích hoạt các giá trị mặc định
const controller = new ListDataRef(items, undefined, undefined, undefined, undefined, selected)

// 1. Truy xuất các giá trị và tên đã chọn
controller.selectedValues // ComputedRef<[1]>
controller.selectedNames  // ComputedRef<['Mục']>

// 2. Kiểm tra các giới hạn (min/max)
controller.isSelectedMax  // True nếu số lượng tối đa cho phép được chọn
```

## Điều hướng và Tiêu điểm

Trình điều khiển cung cấp một hệ thống các phương thức để di chuyển "thông minh" qua danh sách. Điều hướng tự động bỏ qua các phần tử không hoạt động và các tiêu đề nhóm, chỉ làm việc với các mục có sẵn để lựa chọn.

```javascript
const focus = ref(1)
const controller = new ListDataRef(items, focus)

// 1. Trạng thái tiêu điểm và tìm kiếm
controller.isFocus()        // Xác minh tính chính xác của tiêu điểm hiện tại
controller.isHighlight()    // Kiểm tra xem có kết quả tìm kiếm trùng khớp hay không
controller.highlightFirstItem // Chỉ số của mục trùng khớp đầu tiên

// 2. Điều hướng tương đối (từ mục đã chọn)
const next = controller.getSelectedNext() // Chỉ số của mục khả dụng tiếp theo
const prev = controller.getSelectedPrev() // Chỉ số của mục khả dụng trước đó

// 3. Điều hướng tự do (theo các bước hoặc đối tượng)
const item = controller.getItemByStep(currentItem, 2) // Nhảy qua 2 mục từ vị trí hiện tại
const firstInGroup = controller.getFirstItemByParent('group-id') // Mục đầu tiên trong nhóm
```

## Làm việc với các cấu trúc lồng nhau

Để xử lý các nhóm hoặc cấu trúc dạng cây, phương thức `getSubList()` được sử dụng. Nó tạo ra một phiên bản trình điều khiển mới cho dữ liệu lồng nhau trong khi vẫn duy trì liên kết toàn cầu với các trạng thái tiêu điểm và lựa chọn.

```javascript
// Bên trong một thành phần nhóm hoặc menu thả xuống:
const subController = controller.getSubList(groupItem)

// subController sẽ tự động theo dõi các thay đổi trong danh sách cha
const subItems = subController.fullData
```
