@libs-ui/pipes-format-number 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
CHANGED
|
@@ -1,3 +1,128 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Format Number Pipe
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Pipe format số theo ngôn ngữ (EN/VI) với hỗ trợ phân cách hàng nghìn, số thập phân và số âm.
|
|
4
|
+
|
|
5
|
+
## Tính năng
|
|
6
|
+
|
|
7
|
+
- ✅ Format phân cách hàng nghìn (dấu `.` cho VI, dấu `,` cho EN)
|
|
8
|
+
- ✅ Định dạng số thập phân với số chữ số tùy chỉnh
|
|
9
|
+
- ✅ Hỗ trợ số âm với option kiểm soát
|
|
10
|
+
- ✅ Chuyển đổi giữa định dạng số có dấu phân cách và số thuần
|
|
11
|
+
- ✅ Hỗ trợ truyền ngôn ngữ trực tiếp vào pipe (EN/VI) hoặc tự động detect từ UtilsCache
|
|
12
|
+
|
|
13
|
+
## Cài đặt
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @libs-ui/pipes-format-number
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Sử dụng
|
|
20
|
+
|
|
21
|
+
### Trong Template
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
import { LibsUiPipesFormatNumberPipe } from '@libs-ui/pipes-format-number';
|
|
25
|
+
import { UtilsLanguageConstants } from '@libs-ui/utils';
|
|
26
|
+
|
|
27
|
+
@Component({
|
|
28
|
+
selector: 'app-example',
|
|
29
|
+
standalone: true,
|
|
30
|
+
imports: [LibsUiPipesFormatNumberPipe],
|
|
31
|
+
template: `
|
|
32
|
+
<!-- Tự động detect ngôn ngữ từ UtilsCache -->
|
|
33
|
+
<p>Số: {{ 1234567 | LibsUiPipesFormatNumberPipe: true : 2 }}</p>
|
|
34
|
+
<!-- Output: 1.234.567 (VI) hoặc 1,234,567 (EN) -->
|
|
35
|
+
|
|
36
|
+
<!-- Truyền ngôn ngữ trực tiếp -->
|
|
37
|
+
<p>EN: {{ 1234567 | LibsUiPipesFormatNumberPipe: true : 2 : true : false : 'en' }}</p>
|
|
38
|
+
<!-- Output: 1,234,567 -->
|
|
39
|
+
|
|
40
|
+
<p>VI: {{ 1234567 | LibsUiPipesFormatNumberPipe: true : 2 : true : false : 'vi' }}</p>
|
|
41
|
+
<!-- Output: 1.234.567 -->
|
|
42
|
+
`,
|
|
43
|
+
})
|
|
44
|
+
export class ExampleComponent {
|
|
45
|
+
readonly EN = UtilsLanguageConstants.EN;
|
|
46
|
+
readonly VI = UtilsLanguageConstants.VI;
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Dùng trong TypeScript
|
|
51
|
+
|
|
52
|
+
Pipe là thin wrapper của hàm `viewDataNumberByLanguage` 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**:
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
import { viewDataNumberByLanguage, UtilsLanguageConstants } from '@libs-ui/utils';
|
|
56
|
+
|
|
57
|
+
// Tự động detect ngôn ngữ từ UtilsCache
|
|
58
|
+
const formatted = viewDataNumberByLanguage(1234567.89, true, 2);
|
|
59
|
+
// Output: '1.234.567,89' (VI) hoặc '1,234,567.89' (EN)
|
|
60
|
+
|
|
61
|
+
// Truyền ngôn ngữ trực tiếp
|
|
62
|
+
const formattedEN = viewDataNumberByLanguage(1234567.89, true, 2, true, false, UtilsLanguageConstants.EN);
|
|
63
|
+
// Output: '1,234,567.89'
|
|
64
|
+
|
|
65
|
+
const formattedVI = viewDataNumberByLanguage(1234567.89, true, 2, true, false, UtilsLanguageConstants.VI);
|
|
66
|
+
// Output: '1.234.567,89'
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Công nghệ sử dụng
|
|
70
|
+
|
|
71
|
+
| Công nghệ | Mô tả |
|
|
72
|
+
| -------------- | --------------------------------- |
|
|
73
|
+
| Angular 18+ | Pipe transform với standalone API |
|
|
74
|
+
| @libs-ui/utils | viewDataNumberByLanguage utility |
|
|
75
|
+
|
|
76
|
+
## API Reference
|
|
77
|
+
|
|
78
|
+
### Pipe Name
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
LibsUiPipesFormatNumberPipe
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Parameters
|
|
85
|
+
|
|
86
|
+
| Parameter | Type | Default | Description |
|
|
87
|
+
| --------------------- | ------------------ | ----------- | ------------------------------------------------------------------------------------ |
|
|
88
|
+
| value | `number \| string` | required | Giá trị cần format |
|
|
89
|
+
| acceptNegativeValue | `boolean` | required | Cho phép giá trị âm |
|
|
90
|
+
| parseFixed | `number` | `1` | Số chữ số thập phân tối đa |
|
|
91
|
+
| ignoreFormatSeparator | `boolean` | `true` | Bỏ qua format separator trong input string |
|
|
92
|
+
| ignoreParseFloat | `boolean` | `undefined` | Không parse float |
|
|
93
|
+
| lang | `string` | `undefined` | Ngôn ngữ format (`'en'` hoặc `'vi'`). Nếu không truyền, tự động detect từ UtilsCache |
|
|
94
|
+
|
|
95
|
+
### Usage Syntax
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<!-- Cơ bản - tự động detect ngôn ngữ từ UtilsCache -->
|
|
99
|
+
{{ value | LibsUiPipesFormatNumberPipe:acceptNegativeValue }}
|
|
100
|
+
|
|
101
|
+
<!-- Với parseFixed -->
|
|
102
|
+
{{ value | LibsUiPipesFormatNumberPipe:acceptNegativeValue:2 }}
|
|
103
|
+
|
|
104
|
+
<!-- Đầy đủ parameters -->
|
|
105
|
+
{{ value | LibsUiPipesFormatNumberPipe:acceptNegativeValue:2:false:false }}
|
|
106
|
+
|
|
107
|
+
<!-- Với ngôn ngữ cụ thể -->
|
|
108
|
+
{{ value | LibsUiPipesFormatNumberPipe:acceptNegativeValue:2:true:false:'en' }} {{ value | LibsUiPipesFormatNumberPipe:acceptNegativeValue:2:true:false:'vi' }}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Unit Tests
|
|
112
|
+
|
|
113
|
+
Xem chi tiết tại [test-commands.md](./test-commands.md)
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
# Chạy test cho pipe này
|
|
117
|
+
npx nx test pipes-format-number
|
|
118
|
+
npx nx test pipes-format-number --no-cache
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
## Demo
|
|
122
|
+
|
|
123
|
+
- **Local**: http://localhost:4500/pipes/format-number
|
|
124
|
+
- **Production**: (sau khi deploy)
|
|
125
|
+
|
|
126
|
+
## License
|
|
127
|
+
|
|
128
|
+
MIT
|
|
@@ -2,8 +2,8 @@ import { Pipe } from '@angular/core';
|
|
|
2
2
|
import { viewDataNumberByLanguage } from '@libs-ui/utils';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export class LibsUiPipesFormatNumberPipe {
|
|
5
|
-
transform(value, acceptNegativeValue, parseFixed = 1, ignoreFormatSeparator = true, ignoreParseFloat) {
|
|
6
|
-
return viewDataNumberByLanguage(value, acceptNegativeValue, parseFixed, ignoreFormatSeparator, ignoreParseFloat);
|
|
5
|
+
transform(value, acceptNegativeValue, parseFixed = 1, ignoreFormatSeparator = true, ignoreParseFloat, lang) {
|
|
6
|
+
return viewDataNumberByLanguage(value, acceptNegativeValue, parseFixed, ignoreFormatSeparator, ignoreParseFloat, lang);
|
|
7
7
|
}
|
|
8
8
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesFormatNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
9
9
|
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesFormatNumberPipe, isStandalone: true, name: "LibsUiPipesFormatNumberPipe" });
|
|
@@ -15,4 +15,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
15
15
|
standalone: true,
|
|
16
16
|
}]
|
|
17
17
|
}] });
|
|
18
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
18
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9ybWF0LW51bWJlci5waXBlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vbGlicy11aS9waXBlcy9mb3JtYXQtbnVtYmVyL3NyYy9mb3JtYXQtbnVtYmVyLnBpcGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBaUIsTUFBTSxlQUFlLENBQUM7QUFDcEQsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7O0FBTTFELE1BQU0sT0FBTywyQkFBMkI7SUFDdEMsU0FBUyxDQUFDLEtBQXNCLEVBQUUsbUJBQTRCLEVBQUUsVUFBVSxHQUFHLENBQUMsRUFBRSxxQkFBcUIsR0FBRyxJQUFJLEVBQUUsZ0JBQTBCLEVBQUUsSUFBYTtRQUNySixPQUFPLHdCQUF3QixDQUFDLEtBQUssRUFBRSxtQkFBbUIsRUFBRSxVQUFVLEVBQUUscUJBQXFCLEVBQUUsZ0JBQWdCLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDekgsQ0FBQzt3R0FIVSwyQkFBMkI7c0dBQTNCLDJCQUEyQjs7NEZBQTNCLDJCQUEyQjtrQkFKdkMsSUFBSTttQkFBQztvQkFDSixJQUFJLEVBQUUsNkJBQTZCO29CQUNuQyxVQUFVLEVBQUUsSUFBSTtpQkFDakIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyB2aWV3RGF0YU51bWJlckJ5TGFuZ3VhZ2UgfSBmcm9tICdAbGlicy11aS91dGlscyc7XG5cbkBQaXBlKHtcbiAgbmFtZTogJ0xpYnNVaVBpcGVzRm9ybWF0TnVtYmVyUGlwZScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaVBpcGVzRm9ybWF0TnVtYmVyUGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xuICB0cmFuc2Zvcm0odmFsdWU6IG51bWJlciB8IHN0cmluZywgYWNjZXB0TmVnYXRpdmVWYWx1ZTogYm9vbGVhbiwgcGFyc2VGaXhlZCA9IDEsIGlnbm9yZUZvcm1hdFNlcGFyYXRvciA9IHRydWUsIGlnbm9yZVBhcnNlRmxvYXQ/OiBib29sZWFuLCBsYW5nPzogc3RyaW5nKSB7XG4gICAgcmV0dXJuIHZpZXdEYXRhTnVtYmVyQnlMYW5ndWFnZSh2YWx1ZSwgYWNjZXB0TmVnYXRpdmVWYWx1ZSwgcGFyc2VGaXhlZCwgaWdub3JlRm9ybWF0U2VwYXJhdG9yLCBpZ25vcmVQYXJzZUZsb2F0LCBsYW5nKTtcbiAgfVxufVxuIl19
|
|
@@ -3,8 +3,8 @@ import { Pipe } from '@angular/core';
|
|
|
3
3
|
import { viewDataNumberByLanguage } from '@libs-ui/utils';
|
|
4
4
|
|
|
5
5
|
class LibsUiPipesFormatNumberPipe {
|
|
6
|
-
transform(value, acceptNegativeValue, parseFixed = 1, ignoreFormatSeparator = true, ignoreParseFloat) {
|
|
7
|
-
return viewDataNumberByLanguage(value, acceptNegativeValue, parseFixed, ignoreFormatSeparator, ignoreParseFloat);
|
|
6
|
+
transform(value, acceptNegativeValue, parseFixed = 1, ignoreFormatSeparator = true, ignoreParseFloat, lang) {
|
|
7
|
+
return viewDataNumberByLanguage(value, acceptNegativeValue, parseFixed, ignoreFormatSeparator, ignoreParseFloat, lang);
|
|
8
8
|
}
|
|
9
9
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesFormatNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
10
10
|
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiPipesFormatNumberPipe, isStandalone: true, name: "LibsUiPipesFormatNumberPipe" });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-pipes-format-number.mjs","sources":["../../../../../libs-ui/pipes/format-number/src/format-number.pipe.ts","../../../../../libs-ui/pipes/format-number/src/libs-ui-pipes-format-number.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\nimport { viewDataNumberByLanguage } from '@libs-ui/utils';\n\n@Pipe({\n name: 'LibsUiPipesFormatNumberPipe',\n standalone: true,\n})\nexport class LibsUiPipesFormatNumberPipe implements PipeTransform {\n transform(value: number | string, acceptNegativeValue: boolean, parseFixed = 1, ignoreFormatSeparator = true, ignoreParseFloat?: boolean) {\n return viewDataNumberByLanguage(value, acceptNegativeValue, parseFixed, ignoreFormatSeparator, ignoreParseFloat);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAOa,2BAA2B,CAAA;AACtC,IAAA,SAAS,CAAC,KAAsB,EAAE,mBAA4B,EAAE,UAAU,GAAG,CAAC,EAAE,qBAAqB,GAAG,IAAI,EAAE,gBAA0B,EAAA;
|
|
1
|
+
{"version":3,"file":"libs-ui-pipes-format-number.mjs","sources":["../../../../../libs-ui/pipes/format-number/src/format-number.pipe.ts","../../../../../libs-ui/pipes/format-number/src/libs-ui-pipes-format-number.ts"],"sourcesContent":["import { Pipe, PipeTransform } from '@angular/core';\nimport { viewDataNumberByLanguage } from '@libs-ui/utils';\n\n@Pipe({\n name: 'LibsUiPipesFormatNumberPipe',\n standalone: true,\n})\nexport class LibsUiPipesFormatNumberPipe implements PipeTransform {\n transform(value: number | string, acceptNegativeValue: boolean, parseFixed = 1, ignoreFormatSeparator = true, ignoreParseFloat?: boolean, lang?: string) {\n return viewDataNumberByLanguage(value, acceptNegativeValue, parseFixed, ignoreFormatSeparator, ignoreParseFloat, lang);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAOa,2BAA2B,CAAA;AACtC,IAAA,SAAS,CAAC,KAAsB,EAAE,mBAA4B,EAAE,UAAU,GAAG,CAAC,EAAE,qBAAqB,GAAG,IAAI,EAAE,gBAA0B,EAAE,IAAa,EAAA;AACrJ,QAAA,OAAO,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,IAAI,CAAC;IACxH;wGAHW,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,IAAA,EAAA,CAAA;sGAA3B,2BAA2B,EAAA,YAAA,EAAA,IAAA,EAAA,IAAA,EAAA,6BAAA,EAAA,CAAA;;4FAA3B,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBAJvC,IAAI;AAAC,YAAA,IAAA,EAAA,CAAA;AACJ,oBAAA,IAAI,EAAE,6BAA6B;AACnC,oBAAA,UAAU,EAAE,IAAI;AACjB,iBAAA;;;ACND;;AAEG;;;;"}
|
package/format-number.pipe.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { PipeTransform } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export declare class LibsUiPipesFormatNumberPipe implements PipeTransform {
|
|
4
|
-
transform(value: number | string, acceptNegativeValue: boolean, parseFixed?: number, ignoreFormatSeparator?: boolean, ignoreParseFloat?: boolean): any;
|
|
4
|
+
transform(value: number | string, acceptNegativeValue: boolean, parseFixed?: number, ignoreFormatSeparator?: boolean, ignoreParseFloat?: boolean, lang?: string): any;
|
|
5
5
|
static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiPipesFormatNumberPipe, never>;
|
|
6
6
|
static ɵpipe: i0.ɵɵPipeDeclaration<LibsUiPipesFormatNumberPipe, "LibsUiPipesFormatNumberPipe", true>;
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/pipes-format-number",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.356-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/utils": "0.2.
|
|
6
|
+
"@libs-ui/utils": "0.2.356-0"
|
|
7
7
|
},
|
|
8
8
|
"sideEffects": false,
|
|
9
9
|
"module": "fesm2022/libs-ui-pipes-format-number.mjs",
|