@fui-org/fui-cli 2.1.3 → 2.2.0

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

@@ -1,318 +1,318 @@
-# FUI Table Cell Patterns — f-table & in-cell controls
-
-> Owns: **in-cell `f-table` controls (`t-*`), `ctrl-update`, show-select, chip-group, `t-button` vs `t-menu`**. Table props: [component-table.md](component-table.md).
-
-Patterns for `f-table` and in-cell controls (`t-check`, `t-button`, `t-select`, `t-menu`, `ctrl-update`, `show-select`, `v-chip-group`), from project **security-manager**.
-
-> See also: [ui-patterns.md](ui-patterns.md) (data/watch/toolbar), [ui-dialog-patterns.md](ui-dialog-patterns.md), [component-table.md](component-table.md).
-
----
-
-## 1. Basic f-table with fixed header
-
-```json
-{
-  "el": "f-table",
-  "attr": {
-    "label": "User list",
-    ":items-per-page": 50,
-    ":height": -16,
-    ":items": "dsUser",
-    "item-key": "UserID",
-    ":hide-default-footer": false,
-    ":item-class": "item => item.ChuaKichHoat>0 ? 'danger' : ''",
-    ":headers": [
-      { "align": "center", "text": "UserID", "value": "UserID" },
-      { "text": "Username", "value": "UserName" },
-      { "text": "Fullname", "value": "FullName" }
-    ]
-  },
-  "w": 12
-}
-```
-
-- **Table height RULE (lint D9)**: the module's main data table declares `":height": -16` — f-table **measures its real position** after layout (`getBoundingClientRect().top`), fills to the screen bottom leaving 16px, and enables `fixed-header`. Data scrolls **inside the table** only, header stays put, no nested page scrollbars. Updates on window resize and when `items` changes.
-
-  | `:height`   | Behavior                                                                                              |
-  | ----------- | ----------------------------------------------------------------------------------------------------- |
-  | _(omitted)_ | Grows with row count — intentional short/lookup tables; wrong for the main table (whole page scrolls) |
-  | `<= 0`      | Fill to bottom leaving `abs(height)` px — **standard for main table**                                 |
-  | `> 0`       | Fixed px — **table inside a dialog** (e.g. `":height": 360`)                                          |
-
-  Same three modes apply to `f-sheet` — see [fsheet.md](fsheet.md) §Height.
-
-  ⚠ Old pattern `":height": "$( window ).height()-285"` is **deprecated** — it forces guessing total toolbar/filter/menu height; wrong guess = short or overflowing. It returns a **positive** number so it still works as fixed px (doesn't break) but loses auto-measure; lint D9 warns so you replace it with `-16`.
-
-- `:item-class`: conditional row highlight — `"item => item.Active==0 ? 'danger' : ''"`
-
----
-
-## 2. t-check — toggle in cell
-
-In `headers`, renders a checkbox/icon toggle that fires an API on click.
-
-```json
-{
-  "text": "Active",
-  "value": "Enable",
-  "align": "center",
-  "el": "t-check",
-  "attr": {
-    "on-icon": "mdi-check",
-    "off-icon": "mdi-lock",
-    ":action": [
-      { "API": "/SM_Users_SetActive", "IN": { "UserID": "item.UserID" } },
-      { "dsUser": [] },
-      { "CALL": "getUser" }
-    ]
-  }
-}
-```
-
----
-
-## 3. t-button — button in cell
-
-Button/icon with an action in a cell; supports dynamic icons.
-
-```json
-{
-  "text": "Allow",
-  "value": "Locked",
-  "align": "center",
-  "el": "t-button",
-  "attr": {
-    "color": "primary",
-    ":outlined": false,
-    ":icon-text": "`${ item.Locked==0 ? 'mdi-check-bold':'mdi-lock'}`",
-    ":action": [
-      { "API": "/SM_Computer_SetLocked", "IN": { "ComputerID": "item.ComputerID" } },
-      { "dsComputer": [] },
-      { "CALL": "getComputer" }
-    ]
-  }
-}
-```
-
----
-
-## 4. t-select — inline dropdown in cell
-
-Edit a field in the table; fires an API on selection.
-
-```json
-{
-  "text": "SystemRight",
-  "value": "SysRight",
-  "el": "t-select",
-  "width": "250px",
-  "attr": {
-    "class": "flex-md-grow-0 my-2",
-    ":items": "vueData.dsSystemRight",
-    "item-text": "Note",
-    "item-value": "SysRight",
-    ":action": [
-      {
-        "CONFIRM": "Bạn có chắc cập nhật System Right cho user này không?",
-        "API": "/SM_UserModule_UpdateSystemRight",
-        "IN": {
-          "ModuleID": "sModuleID",
-          "UserID": "item.UserID",
-          "SysRight": "item.SysRight"
-        },
-        "CALLBACK": { "MESS": "Cập nhật thành công." }
-      }
-    ]
-  }
-}
-```
-
----
-
-## 5. t-menu — context menu in table (menuChucNang)
-
-Define menu items in `data[]`, reference via `t-menu` in headers.
-
-**Step 1 — `menuChucNang` in `data[]`:**
-
-```json
-{
-  "menuChucNang": [
-    {
-      "color": "primary",
-      "icon-text": "mdi-account-details",
-      "text": "Update Info",
-      "action": [
-        {
-          "addNew": 0,
-          "dongChon": "item",
-          "sUserID": "item.UserID",
-          "sUserName": "item.UserName",
-          "sLastName": "item.LastName",
-          "sFirstName": "item.FirstName"
-        },
-        { "dlUserInfo": true }
-      ]
-    },
-    {
-      "color": "primary",
-      "icon-text": "mdi-shield-account-outline",
-      "text": "User Permission",
-      "action": [
-        {
-          "dongChon": "item",
-          "sUserID": "item.UserID",
-          "sFullName": "item.FullName"
-        },
-        {
-          "FUN": "openWindow",
-          "IN": {
-            "id": "`WinPer",
-            "title": "`User Permission",
-            "url": "`/UserPermission"
-          }
-        }
-      ]
-    }
-  ]
-}
-```
-
-**Step 2 — `t-menu` in `headers`:**
-
-```json
-{
-  "el": "t-menu",
-  "width": "120px",
-  "align": "center",
-  "text": "Update",
-  "value": "Update",
-  "attr": { ":items": "vueData.menuChucNang" }
-}
-```
-
-- `"dongChon": "item"` — stores the current record in `dongChon`
-- `"sUserID": "item.UserID"` etc. — copy item fields into state
-- `{ "dlXxx": true }` — open the dialog after state is ready
-
----
-
-## 6. ctrl-update CRUD
-
-CRUD directly in the table — no manual dialog.
-
-```json
-{
-  "el": "f-table",
-  "attr": {
-    ":items": "dsFunctionRight",
-    "item-key": "FunctionID",
-    ":headers": [
-      { "text": "Code", "value": "FunctionCode" },
-      { "text": "Name", "value": "FunctionName" },
-      { "text": "Update", "value": "ctrl-update" }
-    ],
-    ":update-form": [
-      {
-        "el": "v-text-field",
-        "w": 12,
-        "attr": { "v-model": "FunctionCode", "label": "Function Code", ":required": true }
-      },
-      {
-        "el": "v-text-field",
-        "w": 12,
-        "attr": { "v-model": "FunctionName", "label": "Function Name" }
-      }
-    ],
-    ":update-api": {
-      "new": {
-        "API": "/SM_Function_Insert",
-        "IN": { "ModuleID": "sModuleID", "FunctionCode": "item.FunctionCode", "FunctionName": "item.FunctionName" },
-        "CALLBACK": { "CALL": "getFunctionRight" }
-      },
-      "edit": {
-        "API": "/SM_Function_Update",
-        "IN": {
-          "FunctionID": "item.FunctionID",
-          "FunctionCode": "item.FunctionCode",
-          "FunctionName": "item.FunctionName"
-        },
-        "CALLBACK": { "CALL": "getFunctionRight" }
-      },
-      "delete": {
-        "CONFIRM": "Bạn có chắc muốn xóa quyền này không?",
-        "API": "/SM_Function_Delete",
-        "IN": { "FunctionID": "item.FunctionID" },
-        "CALLBACK": [{ "MESS": "Xóa thành công" }, { "CALL": "getFunctionRight" }]
-      }
-    }
-  }
-}
-```
-
-Use ctrl-update for simple edit forms (2–5 fields) with no complex layout.
-
----
-
-## 7. f-table with show-select (multi-select)
-
-```json
-{
-  "el": "f-table",
-  "attr": {
-    ":show-select": true,
-    "v-model": "sUserSelected",
-    ":items": "dsUsers",
-    "item-key": "UserID",
-    ":items-per-page": -1,
-    ":hide-default-footer": true,
-    ":update-api": { "default-item": { "xAA": [] } },
-    ":headers": [...]
-  }
-}
-```
-
-- `v-model`: array of selected items
-- `:update-api.default-item`: injects default fields into each item on load (here `xAA: []` for chip-group)
-
----
-
-## 8. v-chip-group in cell
-
-Tag list in a cell; click opens a dialog.
-
-```json
-{
-  "text": "FunctionRight",
-  "value": "FunctionName",
-  "el": "v-chip-group",
-  "attr": {
-    "v-model": "item.xAA",
-    "column": true,
-    "v-if": "item.FunctionName"
-  },
-  "innerHTML": [
-    {
-      "el": "v-chip",
-      "attr": {
-        ":small": true,
-        "color": "primary",
-        "outlined": "",
-        "v-for": "fn in item.FunctionName",
-        ":key": "fn",
-        "v-on:click": "vueData.dlFunction = true; CALL(setFunction(item, item.FunctionName));"
-      },
-      "innerHTML": "<div>{{fn.FunctionCode}}-{{fn.FunctionName}}</div>"
-    }
-  ]
-}
-```
-
----
-
-## `t-button` vs `t-menu`
-
-- **`t-button`**: the only action is viewing/loading related data → one direct click
-- **`t-menu`**: several actions **or** a state-changing action (Kích hoạt, Chốt điểm, Xóa...)
-
-> Don't wrap "Xem chi tiết" in `t-menu` — adds a wasted click; use `t-button`. See Master-Detail in [ui-layout-patterns.md](ui-layout-patterns.md).
+# FUI Table Cell Patterns — f-table & in-cell controls
+
+> Owns: **in-cell `f-table` controls (`t-*`), `ctrl-update`, show-select, chip-group, `t-button` vs `t-menu`**. Table props: [component-table.md](component-table.md).
+
+Patterns for `f-table` and in-cell controls (`t-check`, `t-button`, `t-select`, `t-menu`, `ctrl-update`, `show-select`, `v-chip-group`), from project **security-manager**.
+
+> See also: [ui-patterns.md](ui-patterns.md) (data/watch/toolbar), [ui-dialog-patterns.md](ui-dialog-patterns.md), [component-table.md](component-table.md).
+
+---
+
+## 1. Basic f-table with fixed header
+
+```json
+{
+  "el": "f-table",
+  "attr": {
+    "label": "User list",
+    ":items-per-page": 50,
+    ":height": -16,
+    ":items": "dsUser",
+    "item-key": "UserID",
+    ":hide-default-footer": false,
+    ":item-class": "item => item.ChuaKichHoat>0 ? 'danger' : ''",
+    ":headers": [
+      { "align": "center", "text": "UserID", "value": "UserID" },
+      { "text": "Username", "value": "UserName" },
+      { "text": "Fullname", "value": "FullName" }
+    ]
+  },
+  "w": 12
+}
+```
+
+- **Table height RULE (lint D9)**: the module's main data table declares `":height": -16` — f-table **measures its real position** after layout (`getBoundingClientRect().top`), fills to the screen bottom leaving 16px, and enables `fixed-header`. Data scrolls **inside the table** only, header stays put, no nested page scrollbars. Updates on window resize and when `items` changes.
+
+  | `:height`   | Behavior                                                                                              |
+  | ----------- | ----------------------------------------------------------------------------------------------------- |
+  | _(omitted)_ | Grows with row count — intentional short/lookup tables; wrong for the main table (whole page scrolls) |
+  | `<= 0`      | Fill to bottom leaving `abs(height)` px — **standard for main table**                                 |
+  | `> 0`       | Fixed px — **table inside a dialog** (e.g. `":height": 360`)                                          |
+
+  Same three modes apply to `f-sheet` — see [fsheet.md](fsheet.md) §Height.
+
+  ⚠ Old pattern `":height": "$( window ).height()-285"` is **deprecated** — it forces guessing total toolbar/filter/menu height; wrong guess = short or overflowing. It returns a **positive** number so it still works as fixed px (doesn't break) but loses auto-measure; lint D9 warns so you replace it with `-16`.
+
+- `:item-class`: conditional row highlight — `"item => item.Active==0 ? 'danger' : ''"`
+
+---
+
+## 2. t-check — toggle in cell
+
+In `headers`, renders a checkbox/icon toggle that fires an API on click.
+
+```json
+{
+  "text": "Active",
+  "value": "Enable",
+  "align": "center",
+  "el": "t-check",
+  "attr": {
+    "on-icon": "mdi-check",
+    "off-icon": "mdi-lock",
+    ":action": [
+      { "API": "/SM_Users_SetActive", "IN": { "UserID": "item.UserID" } },
+      { "dsUser": [] },
+      { "CALL": "getUser" }
+    ]
+  }
+}
+```
+
+---
+
+## 3. t-button — button in cell
+
+Button/icon with an action in a cell; supports dynamic icons.
+
+```json
+{
+  "text": "Allow",
+  "value": "Locked",
+  "align": "center",
+  "el": "t-button",
+  "attr": {
+    "color": "primary",
+    ":outlined": false,
+    ":icon-text": "`${ item.Locked==0 ? 'mdi-check-bold':'mdi-lock'}`",
+    ":action": [
+      { "API": "/SM_Computer_SetLocked", "IN": { "ComputerID": "item.ComputerID" } },
+      { "dsComputer": [] },
+      { "CALL": "getComputer" }
+    ]
+  }
+}
+```
+
+---
+
+## 4. t-select — inline dropdown in cell
+
+Edit a field in the table; fires an API on selection.
+
+```json
+{
+  "text": "SystemRight",
+  "value": "SysRight",
+  "el": "t-select",
+  "width": "250px",
+  "attr": {
+    "class": "flex-md-grow-0 my-2",
+    ":items": "vueData.dsSystemRight",
+    "item-text": "Note",
+    "item-value": "SysRight",
+    ":action": [
+      {
+        "CONFIRM": "Bạn có chắc cập nhật System Right cho user này không?",
+        "API": "/SM_UserModule_UpdateSystemRight",
+        "IN": {
+          "ModuleID": "sModuleID",
+          "UserID": "item.UserID",
+          "SysRight": "item.SysRight"
+        },
+        "CALLBACK": { "MESS": "Cập nhật thành công." }
+      }
+    ]
+  }
+}
+```
+
+---
+
+## 5. t-menu — context menu in table (menuChucNang)
+
+Define menu items in `data[]`, reference via `t-menu` in headers.
+
+**Step 1 — `menuChucNang` in `data[]`:**
+
+```json
+{
+  "menuChucNang": [
+    {
+      "color": "primary",
+      "icon-text": "mdi-account-details",
+      "text": "Update Info",
+      "action": [
+        {
+          "addNew": 0,
+          "dongChon": "item",
+          "sUserID": "item.UserID",
+          "sUserName": "item.UserName",
+          "sLastName": "item.LastName",
+          "sFirstName": "item.FirstName"
+        },
+        { "dlUserInfo": true }
+      ]
+    },
+    {
+      "color": "primary",
+      "icon-text": "mdi-shield-account-outline",
+      "text": "User Permission",
+      "action": [
+        {
+          "dongChon": "item",
+          "sUserID": "item.UserID",
+          "sFullName": "item.FullName"
+        },
+        {
+          "FUN": "openWindow",
+          "IN": {
+            "id": "`WinPer",
+            "title": "`User Permission",
+            "url": "`/UserPermission"
+          }
+        }
+      ]
+    }
+  ]
+}
+```
+
+**Step 2 — `t-menu` in `headers`:**
+
+```json
+{
+  "el": "t-menu",
+  "width": "120px",
+  "align": "center",
+  "text": "Update",
+  "value": "Update",
+  "attr": { ":items": "vueData.menuChucNang" }
+}
+```
+
+- `"dongChon": "item"` — stores the current record in `dongChon`
+- `"sUserID": "item.UserID"` etc. — copy item fields into state
+- `{ "dlXxx": true }` — open the dialog after state is ready
+
+---
+
+## 6. ctrl-update CRUD
+
+CRUD directly in the table — no manual dialog.
+
+```json
+{
+  "el": "f-table",
+  "attr": {
+    ":items": "dsFunctionRight",
+    "item-key": "FunctionID",
+    ":headers": [
+      { "text": "Code", "value": "FunctionCode" },
+      { "text": "Name", "value": "FunctionName" },
+      { "text": "Update", "value": "ctrl-update" }
+    ],
+    ":update-form": [
+      {
+        "el": "v-text-field",
+        "w": 12,
+        "attr": { "v-model": "FunctionCode", "label": "Function Code", ":required": true }
+      },
+      {
+        "el": "v-text-field",
+        "w": 12,
+        "attr": { "v-model": "FunctionName", "label": "Function Name" }
+      }
+    ],
+    ":update-api": {
+      "new": {
+        "API": "/SM_Function_Insert",
+        "IN": { "ModuleID": "sModuleID", "FunctionCode": "item.FunctionCode", "FunctionName": "item.FunctionName" },
+        "CALLBACK": { "CALL": "getFunctionRight" }
+      },
+      "edit": {
+        "API": "/SM_Function_Update",
+        "IN": {
+          "FunctionID": "item.FunctionID",
+          "FunctionCode": "item.FunctionCode",
+          "FunctionName": "item.FunctionName"
+        },
+        "CALLBACK": { "CALL": "getFunctionRight" }
+      },
+      "delete": {
+        "CONFIRM": "Bạn có chắc muốn xóa quyền này không?",
+        "API": "/SM_Function_Delete",
+        "IN": { "FunctionID": "item.FunctionID" },
+        "CALLBACK": [{ "MESS": "Xóa thành công" }, { "CALL": "getFunctionRight" }]
+      }
+    }
+  }
+}
+```
+
+Use ctrl-update for simple edit forms (2–5 fields) with no complex layout.
+
+---
+
+## 7. f-table with show-select (multi-select)
+
+```json
+{
+  "el": "f-table",
+  "attr": {
+    ":show-select": true,
+    "v-model": "sUserSelected",
+    ":items": "dsUsers",
+    "item-key": "UserID",
+    ":items-per-page": -1,
+    ":hide-default-footer": true,
+    ":update-api": { "default-item": { "xAA": [] } },
+    ":headers": [...]
+  }
+}
+```
+
+- `v-model`: array of selected items
+- `:update-api.default-item`: injects default fields into each item on load (here `xAA: []` for chip-group)
+
+---
+
+## 8. v-chip-group in cell
+
+Tag list in a cell; click opens a dialog.
+
+```json
+{
+  "text": "FunctionRight",
+  "value": "FunctionName",
+  "el": "v-chip-group",
+  "attr": {
+    "v-model": "item.xAA",
+    "column": true,
+    "v-if": "item.FunctionName"
+  },
+  "innerHTML": [
+    {
+      "el": "v-chip",
+      "attr": {
+        ":small": true,
+        "color": "primary",
+        "outlined": "",
+        "v-for": "fn in item.FunctionName",
+        ":key": "fn",
+        "v-on:click": "vueData.dlFunction = true; CALL(setFunction(item, item.FunctionName));"
+      },
+      "innerHTML": "<div>{{fn.FunctionCode}}-{{fn.FunctionName}}</div>"
+    }
+  ]
+}
+```
+
+---
+
+## `t-button` vs `t-menu`
+
+- **`t-button`**: the only action is viewing/loading related data → one direct click
+- **`t-menu`**: several actions **or** a state-changing action (Kích hoạt, Chốt điểm, Xóa...)
+
+> Don't wrap "Xem chi tiết" in `t-menu` — adds a wasted click; use `t-button`. See Master-Detail in [ui-layout-patterns.md](ui-layout-patterns.md).