Init project

.github/skills/convert-template/SKILL.md

@@ -0,0 +1,111 @@
+---
+name: Convert Old Components to New (Auto)
+description: Chuyển đổi các component cũ (Angular) sang component mới (Vue)
+---
+
+# Skill Map: Convert Old Components to New (Auto)
+
+## Quy tắc chung
+- Template này sử dụng ngx-dynamic-hooks (Angular) với custom components
+- Ràng buộc 2 chiều trong ngx-dynamic-hooks sử dụng attribute `update="propertyPath"`
+- Chỉ trả về template string Vue (không kèm script, style, hoặc logic JS/TS)
+- Nếu không có component tương ứng, ghi chú TODO để xử lý thủ công
+- Props binding Angular `[prop]` chuyển sang Vue `:prop`
+---
+
+## Component Mappings
+
+**LƯU Ý QUAN TRỌNG:** Bạn PHẢI đọc file mapping tương ứng từ link để hiểu cách chuyển đổi chính xác mỗi component.
+
+### Layout Components
+- [hoso-page → PageA4/PageA5](mappings/hoso-page.md)
+
+### Text & Display
+- [hs → Interpolation](mappings/hs-interpolation.md)
+
+### Input Components
+- [hs-input-check → Checkbox](mappings/hs-input-check.md)
+- [hs-input-otp → InputOTP](mappings/hs-input-otp.md)
+- [hs-input-text → Textarea](mappings/hs-input-text.md)
+- [hs-input-wrapper → Custom Layout](mappings/hs-input-wrapper.md)
+- [hs-textarea-line → Textarea](mappings/hs-textarea-line.md)
+
+### Date & Time
+- [hs-datepicker → DatePicker](mappings/hs-datepicker.md)
+
+### Selection & Picker
+- [hs-select-line → Select](mappings/hs-select-line.md)
+- [hs-phong-giuong-picker → Custom Layout](mappings/hs-phong-giuong-picker.md)
+
+### Drawing & Signature
+- [hs-paint → Paint](mappings/hs-paint.md)
+- [hs-signature → Signature](mappings/hs-signature.md)
+
+### Medical Components
+- [hs-icd-group → Custom Layout](mappings/hs-icd-group.md)
+
+---
+
+---
+
+## Bước cuối cùng: Tối ưu hóa Context Path
+
+### 1. Xử lý `context.tempData`
+
+Nếu gặp `context.tempData.xxx.yyy`
+
+👉 Bỏ `context.tempData.`
+
+👉 Giữ lại `xxx.yyy`
+
+**Ví dụ:**
+```
+context.tempData.hsBenhAn.HoTen
+→ hsBenhAn.HoTen
+```
+
+### 2. Xử lý `context.value`
+
+Nếu là `context.value` (chỉ 1 cấp)
+
+👉 Đổi thành `data.value`
+
+**Ví dụ:**
+```
+context.value
+→ data.value
+```
+
+### 3. Xử lý `context.xxx`
+
+Nếu là `context.xxx` (không qua tempData, chỉ 1 cấp)
+
+👉 Đổi thành `data.xxx`
+
+**Ví dụ:**
+```
+context.hoTen
+→ data.hoTen
+```
+
+---
+
+## Xử lý Binding Expressions
+
+### Không dùng `concatWith()` - Dùng phép cộng chuỗi trực tiếp
+
+**Old:**
+```
+hsBenhAn.MaKhoaBanDau?.concatWith(' - ')?.concatWith(hsBenhAn.TenKhoaBanDau)
+```
+
+**New:**
+```vue
+{{hsBenhAn.MaKhoaBanDau + ' - ' + hsBenhAn.TenKhoaBanDau}}
+```
+
+Hoặc trong prop binding:
+```vue
+:modelValue="hsBenhAn.MaKhoaBanDau + ' - ' + hsBenhAn.TenKhoaBanDau"
+```
+

.github/skills/convert-template/component-new.md

@@ -0,0 +1,220 @@
+---
+name: Component usage skill
+---
+
+# Component Usage Skill
+
+Tài liệu này cung cấp ví dụ sử dụng và mô tả props cho các component trong thư mục `forms` và `layouts`.
+
+## Checkbox
+
+### Mô tả
+Checkbox cho phép chọn hoặc bỏ chọn một giá trị. Hỗ trợ trạng thái disabled, readonly, hiển thị text trước/sau, và nhiều kích thước.
+
+### Props
+- `modelValue`: Giá trị hiện tại của checkbox (String, Number, Boolean, null)
+- `value`: Giá trị của checkbox khi được chọn (String, Number, Boolean) **(bắt buộc)**
+- `disabled`: Vô hiệu hóa checkbox (Boolean)
+- `readonly`: Chỉ đọc, không cho phép thay đổi (Boolean)
+- `beforeText`: Text hiển thị trước checkbox (String) hoặc slot `#beforeText`
+- `afterText`: Text hiển thị sau checkbox (String) hoặc slot `#afterText`
+- `size`: Kích thước: 'sm', 'md', 'lg', 'xl' (String)
+
+### Ví dụ
+```vue
+<Checkbox v-model="checked" value="yes" size="md" beforeText="Chọn" afterText="Xong" />
+<Checkbox v-model="checked" value="1" disabled />
+<Checkbox v-model="checked" value="A" readonly size="xl" />
+```
+
+---
+
+## DatePicker
+
+### Mô tả
+DatePicker nhập ngày/thời gian với định dạng tùy chỉnh, hỗ trợ mask, disabled, readonly, bước phút. Có thể truyền nhãn qua prop `label` hoặc slot `label`.
+
+### Props
+- `modelValue`: Giá trị ngày (String)
+- `format`: Định dạng ngày, ví dụ 'YYYY-MM-DD' hoặc 'YYYY-MM-DD HH:mm' (String)
+- `placeholder`: Placeholder hiển thị (String)
+- `disabled`: Vô hiệu hóa (Boolean)
+- `readonly`: Chỉ đọc (Boolean)
+- `minuteStep`: Bước phút khi chọn thời gian (Number)
+- `label`: Nhãn hiển thị (String)
+
+### Ví dụ
+```vue
+<DatePicker v-model="date" format="YYYY-MM-DD" label="Ngày sinh" />
+<DatePicker v-model="date" format="YYYY-MM-DD HH:mm" minuteStep="15">
+  <template #label>
+    <b>Ngày/giờ</b>
+  </template>
+</DatePicker>
+<DatePicker v-model="date" disabled />
+```
+
+---
+
+## DatePickerPortal
+
+### Mô tả
+Popup chọn ngày/thời gian, dùng nội bộ cho DatePicker. Không dùng trực tiếp.
+
+---
+
+## InputOTP
+
+### Mô tả
+Nhập mã OTP hoặc chuỗi ký tự theo pattern, hỗ trợ mask, pad, kiểu số hoặc text, disabled, readonly.
+
+### Props
+- `modelValue`: Giá trị hiện tại (String)
+- `type`: Kiểu nhập ('text' | 'number')
+- `readonly`: Chỉ đọc (Boolean)
+- `disabled`: Vô hiệu hóa (Boolean)
+- `maskLength`: Mảng độ dài từng ô (Array)
+- `padChar`: Ký tự pad cho từng ô (String)
+- `padStart`: Ký tự pad đầu chuỗi (String)
+- `style`: CSS style cho wrapper (String)
+- `class`: CSS class cho wrapper (String)
+
+### Ví dụ
+```vue
+<InputOTP v-model="otp" :maskLength="[1,1,1,1]" type="number" />
+<InputOTP v-model="otp" :maskLength="[2,2]" padChar="*" padStart="0" />
+<InputOTP v-model="otp" disabled />
+```
+
+---
+
+## Paint
+
+### Mô tả
+Canvas vẽ, hỗ trợ chọn màu, độ dày nét, ảnh nền, chế độ bút/tẩy, xuất ảnh.
+
+### Props
+- `modelValue`: Ảnh vẽ (base64) (String)
+- `lineWidth`: Độ dày nét vẽ (Number)
+- `color`: Màu nét vẽ (String)
+- `src`: Ảnh nền (String)
+
+### Ví dụ
+```vue
+<Paint v-model="drawing" lineWidth="5" color="#ff0000" />
+<Paint v-model="drawing" src="/assets/bg.png" />
+```
+
+---
+
+## Select
+
+### Mô tả
+Select nhiều hoặc một giá trị, hỗ trợ tìm kiếm, custom label/value, disabled, readonly. Có thể truyền nhãn qua prop `label` hoặc slot `label`.
+
+### Props
+- `modelValue`: Giá trị hiện tại (String, Number, Array)
+- `items`: Danh sách lựa chọn (Array)
+- `bindLabel`: Tên trường hiển thị (String)
+- `bindValue`: Tên trường giá trị (String)
+- `placeholder`: Placeholder (String)
+- `multiple`: Chọn nhiều (Boolean)
+- `disabled`: Vô hiệu hóa (Boolean)
+- `readonly`: Chỉ đọc (Boolean)
+- `label`: Nhãn hiển thị (String)
+
+### Ví dụ
+```vue
+<Select v-model="selected" :items="options" bindLabel="name" bindValue="id" label="Loại" />
+<Select v-model="selected" :items="options" multiple placeholder="Chọn nhiều">
+  <template #label>
+    <span style="color:red">Chọn mục</span>
+  </template>
+</Select>
+<Select v-model="selected" :items="['A','B','C']" readonly />
+```
+
+---
+
+## Signature
+
+### Mô tả
+Hiển thị và ký tên số, hỗ trợ xem lịch sử ký, truyền code vị trí ký.
+
+### Props
+- `code`: Mã vị trí ký (String)
+
+### Ví dụ
+```vue
+<Signature code="K1" />
+<Signature code="K2" />
+```
+
+---
+
+## Textarea
+
+### Mô tả
+Textarea nhập nhiều dòng, hỗ trợ nhãn qua prop hoặc slot, placeholder, disabled, readonly, maxlength, rows, line, suffix, style.
+
+### Props
+- `modelValue`: Giá trị hiện tại (String)
+- `type`: Kiểu nhập ('text' | 'number')
+- `label`: Nhãn hiển thị (String)
+- `placeholder`: Placeholder (String)
+- `disabled`: Vô hiệu hóa (Boolean)
+- `readonly`: Chỉ đọc (Boolean)
+- `maxlength`: Độ dài tối đa (Number, String)
+- `rows`: Số dòng mặc định (Number)
+- `line`: Hiển thị dòng kẻ (Boolean)
+- `suffix`: Đối tượng `{ length, char }` pad cuối (Object)
+- `style`: Style cho wrapper (String/Object)
+
+### Ví dụ
+```vue
+<Textarea v-model="text" label="Ghi chú" rows="3" maxlength="500" />
+<Textarea v-model="text" placeholder="Nhập nội dung" :suffix="{length:5,char:'_'}">
+  <template #label>
+    <span style="color:blue">Nội dung</span>
+  </template>
+</Textarea>
+<Textarea v-model="text" readonly />
+```
+
+---
+
+## PageA4
+
+### Mô tả
+Khung trang A4, hỗ trợ style và chế độ landscape.
+
+### Props
+- `style`: Style cho trang (Object/String)
+- `landscape`: Trang ngang (Boolean)
+
+### Ví dụ
+```vue
+<PageA4 style="padding:20px" landscape>
+  <!-- Nội dung trang -->
+</PageA4>
+```
+
+---
+
+## PageA5
+
+### Mô tả
+Khung trang A5, hỗ trợ style và chế độ landscape.
+
+### Props
+- `style`: Style cho trang (Object/String)
+- `landscape`: Trang ngang (Boolean)
+
+### Ví dụ
+```vue
+<PageA5 style="padding:10px" landscape>
+  <!-- Nội dung trang -->
+</PageA5>
+```
+
+---