@fui-org/fui-cli 2.1.4 → 2.2.0

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

@@ -1,255 +1,255 @@
-# 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.
+# 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.