@geoit/ui 0.0.2 → 0.0.4

package/ai/components/geo-stepper.md

@@ -1,16 +1,23 @@
 # geo-stepper
 
-> AI quick reference for **GeoStepperComponent**
+> Complete usage reference for **GeoStepperComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Steps indicator (horizontal default). Active=primary, completed=success+check.
 
 ## Import
+
 ```ts
 import { GeoStepperComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoStepperComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoStepperComponent]
+```
 
 ## Selector
 `geo-stepper`
@@ -24,21 +31,53 @@ Multi-step flows; place inside geo-form-modal body or pages.
 ## Do not use when
 Tabs for peer sections — use geo-tabs.
 
+## How to use
+
+Chỉ báo bước. [steps] {key,label}[]; [activeIndex]; orientation horizontal|vertical. Active=primary, completed=success+check.
+
+## 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 |
-| `orientation` | See component TS / Storybook Controls |
-| `clickable` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `steps` | `GeoStepperStep[]` | `[]` | — |
+| `activeIndex` | `number` | `0` | — |
+| `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | Mặc định horizontal theo design form modal. |
+| `clickable` | `boolean` | `true` | Cho phép click để đổi bước. |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `activeIndexChange` | EventEmitter |
-| `stepSelect` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `activeIndexChange` | `EventEmitter<number>` | — |
+| `stepSelect` | `EventEmitter<{ index: number; step: GeoStepperStep }>` | — |
+
+## Related types
+
+From `figma/geo-stepper/geo-stepper.types.ts`:
+
+```ts
+export interface GeoStepperStep {
+  /** Unique key (optional). */
+  key?: string;
+  /** Label hiển thị bên cạnh số bước. */
+  label: string;
+  /** Disable click chọn bước. */
+  disabled?: boolean;
+}
+
+export type GeoStepperOrientation = 'vertical' | 'horizontal';
+```
+
+## Examples
+
+### Basic
+
 ```html
 <geo-stepper
   [steps]="[
@@ -51,13 +90,37 @@ Tabs for peer sections — use geo-tabs.
 ></geo-stepper>
 ```
 
+### Full options
+
+```html
+<geo-stepper
+  [steps]="steps"
+  [activeIndex]="activeIndex"
+  orientation="vertical"
+  [clickable]="true"
+  (activeIndexChange)="activeIndex = $event"
+  (stepSelect)="onStepSelect($event)"
+></geo-stepper>
+```
+
+## Tips
+
+- Trong dialog: đặt trong geo-form-modal body.
+- Wizard trang: dùng geo-step-form-layout.
+- clickable=false khi bắt buộc đi tuần tự.
+## Related components
+
+- [`geo-form-modal`](./geo-form-modal.md)
+- [`geo-step-form-layout`](./geo-step-form-layout.md)
+- [`geo-tabs`](./geo-tabs.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-stepper.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-stepper/geo-stepper.component.ts`
 
-## Storybook
-GEO / related story for `geo-stepper`
-
-## 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-table-filter.md

@@ -1,16 +1,24 @@
 # geo-table-filter
 
-> AI quick reference for **GeoTableFilterComponent**
+> Complete usage reference for **GeoTableFilterComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Table filter bar with search + advanced filters.
 
 ## Import
+
 ```ts
 import { GeoTableFilterComponent } from '@geoit/ui';
+import { FormsModule } from '@angular/forms'; // when using [(ngModel)]
 ```
 
-Standalone component — add to `imports: [GeoTableFilterComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoTableFilterComponent, FormsModule]
+```
 
 ## Selector
 `geo-table-filter`
@@ -24,42 +32,96 @@ Above geo-table for query/filter UX.
 ## Do not use when
 Standalone forms unrelated to tables.
 
+## How to use
+
+Thanh lọc bảng: ô tìm + bộ lọc nâng cao (ng-content). (search)/(reset); advancedExpanded + advancedFilterCount.
+
+## Binding
+
+Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `columns` | See component TS / Storybook Controls |
-| `responsiveColumns` | See component TS / Storybook Controls |
-| `responsiveCollapse` | See component TS / Storybook Controls |
-| `mobileBreakpoint` | See component TS / Storybook Controls |
-| `gap` | See component TS / Storybook Controls |
-| `searchLabel` | See component TS / Storybook Controls |
-| `searchLoading` | See component TS / Storybook Controls |
-| `showAdvancedToggle` | See component TS / Storybook Controls |
-| `showReset` | See component TS / Storybook Controls |
-| `advancedExpanded` | See component TS / Storybook Controls |
-| `advancedFilterCount` | See component TS / Storybook Controls |
-| `filterToggleTitle` | See component TS / Storybook Controls |
-| `resetTitle` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `columns` | `number` | `4` | Số cột field mỗi hàng (mặc định 4 → tổng 5 cột gồm actions). Ví dụ: 4 field + columns=2 → 2 hàng × 2 cột field (+ 1 cột actions). |
+| `responsiveColumns` | `boolean` | `true` | Khi `true` (mặc định): số cột thực tế ≤ `columns` theo breakpoint. Khi `false`: luôn dùng đúng `columns`. |
+| `responsiveCollapse` | `boolean` | `true` | Đưa actions lên hàng đầu khi màn hẹp (stacked). |
+| `mobileBreakpoint` | `number` | `1024` | Breakpoint chuyển layout stacked (px). |
+| `gap` | `number` | `15` | Khoảng cách grid (px). |
+| `searchLabel` | `string` | `'Tìm kiếm'` | — |
+| `searchLoading` | `boolean` | `false` | — |
+| `showAdvancedToggle` | `boolean` | `true` | Hiện nút mở/đóng slot `[advanced]`. |
+| `showReset` | `boolean` | `true` | — |
+| `advancedExpanded` | `boolean` | `false` | Mở panel field nâng cao (`[advanced]`). |
+| `advancedFilterCount` | `number` | `0` | Số field advanced đang có giá trị — hiện badge trên nút expand. Parent tự tính (vd. `countFilledFilters(query, ADVANCED_KEYS)`). |
+| `filterToggleTitle` | `string` | `'Bộ lọc nâng cao'` | — |
+| `resetTitle` | `string` | `'Xóa bộ lọc'` | — |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `search` | EventEmitter |
-| `reset` | EventEmitter |
-| `advancedExpandedChange` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `search` | `EventEmitter<void>` | — |
+| `reset` | `EventEmitter<void>` | — |
+| `advancedExpandedChange` | `EventEmitter<boolean>` | — |
+
+
+## Examples
+
+### Basic
+
 ```html
 <geo-table-filter (search)="onSearch()" (reset)="onReset()"></geo-table-filter>
 ```
 
+### Full options
+
+```html
+<geo-table-filter
+  [columns]="4"
+  [responsiveColumns]="true"
+  [responsiveCollapse]="true"
+  [mobileBreakpoint]="1024"
+  [gap]="15"
+  searchLabel="Tìm kiếm"
+  [searchLoading]="searching"
+  [showAdvancedToggle]="true"
+  [showReset]="true"
+  [(advancedExpanded)]="advancedOpen"
+  [advancedFilterCount]="activeFilterCount"
+  filterToggleTitle="Bộ lọc nâng cao"
+  resetTitle="Xóa bộ lọc"
+  (search)="onSearch()"
+  (reset)="onReset()"
+>
+  <geo-select label="Trạng thái" [options]="statusOptions" [(ngModel)]="status" [block]="true"></geo-select>
+  <geo-date-range-picker label="Thời gian" [(ngModel)]="range" [block]="true"></geo-date-range-picker>
+</geo-table-filter>
+```
+
+## Tips
+
+- Đặt field lọc nâng cao trong ng-content khi expanded.
+- responsiveColumns/collapse cho mobile.
+- searchLoading khi đang gọi API.
+## Related components
+
+- [`geo-table`](./geo-table.md)
+- [`geo-table-toolbar`](./geo-table-toolbar.md)
+- [`geo-input`](./geo-input.md)
+- [`geo-select`](./geo-select.md)
+- [`geo-date-range-picker`](./geo-date-range-picker.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-table-filter.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-table/geo-table-filter/geo-table-filter.component.ts`
 
-## Storybook
-GEO / related story for `geo-table-filter`
-
-## 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-table-pagination.md

@@ -1,16 +1,23 @@
 # geo-table-pagination
 
-> AI quick reference for **GeoTablePaginationComponent**
+> Complete usage reference for **GeoTablePaginationComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Table-specific pagination footer (range label + size).
 
 ## Import
+
 ```ts
 import { GeoTablePaginationComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoTablePaginationComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoTablePaginationComponent]
+```
 
 ## Selector
 `geo-table-pagination`
@@ -24,36 +31,79 @@ Custom table footers; geo-table has built-in paging too.
 ## Do not use when
 Non-table paging — use geo-pagination.
 
+## How to use
+
+Footer phân trang riêng cho bảng (nhãn khoảng + đổi page size). [pageIndex]/[pageSize]/[total]; showTotalRange mặc định true.
+
+## 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 |
-| `pageSizeOptions` | See component TS / Storybook Controls |
-| `showSizeChanger` | See component TS / Storybook Controls |
-| `hideOnSinglePage` | See component TS / Storybook Controls |
-| `showTotalRange` | See component TS / Storybook Controls |
-| `sizeLabel` | 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` | — |
+| `pageSizeOptions` | `number[]` | `DEFAULT_UI_TABLE_PAGE_SIZE_OPTIONS` | — |
+| `showSizeChanger` | `boolean` | `true` | — |
+| `hideOnSinglePage` | `boolean` | `false` | — |
+| `showTotalRange` | `boolean` | `true` | — |
+| `sizeLabel` | `string` | `'Hiển thị'` | — |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `pageIndexChange` | EventEmitter |
-| `pageSizeChange` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `pageIndexChange` | `EventEmitter<number>` | — |
+| `pageSizeChange` | `EventEmitter<number>` | — |
+
+
+## Examples
+
+### Basic
+
 ```html
 <geo-table-pagination [pageIndex]="1" [pageSize]="10" [total]="200"></geo-table-pagination>
 ```
 
+### Full options
+
+```html
+<geo-table-pagination
+  [pageIndex]="pageIndex"
+  [pageSize]="pageSize"
+  [total]="total"
+  [pageSizeOptions]="[10, 20, 50, 100]"
+  [showSizeChanger]="true"
+  [hideOnSinglePage]="false"
+  [showTotalRange]="true"
+  sizeLabel="Hiển thị"
+  (pageIndexChange)="pageIndex = $event"
+  (pageSizeChange)="pageSize = $event"
+></geo-table-pagination>
+```
+
+## Tips
+
+- geo-table đã có pagination tích hợp — dùng component này khi custom layout.
+- sizeLabel mặc định 'Hiển thị'.
+- pageSizeOptions mặc định [10,20,50,100].
+## Related components
+
+- [`geo-table`](./geo-table.md)
+- [`geo-pagination`](./geo-pagination.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-table-pagination.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-table/geo-table-pagination/geo-table-pagination.component.ts`
 
-## Storybook
-GEO / related story for `geo-table-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-table-toolbar.md

@@ -1,16 +1,23 @@
 # geo-table-toolbar
 
-> AI quick reference for **GeoTableToolbarComponent**
+> Complete usage reference for **GeoTableToolbarComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Table toolbar: result count, delete/export/add, column toggle.
 
 ## Import
+
 ```ts
 import { GeoTableToolbarComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoTableToolbarComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoTableToolbarComponent]
+```
 
 ## Selector
 `geo-table-toolbar`
@@ -24,41 +31,89 @@ Above geo-table for bulk actions.
 ## Do not use when
 Page header actions unrelated to table.
 
+## How to use
+
+Toolbar danh sách: số kết quả, xóa/xuất/thêm, ẩn hiện cột. (addClick)/(deleteClick)/(exportClick)/(columnApply).
+
+## Binding
+
+Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `resultLabel` | See component TS / Storybook Controls |
-| `resultCount` | See component TS / Storybook Controls |
-| `selectedCount` | See component TS / Storybook Controls |
-| `showDelete` | See component TS / Storybook Controls |
-| `showExport` | See component TS / Storybook Controls |
-| `showColumnToggle` | See component TS / Storybook Controls |
-| `showAdd` | See component TS / Storybook Controls |
-| `addLabel` | See component TS / Storybook Controls |
-| `columnItems` | See component TS / Storybook Controls |
-| `columnStorageKey` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `resultLabel` | `string` | `''` | — |
+| `resultCount` | `number \| null` | `null` | — |
+| `selectedCount` | `number` | `0` | — |
+| `showDelete` | `boolean` | `true` | — |
+| `showExport` | `boolean` | `true` | — |
+| `showColumnToggle` | `boolean` | `true` | — |
+| `showAdd` | `boolean` | `true` | — |
+| `addLabel` | `string` | `'Thêm mới'` | — |
+| `columnItems` | `GeoColumnPickerItem[]` | `[]` | — |
+| `columnStorageKey` | `string` | — | Key lưu trạng thái ẩn/hiện cột trong sessionStorage |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `deleteClick` | EventEmitter |
-| `exportClick` | EventEmitter |
-| `toggleColumns` | EventEmitter |
-| `columnApply` | EventEmitter |
-| `addClick` | EventEmitter |
-
-## Example
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `deleteClick` | `EventEmitter<void>` | — |
+| `exportClick` | `EventEmitter<void>` | — |
+| `toggleColumns` | `EventEmitter<void>` | — |
+| `columnApply` | `EventEmitter<GeoColumnPickerApplyPayload>` | — |
+| `addClick` | `EventEmitter<void>` | — |
+
+
+## Examples
+
+### Basic
+
 ```html
 <geo-table-toolbar [resultCount]="20" [showAdd]="true" (addClick)="add()"></geo-table-toolbar>
 ```
 
+### Full options
+
+```html
+<geo-table-toolbar
+  resultLabel="Kết quả"
+  [resultCount]="total"
+  [selectedCount]="selectedKeys.length"
+  [showDelete]="true"
+  [showExport]="true"
+  [showColumnToggle]="true"
+  [showAdd]="true"
+  addLabel="Thêm mới"
+  [columnItems]="columnPickerItems"
+  columnStorageKey="ho-so-columns"
+  (deleteClick)="onBulkDelete()"
+  (exportClick)="onExport()"
+  (columnApply)="onColumns($event)"
+  (addClick)="openCreate()"
+></geo-table-toolbar>
+```
+
+## Tips
+
+- selectedCount > 0 để bật xóa hàng loạt.
+- columnItems + columnStorageKey cho column picker tích hợp.
+- Đặt ngay trên geo-table.
+## Related components
+
+- [`geo-table`](./geo-table.md)
+- [`geo-column-picker`](./geo-column-picker.md)
+- [`geo-button`](./geo-button.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-table-toolbar.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-table/geo-table-toolbar/geo-table-toolbar.component.ts`
 
-## Storybook
-GEO / related story for `geo-table-toolbar`
-
-## 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.