Update input.md docs - adding example for vue-autonumeric as 3rd party mask processor

[mickey-bimlive]

Add example about how to use vue-autonumeric as 3rd party mask processor.
Note that the existing example for v-money points to a package that is no longer actively maintained.

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• [x ] Documentation
• Code style update
• Refactor
• Build-related changes
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• [x ] No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• [x ] It's submitted to the dev branch and not the master branch
• When resolving a specific issue, it's referenced in the PR's title (e.g. fix: #xxx[,#xxx], where "xxx" is the issue number)
• It's been tested on a Cordova (iOS, Android) app
• It's been tested on a Electron app
• [x ] Any necessary documentation has been added or updated in the docs (for faster update click on "Suggest an edit on GitHub" at bottom of page) or explained in the PR's description.

If adding a new feature, the PR's description includes:

• [x ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:
Suggest to update the q-input doc for this example on how to use vue-autonumeric. The existing example for v-money uses a component that is no longer actively maintained., and has significantly less features and downloads compared to vue-autonumeric.

[sschneider-ihre-pvs]

how would I add vue-autonumeric to a project in the first place without that aliasing and stuff?

[mickey-bimlive]

I remember that I updated my quasar.conf.js to support VueAutoNumeric in my Quasar production build:

In the extendWebPack() { } part, I added:
cfg.resolve.alias = {
...cfg.resolve.alias, // This adds the existing alias
// Add your own alias like this:
// alias: path.resolve(__dirname, './src/somefolder'),
// Adding alias for VueAutoNumeric:
AutoNumeric: path.resolve(__dirname, './node_modules/autonumeric/dist/autoNumeric.min')
}

Without that, I remember I had a build error in my production build ("Module not found: Error: Can't resolve 'AutoNumeric'").
Note that it uses another package "path", which needs to be declared upfront in quasar.conf.js:
const path = require("path"); // Needed for WebPack alias for VueAutoNumeric

The rest of using VueAutoNumeric is quite simple:
import VueAutonumeric from "vue-autonumeric";
...
components: { ..., VueAutoNumeric }
...

Then you can use the vue-autonumeric component for input fields in your template.

[sschneider-ihre-pvs]

I hoped i get around this config stuff

[mickey-bimlive]

I fear no....it is even documented that it is needed in https://www.npmjs.com/package/vue-autonumeric

[sschneider-ihre-pvs]

Aliasing doesn't seem to help

Uncaught (in promise) TypeError: t is not a function
    render vue-autonumeric.min.js:1
    node_modules runtime-core.esm-bundler.js:891
    node_modules runtime-core.esm-bundler.js:4636
    node_modules reactivity.esm-bundler.js:197

Uncaught (in promise) TypeError: createElement is not a function
    render vue-autonumeric.js:335
    node_modules runtime-core.esm-bundler.js:891
    node_modules runtime-core.esm-bundler.js:4636
    node_modules reactivity.esm-bundler.js:197

[sschneider-ihre-pvs]

Oh let me guess, vue2 only?

[mickey-bimlive]

Maybe, I'm using it only with Vue 2/Quasar 1.

See also autoNumeric/vue-autoNumeric#52

I fear though there is no good other alternative on Vue 3, as V-Money seems to be dead.

[mickey-bimlive]

I found this: https://www.npmjs.com/package/vue-numeric - it says it works with Vue 2.
No idea though how it compares functionally with Vue-AutoNumeric, which I found quite powerful for my use cases.

[sschneider-ihre-pvs]

the rendering has breaking changes in vue3 https://v3.vuejs.org/guide/migration/render-function-api.html#_2-x-syntax so those won't work with quasar 2

[mickey-bimlive]

I did a sniff test of the above alternative, VueNumeric, and found that it is not suitable for my needs. It supports the output of decimal numbers, but not masked, configurable input of decimals like VueAutoNumeric (= "as-you-type" formatting).

The placeholder prop in VueNumeric does something totally different (displays default text if field is empty) as the same prop in VueAutoNumeric (= intelligent mask for decimal input).

So there is no good alternative for VueAutoNumeric in sight - too bad.

[mickey-bimlive]

Found another potential alternative: https://dm4t2.github.io/vue-currency-input/ - it supports Vue 3 and looks promising. Haven't tried it yet.

[mickey-bimlive]

I tried VueCurrencyInput, https://dm4t2.github.io/vue-currency-input/ on Vue 2/Quasar 1 and it works very well. It looks like a good alternative for VueAutoNumeric. It supports Vue 3 as well.