@fui-org/fui-cli 1.3.1 → 2.0.0

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

@@ -1,321 +0,0 @@
-# FUI Cross-window Patterns — openWindow & data exchange
-
-> Owns: **`openWindow`, cross-window data exchange (`#PARENT`/`#Win`), `set.menu` for child modules, `onclose`**.
-
-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. openWindow
-
-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",
-    "height": "`600px",
-    "onclose": {
-      "CALL": "reloadData"
-    }
-  }
-}
-```
-
-| 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                                      |
-
-> **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 another window:**
-
-```json
-"onclose": {
-  "#Win1": { "CALL": "cmdThongBao" }
-}
-```
-
-> When Win2 closes → runs `cmdThongBao` in Win1 (not the current window).
-
----
-
-## 2. Cross-window data exchange
-
-`#PARENT` and `#WinID` exchange data between windows (iframes). Works same-domain and cross-domain (via `postMessage`).
-
-### Read (value position)
-
-```json
-"data": [
-  {
-    "sUserID":      "#PARENT.sUserID",
-    "sFullName":    "#PARENT.sFullName",
-    "dataFromWin1": "#Win1.apiChart"
-  }
-]
-```
-
-| Syntax            | Meaning                                    |
-| ----------------- | ------------------------------------------ |
-| `"#PARENT.field"` | Read `vueData.field` from parent           |
-| `"#Win1.field"`   | Read `vueData.field` from iframe id `Win1` |
-
-### Write (key position)
-
-```json
-"data": [
-  {
-    "#PARENT.abcdef": 1234567890,
-    "#Win1.dulieuTuForm2": "`huynh cao tuan"
-  }
-]
-```
-
-```json
-":action": {
-  "#PARENT.val4": "DauRaTuCauTruc_IN"
-}
-```
-
-| Syntax                   | Meaning                           |
-| ------------------------ | --------------------------------- |
-| `"#PARENT.field": value` | Write to parent's `vueData.field` |
-| `"#Win1.field": value`   | Write to Win1's `vueData.field`   |
-
-### Call an action in another window
-
-```json
-":action": {
-  "#PARENT": { "CALL": "cmdSETData" }
-}
-```
-
-```json
-"#Win1": { "CALL": "cmdThongBao" }
-```
-
-- `"#PARENT"` (no field) with an action value → `runAction(value)` in parent
-- `"#Win1"` with an action value → `runAction(value)` in Win1
-
-### Receive data passed by openWindow
-
-Parent opens child with `"data": "sourceData"`:
-
-```json
-"data": [
-  {
-    "LayDuLieuWinCha": "#PARENT.Win1"
-  }
-]
-```
-
-> `#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
-
-**Parent (ex-v3-1SetData):**
-
-```json
-":action": {
-  "FUN": "openWindow",
-  "IN": {
-    "id":   "`Win1",
-    "url":  "`/ex/ex-v3-2CauTruc",
-    "data": "danhSachChoTable"
-  }
-}
-```
-
-**Child (ex-v3-2CauTruc):**
-
-```json
-"data": [
-  {
-    "IF": "typeof menu != 'undefined' && menu=='0'",
-    "THEN": { "v_Set.menu": false }
-  },
-  {
-    "LayDuLieuWinCha":    "#PARENT.Win1",
-    "GiaTriTuCHA.thu.xem": "#PARENT.val7",
-    "GiaTriSetTuCHA":      null
-  }
-]
-```
-
-> Put `#PARENT.*` BEFORE startup CALLs so data is ready before the first API runs.
-
----
-
-## 3. Sub-window checklist
-
-A module opened via `openWindow` needs:
-
-- `"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
-"set": { "menu": false },
-"data": [
-  { "ContestID": null },
-  {
-    "getDetail": {
-      "API": "/SM_Contest_Detail",
-      "IN": { "ContestID": "ContestID" },
-      "OUT": "dsDetail"
-    }
-  },
-  { "CALL": "getDetail" }
-]
-// ContestID tự động inject từ URL ?ContestID=xxx trước khi data[] chạy
-```
-
----
-
-## 4. Complete parent ↔ child example (`ex-v3-1SetData` → `ex-v3-2CauTruc`)
-
-Standard: **parent opens child via `openWindow` passing table data; child reads/writes/calls back up to parent.**
-
-### 4.1 Parent — f-table + open button, pass `data`
-
-`openWindow.IN.data` passes an object/array (here table list `danhSachChoTable`) to the child; child reads `#PARENT.<id>`.
-
-```json
-{
-  "el": "f-table",
-  "attr": {
-    "label": "Danh sách",
-    ":items": "danhSachChoTable",
-    ":headers": [
-      { "text": "STT", "value": "STT" },
-      { "text": "Họ",  "value": "ho" },
-      { "text": "Tên", "value": "ten" }
-    ]
-  },
-  "w": "6"
-},
-{
-  "el": "f-button",
-  "attr": {
-    "label": "Open Window",
-    ":action": {
-      "FUN": "openWindow",
-      "IN": {
-        "id": "`Win1",
-        "title": "`Chỉnh sửa cho module",
-        "url": "`/ex/ex-v3-2CauTruc",
-        "data": "danhSachChoTable"
-      }
-    }
-  },
-  "w": "3"
-}
-```
-
-Parent can also declare **named actions** for the child to call, and write into the child from `data[]`:
-
-```json
-"data": [
-  { "#PARENT.abcdef": 1234567890, "#Win1": { "CALL": "cmdTHONGBao" } },
-  {
-    "cmdSETData": [
-      { "MESS": "Lệnh của form CHA được gọi từ form CON" },
-      { "#Win1.GiaTriSetTuCHA": "Giá trị set từ CHA" }
-    ]
-  }
-]
-```
-
-### 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
-"data": [
-  {
-    "LayDuLieuWinCha": "#PARENT.Win1",   // = data cha đã truyền qua openWindow (id=Win1)
-    "GiaTriTuCHA.thu.xem": "#PARENT.val7",
-    "GiaTriSetTuCHA": null
-  }
-],
-"set": { "menu": false, "login": false }
-```
-
-```json
-// Các nút trong controls của con:
-{ "el": "f-button", "attr": { "label": "Lấy dữ liệu từ cha",
-  ":action": { "USERINFO": "#PARENT.val4" } } },
-
-{ "el": "f-button", "attr": { "label": "Set dữ liệu xuống cha",
-  ":action": { "#PARENT.val4": "DauRaTuCauTruc_IN" } } },
-
-{ "el": "f-button", "attr": { "label": "Gọi lệnh ở cha",
-  ":action": { "#PARENT": { "CALL": "cmdSETData" } } } },
-
-{ "el": "f-button", "attr": { "label": "Mở thêm form con",
-  ":action": { "FUN": "openWindow", "IN": {
-    "id": "`Win2",
-    "url": "`https://fui.vn/ex/ex-v3-1SetData",
-    "onclose": { "#Win1": { "CALL": "cmdThongBaoCuaFormNay" } }
-  } } } }
-```
-
-**Syntax summary (value = read, key = write):**
-
-| 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`)         |
-
-> Works **same-domain and cross-domain** (runtime uses `postMessage` across domains).
-
----
-
-## 5. f-table / f-sheet + detail window
-
-Common: list table → click a row → open child window to view/edit that row.
-
-- 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",
-  "attr": {
-    "icon-text": "mdi-eye",
-    "color": "primary",
-    ":action": {
-      "FUN": "openWindow",
-      "IN": {
-        "id": "`WinDetail",
-        "title": "`Chi tiết",
-        "url": "`/DetailModule?RecordID={{item.ID}}",
-        "onclose": { "CALL": "reloadList" }
-      }
-    }
-  }
-}
-```
-
-- **`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-cli/references/ui-dialog-patterns.md

@@ -1,255 +0,0 @@
-# FUI Dialog Patterns — manual v-dialog (STANDARD), hidden-container, checkbox-list
-
-> 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).
-
-From **security-manager** and demo **ex-v3-dialog**.
-
-> **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.
-
-> 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` — compact dialog component (secondary)
-
-`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
-    "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": "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"
-        }
-      }
-    ],
-    ":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 }] }
-    ]
-  }
-}
-```
-
-| 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` |
-
-**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. Manual v-dialog in hidden-container (STANDARD)
-
-Dialogs always live in their own container with `prop: "hidden-container"` — never inside the main rows.
-
-```json
-{
-  "prop": "hidden-container",
-  "rows": [
-    {
-      "prop": "",
-      "cols": [
-        {
-          "el": "v-dialog",
-          "attr": {
-            "v-model": "dlUserInfo",
-            "width": 650
-          },
-          "innerHTML": [
-            {
-              "el": "v-card",
-              "attr": { "class": "pa-0" },
-              "innerHTML": [
-                {
-                  "el": "v-toolbar",
-                  "attr": { "dense": "", "flat": "" },
-                  "innerHTML": [
-                    { "el": "v-toolbar-title", "attr": {}, "innerHTML": "Update User Info" },
-                    { "el": "v-spacer", "attr": {} },
-                    {
-                      "el": "v-btn",
-                      "innerHTML": "<v-icon>mdi-close</v-icon>",
-                      "attr": { "icon": "", "v-on:click": "vueData.dlUserInfo = false" }
-                    }
-                  ]
-                },
-                {
-                  "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-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",
-                        "icon-text": "mdi-content-save",
-                        ":action": {
-                          "API": "SM_Users_Update",
-                          "IN": { "UserID": "sUserID", "UserName": "sUserName" },
-                          "CALLBACK": [
-                            { "MESS": "Cập nhật thành công." },
-                            { "dlUserInfo": false },
-                            { "CALL": "getUser" }
-                          ]
-                        }
-                      }
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
-```
-
-**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. Open dialog with row data
-
-Two steps: copy data into state → set `dlXxx = true`.
-
-**From menuChucNang:**
-
-```json
-"action": [
-  {
-    "addNew": 0,
-    "dongChon": "item",
-    "sUserID":    "item.UserID",
-    "sUserName":  "item.UserName",
-    "sLastName":  "item.LastName"
-  },
-  { "dlUserInfo": true }
-]
-```
-
-**From f-button:**
-
-```json
-":action": [
-  { "addNew": 1, "sUserID": "", "sUserName": "" },
-  { "dlUserInfo": true }
-]
-```
-
-> `addNew: 0` = edit, `addNew: 1` = new. In the dialog use `:disabled="addNew==0"` to lock the ID field on edit.
-
----
-
-## 3. Checkbox-list dialog
-
-Dialog with a checkbox list for multi-select, saving on each click.
-
-```json
-{
-  "el": "v-card-text",
-  "attr": {},
-  "innerHTML": [
-    {
-      "el": "v-layout",
-      "attr": { "class": "fluid row justify-center grid-list-lg fill-height mt-3" },
-      "innerHTML": [
-        {
-          "el": "div",
-          "attr": { "v-for": "fc in vueData.dsFunctionRight", ":key": "fc.FunctionID" },
-          "innerHTML": [
-            {
-              "el": "v-checkbox",
-              "attr": {
-                "color": "primary",
-                "v-model": "sFunctionSelected",
-                ":value": "`${fc.FunctionID}`",
-                ":label": "`${fc.FunctionName}`",
-                "v-on:click": "CALL(saveFunction)"
-              }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
-```
-
-> `v-on:click` on the checkbox → saves immediately, no Save button. `v-model` holds an array; `:value` uses a backtick literal.