@geoit/ui 0.0.2 → 0.0.4

package/ai/components/geo-table.md

@@ -1,16 +1,23 @@
 # geo-table
 
-> AI quick reference for **GeoTableComponent**
+> Complete usage reference for **GeoTableComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Data table with pagination, selection, row actions, mobile card mode.
 
 ## Import
+
 ```ts
 import { GeoTableComponent } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoTableComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoTableComponent]
+```
 
 ## Selector
 `geo-table`
@@ -24,75 +31,203 @@ List/index screens with structured rows.
 ## Do not use when
 Simple key-value detail — use typography/grid.
 
+## How to use
+
+Bảng dữ liệu: [columns] GeoTableColumn[] + [data]. Hỗ trợ renderAs index|status|actions, phân trang, selection, mobile card.
+
+## Binding
+
+Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `columns` | See component TS / Storybook Controls |
-| `data` | See component TS / Storybook Controls |
-| `loading` | See component TS / Storybook Controls |
-| `bordered` | See component TS / Storybook Controls |
-| `outerBordered` | See component TS / Storybook Controls |
-| `size` | See component TS / Storybook Controls |
-| `striped` | See component TS / Storybook Controls |
-| `clickable` | See component TS / Storybook Controls |
-| `tableLayout` | See component TS / Storybook Controls |
-| `showPagination` | See component TS / Storybook Controls |
-| `frontPagination` | See component TS / Storybook Controls |
-| `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 |
-| `showQuickJumper` | See component TS / Storybook Controls |
-| `hideOnSinglePage` | See component TS / Storybook Controls |
-| `simplePagination` | See component TS / Storybook Controls |
-| `paginationPosition` | See component TS / Storybook Controls |
-| `scroll` | See component TS / Storybook Controls |
-| `scrollY` | See component TS / Storybook Controls |
-| `autoScroll` | See component TS / Storybook Controls |
-| `tableTitle` | See component TS / Storybook Controls |
-| `footer` | See component TS / Storybook Controls |
-| `emptyText` | See component TS / Storybook Controls |
-| `showTotalRange` | See component TS / Storybook Controls |
-| `selectable` | See component TS / Storybook Controls |
-| `rowKey` | See component TS / Storybook Controls |
-| `selectedKeys` | See component TS / Storybook Controls |
-| `mobileTitleKey` | See component TS / Storybook Controls |
-| `mobileCardView` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `columns` | `GeoTableColumn[]` | `[]` | — |
+| `data` | `Record<string, unknown>[]` | `[]` | — |
+| `loading` | `boolean` | `false` | — |
+| `bordered` | `boolean` | `true` | — |
+| `outerBordered` | `boolean` | `false` | — |
+| `size` | `NzTableSize` | `'middle'` | — |
+| `striped` | `boolean` | `true` | — |
+| `clickable` | `boolean` | `true` | — |
+| `tableLayout` | `'auto' \| 'fixed'` | `'auto'` | — |
+| `showPagination` | `boolean` | `true` | — |
+| `frontPagination` | `boolean` | `true` | — |
+| `pageIndex` | `number` | `1` | — |
+| `pageSize` | `number` | `10` | — |
+| `total` | `number` | — | — |
+| `pageSizeOptions` | `number[]` | `DEFAULT_UI_TABLE_PAGE_SIZE_OPTIONS` | — |
+| `showSizeChanger` | `boolean` | `false` | — |
+| `showQuickJumper` | `boolean` | `false` | — |
+| `hideOnSinglePage` | `boolean` | `false` | — |
+| `simplePagination` | `boolean` | `false` | — |
+| `paginationPosition` | `'top' \| 'bottom' \| 'both'` | `'bottom'` | — |
+| `scroll` | `{ x?: string; y?: string }` | `{}` | — |
+| `scrollY` | `string` | — | — |
+| `autoScroll` | `boolean` | `false` | Tự bật scroll ngang theo tổng width cột. Khi có cột `fixed`, scroll.x luôn được tính (bắt buộc với nz-table fixed). |
+| `tableTitle` | `string` | — | — |
+| `footer` | `string` | — | — |
+| `emptyText` | `string` | `'Không có dữ liệu'` | — |
+| `showTotalRange` | `boolean` | `false` | — |
+| `selectable` | `boolean` | `false` | — |
+| `rowKey` | `string` | `'id'` | — |
+| `selectedKeys` | `string[]` | `[]` | — |
+| `mobileTitleKey` | `string` | — | Mobile card: key cột làm tiêu đề. Ưu tiên hơn `column.mobileTitle`; nếu không set thì lấy cột dữ liệu đầu tiên. |
+| `mobileCardView` | `boolean` | `true` | Bật/tắt chuyển card trên mobile (mặc định bật). |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `rowClick` | EventEmitter |
-| `rowEdit` | EventEmitter |
-| `rowMore` | EventEmitter |
-| `rowAction` | EventEmitter |
-| `pageIndexChange` | EventEmitter |
-| `pageSizeChange` | EventEmitter |
-| `queryParams` | EventEmitter |
-| `currentPageDataChange` | EventEmitter |
-| `selectedKeysChange` | EventEmitter |
-| `selectionChange` | EventEmitter |
-
-## Example
+
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `rowClick` | `EventEmitter<Record<string, unknown>>` | — |
+| `rowEdit` | `EventEmitter<Record<string, unknown>>` | — |
+| `rowMore` | `EventEmitter<Record<string, unknown>>` | — |
+| `rowAction` | `EventEmitter<{ row: Record<string, unknown>; action: string }>` | — |
+| `pageIndexChange` | `EventEmitter<number>` | — |
+| `pageSizeChange` | `EventEmitter<number>` | — |
+| `queryParams` | `EventEmitter<NzTableQueryParams>` | — |
+| `currentPageDataChange` | `EventEmitter<readonly Record<string, unknown>[]>` | — |
+| `selectedKeysChange` | `EventEmitter<string[]>` | — |
+| `selectionChange` | `EventEmitter<Record<string, unknown>[]>` | — |
+
+## Related types
+
+From `figma/geo-table/geo-table.types.ts`:
+
+```ts
+export interface GeoTableFilter {
+  text: string;
+  value: string;
+}
+
+export interface GeoTableColumn {
+  key: string;
+  title: string;
+  width?: string;
+  /** Căn lề ô dữ liệu — nếu không set sẽ suy ra từ `dataType` / `renderAs` */
+  align?: 'left' | 'center' | 'right';
+  /** Kiểu dữ liệu để áp dụng quy tắc căn lề mặc định */
+  dataType?: GeoTableColumnDataType;
+  sortable?: boolean;
+  sortOrder?: 'ascend' | 'descend' | null;
+  sortFn?: (a: Record<string, unknown>, b: Record<string, unknown>) => number;
+  filters?: GeoTableFilter[];
+  filterMultiple?: boolean;
+  fixed?: 'left' | 'right';
+  ellipsis?: boolean;
+  wrap?: boolean;
+  renderAs?: GeoTableCellRender;
+  statusLabelKey?: string;
+  actions?: GeoRowAction[];
+  /**
+   * Resolve actions theo từng dòng (vd. ẩn/hiện theo trạng thái).
+   * Nếu có thì ưu tiên hơn `actions`.
+   */
+  resolveActions?: (row: Record<string, unknown>) => GeoRowAction[];
+  /** Action key ưu tiên hiển thị khi có > 2 thao tác (mặc định: edit) */
+  primaryActionKey?: string;
+  visible?: boolean;
+  /**
+   * Mobile card: dùng cột này làm tiêu đề card.
+   * Nếu không cột nào set, lấy cột dữ liệu đầu tiên (không phải index/actions).
+   */
+  mobileTitle?: boolean;
+  /** Mobile card: ẩn cột khỏi body card. */
+  mobileHidden?: boolean;
+}
+
+export type GeoTableCellRender = 'text' | 'index' | 'status' | 'actions';
+
+export type GeoTableColumnDataType = 'text' | 'number' | 'date';
+
+export type GeoTablePaginationPosition = 'top' | 'bottom' | 'both';
+
+export const UI_TABLE_MOBILE_BREAKPOINT = 767.98;
+
+export const DEFAULT_UI_TABLE_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+```
+
+## Examples
+
+### Columns TS
+
+```ts
+import { GeoTableColumn } from '@geoit/ui';
+
+columns: GeoTableColumn[] = [
+  { key: 'index', title: 'STT', width: '72px', align: 'center', renderAs: 'index' },
+  { key: 'code', title: 'Mã', width: '120px', dataType: 'text' },
+  { key: 'name', title: 'Tên hồ sơ', dataType: 'text' },
+  { key: 'status', title: 'Trạng thái', width: '150px', renderAs: 'status', statusLabelKey: 'statusLabel' },
+  {
+    key: 'actions',
+    title: 'Thao tác',
+    width: '110px',
+    align: 'center',
+    renderAs: 'actions',
+    actions: [
+      { key: 'edit', icon: 'edit', title: 'Chỉnh sửa' },
+      { key: 'delete', icon: 'delete', title: 'Xóa', danger: true },
+    ],
+  },
+];
+
+rows = [
+  { id: '1', code: 'HS-001', name: 'Hồ sơ A', status: 'success', statusLabel: 'Đã duyệt' },
+  { id: '2', code: 'HS-002', name: 'Hồ sơ B', status: 'warning', statusLabel: 'Chờ xử lý' },
+];
+```
+
+### Template
+
 ```html
 <geo-table
   [columns]="columns"
   [data]="rows"
+  [loading]="loading"
+  [bordered]="true"
+  [striped]="true"
+  [showPagination]="true"
+  [frontPagination]="false"
+  [pageIndex]="pageIndex"
+  [pageSize]="pageSize"
   [total]="total"
-  [pageIndex]="page"
-  [pageSize]="10"
-  (pageIndexChange)="onPage($event)"
+  [showSizeChanger]="true"
+  [selectable]="true"
+  rowKey="id"
+  [(selectedKeys)]="selectedKeys"
+  emptyText="Không có dữ liệu"
+  (pageIndexChange)="pageIndex = $event; load()"
+  (pageSizeChange)="pageSize = $event; load()"
+  (rowAction)="onRowAction($event)"
+  (rowClick)="onRowClick($event)"
 ></geo-table>
 ```
 
+## Tips
+
+- Khai báo columns TS với renderAs cho STT / trạng thái / thao tác.
+- Ghép geo-table-toolbar + geo-table-filter phía trên.
+- frontPagination=false khi phân trang server (set total).
+## Related components
+
+- [`geo-table-toolbar`](./geo-table-toolbar.md)
+- [`geo-table-filter`](./geo-table-filter.md)
+- [`geo-table-pagination`](./geo-table-pagination.md)
+- [`geo-row-actions`](./geo-row-actions.md)
+- [`geo-status-tag`](./geo-status-tag.md)
+- [`geo-column-picker`](./geo-column-picker.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-table.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-table/geo-table.component.ts`
 
-## Storybook
-GEO / related story for `geo-table`
-
-## 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-tabs.md

@@ -1,16 +1,23 @@
 # geo-tabs
 
-> AI quick reference for **GeoTabsComponent**
+> Complete usage reference for **GeoTabsComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Tab set with brand ink bar; content via ng-template uiTab.
 
 ## Import
+
 ```ts
-import { GeoTabsComponent } from '@geoit/ui';
+import { GeoTabsComponent, GeoTabDirective } from '@geoit/ui';
 ```
 
-Standalone component — add to `imports: [GeoTabsComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoTabsComponent, GeoTabDirective]
+```
 
 ## Selector
 `geo-tabs`
@@ -24,39 +31,106 @@ Peer sections on one page (info / history / files).
 ## Do not use when
 Ordered wizard steps — use geo-stepper.
 
+## How to use
+
+Tab ngang brand ink. [items] {key,title}[]; nội dung qua <ng-template uiTab="key">. Import GeoTabsComponent + GeoTabDirective.
+
+## Binding
+
+Standalone presentational / container component — drive via Inputs and Outputs (no `ngModel` unless documented).
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `items` | See component TS / Storybook Controls |
-| `type` | See component TS / Storybook Controls |
-| `size` | See component TS / Storybook Controls |
-| `selectedIndex` | See component TS / Storybook Controls |
-| `selectedKey` | See component TS / Storybook Controls |
-| `centered` | See component TS / Storybook Controls |
-| `animated` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `items` | `GeoTabItem[]` | `[]` | — |
+| `type` | `'line' \| 'card'` | `'line'` | — |
+| `size` | `'default' \| 'large' \| 'small'` | `'default'` | — |
+| `selectedIndex` | `number` | `0` | — |
+| `selectedKey` | `string` | — | — |
+| `centered` | `boolean` | `false` | — |
+| `animated` | `boolean` | `true` | — |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `selectedIndexChange` | EventEmitter |
-| `selectedKeyChange` | EventEmitter |
-| `tabChange` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `selectedIndexChange` | `EventEmitter<number>` | — |
+| `selectedKeyChange` | `EventEmitter<string>` | — |
+| `tabChange` | `EventEmitter<{ index: number; key: string }>` | — |
+
+## Related types
+
+From `figma/geo-tabs/geo-tabs.types.ts`:
+
+```ts
+export interface GeoTabItem {
+  key: string;
+  title: string;
+  disabled?: boolean;
+}
+
+export type GeoTabsType = 'line' | 'card';
+
+export type GeoTabsSize = 'default' | 'large' | 'small';
+```
+
+## Examples
+
+### Basic
+
+```html
+<geo-tabs
+  [items]="[{ key: 'info', title: 'Thông tin' }, { key: 'files', title: 'Tệp đính kèm' }]"
+  [(selectedKey)]="tab"
+>
+  <ng-template uiTab="info">Nội dung thông tin</ng-template>
+  <ng-template uiTab="files">Danh sách tệp</ng-template>
+</geo-tabs>
+```
+
+### Full options
+
 ```html
-<geo-tabs [items]="[{ key: 'a', title: 'Tab A' }, { key: 'b', title: 'Tab B' }]" [(selectedIndex)]="i">
-  <ng-template uiTab="a">Content A</ng-template>
-  <ng-template uiTab="b">Content B</ng-template>
+<geo-tabs
+  [items]="[
+    { key: 'info', title: 'Thông tin' },
+    { key: 'history', title: 'Lịch sử' },
+    { key: 'files', title: 'Tệp đính kèm' }
+  ]"
+  type="line"
+  size="default"
+  [selectedIndex]="0"
+  [centered]="false"
+  [animated]="true"
+  (selectedKeyChange)="onTab($event)"
+  (tabChange)="onTabChange($event)"
+>
+  <ng-template uiTab="info">…</ng-template>
+  <ng-template uiTab="history">…</ng-template>
+  <ng-template uiTab="files">…</ng-template>
 </geo-tabs>
 ```
 
+## Tips
+
+- Wizard tuần tự → geo-stepper, không tabs.
+- [(selectedIndex)] hoặc [(selectedKey)].
+- Bắt buộc import GeoTabDirective cho uiTab.
+## Related components
+
+- [`geo-stepper`](./geo-stepper.md)
+- [`geo-typography`](./geo-typography.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-tabs.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-tabs/geo-tabs.component.ts`
 
-## Storybook
-GEO / related story for `geo-tabs`
-
-## 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-textarea.md

@@ -1,16 +1,24 @@
 # geo-textarea
 
-> AI quick reference for **GeoTextareaComponent**
+> Complete usage reference for **GeoTextareaComponent** (`@geoit/ui`)
+>
+> Read this file before using the component. Use **only** the Inputs/Outputs listed here.
 
 ## Summary
 Multi-line text field with label/validation.
 
 ## Import
+
 ```ts
 import { GeoTextareaComponent } from '@geoit/ui';
+import { FormsModule } from '@angular/forms'; // when using [(ngModel)]
 ```
 
-Standalone component — add to `imports: [GeoTextareaComponent]` of the consuming standalone component/module.
+Add to the consuming standalone component:
+
+```ts
+imports: [GeoTextareaComponent, FormsModule]
+```
 
 ## Selector
 `geo-textarea`
@@ -24,36 +32,87 @@ Notes, descriptions, long text.
 ## Do not use when
 Single-line — use geo-input.
 
+## How to use
+
+Ô đa dòng (CVA). label + [(ngModel)]; rows; [block] mặc định true; maxlength + errorMessage khi validate.
+
+## Binding
+
+Supports **ControlValueAccessor**.
+
+```html
+<geo-textarea [(ngModel)]="value"></geo-textarea>
+<!-- or -->
+<geo-textarea formControlName="field"></geo-textarea>
+```
+
+Also import `FormsModule` (template-driven) or `ReactiveFormsModule`.
+
 ## Inputs
-| Input | Notes |
-|-------|-------|
-| `label` | See component TS / Storybook Controls |
-| `placeholder` | See component TS / Storybook Controls |
-| `rows` | 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 |
-| `maxlength` | See component TS / Storybook Controls |
-| `block` | See component TS / Storybook Controls |
+
+Every supported Input (do not invent others):
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `label` | `string` | `''` | — |
+| `placeholder` | `string` | `''` | — |
+| `rows` | `number` | `3` | — |
+| `disabled` | `boolean` | `false` | — |
+| `required` | `boolean` | `false` | — |
+| `error` | `boolean` | `false` | — |
+| `errorMessage` | `string` | `''` | — |
+| `maxlength` | `number` | — | — |
+| `block` | `boolean` | `true` | — |
 
 ## Outputs
-| Output | Notes |
-|--------|-------|
-| `valueChange` | EventEmitter |
 
-## Example
+| Output | Payload | Description |
+|--------|---------|-------------|
+| `valueChange` | `EventEmitter<string>` | — |
+
+
+## Examples
+
+### Basic
+
 ```html
 <geo-textarea label="Ghi chú" [rows]="4" [block]="true" [(ngModel)]="note"></geo-textarea>
 ```
 
+### Full options
+
+```html
+<geo-textarea
+  label="Mô tả"
+  placeholder="Nhập mô tả chi tiết"
+  [rows]="5"
+  [required]="true"
+  [maxlength]="500"
+  [block]="true"
+  [error]="descError"
+  errorMessage="Vui lòng nhập mô tả"
+  [(ngModel)]="description"
+  (valueChange)="onDesc($event)"
+></geo-textarea>
+```
+
+## Tips
+
+- Một dòng → geo-input.
+- Đặt [required] + error khi submit.
+- block=true full width trong modal.
+## Related components
+
+- [`geo-input`](./geo-input.md)
+- [`geo-form-modal`](./geo-form-modal.md)
+## Package path
+`node_modules/@geoit/ui/ai/components/geo-textarea.md`
+
 ## Source
 `projects/geo-ui/src/lib/figma/geo-textarea/geo-textarea.component.ts`
 
-## Storybook
-GEO / related story for `geo-textarea`
-
-## 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.