@libs-ui/services-config-project 0.2.355-9 → 0.2.356-1
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 +200 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,3 +1,201 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Config Project Service
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Service cấu hình toàn cục cho libs-ui: theme color, font family, heading styles, button colors/sizes/statuses/tabs. Inject **một lần** trong `AppComponent` — áp dụng ngay cho toàn bộ ứng dụng thông qua CSS variables.
|
|
4
|
+
|
|
5
|
+
## Tính năng
|
|
6
|
+
|
|
7
|
+
- ✅ Theme color — tự động tính 20+ CSS color variables từ một màu gốc
|
|
8
|
+
- ✅ Custom font family qua FontFace API (load dynamic, không cần @font-face CSS)
|
|
9
|
+
- ✅ Heading styles — 7 levels × 4 weights (h1r → h7b)
|
|
10
|
+
- ✅ Button colors — 14 built-in types + extensible qua `FunctionGetConfigButtonIncludes`
|
|
11
|
+
- ✅ Button status colors — 8 màu mặc định + custom
|
|
12
|
+
- ✅ Button tab colors — 8 màu với background active và badge
|
|
13
|
+
- ✅ Signal reactivity — thay đổi tức thì, không cần reload
|
|
14
|
+
- ✅ Global CSS utility classes (border, shadow, disable, readonly, selection...)
|
|
15
|
+
|
|
16
|
+
## Cài đặt
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @libs-ui/services-config-project
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Import
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
import { LibsUiConfigProjectService } from '@libs-ui/services-config-project';
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Quick Start
|
|
29
|
+
|
|
30
|
+
Inject **một lần** trong `AppComponent` và set config ngay khi khởi động:
|
|
31
|
+
|
|
32
|
+
```typescript
|
|
33
|
+
import { Component, inject, OnInit } from '@angular/core';
|
|
34
|
+
import { LibsUiConfigProjectService } from '@libs-ui/services-config-project';
|
|
35
|
+
|
|
36
|
+
@Component({ standalone: true, ... })
|
|
37
|
+
export class AppComponent implements OnInit {
|
|
38
|
+
private configService = inject(LibsUiConfigProjectService);
|
|
39
|
+
|
|
40
|
+
ngOnInit() {
|
|
41
|
+
// Bước 1: Set brand/theme color
|
|
42
|
+
this.configService.ThemeColor = '#226ff5';
|
|
43
|
+
|
|
44
|
+
// Bước 2 (tùy chọn): Set custom font
|
|
45
|
+
this.configService.ConfigFont = {
|
|
46
|
+
name: 'Inter',
|
|
47
|
+
uri_regular: '/assets/fonts/Inter-Regular.ttf',
|
|
48
|
+
uri_medium: '/assets/fonts/Inter-Medium.ttf',
|
|
49
|
+
uri_semibold: '/assets/fonts/Inter-SemiBold.ttf',
|
|
50
|
+
uri_bold: '/assets/fonts/Inter-Bold.ttf',
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Ví dụ
|
|
57
|
+
|
|
58
|
+
### Thay đổi Theme Color (Multi-tenant)
|
|
59
|
+
|
|
60
|
+
```typescript
|
|
61
|
+
// Sau khi fetch tenant config từ API:
|
|
62
|
+
this.configService.ThemeColor = tenantConfig.brandColor;
|
|
63
|
+
// → 20+ CSS variables được cập nhật ngay lập tức
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Override màu individual
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
this.configService.BorderColor = '#d1d5db';
|
|
70
|
+
this.configService.TextErrorColor = '#dc2626';
|
|
71
|
+
this.configService.BackgroundDisableColor = '#f3f4f6';
|
|
72
|
+
this.configService.TextDisableColor = '#9ca3af';
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Custom button type
|
|
76
|
+
|
|
77
|
+
```typescript
|
|
78
|
+
this.configService.FunctionGetConfigButtonIncludes = (rootColor) => ({
|
|
79
|
+
'button-brand': {
|
|
80
|
+
configStepColor: {
|
|
81
|
+
text: 'white',
|
|
82
|
+
text_hover: 'white',
|
|
83
|
+
text_active: 'white',
|
|
84
|
+
text_disable: '#CDD0D6',
|
|
85
|
+
background: 0,
|
|
86
|
+
background_hover: 20,
|
|
87
|
+
background_active: -20,
|
|
88
|
+
background_disable: '#F8F9FA',
|
|
89
|
+
border: 0,
|
|
90
|
+
border_hover: 20,
|
|
91
|
+
border_active: -20,
|
|
92
|
+
border_disable: '#F8F9FA',
|
|
93
|
+
},
|
|
94
|
+
rootColor: '#e91e63',
|
|
95
|
+
},
|
|
96
|
+
});
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
### Sử dụng CSS Variables trong SCSS
|
|
100
|
+
|
|
101
|
+
```scss
|
|
102
|
+
// Dùng biến thay vì hardcode màu
|
|
103
|
+
.my-button {
|
|
104
|
+
background: var(--libs-ui-color-default);
|
|
105
|
+
border: 1px solid var(--libs-ui-color-light-1);
|
|
106
|
+
|
|
107
|
+
&:hover {
|
|
108
|
+
background: var(--libs-ui-color-light-3);
|
|
109
|
+
}
|
|
110
|
+
&:disabled {
|
|
111
|
+
background: var(--libs-ui-color-background-disable);
|
|
112
|
+
color: var(--libs-ui-color-text-disable);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
## API — Setters
|
|
118
|
+
|
|
119
|
+
| Setter | Type | Default | Mô tả |
|
|
120
|
+
| --------------------------------- | --------------------------- | -------------------- | ------------------------------------------ |
|
|
121
|
+
| `ThemeColor` | `string` | `'#226ff5'` | Màu chủ đạo — sinh 20+ CSS color variables |
|
|
122
|
+
| `BorderColor` | `string` | `'#e6e7ea'` | Màu border (--libs-ui-color-border) |
|
|
123
|
+
| `BorderErrorColor` | `string` | `'#ee2d41'` | Màu border error |
|
|
124
|
+
| `TextErrorColor` | `string` | `'#ff5454'` | Màu text error |
|
|
125
|
+
| `IconHoverDangerColor` | `string` | `'#f15767'` | Màu icon hover danger |
|
|
126
|
+
| `BackgroundDisableColor` | `string` | `'#f8f9fa'` | Background disabled |
|
|
127
|
+
| `TextDisableColor` | `string` | `'#9ca2ad'` | Text color disabled |
|
|
128
|
+
| `TextReadonlyColor` | `string` | `'#071631'` | Text color readonly |
|
|
129
|
+
| `BackgroundReadonlyColor` | `string` | `'#f8f9fa'` | Background readonly |
|
|
130
|
+
| `BackgroundUserSelection` | `string` | `'#00000040'` | Text selection background |
|
|
131
|
+
| `BackgroundList` | `string` | `'#f8f9fa'` | Dropdown/list item background |
|
|
132
|
+
| `BackgroundListHover` | `string` | `'#f8f9fa'` | List item hover background |
|
|
133
|
+
| `BackgroundListHoverDanger` | `string` | `'#fef5f6'` | List item hover danger background |
|
|
134
|
+
| `ConfigFont` | `ILibsUiConfigFontFamily` | SVN-Poppins | Font family + URI files |
|
|
135
|
+
| `ConfigFontHead` | `ILibsUiConfigFontHeading` | 7 levels × 4 weights | Heading styles (h1r→h7b) |
|
|
136
|
+
| `ConfigButtonStatus` | `ILibsUiConfigButtonStatus` | 8 màu | Badge status colors |
|
|
137
|
+
| `ConfigButtonTab` | `ILibsUiConfigButtonTab` | 8 màu | Tab button colors |
|
|
138
|
+
| `FunctionGetConfigButtonIncludes` | `Function` | `() => {}` | Hàm thêm custom button types |
|
|
139
|
+
|
|
140
|
+
## API — Getters
|
|
141
|
+
|
|
142
|
+
| Getter | Returns | Mô tả |
|
|
143
|
+
| -------------------- | ----------------------------------------- | --------------------------------------------- |
|
|
144
|
+
| `ConfigButton` | `Signal<{ [key: string]: IColorButton }>` | Tất cả button color configs (computed Signal) |
|
|
145
|
+
| `ConfigButtonStatus` | `ILibsUiConfigButtonStatus` | Current button status config |
|
|
146
|
+
|
|
147
|
+
## API — Methods
|
|
148
|
+
|
|
149
|
+
| Method | Returns | Mô tả |
|
|
150
|
+
| ------------------------------------------- | ----------------- | ------------------------------------------------------ |
|
|
151
|
+
| `colorStepContrastFromOrigin(step, color?)` | `{ light, dark }` | Tính màu lighter/darker N steps |
|
|
152
|
+
| `setupFontFamily(doc?)` | `void` | Load font vào document (public để dùng cho shadow DOM) |
|
|
153
|
+
|
|
154
|
+
## CSS Variables được tạo ra
|
|
155
|
+
|
|
156
|
+
| Variable | Mô tả |
|
|
157
|
+
| ------------------------------------ | ------------------------------------------- |
|
|
158
|
+
| `--libs-ui-color-default` | ThemeColor gốc |
|
|
159
|
+
| `--libs-ui-color-light-1` | ThemeColor + 20 steps sáng |
|
|
160
|
+
| `--libs-ui-color-light-2` | ThemeColor + 90 steps sáng |
|
|
161
|
+
| `--libs-ui-color-light-3` | ThemeColor + 95 steps sáng (background nhẹ) |
|
|
162
|
+
| `--libs-ui-color-dark` | ThemeColor - 20 steps tối |
|
|
163
|
+
| `--libs-ui-color-border` | BorderColor |
|
|
164
|
+
| `--libs-ui-color-border-error` | BorderErrorColor |
|
|
165
|
+
| `--libs-ui-color-text-error` | TextErrorColor |
|
|
166
|
+
| `--libs-ui-color-text-disable` | TextDisableColor |
|
|
167
|
+
| `--libs-ui-color-background-disable` | BackgroundDisableColor |
|
|
168
|
+
| `--libs-ui-font-family-name` | Font family name |
|
|
169
|
+
|
|
170
|
+
## Types
|
|
171
|
+
|
|
172
|
+
```typescript
|
|
173
|
+
interface ILibsUiConfigFontFamily {
|
|
174
|
+
name: string;
|
|
175
|
+
uri_regular: string;
|
|
176
|
+
uri_medium: string;
|
|
177
|
+
uri_semibold: string;
|
|
178
|
+
uri_bold?: string;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
interface ILibsUiConfigButtonStatus {
|
|
182
|
+
[key: string]: { color: string; background?: string };
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
interface ILibsUiConfigButtonTab {
|
|
186
|
+
[key: string]: { color: string; background?: string; background_badge?: string };
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
interface IColorButton {
|
|
190
|
+
configStepColor: { text, text_hover, text_active, text_disable, background?, ... };
|
|
191
|
+
rootColor: string;
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
## Lưu ý quan trọng
|
|
196
|
+
|
|
197
|
+
- **Inject một lần** trong `AppComponent` — service là `providedIn: 'root'`, mọi nơi đều dùng chung instance
|
|
198
|
+
- **Signal reactivity** — thay đổi bất kỳ setter nào → Angular `effect()` tự chạy lại → CSS vars cập nhật ngay
|
|
199
|
+
- **Font URIs** phải accessible từ browser (URL tuyệt đối hoặc tương đối từ root). Load bằng FontFace API — không cần `@font-face` trong CSS
|
|
200
|
+
- **String.prototype** được extend global (replaceAt, occurrencesByCharacter, indexesOfCharacter) khi service khởi tạo
|
|
201
|
+
- **`configService.ThemeColor = '#e91e63'`** (setter syntax) — không phải method call
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/services-config-project",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-1",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/utils": "0.2.
|
|
6
|
+
"@libs-ui/utils": "0.2.356-1"
|
|
7
7
|
},
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"module": "fesm2022/libs-ui-services-config-project.mjs",
|