@geoit/ui 0.0.2 → 0.0.4

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,115 @@ 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`.
+
 ## 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` | — | — |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `valueChange` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `valueChange` | `EventEmitter<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,77 @@ 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
+
+**Not CVA.** Use two-way `value`:
+
+```html
+<geo-slider [(value)]="n" (valueChange)="onChange($event)"></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` | — |
+| `min` | `number` | `0` | — |
+| `max` | `number` | `100` | — |
+| `step` | `number` | `1` | — |
+| `disabled` | `boolean` | `false` | — |
+| `tipFormatter` | `(value: number)` | `> string` | — |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `valueChange` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `valueChange` | `EventEmitter<number>` | — |
+
+
+## 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.

package/ai/components/geo-status-tag.md

@@ -1,16 +1,23 @@
 # geo-status-tag
 
-> AI quick reference for **GeoStatusTagComponent**
+> Complete usage reference for **GeoStatusTagComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Pill status tag with optional dot (success/error/warning/info/teal/…).
 
 ## Import
+
 ```ts
 import { GeoStatusTagComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoStatusTagComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoStatusTagComponent]
+```
 
 ## Selector
 `geo-status-tag`
@@ -24,28 +31,73 @@ Status in tables, cards, lists.
 ## Do not use when
 Clickable filters — use button/tabs.
 
+## How to use
+
+Tag trạng thái (dot + label). status preset success|primary|error|warning|info|teal|neutral (hoặc legacy completed|cancelled|…); [label] ghi đè text.
+
+## Binding
+
+Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `status` | See component TS / Storybook Controls |
-| `label` | See component TS / Storybook Controls |
-| `showDot` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `status` | `GeoStatusPreset \| string` | `'success'` | Status preset or free-form string. Semantic: success \| primary \| error \| warning \| info \| teal \| neutral Legacy: completed \| cancelled \| in_progress \| adjusting |
+| `label` | `string` | — | Override label text. |
+| `showDot` | `boolean` | `true` | Show leading status dot (design default). |
 
 ## Outputs
+
 _None_
 
-## Example
+## Related types
+
+From `figma/geo-status-tag/geo-status-tag.types.ts`:
+
+```ts
+export type GeoStatusColor = 'success' | 'primary' | 'error' | 'warning' | 'info' | 'teal' | 'neutral';
+
+export type GeoStatusPreset = GeoStatusColor | 'completed' | 'cancelled' | 'in_progress' | 'adjusting';
+
+export const UI_STATUS_LABELS = GEO_STATUS_LABELS;
+```
+
+## Examples
+
+### Basic
+
+```html
+<geo-status-tag status="success" label="Đã duyệt"></geo-status-tag>
+```
+
+### Full options
+
 ```html
-<geo-status-tag status="success" label="Hoạt động"></geo-status-tag>
+<geo-status-tag status="warning" label="Chờ xử lý" [showDot]="true"></geo-status-tag>
+<geo-status-tag status="error" label="Từ chối"></geo-status-tag>
+<geo-status-tag status="in_progress" label="Đang xử lý"></geo-status-tag>
 ```
 
+## Tips
+
+- Trong bảng dùng cột renderAs: 'status'.
+- Không dùng làm filter clickable.
+- showDot mặc định true.
+## Related components
+
+- [`geo-table`](./geo-table.md)
+- [`geo-typography`](./geo-typography.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-status-tag.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-status-tag/geo-status-tag.component.ts`
 
-## Storybook
-GEO / related story for `geo-status-tag`
-
-## 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-step-form-layout.md

@@ -1,16 +1,23 @@
 # geo-step-form-layout
 
-> AI quick reference for **GeoStepFormLayoutComponent**
+> Complete usage reference for **GeoStepFormLayoutComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Full-page multi-step form: vertical stepper + content card + footer actions.
 
 ## Import
+
 ```ts
 import { GeoStepFormLayoutComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoStepFormLayoutComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoStepFormLayoutComponent]
+```
 
 ## Selector
 `geo-step-form-layout`
@@ -24,38 +31,67 @@ Long registration / create wizards as a page.
 ## Do not use when
 Dialogs — use geo-form-modal + geo-stepper.
 
+## How to use
+
+Wizard full-page: stepper dọc + card nội dung + footer Hủy/Trở lại/Lưu/Tiếp theo. [steps] + [activeIndex]; (next)/(previous)/(save)/(cancel).
+
+## Binding
+
+Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `steps` | See component TS / Storybook Controls |
-| `activeIndex` | See component TS / Storybook Controls |
-| `title` | See component TS / Storybook Controls |
-| `clickableSteps` | See component TS / Storybook Controls |
-| `showScrollButtons` | See component TS / Storybook Controls |
-| `showCancel` | See component TS / Storybook Controls |
-| `showPrevious` | See component TS / Storybook Controls |
-| `showSave` | See component TS / Storybook Controls |
-| `showNext` | See component TS / Storybook Controls |
-| `cancelLabel` | See component TS / Storybook Controls |
-| `previousLabel` | See component TS / Storybook Controls |
-| `saveLabel` | See component TS / Storybook Controls |
-| `nextLabel` | See component TS / Storybook Controls |
-| `finishLabel` | See component TS / Storybook Controls |
-| `saveLoading` | See component TS / Storybook Controls |
-| `nextLoading` | See component TS / Storybook Controls |
-| `hideDefaultFooter` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `steps` | `GeoStepperStep[]` | `[]` | — |
+| `activeIndex` | `number` | `0` | — |
+| `title` | `string` | `''` | — |
+| `clickableSteps` | `boolean` | `true` | — |
+| `showScrollButtons` | `boolean` | `true` | Hiện nút ↑/↓ góc phải card (chuyển bước). Mặc định `true`. |
+| `showCancel` | `boolean` | `true` | — |
+| `showPrevious` | `boolean` | `true` | — |
+| `showSave` | `boolean` | `true` | — |
+| `showNext` | `boolean` | `true` | — |
+| `cancelLabel` | `string` | `'Hủy'` | — |
+| `previousLabel` | `string` | `'Trở lại'` | — |
+| `saveLabel` | `string` | `'Lưu'` | — |
+| `nextLabel` | `string` | `'Tiếp theo'` | — |
+| `finishLabel` | `string` | `'Hoàn thành'` | — |
+| `saveLoading` | `boolean` | `false` | — |
+| `nextLoading` | `boolean` | `false` | — |
+| `hideDefaultFooter` | `boolean` | `false` | Ẩn footer actions (dùng slot `[footer]` hoặc không cần nút). |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `activeIndexChange` | EventEmitter |
-| `stepSelect` | EventEmitter |
-| `cancel` | EventEmitter |
-| `previous` | EventEmitter |
-| `save` | EventEmitter |
-| `next` | EventEmitter |
-
-## Example
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `activeIndexChange` | `EventEmitter<number>` | — |
+| `stepSelect` | `EventEmitter<{ index: number; step: GeoStepperStep }>` | — |
+| `cancel` | `EventEmitter<void>` | — |
+| `previous` | `EventEmitter<void>` | — |
+| `save` | `EventEmitter<void>` | — |
+| `next` | `EventEmitter<void>` | — |
+
+## Related types
+
+From `figma/geo-step-form-layout/geo-step-form-layout.types.ts`:
+
+```ts
+export interface GeoStepFormLayoutLabels {
+  back?: string;
+  cancel?: string;
+  save?: string;
+  next?: string;
+  finish?: string;
+}
+```
+
+## Examples
+
+### Basic
+
 ```html
 <geo-step-form-layout
   title="Thêm mới"
@@ -65,17 +101,65 @@ Dialogs — use geo-form-modal + geo-stepper.
   (previous)="goPrev()"
   (cancel)="cancel()"
 >
-  <!-- step content -->
+  <!-- nội dung bước -->
+</geo-step-form-layout>
+```
+
+### Full options
+
+```html
+<geo-step-form-layout
+  title="Đăng ký khai thác"
+  [steps]="[
+    { key: 'info', label: '1. Thông tin' },
+    { key: 'files', label: '2. Tài liệu' },
+    { key: 'confirm', label: '3. Xác nhận' }
+  ]"
+  [activeIndex]="activeIndex"
+  [clickableSteps]="true"
+  [showScrollButtons]="true"
+  [showCancel]="true"
+  [showPrevious]="true"
+  [showSave]="true"
+  [showNext]="true"
+  cancelLabel="Hủy"
+  previousLabel="Trở lại"
+  saveLabel="Lưu"
+  nextLabel="Tiếp theo"
+  finishLabel="Hoàn thành"
+  [saveLoading]="saving"
+  [nextLoading]="validating"
+  (activeIndexChange)="activeIndex = $event"
+  (stepSelect)="onStep($event)"
+  (cancel)="onCancel()"
+  (previous)="goPrev()"
+  (save)="onSave()"
+  (next)="goNext()"
+>
+  @if (activeIndex === 0) {
+    <geo-input label="Tên hồ sơ" [block]="true" [(ngModel)]="name"></geo-input>
+  }
 </geo-step-form-layout>
 ```
 
+## Tips
+
+- Dialog multi-step → geo-form-modal + geo-stepper.
+- finishLabel hiện khi bước cuối (thay nextLabel).
+- hideDefaultFooter nếu tự render footer.
+## Related components
+
+- [`geo-stepper`](./geo-stepper.md)
+- [`geo-form-modal`](./geo-form-modal.md)
+- [`geo-button`](./geo-button.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-step-form-layout.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-step-form-layout/geo-step-form-layout.component.ts`
 
-## Storybook
-GEO / related story for `geo-step-form-layout`
-
-## 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.