@libs-ui/pipes-format-text-capitalize 0.2.356-9 → 0.2.357-0
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
CHANGED
|
@@ -1,14 +1,27 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @libs-ui/pipes-format-text-capitalize
|
|
2
2
|
|
|
3
|
-
Pipe viết hoa chữ cái đầu
|
|
3
|
+
> Pipe Angular viết hoa chữ cái đầu mỗi từ trong chuỗi, hỗ trợ nhiều tùy chọn format linh hoạt.
|
|
4
|
+
|
|
5
|
+
## Giới thiệu
|
|
6
|
+
|
|
7
|
+
`LibsUiPipesFormatTextCapitalizePipe` là một Angular standalone pipe dùng để chuẩn hóa và định dạng chuỗi văn bản bằng cách viết hoa chữ cái đầu tiên của mỗi từ. Pipe là lớp bọc mỏng (thin wrapper) trên hàm `capitalize` từ `@libs-ui/utils`, cho phép sử dụng trực tiếp trong template Angular một cách dễ dàng. Hỗ trợ các tùy chọn như viết thường phần còn lại, loại bỏ emoji, trim khoảng trắng thừa và xóa dấu unicode.
|
|
4
8
|
|
|
5
9
|
## Tính năng
|
|
6
10
|
|
|
7
11
|
- ✅ Viết hoa chữ cái đầu mỗi từ trong chuỗi
|
|
8
|
-
- ✅ Tùy chọn viết thường các ký tự không phải đầu từ (
|
|
9
|
-
- ✅
|
|
10
|
-
- ✅ Trim khoảng trắng và xóa khoảng trắng thừa
|
|
11
|
-
- ✅ Loại bỏ dấu unicode (tiếng Việt)
|
|
12
|
+
- ✅ Tùy chọn viết thường các ký tự không phải đầu từ (chuẩn hóa tên người)
|
|
13
|
+
- ✅ Loại bỏ emoji khỏi chuỗi
|
|
14
|
+
- ✅ Trim khoảng trắng đầu/cuối và xóa khoảng trắng thừa giữa các từ
|
|
15
|
+
- ✅ Loại bỏ dấu unicode (hỗ trợ tiếng Việt không dấu)
|
|
16
|
+
- ✅ Tùy chọn viết hoa toàn bộ ký tự
|
|
17
|
+
- ✅ Standalone pipe — import trực tiếp vào component, không cần NgModule
|
|
18
|
+
|
|
19
|
+
## Khi nào sử dụng
|
|
20
|
+
|
|
21
|
+
- Hiển thị tên người dùng với chữ cái đầu viết hoa (ví dụ: `NGUYEN VAN A` → `Nguyen Van A`)
|
|
22
|
+
- Format tiêu đề, heading trong UI từ dữ liệu API trả về chữ thường hoặc chữ hoa toàn bộ
|
|
23
|
+
- Chuẩn hóa dữ liệu text input từ người dùng trước khi hiển thị
|
|
24
|
+
- Xử lý chuỗi có chứa emoji hoặc ký tự unicode đặc biệt cần làm sạch
|
|
12
25
|
|
|
13
26
|
## Cài đặt
|
|
14
27
|
|
|
@@ -16,145 +29,214 @@ Pipe viết hoa chữ cái đầu tiên của mỗi từ trong chuỗi, hỗ tr
|
|
|
16
29
|
npm install @libs-ui/pipes-format-text-capitalize
|
|
17
30
|
```
|
|
18
31
|
|
|
19
|
-
##
|
|
32
|
+
## Import
|
|
33
|
+
|
|
34
|
+
```typescript
|
|
35
|
+
import { LibsUiPipesFormatTextCapitalizePipe } from '@libs-ui/pipes-format-text-capitalize';
|
|
36
|
+
```
|
|
20
37
|
|
|
21
|
-
|
|
38
|
+
Để sử dụng type `ITextFormatOptions` cho phần options:
|
|
22
39
|
|
|
23
40
|
```typescript
|
|
41
|
+
import { ITextFormatOptions } from '@libs-ui/interfaces-types';
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Ví dụ sử dụng
|
|
45
|
+
|
|
46
|
+
### Ví dụ 1 — Cơ bản (viết hoa chữ cái đầu mỗi từ)
|
|
47
|
+
|
|
48
|
+
```typescript
|
|
49
|
+
import { Component } from '@angular/core';
|
|
24
50
|
import { LibsUiPipesFormatTextCapitalizePipe } from '@libs-ui/pipes-format-text-capitalize';
|
|
25
51
|
|
|
26
52
|
@Component({
|
|
27
|
-
selector: 'app-example',
|
|
53
|
+
selector: 'app-basic-example',
|
|
28
54
|
standalone: true,
|
|
29
55
|
imports: [LibsUiPipesFormatTextCapitalizePipe],
|
|
30
56
|
template: `
|
|
31
57
|
<p>{{ 'hello world' | LibsUiPipesFormatTextCapitalizePipe }}</p>
|
|
32
58
|
<!-- Output: Hello World -->
|
|
59
|
+
|
|
60
|
+
<p>{{ 'angular is awesome' | LibsUiPipesFormatTextCapitalizePipe }}</p>
|
|
61
|
+
<!-- Output: Angular Is Awesome -->
|
|
33
62
|
`,
|
|
34
63
|
})
|
|
35
|
-
export class
|
|
64
|
+
export class BasicExampleComponent {}
|
|
36
65
|
```
|
|
37
66
|
|
|
38
|
-
### Format tên
|
|
67
|
+
### Ví dụ 2 — Format tên người (chuẩn hóa từ chữ hoa toàn bộ)
|
|
39
68
|
|
|
40
69
|
```typescript
|
|
70
|
+
import { Component } from '@angular/core';
|
|
41
71
|
import { ITextFormatOptions } from '@libs-ui/interfaces-types';
|
|
72
|
+
import { LibsUiPipesFormatTextCapitalizePipe } from '@libs-ui/pipes-format-text-capitalize';
|
|
42
73
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
74
|
+
@Component({
|
|
75
|
+
selector: 'app-name-example',
|
|
76
|
+
standalone: true,
|
|
77
|
+
imports: [LibsUiPipesFormatTextCapitalizePipe],
|
|
78
|
+
template: `
|
|
79
|
+
<p>{{ 'NGUYEN VAN A' | LibsUiPipesFormatTextCapitalizePipe:fullNameOptions }}</p>
|
|
80
|
+
<!-- Output: Nguyen Van A -->
|
|
49
81
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
82
|
+
<p>{{ 'tRAN tHI B' | LibsUiPipesFormatTextCapitalizePipe:fullNameOptions }}</p>
|
|
83
|
+
<!-- Output: Tran Thi B -->
|
|
84
|
+
`,
|
|
85
|
+
})
|
|
86
|
+
export class NameExampleComponent {
|
|
87
|
+
fullNameOptions: ITextFormatOptions = {
|
|
88
|
+
lowercaseOtherCharacter: true,
|
|
89
|
+
trim: true,
|
|
90
|
+
removeMultipleSpace: true,
|
|
91
|
+
};
|
|
92
|
+
}
|
|
53
93
|
```
|
|
54
94
|
|
|
55
|
-
### Xử lý emoji
|
|
95
|
+
### Ví dụ 3 — Xử lý chuỗi có emoji
|
|
56
96
|
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
97
|
+
```typescript
|
|
98
|
+
import { Component } from '@angular/core';
|
|
99
|
+
import { ITextFormatOptions } from '@libs-ui/interfaces-types';
|
|
100
|
+
import { LibsUiPipesFormatTextCapitalizePipe } from '@libs-ui/pipes-format-text-capitalize';
|
|
61
101
|
|
|
62
|
-
|
|
102
|
+
@Component({
|
|
103
|
+
selector: 'app-emoji-example',
|
|
104
|
+
standalone: true,
|
|
105
|
+
imports: [LibsUiPipesFormatTextCapitalizePipe],
|
|
106
|
+
template: `
|
|
107
|
+
<p>{{ 'hello 👋 world 🌍' | LibsUiPipesFormatTextCapitalizePipe:emojiOptions }}</p>
|
|
108
|
+
<!-- Output: Hello World -->
|
|
63
109
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
110
|
+
<p>{{ 'chào 😊 mừng 🎉' | LibsUiPipesFormatTextCapitalizePipe:emojiOptions }}</p>
|
|
111
|
+
<!-- Output: Chào Mừng -->
|
|
112
|
+
`,
|
|
113
|
+
})
|
|
114
|
+
export class EmojiExampleComponent {
|
|
115
|
+
emojiOptions: ITextFormatOptions = {
|
|
116
|
+
removeEmoji: true,
|
|
117
|
+
trim: true,
|
|
118
|
+
removeMultipleSpace: true,
|
|
119
|
+
};
|
|
120
|
+
}
|
|
67
121
|
```
|
|
68
122
|
|
|
123
|
+
### Ví dụ 4 — Nhiều tùy chọn kết hợp
|
|
124
|
+
|
|
69
125
|
```typescript
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
126
|
+
import { Component } from '@angular/core';
|
|
127
|
+
import { ITextFormatOptions } from '@libs-ui/interfaces-types';
|
|
128
|
+
import { LibsUiPipesFormatTextCapitalizePipe } from '@libs-ui/pipes-format-text-capitalize';
|
|
129
|
+
|
|
130
|
+
@Component({
|
|
131
|
+
selector: 'app-complex-example',
|
|
132
|
+
standalone: true,
|
|
133
|
+
imports: [LibsUiPipesFormatTextCapitalizePipe],
|
|
134
|
+
template: `
|
|
135
|
+
<p>{{ ' HELLO WORLD example 👋 ' | LibsUiPipesFormatTextCapitalizePipe:complexOptions }}</p>
|
|
136
|
+
<!-- Output: Hello World Example -->
|
|
137
|
+
`,
|
|
138
|
+
})
|
|
139
|
+
export class ComplexExampleComponent {
|
|
140
|
+
complexOptions: ITextFormatOptions = {
|
|
141
|
+
lowercaseOtherCharacter: true,
|
|
142
|
+
trim: true,
|
|
143
|
+
removeMultipleSpace: true,
|
|
144
|
+
removeEmoji: true,
|
|
145
|
+
};
|
|
146
|
+
}
|
|
76
147
|
```
|
|
77
148
|
|
|
78
|
-
### Dùng trong TypeScript
|
|
149
|
+
### Ví dụ 5 — Dùng trong TypeScript (không cần inject pipe)
|
|
79
150
|
|
|
80
|
-
Pipe là thin wrapper của hàm `capitalize` trong `@libs-ui/utils`. Khi cần
|
|
151
|
+
Pipe là thin wrapper của hàm `capitalize` trong `@libs-ui/utils`. Khi cần xử lý trong TypeScript, import và dùng thẳng hàm đó:
|
|
81
152
|
|
|
82
153
|
```typescript
|
|
154
|
+
import { Component } from '@angular/core';
|
|
83
155
|
import { capitalize } from '@libs-ui/utils';
|
|
84
156
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
//
|
|
157
|
+
@Component({
|
|
158
|
+
selector: 'app-ts-example',
|
|
159
|
+
standalone: true,
|
|
160
|
+
template: `
|
|
161
|
+
<p>{{ formattedName }}</p>
|
|
162
|
+
<p>{{ formattedTitle }}</p>
|
|
163
|
+
`,
|
|
164
|
+
})
|
|
165
|
+
export class TsExampleComponent {
|
|
166
|
+
// Gọi trực tiếp trong TypeScript — không cần inject pipe
|
|
167
|
+
formattedName = capitalize('NGUYEN VAN A', {
|
|
168
|
+
lowercaseOtherCharacter: true,
|
|
169
|
+
trim: true,
|
|
170
|
+
});
|
|
171
|
+
// Output: 'Nguyen Van A'
|
|
172
|
+
|
|
173
|
+
formattedTitle = capitalize('hello world', {
|
|
174
|
+
trim: true,
|
|
175
|
+
removeMultipleSpace: true,
|
|
176
|
+
});
|
|
177
|
+
// Output: 'Hello World'
|
|
178
|
+
}
|
|
95
179
|
```
|
|
96
180
|
|
|
97
|
-
##
|
|
98
|
-
|
|
99
|
-
| Công nghệ | Mô tả |
|
|
100
|
-
| ------------------------- | --------------------------------- |
|
|
101
|
-
| Angular 18+ | Pipe transform với standalone API |
|
|
102
|
-
| @libs-ui/utils | capitalize utility function |
|
|
103
|
-
| @libs-ui/interfaces-types | ITextFormatOptions interface |
|
|
181
|
+
## Transform
|
|
104
182
|
|
|
105
|
-
|
|
183
|
+
Pipe nhận một giá trị chuỗi và một object tùy chọn:
|
|
106
184
|
|
|
107
|
-
|
|
185
|
+
```html
|
|
186
|
+
<!-- Cú pháp cơ bản -->
|
|
187
|
+
{{ text | LibsUiPipesFormatTextCapitalizePipe }}
|
|
108
188
|
|
|
189
|
+
<!-- Cú pháp với options -->
|
|
190
|
+
{{ text | LibsUiPipesFormatTextCapitalizePipe:options }}
|
|
109
191
|
```
|
|
110
|
-
LibsUiPipesFormatTextCapitalizePipe
|
|
111
|
-
```
|
|
112
192
|
|
|
113
|
-
|
|
193
|
+
| Tham số | Type | Bắt buộc | Default | Mô tả | Ví dụ |
|
|
194
|
+
|---|---|---|---|---|---|
|
|
195
|
+
| `value` | `string` | Có | — | Chuỗi cần format | `'hello world'` |
|
|
196
|
+
| `options` | `ITextFormatOptions` | Không | `undefined` | Tùy chọn định dạng | `{ trim: true }` |
|
|
197
|
+
|
|
198
|
+
### Các tùy chọn trong `ITextFormatOptions`
|
|
114
199
|
|
|
115
|
-
|
|
|
116
|
-
|
|
117
|
-
|
|
|
118
|
-
|
|
|
200
|
+
| Tùy chọn | Type | Default | Mô tả | Ví dụ kết quả |
|
|
201
|
+
|---|---|---|---|---|
|
|
202
|
+
| `uppercaseOtherCharacter` | `boolean` | `false` | Viết hoa tất cả ký tự (kể cả không phải đầu từ) | `'hello world'` → `'HELLO WORLD'` |
|
|
203
|
+
| `lowercaseOtherCharacter` | `boolean` | `false` | Viết thường các ký tự không phải đầu từ | `'HELLO WORLD'` → `'Hello World'` |
|
|
204
|
+
| `trim` | `boolean` | `false` | Loại bỏ khoảng trắng đầu và cuối chuỗi | `' hello '` → `'hello'` |
|
|
205
|
+
| `removeMultipleSpace` | `boolean` | `false` | Thay thế nhiều khoảng trắng liên tiếp bằng một khoảng | `'hello world'` → `'Hello World'` |
|
|
206
|
+
| `removeEmoji` | `boolean` | `false` | Loại bỏ emoji khỏi chuỗi | `'hello 👋'` → `'Hello '` |
|
|
207
|
+
| `removeUnicode` | `boolean` | `false` | Loại bỏ dấu unicode (bỏ dấu tiếng Việt) | `'Nguyễn Văn A'` → `'Nguyen Van A'` |
|
|
119
208
|
|
|
120
|
-
|
|
209
|
+
## Types & Interfaces
|
|
121
210
|
|
|
122
211
|
```typescript
|
|
212
|
+
import { ITextFormatOptions } from '@libs-ui/interfaces-types';
|
|
213
|
+
|
|
123
214
|
interface ITextFormatOptions {
|
|
124
|
-
uppercaseOtherCharacter?: boolean;
|
|
125
|
-
lowercaseOtherCharacter?: boolean;
|
|
126
|
-
trim?: boolean;
|
|
127
|
-
removeMultipleSpace?: boolean;
|
|
128
|
-
removeEmoji?: boolean;
|
|
129
|
-
removeUnicode?: boolean;
|
|
215
|
+
uppercaseOtherCharacter?: boolean; // Viết hoa tất cả ký tự
|
|
216
|
+
lowercaseOtherCharacter?: boolean; // Viết thường các ký tự không phải đầu từ
|
|
217
|
+
trim?: boolean; // Trim khoảng trắng đầu/cuối
|
|
218
|
+
removeMultipleSpace?: boolean; // Xóa khoảng trắng thừa giữa các từ
|
|
219
|
+
removeEmoji?: boolean; // Xóa emoji
|
|
220
|
+
removeUnicode?: boolean; // Xóa dấu unicode
|
|
130
221
|
}
|
|
131
222
|
```
|
|
132
223
|
|
|
133
|
-
|
|
224
|
+
## Lưu ý quan trọng
|
|
134
225
|
|
|
135
|
-
|
|
136
|
-
<!-- Cơ bản -->
|
|
137
|
-
{{ text | LibsUiPipesFormatTextCapitalizePipe }}
|
|
226
|
+
⚠️ **Mặc định chỉ viết hoa chữ đầu**: Không truyền options, pipe chỉ viết hoa chữ cái đầu mỗi từ và giữ nguyên phần còn lại. Ví dụ: `'hELLO wORLD'` → `'HELLo WORLd'` (không đổi phần sau).
|
|
138
227
|
|
|
139
|
-
|
|
140
|
-
{{ text | LibsUiPipesFormatTextCapitalizePipe:options }}
|
|
141
|
-
```
|
|
228
|
+
⚠️ **`lowercaseOtherCharacter` để chuẩn hóa tên**: Khi cần format tên người từ dữ liệu ALL-CAPS (ví dụ từ API), luôn bật `lowercaseOtherCharacter: true` kết hợp với `trim: true` và `removeMultipleSpace: true`.
|
|
142
229
|
|
|
143
|
-
|
|
230
|
+
⚠️ **`uppercaseOtherCharacter` và `lowercaseOtherCharacter` loại trừ nhau**: Không nên bật cả hai cùng lúc — kết quả sẽ phụ thuộc vào thứ tự xử lý nội bộ và có thể không như mong đợi.
|
|
144
231
|
|
|
145
|
-
|
|
232
|
+
⚠️ **Dùng trong TypeScript**: Nếu cần xử lý trong file `.ts`, hãy import và dùng thẳng hàm `capitalize` từ `@libs-ui/utils` thay vì inject pipe — nhẹ hơn và không cần DI.
|
|
146
233
|
|
|
147
|
-
|
|
148
|
-
# Chạy test cho pipe này
|
|
149
|
-
npx nx test pipes-format-text-capitalize
|
|
150
|
-
npx nx test pipes-format-text-capitalize --no-cache
|
|
151
|
-
```
|
|
234
|
+
⚠️ **Tên pipe trong template**: Tên pipe là `LibsUiPipesFormatTextCapitalizePipe` (tên đầy đủ), không phải `capitalize`. Đây là tên được định nghĩa trong `name` của decorator `@Pipe`.
|
|
152
235
|
|
|
153
236
|
## Demo
|
|
154
237
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
## License
|
|
238
|
+
```bash
|
|
239
|
+
npx nx serve core-ui
|
|
240
|
+
```
|
|
159
241
|
|
|
160
|
-
|
|
242
|
+
Truy cập: http://localhost:4500/pipes/format-text/capitalize
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-pipes-format-text-capitalize.mjs","sources":["../../../../../../libs-ui/pipes/format-text/capitalize/src/capitalize.pipe.ts","../../../../../../libs-ui/pipes/format-text/capitalize/src/libs-ui-pipes-format-text-capitalize.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\nimport { ITextFormatOptions } from '@libs-ui/interfaces-types';\nimport { capitalize } from '@libs-ui/utils';\n\n@Pipe({\n name: 'LibsUiPipesFormatTextCapitalizePipe',\n standalone: true,\n})\nexport class LibsUiPipesFormatTextCapitalizePipe implements PipeTransform {\n transform(value: string, options?: ITextFormatOptions) {\n return capitalize(value, options);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAQa,mCAAmC,CAAA;IAC9C,SAAS,CAAC,KAAa,EAAE,OAA4B,EAAA;AACnD,QAAA,OAAO,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"libs-ui-pipes-format-text-capitalize.mjs","sources":["../../../../../../libs-ui/pipes/format-text/capitalize/src/capitalize.pipe.ts","../../../../../../libs-ui/pipes/format-text/capitalize/src/libs-ui-pipes-format-text-capitalize.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\nimport { ITextFormatOptions } from '@libs-ui/interfaces-types';\nimport { capitalize } from '@libs-ui/utils';\n\n@Pipe({\n name: 'LibsUiPipesFormatTextCapitalizePipe',\n standalone: true,\n})\nexport class LibsUiPipesFormatTextCapitalizePipe implements PipeTransform {\n transform(value: string, options?: ITextFormatOptions) {\n return capitalize(value, options);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAQa,mCAAmC,CAAA;IAC9C,SAAS,CAAC,KAAa,EAAE,OAA4B,EAAA;AACnD,QAAA,OAAO,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;KACnC;wGAHU,mCAAmC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAAA;sGAAnC,mCAAmC,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,qCAAA,EAAA,CAAA,CAAA;;4FAAnC,mCAAmC,EAAA,UAAA,EAAA,CAAA;kBAJ/C,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,qCAAqC;AAC3C,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA,CAAA;;;ACPD;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/pipes-format-text-capitalize",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.357-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@angular/
|
|
6
|
-
"@
|
|
5
|
+
"@angular/core": ">=18.0.0",
|
|
6
|
+
"@libs-ui/interfaces-types": "0.2.357-0",
|
|
7
|
+
"@libs-ui/utils": "0.2.357-0"
|
|
7
8
|
},
|
|
8
9
|
"sideEffects": false,
|
|
9
10
|
"module": "fesm2022/libs-ui-pipes-format-text-capitalize.mjs",
|