@edmicro/olkit 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -39
- package/fesm2022/edmicro-olkit.mjs +5463 -3624
- package/fesm2022/edmicro-olkit.mjs.map +1 -1
- package/olkit.css +1 -1
- package/package.json +1 -1
- package/types/edmicro-olkit.d.ts +557 -55
- package/types/edmicro-olkit.d.ts.map +1 -1
- package/version.txt +2 -2
package/README.md
CHANGED
|
@@ -29,10 +29,9 @@ yarn add @edmicro/olkit
|
|
|
29
29
|
|
|
30
30
|
---
|
|
31
31
|
|
|
32
|
-
## 🎨 2. Cấu hình Styles
|
|
32
|
+
## 🎨 2. Cấu hình Styles (Bắt buộc)
|
|
33
33
|
|
|
34
|
-
|
|
35
|
-
Thêm file `olkit.css` vào mục `styles` trong `angular.json`:
|
|
34
|
+
Thêm file `olkit.css` vào mục `styles` trong file `angular.json` của dự án:
|
|
36
35
|
|
|
37
36
|
```json
|
|
38
37
|
"architect": {
|
|
@@ -40,48 +39,17 @@ Thêm file `olkit.css` vào mục `styles` trong `angular.json`:
|
|
|
40
39
|
"options": {
|
|
41
40
|
"styles": [
|
|
42
41
|
"node_modules/@edmicro/olkit/olkit.css",
|
|
43
|
-
"src/styles.
|
|
42
|
+
"src/styles.scss"
|
|
44
43
|
]
|
|
45
44
|
}
|
|
46
45
|
}
|
|
47
46
|
}
|
|
48
47
|
```
|
|
49
|
-
> ⚠️ **Lưu ý:** Sau khi sửa file `angular.json`, hãy **khởi động lại dev server** (`Ctrl + C` và chạy lại `ng serve` / `bun start`) để Angular nạp stylesheet mới.
|
|
50
48
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
#### **Trường hợp A: Dự án KHÔNG sử dụng Tailwind CSS**
|
|
56
|
-
Trong file `src/styles.scss` (hoặc `src/styles.css`):
|
|
57
|
-
```scss
|
|
58
|
-
@import "@edmicro/olkit/olkit.css";
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
#### **Trường hợp B: Dự án CÓ sử dụng Tailwind CSS v4**
|
|
62
|
-
Trong file `src/styles.css`, cần thêm directive `@source` để Tailwind quét và không loại bỏ (purge) các class của thư viện:
|
|
63
|
-
```css
|
|
64
|
-
@import "tailwindcss";
|
|
65
|
-
|
|
66
|
-
/* Khai báo để Tailwind v4 quét mã nguồn trong thư viện */
|
|
67
|
-
@source "../node_modules/@edmicro/olkit";
|
|
68
|
-
|
|
69
|
-
@import "@edmicro/olkit/olkit.css";
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
#### **Trường hợp C: Dự án CÓ sử dụng Tailwind CSS v3**
|
|
73
|
-
Thêm đường dẫn quét `node_modules` vào `content` trong file `tailwind.config.js`:
|
|
74
|
-
```js
|
|
75
|
-
module.exports = {
|
|
76
|
-
content: [
|
|
77
|
-
"./src/**/*.{html,ts}",
|
|
78
|
-
"./node_modules/@edmicro/olkit/**/*.{js,mjs}"
|
|
79
|
-
],
|
|
80
|
-
theme: {
|
|
81
|
-
extend: {}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
```
|
|
49
|
+
> 💡 **Tại sao chỉ cần thêm vào `angular.json`?**
|
|
50
|
+
> File `olkit.css` là bản CSS độc lập đã được biên dịch sẵn toàn bộ Design Tokens (màu sắc Ôn Luyện, bo góc, bóng đổ) và toàn bộ utility classes. Việc khai báo trực tiếp vào `angular.json` đảm bảo hoạt động tương thích 100% trên mọi dự án Angular (SCSS / CSS, có hoặc không có Tailwind CSS) mà không cần cấu hình thêm bất kỳ plugin hay directive nào.
|
|
51
|
+
>
|
|
52
|
+
> ⚠️ **Lưu ý:** Sau khi lưu file `angular.json`, hãy **khởi động lại dev server** (`Ctrl + C` và chạy lại `ng serve` / `npm start`) để Angular áp dụng stylesheet mới.
|
|
85
53
|
|
|
86
54
|
|
|
87
55
|
---
|