{"analyzedAt":"2022-11-05T13:36:52.440Z","collected":{"metadata":{"name":"vue-currency-directive","scope":"unscoped","version":"1.5.5","description":"Simple, quick custom directive for handling currency format inside text inputs.","keywords":["Vue","currency","Javascript","Vue directive"],"date":"2022-11-04T21:57:15.311Z","author":{"name":"Mahmoud Zakaria"},"publisher":{"username":"m.zekas90","email":"m.zakria90@gmail.com"},"maintainers":[{"username":"m.zekas90","email":"m.zakria90@gmail.com"}],"repository":{"type":"git","url":"git+https://github.com/mahmoudZakaria90/vue-currency-directive.git"},"links":{"npm":"https://www.npmjs.com/package/vue-currency-directive","homepage":"https://github.com/mahmoudZakaria90/vue-currency-directive","repository":"https://github.com/mahmoudZakaria90/vue-currency-directive","bugs":"https://github.com/mahmoudZakaria90/vue-currency-directive/issues"},"license":"MIT","devDependencies":{"@babel/core":"^7.11.4","@babel/preset-env":"^7.11.0","@vue/test-utils":"^1.0.4","babel-cli":"^6.26.0","babel-jest":"^26.3.0","eslint":"^7.7.0","eslint-plugin-vue":"^6.2.2","jest":"^26.4.2","rollup":"^2.26.4","rollup-plugin-cleaner":"^1.0.0","rollup-plugin-terser":"^7.0.0","vue":"^2.6.12","vue-template-compiler":"^2.6.12"},"releases":[{"from":"2022-10-06T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":3},{"from":"2022-08-07T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":3},{"from":"2022-05-09T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":3},{"from":"2021-11-05T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":3},{"from":"2020-11-05T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":3}],"hasTestScript":true,"readme":"# Vue-currency-directive\nSimple, quick custom directive for handling currency format inside text inputs.\n\n[![Build Status](https://travis-ci.org/mahmoudZakaria90/vue-currency-directive.svg?branch=master)](https://travis-ci.com/mahmoudZakaria90/vue-currency-directive)\n[![Version](https://img.shields.io/npm/v/vue-currency-directive.svg)](https://www.npmjs.com/package/vue-currency-directive)\n[![Downloads](https://img.shields.io/npm/dm/vue-currency-directive.svg)](https://npmcharts.com/compare/vue-currency-directive)\n[![License](https://img.shields.io/npm/l/vue-currency-directive.svg?)](https://www.npmjs.com/package/vue-currency-directive)\n\nCompatible with Vue 2.x\n- <a href=\"https://codepen.io/Mahmoud-Zakaria/pen/YzqVBXE\" target=\"_blank\">Demo/Playground</a>\n- <a href=\"#installation\">Installation</a>\n- <a href=\"#usage\">Usage</a>\n- <a href=\"#global-registration\">Global registration</a>\n- <a href=\"#local-registration\">Local registration</a>\n- <a href=\"#dynamic-arguments\">Dynamic arguments</a>\n- <a href=\"#examples\">Examples</a>\n\n# Installation\n`npm i vue-currency-directive || yarn add vue-currency-directive`\n\n# Usage\n- Register in your `data()` a main state object e.g. `amount` and inside it 2 main properties `value` and `formatted`.<br />\n- You mainly get 2 outputs: one for **the unformatted/original** value and the other for **the formatted value**.\n- Valid values for currency `USD`, `EUR`, `GBP`, `EGP`, `SAR`, for more [Currency Codes (ISO 4217 Standard)](https://www.techonthenet.com/js/currency_codes.php).\n- Valid values for locale `en-US`, `de-DE`, `fr-FR`, `ar-EG`, `ar-SA`, for more [List of locales](https://www.w3schools.com/JSREF/jsref_tolocalestring_number.asp).\n\n## In DOM/Single-file-component\n`<input v-currency:<currency?>|[<minimumFractionDigits?>,<maximumFractionDigits?> ,<locale?>]=\"<bindingExpression>\">`\n```\nv-currency=\"amount.value\"\nv-currency:EUR=\"amount.value\"\nv-currency:EUR|[1,2,(en-GB)]=\"amount.value\"\n```\n\nFor example:\n```\n<template>\n  <input v-currency=\"amount.value\">\n  <input v-currency=\"foo.value\">\n  <input v-currency=\"bar.value\">\n</template>\n\n<script>\n...\nexport default {\n  data(){\n    return {\n      amount: { // naming is not strict 'amount, foo, bar, ...etc'\n        value: '', \n        formatted: '' // Better to be empty\n      }, \n\n      foo: {\n        value: '',\n        formatted: '' // Better to be empty\n      },\n\n      bar: {\n        value: '',\n        formatted: '' // Better to be empty\n      }\n    }\n  }\n}\n...\n</script>\n```\n## With a Component/controlled input\n```\nconst CurrencyInput = {\n  template: '<input />',\n}\n\n// In DOM/Single-file-component\n<CurrencyInput v-currency=\"amount.value\">\n```\n**Note**: in case you are using a multiple or a group of different inputs with different types and you are not sure that the currency input is going to be indexed as the first item then you could pass a class name `.v-currency-input` other than that if it's going to be the only or the first input in the group then you don't have to.<br><br>\n\n## Global registration\n```\nimport Vue from 'vue';\nimport vueCurrencyDirective from 'vue-currency-directive';\n\nVue.directive('currency', vueCurrencyDirective);\n```\n\n## Local registration\n```\n<script>\nimport vueCurrencyDirective from 'vue-currency-directive';\nexport default {\n  ...\n  data(){\n    amount: {\n      value: '', \n      formatted: '' // Better to be empty\n    }, \n  },\n  directives: {\n    currency: vueCurrencyDirective\n  },\n  ...\n}\n</script>\n\n```\n# Dynamic arguments\nIn case you want to handle arguments in more dynamic way based on data changes and not sticking with a specific `currency` and `locale`, just add 2 more state inputs `currency` and `locale` inside the parent object e.g. `amount` in our case and remove any directive args e.g.`:EUR[de-DE]` from the component and vice-versa:\n```\n<template>\n  <input v-currency=\"amount.value\" />\n\n  //Currency selector\n  <select v-model=\"amount.currency\">\n    <option value=\"USD\">USD</option>\n    <option value=\"EUR\">EUR</option>\n    <option value=\"GBP\">GBP</option>\n  </select>\n\n  //Locale selector\n  <select v-model=\"amount.locale\">\n    <option value=\"en-US\">US</option>\n    <option value=\"de-DE\">DE</option>\n    <option value=\"en-GB\">GB</option>\n  </select>\n  \n</template>\n\n<script>\n...\nexport default {\n  data(){\n    return {\n      amount: { // naming is not strict 'amount, foo, bar, ...etc'\n        value: '', \n        currency: '',\n        locale: '',\n        formatted: '' // Better to be empty\n      }\n    }\n  }\n}\n...\n</script>\n```\n\n## Examples\nPassing no arguments will reflect to `USD` currency by default and for locale it will use the configured browser language.  \n```\n<input v-currency=\"amount.value\"> // amount.value = 3244\n//Output: $3,244.00\n```\n\nPassing currency argument only without locale.  \n```\n<input v-currency:EUR=\"amount.value\"> // amount.value = 100234\n//Output: €100,234.00\n```\n\nPassing with locale argument and different currency.  \n```\n<input v-currency:EGP[ar-EG]=\"amount.value\"> // amount.value = 554342\n//Output: ٥٥٤٬٣٤٢٫٠٠ ج.م.‏ \n```"},"npm":{"downloads":[{"from":"2022-11-04T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":106},{"from":"2022-10-29T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":220},{"from":"2022-10-06T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":320},{"from":"2022-08-07T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":783},{"from":"2022-05-09T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":1503},{"from":"2021-11-05T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":3654}],"starsCount":0},"github":{"homepage":"https://www.npmjs.com/package/vue-currency-directive","starsCount":7,"forksCount":2,"subscribersCount":2,"issues":{"count":27,"openCount":0,"distribution":{"3600":23,"10800":3,"32400":0,"97200":0,"291600":1,"874800":0,"2624400":0,"7873200":0,"23619600":0,"70858800":0,"212576400":0},"isDisabled":false},"contributors":[{"username":"mahmoudZakaria90","commitsCount":129},{"username":"MahmoudAli-heycar","commitsCount":5}],"commits":[{"from":"2022-10-29T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":8},{"from":"2022-10-06T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":8},{"from":"2022-08-07T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":8},{"from":"2022-05-09T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":8},{"from":"2021-11-05T00:00:00.000Z","to":"2022-11-05T00:00:00.000Z","count":8}]},"source":{"files":{"readmeSize":5055,"testsSize":4922},"badges":[{"urls":{"original":"https://travis-ci.org/mahmoudZakaria90/vue-currency-directive.svg?branch=master","service":"https://api.travis-ci.org/mahmoudZakaria90/vue-currency-directive.svg?branch=master","shields":"https://img.shields.io/travis/mahmoudZakaria90/vue-currency-directive/master.svg","content":"https://img.shields.io/travis/mahmoudZakaria90/vue-currency-directive/master.json"},"info":{"service":"travis","type":"build","modifiers":{"branch":"master"}}},{"urls":{"original":"https://img.shields.io/npm/v/vue-currency-directive.svg","shields":"https://img.shields.io/npm/v/vue-currency-directive.svg","content":"https://img.shields.io/npm/v/vue-currency-directive.json"},"info":{"service":"npm","type":"version","modifiers":{"type":"v"}}},{"urls":{"original":"https://img.shields.io/npm/dm/vue-currency-directive.svg","shields":"https://img.shields.io/npm/dm/vue-currency-directive.svg","content":"https://img.shields.io/npm/dm/vue-currency-directive.json"},"info":{"service":"npm","type":"downloads","modifiers":{"type":"dm"}}},{"urls":{"original":"https://img.shields.io/npm/l/vue-currency-directive.svg?","shields":"https://img.shields.io/npm/l/vue-currency-directive.svg","content":"https://img.shields.io/npm/l/vue-currency-directive.json"},"info":{"service":"npm","type":"license","modifiers":{"type":"l"}}}],"linters":["eslint"]}},"evaluation":{"quality":{"carefulness":0.84,"tests":0.6,"health":1,"branding":0.6},"popularity":{"communityInterest":13,"downloadsCount":261,"downloadsAcceleration":-0.2513127853881283,"dependentsCount":0},"maintenance":{"releasesFrequency":1,"commitsFrequency":0.9,"openIssues":1,"issuesDistribution":1}},"score":{"final":0.6546391983371436,"detail":{"quality":0.959941418520218,"popularity":0.04764634193375835,"maintenance":0.9999444374407507}}}