@fui-org/fui-cli 2.1.3 → 2.2.0

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

@@ -1,176 +1,176 @@
-# FUI Layout Patterns — page-container, master-detail, switch, dynamic label
-
-> Owns: **page layout patterns: sticky page-container, 2-column master-detail, v-switch, date init, dynamic label**.
-
-Layout and helper-control patterns, drawn from project **security-manager**. See also: [ui-patterns.md](ui-patterns.md), [ui-table-cell-patterns.md](ui-table-cell-patterns.md), [module-structure.md](module-structure.md).
-
----
-
-## 1. Date init with moment()
-
-```json
-"data": [
-  {
-    "TuNgay":  "moment().format('YYYY-MM-DD')",
-    "DenNgay": "moment().format('YYYY-MM-DD')"
-  }
-]
-```
-
-> The value is a JS expression string, eval'd at init. `moment()` is available in the FUI runtime.
-
----
-
-## 2. page-container + page-navigation
-
-Use for a fixed filter bar on top with scrolling content below.
-
-```json
-{
-  "prop": "page-container grid-list-md fluid",
-  "rows": [
-    {
-      "prop": "page-navigation",
-      "cols": [
-        { "el": "f-date", "attr": { "v-model": "TuNgay", "label": "Từ ngày", "date-add": 0 }, "w": "2" },
-        { "el": "f-date", "attr": { "v-model": "DenNgay", "label": "Tới ngày", "date-add": 0 }, "w": "2" },
-        {
-          "el": "f-button",
-          "attr": {
-            "color": "primary",
-            "icon-text": "mdi-filter",
-            "label": "Tìm",
-            ":action": { "CALL": "getLogData" }
-          },
-          "w": 3
-        }
-      ]
-    },
-    {
-      "prop": "",
-      "cols": [{ "el": "f-table", "attr": { "label": "Log viewer", ":items": "LogData" } }]
-    }
-  ]
-}
-```
-
-- `page-container` + `page-navigation` → sticky top filter bar
-- `f-table` without `:update-api` → readonly; without `:headers` → headers auto-built from data
-
----
-
-## 3. Dynamic label from state
-
-Use `:label` with an expression to show context.
-
-```json
-{
-  "el": "f-title",
-  "attr": {
-    ":label": "sFullName + ` - ` + sDepartment"
-  }
-}
-```
-
-```json
-{
-  "el": "f-table",
-  "attr": {
-    ":label": "`${fTableTitle==''? 'Computer list' : fTableTitle}`"
-  }
-}
-```
-
----
-
-## 4. v-switch — toggle with label
-
-```json
-{
-  "el": "v-layout",
-  "attr": {},
-  "innerHTML": [
-    {
-      "el": "v-switch",
-      "attr": {
-        "v-model": "switchResetPassword",
-        ":required": false,
-        "label": "Đặt lại mật khẩu"
-      },
-      "w": "12"
-    }
-  ]
-}
-```
-
-Combine with `v-if` to show/hide extra fields:
-
-```json
-{
-  "el": "v-layout",
-  "attr": { "v-if": "switchResetPassword" },
-  "innerHTML": [...]
-}
-```
-
----
-
-## 5. Two-column master-detail
-
-Left table row pick → watch → load right table. No new window needed.
-
-> Detail button in a table cell: choose `t-button` vs `t-menu` per [ui-table-cell-patterns.md](ui-table-cell-patterns.md) — for master-detail the action is "view/load related data", so use `t-button`.
-
-**`data[]` and watch:**
-
-```json
-"data": [
-  { "dsParent": [], "dsDetail": [], "selectedId": null },
-  {
-    "getParent": { "API": "/SM_Parent_Select", "OUT": "dsParent" },
-    "getDetail": {
-      "API": "/SM_Detail_Select",
-      "IN": { "ParentID": "selectedId" },
-      "OUT": "dsDetail"
-    }
-  },
-  { "CALL": "getParent" }
-],
-"watch": {
-  "selectedId": { "CALL": "getDetail" }
-}
-```
-
-**`t-button` column in the left table:**
-
-```json
-{
-  "text": "Chi tiết",
-  "value": "ParentID",
-  "align": "center",
-  "el": "t-button",
-  "attr": {
-    "icon-text": "mdi-eye",
-    "color": "primary",
-    ":outlined": true,
-    ":action": { "selectedId": "item.ParentID" }
-  }
-}
-```
-
-**2-column layout:**
-
-```json
-{
-  "prop": "fluid grid-list-md",
-  "rows": [
-    {
-      "prop": "row wrap",
-      "cols": [
-        { "w": 5, "el": "f-table", "attr": { ":items": "dsParent", "item-key": "ParentID", ":headers": [...] } },
-        { "w": 7, "el": "f-table", "attr": { ":items": "dsDetail", "item-key": "DetailID", ":headers": [...] } }
-      ]
-    }
-  ]
-}
-```
+# FUI Layout Patterns — page-container, master-detail, switch, dynamic label
+
+> Owns: **page layout patterns: sticky page-container, 2-column master-detail, v-switch, date init, dynamic label**.
+
+Layout and helper-control patterns, drawn from project **security-manager**. See also: [ui-patterns.md](ui-patterns.md), [ui-table-cell-patterns.md](ui-table-cell-patterns.md), [module-structure.md](module-structure.md).
+
+---
+
+## 1. Date init with moment()
+
+```json
+"data": [
+  {
+    "TuNgay":  "moment().format('YYYY-MM-DD')",
+    "DenNgay": "moment().format('YYYY-MM-DD')"
+  }
+]
+```
+
+> The value is a JS expression string, eval'd at init. `moment()` is available in the FUI runtime.
+
+---
+
+## 2. page-container + page-navigation
+
+Use for a fixed filter bar on top with scrolling content below.
+
+```json
+{
+  "prop": "page-container grid-list-md fluid",
+  "rows": [
+    {
+      "prop": "page-navigation",
+      "cols": [
+        { "el": "f-date", "attr": { "v-model": "TuNgay", "label": "Từ ngày", "date-add": 0 }, "w": "2" },
+        { "el": "f-date", "attr": { "v-model": "DenNgay", "label": "Tới ngày", "date-add": 0 }, "w": "2" },
+        {
+          "el": "f-button",
+          "attr": {
+            "color": "primary",
+            "icon-text": "mdi-filter",
+            "label": "Tìm",
+            ":action": { "CALL": "getLogData" }
+          },
+          "w": 3
+        }
+      ]
+    },
+    {
+      "prop": "",
+      "cols": [{ "el": "f-table", "attr": { "label": "Log viewer", ":items": "LogData" } }]
+    }
+  ]
+}
+```
+
+- `page-container` + `page-navigation` → sticky top filter bar
+- `f-table` without `:update-api` → readonly; without `:headers` → headers auto-built from data
+
+---
+
+## 3. Dynamic label from state
+
+Use `:label` with an expression to show context.
+
+```json
+{
+  "el": "f-title",
+  "attr": {
+    ":label": "sFullName + ` - ` + sDepartment"
+  }
+}
+```
+
+```json
+{
+  "el": "f-table",
+  "attr": {
+    ":label": "`${fTableTitle==''? 'Computer list' : fTableTitle}`"
+  }
+}
+```
+
+---
+
+## 4. v-switch — toggle with label
+
+```json
+{
+  "el": "v-layout",
+  "attr": {},
+  "innerHTML": [
+    {
+      "el": "v-switch",
+      "attr": {
+        "v-model": "switchResetPassword",
+        ":required": false,
+        "label": "Đặt lại mật khẩu"
+      },
+      "w": "12"
+    }
+  ]
+}
+```
+
+Combine with `v-if` to show/hide extra fields:
+
+```json
+{
+  "el": "v-layout",
+  "attr": { "v-if": "switchResetPassword" },
+  "innerHTML": [...]
+}
+```
+
+---
+
+## 5. Two-column master-detail
+
+Left table row pick → watch → load right table. No new window needed.
+
+> Detail button in a table cell: choose `t-button` vs `t-menu` per [ui-table-cell-patterns.md](ui-table-cell-patterns.md) — for master-detail the action is "view/load related data", so use `t-button`.
+
+**`data[]` and watch:**
+
+```json
+"data": [
+  { "dsParent": [], "dsDetail": [], "selectedId": null },
+  {
+    "getParent": { "API": "/SM_Parent_Select", "OUT": "dsParent" },
+    "getDetail": {
+      "API": "/SM_Detail_Select",
+      "IN": { "ParentID": "selectedId" },
+      "OUT": "dsDetail"
+    }
+  },
+  { "CALL": "getParent" }
+],
+"watch": {
+  "selectedId": { "CALL": "getDetail" }
+}
+```
+
+**`t-button` column in the left table:**
+
+```json
+{
+  "text": "Chi tiết",
+  "value": "ParentID",
+  "align": "center",
+  "el": "t-button",
+  "attr": {
+    "icon-text": "mdi-eye",
+    "color": "primary",
+    ":outlined": true,
+    ":action": { "selectedId": "item.ParentID" }
+  }
+}
+```
+
+**2-column layout:**
+
+```json
+{
+  "prop": "fluid grid-list-md",
+  "rows": [
+    {
+      "prop": "row wrap",
+      "cols": [
+        { "w": 5, "el": "f-table", "attr": { ":items": "dsParent", "item-key": "ParentID", ":headers": [...] } },
+        { "w": 7, "el": "f-table", "attr": { ":items": "dsDetail", "item-key": "DetailID", ":headers": [...] } }
+      ]
+    }
+  ]
+}
+```