@fui-org/fui-cli 1.3.2 → 2.0.0

package/skills/fui-skill-cli/references/default-function.md

@@ -1,425 +0,0 @@
-# Default Functions
-
-> Owns: **FUI utility functions usable in `FUN`/`EXE`/`script.js`** (openWindow, ajaxCALL, jsonToExcel, groupBy...). Source locations: [script-map.md](script-map.md).
-
-Globals defined in `defaultfunction.js`, auto-loaded in every FUI V2 module.
-
----
-
-## Global Variables
-
-| Variable    | Meaning                                     |
-| ----------- | ------------------------------------------- |
-| `$isMobile` | `true` if mobile user agent                 |
-| `$isPhone`  | `true` if phone (not tablet)                |
-| `$isApple`  | `true` if Apple device (iPad, iPhone, iPod) |
-
----
-
-## Dialogs & Messages
-
-### confirm(obj)
-
-Styled OK/Cancel dialog; wraps `$.confirm` (jquery-confirm).
-
-| Param     | Meaning                                                   |
-| --------- | --------------------------------------------------------- |
-| `title`   | Title                                                     |
-| `message` | Body                                                      |
-| `action`  | Function run on OK                                        |
-| `cancel`  | Function run on Cancel (optional)                         |
-| `type`    | Color: `'blue'` (default), `'red'`, `'green'`, `'orange'` |
-| `icon`    | Icon class, e.g. `'mdi mdi-delete'`                       |
-
-```js
-confirm({
-  title: "Xác nhận xóa",
-  message: "Bạn có chắc muốn xóa bản ghi này không?",
-  type: "red",
-  icon: "mdi mdi-delete",
-  action: function () {
-    CALL(vueData.actDelete);
-  },
-});
-```
-
----
-
-### showMessage(obj)
-
-Message dialog (Close button only); wraps `$.dialog`.
-
-| Param     | Meaning                             |
-| --------- | ----------------------------------- |
-| `title`   | Title                               |
-| `message` | Body                                |
-| `type`    | Color: `'blue'`, `'red'`, `'green'` |
-| `icon`    | Icon class                          |
-| `onclose` | FUI action object run after close   |
-
-```js
-showMessage({ title: "Thông báo", message: "Lưu thành công!" });
-
-showMessage({
-  title: "Lỗi",
-  message: "Không tìm thấy dữ liệu",
-  type: "red",
-  icon: "mdi mdi-alert-circle",
-});
-
-// Chạy action sau khi đóng
-showMessage({
-  title: "Hoàn tất",
-  message: "Import xong!",
-  onclose: vueData.actReload,
-});
-```
-
----
-
-## Navigation & Window
-
-### pushRouter(router)
-
-Updates the browser URL without reload — sync URL with UI state.
-
-```js
-pushRouter("/fp/don-hang/danh-sach");
-```
-
----
-
-### openWindow(obj)
-
-Opens an FUI window (`f-window`) overlay.
-
-| Param    | Meaning                                                   |
-| -------- | --------------------------------------------------------- |
-| `url`    | Content URL (required)                                    |
-| `title`  | Window title                                              |
-| `id`     | Identifier (auto if omitted) — prevents duplicate windows |
-| `width`  | Width (px or %)                                           |
-| `height` | Height                                                    |
-
-```js
-// Cách đơn giản — chỉ truyền URL
-openWindow("/fp/san-pham/chi-tiet?id=123");
-
-// Đầy đủ options
-openWindow({
-  id: "winChiTiet",
-  url: "/fp/san-pham/chi-tiet?id=" + vueData.selectedId,
-  title: "Chi tiết sản phẩm",
-  width: "80%",
-});
-```
-
-> Called inside an `f-window` (iframe) → FUI switches to `windowSendMessage('#PARENT', 'openWindow', obj)` to open in the parent.
-
----
-
-### redirect(obj, query)
-
-Navigates the current page to another URL.
-
-```js
-redirect("/fp/trang-chu");
-redirect({ url: "/fp/don-hang", query: true }); // giữ lại query params hiện tại
-```
-
----
-
-### reload()
-
-Reloads the page.
-
-```js
-reload();
-```
-
----
-
-### windowSendMessage(window, cmd, data)
-
-`postMessage` to another window/iframe — communication between `f-window`s.
-
-| Param    | Meaning                                                           |
-| -------- | ----------------------------------------------------------------- |
-| `window` | Window object, `'#PARENT'` (parent), or `'#iframeId'` (iframe ID) |
-| `cmd`    | Command name                                                      |
-| `data`   | Payload                                                           |
-
-```js
-// Gửi lên cửa sổ cha
-windowSendMessage("#PARENT", "refreshData", { id: vueData.selectedId });
-
-// Gửi đến iframe có id="iframeChild"
-windowSendMessage("#iframeChild", "loadItem", { itemId: 5 });
-```
-
----
-
-## AJAX
-
-### ajaxCALL(URL, DATA, callBack, errorCallBack, header)
-
-AJAX POST. Pass only the path — domain is added via `fixURL`.
-
-```js
-ajaxCALL("/SP_GetDonHang", { maKH: vueData.maKH }, function (res) {
-  vueData.danhSach = res.data;
-});
-
-// Với error handler
-ajaxCALL(
-  "/SP_SaveDonHang",
-  vueData.form,
-  function (res) {
-    Vue.$toast.success("Lưu thành công", { position: "top" });
-  },
-  function (err) {
-    showMessage({ title: "Lỗi", message: err.message, type: "red" });
-  },
-);
-```
-
----
-
-## File Export
-
-### jsonToExcel(Obj)
-
-Exports JSON to `.xlsx`. Auto-loads ExcelJS.
-
-**Single sheet:**
-
-```js
-jsonToExcel({
-  data: vueData.danhSach, // Array of objects
-  filename: "danh-sach.xlsx",
-  worksheet: "DanhSach",
-});
-```
-
-**Multi sheet:**
-
-```js
-jsonToExcel({
-  filename: "bao-cao.xlsx",
-  sheets: [
-    { name: "Sheet1", data: vueData.list1 },
-    { name: "Sheet2", data: vueData.list2 },
-  ],
-});
-```
-
----
-
-## Data Utilities
-
-### groupBy(arrayObj, groupField, sumArr)
-
-Groups objects by a field and sums numeric columns; returns grouped array with `count`.
-
-```js
-// groupBy(data, 'Khoa', ['SLNghiHoc', 'SLTotNghiep'])
-var result = groupBy(vueData.data, "phongBan", ["soLuong", "doanhThu"]);
-// result: [{ phongBan: 'A', soLuong: 10, doanhThu: 5000, count: 3 }, ...]
-```
-
-> For complex grouping use Lodash `_.groupBy`.
-
----
-
-### findInArray(obj)
-
-Finds an element by condition.
-
-```js
-var item = findInArray({ array: vueData.list, value: { id: 5 } });
-```
-
-> Usually prefer the shorter Lodash `_.find(array, condition)`.
-
----
-
-### fillData(obj)
-
-Copies data from a source array into a target object by key and mapping.
-
-- **Parameters:** `{ src, des, key, map }` — src: source array, des: target object, key: matching value, map: field mapping
-
----
-
-### buildHeader(obj, mapCol)
-
-Builds `headers` for `f-table` from data. No `mapCol` → headers from the first record's keys (numeric columns get `el: 't-num'`); with `mapCol` → mapped from `{ text, value }`.
-
-```js
-// Tự dựng header từ dữ liệu API
-vueData.headers = buildHeader(vueData.dsData);
-```
-
-### capacityText(numb)
-
-Bytes → size string (`'1.5 Mb'`, `'320 Kb'`) for file sizes.
-
-### appCommand(cmdData)
-
-Sends a command to the native app (React Native / iOS webkit / Android) when FUI is embedded in a mobile app.
-
----
-
-## PDF
-
-### printPDF(obj)
-
-Builds and prints/downloads a PDF with `pdfMake`. Auto-loads pdfMake.
-
-```js
-printPDF({
-  data: docDefinition, // pdfMake docDefinition object
-  download: true, // true = tải file, false = mở viewer
-  callBack: function () {
-    console.log("Done");
-  },
-});
-```
-
----
-
-## Clipboard & String
-
-### copyToClipboard(textToCopy)
-
-Copies to clipboard; uses `navigator.clipboard` when available (HTTPS), else `execCommand`.
-
-```js
-copyToClipboard(vueData.maHoaDon);
-copyToClipboard(JSON.stringify(vueData.data));
-```
-
----
-
-### fileNameClear(fname)
-
-Strips special characters from a file name (keeps letters, digits, spaces, dashes).
-
-```js
-var safeName = fileNameClear(vueData.tenFile); // "report (2025)!" → "report 2025"
-```
-
----
-
-### hashCode(s)
-
-Integer hash of a string (for unique keys).
-
-```js
-var key = hashCode("unique-string-" + Date.now());
-```
-
----
-
-### generateID()
-
-Random string ID.
-
-```js
-var newId = "win_" + generateID();
-```
-
----
-
-## Cookie & Auth
-
-### getCookie(cname) / setCookie(name, value, days, domain)
-
-Read/write browser cookies.
-
-```js
-var token = getCookie("awt");
-setCookie("theme", "dark", 30); // hết hạn sau 30 ngày
-setCookie("lang", "vi", 365, ".fui.vn"); // share cookie toàn domain
-```
-
----
-
-### logout(cookiesName, domain, url)
-
-Clears the cookie and redirects to login.
-
-```js
-logout(); // xóa cookie 'awt', redirect về login mặc định
-logout("myToken", ".fui.vn", "/login");
-```
-
----
-
-## Permissions
-
-### rightTest(rightObject)
-
-Checks whether the current user has the required rights, against `vueData.user`.
-
-```js
-// Kiểm tra user có role 'admin' hoặc 'manager'
-if (rightTest({ role: ['admin', 'manager'] })) {
-    vueData.showDelete = true;
-}
-
-// Kiểm tra nhiều điều kiện cùng lúc (AND)
-if (rightTest({ dept: 'IT', level: [1, 2] })) { ... }
-```
-
----
-
-## Color Utilities
-
-### colorLib(color)
-
-Color utility (hex, rgb, hsl), mostly for charts.
-
-```js
-var c = colorLib("#4e73df");
-c.hexString(); // '#4e73df'
-c.rgbString(); // 'rgb(78, 115, 223)'
-c.lighten(0.2); // làm sáng 20%
-c.darken(0.1); // làm tối 10%
-c.alpha(0.5).rgbString(); // 'rgba(78, 115, 223, 0.5)'
-```
-
-### transparentize(value, opacity)
-
-Shortcut for a transparent color.
-
-```js
-transparentize("#4e73df", 0.5); // 'rgba(78, 115, 223, 0.5)'
-```
-
----
-
-## Script Loader
-
-### loadScripts(scriptsArray, callbackFunc)
-
-Loads scripts by URL, then runs the callback — on-demand libraries.
-
-```js
-loadScripts(["/include/pdfmake/pdfmake.min.js", "/include/pdfmake/vfs_fonts.js"], function () {
-  printPDF({ data: docDef, download: true });
-});
-```
-
----
-
-## Device Detection
-
-### extractHostname(url) / getDomainWithoutSubdomain(url)
-
-Extract hostname/domain from a URL. Internal; rarely used directly.
-
-```js
-extractHostname("https://api.fui.vn/fp/test"); // 'api.fui.vn'
-getDomainWithoutSubdomain("https://api.fui.vn"); // 'fui.vn'
-```

package/skills/fui-skill-cli/references/design-modes.md

@@ -1,57 +0,0 @@
-# Design System — App-mode vs Web-mode
-
-> Owns: **aesthetic mode decision, `border-radius` limits, the `{projectId}/DESIGN.md` accumulation loop**. Approved class/prop/style: [controls-styling-vocabulary.md](controls-styling-vocabulary.md). Standard dialog/form anatomy: `fui design read fui`.
-
-Before writing any `controls`, decide the module's mode. This is the first, **hard** decision — each mode has its own aesthetic rules; never borrow across.
-
----
-
-## 1. The two modes
-
-|                                        | **App-mode** (default)                                                    | **Web-mode**                                                           |
-| -------------------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
-| Applies to                             | Management software: CRUD, lists, forms, internal dashboards, permissions | Landing pages, product intros, public pages (usually `HTMLOnly: true`) |
-| Aesthetic source                       | **ONLY** `fui design read fui` + `controls-styling-vocabulary.md`         | Brand DESIGN.md (`fui design list` → `fui design read <brand>`)        |
-| Brand DESIGN.md (nike, linear, bmw...) | **FORBIDDEN** — even "just the colors"                                    | Allowed, pick by tone/industry                                         |
-| Custom style/class                     | **FORBIDDEN** (per `controls-styling-vocabulary.md`)                      | Allowed in `header.html`                                               |
-| Component preference                   | `f-*` / `v-*` per FUI standard                                            | Free HTML/CSS                                                          |
-
-**Web-mode signals**: `HTMLOnly: true` in `_moduleInfo.json`, or user says "landing page / intro page / public home page". Everything else → App-mode. Unsure → **ask the user**.
-
-⚠️ `HTMLOnly: true` is not just an aesthetic signal: the server then embeds **no** V2/V3 JS/CSS library (not Vue, Vuetify, jQuery, lodash, MDI, `projectdefaultstyle.css`) — declare everything needed in the module itself. Read [module-structure.md §HTMLOnly=true: no library is embedded](module-structure.md#htmlonlytrue-no-library-is-embedded) **before** writing the first tag.
-
-**Mandatory in App-mode**: before writing/editing layout, dialog or form, load `fui design read fui` (if not loaded this session) for the standard anatomy (f-dialog-style `v-dialog`, floating-label form, color/icon palette), and read `controls-styling-vocabulary.md`. Finish this reading **before sketching or writing controls** — never design while guessing rules from memory.
-
-Before designing, confirm the three core UI rule groups from their owner files: icon sizes and styling vocabulary (`controls-styling-vocabulary.md`), dialog anatomy/actions (`fui design read fui` + `ui-dialog-patterns.md`), and vertical alignment of controls in a row (`controls-patterns.md` §Vertical centering). If the task has a dialog, also read `ui-dialog-patterns.md` before sketching it.
-
----
-
-## 2. Per-project override — `{projectId}/DESIGN.md`
-
-If `{projectId}/DESIGN.md` exists in the workspace, it **overrides** same-topic rules of the active mode (unmentioned topics follow the common standard). **Always check it before designing.**
-
----
-
-## 3. Design-rule accumulation loop (MANDATORY)
-
-When the user critiques a UI detail ("dialog must...", "this button's color...", "don't use..."):
-
-1. Fix the module per the feedback.
-2. **Immediately write the rule into `{projectId}/DESIGN.md`** (create it if missing — use the template at the end of `fui design read fui`), phrased as a **general rule + correct/incorrect JSON examples**, not just the specific incident.
-3. If the rule clearly applies to EVERY project → tell the user "this rule should go into the common standard `fui/DESIGN.md`" and propose the content — **only the user decides** to update the common standard.
-
----
-
-## 4. `border-radius` limits
-
-Apply to **EVERY brand/style, even when a brand DESIGN.md suggests larger values**:
-
-| Frame type                                                         | Max `border-radius` |
-| ------------------------------------------------------------------ | ------------------- |
-| Large frames (card container, dialog, section wrapper, main panel) | `12px`              |
-| Medium frames (large button, input group, sub-panel, toolbar)      | `8px`               |
-| Small frames (small button, chip, badge, tag, icon container)      | `6px`               |
-
-If a brand DESIGN.md suggests a larger radius (heavily rounded brands like Airbnb, Notion, Nike...) → **lower it to the allowed max**; never use the original value.
-
-**Exception**: fully round elements (avatar, round dot icon button) use `border-radius: 50%` — outside these limits.