https://github.com/ossphilippines/use-money
A Vue 3 component and composable for formatting money
https://github.com/ossphilippines/use-money
hacktoberfest
Last synced: about 1 year ago
JSON representation
A Vue 3 component and composable for formatting money
- Host: GitHub
- URL: https://github.com/ossphilippines/use-money
- Owner: OSSPhilippines
- License: mit
- Created: 2022-09-17T07:27:58.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-07T19:15:19.000Z (over 2 years ago)
- Last Synced: 2024-05-01T09:42:56.149Z (about 2 years ago)
- Topics: hacktoberfest
- Language: JavaScript
- Homepage:
- Size: 179 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 💸 Use Money 💰
## Installation
Install the @ossph/use-money package using npm or yarn:
```bash
npm install @ossph/use-money
```
or
```bash
yarn add @ossph/use-money
```
## Money Component
### Importing the Component
To use the **Money** component, import it as follows:
```js
import { Money } from '@ossph/use-money';
```
### Example Usage
Use the **Money** component in your Vue templates as follows:
```html
import { Money } from '@ossph/use-money';
export default {
components: {
Money
}
};
```
### Props API
The `Money` component accepts the following props:
| Prop Name | Type | Default | Description |
|----------------|---------------------|---------|----------------------------------------------------|
| `input` | Number/String | | The input money value to be formatted. |
| `symbol` | String | '$' | The currency symbol. |
| `symbolStyles` | Object | {} | CSS styles for the currency symbol. |
| `symbolClasses`| Array | [] | CSS classes for the currency symbol. |
| `textStyle` | Object | {} | CSS styles for the text. |
| `showSymbol` | Boolean | false | Whether to show the currency symbol. |
| `showFractional` | Boolean | false | Whether to show the fractional part of the money value. |
## Money Composable
### Importing the Composable
To use the **useMoney** composable, import it as follows:
```js
import { useMoney } from '@ossph/use-money';
```
### Example Usage
Use the useMoney composable in your Vue composition functions as follows:
```js
Formatted Money Value: {{ formattedMoney }}
import { useMoney } from '@ossph/use-money';
export default {
setup() {
const { moneyValue } = useMoney(123456.78);
return {
formattedMoney: moneyValue
};
}
};
```
### Composable API
The `useMoney` composable takes the following parameters:
| Prop Name | Type | Default | Description |
|------------|--------------------|--------------------------------------------------|----------------------------------------------------|
| `value` | Number/String | | The input money value to be formatted. |
| `options` | Object | `{ showFractional: true, showSymbol: true, symbol: '$' }` | Formatting options for money value. |
| `showFractional` | Boolean | `true` | Whether to show the fractional part of the money value. |
| `showSymbol` | Boolean | `true` | Whether to show the currency symbol. |
| `symbol` | String | `'$'` | The currency symbol. |
It returns an object with the following properties:
| Property | Type | Description |
|--------------------|--------|----------------------------------------------------|
| `moneyValue` | String | The formatted integer part of the money value. |
| `moneyFractional` | String | The original fractional part. |
| `moneySymbol` | String | The currency symbol. |
| `moneyConcatenated`| String | The concatenated value with the currency symbol. |