v-money3 3.24.1 → 3.25.1

package/README.md

@@ -7,64 +7,49 @@
 
 ![The Mask Money](https://cdn-images-1.medium.com/max/600/1*Rpc289FpghuHrnzyVpOUig.gif)
 
-## Disclaimer
+## Introduction
 
-The old [`v-money`](https://github.com/vuejs-tips/v-money) library seems to be abandoned!
-Since I use it in many projects and part of then will be upgraded to Vue3,
-I needed it to work after the upgrades.
-
-Feel free to open an issue or post a pull request!
+Welcome to `v-money3`, a versatile money masking solution designed specifically for `Vue 3` applications. This library serves as a replacement for the now-abandoned [`v-money`](https://github.com/vuejs-tips/v-money) library, ensuring compatibility and functionality for projects transitioning to `Vue 3`.
 
 ## Features
 
-- Arbitrary Precision with `BigInt`
-- Lightweight (<4KB gzipped)
-- Dependency free
-- Mobile support
-- Component or Directive flavors
-- Accept copy/paste
-- Editable
-- Min / Max Limits
-
-## Arbitrary precision
-
-Arbitrary precision is only supported with `v-model`.
-It expects to receive a string representation of a number, such as `'12345.67'`
-
-Some break changes were introduced in this release.
-Let's follow a train of thought:   
-If your precision is set to `2` and you set a default model value of `'55'`, 
-it will be interpreted as `'0.55'`.
-To instruct the correct format on setup you need to pass in `'55.00'`
-when using `v-model`. The same is true for `'5.5'`.
-It will be interpreted as `'0.55'`. Another example: `'55.5'` => `'5.55'`.
-Arbitrary precision is supported by using `string` and `BigInt` with `v-model`.
-
-For the majority of users, it will make sense to use float numbers and stay within the
-boundaries of [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number).
-If you fit this instance, you need to use `v-model`
-with the number modifier, or `v-model.number`. But than,
-you are stuck with numbers smaller than `2^53 - 1` or
-`9007199254740991` or `9,007,199,254,740,991`. - Little more than nine quadrilion...
-See [MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER).
-
-For those who are using `v-model.number`, integers and floats are completely
-understood.  
-Let's follow another train of thought:  
-If your precision is set to `2` and you set a default model value of `55`,
-it will be interpreted as `55.00`. The same is true for `5.5`.
-It will be interpreted as `5.50`. Another example: `55.5` => `55.50`.
+- **Arbitrary Precision:** Utilize [`BigInt`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) for precise calculations.
+- **Lightweight:** Less than 4KB when gzipped.
+- **Dependency-free:** No external dependencies for seamless integration.
+- **Mobile Support:** Ensures a consistent experience across devices.
+- **Component or Directive Flavors:** Choose between component-based or directive-based implementation.
+- **Copy/Paste Support:** Easily accept input via copy/paste actions.
+- **Min/Max Limits:** Set minimum and maximum limits for input values.
+
+## Arbitrary Precision
+
+In this release, some breaking changes have been introduced. Let's delve into the details:
+
+`v-money3` supports arbitrary precision through the use of `BigInt`. Arbitrary precision is only supported with `v-model`. When using `v-model`, ensure the input is provided as a string representation of a number (e.g., `'12345.67'`). If your precision is set to `2` and you provide a default `v-model` value of `'55'`, it will be interpreted as `'0.55'`. To maintain the correct format, ensure you pass `'55.00'` when using `v-model`.
+
+
+For most users, it's advisable to utilize floating-point numbers and adhere to the boundaries of [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number). In such cases, employing `v-model` with the number modifier, or `v-model.number`, is recommended. However, this limits you to numbers smaller than `2^53 - 1` or `9007199254740991` (approximately nine quadrillion). Refer to [MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) for more information. For users employing `v-model.number`, integers and floats are intuitively understood. If your precision is set to `2` and you input a default `v-model.number` value of `55`, it will be interpreted as `55.00`. The same applies to `5.5`, which will be rendered as `5.50`.
+
 
 [More Examples](https://github.com/jonathanpmartins/v-money3/issues/38#issuecomment-903214235)
 
-## Usage
+## Browser Target
 
-### Installation
+If you encounter the error message: `Big integer literals are not available in the configured target environment`, please ensure your browser targets are updated to include at least the following entries:
+```
+['es2020', 'safari14']
+```
+Can I use `bigInt`? https://caniuse.com/bigint
+
+More information: [#66](https://github.com/jonathanpmartins/v-money3/issues/66), [#70](https://github.com/jonathanpmartins/v-money3/issues/70), [#89](https://github.com/jonathanpmartins/v-money3/issues/89)
+
+## Installation
 
 ```bash
 npm i v-money3 --save
 ```
 
+## Usage
 
 ### Register Globally ([view codesandbox](https://codesandbox.io/s/v-money3-global-registering-lv1jv?file=/src/main.js))
 
@@ -129,6 +114,7 @@ app.directive('money3', Money3Directive)
           min: null,
           max: null,
           allowBlank: false,
+          treatZeroAsBlank: true,
           minimumNumberOfCharacters: 0,
           shouldRound: true,
           focusOnRight: false,
@@ -141,16 +127,12 @@ app.directive('money3', Money3Directive)
 
 ### Component v-model number modifier ([view codesandbox](https://codesandbox.io/s/v-money3-use-as-component-forked-523de?file=/src/App.vue))
 
-`v-model` will always return a string.
-If the `masked` property is set to true it will be formatted,
-otherwise it will be a fixed string representation of a float number.
-If you need your model to be a float number use the `number` modifier.
-Ex.: `v-model.number="amount"`
+When using `v-model`, the returned value will always be a `string`.
+If the `masked` property is set to `true`, it will be formatted accordingly; otherwise, it will be a fixed string representation of a floating-point number.
+If you require your model to be a floating-point number, utilize the `number` modifier. For example:
 
-- `v-model="amount"` will return a fixed string with typeof `string`.
-Ex.: "123456.78"
-- `v-model.number="amount"` will return a float number with typeof
-`number`. Ex.: 123456.78
+- `v-model="amount"` will return a fixed string with a typeof `string`. For instance: `'123456.78'`
+- `v-model.number="amount"` will return a floating-point number with a typeof `number`. For example: `123456.78`
 
 ```html
 <template>
@@ -173,7 +155,7 @@ Ex.: "123456.78"
 ```
 
 ### Use as directive ([view codesandbox](https://codesandbox.io/s/v-money3-use-as-directive-e7ror?file=/src/App.vue))
-Must use `v-model.lazy` to bind works properly.
+To ensure proper functionality, you must use `v-model.lazy` for binding.
 ```html
 <template>
   <input v-model.lazy="amount" v-money3="config" />
@@ -197,6 +179,7 @@ Must use `v-model.lazy` to bind works properly.
           min: null,
           max: null,
           allowBlank: false,
+          treatZeroAsBlank: true,
           minimumNumberOfCharacters: 0,
           shouldRound: true,
           focusOnRight: false,
@@ -208,10 +191,8 @@ Must use `v-model.lazy` to bind works properly.
 </script>
 ```
 
-By default, directives work with `v-model`.
-It is not possible to use `v-model.number` on directives, so, if you need
-to work with floats/integers on directives you need to configure the `number`
-modifier manually.
+By default, directives are only compatible with `v-model`. It's important to note that using `v-model.number` directly on directives is not supported.
+If you need to work with `float` or `integer` on directives, you'll need to manually configure the number modifier.
 
 Using config:
 ```javascipt
@@ -219,7 +200,7 @@ modelModifiers: {
   number: true,
 }
 ```
-If you bind it directly you are just fine too:
+If you directly bind it, you're perfectly fine as well:
 ```html
 <input :model-modifiers="{ number: true }" v-model.lazy="amount" v-money3="config" />
 ```
@@ -239,6 +220,7 @@ If you bind it directly you are just fine too:
 | min                          | false    | Number   | null    | The min value allowed                                      |
 | max                          | false    | Number   | null    | The max value allowed                                      |
 | allow-blank                  | false    | Boolean  | false   | If the field can start blank and be cleared out by user    |
+| treat-zero-as-blank          | false    | Boolean  | true    | When `allow-blank` is true, controls whether zero is rendered as blank. Set to `false` to distinguish zero from blank (e.g. show `0.00` and only blank on empty input). Has no effect when `allow-blank` is false |
 | minimum-number-of-characters | false    | Number   | 0       | The minimum number of characters that the mask should show |
 | should-round                 | false    | Boolean  | true    | Should default values be rounded or sliced                 |
 | focus-on-right               | false    | Boolean  | false   | When focus, set the cursor to the far right                |
@@ -257,8 +239,7 @@ Numbers `0-9` and the following characters...
 - `prefix`
 - `suffix`
 
-Restricted inputs will be filter out of the final mask.
-A console warn with more information will be shown!
+Restricted inputs will be filtered out of the final mask, and a console warning with more information will be displayed.
 
 
 ## Don't want to use a package manager?
@@ -289,6 +270,7 @@ const config = {
     min: null,
     max: null,
     allowBlank: false,
+    treatZeroAsBlank: true,
     minimumNumberOfCharacters: 0,
     modelModifiers: {
         number: false,
@@ -314,6 +296,16 @@ console.log(unformatted);
 // output float number: 12345.67
 ```
 
+
+### Contribution and Feedback
+Your contributions and feedback are highly valued! If you encounter any issues or have suggestions for improvement, please feel free to open an issue or submit a pull request on GitHub.
+
+The previous `v-money` library has been abandoned, prompting the development of v-money3 to accommodate projects migrating to `Vue 3`.
+
+Happy coding with v-money3!
+
+
 ### References
 
 - https://github.com/vuejs-tips/v-money (based on `v-money`)
+

package/dist/component.vue.d.ts

@@ -68,6 +68,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: () => boolean;
     };
+    treatZeroAsBlank: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
     minimumNumberOfCharacters: {
         type: NumberConstructor;
         default: () => number;
@@ -80,9 +84,9 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: () => boolean;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:model-value": (value: string | number) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     debug: {
         required: false;
         type: BooleanConstructor;
@@ -152,6 +156,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: () => boolean;
     };
+    treatZeroAsBlank: {
+        type: BooleanConstructor;
+        default: () => boolean;
+    };
     minimumNumberOfCharacters: {
         type: NumberConstructor;
         default: () => number;
@@ -179,10 +187,11 @@ declare const _default: import("vue").DefineComponent<{
     min: string | number;
     max: string | number;
     allowBlank: boolean;
+    treatZeroAsBlank: boolean;
     minimumNumberOfCharacters: number;
     modelModifiers: Record<string, any>;
     shouldRound: boolean;
     focusOnRight: boolean;
     id: string | number;
-}>;
+}, {}>;
 export default _default;

package/dist/directive.d.ts

@@ -1,7 +1,7 @@
 import { DirectiveBinding } from 'vue';
 declare const _default: {
-    mounted(el: HTMLInputElement, binding: DirectiveBinding): void;
-    updated(el: HTMLInputElement, binding: DirectiveBinding): void;
-    beforeUnmount(el: HTMLInputElement): void;
+    mounted(host: HTMLInputElement, binding: DirectiveBinding): void;
+    updated(host: HTMLInputElement, binding: DirectiveBinding): void;
+    beforeUnmount(host: HTMLInputElement): void;
 };
 export default _default;

package/dist/options.d.ts

@@ -11,10 +11,12 @@ export interface VMoneyOptions {
     min: number | string | null;
     max: number | string | null;
     allowBlank: boolean;
+    treatZeroAsBlank: boolean;
     minimumNumberOfCharacters: number;
     modelModifiers: any;
     shouldRound: boolean;
     focusOnRight: boolean;
+    lazy: boolean;
     [key: string]: any;
 }
 declare const _default: VMoneyOptions;