BaseCurrency

Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.

Regarding the format or mask to be defined as string:

• Use 'i' to define integer numbers.
• Use 'd' to define decimal numbers. You can define the length of the decimal part. If the format doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.
• Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.
• Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character.
• If you want to hide the decimal part if it's zero, you can add the ? symbol after the decimal characters (e.g. 'i.iii,dd?', for 1234 you would get 1.234 instead of 1.234,00).
• Set whatever you need around the integers and decimals marks.
• Default mask: 'i.iii,dd' which returns '1.345,67'.

Props

Name	Description	Type	Default
value	Numeric value to be formatted.	number
format	The format as string.	string

Example

Renders the value received as a property, which always must be a JavaScript number, with the proper format provided as string property. The rendered tag is a span in order to render a default inline HTML element.

Basic usage

<template>
  <BaseCurrency :value="12345678.87654321" />
  <!-- output: '12.345.678,87' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678.87654321" format="i.iii,ddd? €" />
  <!-- output: '12.345.678,876 €' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678" format="i.iii,ddd? €" />
  <!-- output: '12.345.678 €' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678.87654321" format="$ i.iii,dd" />
  <!-- output: '$ 12.345.678,87' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678.87654321" format="$i.iii,dd" />
  <!-- output: '$12.345.678,87' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678.87654321" format="i.iii,dd €" />
  <!-- output: '12.345.678,87 €' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678.87654321" format="i.iii,dd€" />
  <!-- output: '12.345.678,87€' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678.87654321" format="i,iii.dd €" />
  <!-- output: '12,345,678.87 €' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678.87654321" format="i iii.dd €" />
  <!-- output: '12 345 678.87 €' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678.87654321" format="i iii - dd €" />
  <!-- output: '12 345 678 - 87 €' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678.87654321" format="i.iii,dddddd €" />
  <!-- output: '12.345.678,876543 €' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678.87" format="i.iii,dddddd €" />
  <!-- output: '12.345.678,870000 €' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678" format="i.iii,dddddd €" />
  <!-- output: '12.345.678,000000 €' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678.87654321" format="i.iii,dd €" />
  <!-- output: '12.345.678,87 €' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>

<template>
  <BaseCurrency :value="12345678.87654321" format="i.iii €" />
  <!-- output: '12.345.678 €' -->
</template>
<script>
  import { BaseCurrency } from '@empathyco/x-components';
  export default {
    name: 'BaseCurrencyDemo',
    components: {
      BaseCurrency
    }
  };
</script>