@fui-org/fui-cli 2.1.3 → 2.2.0

package/skills/{fui-skill → fui}/references/script-map.md

@@ -1,262 +1,262 @@
-# FUI Script Map
-
-> Owns: **bundled libraries (§0) and the FUI script source map — which function lives in which file/line**. Function usage: [default-function.md](default-function.md). Read framework sources with `fui library <name>`.
-
-> **File by framework** — check `_moduleInfo.json.Framework` (`"V2"` or `"V3"`):
->
-> | Content                                       | V2 file                          | V3 file                          |
-> | --------------------------------------------- | -------------------------------- | -------------------------------- |
-> | Core engine (action, API, layout)             | `scripts/fastproject.js`         | `scripts/fastproject-3.0.js`     |
-> | Utilities (router, export, auth, WS)          | `scripts/defaultfunction.js`     | `scripts/defaultfunction-3.0.js` |
-> | Component registry (`f-*`, dialog, editor...) | `scripts/component.js`           | `scripts/component-3.0.js`       |
-> | Table system (`f-table`, `t-*`)               | `scripts/componentTable.js`      | `scripts/componentTable-3.0.js`  |
-> | Chart (`f-echart`)                            | `scripts/fechart.js`             | `scripts/fechart.js`             |
-> | Input sheet (`f-sheet`)                       | `scripts/fsheet.js` (shared, §5) | `scripts/fsheet.js` (shared, §5) |
-
-FUI conventions:
-
-- Metadata is `module.json` (not `controls.json`).
-- Call action logic via `CALL(vueData.actionName)` or the Action Protocol.
-- `controls` layout is always `container > rows > cols`.
-- JSON events use `v-on:...` (not `@...`).
-- Literal forcing (`` ` `` or `'...'`) is for Action `IN` mapping, not normal static component props.
-
-## 0) Bundled libraries (FUI V2)
-
-Auto-loaded into **every** module — no import needed; use them instead of equivalents. **Never add a CDN** for any of them — re-adding causes conflicts.
-
-> ⛔ **Applies ONLY to `HTMLOnly=false`.** `HTMLOnly: true` modules get nothing preloaded (no Vue, Vuetify, jQuery, lodash, MDI, `projectdefaultstyle.css`); there CDNs are **required**: see [module-structure.md §HTMLOnly=true: KHÔNG có thư viện nào được nhúng sẵn](module-structure.md).
-
-CSS: Roboto · Material Design Icons (`mdi-*`) · Vuetify · vue-toast-notification · jquery-confirm · FUI projectdefaultstyle.css
-
-| Global                       | Library                | Use                                          |
-| ---------------------------- | ---------------------- | -------------------------------------------- |
-| `$`, `jQuery`                | jQuery 3.6.0           | DOM, AJAX                                    |
-| `$.confirm()` / `$.dialog()` | jquery-confirm         | Styled dialogs (instead of `window.confirm`) |
-| `_`                          | Lodash 4.17            | Array/object utils                           |
-| `moment`                     | Moment.js (vi)         | Dates, Vietnamese locale preset              |
-| `numeral`                    | Numeral.js             | Number/currency format                       |
-| `Vue.$toast`                 | vue-toast-notification | Toasts                                       |
-
-FUI JS (loaded after the above): `defaultfunction.js` (`jsonToExcel`, `pushRouter`, `openWindow`, `CALL`, `confirm`, `showMessage`, ...) · `component.js` (all `f-*`: `f-table`, `f-form`, `f-echart`, ...) · `componentTable.js` (table helpers) · `fastproject.js` (bootstrapper).
-
-```js
-// Toast thông báo
-Vue.$toast.success("Lưu thành công", { position: "top" });
-Vue.$toast.error("Có lỗi xảy ra", { position: "top" });
-
-// Dialog xác nhận (FUI wrapper — dùng hàm confirm() từ defaultfunction.js)
-confirm({
-  title: "Xác nhận xóa",
-  message: "Bạn có chắc muốn xóa không?",
-  action: function () {
-    /* xử lý khi OK */
-  },
-});
-
-// Dialog thông báo (FUI wrapper)
-showMessage({ title: "Thông báo", message: "Đã lưu thành công" });
-
-// Lodash — dùng trong script.js / vueData
-_.find(vueData.list, { id: 5 });
-_.groupBy(vueData.data, "loai");
-_.sumBy(items, "soLuong");
-_.cloneDeep(vueData.formData);
-_.debounce(fn, 300);
-
-// Moment — format ngày
-moment(val).format("DD/MM/YYYY");
-moment(val).format("DD/MM/YYYY HH:mm");
-moment().subtract(7, "days").format("YYYY-MM-DD");
-
-// Numeral — format số
-numeral(value).format("0,0"); // 1,234,567
-numeral(value).format("0,0.0"); // 1,234,567.8
-numeral(_.sumBy(items, key)).format("0,0"); // tổng cột trong bảng
-```
-
-> `f-*` needing extra JS/CSS: [component-quickref.md](component-quickref.md) §Components needing JS/CSS imports.
-
-## 1) scripts/fastproject.js — V3: fastproject-3.0.js
-
-Core engine: init module, build DOM from `module.json.controls`, run actions, map data, call APIs.
-
-Init: `$(document).ready` → `loadModuleInfo()` (merge config, read URL/user info) → `createModuleDom()` (`runAction($moduleUI.data)` + render controls) → `createWatch()` (watchers from `$moduleUI.watch`) → Vue mounts.
-
-| Line | Function                                       | Purpose                                                                                                                                        |
-| ---: | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-|   65 | `buildParamURL()`                              | Query string → `vueData`                                                                                                                       |
-|   77 | `loadModuleInfo()`                             | Load project/module config, user info                                                                                                          |
-|  122 | `createModuleDom()`                            | Main layout, render controls, init watch                                                                                                       |
-|  210 | `buildModuleUI(controlsList, target)`          | Recursive UI from JSON controls                                                                                                                |
-|  233 | `buildControl(controlsList, flex, target)`     | One control: attr/event/import                                                                                                                 |
-|  299 | `addImport(importArr)`                         | Load control script/css deps                                                                                                                   |
-|  310 | `createWatch_Data(obj)`                        | Init watch data                                                                                                                                |
-|  320 | `createWatch(obj)`                             | Attach watchers from `watch`                                                                                                                   |
-|  345 | `buildVisualValForObj(controlAttr, target)`    | Bind dynamic values into attrs                                                                                                                 |
-|  373 | `runAction(obj, includeData)`                  | Action engine (object/array)                                                                                                                   |
-|  407 | `vueAction(objAction, includeData, callBack)`  | One action (IF/API/CALL/EXE/...)                                                                                                               |
-|  485 | `mapData(map, target, src, includeData)`       | Map data between objects                                                                                                                       |
-|  527 | `defProp(obj)`                                 | Normalize object props for context                                                                                                             |
-|  537 | `bindData(obj)`                                | Resolve dynamic string/object                                                                                                                  |
-|  542 | `getVueData(key, src)`                         | Value by path (`vueData.x.y`, `item.x`, template...). Literal forcing is for `IN` mapping; static props without `:` are already plain strings. |
-|  578 | `setValue(target, key, value, srcData, index)` | Set by path on object/window                                                                                                                   |
-|  612 | `bindDataToString(str, data)`                  | Resolve template string                                                                                                                        |
-|  619 | `templateCompiled(str, data)`                  | Compile lodash-style template                                                                                                                  |
-|  624 | `getWindowData(value)`                         | Read window/iframe context                                                                                                                     |
-|  638 | `setWindowData(key, value)`                    | Write window/iframe context                                                                                                                    |
-|  657 | `runFunction(obj, callback)`                   | Call declared JS function                                                                                                                      |
-|  665 | `tableActionEvent(ctrl)`                       | Table/control action events                                                                                                                    |
-|  687 | `callAPI(objApi, callBack, includeData)`       | API call (`IN/OUT/CALLBACK`)                                                                                                                   |
-|  743 | `loginFUN()`                                   | Login/redirect                                                                                                                                 |
-|  761 | `errorMess(code, message)`                     | Standard error display                                                                                                                         |
-
-## 2) scripts/defaultfunction.js — V3: defaultfunction-3.0.js
-
-Shared utilities (router, messaging, transform, AJAX, export, auth, websocket).
-
-| Line | Function                                               | Purpose                               |
-| ---: | ------------------------------------------------------ | ------------------------------------- |
-|   35 | `extractHostname(url)`                                 | Hostname                              |
-|   53 | `getDomainWithoutSubdomain(url)`                       | Root domain                           |
-|   62 | `loadScripts(scriptsArray, callbackFunc)`              | Load scripts, then callback           |
-|   75 | `pushRouter(router)`                                   | Push browser history                  |
-|   82 | `CALL(obj, includeData)`                               | Alias of `runAction(...)`             |
-|   86 | `windowSendMessage(window, cmd, data)`                 | `postMessage` to parent/window/iframe |
-|  100 | `appCommand(cmdData)`                                  | Command to native wrapper (RN/WebKit) |
-|  106 | `buildHeader(obj, mapCol)`                             | Table headers from data/column map    |
-|  130 | `fillData(obj)`                                        | Map source → destination              |
-|  162 | `groupBy(arrayObj, groupField, sumArr)`                | Group + sum columns                   |
-|  188 | `chartDataBuild(obj)`                                  | Generic chart data                    |
-|  219 | `chartQABuild(obj)`                                    | QA/report chart data                  |
-|  239 | `confirm(obj)`                                         | Confirm dialog                        |
-|  259 | `showMessage(obj)`                                     | Message dialog/toast                  |
-|  283 | `rightTest(rightObject)`                               | Check user rights                     |
-|  301 | `openWindow(obj)`                                      | FUI popup/dialog window               |
-|  326 | `redirect(obj, query)`                                 | Navigate by URL/config                |
-|  339 | `reload()`                                             | Reload page                           |
-|  343 | `findInArray(obj)`                                     | Find by value condition               |
-|  348 | `fixURL(url)`                                          | Normalize URL (prepend API domain)    |
-|  354 | `stringAttrToJson(str, removeVueEvent)`                | HTML attr string → JSON               |
-|  371 | `json_data_parse(obj, level)`                          | Parse `json_data:` fields recursively |
-|  407 | `ajaxCALL(URL, DATA, callBack, errorCallBack, header)` | AJAX POST                             |
-|  449 | `capacityText(numb)`                                   | Bytes → KB/MB                         |
-|  454 | `generateID()`                                         | Random ID                             |
-|  467 | `printPDF(obj)`                                        | PDF via `pdfMake`                     |
-|  499 | `colorLib(color)`                                      | Color utils                           |
-|  645 | `transparentize(value, opacity)`                       | Alpha color                           |
-|  650 | `jsonToExcel(Obj)`                                     | JSON → Excel                          |
-|  746 | `copyToClipboard(textToCopy)`                          | Clipboard                             |
-|  770 | `fileNameClear(fname)`                                 | Sanitize file name                    |
-|  775 | `hashCode(s)`                                          | String hash                           |
-|  785 | `getCookie(cname)`                                     | Read cookie                           |
-|  800 | `setCookie(name, value, days, domain)`                 | Set cookie                            |
-|  814 | `logout(cookiesName, domain, url)`                     | Clear cookies, logout/redirect        |
-|  827 | `webSocketJoinGroup(groupObj, timeout, callBackFunc)`  | Join WS group                         |
-|  851 | `webSocketConnection(wsURL, WS, wsState)`              | Create/keep WS connection             |
-|  892 | `webSocket_Send(obj)`                                  | Send over WS                          |
-
-> **Real-time (SignalR)** — required imports, `data[]` group declaration, send/receive, full `module.json`: [websocket-realtime.md](websocket-realtime.md).
-
-## 3) scripts/component.js — V3: component-3.0.js
-
-Base `f-*` and business components. Also holds `defaultControlAttr` (default attrs per `el`). Many need external imports (CKEditor, pdfMake, cropper, chart, ...).
-
-| Line | Component         | Purpose                                                                                                                                |
-| ---: | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-|  304 | `f-label`         | Formatted label/text                                                                                                                   |
-|  319 | `f-box`           | Simple box/card                                                                                                                        |
-|  377 | `f-header`        | Light section header                                                                                                                   |
-|  386 | `f-title`         | Title                                                                                                                                  |
-|  395 | `f-radiobox`      | Radio group                                                                                                                            |
-|  425 | `f-menu`          | Menu/navigation                                                                                                                        |
-|  472 | `f-search`        | Search input                                                                                                                           |
-|  536 | `f-button`        | Button                                                                                                                                 |
-|  607 | `f-slider`        | Slider                                                                                                                                 |
-|  618 | `f-file-upload`   | File upload                                                                                                                            |
-|  768 | `f-qrcode`        | QR render                                                                                                                              |
-|  843 | `f-qrcode-reader` | QR scan                                                                                                                                |
-|  914 | `f-image-update`  | Crop/rotate/upload image dialog                                                                                                        |
-| 1161 | `f-date`          | Date picker                                                                                                                            |
-| 1434 | `f-time`          | Time picker                                                                                                                            |
-| 1639 | `f-time-counter`  | Counter/countdown/clock                                                                                                                |
-| 1775 | `fp-profile`      | Header profile menu                                                                                                                    |
-| 2020 | `header-bar`      | Main header bar                                                                                                                        |
-| 2277 | `f-chart`         | Legacy Chart.js (props `data`/`type`/`options`). Use `f-echart` — [components-echart.md](components-echart.md)                         |
-| 2389 | `f-window`        | Dynamic window/dialog host                                                                                                             |
-| 2453 | `f-editor`        | WYSIWYG (CKEditor)                                                                                                                     |
-| 2591 | `f-editor-dialog` | Fullscreen editor dialog                                                                                                               |
-| 2687 | `f-dialog`        | Dialog built from `controls`                                                                                                           |
-| 2899 | `f-pdfmake`       | PDF viewer via `printPDF`                                                                                                              |
-| 2934 | `f-excel-reader`  | Excel/CSV → object array: sheet pick, skip N rows, key names, size limit; XLSX lazy-loaded. [components-input.md](components-input.md) |
-
-## 4) scripts/componentTable.js — V3: componentTable-3.0.js (§4b)
-
-| Line | Component    | Purpose                                                                                                                                                                                           |
-| ---: | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-|    1 | `f-table`    | The only data table (CRUD and readonly): search, select, CRUD (`update-api`, `update-form`), export, auto headers when `headers` omitted, sum row/line via `sumFormat` (object/string), `:height` |
-|  416 | `t-html`     | HTML cell                                                                                                                                                                                         |
-|  420 | `t-label`    | Text cell                                                                                                                                                                                         |
-|  424 | `t-num`      | Number cell                                                                                                                                                                                       |
-|  442 | `t-time`     | Time cell                                                                                                                                                                                         |
-|  452 | `t-boolean`  | Bool icon/color                                                                                                                                                                                   |
-|  473 | `t-check`    | Checkbox cell                                                                                                                                                                                     |
-|  501 | `t-text`     | Inline text input                                                                                                                                                                                 |
-|  523 | `t-select`   | Inline select                                                                                                                                                                                     |
-|  544 | `t-combobox` | Inline combobox                                                                                                                                                                                   |
-|  616 | `t-menu`     | Action menu cell                                                                                                                                                                                  |
-|  654 | `t-link`     | Link / open-dialog cell                                                                                                                                                                           |
-|  678 | `t-button`   | Action button cell                                                                                                                                                                                |
-
-**`f-table` `:height`** — computed `heightNum`/`tableHeight` + `updateFillHeight()`: empty = grows with rows; `<=0` = measures real `getBoundingClientRect()`, fills to screen bottom leaving `abs(n)` px (`window.resize` listener); `>0` = fixed px.
-
-## 4b) scripts/componentTable-3.0.js
-
-**V3** (Vue 3 + Vuetify 3) of the same components, PascalCase names (`FTable`, `THtml`, `TNum`, ...). Module framework (`_moduleInfo.json`) picks the file.
-
-When editing **both** files:
-
-- Lifecycle: V3 `beforeUnmount` (components declare both to run on V2 and V3).
-- Classes: V3 `text-primary` / `text-subtitle-1` / `text-caption` vs V2 `primary--text` / `subtitle-1` / `caption`; `v-btn outlined` (V2) → `variant="outlined"` (V3).
-- `v-data-table` scroll wrapper: V2 `.v-data-table__wrapper`, V3 `.v-table__wrapper`.
-- Names bound directly in a V3 template **must not start with `_`** (proxy `has` trap) — use a suffix, e.g. `hideDefaultFooter_cacl`.
-- `f-table` `headers`: V2 `{ text, value }`, V3 `{ title, key }`; slot `body.append` gets `{ headers }` (V2) / `{ columns }` (V3).
-
-Verify V3: `node test/v3-table-harness.mjs [sum|fill|auto]` — real V3 framework from `https://fui.vn` in headless chromium with **local `componentTable-3.0.js` swapped in**; APIs blocked + mocked. Prints JS errors/`[Vue warn]`, real height, sum row, AG Grid cells; screenshots `test/v3-{mode}.png`.
-
-## 5) scripts/fsheet.js — shared V2 + V3
-
-Whole `f-sheet` in **one file** for V2 and V3 (declares both `beforeDestroy` and `beforeUnmount`); not split by framework.
-
-Required imports (from `component.js` `defaultControlAttr["f-sheet"].import`), **in this order**:
-
-```
-/include/ag-grid/ag-grid-community.min.js
-/include/ag-grid/fsheet.js
-```
-
-| Content                                                                                                  | Notes                                                                                                                                                                 |
-| -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Vue.component('FSheet', {...})`                                                                         | Main component — props/columns/API: [fsheet.md](fsheet.md)                                                                                                            |
-| 4 cell renderers (`fsHtmlCellRenderer`/`fsLinkCellRenderer`/`fsButtonCellRenderer`/`fsMenuCellRenderer`) | = `f-table`'s `t-html`/`t-link`/`t-button`/`t-menu` — [fsheet.md](fsheet.md)                                                                                          |
-| Custom range selection + fill handle + TSV clipboard                                                     | AG Grid Community lacks Cell Selection (Enterprise), so f-sheet drives it and applies AG Grid classes (`.ag-cell-range-*`, `.ag-selection-fill-*`, `.ag-fill-handle`) |
-
-`:height` has the same 3 modes (auto-grow / fill to bottom / fixed px) — [fsheet.md](fsheet.md) §`:height`.
-
-Verify `fsheet.js`: `fui component preview` (isolated `f-sheet` with sample data, no push) or `fui module simulate --render` (in a real module) — both real browser, no extra harness.
-
-## 6) Lookup by task
-
-> Files listed are V2; for **V3** use the matching `-3.0` file.
-
-| Task                                        | Open first                              | Look at                                                                                   |
-| ------------------------------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------- |
-| Layout renders wrong                        | `fastproject.js`                        | `buildModuleUI`, `buildControl`, `bindData`                                               |
-| Action not running / wrong branch           | `fastproject.js`                        | `runAction`, `vueAction`, `mapData`, `getVueData`                                         |
-| API returns no `OUT`                        | `fastproject.js` + `defaultfunction.js` | `callAPI`, `fixURL`, `ajaxCALL`                                                           |
-| Table Add/Edit/Delete fails                 | `componentTable.js`                     | `f-table` + `update-api`, `update-form`                                                   |
-| Dynamic dialog not binding                  | `component.js`                          | `f-dialog`, `buildModuleUI` (fastproject)                                                 |
-| Image upload/crop/save                      | `component.js`                          | `f-image-update`                                                                          |
-| Excel/PDF export                            | `defaultfunction.js` + `component.js`   | `jsonToExcel`, `printPDF`, `f-pdfmake`, `f-excel-reader`                                  |
-| Login/rights/menu                           | `fastproject.js` + `defaultfunction.js` | `loadModuleInfo`, `loginFUN`, `rightTest`                                                 |
-| `f-sheet` missing / "FSheet is not defined" | `fsheet.js` (shared V2+V3)              | Missing import — [component-quickref.md](component-quickref.md) or [fsheet.md](fsheet.md) |
+# FUI Script Map
+
+> Owns: **bundled libraries (§0) and the FUI script source map — which function lives in which file/line**. Function usage: [default-function.md](default-function.md). Read framework sources with `fui library <name>`.
+
+> **File by framework** — check `_moduleInfo.json.Framework` (`"V2"` or `"V3"`):
+>
+> | Content                                       | V2 file                          | V3 file                          |
+> | --------------------------------------------- | -------------------------------- | -------------------------------- |
+> | Core engine (action, API, layout)             | `scripts/fastproject.js`         | `scripts/fastproject-3.0.js`     |
+> | Utilities (router, export, auth, WS)          | `scripts/defaultfunction.js`     | `scripts/defaultfunction-3.0.js` |
+> | Component registry (`f-*`, dialog, editor...) | `scripts/component.js`           | `scripts/component-3.0.js`       |
+> | Table system (`f-table`, `t-*`)               | `scripts/componentTable.js`      | `scripts/componentTable-3.0.js`  |
+> | Chart (`f-echart`)                            | `scripts/fechart.js`             | `scripts/fechart.js`             |
+> | Input sheet (`f-sheet`)                       | `scripts/fsheet.js` (shared, §5) | `scripts/fsheet.js` (shared, §5) |
+
+FUI conventions:
+
+- Metadata is `module.json` (not `controls.json`).
+- Call action logic via `CALL(vueData.actionName)` or the Action Protocol.
+- `controls` layout is always `container > rows > cols`.
+- JSON events use `v-on:...` (not `@...`).
+- Literal forcing (`` ` `` or `'...'`) is for Action `IN` mapping, not normal static component props.
+
+## 0) Bundled libraries (FUI V2)
+
+Auto-loaded into **every** module — no import needed; use them instead of equivalents. **Never add a CDN** for any of them — re-adding causes conflicts.
+
+> ⛔ **Applies ONLY to `HTMLOnly=false`.** `HTMLOnly: true` modules get nothing preloaded (no Vue, Vuetify, jQuery, lodash, MDI, `projectdefaultstyle.css`); there CDNs are **required**: see [module-structure.md §"HTMLOnly=true: no library is embedded"](module-structure.md).
+
+CSS: Roboto · Material Design Icons (`mdi-*`) · Vuetify · vue-toast-notification · jquery-confirm · FUI projectdefaultstyle.css
+
+| Global                       | Library                | Use                                          |
+| ---------------------------- | ---------------------- | -------------------------------------------- |
+| `$`, `jQuery`                | jQuery 3.6.0           | DOM, AJAX                                    |
+| `$.confirm()` / `$.dialog()` | jquery-confirm         | Styled dialogs (instead of `window.confirm`) |
+| `_`                          | Lodash 4.17            | Array/object utils                           |
+| `moment`                     | Moment.js (vi)         | Dates, Vietnamese locale preset              |
+| `numeral`                    | Numeral.js             | Number/currency format                       |
+| `Vue.$toast`                 | vue-toast-notification | Toasts                                       |
+
+FUI JS (loaded after the above): `defaultfunction.js` (`jsonToExcel`, `pushRouter`, `openWindow`, `CALL`, `confirm`, `showMessage`, ...) · `component.js` (all `f-*`: `f-table`, `f-form`, `f-echart`, ...) · `componentTable.js` (table helpers) · `fastproject.js` (bootstrapper).
+
+```js
+// Toast thông báo
+Vue.$toast.success("Lưu thành công", { position: "top" });
+Vue.$toast.error("Có lỗi xảy ra", { position: "top" });
+
+// Dialog xác nhận (FUI wrapper — dùng hàm confirm() từ defaultfunction.js)
+confirm({
+  title: "Xác nhận xóa",
+  message: "Bạn có chắc muốn xóa không?",
+  action: function () {
+    /* xử lý khi OK */
+  },
+});
+
+// Dialog thông báo (FUI wrapper)
+showMessage({ title: "Thông báo", message: "Đã lưu thành công" });
+
+// Lodash — dùng trong script.js / vueData
+_.find(vueData.list, { id: 5 });
+_.groupBy(vueData.data, "loai");
+_.sumBy(items, "soLuong");
+_.cloneDeep(vueData.formData);
+_.debounce(fn, 300);
+
+// Moment — format ngày
+moment(val).format("DD/MM/YYYY");
+moment(val).format("DD/MM/YYYY HH:mm");
+moment().subtract(7, "days").format("YYYY-MM-DD");
+
+// Numeral — format số
+numeral(value).format("0,0"); // 1,234,567
+numeral(value).format("0,0.0"); // 1,234,567.8
+numeral(_.sumBy(items, key)).format("0,0"); // tổng cột trong bảng
+```
+
+> `f-*` needing extra JS/CSS: [component-quickref.md](component-quickref.md) §Components needing JS/CSS imports.
+
+## 1) scripts/fastproject.js — V3: fastproject-3.0.js
+
+Core engine: init module, build DOM from `module.json.controls`, run actions, map data, call APIs.
+
+Init: `$(document).ready` → `loadModuleInfo()` (merge config, read URL/user info) → `createModuleDom()` (`runAction($moduleUI.data)` + render controls) → `createWatch()` (watchers from `$moduleUI.watch`) → Vue mounts.
+
+| Line | Function                                       | Purpose                                                                                                                                        |
+| ---: | ---------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+|   65 | `buildParamURL()`                              | Query string → `vueData`                                                                                                                       |
+|   77 | `loadModuleInfo()`                             | Load project/module config, user info                                                                                                          |
+|  122 | `createModuleDom()`                            | Main layout, render controls, init watch                                                                                                       |
+|  210 | `buildModuleUI(controlsList, target)`          | Recursive UI from JSON controls                                                                                                                |
+|  233 | `buildControl(controlsList, flex, target)`     | One control: attr/event/import                                                                                                                 |
+|  299 | `addImport(importArr)`                         | Load control script/css deps                                                                                                                   |
+|  310 | `createWatch_Data(obj)`                        | Init watch data                                                                                                                                |
+|  320 | `createWatch(obj)`                             | Attach watchers from `watch`                                                                                                                   |
+|  345 | `buildVisualValForObj(controlAttr, target)`    | Bind dynamic values into attrs                                                                                                                 |
+|  373 | `runAction(obj, includeData)`                  | Action engine (object/array)                                                                                                                   |
+|  407 | `vueAction(objAction, includeData, callBack)`  | One action (IF/API/CALL/EXE/...)                                                                                                               |
+|  485 | `mapData(map, target, src, includeData)`       | Map data between objects                                                                                                                       |
+|  527 | `defProp(obj)`                                 | Normalize object props for context                                                                                                             |
+|  537 | `bindData(obj)`                                | Resolve dynamic string/object                                                                                                                  |
+|  542 | `getVueData(key, src)`                         | Value by path (`vueData.x.y`, `item.x`, template...). Literal forcing is for `IN` mapping; static props without `:` are already plain strings. |
+|  578 | `setValue(target, key, value, srcData, index)` | Set by path on object/window                                                                                                                   |
+|  612 | `bindDataToString(str, data)`                  | Resolve template string                                                                                                                        |
+|  619 | `templateCompiled(str, data)`                  | Compile lodash-style template                                                                                                                  |
+|  624 | `getWindowData(value)`                         | Read window/iframe context                                                                                                                     |
+|  638 | `setWindowData(key, value)`                    | Write window/iframe context                                                                                                                    |
+|  657 | `runFunction(obj, callback)`                   | Call declared JS function                                                                                                                      |
+|  665 | `tableActionEvent(ctrl)`                       | Table/control action events                                                                                                                    |
+|  687 | `callAPI(objApi, callBack, includeData)`       | API call (`IN/OUT/CALLBACK`)                                                                                                                   |
+|  743 | `loginFUN()`                                   | Login/redirect                                                                                                                                 |
+|  761 | `errorMess(code, message)`                     | Standard error display                                                                                                                         |
+
+## 2) scripts/defaultfunction.js — V3: defaultfunction-3.0.js
+
+Shared utilities (router, messaging, transform, AJAX, export, auth, websocket).
+
+| Line | Function                                               | Purpose                               |
+| ---: | ------------------------------------------------------ | ------------------------------------- |
+|   35 | `extractHostname(url)`                                 | Hostname                              |
+|   53 | `getDomainWithoutSubdomain(url)`                       | Root domain                           |
+|   62 | `loadScripts(scriptsArray, callbackFunc)`              | Load scripts, then callback           |
+|   75 | `pushRouter(router)`                                   | Push browser history                  |
+|   82 | `CALL(obj, includeData)`                               | Alias of `runAction(...)`             |
+|   86 | `windowSendMessage(window, cmd, data)`                 | `postMessage` to parent/window/iframe |
+|  100 | `appCommand(cmdData)`                                  | Command to native wrapper (RN/WebKit) |
+|  106 | `buildHeader(obj, mapCol)`                             | Table headers from data/column map    |
+|  130 | `fillData(obj)`                                        | Map source → destination              |
+|  162 | `groupBy(arrayObj, groupField, sumArr)`                | Group + sum columns                   |
+|  188 | `chartDataBuild(obj)`                                  | Generic chart data                    |
+|  219 | `chartQABuild(obj)`                                    | QA/report chart data                  |
+|  239 | `confirm(obj)`                                         | Confirm dialog                        |
+|  259 | `showMessage(obj)`                                     | Message dialog/toast                  |
+|  283 | `rightTest(rightObject)`                               | Check user rights                     |
+|  301 | `openWindow(obj)`                                      | FUI popup/dialog window               |
+|  326 | `redirect(obj, query)`                                 | Navigate by URL/config                |
+|  339 | `reload()`                                             | Reload page                           |
+|  343 | `findInArray(obj)`                                     | Find by value condition               |
+|  348 | `fixURL(url)`                                          | Normalize URL (prepend API domain)    |
+|  354 | `stringAttrToJson(str, removeVueEvent)`                | HTML attr string → JSON               |
+|  371 | `json_data_parse(obj, level)`                          | Parse `json_data:` fields recursively |
+|  407 | `ajaxCALL(URL, DATA, callBack, errorCallBack, header)` | AJAX POST                             |
+|  449 | `capacityText(numb)`                                   | Bytes → KB/MB                         |
+|  454 | `generateID()`                                         | Random ID                             |
+|  467 | `printPDF(obj)`                                        | PDF via `pdfMake`                     |
+|  499 | `colorLib(color)`                                      | Color utils                           |
+|  645 | `transparentize(value, opacity)`                       | Alpha color                           |
+|  650 | `jsonToExcel(Obj)`                                     | JSON → Excel                          |
+|  746 | `copyToClipboard(textToCopy)`                          | Clipboard                             |
+|  770 | `fileNameClear(fname)`                                 | Sanitize file name                    |
+|  775 | `hashCode(s)`                                          | String hash                           |
+|  785 | `getCookie(cname)`                                     | Read cookie                           |
+|  800 | `setCookie(name, value, days, domain)`                 | Set cookie                            |
+|  814 | `logout(cookiesName, domain, url)`                     | Clear cookies, logout/redirect        |
+|  827 | `webSocketJoinGroup(groupObj, timeout, callBackFunc)`  | Join WS group                         |
+|  851 | `webSocketConnection(wsURL, WS, wsState)`              | Create/keep WS connection             |
+|  892 | `webSocket_Send(obj)`                                  | Send over WS                          |
+
+> **Real-time (SignalR)** — required imports, `data[]` group declaration, send/receive, full `module.json`: [websocket-realtime.md](websocket-realtime.md).
+
+## 3) scripts/component.js — V3: component-3.0.js
+
+Base `f-*` and business components. Also holds `defaultControlAttr` (default attrs per `el`). Many need external imports (CKEditor, pdfMake, cropper, chart, ...).
+
+| Line | Component         | Purpose                                                                                                                                |
+| ---: | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+|  304 | `f-label`         | Formatted label/text                                                                                                                   |
+|  319 | `f-box`           | Simple box/card                                                                                                                        |
+|  377 | `f-header`        | Light section header                                                                                                                   |
+|  386 | `f-title`         | Title                                                                                                                                  |
+|  395 | `f-radiobox`      | Radio group                                                                                                                            |
+|  425 | `f-menu`          | Menu/navigation                                                                                                                        |
+|  472 | `f-search`        | Search input                                                                                                                           |
+|  536 | `f-button`        | Button                                                                                                                                 |
+|  607 | `f-slider`        | Slider                                                                                                                                 |
+|  618 | `f-file-upload`   | File upload                                                                                                                            |
+|  768 | `f-qrcode`        | QR render                                                                                                                              |
+|  843 | `f-qrcode-reader` | QR scan                                                                                                                                |
+|  914 | `f-image-update`  | Crop/rotate/upload image dialog                                                                                                        |
+| 1161 | `f-date`          | Date picker                                                                                                                            |
+| 1434 | `f-time`          | Time picker                                                                                                                            |
+| 1639 | `f-time-counter`  | Counter/countdown/clock                                                                                                                |
+| 1775 | `fp-profile`      | Header profile menu                                                                                                                    |
+| 2020 | `header-bar`      | Main header bar                                                                                                                        |
+| 2277 | `f-chart`         | Legacy Chart.js (props `data`/`type`/`options`). Use `f-echart` — [components-echart.md](components-echart.md)                         |
+| 2389 | `f-window`        | Dynamic window/dialog host                                                                                                             |
+| 2453 | `f-editor`        | WYSIWYG (CKEditor)                                                                                                                     |
+| 2591 | `f-editor-dialog` | Fullscreen editor dialog                                                                                                               |
+| 2687 | `f-dialog`        | Dialog built from `controls`                                                                                                           |
+| 2899 | `f-pdfmake`       | PDF viewer via `printPDF`                                                                                                              |
+| 2934 | `f-excel-reader`  | Excel/CSV → object array: sheet pick, skip N rows, key names, size limit; XLSX lazy-loaded. [components-input.md](components-input.md) |
+
+## 4) scripts/componentTable.js — V3: componentTable-3.0.js (§4b)
+
+| Line | Component    | Purpose                                                                                                                                                                                           |
+| ---: | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|    1 | `f-table`    | The only data table (CRUD and readonly): search, select, CRUD (`update-api`, `update-form`), export, auto headers when `headers` omitted, sum row/line via `sumFormat` (object/string), `:height` |
+|  416 | `t-html`     | HTML cell                                                                                                                                                                                         |
+|  420 | `t-label`    | Text cell                                                                                                                                                                                         |
+|  424 | `t-num`      | Number cell                                                                                                                                                                                       |
+|  442 | `t-time`     | Time cell                                                                                                                                                                                         |
+|  452 | `t-boolean`  | Bool icon/color                                                                                                                                                                                   |
+|  473 | `t-check`    | Checkbox cell                                                                                                                                                                                     |
+|  501 | `t-text`     | Inline text input                                                                                                                                                                                 |
+|  523 | `t-select`   | Inline select                                                                                                                                                                                     |
+|  544 | `t-combobox` | Inline combobox                                                                                                                                                                                   |
+|  616 | `t-menu`     | Action menu cell                                                                                                                                                                                  |
+|  654 | `t-link`     | Link / open-dialog cell                                                                                                                                                                           |
+|  678 | `t-button`   | Action button cell                                                                                                                                                                                |
+
+**`f-table` `:height`** — computed `heightNum`/`tableHeight` + `updateFillHeight()`: empty = grows with rows; `<=0` = measures real `getBoundingClientRect()`, fills to screen bottom leaving `abs(n)` px (`window.resize` listener); `>0` = fixed px.
+
+## 4b) scripts/componentTable-3.0.js
+
+**V3** (Vue 3 + Vuetify 3) of the same components, PascalCase names (`FTable`, `THtml`, `TNum`, ...). Module framework (`_moduleInfo.json`) picks the file.
+
+When editing **both** files:
+
+- Lifecycle: V3 `beforeUnmount` (components declare both to run on V2 and V3).
+- Classes: V3 `text-primary` / `text-subtitle-1` / `text-caption` vs V2 `primary--text` / `subtitle-1` / `caption`; `v-btn outlined` (V2) → `variant="outlined"` (V3).
+- `v-data-table` scroll wrapper: V2 `.v-data-table__wrapper`, V3 `.v-table__wrapper`.
+- Names bound directly in a V3 template **must not start with `_`** (proxy `has` trap) — use a suffix, e.g. `hideDefaultFooter_cacl`.
+- `f-table` `headers`: V2 `{ text, value }`, V3 `{ title, key }`; slot `body.append` gets `{ headers }` (V2) / `{ columns }` (V3).
+
+Verify V3 behavior with `fui module simulate --render` on a V3 module, or `fui component preview` for one component.
+
+## 5) scripts/fsheet.js — shared V2 + V3
+
+Whole `f-sheet` in **one file** for V2 and V3 (declares both `beforeDestroy` and `beforeUnmount`); not split by framework.
+
+Required imports (from `component.js` `defaultControlAttr["f-sheet"].import`), **in this order**:
+
+```
+/include/ag-grid/ag-grid-community.min.js
+/include/ag-grid/fsheet.js
+```
+
+| Content                                                                                                  | Notes                                                                                                                                                                 |
+| -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Vue.component('FSheet', {...})`                                                                         | Main component — props/columns/API: [fsheet.md](fsheet.md)                                                                                                            |
+| 4 cell renderers (`fsHtmlCellRenderer`/`fsLinkCellRenderer`/`fsButtonCellRenderer`/`fsMenuCellRenderer`) | = `f-table`'s `t-html`/`t-link`/`t-button`/`t-menu` — [fsheet.md](fsheet.md)                                                                                          |
+| Custom range selection + fill handle + TSV clipboard                                                     | AG Grid Community lacks Cell Selection (Enterprise), so f-sheet drives it and applies AG Grid classes (`.ag-cell-range-*`, `.ag-selection-fill-*`, `.ag-fill-handle`) |
+
+`:height` has the same 3 modes (auto-grow / fill to bottom / fixed px) — [fsheet.md](fsheet.md) §`:height`.
+
+Verify `fsheet.js`: `fui component preview` (isolated `f-sheet` with sample data, no push) or `fui module simulate --render` (in a real module) — both real browser, no extra harness.
+
+## 6) Lookup by task
+
+> Files listed are V2; for **V3** use the matching `-3.0` file.
+
+| Task                                        | Open first                              | Look at                                                                                   |
+| ------------------------------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------- |
+| Layout renders wrong                        | `fastproject.js`                        | `buildModuleUI`, `buildControl`, `bindData`                                               |
+| Action not running / wrong branch           | `fastproject.js`                        | `runAction`, `vueAction`, `mapData`, `getVueData`                                         |
+| API returns no `OUT`                        | `fastproject.js` + `defaultfunction.js` | `callAPI`, `fixURL`, `ajaxCALL`                                                           |
+| Table Add/Edit/Delete fails                 | `componentTable.js`                     | `f-table` + `update-api`, `update-form`                                                   |
+| Dynamic dialog not binding                  | `component.js`                          | `f-dialog`, `buildModuleUI` (fastproject)                                                 |
+| Image upload/crop/save                      | `component.js`                          | `f-image-update`                                                                          |
+| Excel/PDF export                            | `defaultfunction.js` + `component.js`   | `jsonToExcel`, `printPDF`, `f-pdfmake`, `f-excel-reader`                                  |
+| Login/rights/menu                           | `fastproject.js` + `defaultfunction.js` | `loadModuleInfo`, `loginFUN`, `rightTest`                                                 |
+| `f-sheet` missing / "FSheet is not defined" | `fsheet.js` (shared V2+V3)              | Missing import — [component-quickref.md](component-quickref.md) or [fsheet.md](fsheet.md) |