@fui-org/fui-cli 1.3.2 → 2.1.0

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

@@ -1,26 +1,24 @@
 # FUI Cross-window Patterns — openWindow & data exchange
 
-> File này sở hữu: **`openWindow`, trao đổi dữ liệu giữa cửa sổ (`#PARENT`/`#Win`), `set.menu` cho module con, `onclose`**.
+> Owns: **`openWindow`, cross-window data exchange (`#PARENT`/`#Win`), `set.menu` for child modules, `onclose`**.
 
-Mở module như sub-window và trao đổi dữ liệu giữa các window/iframe (`#PARENT`, `#WinID`). Rút ra từ project **security-manager** và các ví dụ `ex-v3-*`.
-
-> Xem thêm: [ui-patterns.md](ui-patterns.md), [default-function.md](default-function.md) (`openWindow`, `windowSendMessage`).
+Open a module as a sub-window and exchange data between windows/iframes (`#PARENT`, `#WinID`). From project **security-manager** and `ex-v3-*` examples. See also [ui-patterns.md](ui-patterns.md), [default-function.md](default-function.md) (`openWindow`, `windowSendMessage`).
 
 ---
 
-## 1. Mở Sub-window (openWindow) — Đầy đủ
+## 1. openWindow
 
-Mở module khác như popup window riêng biệt. `id` là định danh để tham chiếu sau này.
+Opens another module as a separate popup window. `id` is the handle for later references.
 
 ```json
 {
   "FUN": "openWindow",
   "IN": {
-    "id":     "`Win1",
-    "title":  "`User Permission",
-    "url":    "`/UserPermission",
-    "data":   "danhSachChoTable",
-    "width":  "`800px",
+    "id": "`Win1",
+    "title": "`User Permission",
+    "url": "`/UserPermission",
+    "data": "danhSachChoTable",
+    "width": "`800px",
     "height": "`600px",
     "onclose": {
       "CALL": "reloadData"
@@ -29,18 +27,18 @@ Mở module khác như popup window riêng biệt. `id` là định danh để t
 }
 ```
 
-| Param | Bắt buộc | Mô tả |
-|---|---|---|
-| `id` | ✅ | Định danh window (backtick = literal) — dùng để ref qua `#Win1` |
-| `url` | ✅ | URL module — không truyền `?menu=0`; module con tự khai báo `"set": { "menu": false }` |
-| `title` | ❌ | Tiêu đề dialog |
-| `data` | ❌ | Truyền dữ liệu vào window con — window con đọc qua `#PARENT.data` |
-| `width` / `height` | ❌ | Kích thước window (`"800px"`, `"50%"`) |
-| `onclose` | ❌ | Action chạy sau khi sub-window đóng |
+| Param              | Required | Description                                                                 |
+| ------------------ | -------- | --------------------------------------------------------------------------- |
+| `id`               | ✅       | Window id (backtick = literal) — referenced as `#Win1`                      |
+| `url`              | ✅       | Module URL — no `?menu=0`; child declares `"set": { "menu": false }` itself |
+| `title`            | ❌       | Dialog title                                                                |
+| `data`             | ❌       | Data passed to the child — child reads `#PARENT.data`                       |
+| `width` / `height` | ❌       | Window size (`"800px"`, `"50%"`)                                            |
+| `onclose`          | ❌       | Action run after the sub-window closes                                      |
 
-> **Module con mở qua openWindow:** Không truyền `?menu=0` trong URL. Module con tự khai báo `"set": { "menu": false }` trong module.json để ẩn menu vĩnh viễn cho module đó — bất kể cách mở. URL chỉ truyền ID cần thiết để query DB.
+> **Child module:** never pass `?menu=0` in the URL. The child declares `"set": { "menu": false }` in its module.json to hide the menu permanently, regardless of how it's opened. URL carries only the IDs needed to query the DB.
 
-**`onclose` targeting window khác:**
+**`onclose` targeting another window:**
 
 ```json
 "onclose": {
@@ -48,15 +46,15 @@ Mở module khác như popup window riêng biệt. `id` là định danh để t
 }
 ```
 
-> Khi Win2 đóng → chạy `cmdThongBao` trong Win1 (không phải trong window hiện tại).
+> When Win2 closes → runs `cmdThongBao` in Win1 (not the current window).
 
 ---
 
-## 2. Cross-window Data Exchange — Đầy đủ
+## 2. Cross-window data exchange
 
-FUI dùng `#PARENT` và `#WinID` để trao đổi dữ liệu giữa các window (iframe). Hoạt động cả same-domain và cross-domain (qua `postMessage`).
+`#PARENT` and `#WinID` exchange data between windows (iframes). Works same-domain and cross-domain (via `postMessage`).
 
-### Đọc dữ liệu từ window khác (value position)
+### Read (value position)
 
 ```json
 "data": [
@@ -68,12 +66,12 @@ FUI dùng `#PARENT` và `#WinID` để trao đổi dữ liệu giữa các windo
 ]
 ```
 
-| Cú pháp | Ý nghĩa |
-|---|---|
-| `"#PARENT.field"` | Đọc `vueData.field` từ window cha |
-| `"#Win1.field"` | Đọc `vueData.field` từ iframe có id `Win1` |
+| Syntax            | Meaning                                    |
+| ----------------- | ------------------------------------------ |
+| `"#PARENT.field"` | Read `vueData.field` from parent           |
+| `"#Win1.field"`   | Read `vueData.field` from iframe id `Win1` |
 
-### Ghi dữ liệu vào window khác (key position)
+### Write (key position)
 
 ```json
 "data": [
@@ -90,12 +88,12 @@ FUI dùng `#PARENT` và `#WinID` để trao đổi dữ liệu giữa các windo
 }
 ```
 
-| Cú pháp | Ý nghĩa |
-|---|---|
-| `"#PARENT.field": value` | Ghi value vào `vueData.field` của parent |
-| `"#Win1.field": value` | Ghi value vào `vueData.field` của Win1 |
+| Syntax                   | Meaning                           |
+| ------------------------ | --------------------------------- |
+| `"#PARENT.field": value` | Write to parent's `vueData.field` |
+| `"#Win1.field": value`   | Write to Win1's `vueData.field`   |
 
-### Gọi action trong window khác
+### Call an action in another window
 
 ```json
 ":action": {
@@ -107,12 +105,12 @@ FUI dùng `#PARENT` và `#WinID` để trao đổi dữ liệu giữa các windo
 "#Win1": { "CALL": "cmdThongBao" }
 ```
 
-- `"#PARENT"` (không có field) với value là action → `runAction(value)` trong parent
-- `"#Win1"` với value là action → `runAction(value)` trong Win1
+- `"#PARENT"` (no field) with an action value → `runAction(value)` in parent
+- `"#Win1"` with an action value → `runAction(value)` in Win1
 
-### Nhận dữ liệu được truyền khi openWindow
+### Receive data passed by openWindow
 
-Khi window cha mở con với `"data": "sourceData"`:
+Parent opens child with `"data": "sourceData"`:
 
 ```json
 "data": [
@@ -122,11 +120,12 @@ Khi window cha mở con với `"data": "sourceData"`:
 ]
 ```
 
-> `#PARENT.Win1` đọc biến `Win1` từ parent. Khi cha gọi `openWindow` với `id: "Win1"`, FUI tự set `vueData.Win1 = data_đã_truyền` trong parent trước khi mở window.
+> `#PARENT.Win1` reads parent variable `Win1`. When the parent calls `openWindow` with `id: "Win1"`, FUI sets `vueData.Win1 = passed_data` in the parent before opening.
+
+### Full pattern — child receives parent data
 
-### Pattern đầy đủ — Sub-window nhận data từ parent
+**Parent (ex-v3-1SetData):**
 
-**Module cha (ex-v3-1SetData):**
 ```json
 ":action": {
   "FUN": "openWindow",
@@ -138,7 +137,8 @@ Khi window cha mở con với `"data": "sourceData"`:
 }
 ```
 
-**Module con (ex-v3-2CauTruc):**
+**Child (ex-v3-2CauTruc):**
+
 ```json
 "data": [
   {
@@ -153,17 +153,17 @@ Khi window cha mở con với `"data": "sourceData"`:
 ]
 ```
 
-> Đặt `#PARENT.*` TRƯỚC các CALL startup để data sẵn sàng trước khi API đầu tiên chạy.
+> Put `#PARENT.*` BEFORE startup CALLs so data is ready before the first API runs.
 
 ---
 
-## 3. Sub-window Checklist
+## 3. Sub-window checklist
 
-Module được mở qua `openWindow` cần:
+A module opened via `openWindow` needs:
 
-- `"set": { "menu": false }` — ẩn navigation header (khai báo trong module.json, không dùng `?menu=0` trong URL)
-- URL params tự động inject vào `vueData` trước khi `data[]` chạy — `{ "CALL": "apiLoad" }` ở cuối `data[]` là đủ
-- URL chỉ truyền **ID** của record cha mà module con thực sự dùng — không truyền name hay field có thể tra lại từ DB
+- `"set": { "menu": false }` — hides the navigation header (in module.json, not `?menu=0` in the URL)
+- URL params are injected into `vueData` before `data[]` runs — a trailing `{ "CALL": "apiLoad" }` is enough
+- URL passes only the parent record **ID** the child actually uses — no names or fields re-queryable from the DB
 
 ```json
 // module.json của module con
@@ -184,13 +184,13 @@ Module được mở qua `openWindow` cần:
 
 ---
 
-## 4. Ví dụ hoàn chỉnh cha ↔ con (chuẩn `ex-v3-1SetData` → `ex-v3-2CauTruc`)
+## 4. Complete parent ↔ child example (`ex-v3-1SetData` → `ex-v3-2CauTruc`)
 
-Đây là mẫu chuẩn: **cửa sổ cha mở con qua `openWindow`, truyền dữ liệu bảng, con đọc/ghi/gọi lệnh ngược lên cha.**
+Standard: **parent opens child via `openWindow` passing table data; child reads/writes/calls back up to parent.**
 
-### 4.1 Cửa sổ CHA — f-table + nút mở con, truyền `data`
+### 4.1 Parent — f-table + open button, pass `data`
 
-`data` trong `openWindow.IN` truyền thẳng object/array (ở đây là danh sách bảng `danhSachChoTable`) sang con; con đọc qua `#PARENT.<id>`.
+`openWindow.IN.data` passes an object/array (here table list `danhSachChoTable`) to the child; child reads `#PARENT.<id>`.
 
 ```json
 {
@@ -224,7 +224,7 @@ Module được mở qua `openWindow` cần:
 }
 ```
 
-Cha cũng có thể khai báo **action đặt tên** để con gọi ngược lên, và ghi thẳng vào con trong `data[]`:
+Parent can also declare **named actions** for the child to call, and write into the child from `data[]`:
 
 ```json
 "data": [
@@ -238,7 +238,7 @@ Cha cũng có thể khai báo **action đặt tên** để con gọi ngược l
 ]
 ```
 
-### 4.2 Cửa sổ CON — đọc data cha, ghi ngược, gọi lệnh cha, mở thêm con
+### 4.2 Child — read parent, write back, call parent, open another child
 
 ```json
 // data[] của con: đọc dữ liệu cha NGAY đầu tiên
@@ -271,35 +271,39 @@ Cha cũng có thể khai báo **action đặt tên** để con gọi ngược l
   } } } }
 ```
 
-**Tổng hợp cú pháp trao đổi (value = đọc, key = ghi):**
+**Syntax summary (value = read, key = write):**
 
-| Cú pháp | Ý nghĩa |
-|---|---|
-| `"x": "#PARENT.field"` | Đọc `field` của cha vào `x` |
-| `"x": "#Win1.field"` | Đọc `field` của cửa sổ id `Win1` |
-| `"#PARENT.field": "src"` | Ghi `src` vào `field` của cha |
-| `"#Win1.field": "src"` | Ghi vào cửa sổ `Win1` |
-| `"#PARENT": { "CALL": "cmd" }` | Gọi action `cmd` trong cha |
-| `"#Win1": { "CALL": "cmd" }` | Gọi action trong `Win1` |
-| `openWindow.IN.data` | Truyền object/array sang con; con đọc `#PARENT.<id>` |
-| `openWindow.IN.onclose` | Action chạy sau khi con đóng (có thể nhắm `#WinX`) |
+| Syntax                         | Meaning                                                |
+| ------------------------------ | ------------------------------------------------------ |
+| `"x": "#PARENT.field"`         | Read parent `field` into `x`                           |
+| `"x": "#Win1.field"`           | Read `field` of window `Win1`                          |
+| `"#PARENT.field": "src"`       | Write `src` to parent `field`                          |
+| `"#Win1.field": "src"`         | Write to window `Win1`                                 |
+| `"#PARENT": { "CALL": "cmd" }` | Call action `cmd` in parent                            |
+| `"#Win1": { "CALL": "cmd" }`   | Call action in `Win1`                                  |
+| `openWindow.IN.data`           | Pass object/array to child; child reads `#PARENT.<id>` |
+| `openWindow.IN.onclose`        | Action after child closes (may target `#WinX`)         |
 
-> Hoạt động cả **same-domain và cross-domain** (runtime tự dùng `postMessage` khi khác tên miền).
+> Works **same-domain and cross-domain** (runtime uses `postMessage` across domains).
 
 ---
 
-## 5. f-table / f-sheet + mở cửa sổ chi tiết
+## 5. f-table / f-sheet + detail window
 
-Pattern rất phổ biến: bảng danh sách → click một dòng → mở cửa sổ con để xem/sửa chi tiết dòng đó.
+Common: list table → click a row → open child window to view/edit that row.
 
-- Trong `headers` của `f-table`, dùng `t-button` hoặc `t-menu` với `:action` gọi `openWindow`; `item` là dòng hiện tại.
-- Truyền **chỉ ID** của dòng qua URL (con tự query DB), hoặc truyền cả object dòng qua `openWindow.IN.data`.
+- In `f-table` `headers`, use `t-button` or `t-menu` with `:action` calling `openWindow`; `item` is the current row.
+- Pass **only the row ID** via URL (child queries DB), or the whole row object via `openWindow.IN.data`.
 
 ```json
 {
-  "el": "t-button", "text": "Chi tiết", "value": "ID", "align": "center",
+  "el": "t-button",
+  "text": "Chi tiết",
+  "value": "ID",
+  "align": "center",
   "attr": {
-    "icon-text": "mdi-eye", "color": "primary",
+    "icon-text": "mdi-eye",
+    "color": "primary",
     ":action": {
       "FUN": "openWindow",
       "IN": {
@@ -313,5 +317,5 @@ Pattern rất phổ biến: bảng danh sách → click một dòng → mở c
 }
 ```
 
-- **`f-sheet`** (bảng tính nhập lưới) kết hợp tương tự: nút/menu trong sheet gọi `openWindow`, hoặc lưu cả `vueData` của sheet rồi mở con để nhập bổ sung; con ghi ngược qua `#PARENT.<field>` khi đóng.
-- Reload sau khi con đóng: đặt `onclose: { "CALL": "reloadList" }` (chạy trong cửa sổ mở nó) — xem §1.
+- **`f-sheet`** (grid-entry spreadsheet) works the same: a button/menu in the sheet calls `openWindow`, or save the sheet's `vueData` then open a child for extra input; the child writes back via `#PARENT.<field>` on close.
+- Reload after child closes: `onclose: { "CALL": "reloadList" }` (runs in the opener window) — see §1.

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

@@ -1,68 +1,76 @@
-# FUI Dialog Patterns — v-dialog thủ công (CHUẨN), hidden-container, checkbox-list
+# FUI Dialog Patterns — manual v-dialog (STANDARD), hidden-container, checkbox-list
 
-> File này sở hữu: **dialog thủ công: `hidden-container`, anatomy `v-card`/`v-toolbar`, mở dialog kèm row, checkbox-list**. `f-dialog` xem [components-dialog.md](components-dialog.md).
+> Owns: **manual dialogs: `hidden-container`, `v-card`/`v-toolbar` anatomy, opening a dialog with a row, checkbox-list**. `f-dialog`: [components-dialog.md](components-dialog.md).
 
-Các pattern dialog/form popup trong FUI. Rút ra từ **security-manager** và demo **ex-v3-dialog**.
+From **security-manager** and demo **ex-v3-dialog**.
 
-> **CHUẨN thiết kế dialog: dựng `v-dialog` thủ công theo anatomy trong mục 1** (dễ đọc/chỉnh sửa từng phần), với **diện mạo mô phỏng `f-dialog`**: toolbar `dense flat` không màu + close icon, form floating label, hàng cuối là `v-card-actions`. Hàng action căn phải, button giữ chiều ngang tự nhiên; chỉ action chính mới được tô màu nền, action phụ dùng nút text. Anatomy đầy đủ + bảng quy tắc: xem `design_read("fui")` §4–5. `f-dialog` (mục 0) là lựa chọn phụ cho form rất nhỏ.
+> **Dialog STANDARD: build `v-dialog` manually per the §1 anatomy** (easy to read/edit piecewise), **styled like `f-dialog`**: uncolored `dense flat` toolbar + close icon, floating-label form, last row is `v-card-actions`. Actions right-aligned, buttons keep natural width; only the primary action gets a filled color, secondary actions are text buttons. Full anatomy + rule table: `fui design read fui` §4–5. `f-dialog` (§0) is the secondary option for very small forms.
 
-> Xem thêm: [ui-patterns.md](ui-patterns.md), [ui-table-cell-patterns.md](ui-table-cell-patterns.md) (menuChucNang mở dialog), [components-dialog.md](components-dialog.md).
+> See also: [ui-patterns.md](ui-patterns.md), [ui-table-cell-patterns.md](ui-table-cell-patterns.md) (menuChucNang opening a dialog), [components-dialog.md](components-dialog.md).
 
 ---
 
-## 0. `f-dialog` — component dialog gọn (lựa chọn phụ)
+## 0. `f-dialog` — compact dialog component (secondary)
 
-`f-dialog` gói sẵn card + toolbar + nút — ngắn hơn so với dựng `v-dialog` thủ công, nhưng khó tùy biến layout. Chỉ dùng cho form rất nhỏ/đơn giản; mặc định vẫn là `v-dialog` thủ công (mục 1). Các field bên trong dùng `v-model` **trỏ thẳng tới key của object `data`** (không cần `vueData.dialogData.X`).
+`f-dialog` bundles card + toolbar + buttons — shorter than manual `v-dialog` but hard to customise layout. Use only for very small/simple forms; default is manual `v-dialog` (§1). Inner fields' `v-model` **points directly at keys of the `data` object** (no `vueData.dialogData.X`).
 
 ```json
 {
   "el": "f-dialog",
   "attr": {
-    "v-model": "dialogOpen",            // boolean mở/đóng
-    "v-model:data": "dialogData",       // object dữ liệu của form
+    "v-model": "dialogOpen", // boolean mở/đóng
+    "v-model:data": "dialogData", // object dữ liệu của form
     "title": "Nhập dữ liệu",
     ":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": "Domain", "label": "Domain" }, "w": 4 },
       { "el": "v-text-field", "attr": { "v-model": "ModuleID", "label": "ModuleID" }, "w": 3 },
-      { "el": "v-checkbox",   "attr": { "v-model": "checkBoxValue",
-          ":label": "`Tôi đồng ý: ${checkBoxValue}`" } },
-      { "el": "v-select", "attr": { "label": "Chọn", "v-model": "bienselect",
-          ":items": "vueData.Mang", "item-title": "AppName", "item-value": "AppListID" } }
+      { "el": "v-checkbox", "attr": { "v-model": "checkBoxValue", ":label": "`Tôi đồng ý: ${checkBoxValue}`" } },
+      {
+        "el": "v-select",
+        "attr": {
+          "label": "Chọn",
+          "v-model": "bienselect",
+          ":items": "vueData.Mang",
+          "item-title": "AppName",
+          "item-value": "AppListID"
+        }
+      }
     ],
     ":watch": {
       "bienselect": { "MESSBOX": "Watch {{bienselect}}" }
     },
     ":button": [
-      { "label": "Lưu", "type": "submit", ":disabled": "!checkBoxValue",
-        "action": [ { "MESSBOX": "Đã lưu" }, { "dialogOpen": false } ] },
-      { "label": "Chạy API", "checkvalid": true, "v-if": "ModuleID==1",
-        "action": [ { "API": "/chaymotapi" } ] },
-      { "label": "Đóng", "action": [ { "dialogOpen": false } ] }
+      {
+        "label": "Lưu",
+        "type": "submit",
+        ":disabled": "!checkBoxValue",
+        "action": [{ "MESSBOX": "Đã lưu" }, { "dialogOpen": false }]
+      },
+      { "label": "Chạy API", "checkvalid": true, "v-if": "ModuleID==1", "action": [{ "API": "/chaymotapi" }] },
+      { "label": "Đóng", "action": [{ "dialogOpen": false }] }
     ]
   }
 }
 ```
 
-| Prop | Vai trò |
-|---|---|
-| `v-model` | Biến boolean mở/đóng dialog |
-| `v-model:data` | Object chứa dữ liệu form; field trong `:controls` bind trực tiếp tới key của nó |
-| `title` | Tiêu đề dialog |
-| `:open-action` | Action chạy khi dialog mở |
-| `:controls` | Mảng Control Object = các field của form |
-| `:watch` | Watcher phạm vi trong dialog (theo tên field) |
-| `:button` | Mảng nút: `label`, `type:"submit"`, `checkvalid`, `:disabled`, `v-if`, `action` |
+| Prop           | Role                                                                           |
+| -------------- | ------------------------------------------------------------------------------ |
+| `v-model`      | Boolean open/close                                                             |
+| `v-model:data` | Form data object; `:controls` fields bind directly to its keys                 |
+| `title`        | Dialog title                                                                   |
+| `:open-action` | Action run on open                                                             |
+| `:controls`    | Control Object array = form fields                                             |
+| `:watch`       | Dialog-scoped watchers (by field name)                                         |
+| `:button`      | Buttons: `label`, `type:"submit"`, `checkvalid`, `:disabled`, `v-if`, `action` |
 
-**Khi nào dùng gì:** mặc định mọi dialog → **`v-dialog` thủ công theo mục 1** (chuẩn project). `f-dialog` chỉ khi form rất nhỏ (1–3 field, không layout đặc biệt) và user không yêu cầu tùy biến.
+**Which to use:** every dialog by default → **manual `v-dialog` per §1** (project standard). `f-dialog` only for very small forms (1–3 fields, no special layout) with no customisation requested.
 
 ---
 
-## 1. Dialog Pattern — v-dialog thủ công trong hidden-container (CHUẨN)
-
-Dialogs luôn đặt trong container riêng với `prop: "hidden-container"` — không nằm trong rows chính.
+## 1. Manual v-dialog in hidden-container (STANDARD)
 
-**Cấu trúc chuẩn:**
+Dialogs always live in their own container with `prop: "hidden-container"` — never inside the main rows.
 
 ```json
 {
@@ -99,31 +107,46 @@ Dialogs luôn đặt trong container riêng với `prop: "hidden-container"` —
                   "el": "v-container",
                   "attr": { "class": "grid-list-md px-4" },
                   "innerHTML": [
-                    { "el": "v-layout", "w": 12, "attr": { "row": "", "wrap": "" }, "innerHTML": [
-                        { "el": "v-text-field", "col": {}, "attr": { "v-model": "vueData.sUserName", "label": "Tên đăng nhập" }, "w": 6 },
-                        { "el": "v-text-field", "col": {}, "attr": { "v-model": "vueData.sLastName", "label": "Họ tên" }, "w": 6 }
-                    ]}
+                    {
+                      "el": "v-layout",
+                      "w": 12,
+                      "attr": { "row": "", "wrap": "" },
+                      "innerHTML": [
+                        {
+                          "el": "v-text-field",
+                          "col": {},
+                          "attr": { "v-model": "vueData.sUserName", "label": "Tên đăng nhập" },
+                          "w": 6
+                        },
+                        {
+                          "el": "v-text-field",
+                          "col": {},
+                          "attr": { "v-model": "vueData.sLastName", "label": "Họ tên" },
+                          "w": 6
+                        }
+                      ]
+                    }
                   ]
                 },
                 {
                   "el": "v-card-actions",
-                  "attr": { "class": "mr-1 mb-1" },
-                  "innerHTML": [
-                    { "el": "v-spacer", "attr": {} },
-                    {
-                      "el": "f-button",
-                      "attr": {
-                        "text": "",
-                        "label": "Đặt lại",
-                        ":action": { "CALL": "resetForm" }
-                      }
-                    },
-                    {
-                      "el": "f-button",
-                      "attr": {
-                        "color": "primary",
-                        ":checkvalid": true,
-                        "label": "Lưu",
+                  "attr": { "class": "mr-1 mb-1" },
+                  "innerHTML": [
+                    { "el": "v-spacer", "attr": {} },
+                    {
+                      "el": "f-button",
+                      "attr": {
+                        "text": "",
+                        "label": "Đặt lại",
+                        ":action": { "CALL": "resetForm" }
+                      }
+                    },
+                    {
+                      "el": "f-button",
+                      "attr": {
+                        "color": "primary",
+                        ":checkvalid": true,
+                        "label": "Lưu",
                         "icon-text": "mdi-content-save",
                         ":action": {
                           "API": "SM_Users_Update",
@@ -148,24 +171,26 @@ Dialogs luôn đặt trong container riêng với `prop: "hidden-container"` —
 }
 ```
 
-**Quy tắc dialog (phong cách f-dialog):**
-- `v-card[class="pa-0"]` — triệt đệm để toolbar tràn sát mép (ưu tiên class Vuetify, không inline style); không elevation/outlined
-- `v-toolbar[dense flat]` — thanh tiêu đề mỏng, **không** color/dark
-- Nút đóng: `v-btn[icon]` mdi-close + `v-on:click: "vueData.dlXxx = false"` — không thêm nút "Đóng" ở actions
-- Thân form: `v-container.grid-list-md.px-4` > `v-layout[row wrap]` > field **floating label** (`label` trong attr, w:12 dài / 6+6 ngắn) — KHÔNG dùng label div rời
-- Hàng cuối chứa nút phải là `v-card-actions[class="mr-1 mb-1"]`, không đặt nhóm action trong một `v-layout`, `v-container` hay row form thông thường
-- `v-spacer` đứng trước nhóm nút → toàn bộ action căn phải
-- Button giữ chiều ngang tự nhiên theo nội dung: không đặt `w`, `width`, `block`, `flex-grow` hoặc bọc mỗi nút trong cột giãn
-- Tối đa một action quan trọng nhất (ví dụ **Lưu**) được dùng nền `color="primary"`; action phụ/ít quan trọng dùng `f-button` + `"text": ""`, không tô nền. Giữ số nút ít, nhãn ngắn và trình bày nhã nhặn
-- CALLBACK của Save: MESS → đóng dialog → reload data
+**Rules (f-dialog look):**
+
+- `v-card[class="pa-0"]` — removes padding so the toolbar touches the edges (Vuetify class, not inline style); no elevation/outlined.
+- `v-toolbar[dense flat]` — thin title bar, **no** color/dark.
+- Close: `v-btn[icon]` mdi-close + `v-on:click: "vueData.dlXxx = false"` — no extra "Đóng" button in actions.
+- Form body: `v-container.grid-list-md.px-4` > `v-layout[row wrap]` > **floating-label** fields (`label` in attr; w:12 long / 6+6 short) — NO separate label divs.
+- Last button row MUST be `v-card-actions[class="mr-1 mb-1"]` — not a `v-layout`, `v-container` or normal form row.
+- `v-spacer` before the buttons → all actions right-aligned.
+- Buttons keep natural content width: no `w`, `width`, `block`, `flex-grow`, and don't wrap each in a growing column.
+- At most one primary action (e.g. **Lưu**) gets filled `color="primary"`; secondary actions use `f-button` + `"text": ""`, unfilled. Few buttons, short labels, restrained.
+- Save CALLBACK: MESS → close dialog → reload data.
 
 ---
 
-## 2. Mở Dialog với Dữ Liệu Row
+## 2. Open dialog with row data
+
+Two steps: copy data into state → set `dlXxx = true`.
 
-Pattern 2 bước: copy dữ liệu vào state → set `dlXxx = true`.
+**From menuChucNang:**
 
-**Từ menuChucNang:**
 ```json
 "action": [
   {
@@ -179,7 +204,8 @@ Pattern 2 bước: copy dữ liệu vào state → set `dlXxx = true`.
 ]
 ```
 
-**Từ f-button:**
+**From f-button:**
+
 ```json
 ":action": [
   { "addNew": 1, "sUserID": "", "sUserName": "" },
@@ -187,13 +213,13 @@ Pattern 2 bước: copy dữ liệu vào state → set `dlXxx = true`.
 ]
 ```
 
-> `addNew: 0` = edit mode, `addNew: 1` = new mode. Trong dialog, dùng `:disabled="addNew==0"` để khóa field ID khi edit.
+> `addNew: 0` = edit, `addNew: 1` = new. In the dialog use `:disabled="addNew==0"` to lock the ID field on edit.
 
 ---
 
-## 3. Checkbox List Dialog Pattern
+## 3. Checkbox-list dialog
 
-Dialog chứa danh sách checkbox để chọn nhiều items, lưu ngay khi click.
+Dialog with a checkbox list for multi-select, saving on each click.
 
 ```json
 {
@@ -226,4 +252,4 @@ Dialog chứa danh sách checkbox để chọn nhiều items, lưu ngay khi clic
 }
 ```
 
-> `v-on:click` trên checkbox → save ngay không cần nút Save. `v-model` nhận array, `:value` dùng backtick literal.
+> `v-on:click` on the checkbox → saves immediately, no Save button. `v-model` holds an array; `:value` uses a backtick literal.