@libs-ui/pipes-format-text-capitalize 0.2.355-9 → 0.2.356-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 +159 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,160 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Capitalize Pipe
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Pipe viết hoa chữ cái đầu tiên của mỗi từ trong chuỗi, hỗ trợ nhiều tùy chọn format.
|
|
4
|
+
|
|
5
|
+
## Tính năng
|
|
6
|
+
|
|
7
|
+
- ✅ 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ừ (cho tên ngườii)
|
|
9
|
+
- ✅ Hỗ trợ loại bỏ emoji
|
|
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
|
+
|
|
13
|
+
## Cài đặt
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @libs-ui/pipes-format-text-capitalize
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Sử dụng
|
|
20
|
+
|
|
21
|
+
### Trong Template
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
import { LibsUiPipesFormatTextCapitalizePipe } from '@libs-ui/pipes-format-text-capitalize';
|
|
25
|
+
|
|
26
|
+
@Component({
|
|
27
|
+
selector: 'app-example',
|
|
28
|
+
standalone: true,
|
|
29
|
+
imports: [LibsUiPipesFormatTextCapitalizePipe],
|
|
30
|
+
template: `
|
|
31
|
+
<p>{{ 'hello world' | LibsUiPipesFormatTextCapitalizePipe }}</p>
|
|
32
|
+
<!-- Output: Hello World -->
|
|
33
|
+
`,
|
|
34
|
+
})
|
|
35
|
+
export class ExampleComponent {}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Format tên ngườii
|
|
39
|
+
|
|
40
|
+
```typescript
|
|
41
|
+
import { ITextFormatOptions } from '@libs-ui/interfaces-types';
|
|
42
|
+
|
|
43
|
+
fullNameOptions: ITextFormatOptions = {
|
|
44
|
+
lowercaseOtherCharacter: true,
|
|
45
|
+
trim: true,
|
|
46
|
+
removeMultipleSpace: true,
|
|
47
|
+
};
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<p>{{ 'NGUYEN VAN A' | LibsUiPipesFormatTextCapitalizePipe:fullNameOptions }}</p>
|
|
52
|
+
<!-- Output: Nguyen Van A -->
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Xử lý emoji
|
|
56
|
+
|
|
57
|
+
```html
|
|
58
|
+
<p>{{ 'hello 👋 world 🌍' | LibsUiPipesFormatTextCapitalizePipe:{removeEmoji: true} }}</p>
|
|
59
|
+
<!-- Output: Hello World -->
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Nhiều tùy chọn
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<p>{{ ' HELLO WORLD example 👋 ' | LibsUiPipesFormatTextCapitalizePipe:complexOptions }}</p>
|
|
66
|
+
<!-- Output: Hello World Example -->
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
```typescript
|
|
70
|
+
complexOptions = {
|
|
71
|
+
lowercaseOtherCharacter: true,
|
|
72
|
+
trim: true,
|
|
73
|
+
removeMultipleSpace: true,
|
|
74
|
+
removeEmoji: true,
|
|
75
|
+
};
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Dùng trong TypeScript
|
|
79
|
+
|
|
80
|
+
Pipe là thin wrapper của hàm `capitalize` trong `@libs-ui/utils`. Khi cần gọi trong TypeScript, import và dùng thẳng hàm đó — **không cần inject pipe**:
|
|
81
|
+
|
|
82
|
+
```typescript
|
|
83
|
+
import { capitalize } from '@libs-ui/utils';
|
|
84
|
+
|
|
85
|
+
// Cơ bản
|
|
86
|
+
const result = capitalize('hello world');
|
|
87
|
+
// Output: 'Hello World'
|
|
88
|
+
|
|
89
|
+
// Với options (tên người):
|
|
90
|
+
const name = capitalize('NGUYEN VAN A', {
|
|
91
|
+
lowercaseOtherCharacter: true,
|
|
92
|
+
trim: true,
|
|
93
|
+
});
|
|
94
|
+
// Output: 'Nguyen Van A'
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## Công nghệ sử dụng
|
|
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 |
|
|
104
|
+
|
|
105
|
+
## API Reference
|
|
106
|
+
|
|
107
|
+
### Pipe Name
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
LibsUiPipesFormatTextCapitalizePipe
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Parameters
|
|
114
|
+
|
|
115
|
+
| Parameter | Type | Default | Description |
|
|
116
|
+
| --------- | -------------------- | ----------- | ---------------- |
|
|
117
|
+
| value | `string` | required | Chuỗi cần format |
|
|
118
|
+
| options | `ITextFormatOptions` | `undefined` | Tùy chọn format |
|
|
119
|
+
|
|
120
|
+
### ITextFormatOptions
|
|
121
|
+
|
|
122
|
+
```typescript
|
|
123
|
+
interface ITextFormatOptions {
|
|
124
|
+
uppercaseOtherCharacter?: boolean; // Viết hoa tất cả
|
|
125
|
+
lowercaseOtherCharacter?: boolean; // Viết thường các ký tự không phải đầu từ
|
|
126
|
+
trim?: boolean; // Trim khoảng trắng
|
|
127
|
+
removeMultipleSpace?: boolean; // Xóa khoảng trắng thừa
|
|
128
|
+
removeEmoji?: boolean; // Xóa emoji
|
|
129
|
+
removeUnicode?: boolean; // Xóa dấu unicode
|
|
130
|
+
}
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
### Usage Syntax
|
|
134
|
+
|
|
135
|
+
```html
|
|
136
|
+
<!-- Cơ bản -->
|
|
137
|
+
{{ text | LibsUiPipesFormatTextCapitalizePipe }}
|
|
138
|
+
|
|
139
|
+
<!-- Với options -->
|
|
140
|
+
{{ text | LibsUiPipesFormatTextCapitalizePipe:options }}
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## Unit Tests
|
|
144
|
+
|
|
145
|
+
Xem chi tiết tại [test-commands.md](./test-commands.md)
|
|
146
|
+
|
|
147
|
+
```bash
|
|
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
|
+
```
|
|
152
|
+
|
|
153
|
+
## Demo
|
|
154
|
+
|
|
155
|
+
- **Local**: http://localhost:4500/pipes/format-text/capitalize
|
|
156
|
+
- **Production**: (sau khi deploy)
|
|
157
|
+
|
|
158
|
+
## License
|
|
159
|
+
|
|
160
|
+
MIT
|