@libs-ui/pipes-format-text-full-name-format 0.2.356-41 → 0.2.356-43

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.
Files changed (3) hide show
  1. package/README.md +126 -39
  2. package/fesm2022/libs-ui-pipes-format-text-full-name-format.mjs.map +1 -1
  3. package/package.json +2 -2
package/README.md CHANGED
@@ -1,6 +1,10 @@
1
- # Full Name Format Pipe
1
+ # @libs-ui/pipes-format-text-full-name-format
2
2
 
3
- Pipe định dạng tên người: viết hoa chữ cái đầu mỗi từ, viết thường phần còn lại, trim khoảng trắng, xóa khoảng trắng thừa và loại bỏ emoji.
3
+ > Pipe chuẩn hóa tên người: viết hoa chữ cái đầu mỗi từ, loại bỏ khoảng trắng thừa và emoji.
4
+
5
+ ## Giới thiệu
6
+
7
+ `LibsUiPipesFormatTextFullNameFormatPipe` là Angular pipe chuyên dụng để định dạng tên người về dạng chuẩn Title Case. Pipe tự động viết hoa chữ cái đầu mỗi từ, viết thường các ký tự còn lại, trim khoảng trắng đầu/cuối, xóa khoảng trắng thừa giữa các từ và loại bỏ emoji. Hoạt động đầy đủ với tiếng Việt có dấu unicode.
4
8
 
5
9
  ## Tính năng
6
10
 
@@ -8,9 +12,16 @@ Pipe định dạng tên người: viết hoa chữ cái đầu mỗi từ, vi
8
12
  - ✅ Viết thường các ký tự còn lại trong mỗi từ
9
13
  - ✅ Trim khoảng trắng đầu/cuối chuỗi
10
14
  - ✅ Xóa khoảng trắng thừa giữa các từ
11
- - ✅ Loại bỏ emoji
15
+ - ✅ Loại bỏ emoji tự động
12
16
  - ✅ Hỗ trợ tiếng Việt có dấu unicode
13
17
 
18
+ ## Khi nào sử dụng
19
+
20
+ - Chuẩn hóa tên người dùng nhập vào từ form về dạng "Nguyễn Văn A"
21
+ - Hiển thị tên import từ file Excel/CSV thường ở dạng ALL CAPS hoặc lowercase
22
+ - Hiển thị tên trong danh sách, avatar, profile — đảm bảo format nhất quán
23
+ - Clean-up tên có khoảng trắng thừa hoặc chứa emoji không mong muốn
24
+
14
25
  ## Cài đặt
15
26
 
16
27
  ```bash
@@ -29,71 +40,147 @@ import { LibsUiPipesFormatTextFullNameFormatPipe } from '@libs-ui/pipes-format-t
29
40
  export class ExampleComponent {}
30
41
  ```
31
42
 
32
- ## Cú pháp
43
+ ## Ví dụ sử dụng
44
+
45
+ ### Cơ bản — lowercase → Title Case
33
46
 
34
47
  ```html
35
- {{ value | LibsUiPipesFormatTextFullNameFormatPipe }}
48
+ <p>{{ 'john doe' | LibsUiPipesFormatTextFullNameFormatPipe }}</p>
49
+ <!-- Output: John Doe -->
36
50
  ```
37
51
 
38
- ## Ví dụ
39
-
40
- ### Trong Template
52
+ ### ALL CAPS → Title Case
41
53
 
42
54
  ```html
43
- <!-- Cơ bản -->
44
- {{ 'john doe' | LibsUiPipesFormatTextFullNameFormatPipe }}
45
- <!-- Output: John Doe -->
46
-
47
- <!-- ALL CAPS → Title Case -->
48
- {{ 'NGUYEN VAN A' | LibsUiPipesFormatTextFullNameFormatPipe }}
55
+ <p>{{ 'NGUYEN VAN A' | LibsUiPipesFormatTextFullNameFormatPipe }}</p>
49
56
  <!-- Output: Nguyen Van A -->
57
+ ```
50
58
 
51
- <!-- Trim & xóa khoảng trắng thừa -->
52
- {{ ' TRAN THI B ' | LibsUiPipesFormatTextFullNameFormatPipe }}
59
+ ### Trim & xóa khoảng trắng thừa
60
+
61
+ ```html
62
+ <p>{{ ' TRAN THI B ' | LibsUiPipesFormatTextFullNameFormatPipe }}</p>
53
63
  <!-- Output: Tran Thi B -->
64
+ ```
54
65
 
55
- <!-- Loại bỏ emoji -->
56
- {{ 'le thu C 😀🎉' | LibsUiPipesFormatTextFullNameFormatPipe }}
66
+ ### Loại bỏ emoji
67
+
68
+ ```html
69
+ <p>{{ 'le thu C 😀🎉' | LibsUiPipesFormatTextFullNameFormatPipe }}</p>
57
70
  <!-- Output: Le Thu C -->
71
+ ```
72
+
73
+ ### Tên tiếng Việt
58
74
 
59
- <!-- Tiếng Việt -->
60
- {{ 'phạm thị MỸ LINH' | LibsUiPipesFormatTextFullNameFormatPipe }}
75
+ ```html
76
+ <p>{{ 'phạm thị MỸ LINH' | LibsUiPipesFormatTextFullNameFormatPipe }}</p>
61
77
  <!-- Output: Phạm Thị Mỹ Linh -->
62
78
  ```
63
79
 
64
- ### Dùng trong TypeScript
80
+ ### Trong component TypeScript
81
+
82
+ ```typescript
83
+ import { Component } from '@angular/core';
84
+ import { LibsUiPipesFormatTextFullNameFormatPipe } from '@libs-ui/pipes-format-text-full-name-format';
85
+
86
+ @Component({
87
+ selector: 'app-user-profile',
88
+ standalone: true,
89
+ imports: [LibsUiPipesFormatTextFullNameFormatPipe],
90
+ template: `
91
+ <span>{{ user.fullName | LibsUiPipesFormatTextFullNameFormatPipe }}</span>
92
+ <span>{{ importedName | LibsUiPipesFormatTextFullNameFormatPipe }}</span>
93
+ `,
94
+ })
95
+ export class UserProfileComponent {
96
+ user = { fullName: 'NGUYEN VAN A' };
97
+ importedName = ' tran thi b ';
98
+ }
99
+ ```
100
+
101
+ ### Dùng hàm utils trong TypeScript (không cần inject pipe)
65
102
 
66
- Pipe là thin wrapper của hàm `fullNameFormat` 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**:
103
+ Pipe là thin wrapper của hàm `fullNameFormat` trong `@libs-ui/utils`. Khi cần gọi trong TypeScript, import và dùng thẳng hàm đó:
67
104
 
68
105
  ```typescript
69
106
  import { fullNameFormat } from '@libs-ui/utils';
70
107
 
71
- // Dùng thẳng hàm utils — không cần inject pipe
72
108
  const displayName = fullNameFormat('NGUYEN VAN A');
73
109
  // Output: 'Nguyen Van A'
74
110
 
75
- // Trong component class:
76
- class ExampleComponent {
77
- displayName = fullNameFormat(this.user.rawName);
78
- }
111
+ const cleaned = fullNameFormat(' le thi c 😀 ');
112
+ // Output: 'Le Thi C'
79
113
  ```
80
114
 
81
- ## API
115
+ ## Transform
82
116
 
83
- | Tham số | Kiểu | Bắt buộc | Mô tả |
84
- | ------- | -------- | -------- | ----------------------- |
85
- | `value` | `string` | ✅ | Tên người cần định dạng |
117
+ | Tham số | Type | Bắt buộc | Mô tả | Ví dụ |
118
+ |---|---|---|---|---|
119
+ | `value` | `string` | ✅ | Tên người cần định dạng | `'NGUYEN VAN A'` |
86
120
 
87
- > **Lưu ý:** Pipe không có tham số tùy chỉnh. Options được hardcode: `lowercaseOtherCharacter=true`, `trim=true`, `removeMultipleSpace=true`, `removeEmoji=true`.
121
+ **Cú pháp template:**
88
122
 
89
- ## Khi nào sử dụng
123
+ ```html
124
+ {{ value | LibsUiPipesFormatTextFullNameFormatPipe }}
125
+ ```
126
+
127
+ **Cú pháp standalone (trong TypeScript):**
128
+
129
+ ```typescript
130
+ import { LibsUiPipesFormatTextFullNameFormatPipe } from '@libs-ui/pipes-format-text-full-name-format';
131
+
132
+ const pipe = new LibsUiPipesFormatTextFullNameFormatPipe();
133
+ const result = pipe.transform('NGUYEN VAN A');
134
+ // Output: 'Nguyen Van A'
135
+ ```
136
+
137
+ ## Behavior với falsy input
90
138
 
91
- - **Form nhập tên:** Chuẩn hóa tên người dùng nhập vào về dạng "Nguyễn Văn A"
92
- - **Import dữ liệu:** Tên từ Excel/CSV/hệ thống ngoài thường ở dạng ALL CAPS hoặc lowercase
93
- - **Hiển thị profile:** Đảm bảo format tên nhất quán trong danh sách, avatar, profile
139
+ | Input | Output | Ghi chú |
140
+ |---|---|---|
141
+ | `null` | `null` | Không throw error |
142
+ | `undefined` | `undefined` | Không throw error |
143
+ | `''` | `''` | Chuỗi rỗng trả về nguyên |
144
+ | `'john doe'` | `'John Doe'` | lowercase → Title Case |
145
+ | `'NGUYEN VAN A'` | `'Nguyen Van A'` | CAPS → Title Case |
146
+ | `' TRAN THI B '` | `'Tran Thi B'` | Trim + xóa khoảng trắng thừa |
147
+ | `'le thu C 😀🎉'` | `'Le Thu C'` | Emoji bị loại bỏ |
148
+ | `'phạm thị MỸ LINH'` | `'Phạm Thị Mỹ Linh'` | Tiếng Việt giữ nguyên dấu |
149
+
150
+ ## Logic bên trong
151
+
152
+ Pipe gọi hàm `fullNameFormat()` từ `@libs-ui/utils` với bộ options cố định:
153
+
154
+ ```typescript
155
+ // Nội bộ của pipe:
156
+ transform(value: string) {
157
+ return fullNameFormat(value);
158
+ }
159
+
160
+ // Trong @libs-ui/utils:
161
+ export const fullNameFormat = (value: string) => {
162
+ if (!value) return value;
163
+ return capitalize(value, {
164
+ lowercaseOtherCharacter: true,
165
+ trim: true,
166
+ removeMultipleSpace: true,
167
+ removeEmoji: true,
168
+ });
169
+ };
170
+ ```
94
171
 
95
172
  ## Lưu ý quan trọng
96
173
 
97
- - Pipe **không** hỗ trợ tùy chỉnh options — đây là pipe chuyên dụng cho định dạng tên người
98
- - Nếu cần tùy chỉnh options (ví dụ: giữ nguyên emoji), hãy dùng trực tiếp `capitalize()` từ `@libs-ui/utils`
99
- - Khi input là `null`, `undefined` hoặc chuỗi rỗng, pipe trả về nguyên giá trị đó (không throw error)
174
+ ⚠️ **Options cố định**: Pipe đã hardcode `lowercaseOtherCharacter=true`, `trim=true`, `removeMultipleSpace=true`, `removeEmoji=true`. Không tùy chỉnh được qua tham số pipe.
175
+
176
+ ⚠️ **Cần tùy chỉnh options**: Nếu cần giữ lại emoji hoặc điều chỉnh behavior, hãy dùng trực tiếp hàm `capitalize()` từ `@libs-ui/utils` thay vì pipe này.
177
+
178
+ ⚠️ **Falsy input an toàn**: Input là `null`, `undefined` hoặc chuỗi rỗng sẽ được trả về nguyên giá trị đó mà không throw error.
179
+
180
+ ## Demo
181
+
182
+ ```bash
183
+ npx nx serve core-ui
184
+ ```
185
+
186
+ Truy cập: http://localhost:4500/pipes/format-text/full-name-format
package/fesm2022/libs-ui-pipes-format-text-full-name-format.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"libs-ui-pipes-format-text-full-name-format.mjs","sources":["../../../../../../libs-ui/pipes/format-text/full-name-format/src/full-name-format.pipe.ts","../../../../../../libs-ui/pipes/format-text/full-name-format/src/libs-ui-pipes-format-text-full-name-format.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\nimport { fullNameFormat } from '@libs-ui/utils';\n\n@Pipe({\n name: 'LibsUiPipesFormatTextFullNameFormatPipe',\n standalone: true,\n})\nexport class LibsUiPipesFormatTextFullNameFormatPipe implements PipeTransform {\n transform(value: string) {\n return fullNameFormat(value);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAOa,uCAAuC,CAAA;AAClD,IAAA,SAAS,CAAC,KAAa,EAAA;AACrB,QAAA,OAAO,cAAc,CAAC,KAAK,CAAC;IAC9B;wGAHW,uCAAuC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA;sGAAvC,uCAAuC,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,yCAAA,EAAA,CAAA;;4FAAvC,uCAAuC,EAAA,UAAA,EAAA,CAAA;kBAJnD,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,yCAAyC;AAC/C,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACND;;AAEG;;;;"}
1
+ {"version":3,"file":"libs-ui-pipes-format-text-full-name-format.mjs","sources":["../../../../../../libs-ui/pipes/format-text/full-name-format/src/full-name-format.pipe.ts","../../../../../../libs-ui/pipes/format-text/full-name-format/src/libs-ui-pipes-format-text-full-name-format.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\nimport { fullNameFormat } from '@libs-ui/utils';\n\n@Pipe({\n name: 'LibsUiPipesFormatTextFullNameFormatPipe',\n standalone: true,\n})\nexport class LibsUiPipesFormatTextFullNameFormatPipe implements PipeTransform {\n transform(value: string) {\n return fullNameFormat(value);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAOa,uCAAuC,CAAA;AAClD,IAAA,SAAS,CAAC,KAAa,EAAA;AACrB,QAAA,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;KAC9B;wGAHU,uCAAuC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA,CAAA;sGAAvC,uCAAuC,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,yCAAA,EAAA,CAAA,CAAA;;4FAAvC,uCAAuC,EAAA,UAAA,EAAA,CAAA;kBAJnD,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,yCAAyC;AAC/C,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA,CAAA;;;ACND;;AAEG;;;;"}
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@libs-ui/pipes-format-text-full-name-format",
3
- "version": "0.2.356-41",
3
+ "version": "0.2.356-43",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18.0.0",
6
- "@libs-ui/utils": "0.2.356-41"
6
+ "@libs-ui/utils": "0.2.356-43"
7
7
  },
8
8
  "sideEffects": false,
9
9
  "module": "fesm2022/libs-ui-pipes-format-text-full-name-format.mjs",