├── .eslintrc.js ├── .github └── workflows │ └── node-tests.yml ├── .gitignore ├── README.md ├── dist ├── vue-filter-number-format.esm.min.js ├── vue-filter-number-format.esm.min.js.map ├── vue-filter-number-format.min.js └── vue-filter-number-format.min.js.map ├── package.json ├── src └── vue-filter-number-format.js ├── tests └── unit │ └── vue-filter-number-format.spec.js └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | 'foundryspatial', 4 | ], 5 | rules: { 6 | 'arrow-body-style': 'off', 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.github/workflows/node-tests.yml: -------------------------------------------------------------------------------- 1 | name: Node.js yarn CI 2 | 3 | on: 4 | push: 5 | branches: [ '**' ] 6 | pull_request: 7 | branches: [ '**' ] 8 | 9 | jobs: 10 | build: 11 | 12 | runs-on: ubuntu-latest 13 | 14 | strategy: 15 | matrix: 16 | node-version: [10.x, 12.x] 17 | 18 | steps: 19 | - uses: actions/checkout@v2 20 | - uses: Borales/actions-yarn@v2.1.0 21 | with: 22 | cmd: install # will run `yarn install` command 23 | - uses: Borales/actions-yarn@v2.1.0 24 | with: 25 | cmd: lint # will run `yarn build` command 26 | - uses: Borales/actions-yarn@v2.1.0 27 | with: 28 | cmd: build # will run `yarn build` command 29 | - uses: Borales/actions-yarn@v2.1.0 30 | with: 31 | cmd: test # will run `yarn test` command 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | yarn-error.log 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-filter-number-format 2 | 3 | > Vue.js filter for formatting numbers 4 | 5 | This is a simple wrapper for [Numeral.js](http://numeraljs.com/). 6 | 7 | ## Numeral.js 2 required 8 | 9 | This package requires you to install Numeral.js as a peer dependency (`numeral@^2`). This way, you can use a different version of Numeral, or even a drop-in replacement with the same API. 10 | Use [version 1 of this package](https://www.npmjs.com/package/vue-filter-number-format/v/1.0.3) if you want it to install its own Numeral.js dependency as part of the bundle. 11 | 12 | ## Suggested usage 13 | 14 | Pass in Numeral to create the formatter function, and register globally as a Vue filter in your main.js-ish file: 15 | 16 | ```js 17 | import numeral from 'numeral'; 18 | import numFormat from 'vue-filter-number-format'; 19 | 20 | Vue.filter('numFormat', numFormat(numeral)); 21 | 22 | // new Vue ... 23 | ``` 24 | Use anywhere in your .vue files: 25 | 26 | ```js 27 | // default format is '0,0' 28 | {{ 69696969 | numFormat }} -> "69,696,969" 29 | 30 | // use a custom format string 31 | {{ 420 | numFormat('0.000') }} -> "420.000" 32 | {{ 666 | numFormat('0,0o') }} -> "666th" 33 | ``` 34 | 35 | See the [Numeral.js docs](http://numeraljs.com/) for other formatting options. 36 | 37 | ## License 38 | 39 | MIT 40 | -------------------------------------------------------------------------------- /dist/vue-filter-number-format.esm.min.js: -------------------------------------------------------------------------------- 1 | export default function(t){return function(n){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"0,0";return t(n).format(r)}} 2 | //# sourceMappingURL=vue-filter-number-format.esm.min.js.map 3 | -------------------------------------------------------------------------------- /dist/vue-filter-number-format.esm.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vue-filter-number-format.esm.min.js","sources":["../src/vue-filter-number-format.js"],"sourcesContent":["/**\n * number formatting helper functions\n * can be used in vue filters\n */\n\n/**\n * return a filter function\n * @param {Function} numeral Numeral.js peer dependency\n * @return {Function} number formatting filter\n */\nexport default (numeral) => {\n /**\n * apply a Numeral.js formatting string to an input value\n * @param {Number} val input value to be changed\n * @param {String} [format='0,0'] Numeral.js format string\n * @return {String} formatted output string\n */\n return (val, format = '0,0') => numeral(val).format(format);\n};\n"],"names":["numeral","val","format"],"mappings":"wBAUgBA,UAOL,SAACC,OAAKC,yDAAS,aAAUF,EAAQC,GAAKC,OAAOA"} -------------------------------------------------------------------------------- /dist/vue-filter-number-format.min.js: -------------------------------------------------------------------------------- 1 | "use strict";module.exports=function(t){return function(r){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"0,0";return t(r).format(n)}}; 2 | //# sourceMappingURL=vue-filter-number-format.min.js.map 3 | -------------------------------------------------------------------------------- /dist/vue-filter-number-format.min.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vue-filter-number-format.min.js","sources":["../src/vue-filter-number-format.js"],"sourcesContent":["/**\n * number formatting helper functions\n * can be used in vue filters\n */\n\n/**\n * return a filter function\n * @param {Function} numeral Numeral.js peer dependency\n * @return {Function} number formatting filter\n */\nexport default (numeral) => {\n /**\n * apply a Numeral.js formatting string to an input value\n * @param {Number} val input value to be changed\n * @param {String} [format='0,0'] Numeral.js format string\n * @return {String} formatted output string\n */\n return (val, format = '0,0') => numeral(val).format(format);\n};\n"],"names":["numeral","val","format"],"mappings":"qCAUgBA,UAOL,SAACC,OAAKC,yDAAS,aAAUF,EAAQC,GAAKC,OAAOA"} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-filter-number-format", 3 | "description": "Vue.js filter for formatting numbers", 4 | "version": "3.0.1", 5 | "author": "dmackca ", 6 | "homepage": "https://github.com/dmackca/vue-filter-number-format#readme", 7 | "license": "MIT", 8 | "main": "dist/vue-filter-number-format.min.js", 9 | "module": "dist/vue-filter-number-format.esm.min.js", 10 | "files": [ 11 | "dist/" 12 | ], 13 | "keywords": [ 14 | "vue", 15 | "filter", 16 | "number formatting", 17 | "comma separation", 18 | "vue filter", 19 | "numeral" 20 | ], 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/dmackca/vue-filter-number-format" 24 | }, 25 | "scripts": { 26 | "build": "bili --input src/vue-filter-number-format.js --format esm-min --format cjs-min", 27 | "lint": "eslint ./src", 28 | "test": "jest" 29 | }, 30 | "dependencies": {}, 31 | "browserslist": [ 32 | "> 1%", 33 | "last 2 versions", 34 | "not ie <= 8" 35 | ], 36 | "devDependencies": { 37 | "bili": "^4.9.0", 38 | "eslint": "^8.11.0", 39 | "eslint-config-airbnb-base": "^14.0.0", 40 | "eslint-config-foundryspatial": "2.1.2", 41 | "eslint-plugin-import": "^2.18.2", 42 | "jest": "^27.5.1", 43 | "numeral": "^2.0.6" 44 | }, 45 | "peerDependencies": { 46 | "numeral": "^2.0.0" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/vue-filter-number-format.js: -------------------------------------------------------------------------------- 1 | /** 2 | * number formatting helper functions 3 | * can be used in vue filters 4 | */ 5 | 6 | /** 7 | * return a filter function 8 | * @param {Function} numeral Numeral.js peer dependency 9 | * @return {Function} number formatting filter 10 | */ 11 | export default (numeral) => { 12 | /** 13 | * apply a Numeral.js formatting string to an input value 14 | * @param {Number} val input value to be changed 15 | * @param {String} [format='0,0'] Numeral.js format string 16 | * @return {String} formatted output string 17 | */ 18 | return (val, format = '0,0') => numeral(val).format(format); 19 | }; 20 | -------------------------------------------------------------------------------- /tests/unit/vue-filter-number-format.spec.js: -------------------------------------------------------------------------------- 1 | const numeral = require('numeral'); 2 | const numFormat = require('../../dist/vue-filter-number-format.min.js')(numeral); 3 | 4 | test('Adds commas to big numbers', () => { 5 | expect(numFormat(69696969)).toBe('69,696,969'); 6 | }); 7 | 8 | test('Returns a string, even if no commas added', () => { 9 | expect(numFormat(123)).toBe('123'); 10 | expect(numFormat('456')).toBe('456'); 11 | }); 12 | 13 | test('Accepts custom formats', () => { 14 | expect(numFormat(420, '0.000')).toBe('420.000'); 15 | expect(numFormat(666, '0,0o')).toBe('666th'); 16 | }); 17 | --------------------------------------------------------------------------------