{"analyzedAt":"2022-12-19T04:11:29.820Z","collected":{"metadata":{"name":"v-money3","scope":"unscoped","version":"3.22.3","description":"Vue3 currency input/directive mask","keywords":["vue","input","mask","directive","currency","money"],"date":"2022-12-17T02:31:52.747Z","author":{"name":"Jonathan Martins","email":"web@jonathanmartins.com.br","username":"jonathanmartins"},"publisher":{"username":"jonathanmartins","email":"web@jonathanmartins.com.br"},"maintainers":[{"username":"jonathanmartins","email":"web@jonathanmartins.com.br"}],"repository":{"type":"git","url":"git+https://github.com/jonathanpmartins/v-money3.git"},"links":{"npm":"https://www.npmjs.com/package/v-money3","homepage":"https://github.com/jonathanpmartins/v-money3#readme","repository":"https://github.com/jonathanpmartins/v-money3","bugs":"https://github.com/jonathanpmartins/v-money3/issues"},"license":"MIT","devDependencies":{"@babel/plugin-transform-runtime":"7.19.1","@babel/preset-env":"7.19.1","@types/jest":"29.0.3","@types/jest-environment-puppeteer":"5.0.2","@types/puppeteer":"5.4.6","@typescript-eslint/eslint-plugin":"5.38.1","@typescript-eslint/parser":"5.38.1","@vitejs/plugin-vue":"3.1.0","@vue/compiler-sfc":"3.2.39","@vue/test-utils":"2.0.2","babel-jest":"26.6.3","eslint":"8.24.0","eslint-config-airbnb-base":"15.0.0","eslint-config-airbnb-typescript":"17.0.0","eslint-plugin-import":"2.26.0","eslint-plugin-vue":"9.5.1","jest":"26.6.3","jest-puppeteer":"6.1.1","node":"16.17.1","ts-jest":"26.5.6","vite":"3.1.3","vue":"3.2.31","vue-jest":"5.0.0-alpha.10","vue-tsc":"1.0.0-beta.0"},"peerDependencies":{"vue":">= 3.2.0"},"releases":[{"from":"2022-11-19T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":2},{"from":"2022-09-20T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":5},{"from":"2022-06-22T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":5},{"from":"2021-12-19T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":6},{"from":"2020-12-19T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":58}],"hasTestScript":true,"hasSelectiveFiles":true,"readme":"![workflow](https://github.com/jonathanpmartins/v-money3/actions/workflows/main.yml/badge.svg)\n[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)\n\n# Money Mask for Vue 3\n\n### [View Demo](https://jonathanpmartins.github.io/v-money3/example/index.html)\n\n![The Mask Money](https://cdn-images-1.medium.com/max/600/1*Rpc289FpghuHrnzyVpOUig.gif)\n\n## Disclaimer\n\nThe old [`v-money`](https://github.com/vuejs-tips/v-money) library seems to be abandoned!\nSince I use it in many projects and part of then will be upgraded to Vue3,\nI needed it to work after the upgrades.\n\nFeel free to open an issue or post a pull request!\n\n## Features\n\n- Arbitrary Precision with `BigInt`\n- Lightweight (<4KB gzipped)\n- Dependency free\n- Mobile support\n- Component or Directive flavors\n- Accept copy/paste\n- Editable\n- Min / Max Limits\n\n## Arbitrary precision\n\nArbitrary precision is only supported with `v-model`.\nIt expects to receive a string representation of a number. `'12345.67'`\n\nSome break changes where introduced in this release.\nLet's follow a train of thought:   \nIf your precision is set to `2` and you set a default model value of `'55'`, \nit will be interpreted as `'0.55'`.\nTo instruct the correct format on setup you need to pass in `'55.00'`\nwhen using `v-model`. The same is true for `'5.5'`.\nIt will be interpreted as `'0.55'`. Another example: `'55.5'` => `'5.55'`.\nArbitrary precision is supported by using `string` and `BigInt` with `v-model`.\n\nFor the majority of users, it will make sense to use float numbers and stay within the\nboundaries of [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number).\nIf you fit this instance, you need to use `v-model`\nwith the number modifier, or `v-model.number`. But than,\nyou are stuck with numbers smaller than `2^53 - 1` or\n`9007199254740991` or `9,007,199,254,740,991`.\nLittle more than nine quadrilion...\nSee [MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER).\n\nFor those who are using `v-model.number`, integers and floats are compleatly\nunderstood.  \nLet's follow another train of thought:  \nIf your precision is set to `2` and you set a default model value of `55`,\nit will be interpreted as `55.00`. The same is true for `5.5`.\nIt will be interpreted as `5.50`. Another example: `55.5` => `55.50`.\n\n[More Examples](https://github.com/jonathanpmartins/v-money3/issues/38#issuecomment-903214235)\n\n## Usage\n\n### Installation\n\n```bash\nnpm i v-money3 --save\n```\n\n\n### Register Globally ([view codesandbox](https://codesandbox.io/s/v-money3-global-registering-lv1jv?file=/src/main.js))\n\n```js\nimport { createApp } from \"vue\";\nimport money from 'v-money3'\n\nconst app = createApp({/* options */})\n\n// register directive v-money3 and component <money3>\napp.use(money)\n```\n\n### Only Global Component ([view codesandbox](https://codesandbox.io/s/v-money3-global-registering-only-component-dibmu?file=/src/main.js))\n\n```js\nimport { createApp } from \"vue\";\nimport { Money3Component } from 'v-money3'\n\nconst app = createApp({/* options */})\n\n// register component <money3>\napp.component(\"money3\", Money3Component)\n```\n\n### Only Global Directive ([view codesandbox](https://codesandbox.io/s/v-money3-global-registering-only-directive-3n638?file=/src/main.js))\n\n```js\nimport { createApp } from \"vue\";\nimport { Money3Directive } from 'v-money3'\n\nconst app = createApp({/* options */})\n\n// register directive v-money3\napp.directive('money3', Money3Directive)\n```\n\n### Use as component ([view codesandbox](https://codesandbox.io/s/v-money3-use-as-component-oqdc6?file=/src/App.vue))\n\n```html\n<template>\n  <money3 v-model=\"amount\" v-bind=\"config\"></money3> {{ amount }}\n</template>\n\n<script>\n  import { Money3Component } from 'v-money3'\n\n  export default {\n    components: { money3: Money3Component },\n    data () {\n      return {\n        amount: '12345.67',\n        config: {\n          masked: false,\n          prefix: '',\n          suffix: '',\n          thousands: ',',\n          decimal: '.',\n          precision: 2,\n          disableNegative: false,\n          disabled: false,\n          min: null,\n          max: null,\n          allowBlank: false,\n          minimumNumberOfCharacters: 0,\n        }\n      }\n    }\n  }\n</script>\n```\n\n### Component v-model number modifier ([view codesandbox](https://codesandbox.io/s/v-money3-use-as-component-forked-523de?file=/src/App.vue))\n\n`v-model` will always return a string.\nIf the `masked` property is set to true it will be formatted,\notherwise it will be a fixed string representation of a float number.\nIf you need your model to be a float number use the `number` modifier.\nEx.: `v-model.number=\"amount\"`\n\n- `v-model=\"amount\"` will return a fixed string with typeof `string`.\nEx.: \"123456.78\"\n- `v-model.number=\"amount\"` will return a float number with typeof\n`number`. Ex.: 123456.78\n\n```html\n<template>\n  <money3 v-model.number=\"amount\" v-bind=\"config\"></money3>\n</template>\n\n<script>\n  import { Money3Component } from 'v-money3'\n\n  export default {\n    components: { money3: Money3Component },\n    data () {\n      return {\n        amount: 12345.67,\n        config: { ... }\n      }\n    }\n  }\n</script>\n```\n\n### Use as directive ([view codesandbox](https://codesandbox.io/s/v-money3-use-as-directive-e7ror?file=/src/App.vue))\nMust use `v-model.lazy` to bind works properly.\n```html\n<template>\n  <input v-model.lazy=\"amount\" v-money3=\"config\" />\n</template>\n\n<script>\n  import { Money3Directive } from 'v-money3'\n\n  export default {\n    data () {\n      return {\n        amount: '12345.67',\n        config: {\n          prefix: '',\n          suffix: '',\n          thousands: ',',\n          decimal: '.',\n          precision: 2,\n          disableNegative: false,\n          disabled: false,\n          min: null,\n          max: null,\n          allowBlank: false,\n          minimumNumberOfCharacters: 0,\n        }\n      }\n    },\n    directives: { money3: Money3Directive }\n  }\n</script>\n```\n\nBy default directives work with `v-model`.\nIt is not possible to use `v-model.number` on directives, so, if you need\nto work with floats/integers on directives you need to configure the `number`\nmodifier manually.\n\nUsing config:\n```javascipt\nmodelModifiers: {\n  number: true,\n}\n```\nIf you bind it directly you are just fine too:\n```html\n<input :model-modifiers=\"{ number: true }\" v-model.lazy=\"amount\" v-money3=\"config\" />\n```\n\n## Properties\n\n| property  | Required | Type    | Default | Description                                             |\n|-----------|----------|---------|---------|---------------------------------------------------------|\n| precision | **true** | Number  | 2       | How many decimal places                                 |\n| decimal   | false    | String  | \".\"     | Decimal separator                                       |\n| thousands | false    | String  | \",\"     | Thousands separator                                     |\n| prefix    | false    | String  | \"\"      | Currency symbol followed by a Space, like \"R$ \"         |\n| suffix    | false    | String  | \"\"      | Percentage for example: \" %\"                            |\n| masked    | false    | Boolean | false   | If the component output should include the mask or not  |\n| disable-negative | false | Boolean | false | Component does not allow negative values              |\n| disabled  | false    | Boolean | false   | Disable the inner input tag                             |\n| min       | false    | Number  | null | The min value allowed                   |\n| max       | false    | Number  | null | The max value allowed                   |\n| allow-blank | false  | Boolean | false   | If the field can start blank and be cleared out by user |\n| minimum-number-of-characters | false | Number | 0 | The minimum number of characters that the mask should show |\n| should-round | false | Boolean | true | Should default values be rounded or sliced                 |\n\n## Restricted Characters\n\nNumbers `0-9` and the following characters...\n\n- `+`\n- `-`\n\n...are restricted on following properties: \n- `decimal`\n- `thousands`\n- `prefix`\n- `suffix`\n\nRestricted inputs will be filter out of the final mask.\nA console warn with more information will be shown!\n\n\n## Don't want to use a package manager?\n\nUse it directly in the browser! \n\n```html\n<script src=\"https://unpkg.com/v-money3@3.22.3/dist/v-money3.umd.js\"></script>\n```\n\nTake a look at issue [#15](https://github.com/jonathanpmartins/v-money3/issues/15#issuecomment-830988807) and also this [codesandbox](https://codesandbox.io/s/mystifying-paper-bpfyn?file=/index.html) working example.\n\n## Use the internal mask functions\n\n```javascript\nimport { format, unformat } from 'v-money3';\n\nconst config = {\n    debug: false,\n    masked: false,\n    prefix: '',\n    suffix: '',\n    thousands: ',',\n    decimal: '.',\n    precision: 2,\n    disableNegative: false,\n    disabled: false,\n    min: null,\n    max: null,\n    allowBlank: false,\n    minimumNumberOfCharacters: 0,\n    modelModifiers: {\n        number: false,\n    },\n}\n\nconst formatted = format(12345.67, config);\nconsole.log(formatted);\n// output string: 'R$ 12.345,67 #'\n\nconst unformatted = unformat(formatted, config);\nconsole.log(unformatted);\n// output fixed string: '12345.67'\n\n/* ----------------- or ----------------- */\n\nconfig.modelModifiers = { number: true };\n\nconst unformatted = unformat(formatted, config);\nconsole.log(unformatted);\n// output float number: 12345.67\n```\n\n### References\n\n- https://github.com/vuejs-tips/v-money (based on `v-money`)"},"npm":{"downloads":[{"from":"2022-12-18T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":35},{"from":"2022-12-12T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":1967},{"from":"2022-11-19T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":7553},{"from":"2022-09-20T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":24121},{"from":"2022-06-22T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":46109},{"from":"2021-12-19T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":63512}],"starsCount":0},"github":{"starsCount":49,"forksCount":16,"subscribersCount":2,"issues":{"count":73,"openCount":6,"distribution":{"3600":8,"10800":6,"32400":8,"97200":9,"291600":13,"874800":10,"2624400":11,"7873200":3,"23619600":1,"70858800":4,"212576400":0},"isDisabled":false},"contributors":[{"username":"jonathanpmartins","commitsCount":250},{"username":"sougiovn","commitsCount":12},{"username":"AndrolGenhald","commitsCount":1},{"username":"sambitevidev","commitsCount":1},{"username":"dependabot[bot]","commitsCount":1}],"commits":[{"from":"2022-12-12T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":0},{"from":"2022-11-19T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":4},{"from":"2022-09-20T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":14},{"from":"2022-06-22T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":15},{"from":"2021-12-19T00:00:00.000Z","to":"2022-12-19T00:00:00.000Z","count":22}]},"source":{"files":{"readmeSize":9598,"testsSize":45384,"hasNpmIgnore":true,"hasChangelog":true},"linters":["eslint"]}},"evaluation":{"quality":{"carefulness":0.9999999999999999,"tests":0.6,"health":1,"branding":0},"popularity":{"communityInterest":72,"downloadsCount":8040.333333333333,"downloadsAcceleration":39.979204718417044,"dependentsCount":0},"maintenance":{"releasesFrequency":1,"commitsFrequency":0.9,"openIssues":1,"issuesDistribution":0.9}},"score":{"final":0.6380829274441355,"detail":{"quality":0.8464094502755721,"popularity":0.09765033531967508,"maintenance":0.9999499285702218}}}