@geoit/ui 0.0.2 → 0.0.4

package/ai/recipes.md

@@ -1,7 +1,26 @@
-# GEO UI — Recipes (AI)
+# GEO UI — Recipes
 
 Copy-paste patterns for common screens. Adjust labels/bindings only.
 
+Import what you need:
+
+```ts
+import {
+  GeoButtonComponent,
+  GeoInputComponent,
+  GeoFormModalComponent,
+  GeoStepperComponent,
+  GeoBreadcrumbComponent,
+  GeoPageTitleComponent,
+  GeoTableComponent,
+  GeoTableToolbarComponent,
+  GeoToastService,
+  GeoStatusTagComponent,
+  GeoTypographyComponent,
+  GeoConfirmModalComponent,
+} from '@geoit/ui';
+```
+
 ## 1. Form modal (single step)
 
 ```html
@@ -20,6 +39,12 @@ Copy-paste patterns for common screens. Adjust labels/bindings only.
   <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;">
     <geo-input label="Mã" [required]="true" [block]="true" [(ngModel)]="code"></geo-input>
     <geo-input label="Tên" [required]="true" [block]="true" [(ngModel)]="name"></geo-input>
+    <geo-select
+      label="Trạng thái"
+      [options]="[{ label: 'Active', value: 1 }, { label: 'Inactive', value: 0 }]"
+      [(ngModel)]="status"
+      [block]="true"
+    ></geo-select>
   </div>
 </geo-form-modal>
 ```
@@ -60,6 +85,10 @@ steps = [
   { key: 'info', label: '1. Thông tin phiếu mượn' },
   { key: 'confirm', label: '2. Xác nhận yêu cầu' },
 ];
+activeIndex = 0;
+get isLast(): boolean {
+  return this.activeIndex >= this.steps.length - 1;
+}
 ```
 
 ## 3. Page header: breadcrumb + title
@@ -85,12 +114,35 @@ constructor(private toast: GeoToastService) {}
 save(): void {
   this.toast.success('Thành công!', 'Đã lưu hồ sơ.');
 }
+
+fail(): void {
+  this.toast.error('Lỗi!', 'Không thể lưu.');
+}
+```
+
+## 5. Confirm delete
+
+```html
+<geo-button appearance="primary" color="danger" (clicked)="confirmOpen = true">Xóa</geo-button>
+
+<geo-confirm-modal
+  [visible]="confirmOpen"
+  title="Xóa hồ sơ?"
+  message="Hành động không thể hoàn tác."
+  confirmText="Xóa"
+  (confirm)="onDelete()"
+  (visibleChange)="confirmOpen = $event"
+></geo-confirm-modal>
 ```
 
-## 5. Table list (minimal)
+## 6. Table list (toolbar + table)
 
 ```html
-<geo-table-toolbar [resultCount]="total" [showAdd]="true" (addClick)="openCreate()"></geo-table-toolbar>
+<geo-table-toolbar
+  [resultCount]="total"
+  [showAdd]="true"
+  (addClick)="openCreate()"
+></geo-table-toolbar>
 
 <geo-table
   [columns]="columns"
@@ -103,9 +155,29 @@ save(): void {
 ></geo-table>
 ```
 
-## 6. Typography + status
+```ts
+columns = [
+  { key: 'code', title: 'Mã', width: 120 },
+  { key: 'name', title: 'Tên' },
+  { key: 'status', title: 'Trạng thái' },
+];
+```
+
+## 7. Typography + status
 
 ```html
 <geo-typography variant="h4" [strong]="true">1. Thông tin cá nhân</geo-typography>
 <geo-status-tag status="success" label="Đã duyệt"></geo-status-tag>
 ```
+
+## 8. Tabs with content
+
+```html
+<geo-tabs
+  [items]="[{ key: 'info', title: 'Thông tin' }, { key: 'files', title: 'Tệp đính kèm' }]"
+  [(selectedKey)]="tab"
+>
+  <ng-template uiTab="info">…</ng-template>
+  <ng-template uiTab="files">…</ng-template>
+</geo-tabs>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoit/ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "GEO UI — Angular 18 + ng-zorro design system components",
   "peerDependencies": {
     "@angular/animations": "^18.2.0",