@geoit/ui 0.0.2 → 0.0.4

package/ai/components/geo-page-title.md

@@ -1,16 +1,23 @@
 # geo-page-title
 
-> AI quick reference for **GeoPageTitleComponent**
+> Complete usage reference for **GeoPageTitleComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Page title (uppercase) with short primary accent underline; uses geo-typography.
 
 ## Import
+
 ```ts
 import { GeoPageTitleComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoPageTitleComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoPageTitleComponent]
+```
 
 ## Selector
 `geo-page-title`
@@ -24,30 +31,69 @@ Top of detail/list pages, often under breadcrumb.
 ## Do not use when
 Modal titles — geo-form-modal has its own title.
 
+## How to use
+
+Tiêu đề trang chữ hoa + gạch nhấn primary. title + level 1–4; accentWidth/accentHeight tùy chỉnh gạch.
+
+## Binding
+
+Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `title` | See component TS / Storybook Controls |
-| `uppercase` | See component TS / Storybook Controls |
-| `accentWidth` | See component TS / Storybook Controls |
-| `accentHeight` | See component TS / Storybook Controls |
-| `level` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `title` | `string` | `''` | Nội dung tiêu đề. |
+| `uppercase` | `boolean` | `true` | Tự chuyển uppercase. Default `true`. |
+| `accentWidth` | `number \| string` | `56` | Chiều rộng gạch chân (px hoặc CSS size). Default `56px`. |
+| `accentHeight` | `number \| string` | `4` | Độ dày gạch chân. Default `4px`. |
+| `level` | `1 \| 2 \| 3 \| 4` | `3` | Heading level → geo-typography variant. |
 
 ## Outputs
+
 _None_
 
-## Example
+
+## Examples
+
+### Basic
+
 ```html
 <geo-page-title title="Thông tin chi tiết hồ sơ" [level]="3"></geo-page-title>
 ```
 
+### Full options
+
+```html
+<geo-page-title
+  title="Danh sách hồ sơ khai thác"
+  [uppercase]="true"
+  [level]="3"
+  [accentWidth]="56"
+  [accentHeight]="4"
+></geo-page-title>
+```
+
+## Tips
+
+- Thường dưới geo-breadcrumb.
+- Tiêu đề modal → geo-form-modal title, không dùng page-title.
+- uppercase mặc định true.
+## Related components
+
+- [`geo-breadcrumb`](./geo-breadcrumb.md)
+- [`geo-typography`](./geo-typography.md)
+- [`geo-back-button`](./geo-back-button.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-page-title.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-page-title/geo-page-title.component.ts`
 
-## Storybook
-GEO / related story for `geo-page-title`
-
-## Rules for AI
-- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
 - Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
-- Match props to Storybook Controls / this doc; do not invent unsupported inputs.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-pagination.md

@@ -1,16 +1,23 @@
 # geo-pagination
 
-> AI quick reference for **GeoPaginationComponent**
+> Complete usage reference for **GeoPaginationComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Standalone pagination control.
 
 ## Import
+
 ```ts
 import { GeoPaginationComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoPaginationComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoPaginationComponent]
+```
 
 ## Selector
 `geo-pagination`
@@ -24,36 +31,84 @@ Paging outside geo-table.
 ## Do not use when
 Inside tables prefer geo-table / geo-table-pagination.
 
+## How to use
+
+Phân trang độc lập ngoài bảng. [pageIndex]/[pageSize]/[total]; (pageIndexChange)/(pageSizeChange).
+
+## Binding
+
+Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `pageIndex` | See component TS / Storybook Controls |
-| `pageSize` | See component TS / Storybook Controls |
-| `total` | See component TS / Storybook Controls |
-| `size` | See component TS / Storybook Controls |
-| `simple` | See component TS / Storybook Controls |
-| `hideOnSinglePage` | See component TS / Storybook Controls |
-| `showSizeChanger` | See component TS / Storybook Controls |
-| `pageSizeOptions` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `pageIndex` | `number` | `1` | — |
+| `pageSize` | `number` | `10` | — |
+| `total` | `number` | `0` | — |
+| `size` | `'default' \| 'small'` | `'default'` | — |
+| `simple` | `boolean` | `false` | — |
+| `hideOnSinglePage` | `boolean` | `false` | — |
+| `showSizeChanger` | `boolean` | `false` | — |
+| `pageSizeOptions` | `number[]` | `[5, 10, 20, 50]` | — |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `pageIndexChange` | EventEmitter |
-| `pageSizeChange` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `pageIndexChange` | `EventEmitter<number>` | — |
+| `pageSizeChange` | `EventEmitter<number>` | — |
+
+
+## Examples
+
+### Basic
+
 ```html
-<geo-pagination [pageIndex]="1" [pageSize]="10" [total]="100" (pageIndexChange)="onPage($event)"></geo-pagination>
+<geo-pagination
+  [pageIndex]="1"
+  [pageSize]="10"
+  [total]="100"
+  (pageIndexChange)="onPage($event)"
+></geo-pagination>
 ```
 
+### Full options
+
+```html
+<geo-pagination
+  [pageIndex]="pageIndex"
+  [pageSize]="pageSize"
+  [total]="total"
+  size="default"
+  [simple]="false"
+  [hideOnSinglePage]="false"
+  [showSizeChanger]="true"
+  [pageSizeOptions]="[5, 10, 20, 50]"
+  (pageIndexChange)="pageIndex = $event; load()"
+  (pageSizeChange)="pageSize = $event; load()"
+></geo-pagination>
+```
+
+## Tips
+
+- Trong geo-table ưu tiên phân trang tích hợp / geo-table-pagination.
+- showSizeChanger + pageSizeOptions khi cần đổi số dòng.
+- hideOnSinglePage khi chỉ 1 trang.
+## Related components
+
+- [`geo-table`](./geo-table.md)
+- [`geo-table-pagination`](./geo-table-pagination.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-pagination.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-pagination/geo-pagination.component.ts`
 
-## Storybook
-GEO / related story for `geo-pagination`
-
-## Rules for AI
-- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
 - Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
-- Match props to Storybook Controls / this doc; do not invent unsupported inputs.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-radio.md

@@ -1,16 +1,24 @@
 # geo-radio
 
-> AI quick reference for **GeoRadioComponent**
+> Complete usage reference for **GeoRadioComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Radio group (horizontal/vertical or button style).
 
 ## Import
+
 ```ts
 import { GeoRadioComponent } from '@geoit/ui';
+import { FormsModule } from '@angular/forms'; // when using [(ngModel)]
 ```
 
-Standalone component — add to `imports: [GeoRadioComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoRadioComponent, FormsModule]
+```
 
 ## Selector
 `geo-radio`
@@ -24,44 +32,117 @@ Exclusive choice among few options.
 ## Do not use when
 Many options — use geo-select.
 
+## How to use
+
+Nhóm radio độc quyền (CVA). [options] {label,value}[]; layout horizontal|vertical; buttonStyle cho dạng nút.
+
+## Binding
+
+Supports **ControlValueAccessor**.
+
+```html
+<geo-radio [(ngModel)]="value"></geo-radio>
+<!-- or -->
+<geo-radio formControlName="field"></geo-radio>
+```
+
+Also import `FormsModule` (template-driven) or `ReactiveFormsModule`.
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `options` | See component TS / Storybook Controls |
-| `label` | See component TS / Storybook Controls |
-| `size` | See component TS / Storybook Controls |
-| `layout` | See component TS / Storybook Controls |
-| `buttonStyle` | See component TS / Storybook Controls |
-| `buttonAppearance` | See component TS / Storybook Controls |
-| `disabled` | See component TS / Storybook Controls |
-| `required` | See component TS / Storybook Controls |
-| `error` | See component TS / Storybook Controls |
-| `errorMessage` | See component TS / Storybook Controls |
-| `block` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `options` | `GeoRadioOption[]` | `[]` | — |
+| `label` | `string` | `''` | — |
+| `size` | `'default' \| 'small' \| 'large'` | `'default'` | — |
+| `layout` | `'horizontal' \| 'vertical'` | `'horizontal'` | — |
+| `buttonStyle` | `boolean` | `false` | `true` → dùng `nz-radio-button` thay vì `nz-radio` |
+| `buttonAppearance` | `'outline' \| 'solid'` | `'outline'` | Chỉ áp dụng khi `buttonStyle: true` |
+| `disabled` | `boolean` | `false` | — |
+| `required` | `boolean` | `false` | — |
+| `error` | `boolean` | `false` | — |
+| `errorMessage` | `string` | `''` | — |
+| `block` | `boolean` | `false` | — |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `valueChange` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `valueChange` | `EventEmitter<string \| number \| null>` | — |
+
+## Related types
+
+From `figma/geo-radio/geo-radio.types.ts`:
+
+```ts
+export interface GeoRadioOption {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+}
+
+export type GeoRadioSize = 'default' | 'small' | 'large';
+
+export type GeoRadioLayout = 'horizontal' | 'vertical';
+
+export type GeoRadioButtonAppearance = 'outline' | 'solid';
+```
+
+## Examples
+
+### Basic
+
 ```html
 <geo-radio
   label="Loại yêu cầu"
   layout="vertical"
-  [options]="[{ label: 'A', value: 'a' }, { label: 'B', value: 'b' }]"
-  [(ngModel)]="type"
+  [options]="[{ label: 'Cấp mới', value: 'new' }, { label: 'Gia hạn', value: 'renew' }]"
+  [(ngModel)]="requestType"
+  [block]="true"
+></geo-radio>
+```
+
+### Full options
+
+```html
+<geo-radio
+  label="Trạng thái"
+  [options]="[
+    { label: 'Hoạt động', value: 1 },
+    { label: 'Ngưng', value: 0 }
+  ]"
+  size="default"
+  layout="horizontal"
+  [buttonStyle]="true"
+  buttonAppearance="outline"
+  [required]="true"
   [block]="true"
+  [error]="statusError"
+  errorMessage="Vui lòng chọn trạng thái"
+  [(ngModel)]="status"
+  (valueChange)="onStatus($event)"
 ></geo-radio>
 ```
 
+## Tips
+
+- Nhiều option → geo-select.
+- buttonAppearance outline|solid khi buttonStyle=true.
+- [block] + label cho form field.
+## Related components
+
+- [`geo-checkbox`](./geo-checkbox.md)
+- [`geo-select`](./geo-select.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-radio.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-radio/geo-radio.component.ts`
 
-## Storybook
-GEO / related story for `geo-radio`
-
-## Rules for AI
-- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
 - Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
-- Match props to Storybook Controls / this doc; do not invent unsupported inputs.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.

package/ai/components/geo-row-actions.md

@@ -1,16 +1,23 @@
 # geo-row-actions
 
-> AI quick reference for **GeoRowActionsComponent**
+> Complete usage reference for **GeoRowActionsComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Row action icons/menu (edit, more, custom).
 
 ## Import
+
 ```ts
 import { GeoRowActionsComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoRowActionsComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoRowActionsComponent]
+```
 
 ## Selector
 `geo-row-actions`
@@ -24,31 +31,92 @@ Actions column inside geo-table.
 ## Do not use when
 Page-level CTAs — use geo-button.
 
+## How to use
+
+Cụm thao tác dòng bảng. [actions] GeoRowAction[]; (actionClick) theo key. Thường qua cột renderAs: 'actions' của geo-table.
+
+## Binding
+
+Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `actions` | See component TS / Storybook Controls |
-| `primaryActionKey` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `actions` | `GeoRowAction[] \| null` | `null` | — |
+| `primaryActionKey` | `string` | `'edit'` | Action ưu tiên hiển thị khi có > 2 thao tác (mặc định: edit) |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `actionClick` | EventEmitter |
-| `edit` | EventEmitter |
-| `more` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `edit` | `EventEmitter<void>` | Action ưu tiên hiển thị khi có > 2 thao tác (mặc định: edit) */   @Input() primaryActionKey = 'edit';   @Output() actionClick = new EventEmitter<string>();   /** @deprecated Dùng `actionClick` với key `edit` |
+| `more` | `EventEmitter<void>` | @deprecated Dùng `actionClick` với key `more` |
+
+## Related types
+
+From `figma/geo-table/geo-row-actions/geo-row-actions.types.ts`:
+
+```ts
+export interface GeoRowAction {
+  key: string;
+  icon: string;
+  label?: string;
+  title?: string;
+  iconTheme?: 'outline' | 'fill' | 'twotone';
+  disabled?: boolean;
+  danger?: boolean;
+}
+```
+
+## Examples
+
+### Basic
+
 ```html
-<geo-row-actions [actions]="actions" (actionClick)="onAction($event)"></geo-row-actions>
+<geo-row-actions
+  [actions]="[
+    { key: 'edit', icon: 'edit', title: 'Chỉnh sửa' },
+    { key: 'more', icon: 'more', title: 'Thêm thao tác' }
+  ]"
+  (actionClick)="onAction($event)"
+></geo-row-actions>
 ```
 
+### Full options
+
+```html
+<geo-row-actions
+  primaryActionKey="edit"
+  [actions]="[
+    { key: 'edit', icon: 'edit', title: 'Chỉnh sửa' },
+    { key: 'view', icon: 'eye', title: 'Xem' },
+    { key: 'delete', icon: 'delete', title: 'Xóa', danger: true }
+  ]"
+  (actionClick)="onRowAction($event)"
+></geo-row-actions>
+```
+
+## Tips
+
+- ≤2 actions hiện hết; >2: primary + danger, còn lại menu.
+- primaryActionKey mặc định 'edit'.
+- CTA trang → geo-button, không row-actions.
+## Related components
+
+- [`geo-table`](./geo-table.md)
+- [`geo-button`](./geo-button.md)
+- [`geo-icon`](./geo-icon.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-row-actions.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-table/geo-row-actions/geo-row-actions.component.ts`
 
-## Storybook
-GEO / related story for `geo-row-actions`
-
-## Rules for AI
-- Prefer this component over raw ng-zorro / HTML equivalents for the same UI role.
+## Rules for AI / consumers
+- Prefer this component over raw ng-zorro / HTML for the same UI role.
 - Use design tokens (`var(--geo-*)`) — never hardcode brand colors or radius.
-- Match props to Storybook Controls / this doc; do not invent unsupported inputs.
+- Match props exactly to the Inputs table; do not invent unsupported inputs.
+- Copy examples and adapt labels/bindings only.