@fui-org/fui-cli 1.3.1 → 2.0.0

package/skills/fui-skill/references/ui-layout-patterns.md

@@ -1,14 +1,12 @@
 # FUI Layout Patterns — page-container, master-detail, switch, dynamic label
 
-> File này sở hữu: **pattern layout trang: page-container sticky, master-detail 2 cột, v-switch, date init, dynamic label**.
+> Owns: **page layout patterns: sticky page-container, 2-column master-detail, v-switch, date init, dynamic label**.
 
-Các pattern layout và điều khiển bổ trợ. Rút ra từ project **security-manager**.
-
-> Xem thêm: [ui-patterns.md](ui-patterns.md), [ui-table-cell-patterns.md](ui-table-cell-patterns.md), [module-structure.md](module-structure.md).
+Layout and helper-control patterns, drawn from project **security-manager**. See also: [ui-patterns.md](ui-patterns.md), [ui-table-cell-patterns.md](ui-table-cell-patterns.md), [module-structure.md](module-structure.md).
 
 ---
 
-## 1. Khởi tạo Date với moment()
+## 1. Date init with moment()
 
 ```json
 "data": [
@@ -19,13 +17,13 @@ Các pattern layout và điều khiển bổ trợ. Rút ra từ project **secur
 ]
 ```
 
-> Giá trị là JS expression string — FUI sẽ eval nó khi khởi tạo. `moment()` có sẵn trong FUI runtime.
+> The value is a JS expression string, eval'd at init. `moment()` is available in the FUI runtime.
 
 ---
 
-## 2. page-container + page-navigation Layout
+## 2. page-container + page-navigation
 
-Dùng khi cần filter bar cố định phía trên, nội dung bên dưới scroll.
+Use for a fixed filter bar on top with scrolling content below.
 
 ```json
 {
@@ -38,29 +36,32 @@ Dùng khi cần filter bar cố định phía trên, nội dung bên dưới scr
         { "el": "f-date", "attr": { "v-model": "DenNgay", "label": "Tới ngày", "date-add": 0 }, "w": "2" },
         {
           "el": "f-button",
-          "attr": { "color": "primary", "icon-text": "mdi-filter", "label": "Tìm", ":action": { "CALL": "getLogData" } },
+          "attr": {
+            "color": "primary",
+            "icon-text": "mdi-filter",
+            "label": "Tìm",
+            ":action": { "CALL": "getLogData" }
+          },
           "w": 3
         }
       ]
     },
     {
       "prop": "",
-      "cols": [
-        { "el": "f-table", "attr": { "label": "Log viewer", ":items": "LogData" } }
-      ]
+      "cols": [{ "el": "f-table", "attr": { "label": "Log viewer", ":items": "LogData" } }]
     }
   ]
 }
 ```
 
-- `page-container` + `page-navigation` → filter bar sticky top
-- `f-table` không khai `:update-api` → readonly view; không truyền `:headers` → tự build header từ data
+- `page-container` + `page-navigation` → sticky top filter bar
+- `f-table` without `:update-api` → readonly; without `:headers` → headers auto-built from data
 
 ---
 
-## 3. Dynamic Label từ State
+## 3. Dynamic label from state
 
-Dùng `:label` với expression để hiển thị thông tin context.
+Use `:label` with an expression to show context.
 
 ```json
 {
@@ -82,7 +83,7 @@ Dùng `:label` với expression để hiển thị thông tin context.
 
 ---
 
-## 4. v-switch — Toggle với Label
+## 4. v-switch — toggle with label
 
 ```json
 {
@@ -102,7 +103,8 @@ Dùng `:label` với expression để hiển thị thông tin context.
 }
 ```
 
-Dùng với `v-if` để hiện/ẩn field bổ sung:
+Combine with `v-if` to show/hide extra fields:
+
 ```json
 {
   "el": "v-layout",
@@ -113,15 +115,13 @@ Dùng với `v-if` để hiện/ẩn field bổ sung:
 
 ---
 
-## 5. Master-Detail 2 Cột
+## 5. Two-column master-detail
 
-Pattern layout cha-con: bảng trái chọn row → watch → load bảng phải. Không cần mở window mới.
+Left table row pick → watch → load right table. No new window needed.
 
-> Nút mở detail đặt trong ô bảng: chọn `t-button` hay `t-menu` theo quy tắc ở
-> [ui-table-cell-patterns.md](ui-table-cell-patterns.md#khi-nào-dùng-t-button-vs-t-menu) — với
-> master-detail thì hành động là "xem/load dữ liệu liên quan" nên dùng `t-button`.
+> Detail button in a table cell: choose `t-button` vs `t-menu` per [ui-table-cell-patterns.md](ui-table-cell-patterns.md) — for master-detail the action is "view/load related data", so use `t-button`.
 
-**`data[]` và watch:**
+**`data[]` and watch:**
 
 ```json
 "data": [
@@ -141,7 +141,7 @@ Pattern layout cha-con: bảng trái chọn row → watch → load bảng phải
 }
 ```
 
-**Cột `t-button` trong bảng trái:**
+**`t-button` column in the left table:**
 
 ```json
 {
@@ -158,7 +158,7 @@ Pattern layout cha-con: bảng trái chọn row → watch → load bảng phải
 }
 ```
 
-**Layout 2 cột:**
+**2-column layout:**
 
 ```json
 {

package/skills/fui-skill/references/ui-patterns.md

@@ -1,28 +1,25 @@
-# FUI UI Patterns — Real-World Design Reference (Core)
+# FUI UI Patterns — Core
 
-> File này sở hữu: **pattern UI cốt lõi: toolbar/filter, permission gate, checklist thiết kế giao diện**. Bảng/dialog/cross-window/layout đã tách sang các file `ui-*` riêng.
+> Owns: **core UI patterns: toolbar/filter, permission gate, UI design checklist**. Table/dialog/cross-window/layout live in separate `ui-*` files.
 
-Các pattern được rút ra từ project **security-manager** — dùng làm tham chiếu khi thiết kế module mới.
+Patterns taken from project **security-manager** — use as reference for new modules. Load specialised files as needed:
 
-File này chứa **core patterns** (data/watch/toolbar/action). Các nhóm pattern chuyên sâu đã tách ra — load thêm khi cần:
-
-| Cần làm | File |
-|---|---|
-| f-table + điều khiển trong ô (t-check/t-button/t-select/t-menu, ctrl-update, chip-group) | [ui-table-cell-patterns.md](ui-table-cell-patterns.md) |
-| Dialog/form popup (hidden-container, mở dialog với row, checkbox-list) | [ui-dialog-patterns.md](ui-dialog-patterns.md) |
-| Mở sub-window & trao đổi dữ liệu (`openWindow`, `#PARENT`/`#Win`) | [ui-crosswindow-patterns.md](ui-crosswindow-patterns.md) |
-| Layout (page-container, master-detail, v-switch, date init, dynamic label) | [ui-layout-patterns.md](ui-layout-patterns.md) |
+| Need                                                                                   | File                                                     |
+| -------------------------------------------------------------------------------------- | -------------------------------------------------------- |
+| f-table + in-cell controls (t-check/t-button/t-select/t-menu, ctrl-update, chip-group) | [ui-table-cell-patterns.md](ui-table-cell-patterns.md)   |
+| Dialog/popup form (hidden-container, open dialog with row, checkbox-list)              | [ui-dialog-patterns.md](ui-dialog-patterns.md)           |
+| Sub-window & data exchange (`openWindow`, `#PARENT`/`#Win`)                            | [ui-crosswindow-patterns.md](ui-crosswindow-patterns.md) |
+| Layout (page-container, master-detail, v-switch, date init, dynamic label)             | [ui-layout-patterns.md](ui-layout-patterns.md)           |
 
 ---
 
-## 1. Cấu trúc `data[]` trong module.json
+## 1. `data[]` structure
 
-`data` là mảng khởi tạo state + action. FUI xử lý tuần tự từ trên xuống dưới.
+`data` initialises state + actions, processed top to bottom.
 
-**Quy ước tổ chức:**
-- Object **không có key action** (không có API, CALL, IF…) → khởi tạo state
-- Object **có key là tên hàm** → định nghĩa named action (tái sử dụng)
-- Object dạng `{ "API": ..., "OUT": ... }` hoặc `{ "CALL": ... }` ở cuối → tự chạy khi load xong
+- Object with **no action key** (no API, CALL, IF…) → state init
+- Object whose **key is a function name** → named (reusable) action
+- Trailing `{ "API": ..., "OUT": ... }` or `{ "CALL": ... }` → runs automatically on load
 
 ```json
 "data": [
@@ -46,13 +43,13 @@ File này chứa **core patterns** (data/watch/toolbar/action). Các nhóm patte
 ]
 ```
 
-> **Auto-startup**: CALL ở cuối `data[]` sẽ tự chạy khi module load — không cần event handler riêng.
+> **Auto-startup**: trailing CALLs in `data[]` run on module load — no event handler needed.
 
 ---
 
-## 2. Cascading API Init
+## 2. Cascading API init
 
-Dùng `CALLBACK` để set giá trị từ kết quả API đầu tiên, rồi API tiếp theo tự chạy qua `watch`.
+`CALLBACK` sets a value from the first API result; the next API runs via `watch`.
 
 ```json
 "data": [
@@ -68,13 +65,13 @@ Dùng `CALLBACK` để set giá trị từ kết quả API đầu tiên, rồi A
 }
 ```
 
-> `sModuleID` được set từ CALLBACK → watch tự kích hoạt `getFunctionRight`. Không cần gọi thủ công.
+> CALLBACK sets `sModuleID` → watch fires `getFunctionRight`. No manual call.
 
 ---
 
-## 3. Watch — Cascading Filter
+## 3. Watch — cascading filter
 
-Khi filter thay đổi → tự reload data. Nhiều watch → mảng CALL.
+Filter change → reload. Several actions → array of CALL.
 
 ```json
 "watch": {
@@ -90,11 +87,11 @@ Khi filter thay đổi → tự reload data. Nhiều watch → mảng CALL.
 
 ---
 
-## 4. Toolbar / Filter Row Pattern
+## 4. Toolbar / filter row
 
-Row chứa filter fields và action buttons, `v-spacer` đẩy nhóm nút về phải.
+Row of filter fields + action buttons; `v-spacer` pushes the button group right.
 
-> **Chuẩn mực bố cục của hàng này: MỌI cột đều `"col": "shrink"`, trừ `v-spacer`.** Cột không `shrink` là cột được chia phần trống — kể cả cột `w` rỗng, kể cả nút. Thiếu `shrink` thì nút phình ra, hở khoảng giữa các nút, và nhóm cuối hàng không sát mép phải dù đã có `v-spacer`. Khuôn chuẩn + số đo trên framework thật: [controls-patterns.md](controls-patterns.md) §Hàng nhiều control (toolbar).
+> **Rule: EVERY column is `"col": "shrink"` except `v-spacer`.** A non-`shrink` column takes a share of free space — including an empty-`w` column and buttons. Missing `shrink` → buttons stretch, gaps appear between buttons, and the trailing group doesn't reach the right edge even with `v-spacer`. Standard template + measurements: [controls-patterns.md](controls-patterns.md) §Toolbar row.
 
 ```json
 {
@@ -148,43 +145,39 @@ Row chứa filter fields và action buttons, `v-spacer` đẩy nhóm nút về p
         "color": "primary",
         "label": "Add User",
         "icon-text": "mdi-account-multiple-plus",
-        ":action": [
-          { "addNew": 1, "sUserID": "", "sUserName": "" },
-          { "dlUserInfo": true }
-        ]
+        ":action": [{ "addNew": 1, "sUserID": "", "sUserName": "" }, { "dlUserInfo": true }]
       }
     }
   ]
 }
 ```
 
-**Quy tắc:**
-- Filter fields: `w` là px (`>= 25`) + `col: "shrink"`. Cặp `attr: { class: "flex-md-grow-0", style: "width:Xpx" }` ở ví dụ trên là **thừa** — `w` + `shrink` đã cho đúng bề rộng đó (đo được: `w:150` + `shrink` → đúng 150px ở cả V2 lẫn V3); giữ lại trong ví dụ vì đây là module production chép nguyên, viết mới thì bỏ đi
-- Nút tìm: ngay sau fields, cũng `col: "shrink"` (nút **không** shrink sẽ bị kéo dãn ra)
-- **Luôn là `class: "shrink"` / `"col": "shrink"`, không phải `shrink: true`** — dạng thuộc tính trần chỉ ăn ở V2, ở V3 nó trơ và cột giãn full
-- `v-spacer`: cột **duy nhất** không `shrink` — nó phải giãn được thì mới đẩy được nhóm sau sang phải
-- Nút Add/Delete admin: sau spacer, thêm `v-if` permission — `col: { "v-if": "…", "class": "shrink" }` (object khi cần thêm key, vẫn giữ `shrink`)
-- Không có `v-spacer` mà muốn canh phải cả hàng: `"prop": "row justify-end"`
+- Filter fields: `w` in px (`>= 25`) + `col: "shrink"`. The `attr: { class: "flex-md-grow-0", style: "width:Xpx" }` pair above is **redundant** — `w` + `shrink` already gives that width (measured: `w:150` + `shrink` → exactly 150px on V2 and V3). It stays only because the example is copied from production; omit it in new code.
+- Search button right after the fields, also `col: "shrink"` (a non-shrink button stretches).
+- **Always `class: "shrink"` / `"col": "shrink"`, never `shrink: true`** — the bare attribute works only on V2; on V3 it's inert and the column goes full width.
+- `v-spacer` is the **only** non-`shrink` column — it must grow to push the following group right.
+- Admin Add/Delete buttons: after the spacer, permission `v-if` — `col: { "v-if": "…", "class": "shrink" }` (object form when extra keys are needed; keep `shrink`).
+- Right-align the whole row without `v-spacer`: `"prop": "row justify-end"`.
 
 ---
 
-## 5. Permission Gating
+## 5. Permission gating
 
-Ẩn/hiện phần tử theo `SystemRight` của user.
+Show/hide by the user's `SystemRight`.
 
 ```json
 "col": { "v-if": "vueData.user.SystemRight>1" }
 "col": { "v-if": "vueData.user.SystemRight==9" }
 ```
 
-- `>1` — visible với mọi user có quyền (không phải level thấp nhất)
-- `==9` — chỉ admin cao nhất mới thấy
+- `>1` — any user with rights (not the lowest level)
+- `==9` — top admin only
 
 ---
 
-## 6. IF/THEN/ELSE — Conditional Action
+## 6. IF/THEN/ELSE
 
-Rẽ nhánh logic trong action hoặc CALLBACK.
+Branching inside an action or CALLBACK.
 
 ```json
 {
@@ -198,10 +191,10 @@ Rẽ nhánh logic trong action hoặc CALLBACK.
 }
 ```
 
-- Condition: JavaScript expression dùng vueData fields trực tiếp (không cần `vueData.`)
-- Dùng nested IF/ELSE cho switch-case nhiều nhánh
+- Condition: JS expression using vueData fields directly (no `vueData.` prefix).
+- Nest IF/ELSE for multi-branch switch.
 
-**Ứng dụng thực tế:** Module có nhiều chế độ xem (`TypeLoad`) — sau khi update, refresh đúng danh sách đang hiển thị.
+Real use: module with several view modes (`TypeLoad`) — after an update, refresh the list currently shown.
 
 ```json
 "data": [
@@ -211,11 +204,11 @@ Rẽ nhánh logic trong action hoặc CALLBACK.
 
 ---
 
-## 7. CALLBACK Chaining
+## 7. CALLBACK chaining
 
-CALLBACK là array → thực thi tuần tự.
+Array CALLBACK → runs in order.
 
-> **Nhiều lệnh thì BẮT BUỘC là mảng, mỗi lệnh một `{}` riêng.** Gộp `CALL` + `MESS` + `EXE` vào chung một object thì chỉ **một** lệnh chạy (ưu tiên `API` → `CALL` → `EXE` → `FUN` → `IF` → `MESS` → `MESSBOX`, mỗi nhánh `return` ngay), phần còn lại rơi im lặng — không error, không `[Vue warn]`. Luật đầy đủ + lý do trong runtime: [controls-patterns.md](controls-patterns.md) §QUY TẮC NỀN.
+> **Several commands MUST be an array, one `{}` per command.** Merging `CALL` + `MESS` + `EXE` into one object runs only **one** (priority `API` → `CALL` → `EXE` → `FUN` → `IF` → `MESS` → `MESSBOX`, each branch `return`s immediately); the rest are dropped silently — no error, no `[Vue warn]`. Full rule + runtime reason: [controls-patterns.md](controls-patterns.md) §CORE RULE.
 
 ```json
 "CALLBACK": [
@@ -233,13 +226,13 @@ CALLBACK là array → thực thi tuần tự.
 ]
 ```
 
-**Thứ tự thông dụng:** reload data → reset state → hiển thị message.
+Usual order: reload data → reset state → show message.
 
 ---
 
-## 8. set — Cấu hình Module Level
+## 8. `set` — module-level config
 
-`set` ở root module.json — cấu hình behavior của toàn module.
+`set` at module.json root configures the whole module.
 
 ```json
 "set": {
@@ -247,17 +240,15 @@ CALLBACK là array → thực thi tuần tự.
 }
 ```
 
-- `menu: false` — ẩn menu navigation (dùng cho sub-window, log viewer)
+- `menu: false` — hide navigation menu (sub-windows, log viewers).
 
-> Module mở qua `openWindow`: khai báo `"set": { "menu": false }` trong module.json của module con —
-> **không** truyền `?menu=0` trong URL. Pattern đầy đủ (kể cả cách set động từ `data[]`):
-> [ui-crosswindow-patterns.md](ui-crosswindow-patterns.md).
+> Module opened via `openWindow`: declare `"set": { "menu": false }` in the child module's module.json — **don't** pass `?menu=0` in the URL. Full pattern (incl. setting it dynamically from `data[]`): [ui-crosswindow-patterns.md](ui-crosswindow-patterns.md).
 
 ---
 
-## 9. CALLBACK với JavaScript Expression
+## 9. CALLBACK with JS expression
 
-Dùng `{{ expression }}` trong CALLBACK để chạy code phức tạp sau API.
+`{{ expression }}` in CALLBACK runs complex code after the API.
 
 ```json
 "CALLBACK": "{{ _.forEach(dsUsers, (x)=> x.FunctionName = JSON.parse(x.FunctionName)) }}"
@@ -267,49 +258,46 @@ Dùng `{{ expression }}` trong CALLBACK để chạy code phức tạp sau API.
 "CALLBACK": "{{ _.forEach(dsUserFunction, (x)=> x.FunctionName = JSON.parse(x.FunctionName)), _.forEach(dsUserFunction, (x)=> x.UserSysItem = JSON.parse(x.UserSysItem)) }}"
 ```
 
-> Dùng khi API trả về JSON string cần parse thành object/array trước khi render.
+> Use when the API returns a JSON string that must be parsed to object/array before render.
 
 ---
 
-## 10. script.js — Helper Functions
+## 10. script.js — helpers
 
-`script.js` chứa helper functions gọi từ `v-on:click` hoặc action.
+`script.js` holds helpers called from `v-on:click` or actions. They access `vueData` directly; use for logic plain action JSON can't express.
 
 ```javascript
 // script.js
 function setFunction(user, fc) {
-    vueData.sFunctionSelected = [];
-    vueData.sUserSelected = [];
-    vueData.sUserSelected.push(user);
-    if (!fc) return;
-    vueData.dsFunctionRight.map((item) => {
-        if (fc.some(fci => fci.FunctionID == item.FunctionID)) {
-            vueData.sFunctionSelected.push(item.FunctionID.toString());
-        }
-    });
+  vueData.sFunctionSelected = [];
+  vueData.sUserSelected = [];
+  vueData.sUserSelected.push(user);
+  if (!fc) return;
+  vueData.dsFunctionRight.map((item) => {
+    if (fc.some((fci) => fci.FunctionID == item.FunctionID)) {
+      vueData.sFunctionSelected.push(item.FunctionID.toString());
+    }
+  });
 }
 ```
 
-Gọi từ `v-on:click` trong header:
+Called from `v-on:click` in a header:
+
 ```json
 "v-on:click": "vueData.dlFunction = true; CALL(setFunction(item, item.FunctionName));"
 ```
 
-> Functions trong `script.js` có thể access `vueData` trực tiếp. Dùng để xử lý logic phức tạp không thể làm bằng action JSON thuần.
-
 ---
 
-## Checklist Thiết Kế UI
+## UI design checklist
 
-> Checklist cấu trúc `module.json` (thứ tự `data[]`, grid wrapper, `w`, `v-on:`, `set`, JSON hợp lệ)
-> nằm ở [module-json-anatomy.md](module-json-anatomy.md#checklist-khi-viết-modulejson) — dưới đây chỉ
-> là phần riêng của thiết kế giao diện.
+> `module.json` structure checklist (`data[]` order, grid wrapper, `w`, `v-on:`, `set`, valid JSON) is in [module-json-anatomy.md](module-json-anatomy.md). Below is UI-specific only.
 
 1. **Toolbar row**: shrink filters + v-spacer + permission-gated buttons
-2. **f-table**: fixed-header, item-class cho row highlight, item-key đúng — xem [ui-table-cell-patterns.md](ui-table-cell-patterns.md)
-3. **Dialogs**: luôn trong hidden-container, v-card[padding:0] + v-toolbar[dense flat] — xem [ui-dialog-patterns.md](ui-dialog-patterns.md)
-4. **menuChucNang**: định nghĩa trong data[], ref bằng t-menu trong headers — xem [ui-table-cell-patterns.md](ui-table-cell-patterns.md)
-5. **ctrl-update**: cho CRUD đơn giản, dialog thủ công cho form phức tạp
+2. **f-table**: fixed-header, item-class for row highlight, correct item-key — [ui-table-cell-patterns.md](ui-table-cell-patterns.md)
+3. **Dialogs**: always in hidden-container, v-card[padding:0] + v-toolbar[dense flat] — [ui-dialog-patterns.md](ui-dialog-patterns.md)
+4. **menuChucNang**: define in data[], reference via t-menu in headers — [ui-table-cell-patterns.md](ui-table-cell-patterns.md)
+5. **ctrl-update**: simple CRUD; manual dialog for complex forms
 6. **CALLBACK**: chaining array — reload → reset state → MESS
-7. **#PARENT**: set ngay đầu data[] trước các CALL startup — xem [ui-crosswindow-patterns.md](ui-crosswindow-patterns.md)
-8. **Permission**: `v-if: "vueData.user.SystemRight>1"` cho admin-only sections
+7. **#PARENT**: set at the top of data[] before startup CALLs — [ui-crosswindow-patterns.md](ui-crosswindow-patterns.md)
+8. **Permission**: `v-if: "vueData.user.SystemRight>1"` for admin-only sections