@fui-org/fui-cli 0.1.1 → 0.3.0

package/skills/fui-skill/references/component-table.md

@@ -0,0 +1,276 @@
+# FUI Table Components (Source-Based)
+
+> File này sở hữu: **`f-table` chuyên sâu: mọi props, auto-header, `sum-format`, readonly table**. Điều khiển trong ô (`t-*`) xem [ui-table-cell-patterns.md](ui-table-cell-patterns.md).
+
+This file is derived from `scripts/componentTable.js` (V2) and `scripts/componentTable-3.0.js` (V3).
+Focus: `f-table` and `t-*` renderers.
+
+> **Xác định phiên bản trước khi viết headers** — V2 và V3 dùng tên field khác nhau, sai tên thì bảng không render. Xem mục "V2 vs V3 — Sự khác biệt quan trọng" cuối file.
+
+> `f-table` đảm nhận cả hai vai trò: bảng CRUD và bảng chỉ xem (readonly). Bảng chỉ xem = `f-table` không khai báo `:update-api` (hoặc thêm `:disabled-update true`); có thể bỏ luôn `:headers` để bảng tự dựng header từ dữ liệu (xem Auto Headers bên dưới).
+
+## Prefix Reminder
+
+- `f-table`: FUI component.
+- `t-*`: FUI cell renderers for table columns.
+- `v-data-table`: Vuetify internal implementation, but CRUD and table action flow comes from FUI wrappers.
+
+## f-table
+
+### Props (exact from source)
+
+`value`, `headers`, `updateForm`, `updateFormAttr`, `updateApi`, `items`, `label`, `excel`, `showSearch`, `sumFormat`, `disabledHover`, `returnObject`, `itemKey`, `itemsPerPage`, `disabledUpdate`, `hideDefaultFooter`, `template`, `headercomponent`, `height`, `fixedHeader`, `fixedCols`
+
+### Real Behavior
+
+1. If a header item has `el`, table creates custom slot renderer automatically.
+2. If `updateApi.new` or `updateApi['new-action']` exists, add button appears.
+3. CRUD action slots rely on header `value: "ctrl-update"`.
+4. Editing dialog is `f-dialog` with `updateForm`.
+5. Selection result emit:
+- if `returnObject=false`: emit array of `itemKey`
+- if `returnObject=true`: emit selected row objects
+6. Emits row events from slots: `click:row`, `mouseover:row`, `mouseleave:row`.
+7. **Auto headers**: nếu KHÔNG truyền `:headers`, table tự build header từ `items` (xem mục Auto Headers).
+8. **Sum row / sum line**: prop `sum-format` nhận string HOẶC object — hai cách render khác nhau (xem mục sum-format).
+
+### Cố định cột bên trái (`fixed-cols`)
+
+Khai `fixed-cols="N"` để giữ N cột đầu tiên khi cuộn ngang. Tính năng có ở cả FUI V2 và V3; bỏ prop, đặt `0`, hoặc truyền giá trị không hợp lệ thì bảng hoạt động như cũ.
+
+```json
+{
+  "el": "f-table",
+  "w": 12,
+  "attr": {
+    ":items": "dsNhanVien",
+    "fixed-cols": "2",
+    ":headers": [
+      { "text": "Mã", "value": "Ma", "width": "100px" },
+      { "text": "Họ tên", "value": "HoTen", "width": "220px" },
+      { "text": "Phòng ban", "value": "PhongBan", "width": "180px" }
+    ]
+  }
+}
+```
+
+- Nên khai `width` cho từng cột được cố định; nếu bỏ trống, `f-table` dùng `150px`.
+- `width` dạng số được hiểu là pixel; chuỗi CSS như `"120px"` vẫn được giữ nguyên.
+- `fixed-cols` đếm theo thứ tự cột render thực tế. Nếu bật cột chọn dòng/group của Vuetify thì các cột hệ thống đó cũng nằm trong phép đếm.
+- CSS được scope theo từng instance `f-table`, nên nhiều bảng có số cột cố định khác nhau có thể cùng xuất hiện trên một trang.
+
+### Auto Headers (khi không truyền `:headers`)
+
+Khi bỏ hẳn prop `:headers`, `f-table` tự build header từ row đầu tiên của `items` (qua `buildHeader`):
+
+- Mỗi key của row → một cột `{ text: key, value: key, divider: true }`; key có giá trị số → tự gắn `el: "t-num"` (format số bên phải).
+- Nếu có `:update-api` với `edit`/`delete` và không `disabled-update` → tự thêm cột `ctrl-update` cuối bảng.
+- Headers được rebuild mỗi khi `items` đổi shape (watch trên `items`) — an toàn khi data load async.
+
+**Khi nào dùng:** bảng hiển thị nhanh, cột đúng bằng field trả về từ API (SP đã alias tên cột đẹp bằng tiếng Việt). **Khi nào KHÔNG dùng (phải khai `:headers` tường minh):** cần label khác tên field, cần ẩn bớt cột, cần `t-*` renderer tùy biến (t-time, t-check, t-link...), cần width/align cụ thể, hoặc data có field kỹ thuật (ID nội bộ, flag) không nên hiển thị.
+
+```json
+{ "el": "f-table", "w": "12", "attr": { "label": "Kết quả", ":items": "dsKetQua", "show-search": true } }
+```
+
+### sum-format — Tổng cột (2 dạng)
+
+Prop `sum-format` có 2 dạng, render hoàn toàn khác nhau:
+
+**Dạng 1 — string template → MỘT dòng text tổng dưới bảng** (trong `v-card-actions`, KHÔNG nằm trong `v-data-table`, không thẳng cột):
+
+```json
+"sum-format": "Tổng đăng ký: [[DangKy]] | Nhập học: [[NhapHoc]]"
+```
+
+- `[[FieldName]]` được thay bằng `_.sumBy(items, 'FieldName')` format cố định `'0,0'` (numeral).
+- Kết quả là 1 dòng text duy nhất, căn phải, phía dưới bảng (có `v-divider` ngăn cách).
+- Dùng khi: chỉ cần 1 dòng tóm tắt tổng, hoặc tổng của nhiều cột gộp chung 1 câu.
+- Là string tĩnh → khai báo attr KHÔNG có `:` prefix.
+
+**Dạng 2 — object → HÀNG TỔNG thật sự trong bảng** (slot `body.append` của `v-data-table`, thẳng theo từng cột):
+
+```json
+":sum-format": { "DangKy": "0,0", "NhapHoc": "0,0", "HocPhi": "0,0.0" }
+```
+
+- Key = `value` của cột trong headers; value = numeral format string riêng cho cột đó (`"0,0"`, `"0,0.0"`, `"0.0%"`, ...).
+- Render một `<tr>` cuối thân bảng: ô của cột có key trong object hiển thị `_.sumBy(items, key)` theo format tương ứng; các cột khác để trống. Tất cả ô căn phải, `font-weight-medium`.
+- Hàng tổng nằm TRONG bảng nên thẳng hàng với cột, cuộn cùng thân bảng.
+- Là object → khai báo attr CÓ `:` prefix.
+
+**Chọn dạng nào:** user cần "hàng tổng dưới mỗi cột / dòng tổng trong bảng / tổng thẳng cột" → dạng object. User cần "dòng chữ tổng kết chung" → dạng string. **KHÔNG tự dựng hàng tổng thủ công** (không push row "Tổng" vào items, không tự viết template body.append) — dùng `sum-format`.
+
+Ví dụ đầy đủ dạng object:
+
+```json
+{
+  "el": "f-table", "w": "12",
+  "attr": {
+    "label": "Thống kê tuyển sinh",
+    ":items": "dsThongKe",
+    ":headers": [
+      { "text": "Ngành", "value": "TenNganh" },
+      { "text": "Đăng ký", "value": "DangKy", "el": "t-num" },
+      { "text": "Nhập học", "value": "NhapHoc", "el": "t-num" }
+    ],
+    ":sum-format": { "DangKy": "0,0", "NhapHoc": "0,0" }
+  }
+}
+```
+
+### updateApi Keys Used By Source
+
+- `new`
+- `edit`
+- `delete`
+- `default-item`
+- `new-action`
+- `edit-action`
+- `data-out`
+
+### Minimal CRUD Example
+
+```json
+{
+  "el": "f-table",
+  "w": "12",
+  "attr": {
+    "label": "Danh sach nhan vien",
+    ":items": "items",
+    "item-key": "ID",
+    ":return-object": false,
+    "show-search": true,
+    "excel": true,
+    ":headers": [
+      { "text": "Ho ten", "value": "FullName" },
+      { "text": "Email", "value": "Email" },
+      { "text": "Trang thai", "value": "Active", "el": "t-boolean", "align": "center", "width": "90px" },
+      { "text": "Tac vu", "value": "ctrl-update", "align": "center", "width": "120px" }
+    ],
+    ":update-form": [
+      { "el": "v-text-field", "attr": { "v-model": "FullName", "label": "Ho ten", ":required": true } },
+      { "el": "v-text-field", "attr": { "v-model": "Email", "label": "Email", ":required": true } }
+    ],
+    ":update-api": {
+      "default-item": { "FullName": "", "Email": "", "Active": true },
+      "new": {
+        "API": "/api/staff/create",
+        "IN": { "FullName": "item.FullName", "Email": "item.Email", "Active": "item.Active" },
+        "CALLBACK": { "CALL": "apiLoadItems" }
+      },
+      "edit": {
+        "API": "/api/staff/update",
+        "IN": { "ID": "item.ID", "FullName": "item.FullName", "Email": "item.Email", "Active": "item.Active" },
+        "CALLBACK": { "CALL": "apiLoadItems" }
+      },
+      "delete": {
+        "CONFIRM": "Xac nhan xoa?",
+        "API": "/api/staff/delete",
+        "IN": { "ID": "item.ID" },
+        "CALLBACK": { "CALL": "apiLoadItems" }
+      }
+    }
+  }
+}
+```
+
+## Readonly Table
+
+Bảng chỉ xem = `f-table` không có `:update-api` (không hiện nút thêm/sửa/xóa) — bỏ `:headers` nếu muốn auto-build:
+
+```json
+{
+  "el": "f-table",
+  "w": "12",
+  "attr": {
+    "label": "Danh sach xem nhanh",
+    ":items": "items",
+    "item-key": "ID",
+    "show-search": true,
+    "excel": true,
+    ":items-per-page": 20
+  }
+}
+```
+
+## t-* Cell Renderers
+
+Use in `headers` by setting `el`.
+
+Example header:
+
+```json
+{ "text": "Ngay tao", "value": "CreatedAt", "el": "t-time", "attr": { "format": "DD/MM/YYYY HH:mm" } }
+```
+
+### Supported `t-*` components
+
+- `t-html`
+- `t-label`
+- `t-num`
+- `t-time`
+- `t-boolean`
+- `t-check`
+- `t-text`
+- `t-select`
+- `t-combobox`
+- `t-menu`
+- `t-link`
+- `t-button`
+
+### Notes
+
+1. Editable renderers (`t-check`, `t-text`, `t-select`, `t-combobox`, `t-menu`, `t-button`) use `tableActionEvent`.
+2. For dialog opening in row actions, use `target: "dialog"` plus `wid`, `url`, `title`, `onclose`.
+3. Apply literal-string rule only in Action `IN` mapping.  
+   Static component props without `:` are plain strings by default.
+
+---
+
+## V2 vs V3 — Sự khác biệt quan trọng (nguồn: `componentTable.js` vs `componentTable-3.0.js`)
+
+Phiên bản framework được xác định từ `_projectInfo.json` hoặc `_moduleInfo.json` — tra trước khi viết headers.
+
+### Header field names
+
+**Đây là điểm dễ nhầm nhất.** Hai trường `text`/`value` của V2 đổi tên thành `title`/`key` ở V3:
+
+| Trường | V2 (`componentTable.js`) | V3 (`componentTable-3.0.js`) |
+|---|---|---|
+| Nhãn cột | `"text": "Tên cột"` | `"title": "Tên cột"` |
+| Field data | `"value": "TenField"` | `"key": "TenField"` |
+| Cột ctrl | `"value": "ctrl-update"` | `"key": "ctrl-update"` |
+
+```json
+// V2 ✅
+{ "text": "Họ tên", "value": "HoTen", "el": "t-label" }
+{ "text": "Tác vụ", "value": "ctrl-update", "align": "center" }
+
+// V3 ✅
+{ "title": "Họ tên", "key": "HoTen", "el": "t-label" }
+{ "title": "Tác vụ", "key": "ctrl-update", "align": "center" }
+```
+
+> Dùng `text`/`value` trên project V3 → cột render nhưng **tiêu đề biến mất và sort không hoạt động** (Vuetify 3 đọc `title`/`key`, bỏ qua `text`/`value`). Không có lỗi JS nào báo — chỉ nhìn thấy qua ảnh render.
+
+### Props bổ sung ở V3
+
+| Prop | Mặc định V3 | Ghi chú |
+|---|---|---|
+| `density` | `'compact'` | Mật độ dòng — `'compact'`/`'comfortable'`/`'default'` |
+| `disable-sort` | `false` | Tắt sort toàn bảng |
+| `slots` | `null` | Custom slot động (object `{ name, html }`) |
+| `group-template` | `null` | Template cho nhóm gộp (`groupBy`) |
+| `height` | `null` | Giống V2: null/bỏ trống = tự giãn; ≤0 = fill đáy; >0 = px cố định |
+
+### sum-format object dạng V3
+
+Ở V3, key của `sum-format` object phải khớp `key` của header (không phải `value`):
+
+```json
+// V3 ✅ — key = "DangKy" khớp với header { "key": "DangKy" }
+":sum-format": { "DangKy": "0,0", "NhapHoc": "0,0" }
+```
+
+Logic giống V2 hoàn toàn — chỉ khác ở chỗ V3 đọc `col.key` thay vì `col.value` nên tên field phải nhất quán.

package/skills/fui-skill/references/components-dialog.md

@@ -0,0 +1,192 @@
+# FUI Dialog & Overlay Components
+
+> File này sở hữu: **`f-dialog`, `f-window`, `f-editor`**. Pattern dialog thủ công (`v-dialog` + hidden-container) xem [ui-dialog-patterns.md](ui-dialog-patterns.md).
+
+Components liên quan đến dialog, overlay, và editor nội dung. Xem prefix/binding rules tại [components-display.md](components-display.md).
+
+## f-window
+
+- Props (source): `id`
+- Behavior: internal iframe dialog host, thường được mở qua `openWindow(...)`
+- Example:
+
+```json
+{
+  "FUN": "openWindow",
+  "IN": {
+    "id": "`winUser",
+    "url": "'/fp/module?mid=123'",
+    "title": "Chi tiet user",
+    "width": 1100
+  }
+}
+```
+
+## f-editor
+
+- Props (source): `value`, `imageapi`, `height`, `toolbar`
+- Emit: `input` with HTML content
+- Behavior: wraps CKEditor with upload auth header
+- Example:
+
+```json
+{
+  "el": "f-editor",
+  "w": "12",
+  "attr": {
+    "v-model": "formData.contentHtml",
+    "imageapi": "/api/editor/upload",
+    ":height": 360
+  }
+}
+```
+
+## f-editor-dialog
+
+- Props (source): `value`, `imageapi`, `label`, `width`, `toolbar`
+- Runtime expectation: `value` là object (`open`, `text`, `object`, `ok`), không phải plain string
+- Behavior: modal editor, write-back on OK
+- Example:
+
+```json
+{
+  "el": "f-editor-dialog",
+  "w": "6",
+  "attr": {
+    ":value": "editorState",
+    "label": "Noi dung mo rong",
+    ":width": 1000,
+    "imageapi": "/api/editor/upload"
+  }
+}
+```
+
+## f-dialog
+
+Modal dialog tự build form từ mảng `controls`, có hỗ trợ watchers cục bộ, validation, và action buttons.
+
+- Props:
+  - `value` (Boolean, default: `false`) — v-model để mở/đóng dialog
+  - `data` (Object, default: `{}`) — dữ liệu đầu vào, bind bằng `:data.sync`; khi dialog mở dữ liệu này được copy vào các field
+  - `dataOut` (Object, default: `{}`) — dữ liệu đầu ra, bind bằng `:data-out.sync`; nhận instance component khi dialog mở
+  - `title` (String, default: `''`) — tiêu đề dialog
+  - `controls` (Array, default: `[]`) — mảng control definitions để build form; mỗi control có `el`, `attr`, `w` (col width); field nào có `v-model` không bắt đầu bằng `vueData.` sẽ được tạo data cục bộ tự động (khởi tạo `null`)
+  - `watch` (Object, default: `{}`) — watchers cục bộ trong dialog; key là tên field, value là action chạy khi field thay đổi; watchers được đăng ký khi dialog mở và hủy khi đóng
+  - `button` (Array, default: `[]`) — mảng button definitions (xem cấu trúc button bên dưới)
+  - `disableValidate` (Boolean, default: `false`) — bỏ qua form validation khi `true`
+  - `width` (Number, default: `800`) — chiều rộng dialog (px)
+  - `openAction` (Object, default: `null`) — action chạy ngay khi dialog mở
+
+- Emits:
+  - `input` — mở/đóng dialog (dùng với v-model)
+  - `update:data-out` — phát ra instance component khi dialog mở (để parent truy cập data cục bộ)
+  - `update:data` — phát ra `v_outData` khi button có `getoutdata: true` được click (sau khi validation pass)
+
+- Vòng đời khi mở (`value = true`):
+  1. Reset tất cả field về giá trị từ `:data` (gọi `setDefaultData`)
+  2. Đăng ký watchers từ prop `watch`
+  3. Chạy `openAction` nếu có
+  4. Emit `update:data-out` với instance component
+
+- Vòng đời khi đóng (`value = false`):
+  1. Hủy tất cả watchers đã đăng ký
+
+- Cấu trúc button object:
+  - `label` (String) — text hiển thị trên button
+  - `color` (String, default: `"primary"`) — màu button
+  - `elevation` (Number, default: `0`) — độ nổi
+  - `text` (Boolean, default: `true`) — dạng text button
+  - `type` (String) — ví dụ `"submit"`
+  - `:disabled` (String) — biểu thức Vue để disable button, ví dụ `"!checkBoxValue"`
+  - `v-if` (String) — biểu thức Vue để ẩn/hiện button, ví dụ `"ModuleID==1"`
+  - `icon-text` (String) — icon MDI hiển thị bên trái label
+  - `checkvalid` (Boolean) — validate form trước khi chạy action; nếu không pass thì dừng
+  - `getoutdata` (Boolean) — sync field values vào `v_outData` rồi emit `update:data`; cũng trigger validation
+  - `action` (Array | Function) — danh sách actions chạy khi click; context truyền vào gồm tất cả fields trong `v_outData` và key `dData` trỏ về `v_outData`
+
+- Lưu ý:
+  - Button click được debounce 500ms (leading edge) để tránh double-click
+  - Controls hỗ trợ `br: true` để xuống hàng (row break)
+  - Template được build tĩnh lúc `data()` init, không re-render khi prop `controls` thay đổi
+  - `watch` trong prop template là `:watch` (bind động), khác với `watch` mặc định của Vue
+  - **Không dùng `f-dialog` bên trong template của component:** `f-dialog` chỉ hoạt động khi được khai báo trực tiếp trong `controls` của cấu trúc JSON module. Nếu đặt trong template của một Vue component, nó sẽ không hoạt động đúng.
+  - **Khai báo biến `vueData` trước khi dùng trong controls:** Nếu một control bind vào `vueData.someVar`, biến đó phải được khai báo trước trong `data` của module — Vue không thể thiết lập reactivity cho biến chưa tồn tại lúc init.
+
+```json
+"data": [
+  { "projectList": [] }
+],
+"controls": [
+  {
+    "prop": "fluid pa-0",
+    "rows": [{ "prop": "", "cols": [
+      {
+        "el": "v-autocomplete",
+        "attr": {
+          "v-model": "pid",
+          "label": "Module name",
+          ":items": "vueData.projectList",
+          "item-text": "ModuleName",
+          "item-value": "ModuleID"
+        }
+      }
+    ]}]
+  }
+]
+```
+
+- Ví dụ đầy đủ:
+
+```json
+{
+  "el": "f-dialog",
+  "attr": {
+    "v-model": "dialogOpen",
+    ":data.sync": "dialogData",
+    "title": "Nhap du lieu",
+    ":open-action": { "MESSBOX": "Bạn vừa mở dialog" },
+    ":controls": [
+      { "el": "v-text-field", "attr": { "v-model": "Domain", "label": "Domain" }, "w": 4 },
+      { "el": "v-text-field", "attr": { "v-model": "ModuleID", "label": "ModuleID" }, "w": 3 },
+      { "el": "v-text-field", "attr": { "v-model": "ModuleName", "label": "ModuleName" }, "w": 8 },
+      {
+        "el": "v-checkbox",
+        "attr": { ":label": "`Tôi đã hiểu và đồng ý: ${checkBoxValue}`", "v-model": "checkBoxValue" }
+      },
+      {
+        "el": "v-select",
+        "attr": {
+          "label": "select", "v-model": "bienselect",
+          ":items": "vueData.Mang", "item-text": "AppName", "item-value": "AppListID"
+        }
+      }
+    ],
+    ":watch": {
+      "bienselect": { "MESSBOX": "Watch Select {{bienselect}}" },
+      "Domain": { "MESSBOX": "Watch textbox {{Domain}}" }
+    },
+    ":button": [
+      {
+        "label": "Submit OK",
+        "type": "submit",
+        ":disabled": "!checkBoxValue",
+        "action": [
+          { "ModuleName": "gan gia tri cho ModuleName" },
+          { "MESSBOX": "thong bao 1" },
+          { "dialogOpen": false }
+        ]
+      },
+      {
+        "label": "Chay mot API",
+        "checkvalid": true,
+        "v-if": "ModuleID==1",
+        "action": [{ "API": "/chaymotapi" }]
+      },
+      {
+        "label": "Close",
+        "action": [{ "dialogOpen": false }]
+      }
+    ]
+  }
+}
+```

package/skills/fui-skill/references/components-display.md

@@ -0,0 +1,147 @@
+# FUI Display & Presentation Components
+
+> File này sở hữu: **component hiển thị: `f-label`, `f-title`, `f-box`, `f-header`, `f-slider`, chip/badge**.
+
+Components dùng để hiển thị thông tin, chart, media. File này cũng chứa prefix/binding rules áp dụng cho tất cả f-* components.
+
+## Prefix và Binding Rules
+
+- `f-*`: FUI components (định nghĩa trong FUI runtime)
+- `v-*`: Vuetify components
+- `uc-*`: Custom module components từ `components/`
+- Trong `module.json`, truyền props qua `attr`
+- Dùng kebab-case trong JSON cho custom props (`api-upload`, `item-value`)
+- Giá trị động dùng `:prop`
+- Dùng `v-on:*` trong JSON (không dùng `@*`)
+- Props không có `:` (ví dụ `url`, `api-upload`) là plain string mặc định
+- Literal-string forcing (backtick/quote) chỉ dùng trong Action `IN` mapping, không dùng cho static props
+
+## Minimal Control Pattern
+
+```json
+{
+  "el": "f-date",
+  "w": "6",
+  "attr": {
+    "v-model": "formData.fromDate",
+    "label": "From date"
+  }
+}
+```
+
+---
+
+## f-label
+
+- Props (source): `items`, `text`, `color`, `iconText`
+- Behavior: render `v-chip` từ `text` và/hoặc `items`
+- Example:
+
+```json
+{
+  "el": "f-label",
+  "w": "12",
+  "attr": {
+    "text": "Trang thai",
+    "icon-text": "mdi-information"
+  }
+}
+```
+
+## f-box
+
+- Props (source): `rowFormat`, `items`, `label`, `edit`, `saveclick`
+- Emit: `input` khi dữ liệu nội bộ thay đổi
+- Behavior: hiển thị/chỉnh sửa key-value rows, tự build row format từ data nếu thiếu
+- `rowFormat`: mảng `{ text, value, noEdit }` — `noEdit: true` khóa cột đó khi `edit=true`
+- `items`: object hoặc array; object tự động wrap thành array 1 phần tử
+- Example:
+
+```json
+{
+  "el": "f-box",
+  "w": "12",
+  "attr": {
+    "label": "Thong tin",
+    ":items": "detailData",
+    ":edit": "isEditMode",
+    ":row-format": [
+      { "text": "Mã", "value": "StudentID", "noEdit": true },
+      { "text": "Họ tên", "value": "FullName" },
+      { "text": "Ngày sinh", "value": "BirthDate" }
+    ]
+  }
+}
+```
+
+## f-header
+
+- Props (source): `label`
+- Example:
+
+```json
+{
+  "el": "f-header",
+  "w": "12",
+  "attr": { "label": "Bao cao tong hop" }
+}
+```
+
+## f-title
+
+- Props (source): `label`
+- Example:
+
+```json
+{
+  "el": "f-title",
+  "w": "12",
+  "attr": { "label": "Danh sach ho so" }
+}
+```
+
+## f-slider
+
+- Props (source): `items`, `itemAttr`
+- Behavior: bọc `v-carousel` và `v-carousel-item`
+- Example:
+
+```json
+{
+  "el": "f-slider",
+  "w": "12",
+  "attr": {
+    ":items": "slideItems",
+    ":item-attr": { "contain": true }
+  }
+}
+```
+
+## f-echart
+
+→ Xem [`components-echart.md`](components-echart.md) — tài liệu đầy đủ về props, config, global module `FEchartFormatter` và ví dụ.
+
+## f-pdfmake
+
+- Props (source): `data`
+- Behavior: render PDF trong iframe, re-render khi `data` thay đổi (deep watch)
+- Example:
+
+```json
+{
+  "el": "f-pdfmake",
+  "w": "12",
+  "attr": {
+    ":data": "pdfDefinition",
+    "height": "550"
+  }
+}
+```
+
+---
+
+## Practical Notes
+
+1. Hầu hết `f-*` components forward unknown attrs qua `v-bind="$attrs"` — Vuetify attrs vẫn hoạt động nếu child là Vuetify control.
+2. Literal-string rule chỉ áp dụng khi truyền API/path strings trong Action `IN` mapping.
+3. Xem `references/component-table.md` cho `f-table`.