@fui-org/fui-cli 2.1.4 → 2.2.0

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

@@ -1,191 +1,191 @@
-# FUI Dialog & Overlay Components
-
-> Owns: **`f-dialog`, `f-window`, `f-editor`**. Hand-built dialog pattern (`v-dialog` + hidden-container): [ui-dialog-patterns.md](ui-dialog-patterns.md).
-
-Dialog, overlay and content-editor components. Prefix/binding rules: [components-display.md](components-display.md).
-
-## f-window
-
-- Props (source): `id`
-- Internal iframe dialog host, usually opened via `openWindow(...)`
-
-```json
-{
-  "FUN": "openWindow",
-  "IN": {
-    "id": "`winUser",
-    "url": "'/fp/module?mid=123'",
-    "title": "Chi tiet user",
-    "width": 1100
-  }
-}
-```
-
-## f-editor
-
-- Props (source): `value`, `imageapi`, `height`, `toolbar`
-- Emit: `input` with HTML content
-- Wraps CKEditor with upload auth header
-
-```json
-{
-  "el": "f-editor",
-  "w": "12",
-  "attr": {
-    "v-model": "formData.contentHtml",
-    "imageapi": "/api/editor/upload",
-    ":height": 360
-  }
-}
-```
-
-## f-editor-dialog
-
-- Props (source): `value`, `imageapi`, `label`, `width`, `toolbar`
-- `value` must be an object (`open`, `text`, `object`, `ok`), not a plain string
-- Modal editor, writes back on OK
-
-```json
-{
-  "el": "f-editor-dialog",
-  "w": "6",
-  "attr": {
-    ":value": "editorState",
-    "label": "Noi dung mo rong",
-    ":width": 1000,
-    "imageapi": "/api/editor/upload"
-  }
-}
-```
-
-## f-dialog
-
-Modal that builds a form from a `controls` array; supports local watchers, validation and action buttons.
-
-- Props:
-  - `value` (Boolean, default `false`) — v-model open/close
-  - `data` (Object, default `{}`) — input data, bind with `:data.sync`; copied into fields when the dialog opens
-  - `dataOut` (Object, default `{}`) — output, bind with `:data-out.sync`; receives the component instance on open
-  - `title` (String, default `''`)
-  - `controls` (Array, default `[]`) — control definitions (`el`, `attr`, `w` col width); any field whose `v-model` doesn't start with `vueData.` gets local data auto-created (init `null`)
-  - `watch` (Object, default `{}`) — local watchers; key = field name, value = action run on change; registered on open, removed on close
-  - `button` (Array, default `[]`) — button definitions (below)
-  - `disableValidate` (Boolean, default `false`) — skip form validation when `true`
-  - `width` (Number, default `800`) — px
-  - `openAction` (Object, default `null`) — action run as soon as the dialog opens
-
-- Emits:
-  - `input` — open/close (v-model)
-  - `update:data-out` — component instance on open (parent can reach local data)
-  - `update:data` — `v_outData` when a button with `getoutdata: true` is clicked (after validation passes)
-
-- On open (`value = true`):
-  1. Reset all fields from `:data` (`setDefaultData`)
-  2. Register watchers from `watch`
-  3. Run `openAction` if set
-  4. Emit `update:data-out` with the instance
-
-- On close (`value = false`): remove all registered watchers.
-
-- Button object:
-  - `label` (String)
-  - `color` (String, default `"primary"`)
-  - `elevation` (Number, default `0`)
-  - `text` (Boolean, default `true`) — text button
-  - `type` (String) — e.g. `"submit"`
-  - `:disabled` (String) — Vue expression, e.g. `"!checkBoxValue"`
-  - `v-if` (String) — Vue expression to show/hide, e.g. `"ModuleID==1"`
-  - `icon-text` (String) — MDI icon left of the label
-  - `checkvalid` (Boolean) — validate before running the action; stop if invalid
-  - `getoutdata` (Boolean) — sync field values into `v_outData` then emit `update:data`; also triggers validation
-  - `action` (Array | Function) — actions run on click; context = all `v_outData` fields plus `dData` pointing to `v_outData`
-
-- Notes:
-  - Button clicks debounced 500ms (leading edge) against double-click
-  - Controls support `br: true` for a row break
-  - Template is built statically at `data()` init; no re-render when `controls` changes
-  - In the template, `watch` is `:watch` (dynamic bind), not Vue's default `watch`
-  - **Never put `f-dialog` inside a component template:** it works only when declared directly in the module JSON `controls`; inside a Vue component it misbehaves.
-  - **Declare `vueData` variables before binding them in controls:** a control bound to `vueData.someVar` needs that variable declared in the module `data` first — Vue can't make a variable reactive if it doesn't exist at init.
-
-```json
-"data": [
-  { "projectList": [] }
-],
-"controls": [
-  {
-    "prop": "fluid pa-0",
-    "rows": [{ "prop": "", "cols": [
-      {
-        "el": "v-autocomplete",
-        "attr": {
-          "v-model": "pid",
-          "label": "Module name",
-          ":items": "vueData.projectList",
-          "item-text": "ModuleName",
-          "item-value": "ModuleID"
-        }
-      }
-    ]}]
-  }
-]
-```
-
-- Full example:
-
-```json
-{
-  "el": "f-dialog",
-  "attr": {
-    "v-model": "dialogOpen",
-    ":data.sync": "dialogData",
-    "title": "Nhap du lieu",
-    ":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-text-field", "attr": { "v-model": "ModuleName", "label": "ModuleName" }, "w": 8 },
-      {
-        "el": "v-checkbox",
-        "attr": { ":label": "`Tôi đã hiểu và đồng ý: ${checkBoxValue}`", "v-model": "checkBoxValue" }
-      },
-      {
-        "el": "v-select",
-        "attr": {
-          "label": "select",
-          "v-model": "bienselect",
-          ":items": "vueData.Mang",
-          "item-text": "AppName",
-          "item-value": "AppListID"
-        }
-      }
-    ],
-    ":watch": {
-      "bienselect": { "MESSBOX": "Watch Select {{bienselect}}" },
-      "Domain": { "MESSBOX": "Watch textbox {{Domain}}" }
-    },
-    ":button": [
-      {
-        "label": "Submit OK",
-        "type": "submit",
-        ":disabled": "!checkBoxValue",
-        "action": [
-          { "ModuleName": "gan gia tri cho ModuleName" },
-          { "MESSBOX": "thong bao 1" },
-          { "dialogOpen": false }
-        ]
-      },
-      {
-        "label": "Chay mot API",
-        "checkvalid": true,
-        "v-if": "ModuleID==1",
-        "action": [{ "API": "/chaymotapi" }]
-      },
-      {
-        "label": "Close",
-        "action": [{ "dialogOpen": false }]
-      }
-    ]
-  }
-}
-```
+# FUI Dialog & Overlay Components
+
+> Owns: **`f-dialog`, `f-window`, `f-editor`**. Hand-built dialog pattern (`v-dialog` + hidden-container): [ui-dialog-patterns.md](ui-dialog-patterns.md).
+
+Dialog, overlay and content-editor components. Prefix/binding rules: [components-display.md](components-display.md).
+
+## f-window
+
+- Props (source): `id`
+- Internal iframe dialog host, usually opened via `openWindow(...)`
+
+```json
+{
+  "FUN": "openWindow",
+  "IN": {
+    "id": "`winUser",
+    "url": "'/fp/module?mid=123'",
+    "title": "Chi tiet user",
+    "width": 1100
+  }
+}
+```
+
+## f-editor
+
+- Props (source): `value`, `imageapi`, `height`, `toolbar`
+- Emit: `input` with HTML content
+- Wraps CKEditor with upload auth header
+
+```json
+{
+  "el": "f-editor",
+  "w": "12",
+  "attr": {
+    "v-model": "formData.contentHtml",
+    "imageapi": "/api/editor/upload",
+    ":height": 360
+  }
+}
+```
+
+## f-editor-dialog
+
+- Props (source): `value`, `imageapi`, `label`, `width`, `toolbar`
+- `value` must be an object (`open`, `text`, `object`, `ok`), not a plain string
+- Modal editor, writes back on OK
+
+```json
+{
+  "el": "f-editor-dialog",
+  "w": "6",
+  "attr": {
+    ":value": "editorState",
+    "label": "Noi dung mo rong",
+    ":width": 1000,
+    "imageapi": "/api/editor/upload"
+  }
+}
+```
+
+## f-dialog
+
+Modal that builds a form from a `controls` array; supports local watchers, validation and action buttons.
+
+- Props:
+  - `value` (Boolean, default `false`) — v-model open/close
+  - `data` (Object, default `{}`) — input data, bind with `:data.sync`; copied into fields when the dialog opens
+  - `dataOut` (Object, default `{}`) — output, bind with `:data-out.sync`; receives the component instance on open
+  - `title` (String, default `''`)
+  - `controls` (Array, default `[]`) — control definitions (`el`, `attr`, `w` col width); any field whose `v-model` doesn't start with `vueData.` gets local data auto-created (init `null`)
+  - `watch` (Object, default `{}`) — local watchers; key = field name, value = action run on change; registered on open, removed on close
+  - `button` (Array, default `[]`) — button definitions (below)
+  - `disableValidate` (Boolean, default `false`) — skip form validation when `true`
+  - `width` (Number, default `800`) — px
+  - `openAction` (Object, default `null`) — action run as soon as the dialog opens
+
+- Emits:
+  - `input` — open/close (v-model)
+  - `update:data-out` — component instance on open (parent can reach local data)
+  - `update:data` — `v_outData` when a button with `getoutdata: true` is clicked (after validation passes)
+
+- On open (`value = true`):
+  1. Reset all fields from `:data` (`setDefaultData`)
+  2. Register watchers from `watch`
+  3. Run `openAction` if set
+  4. Emit `update:data-out` with the instance
+
+- On close (`value = false`): remove all registered watchers.
+
+- Button object:
+  - `label` (String)
+  - `color` (String, default `"primary"`)
+  - `elevation` (Number, default `0`)
+  - `text` (Boolean, default `true`) — text button
+  - `type` (String) — e.g. `"submit"`
+  - `:disabled` (String) — Vue expression, e.g. `"!checkBoxValue"`
+  - `v-if` (String) — Vue expression to show/hide, e.g. `"ModuleID==1"`
+  - `icon-text` (String) — MDI icon left of the label
+  - `checkvalid` (Boolean) — validate before running the action; stop if invalid
+  - `getoutdata` (Boolean) — sync field values into `v_outData` then emit `update:data`; also triggers validation
+  - `action` (Array | Function) — actions run on click; context = all `v_outData` fields plus `dData` pointing to `v_outData`
+
+- Notes:
+  - Button clicks debounced 500ms (leading edge) against double-click
+  - Controls support `br: true` for a row break
+  - Template is built statically at `data()` init; no re-render when `controls` changes
+  - In the template, `watch` is `:watch` (dynamic bind), not Vue's default `watch`
+  - **Never put `f-dialog` inside a component template:** it works only when declared directly in the module JSON `controls`; inside a Vue component it misbehaves.
+  - **Declare `vueData` variables before binding them in controls:** a control bound to `vueData.someVar` needs that variable declared in the module `data` first — Vue can't make a variable reactive if it doesn't exist at init.
+
+```json
+"data": [
+  { "projectList": [] }
+],
+"controls": [
+  {
+    "prop": "fluid pa-0",
+    "rows": [{ "prop": "", "cols": [
+      {
+        "el": "v-autocomplete",
+        "attr": {
+          "v-model": "pid",
+          "label": "Module name",
+          ":items": "vueData.projectList",
+          "item-text": "ModuleName",
+          "item-value": "ModuleID"
+        }
+      }
+    ]}]
+  }
+]
+```
+
+- Full example:
+
+```json
+{
+  "el": "f-dialog",
+  "attr": {
+    "v-model": "dialogOpen",
+    ":data.sync": "dialogData",
+    "title": "Nhap du lieu",
+    ":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-text-field", "attr": { "v-model": "ModuleName", "label": "ModuleName" }, "w": 8 },
+      {
+        "el": "v-checkbox",
+        "attr": { ":label": "`Tôi đã hiểu và đồng ý: ${checkBoxValue}`", "v-model": "checkBoxValue" }
+      },
+      {
+        "el": "v-select",
+        "attr": {
+          "label": "select",
+          "v-model": "bienselect",
+          ":items": "vueData.Mang",
+          "item-text": "AppName",
+          "item-value": "AppListID"
+        }
+      }
+    ],
+    ":watch": {
+      "bienselect": { "MESSBOX": "Watch Select {{bienselect}}" },
+      "Domain": { "MESSBOX": "Watch textbox {{Domain}}" }
+    },
+    ":button": [
+      {
+        "label": "Submit OK",
+        "type": "submit",
+        ":disabled": "!checkBoxValue",
+        "action": [
+          { "ModuleName": "gan gia tri cho ModuleName" },
+          { "MESSBOX": "thong bao 1" },
+          { "dialogOpen": false }
+        ]
+      },
+      {
+        "label": "Chay mot API",
+        "checkvalid": true,
+        "v-if": "ModuleID==1",
+        "action": [{ "API": "/chaymotapi" }]
+      },
+      {
+        "label": "Close",
+        "action": [{ "dialogOpen": false }]
+      }
+    ]
+  }
+}
+```

package/skills/{fui-skill → fui}/references/components-display.md

@@ -1,141 +1,141 @@
-# FUI Display & Presentation Components
-
-> Owns: **display components: `f-label`, `f-title`, `f-box`, `f-header`, `f-slider`, chip/badge**.
-
-Components for showing info, charts, media. Also holds prefix/binding rules for all f-* components.
-
-## Prefix and binding rules
-
-- `f-*`: FUI components (FUI runtime)
-- `v-*`: Vuetify components
-- `uc-*`: custom module components from `components/`
-- In `module.json`, pass props via `attr`
-- Kebab-case in JSON for custom props (`api-upload`, `item-value`)
-- Dynamic values use `:prop`
-- Use `v-on:*` in JSON (not `@*`)
-- Props without `:` (e.g. `url`, `api-upload`) are plain strings by default
-- Literal-string forcing (backtick/quote) only in Action `IN` mappings, never for static props
-
-## Minimal control pattern
-
-```json
-{
-  "el": "f-date",
-  "w": "6",
-  "attr": {
-    "v-model": "formData.fromDate",
-    "label": "From date"
-  }
-}
-```
-
----
-
-## f-label
-
-- Props (source): `items`, `text`, `color`, `iconText`
-- Renders `v-chip` from `text` and/or `items`
-
-```json
-{
-  "el": "f-label",
-  "w": "12",
-  "attr": {
-    "text": "Trang thai",
-    "icon-text": "mdi-information"
-  }
-}
-```
-
-## f-box
-
-- Props (source): `rowFormat`, `items`, `label`, `edit`, `saveclick`
-- Emits `input` when internal data changes
-- Displays/edits key-value rows; auto-builds row format from data if missing
-- `rowFormat`: array of `{ text, value, noEdit }` — `noEdit: true` locks that column when `edit=true`
-- `items`: object or array; an object is auto-wrapped into a 1-element array
-
-```json
-{
-  "el": "f-box",
-  "w": "12",
-  "attr": {
-    "label": "Thong tin",
-    ":items": "detailData",
-    ":edit": "isEditMode",
-    ":row-format": [
-      { "text": "Mã", "value": "StudentID", "noEdit": true },
-      { "text": "Họ tên", "value": "FullName" },
-      { "text": "Ngày sinh", "value": "BirthDate" }
-    ]
-  }
-}
-```
-
-## f-header
-
-- Props (source): `label`
-
-```json
-{
-  "el": "f-header",
-  "w": "12",
-  "attr": { "label": "Bao cao tong hop" }
-}
-```
-
-## f-title
-
-- Props (source): `label`
-
-```json
-{
-  "el": "f-title",
-  "w": "12",
-  "attr": { "label": "Danh sach ho so" }
-}
-```
-
-## f-slider
-
-- Props (source): `items`, `itemAttr`
-- Wraps `v-carousel` and `v-carousel-item`
-
-```json
-{
-  "el": "f-slider",
-  "w": "12",
-  "attr": {
-    ":items": "slideItems",
-    ":item-attr": { "contain": true }
-  }
-}
-```
-
-## f-echart
-
-→ See [`components-echart.md`](components-echart.md) — props, config, global `FEchartFormatter` module, examples.
-
-## f-pdfmake
-
-- Props (source): `data`
-- Renders PDF in an iframe; re-renders when `data` changes (deep watch)
-
-```json
-{
-  "el": "f-pdfmake",
-  "w": "12",
-  "attr": {
-    ":data": "pdfDefinition",
-    "height": "550"
-  }
-}
-```
-
----
-
-## Practical notes
-
-1. Most `f-*` components forward unknown attrs via `v-bind="$attrs"` — Vuetify attrs still work when the child is a Vuetify control.
-2. The literal-string rule applies only to API/path strings in Action `IN` mappings.
-3. See `references/component-table.md` for `f-table`.
+# FUI Display & Presentation Components
+
+> Owns: **display components: `f-label`, `f-title`, `f-box`, `f-header`, `f-slider`, chip/badge**.
+
+Components for showing info, charts, media. Also holds prefix/binding rules for all f-* components.
+
+## Prefix and binding rules
+
+- `f-*`: FUI components (FUI runtime)
+- `v-*`: Vuetify components
+- `uc-*`: custom module components from `components/`
+- In `module.json`, pass props via `attr`
+- Kebab-case in JSON for custom props (`api-upload`, `item-value`)
+- Dynamic values use `:prop`
+- Use `v-on:*` in JSON (not `@*`)
+- Props without `:` (e.g. `url`, `api-upload`) are plain strings by default
+- Literal-string forcing (backtick/quote) only in Action `IN` mappings, never for static props
+
+## Minimal control pattern
+
+```json
+{
+  "el": "f-date",
+  "w": "6",
+  "attr": {
+    "v-model": "formData.fromDate",
+    "label": "From date"
+  }
+}
+```
+
+---
+
+## f-label
+
+- Props (source): `items`, `text`, `color`, `iconText`
+- Renders `v-chip` from `text` and/or `items`
+
+```json
+{
+  "el": "f-label",
+  "w": "12",
+  "attr": {
+    "text": "Trang thai",
+    "icon-text": "mdi-information"
+  }
+}
+```
+
+## f-box
+
+- Props (source): `rowFormat`, `items`, `label`, `edit`, `saveclick`
+- Emits `input` when internal data changes
+- Displays/edits key-value rows; auto-builds row format from data if missing
+- `rowFormat`: array of `{ text, value, noEdit }` — `noEdit: true` locks that column when `edit=true`
+- `items`: object or array; an object is auto-wrapped into a 1-element array
+
+```json
+{
+  "el": "f-box",
+  "w": "12",
+  "attr": {
+    "label": "Thong tin",
+    ":items": "detailData",
+    ":edit": "isEditMode",
+    ":row-format": [
+      { "text": "Mã", "value": "StudentID", "noEdit": true },
+      { "text": "Họ tên", "value": "FullName" },
+      { "text": "Ngày sinh", "value": "BirthDate" }
+    ]
+  }
+}
+```
+
+## f-header
+
+- Props (source): `label`
+
+```json
+{
+  "el": "f-header",
+  "w": "12",
+  "attr": { "label": "Bao cao tong hop" }
+}
+```
+
+## f-title
+
+- Props (source): `label`
+
+```json
+{
+  "el": "f-title",
+  "w": "12",
+  "attr": { "label": "Danh sach ho so" }
+}
+```
+
+## f-slider
+
+- Props (source): `items`, `itemAttr`
+- Wraps `v-carousel` and `v-carousel-item`
+
+```json
+{
+  "el": "f-slider",
+  "w": "12",
+  "attr": {
+    ":items": "slideItems",
+    ":item-attr": { "contain": true }
+  }
+}
+```
+
+## f-echart
+
+→ See [`components-echart.md`](components-echart.md) — props, config, global `FEchartFormatter` module, examples.
+
+## f-pdfmake
+
+- Props (source): `data`
+- Renders PDF in an iframe; re-renders when `data` changes (deep watch)
+
+```json
+{
+  "el": "f-pdfmake",
+  "w": "12",
+  "attr": {
+    ":data": "pdfDefinition",
+    "height": "550"
+  }
+}
+```
+
+---
+
+## Practical notes
+
+1. Most `f-*` components forward unknown attrs via `v-bind="$attrs"` — Vuetify attrs still work when the child is a Vuetify control.
+2. The literal-string rule applies only to API/path strings in Action `IN` mappings.
+3. See `references/component-table.md` for `f-table`.