vue-autonumeric
Advanced tools
Comparing version 1.0.3 to 1.0.4
@@ -74,4 +74,4 @@ /* global module, require, __dirname */ | ||
| // cf. https://webpack.js.org/configuration/externals/ | ||
| AutoNumeric: 'autonumeric', | ||
| AutoNumeric: 'AutoNumeric', | ||
| }, | ||
| }; |
| ## Changelog for vue-autoNumeric | ||
| ### 1.0.4 | ||
| + Fix the component size issue which bundled the whole `AutoNumeric` library | ||
| + Update the documentation with how to install the component, depending if the AutoNumeric library should be bundled or not | ||
| ### 1.0.3 | ||
@@ -4,0 +8,0 @@ + Fix importing issues with the `AutoNumeric` library |
| { | ||
| "name": "vue-autonumeric", | ||
| "version": "1.0.3", | ||
| "version": "1.0.4", | ||
| "description": "An AutoNumeric wrapper for Vue.js", | ||
@@ -5,0 +5,0 @@ "author": "Alexandre Bonneau <alexandre.bonneau@linuxfr.eu>", |
| ## vue-autoNumeric | ||
| A Vue.js component that wraps the awesome autoNumeric input formatter library | ||
| A Vue.js component that wraps the awesome [AutoNumeric](https://github.com/autoNumeric/autoNumeric/) input formatter library | ||
@@ -15,3 +15,3 @@ [![NPM][nodei-image]][nodei-url] | ||
| vue-autoNumeric wraps the awesome autoNumeric library and generate an `<input>` element managed by [AutoNumeric](https://github.com/autoNumeric/autoNumeric/). | ||
| vue-autoNumeric wraps the awesome AutoNumeric library and generate an `<input>` element managed by [AutoNumeric](https://github.com/autoNumeric/autoNumeric/). | ||
@@ -32,14 +32,29 @@ **Checkout the [demo](https://codepen.io/AnotherLinuxUser/pen/pWgOrZ?editors=1010)!** | ||
| #### ...in your html `<head>` tag | ||
| In the html `<head>` tag directly, or by using a CDN like so: | ||
| #### ...in your html `<head>` tag directly | ||
| ```html | ||
| <!-- locally... --> | ||
| <script src="../node_modules/autonumeric/dist/autonumeric.min.js"></script> | ||
| <!-- or --> | ||
| <script src="//unpkg.com/autonumeric"></script> | ||
| <!-- ...or by using a CDN --> | ||
| <script src="https://unpkg.com/autonumeric"></script> | ||
| ``` | ||
| Then you need to tell Webpack to treat the `AutoNumeric` dependency as [external](https://webpack.js.org/configuration/externals/) so that it does not try to bundle it.<br>Here is a really simple `webpack.config.js` example that does that: | ||
| ```js | ||
| module.exports = { | ||
| entry : './src/vueAutonumericTest.js', | ||
| output : { | ||
| filename: './dist/bundle.js' | ||
| }, | ||
| externals: { | ||
| AutoNumeric: 'AutoNumeric', | ||
| }, | ||
| }; | ||
| ``` | ||
| #### ...or by importing it directly as a module | ||
| You can choose to directly import the `AutoNumeric` library in your source code using: | ||
| You can choose to directly import the AutoNumeric library in your source code.<br>First, install the `autonumeric` dependency so that Webpack can find it using: | ||
| ```sh | ||
@@ -51,8 +66,36 @@ yarn add autonumeric | ||
| You'll then be able to use the `vue-autonumeric` component in your scripts using: | ||
| You will as usual be able to use the `vue-autonumeric` component in your Vue components using: | ||
| ```js | ||
| import AutoNumeric from 'autonumeric'; | ||
| import VueAutonumeric from 'vue-autonumeric'; | ||
| import VueAutonumeric from '../src/components/VueAutonumeric.vue'; | ||
| export default { | ||
| name : 'myComponent', | ||
| components: { | ||
| VueAutonumeric, | ||
| }, | ||
| data() { | ||
| return { | ||
| // | ||
| }; | ||
| }, | ||
| } | ||
| ``` | ||
| However, when doing that if you want to be able to bundle all the scripts together with Webpack, you'll need to define an alias for the `AutoNumeric` library in your Webpack config like so: | ||
| ```js | ||
| module.exports = { | ||
| entry : './src/vueAutonumericTest.js', | ||
| output : { | ||
| filename: './dist/bundle.js' | ||
| }, | ||
| resolve: { | ||
| alias: { | ||
| AutoNumeric: 'autonumeric/dist/autoNumeric.min', | ||
| }, | ||
| }, | ||
| }; | ||
| ``` | ||
| ### How to use? | ||
@@ -59,0 +102,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Uses eval
Supply chain riskPackage uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by24.71%
217
Worsened metrics
- Total package byte prevSize
- decreased by-92.62%
365602
- Lines of code
- decreased by-80.81%
1228
- Number of low quality alerts
- increased byInfinity%
1
- Number of medium supply chain risk alerts
- increased by200%
3