Skip to content

Commit

Permalink
Merge pull request #29 from vinayakkulkarni/docs/number-format
Browse files Browse the repository at this point in the history 
docs: number formatting
  • Loading branch information
@vinayakkulkarni
vinayakkulkarni committed Jun 14, 2020
2 parents f2523bb + 2e7ee4c commit 84cb2e9
Show file tree
Hide file tree
Showing 4 changed files with 545 additions and 197 deletions.
59 changes: 53 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,53 @@
# V-Intl 🌏

<a href="https://github.com/vinayakkulkarni/janak"><img alt="Built with Janak" src="https://img.shields.io/badge/dynamic/json?color=success&label=built%20using%20janak&prefix=v&query=version&url=https%3A%2F%2Fraw.githubusercontent.com%2Fvinayakkulkarni%2Fjanak%2Fmaster%2Fpackage.json"></a>
<a href="https://github.com/vinayakkulkarni/janak" rel="nofollow">
<img alt="Built with Janak" src="https://img.shields.io/badge/dynamic/json?color=success&label=built%20using%20janak&prefix=v&query=version&url=https%3A%2F%2Fraw.githubusercontent.com%2Fvinayakkulkarni%2Fjanak%2Fmaster%2Fpackage.json">
</a>
<a href="https://github.com/vinayakkulkarni/v-intl/actions?query=workflow%3Aci" rel="nofollow">
<img alt="CI Pipeline" src="https://github.com/vinayakkulkarni/v-intl/workflows/ci/badge.svg">
</a>
<a href="https://github.com/vinayakkulkarni/v-intl/actions?query=workflow%3A%22Ship+js+trigger%22" rel="nofollow">
<img alt="ShipJS Trigger" src="https://github.com/vinayakkulkarni/v-intl/workflows/Ship%20js%20trigger/badge.svg">
</a>
<a href="https://github.com/vinayakkulkarni/v-intl/releases" rel="nofollow">
<img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/vinayakkulkarni/v-intl?color=brightgreen&label=version%40latest&logo=github">
</a>
<a href="https://www.npmjs.com/package/@vinayakkulkarni/v-intl" rel="nofollow">
<img alt="npm (tag)" src="https://img.shields.io/npm/v/@vinayakkulkarni/v-intl/latest?color=brightgreen&logo=npm">
</a>
<a href="https://github.com/vinayakkulkarni/v-intl/blob/master/LICENSE" rel="nofollow">
<img alt="License" src="https://img.shields.io/github/license/vinayakkulkarni/v-intl">
</a>
<a href="https://david-dm.org/vinayakkulkarni/v-intl" rel="nofollow">
<img alt="David" src="https://img.shields.io/david/vinayakkulkarni/v-intl">
</a>
<a href="https://david-dm.org/vinayakkulkarni/v-intl?type=dev" rel="nofollow">
<img alt="David" src="https://img.shields.io/david/dev/vinayakkulkarni/v-intl">
</a>
<a href="https://npm-stat.com/charts.html?package=@vinayakkulkarni/v-intl" rel="nofollow">
<img alt="npm" src="https://img.shields.io/npm/dt/@vinayakkulkarni/v-intl?logo=npm">
</a>
<a href="https://github.com/vinayakkulkarni/v-intl/commits/master" rel="nofollow">
<img alt="Maintenance" src="https://img.shields.io/maintenance/yes/2020?logo=git">
</a>
<a href="https://github.com/vinayakkulkarni/v-intl/graphs/contributors" rel="nofollow">
<img alt="GitHub contributors" src="https://img.shields.io/github/contributors/vinayakkulkarni/v-intl?logo=github">
</a>
<a title="deploy" href="https://github.com/algolia/shipjs" rel="nofollow">
<img src="https://img.shields.io/badge/deploy-🛳%20Ship.js-blue?style=flat" />
</a>
<a href="https://vuejs.org/" rel="nofollow">
<img alt="npm (prod) dependency version" src="https://img.shields.io/npm/dependency-version/@vinayakkulkarni/v-intl/@vue/composition-api?logo=vue.js" />
</a>
<a href="https://prettier.io/" rel="nofollow">
<img alt="npm dev dependency version" src="https://img.shields.io/npm/dependency-version/@vinayakkulkarni/v-intl/dev/prettier?logo=prettier">
</a>
<a href="https://eslint.org/" rel="nofollow">
<img alt="npm dev dependency version" src="https://img.shields.io/npm/dependency-version/@vinayakkulkarni/v-intl/dev/eslint?logo=eslint">
</a>
<a href="https://rollupjs.org/guide/en/" rel="nofollow">
<img alt="npm dev dependency version" src="https://img.shields.io/npm/dependency-version/@vinayakkulkarni/v-intl/dev/rollup?logo=rollup.js">
</a>

Intl in your dopeass Vue app 👨‍🔧

Expand All @@ -14,11 +61,11 @@ The package exposes 5 `Intl` components, viz.,

|Formatter|What it does?|More Info|
|---|---|---|
|[VIntlDateTimeFormat](./src/VIntlDateTimeFormat.vue)|_Formats the Date & Time._|[Read More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)|
|[VIntlListFormat](./src/VIntlListFormat.vue)|_Enables language-sensitive list formatting._|[Read More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat)|
|[VIntlNumberFormat](./src/VIntlNumberFormat.vue)|_Enable language sensitive number formatting._ |[Read More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)|
|[VIntlRelativeTimeFormat](./src/VIntlRelativeTimeFormat.vue)|_Create a relative time formatter in specified locale._ |[Read More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat)|
|[VIntlDisplayNames](./src/VIntlDisplayNames.vue)|_Translates region, language, currency, script._|[Read More](https://v8.dev/features/intl-displaynames#full-api)|
|[VIntlListFormat](https://v-intl.netlify.app/guide/format/list.html)|_Enables language-sensitive list formatting._|[Read More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/ListFormat)|
|[VIntlNumberFormat](https://v-intl.netlify.app/guide/format/number.html)|_Enable language sensitive number formatting._ |[Read More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)|
|[VIntlDateTimeFormat](https://v-intl.netlify.app/guide/format/date-time.html)|_Formats the Date & Time._|[Read More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)|
|[VIntlRelativeTimeFormat](https://v-intl.netlify.app/guide/format/relative-time.html)|_Create a relative time formatter in specified locale._ |[Read More](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/RelativeTimeFormat)|
|[VIntlDisplayNames](https://v-intl.netlify.app/guide/format/display-names.html)|_Translates region, language, currency, script._|[Read More](https://v8.dev/features/intl-displaynames#full-api)|


They're are tree-shakable, meaning, you don't need to bulk up your bundle by including all the components.
Expand Down
149 changes: 148 additions & 1 deletion docs/guide/format/number.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,151 @@ title: 'V-Intl :: Number formatting'
description: 'Number Intl formatter for your Vue apps'
---

# Number formatting
# Number formatting

This package enable language-sensitive number formatting using [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) constructor.

## Usage example

### Currency
```vue
<template>
<!-- output will be: "123.456,79 €" -->
<v-intl-number-format
wrapper="w-full"
:payload="payload"
:format="formatOptions"
/>
</template>
<script>
import { VIntlNumberFormat } from '@vinayakkulkarni/v-intl';
export default {
name: 'YourAwesomeComponent',
components: {
VIntlNumberFormat,
},
data() {
return {
payload: 123456.789,
formatOptions: {
locales: 'de-DE', // any valid locale in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
options: {
style: 'currency',
currency: 'EUR'
}
}
};
},
};
</script>
```

### Limit to three significant digits
```vue
<template>
<!-- output will be: "1,23,000" -->
<v-intl-number-format
wrapper="w-full"
:payload="payload"
:format="formatOptions"
/>
</template>
<script>
import { VIntlNumberFormat } from '@vinayakkulkarni/v-intl';
export default {
name: 'YourAwesomeComponent',
components: {
VIntlNumberFormat,
},
data() {
return {
payload: 123456.789,
formatOptions: {
locales: 'en-IN', // any valid locale in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
options: {
maximumSignificantDigits: 3,
}
}
};
},
};
</script>
```

### Using style as unit
```vue
<template>
<!-- output will be: "50 mi/h" -->
<v-intl-number-format
wrapper="w-full"
:payload="payload"
:format="formatOptions"
/>
</template>
<script>
import { VIntlNumberFormat } from '@vinayakkulkarni/v-intl';
export default {
name: 'YourAwesomeComponent',
components: {
VIntlNumberFormat,
},
data() {
return {
payload: 50,
formatOptions: {
locales: 'pt-PT', // any valid locale in https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_identification_and_negotiation
options: {
style: 'unit',
unit: "mile-per-hour"
}
}
};
},
};
</script>
```

### Using notation
```vue
<template>
<!-- output will be: "9,877E8" -->
<v-intl-number-format
wrapper="w-full"
:payload="987654321"
:format="{ 'pt-PT', { notation: "scientific" } }"
/>
<!-- output will be: "987.654E6" -->
<v-intl-number-format
wrapper="w-full"
:payload="987654321"
:format="{ 'en-GB', { notation: "engineering" } }"
/>
<!-- output will be: "9.9亿" -->
<v-intl-number-format
wrapper="w-full"
:payload="987654321"
:format="{ 'zh-CN', { notation: "compact" } }"
/>
<!-- output will be: "988M" -->
<v-intl-number-format
wrapper="w-full"
:payload="987654321"
:format="{ 'fr', { notation: "compact" , compactDisplay: "long" } }"
/>
<!-- output will be: "9.9亿" -->
<v-intl-number-format
wrapper="w-full"
:payload="987654321"
:format="{ 'en-GB', { notation: "compact" , compactDisplay: "short" } }"
/>
</template>
<script>
import { VIntlNumberFormat } from '@vinayakkulkarni/v-intl';
export default {
name: 'YourAwesomeComponent',
components: {
VIntlNumberFormat,
},
};
</script>
```
Loading

0 comments on commit 84cb2e9

Please sign in to comment.