💸 Use Money 💰

Installation

Install the @ossph/use-money package using npm or yarn:

npm install @ossph/use-money

or

yarn add @ossph/use-money

Money Component

Importing the Component

To use the Money component, import it as follows:

import { Money } from '@ossph/use-money';

Example Usage

Use the Money component in your Vue templates as follows:

<template>
  <div>
    <Money :input="123456.78" />
  </div>
</template>

<script>
import { Money } from '@ossph/use-money';

export default {
  components: {
    Money
  }
};
</script>

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 | | Whether to show the currency symbol. | | showFractional | Boolean | | Whether to show the fractional part of the money value. |

Money Composable

Importing the Composable

To use the useMoney composable, import it as follows:

import { useMoney } from '@ossph/use-money';

Example Usage

Use the useMoney composable in your Vue composition functions as follows:

<template>
  <div>
    <p>Formatted Money Value: {{ formattedMoney }}</p>
  </div>
</template>

<script>
import { useMoney } from '@ossph/use-money';

export default {
  setup() {
    const { moneyValue } = useMoney(123456.78);
    
    return {
      formattedMoney: moneyValue
    };
  }
};
</script>

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. |