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

<Meta title='@dxtmisha/vi/# UI/properties/# Kiểu'/>

# Kiểu (\_type)

Cờ `_type` là một tham số siêu dữ liệu (meta-parameter) cốt lõi định nghĩa mô hình xử lý kiến trúc của một node. Nó chỉ lệnh cho Engine biên dịch cách ứng xử với node hiện hành (đóng vai trò là chuỗi CSS biến variable, media query, pseudo-element, hay trạng thái BEM...). Việc xác định chuẩn xác type là nhân tố quan trọng để thiết lập mã nguồn SCSS-mixins hay TypeScript interfaces an toàn.

## Hành vi Mặc định & Trình Tự động nhận diện
Khi tham số `_type` không được gán, hệ thống sẽ tự động kích hoạt tiến trình rà soát logic ngầm định (Automatcher):

1. **Bóc tách Prefix:** Engine quét tên khóa (key) để tìm kiếm các Alias (ký hiệu tắt) hoặc cấu trúc chỉ định loại cú pháp `[type]|[tên_thuộc_tính]`. Khi nhận diện trùng khớp, node sẽ được cài đặt tự động giá trị type tương ứng vào thuộc tính ẩn.
2. **Sự kiện Bị Bypass (Pass-through):** Cụm node nào không kèm ký hiệu định danh, giá trị tham số `_type` của nó được thiết lập tại mức `undefined`. Chúng được máy TypeScript miễn trừ xử lý cấu trúc và được bảo lưu cấu hình lọt xuyên luồng nhúng thành CSS "key-value" Properties thô đơn giản dưới nền tảng cấu hình mảng Data SCSS.

## Mảng Thông Số Types (PropertyType)
Hệ thống cung cấp sẵn một chuỗi phân bộ loại thiết lập (`_type`) bao quát toàn diện các điểm rơi biên dịch SCSS/TS:

### Thuộc tính Cơ Sở & Biến số
- `property` — Định danh tham số sẽ sinh ra là một thuộc tính vật lý CSS thông thường.
- `var` — Cưỡng chế node phải được dịch mã chuyên biệt thành cụm biến CSS (Custom Variable).

### Khung Cấu trúc Node
- `design` — Đặt tên hệ thống thiết kế cho khối dự án (nằm tại cấp độ cấu hình khung đầu).
- `component` — Xác định tên gốc rễ của Component UI để làm khung sinh đối tượng mảng cây SCSS.
- `class` — Gán áp đặt cứng một cụm tên class CSS tùy biến dành riêng cho Node đang được trỏ.
- `theme` — Quyết định phần nhánh cây properties đảm đương vai trò biên dịch ra nhóm Classes riêng của Theme hiện hành.

### Phân mảng Thành phần & Modifiers (BEM)
- `subclass` — Đại diện cho phân vùng Class con cấp dưới (BEM element) bọc lồng tịnh tiến vào trong Block chính.
- `state` — Xác định các biến thể và trạng thái phụ của phần tử (như các BEM modifiers).
- `virtual` — Gọi tên khai báo kết xuất chuẩn ra cấp độ Pseudo-element ảo (`::before`, `::after`).
- `selector` — Định nghĩa các thuộc tính con và pseudo-class của phần tử (ví dụ: `:hover`, `:focus`).

### Responsive & Container Quy mô
- `media` / `media-max` — Ràng buộc đóng khung chỉ số cấu hình CSS bọc ngay bên trong câu truy vấn `@media` màn hình (theo viền min-width / max-width).
- `media-group` / `media-max-group` — Group logic túm gom quy nạp hệ số dữ liệu quy mô lớn trải qua các truy vấn Media queries.
- `container` / `container-max`... — Tính năng tái thiết giao diện tương đương nhóm Media, nhưng quy chiếu theo mảng theo dõi thuộc tính khung `@container` gốc.

### Lập đồ Animation
- `animate` — Gọi lệnh biên dịch trỏ node làm gốc cài quy chuẩn hệ thuộc tính CSS Animation.
- `animate-frame` — Đặc định node thiết lập khung frame nhỏ cấu trúc cho bảng thông báo khung bên trong lõi `@keyframes`.

### Xử lý Logic & Link kế thừa
- `link` — Gắn chỉ thị bóc tách dữ liệu và hợp nhất sao chép toàn bộ Properties nhắm mốc từ một element/node ngầm định khác.
- `link-class` — Ràng buộc đường truyền móc nối element khác nhắm vào việc duy nhất để mượn vay tên CSS Class của bên đó.
- `file` — Chèn địa chỉ nhúng tham kiến cấu trúc từ một file gốc Properties `.json` ngoại lai để hợp nhất.
- `mixin` — Đi kèm vai trò block hỗ trợ dùng một lần (mixin module). Tham số sẽ không lọt cửa biên dịch vào nội lực CSS vật lý xuất ra sau cùng.

### SCSS Thâm nhập & Exclusions
- `scss` — Định danh khối node thuần gen mảng phục vụ trực tiếp thư viện code SCSS thuần trong cấu trúc.
- `root` — Định vị bắt chuỗi node mang đặc quyền Global, phá vỡ mọi cấp lồng ngầm tự bốc hơi bay thẳng lên Root thông qua `@at-root`.
- `none` — Phá bỏ toàn diện dữ liệu. Node bị đóng băng, cấm vĩnh viễn lọt vào tiến trình biên dịch file hệ thống output cuối cùng.
- `other` — Mã hệ thống không phân giải nội bộ, bắt theo quy trình chém file y như Type `none`.

## Cú pháp Rút Gọn (Aliases)
Nhằm triệt tiêu việc phải code lồng khối quá sâu hoặc trùng lặp rườm rà chuỗi khai báo `{"_type": "..."}` ở mỗi node, hệ thống cung cấp lối tắt cấu hình bằng cơ chế tiền tố khóa (prefix). Trình biên dịch sẽ tự động nhận diện tiền tố và gắn chuẩn `_type` tương ứng cho node.

### 1. Phím tắt Tiền tố Ký tự (SYMBOLS)
Các kiến trúc Type trọng yếu được gắn liền cùng khoá mật danh Symbol. Phép màu bắt đầu chỉ bằng cách đặt chốt ký tự này ở đầu Node String:

- `$` *(tương đương `var`)* — Biến hệ thống (Ví dụ: `"$border"`).
- `#` *(tương đương `subclass`)* — Module Class con chuẩn BEM (Ví dụ: `"#icon"`).
- `~` *(tương đương `state`)* — Các biến thể và trạng thái phụ của phần tử (Ví dụ: `"~primary"`).
- `:` *(tương đương `selector`)* — Thuộc tính con và pseudo-class (Ví dụ: `":hover"`).
- `::` *(tương đương `virtual`)* — Phân hóa thực thể ảo Pseudo-element (Ví dụ: `"::after"`).
- `@` *(tương đương `link`)* — Liên kết vòng mạng dữ liệu nội tại hệ thống.
- `@@` *(tương đương `link-class`)* — Trỏ cấp độ kế thừa Class kiến trúc rễ lưới.
- `&` *(tương đương `scss`)* — Vòng quy chiếu bọc ghép mảng gốc SCSS.
- `&&` *(tương đương `root`)* — Trích ly đóng khung nẩy khỏi mạng lồng tiến cấp về `@at-root`.
- `--` *(tương đương `none`)* — Khoá vô hiệu loại triệt để Node String tránh lọt vào chu trình Build compile mã CSS Output.

### 2. Cú pháp Phân cách Dọc dạng Thanh (`|`)
Với các cụm tính năng không đi kèm phím tắt cứng gán sẵn (như `media`, `container-group`), Parser quét đáp ứng thông qua cú pháp vách ngăn đứng: `[type]|[tên_thuộc_tính]`.

- Tiền tố trái vách ranh giới thanh `|` được càn quét trực diện làm tham số `_type` duy nhất.
- **Ví dụ:** Vòng khóa cấu trúc `"media-group|adaptive-block"` sẽ nhận lệnh xác lập ngay lập tức Type thiết đặt hệ thống là `media-group`.

## Minh Hoạ Code Mẫu / Phiên dịch SCSS

**File Cấu hình Đầu vào (`properties.json`):**
```json
{
  "padding": "12px",             // Kiểu mặc định (thuộc tính CSS tĩnh)
  
  "sm": {                        // Khai báo thủ công Type (media)
    "_type": "media",
    "padding": "16px"
  },

  "$border": "8px",              // Lối tắt: var
  
  "#icon": {                     // Lối tắt: subclass
    "width": "24px"
  },
  
  ":hover": {                    // Lối tắt: selector
    "background-color": "#aaaaaa"
  },
  
  "~primary": {                  // Lối tắt: state
    "color": "#ff0000"
  }
}
```

**Kết quả Biên dịch Dự kiến (SCSS Output):**
```scss
.component-name {
  padding: 12px;
  --sys-[component]-border: 8px;

  @media (min-width: 576px) {  /* Nhánh sm (media) */
    padding: 16px;
  }

  &__icon {                    /* Nhánh #icon (subclass) */
    width: 24px;
  }

  &:hover {                    /* Nhánh :hover (selector) */
    background-color: #aaaaaa;
  }

  &--primary {                 /* Nhánh ~primary (state) */
    color: #ff0000;
  }
}
```
