Skip to content

Commit

Permalink
refactor!: drop precision range (#203)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:
the use case of a precision range is longer given because of the new precision default behavior (hide decimal digits for integer numbers)
  • Loading branch information
@dm4t2
dm4t2 committed Mar 28, 2021
1 parent 498b7ff commit 887f30c
Show file tree
Hide file tree
Showing 8 changed files with 154 additions and 147 deletions.
275 changes: 146 additions & 129 deletions demo/Playground.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,156 +20,176 @@
Number value: <code class="ml-2">{{ value != null ? value : 'null' }}</code>
</v-col>
</v-row>
<v-divider class="my-4" />
<v-divider class="my-6" />
<v-row>
<v-col
cols="12"
sm="6"
>
<span class="title">Locale</span>
<v-select
v-model="locale"
:items="[{text: 'Default', value: undefined}, 'de-DE', 'de-CH', 'en-US', 'en-IN', 'nl-NL', 'sv-SE', 'fr-FR', 'es-ES', 'pt-PT', 'zh-ZH', 'ja-JP', 'ar-SA', 'fa-IR']"
class="mb-12"
hide-details
/>
<span class="title">Currency</span>
<v-select
v-model="currency"
:items="['EUR', 'USD', 'JPY', 'GBP', 'BRL', 'INR', 'CNY', 'JPY', 'SAR', 'IRR']"
class="mb-12"
hide-details
/>
<div class="d-flex align-center justify-space-between">
<span class="title">Use Grouping</span>
<v-switch
v-model="useGrouping"
class="my-0"
<div class="mb-12">
<span class="title">Locale</span>
<v-select
v-model="locale"
:items="[{text: 'Default', value: undefined}, 'de-DE', 'de-CH', 'en-US', 'en-IN', 'nl-NL', 'sv-SE', 'fr-FR', 'es-ES', 'pt-PT', 'zh-ZH', 'ja-JP', 'ar-SA', 'fa-IR']"
hide-details
/>
</div>
<div class="mt-4 mb-10">
Whether to use grouping separators such as thousands/lakh/crore separators.
</div>
<div class="d-flex align-center justify-space-between">
<span class="title">Distraction Free</span>
<v-switch
v-model="distractionFree"
class="my-0"
<div class="mb-12">
<span class="title">Currency</span>
<v-select
v-model="currency"
:items="['EUR', 'USD', 'JPY', 'GBP', 'BRL', 'INR', 'CNY', 'JPY', 'SAR', 'IRR']"
hide-details
/>
</div>
<div class="my-4">
Enables easier input by hiding various parts of the formatting on focus.
<div class="mb-12">
<div class="d-flex align-center justify-space-between">
<span class="title">Use Grouping</span>
<v-switch
v-model="useGrouping"
class="my-0"
hide-details
/>
</div>
<div class="mt-4">
Whether to use grouping separators such as thousands/lakh/crore separators.
</div>
</div>
<v-checkbox
v-model="hideCurrencySymbol"
:disabled="!distractionFree"
class="my-0"
hide-details
label="Hide currency symbol"
/>
<v-checkbox
v-model="hideGroupingSymbol"
:disabled="!distractionFree"
class="my-0"
hide-details
label="Hide grouping symbol"
/>
<v-checkbox
v-model="hideNegligibleDecimalDigits"
:disabled="!distractionFree || !hideNegligibleDecimalDigitsEnabled"
class="my-0"
hide-details
label="Hide negligible decimal digits"
/>
<div class="d-flex align-center justify-space-between mt-8">
<span class="title">Auto Sign</span>
<v-switch v-model="autoSign" />
<div class="mb-12">
<div class="d-flex align-center justify-space-between">
<span class="title">Distraction Free</span>
<v-switch
v-model="distractionFree"
class="my-0"
hide-details
/>
</div>
<div class="my-4">
Enables easier input by hiding various parts of the formatting on focus.
</div>
<v-checkbox
v-model="hideCurrencySymbol"
:disabled="!distractionFree"
class="my-0"
hide-details
label="Hide currency symbol"
/>
<v-checkbox
v-model="hideGroupingSymbol"
:disabled="!distractionFree"
class="my-0"
hide-details
label="Hide grouping symbol"
/>
<v-checkbox
v-model="hideNegligibleDecimalDigits"
:disabled="!distractionFree || !hideNegligibleDecimalDigitsEnabled"
class="my-0"
hide-details
label="Hide negligible decimal digits"
/>
</div>
<div class="mb-6">
Whether the minus symbol is automatically inserted or prevented to be inputted depending the current value range.
<div class="mb-12">
<div class="d-flex align-center justify-space-between">
<span class="title">Auto Sign</span>
<v-switch
v-model="autoSign"
class="my-0"
hide-details
/>
</div>
<div class="mt-4 mb-6">
Whether the minus symbol is automatically inserted or prevented to be inputted depending the current value range.
</div>
<div class="d-flex align-center justify-space-between">
<span class="title">Value Range</span>
<v-switch v-model="valueRangeEnabled" />
</div>
<div class="mb-6">
The validation is triggered on blur and automatically sets the respective threshold if out of range.
</div>
<v-range-slider
v-model="valueRange"
:disabled="!valueRangeEnabled"
:max="1000"
:min="-1000"
hide-details
thumb-label="always"
thumb-size="24"
/>
</div>
</v-col>
<v-col
cols="12"
sm="6"
>
<div class="d-flex align-center justify-space-between mb-4">
<span class="title">Precision</span>
<v-switch
v-model="precisionEnabled"
class="my-0"
<div class="mb-12">
<div class="d-flex align-center justify-space-between">
<span class="title">Precision</span>
<v-switch
v-model="precisionEnabled"
class="my-0"
hide-details
/>
</div>
<div class="mt-4 mb-6">
Override the number of displayed decimal digits. Can only be applied for currencies that support decimal digits.
</div>
<v-slider
v-model="precision"
:disabled="!precisionEnabled"
:max="15"
hide-details
thumb-label="always"
thumb-size="24"
/>
</div>
<div class="mb-6">
Override the number of displayed decimal digits. Can only be applied for currencies that support decimal digits.
</div>
<v-switch
v-model="precisionRangeEnabled"
:disabled="!precisionEnabled"
class="mb-8"
hide-details
label="Use range"
/>
<v-range-slider
v-if="precisionRangeEnabled"
v-model="precisionRange"
:disabled="!precisionEnabled"
:max="15"
thumb-label="always"
thumb-size="24"
/>
<v-slider
v-else
v-model="precisionFixed"
:disabled="!precisionEnabled"
:max="15"
thumb-label="always"
thumb-size="24"
/>
<div class="d-flex align-center justify-space-between">
<span class="title">Decimal Digits Replacement</span>
<v-switch v-model="decimalDigitsReplacementEnabled" />
</div>
<div class="mb-8">
Replaces decimal digits with a custom character. Only applies for integer numbers.
</div>
<v-text-field v-model="decimalDigitsReplacement" />
<div class="d-flex align-center justify-space-between">
<span class="title">Value Range</span>
<v-switch v-model="valueRangeEnabled" />
</div>
<div class="mb-8">
The validation is triggered on blur and automatically sets the respective threshold if out of range.
</div>
<v-range-slider
v-model="valueRange"
:disabled="!valueRangeEnabled"
:max="1000"
:min="-1000"
thumb-label="always"
thumb-size="24"
/>

<div class="d-flex align-center justify-space-between">
<span class="title">Auto Decimal Digits</span>
<v-switch
v-model="autoDecimalDigits"
:disabled="!autoDecimalDigitsEnabled"
<div class="mb-12">
<div class="d-flex align-center justify-space-between">
<span class="title">Decimal Digits Replacement</span>
<v-switch
v-model="decimalDigitsReplacementEnabled"
class="my-0"
hide-details
/>
</div>
<div class="mt-4">
Replaces decimal digits with a custom string. Only applies for integer numbers.
</div>
<v-text-field
v-model="decimalDigitsReplacement"
hide-details
/>
</div>
<div class="mb-6">
Whether the decimal symbol is inserted automatically, using the last inputted digits as decimal digits.
</div>

<div class="d-flex align-center justify-space-between">
<span class="title">Export Value As Integer</span>
<v-switch v-model="exportValueAsInteger" />
<div class="mb-12">
<div class="d-flex align-center justify-space-between">
<span class="title">Auto Decimal Digits</span>
<v-switch
v-model="autoDecimalDigits"
:disabled="!autoDecimalDigitsEnabled"
class="my-0"
hide-details
/>
</div>
<div class="mt-4">
Whether the decimal symbol is inserted automatically, using the last inputted digits as decimal digits.
</div>
</div>
<div class="mb-6">
Whether the number value should be exported as integer instead of a float value depending the configured precision.

<div class="mb-12">
<div class="d-flex align-center justify-space-between">
<span class="title">Export Value As Integer</span>
<v-switch
v-model="exportValueAsInteger"
class="my-0"
hide-details
/>
</div>
<div class="mt-4">
Whether the number value should be exported as integer instead of a float value depending the configured precision.
</div>
</div>
</v-col>
</v-row>
Expand All @@ -185,7 +205,7 @@ export default {
components: { VCurrencyField },
data () {
return {
value: 1234,
value: 1234.5,
locale: 'de-DE',
currency: 'EUR',
distractionFree: true,
Expand All @@ -194,9 +214,7 @@ export default {
hideNegligibleDecimalDigitsEnabled: true,
hideNegligibleDecimalDigits: true,
precisionEnabled: false,
precisionRangeEnabled: false,
precisionFixed: 2,
precisionRange: [0, 15],
precision: 2,
decimalDigitsReplacementEnabled: false,
decimalDigitsReplacement: '—',
valueRangeEnabled: false,
Expand All @@ -219,7 +237,7 @@ export default {
? { min: this.valueRange[0], max: this.valueRange[1] }
: undefined,
precision: this.precisionEnabled
? (this.precisionRangeEnabled ? { min: this.precisionRange[0], max: this.precisionRange[1] } : this.precisionFixed)
? this.precision
: undefined,
decimalDigitsReplacement: this.decimalDigitsReplacementEnabled ? this.decimalDigitsReplacement : undefined,
distractionFree: this.distractionFree
Expand All @@ -245,7 +263,6 @@ export default {
autoDecimalDigits (value) {
this.hideNegligibleDecimalDigitsEnabled = !value
this.hideNegligibleDecimalDigits = !value
this.precisionRangeEnabled = !value
}
}
}
Expand Down
1 change: 0 additions & 1 deletion demo/VCurrencyField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<VTextField
ref="inputRef"
:value="formattedValue"
dense
hide-details
outlined
/>
Expand Down
1 change: 1 addition & 0 deletions docs/.vuepress/styles/palette.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ $textColor = rgba(0,0,0,.87)
$badgeTipColor = #2196f3
$badgeWarningColor = #fb8c00
$badgeErrorColor = #ff5252
$contentWidth=960px
4 changes: 2 additions & 2 deletions docs/config/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ Name | Type | Description
`currency` (required) | String | A [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) currency code (for example `USD` or `EUR`).
`locale` | String | A [BCP 47](https://tools.ietf.org/html/bcp47) language tag (for example `en` or `de-DE`). Default is `undefined` (use the default locale of the Browser).
`autoDecimalDigits` | Boolean | Whether the decimal symbol is inserted automatically, using the last inputted digits as decimal digits. Default is `false` (the decimal symbol needs to be inserted manually).
`precision` | Number/Object | The number of displayed decimal digits. Default is `undefined` (use the currency's default, decimal digits will be hidden for integer numbers). Must be between 0 and 15 and can only be applied for currencies that support decimal digits. You can also pass an object `{min, max}` to use a precision range (ranges are not available when the `autoDecimalDigits` option is used).
`decimalDigitsReplacement` | String | Replaces decimal digits with a custom character, for example a dash (`—`). Only applies for integer numbers.
`precision` | Number/Object | The number of displayed decimal digits. Default is `undefined` (use the currency's default, decimal digits will be hidden for integer numbers). Must be between 0 and 15 and can only be applied for currencies that support decimal digits.
`decimalDigitsReplacement` | String | Replaces decimal digits with a custom string, for example a dash (`—`). Only applies for integer numbers.
`distractionFree` | Boolean/Object | Whether to hide negligible decimal digits, the currency symbol and the grouping symbol on focus. Default is `true`. You can also pass an object of boolean properties to configure each option: `{hideNegligibleDecimalDigits, hideCurrencySymbol, hideGroupingSymbol}`. Using `false` will leave the formatted value untouched on focus.
`exportValueAsInteger` | Boolean | Whether the number value should be exported as integer instead of float value. Default is `false`.
`valueRange` | Object | The range of accepted values as object `{min, max}`. Default is `undefined` (no value range). The validation is triggered on blur and automatically sets the respective threshold if out of range.
Expand Down
2 changes: 0 additions & 2 deletions docs/guide/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ You’re browsing the documentation for v2.x. [For v1.x, click here](https://vue
## Introduction
Vue Currency Input allows an easy input of currency formatted numbers. Powered by the [Vue Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html), it provides a Vue composable for decorating input components with currency format capabilities.

![](../vue-currency-input.gif)

## Installation
Install the npm package:

Expand Down
5 changes: 3 additions & 2 deletions src/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,12 @@ export interface CurrencyInputOptions {
currency: string,
exportValueAsInteger?: boolean,
distractionFree?: boolean | DistractionFreeOptions,
precision?: number | NumberRange,
precision?: number,
autoDecimalDigits?: boolean,
valueRange?: NumberRange,
autoSign?: boolean,
useGrouping?: boolean
useGrouping?: boolean,
decimalDigitsReplacement?: string
}

declare const useCurrencyInput: (options: CurrencyInputOptions) => {
Expand Down
Loading

0 comments on commit 887f30c

Please sign in to comment.