@geoit/ui 0.0.2 → 0.0.5

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,119 @@ 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`.
+
+Library API uses Angular 18 `input()` / `output()` signals under the hood.
+
 ## 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` | `OutputEmitterRef<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 component — drive via Inputs (`input()` / `model()`) and Outputs (`output()`). Banana bindings work for any `model()` fields (e.g. `[(open)]`, `[(pageIndex)]`).
+
 ## 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` | `OutputEmitterRef<void>` | Action ưu tiên hiển thị khi có > 2 thao tác (mặc định: edit) */   readonly primaryActionKey = input('edit');   readonly actionClick = output<string>();   /** @deprecated Dùng `actionClick` với key `edit` |
+| `more` | `OutputEmitterRef<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.

package/ai/components/geo-select.md

@@ -1,16 +1,24 @@
 # geo-select
 
-> AI quick reference for **GeoSelectComponent**
+> Complete usage reference for **GeoSelectComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Select / multi-select dropdown.
 
 ## Import
+
 ```ts
 import { GeoSelectComponent } from '@geoit/ui';
+import { FormsModule } from '@angular/forms'; // when using [(ngModel)]
 ```
 
-Standalone component — add to `imports: [GeoSelectComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoSelectComponent, FormsModule]
+```
 
 ## Selector
 `geo-select`
@@ -24,45 +32,117 @@ Choosing from a list of options.
 ## Do not use when
 2–3 exclusive options may use geo-radio instead.
 
+## How to use
+
+Select danh sách (CVA). [options] {label,value}[]; mode default|multiple|tags; showSearch khi danh sách dài.
+
+## Binding
+
+Supports **ControlValueAccessor**.
+
+```html
+<geo-select [(ngModel)]="value"></geo-select>
+<!-- or -->
+<geo-select formControlName="field"></geo-select>
+```
+
+Also import `FormsModule` (template-driven) or `ReactiveFormsModule`.
+
+Library API uses Angular 18 `input()` / `output()` signals under the hood.
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `options` | See component TS / Storybook Controls |
-| `label` | See component TS / Storybook Controls |
-| `placeholder` | See component TS / Storybook Controls |
-| `size` | See component TS / Storybook Controls |
-| `mode` | 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 |
-| `allowClear` | See component TS / Storybook Controls |
-| `showSearch` | See component TS / Storybook Controls |
-| `block` | See component TS / Storybook Controls |
-| `width` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `options` | `GeoSelectOption[]` | `[]` | — |
+| `label` | `string` | `''` | — |
+| `placeholder` | `string` | `'Chọn giá trị'` | — |
+| `size` | `'default' \| 'small'` | `'default'` | — |
+| `mode` | `'default' \| 'multiple' \| 'tags'` | `'default'` | — |
+| `disabled` | `boolean` | `false` | — |
+| `required` | `boolean` | `false` | — |
+| `error` | `boolean` | `false` | — |
+| `errorMessage` | `string` | `''` | — |
+| `allowClear` | `boolean` | `true` | — |
+| `showSearch` | `boolean` | `false` | — |
+| `block` | `boolean` | `false` | — |
+| `width` | `number \| string \| undefined` | `undefined` | — |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `valueChange` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `valueChange` | `OutputEmitterRef<string \| number \| Array<string \| number> \| null>` | — |
+
+## Related types
+
+From `figma/geo-select/geo-select.types.ts`:
+
+```ts
+export interface GeoSelectOption<T = string | number> {
+  label: string;
+  value: T;
+  disabled?: boolean;
+}
+
+export type GeoSelectSize = 'default' | 'small';
+
+export type GeoSelectMode = 'default' | 'multiple' | 'tags';
+```
+
+## Examples
+
+### Basic
+
 ```html
 <geo-select
   label="Trạng thái"
-  [options]="[{ label: 'Active', value: 1 }, { label: 'Inactive', value: 0 }]"
+  [options]="[{ label: 'Hoạt động', value: 1 }, { label: 'Ngưng', value: 0 }]"
   [(ngModel)]="status"
   [block]="true"
 ></geo-select>
 ```
 
+### Full options
+
+```html
+<geo-select
+  label="Đơn vị"
+  placeholder="Chọn giá trị"
+  mode="default"
+  size="default"
+  [options]="unitOptions"
+  [showSearch]="true"
+  [allowClear]="true"
+  [required]="true"
+  [block]="true"
+  [error]="unitError"
+  errorMessage="Vui lòng chọn đơn vị"
+  [(ngModel)]="unitId"
+  (valueChange)="onUnit($event)"
+></geo-select>
+```
+
+## Tips
+
+- 2–3 lựa chọn độc quyền có thể dùng geo-radio.
+- allowClear mặc định true.
+- [block]="true" trong form.
+## Related components
+
+- [`geo-radio`](./geo-radio.md)
+- [`geo-input`](./geo-input.md)
+- [`geo-form-modal`](./geo-form-modal.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-select.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-select/geo-select.component.ts`
 
-## Storybook
-GEO / related story for `geo-select`
-
-## 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-slider.md

@@ -1,16 +1,23 @@
 # geo-slider
 
-> AI quick reference for **GeoSliderComponent**
+> Complete usage reference for **GeoSliderComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Numeric range slider.
 
 ## Import
+
 ```ts
 import { GeoSliderComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoSliderComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoSliderComponent]
+```
 
 ## Selector
 `geo-slider`
@@ -24,33 +31,75 @@ Continuous numeric value in a range.
 ## Do not use when
 Discrete small sets — use select/radio.
 
+## How to use
+
+Thanh trượt số liên tục. Two-way [(value)] / (valueChange); min/max/step; tipFormatter tùy chỉnh tooltip.
+
+## Binding
+
+**`model()` two-way** on `value`:
+
+```html
+<geo-slider [(value)]="n"></geo-slider>
+```
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `value` | See component TS / Storybook Controls |
-| `min` | See component TS / Storybook Controls |
-| `max` | See component TS / Storybook Controls |
-| `step` | See component TS / Storybook Controls |
-| `disabled` | See component TS / Storybook Controls |
-| `tipFormatter` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `value` | `number` | `0` | Two-way `model()` (supports banana binding). |
+| `min` | `number` | `0` | — |
+| `max` | `number` | `100` | — |
+| `step` | `number` | `1` | — |
+| `disabled` | `boolean` | `false` | — |
+| `tipFormatter` | `((value: number) => string) \| undefined` | `undefined` | — |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `valueChange` | EventEmitter |
 
-## Example
+_None_
+
+
+## Examples
+
+### Basic
+
+```html
+<geo-slider [(value)]="percent" [min]="0" [max]="100"></geo-slider>
+```
+
+### Full options
+
 ```html
-<geo-slider [min]="0" [max]="100" [(ngModel)]="percent"></geo-slider>
+<geo-slider
+  [(value)]="zoom"
+  [min]="0"
+  [max]="100"
+  [step]="5"
+  [disabled]="false"
+  [tipFormatter]="formatZoom"
+  (valueChange)="onZoom($event)"
+></geo-slider>
 ```
 
+## Tips
+
+- Tập rời rạc nhỏ → select/radio.
+- Không phải CVA — dùng [(value)].
+- tipFormatter nhận number → string hiển thị.
+## Related components
+
+- [`geo-input`](./geo-input.md)
+- [`geo-select`](./geo-select.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-slider.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-slider/geo-slider.component.ts`
 
-## Storybook
-GEO / related story for `geo-slider`
-
-## 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.