@fui-org/fui-cli 1.3.2 → 2.0.0

package/skills/fui-skill-cli/references/fsheet.md

@@ -1,203 +0,0 @@
-# f-sheet — Data-Entry Grid (AG Grid)
-
-> Owns: **`f-sheet` (AG Grid): import, props, columns, built-in cell renderers, range select/fill/clipboard, API wiring**.
-
-Excel-style entry grid, **entirely AG Grid Community** — customize with AG Grid knowledge (https://www.ag-grid.com/, Community). FUI adds: toolbar (add/delete/save/export Excel), change tracking, range select + fill handle + TSV copy/paste, API wiring.
-
-> **vs `f-table`** (rows edited via dialog form): `f-sheet` edits **in cells**, for bulk entry (paste rows, fast multi-cell edits). Never hand-write an entry grid as `uc-*.vue`.
-
-> Source: `scripts/fsheet.js`, **one file for V2 and V3** (`beforeDestroy` + `beforeUnmount`). Template uses **Vuetify 3** props/classes (`variant="text"`, `density="comfortable"`, `text-primary`, `text-subtitle-1`, `text-caption`); on V2 the toolbar works but styling may be off. Uses `ajaxCALL`/`confirm`/`jsonToExcel` ([component-design.md](component-design.md) §12).
-
----
-
-## Required import
-
-Exactly 2 files, **in this order**, via `fui import new` (missing → unusable):
-
-```
-/include/ag-grid/ag-grid-community.min.js
-/include/ag-grid/fsheet.js
-```
-
-`fui import list` (projectId + moduleId) → `fui import new` missing ones; removing f-sheet and nothing else uses them → `fui import delete`. See [component-quickref.md](component-quickref.md).
-
----
-
-## Props
-
-| Prop (kebab-case in `attr`) | Type   | Meaning                                                                                                                              |
-| --------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------ |
-| `label`                     | string | Title, shown on toolbar                                                                                                              |
-| `:columns`                  | array  | **AG Grid colDefs**. Empty → inferred from `items[0]` (`{ field, headerName: field }`)                                               |
-| `:items`                    | array  | rowData                                                                                                                              |
-| `row-key`                   | string | PK field (default `id`) — tracks changed/new/deleted rows                                                                            |
-| `:height`                   | number | empty = auto-grow; `<=0` = fill to screen bottom leaving `abs(height)` px; `>0` = fixed px                                           |
-| `:allow-add`                | bool   | Add row button                                                                                                                       |
-| `:allow-delete`             | bool   | Checkbox column + Delete button                                                                                                      |
-| `readonly`                  | bool   | Lock all editing (also fill handle)                                                                                                  |
-| `update-api`                | string | tAPI endpoint **saving each changed row** (`ajaxCALL`, auto-prepends `apiDomain`). Missing → Save `disabled`                         |
-| `delete-api`                | string | tAPI endpoint deleting one row                                                                                                       |
-| `:save-extra`               | object | Extra params **merged into every save/delete payload** (e.g. `{ LopID: vueData.lopID }`); via `mapData`, dynamic `vueData.x` allowed |
-| `:default-item`             | object | New-row template on Add; via `mapData`, dynamic `vueData.x` allowed (not only literals)                                              |
-
----
-
-## Columns = AG Grid colDef
-
-| Key                                 | Meaning                                                                                         |
-| ----------------------------------- | ----------------------------------------------------------------------------------------------- |
-| `field` / `headerName`              | data field / label                                                                              |
-| `editable`                          | **on by default** (`defaultColDef.editable: !readonly`); read-only column → `"editable": false` |
-| `width` / `minWidth` / `flex`       | default `flex:1`, `minWidth:80`                                                                 |
-| `pinned`                            | `'left'`/`'right'`                                                                              |
-| `sortable` / `filter` / `resizable` | all on by default                                                                               |
-| `valueFormatter` / `valueGetter`    | AG Grid functions                                                                               |
-| `cellEditor`                        | AG Grid built-in name (e.g. `agDateStringCellEditor`) or own global function name               |
-| `cellRenderer`                      | one of 4 f-sheet built-ins (below) or own global function name                                  |
-| `type`                              | **registered columnType name — only `"number"` / `"date"`**, not a free data type               |
-
-Other features (cellClassRules, aggregation...) → AG Grid docs; colDef passes straight through.
-
-### columnType: only `number` and `date`
-
-`type` references `gridOptions.columnTypes`; only two registered (`FS_COLUMN_TYPES`, top of `scripts/fsheet.js`). Unregistered name (`"date_time"`, `"currency"`, `"text"`, `"string"`, `"boolean"`…):
-
-- AG Grid **ignores it** (logs only `warning #36 colDef.type 'x' does not correspond to defined gridOptions.columnTypes`) → raw text, **no** format/parse/filter.
-- f-sheet adds a `console.error` naming column + valid names (scans group `children` too) — **visible in `fui module simulate --render`**; AG Grid's warning isn't.
-
-Other types (currency, percent, datetime…) → declare `valueFormatter`/`valueParser`/`filter` on the colDef, never a new `type`.
-
-### Built-in cell renderers
-
-Use `"cellRenderer": "name"` + `cellRendererParams`; nothing to declare in `script.js`:
-
-| Renderer               | Purpose                                  | `cellRendererParams`                                                                                                                                                                                       |
-| ---------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `fsHtmlCellRenderer`   | raw HTML `value` (like f-table `t-html`) | _(none)_                                                                                                                                                                                                   |
-| `fsLinkCellRenderer`   | link                                     | `urlField`/`textField` (row field for URL/label, default `value`), `icon` (mdi, optional), `target`: `'dialog'` → `openWindow({id: wid, title, url, onclose})`, else `<a>` target (default `_blank`)       |
-| `fsButtonCellRenderer` | small button                             | `label`, `icon` (mdi, optional), `color` (default `#1976d2`); click: `url` → `openWindow({id: wid, title, url, onclose})`, no `url` → `tableActionEvent({action, item: data})`                             |
-| `fsMenuCellRenderer`   | `⋮` per-row dropdown                     | `items`: array `{icon, text, color, action}` or `function(params)` returning it (per-row); `icon` for trigger (default `mdi-dots-vertical`). Click → `tableActionEvent({action: item.action, item: data})` |
-
-`openWindow`/`tableActionEvent` are FUI globals (as in f-table `t-link`/`t-button`/`t-menu`). **Own global functions** also work for `cellRenderer`/`cellEditor`/`cellEditorParams`/`cellRendererParams`: define in `script.js`, reference by string name; auto-registered (incl. group `children`).
-
-### `"type": "number"` — auto-attached (only if colDef doesn't declare it)
-
-| Key              | Behavior                                                                                                             |
-| ---------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `cellStyle`      | right-aligned                                                                                                        |
-| `valueFormatter` | `toLocaleString('en-US', { maximumFractionDigits: 10 })` → `1,234,567.89`; **display only**, editor shows raw number |
-| `valueParser`    | empty/`null`/`undefined` → real `null` (not `""`); numeric string → `Number`; invalid → `null`. Also on Excel paste  |
-| `filter`         | `agNumberColumnFilter`                                                                                               |
-
-### `"type": "date"` — auto-attached (only if colDef doesn't declare it)
-
-| Key              | Behavior                                                                                                                                       |
-| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| `cellStyle`      | centered                                                                                                                                       |
-| `valueFormatter` | `dd/mm/yyyy`; non-date → **raw string** shown (junk stays visible)                                                                             |
-| `valueParser`    | accepts `dd/mm/yyyy`, `dd-mm-yyyy`, `yyyy-mm-dd`, ISO `2026-08-15T00:00:00` → stores `yyyy-mm-dd`; empty/invalid → `null`. Also on Excel paste |
-| `filter`         | `agDateColumnFilter`                                                                                                                           |
-
-**Value contract (what the SP gets):** **`yyyy-mm-dd`** or `null` — matches `f-date` and tAPI `OPENJSON ... NgayX date '$.NgayX'`. Invalid (`31/02/2026`, `15/13/2026`) → `null`, no rollover. **Copy/Excel export use the raw value** (`2026-08-15`) — intentional, lossless round-trip.
-
-#### Date picker
-
-`type: "date"` adds **no editor** (text typing). For a picker:
-
-```json
-{ "field": "NgayThi", "headerName": "Ngày thi", "type": "date", "cellEditor": "agDateStringCellEditor" }
-```
-
-AG Grid built-in. Reads the **raw value**: ISO datetime (`2026-08-15T00:00:00`) opens **empty** until edited once → SP returns `CONVERT(date, NgayThi)`. Not attached by default because Enter would write `null` over the date.
-
-> **`fsheetDate` was removed.** Old `"cellEditor": "fsheetDate"` → `"type": "date"` (+ `agDateStringCellEditor`). String `cellEditor`/`cellRenderer` resolves only if `window[name]` is a function; unknown names **silently** fall back to the text editor.
-
-### `:height`
-
-| Value     | Behavior                                                      |
-| --------- | ------------------------------------------------------------- |
-| _(empty)_ | **auto-grow** — `domLayout: 'autoHeight'`, no inner scrollbar |
-| `<= 0`    | **fill to screen bottom, leaving `abs(height)` px**           |
-| `> 0`     | fixed px (e.g. `":height": 300`)                              |
-
-`<=0` = `window.innerHeight - getBoundingClientRect().top - abs(height)` (min 200px), measured after layout, updated on `window.resize` — only the bottom gap matters.
-
-- Main table: `":height": -16` (scrolls inside grid; lint D9 warns if `:height` missing).
-- Dialog: **positive** px.
-- Short/lookup tables: omit (auto-grow, exempt from D9). ⚠ Auto-grow renders every row, no virtualization — hundreds of rows → set `:height`.
-- ⚠ Negative ≠ "viewport minus N": old `-220` → `-16`, else ~200px short.
-
----
-
-## API wiring — response contract
-
-Called as `ajaxCALL(api, { ...saveExtra, ...row })`. **SP returns one row:**
-
-```
-SELECT Success = 1, Message = N'Đã lưu'      -- hoặc Success = 0 khi lỗi nghiệp vụ
-```
-
-Reads `res.data[0]`: `Message` → snackbar, `Success` → marks success. See [tapi-reference.md](tapi-reference.md).
-
-- **New rows**: temp **negative** key (−1, −2…), **light green**; on save key → `0` in payload → SP INSERTs.
-- **Edited cells**: **light yellow**; toolbar shows "N rows changed".
-- Save runs **per row, in parallel**; all OK → baseline refreshed, marks cleared, `saved` emitted.
-- Delete existing rows: with `delete-api` → `confirm`, then API per row; without → local, no prompt. New rows → always local, no prompt, no API.
-
----
-
-## Built-in (don't code)
-
-- Inline edit + change tracking.
-- Range select: drag or Shift+click.
-- Fill handle: drag bottom-right square to repeat the source block (along the longer drag direction).
-- TSV Copy/Cut/Paste (Excel/Google Sheets): Ctrl+C/X/V in grid, or right-click (Cut/Copy/Copy with Headers/Paste).
-- Escape clears selection.
-- Toolbar: **Export Excel** (always, `jsonToExcel`) · **Add** (`allow-add`) · **Save** (when changes; `disabled` without `update-api`) · **Discard changes** (when changes) · **Delete selected** (`allow-delete`, multi-select, only with selection).
-
-## Events & methods (`$refs`)
-
-- Emit: `change(data, field, value)` (each cell change) · `save(rows)` (Save clicked, before API) · `saved` (all saved).
-- Methods: `getChangedRows()` · `addRow()` · `deleteRow(row)` · `deleteSelected()` · `discardAll()` · `exportExcel()`.
-
----
-
-## module.json example
-
-```json
-{
-  "el": "f-sheet",
-  "w": 12,
-  "attr": {
-    "label": "Bảng điểm",
-    ":items": "dsDiem",
-    "row-key": "DiemID",
-    ":columns": [
-      { "field": "MaSV", "headerName": "Mã SV", "editable": false, "width": 120, "pinned": "left" },
-      { "field": "HoTen", "headerName": "Họ tên", "editable": false },
-      { "field": "Diem", "headerName": "Điểm", "type": "number" },
-      { "field": "NgayThi", "headerName": "Ngày thi", "type": "date" },
-      { "field": "GhiChu", "headerName": "Ghi chú" }
-    ],
-    ":allow-add": true,
-    ":allow-delete": true,
-    "update-api": "Diem_Save",
-    "delete-api": "Diem_Delete",
-    ":save-extra": { "LopID": "vueData.lopID" },
-    ":default-item": { "Diem": 0 },
-    ":height": -16
-  }
-}
-```
-
-- `dsDiem` loaded first by a `data[]` action (`API`/`OUT`).
-- `Diem_Save`/`Diem_Delete`: tAPI SPs returning `{ Success, Message }` per row.
-- Detail window from toolbar/column button/menu → `openWindow`: [ui-crosswindow-patterns.md](ui-crosswindow-patterns.md) §5.
-
-## Checklist
-
-1. Both **AG Grid files** imported via `fui import new`, in order (`ag-grid-community.min.js` then `fsheet.js`).
-2. `row-key` = real PK; `update-api`/`delete-api` SPs return `{ Success, Message }`.
-3. AG Grid colDef; link/button/menu → 4 built-in renderers; `type: "number"`/`"date"` only (no manual `cellStyle`/`valueFormatter`/`valueParser`); other types → `valueFormatter`/`valueParser`.
-4. `:height`: main `-16`, dialog positive, empty only for short tables.
-5. Don't rebuild grid/CSS — config via `columns`; range select/fill/copy-paste are built in.

package/skills/fui-skill-cli/references/fullstack-workflow.md

@@ -1,313 +0,0 @@
-# Full-Stack Module Workflow
-
-> Owns: **the 6-step UI-first fullstack module workflow (analyze → UI with hard-coded data → lock contract → SP → API wiring → static verification)** and **the Design Review Gate procedure** (SKILL.md §3 holds only the rule "must pass the gate"; the steps live here). tAPI conventions: [tapi-reference.md](tapi-reference.md); multi-module design: [system-design.md](system-design.md).
-
-**UI-first:** build UI (FUI) with hard-coded data, confirm visuals with `fui module simulate --render`, THEN lock the API (tAPI) contract and write SPs. Fixing data shape while it is a literal in `data[]` is far cheaper than after `IN`/`OUT`/`watch` depend on it. No step calls a real API/SP to "test" — verification = read + reason + mock ([verification.md](verification.md)). Read [tapi-reference.md](tapi-reference.md) before step 3.
-
----
-
-## Step 1 — Analyze requirements
-
-**1.1 Business need:** list / search / filter? add / edit / delete? report / statistics? workflow (approve, reject, status)?
-
-**1.2 Data (initial estimate — locked in step 3):** main entity and linked entities; which fields are displayed, which are input.
-
-**1.3 Permissions and auth:**
-
-- Login required? (no → use `AUTH_` in the SP)
-- Rights by `sys_SystemRight`? → handle in the SP body
-
-**Output:** feature list + main entity names (types/column names not yet locked).
-
----
-
-## Step 1b — Design Review Gate (mandatory, before the first line of code)
-
-SKILL.md §3 = the **rule** (every new system/page/function passes); this = the **procedure**, for fullstack and UI-only modules.
-
-1. **Business efficiency** — steps to finish the task, data truly needed, redundant steps.
-2. **Project patterns** — `fui module list` + `fui module get` on similar modules (layout, control naming, action placement, filter/table/dialog). Match existing pages; **never invent a new style when a convention exists**.
-3. **Sketch the UI** in words/rough layout — controls, placement, dialog/form flow.
-4. **Self-review** — friendly? step count? Add/Edit/Delete, filters, pagination where expected? consistent? Issues → **fix the sketch first**, never in code.
-5. Only then write code (step 2+).
-
-**Choose the build approach:**
-
-| Approach                           | When                                                                                                                                                         |
-| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **A — plain module.json**          | Simple page: data display, single-table CRUD, basic form. Fewer files, easy to maintain.                                                                     |
-| **B — Vue component (`uc-*.vue`)** | Complex UI: multi-area dashboard, custom layout, UI logic reused in many places, or `controls` over ~200 lines ([component-design.md](component-design.md)). |
-
-> Unspecified → **propose** one with a short reason and **wait for confirmation**; never choose silently.
-
-**Component priority**: `f-*` first (`f-button` over `v-btn`, `f-table` over `v-data-table` for EVERY table, `f-echart` for every chart); `v-*` only when no FUI equivalent exists. → [component-quickref.md](component-quickref.md)
-
-**Design System gate** (parallel): decide App-mode vs Web-mode and check `{projectId}/DESIGN.md` **before** sketching — separate aesthetic rules; never mix. → [design-modes.md](design-modes.md)
-
-**Output:** self-reviewed sketch, approach A/B locked (user-confirmed if we proposed it), aesthetic mode decided.
-
----
-
-## Step 2 — Build UI with hard-coded data
-
-Whole UI on **literal** data in `data[]`, no API yet. Structure: [module-json-anatomy.md](module-json-anatomy.md), [controls-patterns.md](controls-patterns.md).
-
-```json
-"data": [
-  { "keyword": "" },
-  { "classId": "" },
-  { "studentList": [
-      { "StudentID": "SV001", "FullName": "Nguyễn Văn A", "ClassID": "C01", "ClassName": "Lớp 10A", "GPA": 8.5 },
-      { "StudentID": "SV002", "FullName": "Trần Thị B", "ClassID": "C02", "ClassName": "Lớp 10B", "GPA": 7.2 }
-  ] },
-  { "form": {} },
-  { "dialogOpen": false }
-]
-```
-
-`f-table`/`v-dialog`/form patterns: [component-table.md](component-table.md), [ui-templates.md](ui-templates.md).
-
-**Visual QA now:** `fui module simulate --render` (vueData override: `fui module simulate --help`). Read screenshot + DOM audit; fix display bugs (horizontal overflow, broken dialog, missing labels...) before moving on.
-
-**Output:** `module.json` with complete layout, running on hard-coded data, clean `--render` QA.
-
----
-
-## Step 3 — Lock data shape + design API endpoints
-
-From the step-2 fields (visually confirmed before becoming an SP contract), lock exact field names + types (→ SQL column types) and the source entity/table of each. Map features to SPs as `spAPI_{Entity}{Action}`; full naming (`spAPI_*` / `spAPI_AUTH_*` / `spAPIFILE_*`, `@url1_`, response contract) is in [tapi-reference.md](tapi-reference.md).
-
-| Feature           | SP name                      | Main params            |
-| ----------------- | ---------------------------- | ---------------------- |
-| List              | `spAPI_{Entity}List`         | Filter params (custom) |
-| Detail            | `spAPI_{Entity}Get`          | `@url1_{EntityID}`     |
-| Insert            | `spAPI_{Entity}Insert`       | Entity fields          |
-| Update            | `spAPI_{Entity}Update`       | ID + fields to update  |
-| Delete            | `spAPI_{Entity}Delete`       | `@url1_{EntityID}`     |
-| Lookup / dropdown | `spAPI_AUTH_{Entity}Options` | No auth, returns list  |
-
-**Example — "Student management"** (matches step-2 fields `StudentID`, `FullName`, `ClassID`, `ClassName`, `GPA`):
-
-```
-spAPI_StudentList       -- danh sách, lọc theo ClassID + Keyword — trả đúng các cột đã hiển thị ở bước 2
-spAPI_StudentGet        -- chi tiết theo url1=StudentID
-spAPI_StudentInsert     -- thêm mới
-spAPI_StudentUpdate     -- cập nhật
-spAPI_StudentDelete     -- xoá theo url1=StudentID
-spAPI_AUTH_ClassOptions -- dropdown danh sách lớp (không cần auth)
-```
-
-**Output:** full SP list; names + params + response shape match the fields used in the UI.
-
----
-
-## Step 4 — Write SQL stored procedures
-
-Per tAPI rules ([tapi-reference.md](tapi-reference.md)) and the step-3 contract.
-
-**SELECT (list):**
-
-```sql
-CREATE PROCEDURE spAPI_StudentList
-    @Keyword    nvarchar(200) = NULL,
-    @ClassID    varchar(20)   = NULL,
-    @sys_UserID varchar(9)
-AS BEGIN
-    SELECT s.StudentID, s.FullName, s.ClassID, c.ClassName, s.GPA
-    FROM tblStudent s
-    JOIN tblClass c ON s.ClassID = c.ClassID
-    WHERE (@Keyword IS NULL OR s.FullName LIKE '%' + @Keyword + '%')
-      AND (@ClassID IS NULL OR s.ClassID = @ClassID)
-    ORDER BY s.FullName
-END
-```
-
-**INSERT:**
-
-```sql
-CREATE PROCEDURE spAPI_StudentInsert
-    @StudentID  varchar(9),
-    @FullName   nvarchar(100),
-    @ClassID    varchar(20),
-    @sys_UserID varchar(9)
-AS BEGIN
-    IF EXISTS (SELECT 1 FROM tblStudent WHERE StudentID = @StudentID)
-    BEGIN
-        RAISERROR(N'Mã sinh viên đã tồn tại', 16, 1)
-        RETURN
-    END
-    INSERT INTO tblStudent (StudentID, FullName, ClassID, CreateUser, CreateTime)
-    VALUES (@StudentID, @FullName, @ClassID, @sys_UserID, GETDATE())
-    SELECT mess = N'Thêm thành công', id = @StudentID
-END
-```
-
-**DELETE:**
-
-```sql
-CREATE PROCEDURE spAPI_StudentDelete
-    @url1_StudentID varchar(9),
-    @sys_UserID     varchar(9)
-AS BEGIN
-    DELETE FROM tblStudent WHERE StudentID = @url1_StudentID
-    SELECT mess = N'Đã xoá', id = @url1_StudentID
-END
-```
-
-**GET (detail, convert_to_object):**
-
-```sql
-CREATE PROCEDURE spAPI_StudentGet
-    @url1_StudentID varchar(9),
-    @sys_UserID     varchar(9)
-AS BEGIN
-    SELECT convert_to_object = '',
-           s.StudentID, s.FullName, s.ClassID, c.ClassName, s.GPA, s.Email
-    FROM tblStudent s
-    JOIN tblClass c ON s.ClassID = c.ClassID
-    WHERE s.StudentID = @url1_StudentID
-END
-```
-
-> `convert_to_object = ''` when the SP returns exactly one record → response is an object instead of `data[0][0]`.
-
-Deploy with `fui sp save` + `fui sp deploy` (never call the endpoint to "try it" — see step 6).
-
-**NEVER put `GRANT EXECUTE` in the .sql file.** A `CREATE PROCEDURE` body runs **to end of batch**; `_sql_execute_NonQuery` sends one batch and **does not support `GO`** (client directive, not T-SQL). A `GRANT` after `END` is **swallowed into the SP body** — runs on every call, never grants at deploy. No error; the endpoint just returns a permission error while the SP looks right.
-
-`fui sp deploy` **auto-grants** new procedures (not FUNCTIONs — functions need no EXECUTE for `[public]`), then **re-checks `sys.database_permissions`** and reports:
-
-- `✓ [public] đã có quyền EXECUTE trên "..."` — done.
-- `❗ [public] CHƯA có quyền EXECUTE ...` — the output prints a runnable command; copy verbatim:
-  `fui exec "GRANT EXECUTE ON [dbo].[spAPI_StudentList] TO [public] AS [dbo]" --db ...`
-- Grant failed but deploy succeeded → **the SP is already on the server**; run the GRANT above, **do not redeploy**.
-
-Deploying via `fui exec` with `CREATE PROCEDURE` → **no auto-grant, no tAPI param-cache clear**; fui warns and names the two commands to run next.
-
-**Output:** all step-3 SPs deployed.
-
----
-
-## Step 5 — Replace hard-coded data with API bindings
-
-Keep the step-2 layout; replace `data[]` literals with named `IN`/`OUT`/`CALLBACK` actions on the deployed SPs.
-
-**5.1 Actions replacing hard-coded data**
-
-```json
-"data": [
-  { "keyword": "" },
-  { "classId": "" },
-  { "studentList": [] },
-
-  {
-    "fetchStudents": {
-      "API": "/{apiName}/StudentList",
-      "IN": { "Keyword": "vueData.keyword", "ClassID": "vueData.classId" },
-      "OUT": "studentList"
-    }
-  },
-  {
-    "saveStudent": {
-      "API": "/{apiName}/StudentInsert",
-      "IN": {
-        "StudentID": "vueData.form.StudentID",
-        "FullName":  "vueData.form.FullName",
-        "ClassID":   "vueData.form.ClassID"
-      },
-      "CALLBACK": [
-        { "CALL": "vueData.fetchStudents" },
-        { "MESS": "Thêm thành công" },
-        { "EXE":  "vueData.dialogOpen = false" }
-      ]
-    }
-  },
-  {
-    "deleteStudent": {
-      "API": "/{apiName}/StudentDelete/`{{vueData.selectedID}}",
-      "CONFIRM": "Bạn có chắc muốn xoá sinh viên này?",
-      "CALLBACK": { "CALL": "vueData.fetchStudents" }
-    }
-  }
-]
-```
-
-**5.2 `watch` to reload when filters change**
-
-```json
-"watch": {
-  "keyword": { "CALL": "vueData.fetchStudents" },
-  "classId":  { "CALL": "vueData.fetchStudents" }
-}
-```
-
-**5.3** Append `{ "CALL": "vueData.fetchStudents" }` at the end of `data[]` to auto-load on open.
-
-**Output:** `module.json` fully wired, layout unchanged from step 2.
-
----
-
-## Step 6 — Static verification and finish
-
-Pre-publish checklist — **no step calls a real API/SP/DML**:
-
-**API/SP** — full checklist (naming, params, security, `GRANT EXECUTE`, deploy workflow): [verification.md](verification.md). Here:
-
-- [ ] `AUTH_` on endpoints that need no login
-- [ ] `fui sp verify` per new SP — reads the real body, infers response shape/error contract, checks params, emits a `--mocks` snippet (no endpoint call)
-- [ ] **Write** APIs: read the body and reason (WHERE, transaction, RAISERROR) — no trial run
-
-**module.json:**
-
-- [ ] Each action's `API` path matches `/{apiName}/{FunctionName}`
-- [ ] `IN` params match SP param names exactly (case-sensitive)
-- [ ] Route params (url1, url2) go via the URL, not `IN`
-- [ ] `OUT` receives the right type (array vs object per SP) — check against the shape inferred by `fui sp verify`
-- [ ] `watch` declared for auto-reload filters
-- [ ] `data[]` declares the initial fetch action and ends with a startup `{ "CALL": ... }`
-
-**Final verification, in order:** `fui module validate` (syntax/rule errors) → `fui module outline` (text review of UI structure) → `fui module simulate --mocks '{...}'` using the `fui sp verify` snippet (action/watch/dialog flow) → if display is still in doubt, a last `fui module simulate --render` with the same `--mocks`. (`fui module check` runs validate + outline + simulate in one step.)
-
-**Output:** module works end-to-end, UI ↔ API connected, zero real calls during verification.
-
----
-
-## Complete output example
-
-### SPs (step 4)
-
-Each SP is **its own file** via `fui sp save` → `fui sp deploy`. No GRANT in the file, no `GO` (step 4); tAPI params **must not have default values** — `fui sp deploy` hard-blocks them.
-
-```sql
--- 1. Danh sách  (file spAPI_StudentList.sql)
-CREATE PROCEDURE spAPI_StudentList @Keyword nvarchar(200), @ClassID varchar(20), @sys_UserID varchar(9)
-AS BEGIN
-    SELECT s.StudentID, s.FullName, s.ClassID, s.GPA
-    FROM tblStudent s WHERE (@Keyword = '' OR s.FullName LIKE '%'+@Keyword+'%') AND (@ClassID = '' OR s.ClassID = @ClassID)
-END
-```
-
-```sql
--- 2. Thêm mới  (file spAPI_StudentInsert.sql)
-CREATE PROCEDURE spAPI_StudentInsert @StudentID varchar(9), @FullName nvarchar(100), @ClassID varchar(20), @sys_UserID varchar(9)
-AS BEGIN
-    INSERT INTO tblStudent(StudentID, FullName, ClassID, CreateUser, CreateTime) VALUES(@StudentID, @FullName, @ClassID, @sys_UserID, GETDATE())
-    SELECT mess = N'Thêm thành công'
-END
-```
-
-### module.json actions (step 5)
-
-```json
-"fetchStudents": { "API": "/me/StudentList", "IN": { "Keyword": "vueData.keyword" }, "OUT": "studentList" },
-"addStudent":    { "API": "/me/StudentInsert", "IN": { "StudentID": "vueData.form.StudentID", "FullName": "vueData.form.FullName", "ClassID": "vueData.form.ClassID" }, "CALLBACK": [ { "CALL": "vueData.fetchStudents" }, { "MESS": "Đã thêm" } ] }
-```
-
----
-
-## Key notes
-
-- **`{apiName}`** in the API path is the app's tAPI apiName (e.g. `me`, `lms`, `hr`). Ask the user if unknown. **A project may use several apiNames** (one database each) — each alias needs its own `fui db add`, and the alias in the path is the `--db` argument of DB commands ([db-workflow.md](db-workflow.md) §4).
-- **Route params** (`@url1_`) go via the URL, not `IN`, using the backtick prefix: `"API": "/me/StudentDelete/\`{{vueData.selectedID}}"`
-- **SP with multiple SELECTs** → `data[0]`, `data[1]`... — declare explicitly in `OUT` or split with `EXE`.
-- **`convert_to_object = ''`** → flat object response: read `vueData.studentDetail.FullName`, not `vueData.studentDetail[0].FullName`.

package/skills/fui-skill-cli/references/module-data-patterns.md

@@ -1,117 +0,0 @@
-# module.json `data[]` — State declaration & value resolution
-
-> Owns: **`data[]` declaration patterns: three element kinds, order state → named action → auto-startup**. Value resolution: [controls-patterns.md](controls-patterns.md) §0; nested key syntax (dot/bracket/`#PARENT`): [controls-patterns.md](controls-patterns.md) §1; cross-window: [ui-crosswindow-patterns.md](ui-crosswindow-patterns.md).
-
-FUI processes `data[]` **sequentially top to bottom**; each object assigns/runs based on how its value is written. Examples come from `ex/ex-v3-1SetData` + `ex-v3-2CauTruc` (official FUI demo modules).
-
-> Overview of the 4 blocks: [module-json-anatomy.md](module-json-anatomy.md). Engine: [platform-architecture.md](platform-architecture.md) §5.
-
----
-
-## 1. Three element kinds in `data[]`
-
-```json
-"data": [
-  { "keyword": "", "dsUser": [], "dlOpen": false },          // (a) khởi tạo state
-  { "getUser": { "API": "...", "IN": {...}, "OUT": "dsUser" } }, // (b) named action
-  { "API": "...", "OUT": "dsInit" },                          // (c) action tự chạy khi load
-  { "CALL": "getUser" }                                        // (c) auto-startup
-]
-```
-
-- (a) no action key → creates reactive var in `vueData`.
-- (b) key is a **function name** → reusable action (invoke via `CALL`).
-- (c) object is itself an action (`API`/`CALL`/`FUN`…) → **runs on page load**, in order.
-
----
-
-## 2. Value resolution — HOW you write it decides the VALUE (common mistake)
-
-Full rules (`getVueData`: backtick / `{{ }}` / string with spaces / string without spaces → JS eval) live in [controls-patterns.md §0](controls-patterns.md#0-value-resolution-rules-fundamental) — Tier A, always loaded; not repeated here.
-
-> **Consequence for `data[]`:** to assign a **fixed string without spaces** (id, url, code) → **wrap in backticks** (``"`winUser"``) or single quotes (`"'winUser'"`), otherwise FUI treats it as a variable. This is the most common `data`/`IN` bug.
-
----
-
-## 3. Keys as nested paths (deep set)
-
-The left-hand key is also resolved (dot / bracket / dynamic index / `#PARENT`) — full syntax in [controls-patterns.md §1](controls-patterns.md#1-data-keys-and-assignment) _(Tier A, already loaded)_.
-
----
-
-## 4. Auto-run action: inline `IN`/`OUT`/`API` on load
-
-A standalone action object in `data[]` runs on load; no name needed:
-
-```json
-{ "API": "https://tapi.example.vn/me/auth/ApplicationList", "OUT": "Mang" },
-{ "IN": { "ABC": "`gdsgdsg", "DEF": "val5", "CBV": 1233 }, "OUT": "DoiTuong" }
-```
-
-→ loads the page's initial data (catalogs, dropdowns, table data).
-
----
-
-## 5. Named action + CALLBACK (reusable)
-
-```json
-{
-  "cmdSETData": [{ "MESS": "Thông báo" }, { "#Win1.GiaTriSetTuCHA": "Giá trị set từ CHA" }],
-  "apiChart": {
-    "API": "/ts/TS_Report_ForChart/{{ab}}",
-    "IN": { "sachID": "apiLoadFBUser", "modeY": 12345 },
-    "OUT": "DSDoiQuaTang",
-    "CALLBACK": { "AAA": "val2" }
-  }
-}
-```
-
-Invoke with `{ "CALL": "cmdSETData" }` from `controls`, `watch` or another action. `CALLBACK` runs after the API completes (see [ui-patterns.md](ui-patterns.md) §7).
-
----
-
-## 6. `watch` with `v_old` — previous value
-
-In `watch`, `v_old.<field>` gives the value **before the change**:
-
-```json
-"watch": {
-  "val4": {
-    "API": "ts/auth/QuanHuyen_Select",
-    "IN": { "MaTinhTP": "tinhID" },
-    "OUT": "DS_QUAN_HUYEN",
-    "CALLBACK": { "BAC": "v_old.abcdeID" }
-  },
-  "taoID": { "dungthu": "v_old.taoID" }
-}
-```
-
-`v_old`, `deep-watch` details: [watcher-patterns.md](watcher-patterns.md).
-
----
-
-## 7. Cross-window exchange inside `data[]`
-
-`data[]` can read/write other windows via `#PARENT.*` / `#WinID.*` keys/values — place **before** fetch CALLs:
-
-```json
-"data": [
-  {
-    "LayDuLieuWinCha": "#PARENT.Win1",   // đọc data cha
-    "#PARENT.abcdef": 1234567890,        // ghi xuống cha
-    "#Win1": { "CALL": "cmdTHONGBao" }   // gọi lệnh ở Win1
-  }
-]
-```
-
-Full: [ui-crosswindow-patterns.md](ui-crosswindow-patterns.md).
-
----
-
-## 8. `data[]` checklist
-
-1. Initialize **every** state var in the first object (including `[]`, `false`, `null`) so reactivity works.
-2. Named actions in the middle; auto-startup (`CALL`/`API`) **last**.
-3. Fixed space-free strings → **backticks**; never let FUI read them as variables.
-4. `#PARENT.*` / URL vars before fetch CALLs.
-5. No complex logic in `data` — move to `script.js` (functions) or sparing `EXE`.