Skip to content
This repository was archived by the owner on May 15, 2023. It is now read-only.

Avoid unnecessary decimals or use a suffix (fix #59 and #190) #207

Merged
merged 2 commits into from
Sep 22, 2020
Merged

Avoid unnecessary decimals or use a suffix (fix #59 and #190) #207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a7a4cd2
Avoid unnecessary decimals or use a suffix (fix #59 and #190)
niccord Sep 18, 2020
2359f47
Add doc and demo for avoidEmptyDecimals
niccord Sep 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 61 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,8 @@ Vue.use(VueCurrencyFilter,
fractionCount: 2,
fractionSeparator: ',',
symbolPosition: 'front',
symbolSpacing: true
symbolSpacing: true,
avoidEmptyDecimals: undefined,
})
```

Expand All @@ -85,7 +86,8 @@ Vue.use(VueCurrencyFilter, [
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true
symbolSpacing: true,
avoidEmptyDecimals: '',
},
{ // default name 'currency_2'
name: 'currency_2',
Expand All @@ -94,7 +96,8 @@ Vue.use(VueCurrencyFilter, [
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: false
symbolSpacing: false,
avoidEmptyDecimals: '--',
}
])
```
Expand All @@ -121,7 +124,8 @@ Add `vue-currency-filter/nuxt` to modules section of `nuxt.config.js`
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true
symbolSpacing: true,
avoidEmptyDecimals: undefined,
}],

// for multiple instance
Expand All @@ -132,7 +136,8 @@ Add `vue-currency-filter/nuxt` to modules section of `nuxt.config.js`
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true
symbolSpacing: true,
avoidEmptyDecimals: '##',
},
{ // default name 'currency_2'
name: 'currency_2',
Expand All @@ -141,7 +146,8 @@ Add `vue-currency-filter/nuxt` to modules section of `nuxt.config.js`
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: false
symbolSpacing: false,
avoidEmptyDecimals: '',
}
]],
]
Expand All @@ -160,7 +166,8 @@ or using external options
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true
symbolSpacing: true,
avoidEmptyDecimals: '',
},
{ // default name 'currency_2'
name: 'currency_2',
Expand All @@ -169,7 +176,8 @@ or using external options
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: false
symbolSpacing: false,
avoidEmptyDecimals: '##',
}
]
// or for one filter
Expand All @@ -179,7 +187,8 @@ or using external options
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true
symbolSpacing: true,
avoidEmptyDecimals: undefined,
}
}
```
Expand Down Expand Up @@ -225,7 +234,8 @@ if (VueCurrencyFilter) {
fractionCount: 0,
fractionSeparator: ".",
symbolPosition: "front",
symbolSpacing: false
symbolSpacing: false,
avoidEmptyDecimals: '',
})
}

Expand Down Expand Up @@ -259,7 +269,8 @@ configFractionSeparator, configSymbolPosition, configSymbolSpacing)}}
fractionCount: '',
fractionSeparator: '',
symbolPosition: '',
symbolSpacing: ''
symbolSpacing: '',
avoidEmptyDecimals: undefined,
})}}
</span>
```
Expand All @@ -274,7 +285,8 @@ configFractionSeparator, configSymbolPosition, configSymbolSpacing)}}
fractionCount: 'number (default : 0)',
fractionSeparator: 'string (default: ",")',
symbolPosition: 'string (default: front)',
symbolSpacing: 'boolean (default: true)'
symbolSpacing: 'boolean (default: true)',
avoidEmptyDecimals: 'string (default: undefined)',
}
```

Expand All @@ -299,15 +311,50 @@ describe("test myComponent", () => {
fractionCount: 2,
fractionSeparator: ".",
symbolPosition: "front",
symbolSpacing: true
symbolSpacing: true,
avoidEmptyDecimals: undefined,
});

const wrapper = shallowMount(Component, {
let wrapper = shallowMount(Component, {
localVue
});

const result = wrapper.find(".curr");
expect(result.text()).toEqual("$ 1,000.00");

localVue.use(VueCurrencyFilter, {
symbol: "$",
thousandsSeparator: ",",
fractionCount: 2,
fractionSeparator: ".",
symbolPosition: "front",
symbolSpacing: true,
avoidEmptyDecimals: '',
});

wrapper = shallowMount(Component, {
localVue
});

const result = wrapper.find(".curr");
expect(result.text()).toEqual("$ 1,000");

localVue.use(VueCurrencyFilter, {
symbol: "$",
thousandsSeparator: ",",
fractionCount: 2,
fractionSeparator: ".",
symbolPosition: "front",
symbolSpacing: true,
avoidEmptyDecimals: '##',
});

wrapper = shallowMount(Component, {
localVue
});

const result = wrapper.find(".curr");
expect(result.text()).toEqual("$ 1,000.##");
});
});
```
Expand Down
57 changes: 56 additions & 1 deletion packages/demo/src/views/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,59 @@
</div>
</div>

<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">
Avoid empty decimals:
</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<label class="radio">
<input
id="chk-form-5"
v-model="configUseAvoidEmptyDecimals"
type="radio"
name="chk-avoidemptydecimals"
:value="true">
Custom string instead of decimal zeros
</label>
<label class="radio">
<input
id="chk-form-5"
v-model="configUseAvoidEmptyDecimals"
type="radio"
name="chk-avoidemptydecimals"
:value="false">
Display decimal zeros
</label>
</div>
</div>
</div>
</div>

<div class="field is-horizontal" v-if="configUseAvoidEmptyDecimals">
<div class="field-label is-normal">
<label class="label">
Avoid empty decimals string:
</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<label class="radio">
<input
v-model="configAvoidEmptyDecimals"
type="text"
class="input"
placeholder="empty decimals string">
</label>
</div>
</div>
</div>
</div>

<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">
Expand Down Expand Up @@ -240,7 +293,7 @@
style="align-items: flex-end;">
<div class="field" style="text-align: left">
<b class="subtitle result__filter">
{{ textInput | currency(configSymbol, configSeparator, configFractionCount, configFractionSeparator, configSymbolPosition, configSymbolSpacing) }}
{{ textInput | currency(configSymbol, configSeparator, configFractionCount, configFractionSeparator, configSymbolPosition, configSymbolSpacing, configUseAvoidEmptyDecimals ? configAvoidEmptyDecimals : undefined) }}
</b>
</div>
</div>
Expand Down Expand Up @@ -356,6 +409,8 @@ export default {
configFractionSeparator: ',',
configSymbolPosition: 'front',
configSymbolSpacing: true,
configUseAvoidEmptyDecimals: false,
configAvoidEmptyDecimals: '',
templateDownload: `
# NPM
npm install vue-currency-filter
Expand Down
34 changes: 25 additions & 9 deletions packages/vue-currency-filter/src/accounting.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,12 +124,13 @@ export const formatNumber = function (
number,
precision,
thousand,
decimal
decimal,
avoidEmptyDecimals
) {
// Resursively format arrays:
if (__isArray(number)) {
return __map(number, function (val) {
return formatNumber(val, precision, thousand, decimal)
return formatNumber(val, precision, thousand, decimal, avoidEmptyDecimals)
})
}

Expand All @@ -154,14 +155,26 @@ export const formatNumber = function (
var base = parseInt(toFixed(Math.abs(number || 0), usePrecision), 10) + ''
var mod = base.length > 3 ? base.length % 3 : 0

var precisionString = ''
if (usePrecision) {
// default behaviour
// 1234.56 and avoidEmptyDecimals whatever => 1234.56
// 1234.00 and avoidEmptyDecimals undefined => 1234.00
precisionString = opts.decimal + toFixed(Math.abs(number), usePrecision).split('.')[1]

// 1234.00 and avoidEmptyDecimals == '' => 1234
// 1234.00 and avoidEmptyDecimals == '##' => 1234.##
if (avoidEmptyDecimals !== undefined && parseInt(toFixed(Math.abs(number || 0), 1), 10) == number){
precisionString = avoidEmptyDecimals === '' ? '' : opts.decimal + avoidEmptyDecimals
}
}

// Format the number:
return (
negative +
(mod ? base.substr(0, mod) + opts.thousand : '') +
base.substr(mod).replace(/(\d{3})(?=\d)/g, '$1' + opts.thousand) +
(usePrecision
? opts.decimal + toFixed(Math.abs(number), usePrecision).split('.')[1]
: '')
precisionString
)
}

Expand All @@ -182,12 +195,13 @@ export const formatMoney = function (
precision,
thousand,
decimal,
format
format,
avoidEmptyDecimals
) {
// Resursively format arrays:
if (__isArray(number)) {
return __map(number, function (val) {
return formatMoney(val, symbol, precision, thousand, decimal, format)
return formatMoney(val, symbol, precision, thousand, decimal, format, avoidEmptyDecimals)
})
}

Expand All @@ -203,7 +217,8 @@ export const formatMoney = function (
precision: precision,
thousand: thousand,
decimal: decimal,
format: format
format: format,
avoidEmptyDecimals: avoidEmptyDecimals,
},
lib.settings.currency
)
Expand All @@ -222,7 +237,8 @@ export const formatMoney = function (
Math.abs(number),
checkPrecision(opts.precision),
opts.thousand,
opts.decimal
opts.decimal,
opts.avoidEmptyDecimals
)
)
}
12 changes: 8 additions & 4 deletions packages/vue-currency-filter/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ const defaultConfig: currencyOptions = {
fractionCount: 0,
fractionSeparator: ',',
symbolPosition: 'front',
symbolSpacing: true
symbolSpacing: true,
avoidEmptyDecimals: undefined,
}

const VueCurrencyFilter: PluginObject<currencyOptions[] | currencyOptions> = {
Expand All @@ -26,15 +27,17 @@ const VueCurrencyFilter: PluginObject<currencyOptions[] | currencyOptions> = {
_fractionCount?: number,
_fractionSeparator?: string,
_symbolPosition?: string,
_symbolSpacing?: boolean): string | number {
_symbolSpacing?: boolean,
_avoidEmptyDecimals?: string): string | number {

let runtimeConfig = __defaults({
symbol: _symbol,
thousandsSeparator: _thousandsSeparator,
fractionCount: _fractionCount,
fractionSeparator: _fractionSeparator,
symbolPosition: _symbolPosition,
symbolSpacing: _symbolSpacing
symbolSpacing: _symbolSpacing,
avoidEmptyDecimals: _avoidEmptyDecimals
}, configs)

if (typeof _symbol === 'object') {
Expand Down Expand Up @@ -70,7 +73,8 @@ const VueCurrencyFilter: PluginObject<currencyOptions[] | currencyOptions> = {
symbol: runtimeConfig.symbol,
precision: runtimeConfig.fractionCount,
thousand: runtimeConfig.thousandsSeparator,
decimal: runtimeConfig.fractionSeparator
decimal: runtimeConfig.fractionSeparator,
avoidEmptyDecimals: runtimeConfig.avoidEmptyDecimals,
})

if (isNegative) {
Expand Down
6 changes: 4 additions & 2 deletions packages/vue-currency-filter/src/types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ export interface currencyOptions {
fractionCount?: number,
fractionSeparator?: string,
symbolPosition?: string,
symbolSpacing?: boolean
symbolSpacing?: boolean,
avoidEmptyDecimals?: string,
}

export interface CurrencyFilterMethodInstance {
Expand All @@ -17,5 +18,6 @@ export interface CurrencyFilterMethodInstance {
_fractionCount?: number,
_fractionSeparator?: string,
_symbolPosition?: string,
_symbolSpacing?: boolean): string
_symbolSpacing?: boolean,
avoidEmptyDecimals?: string): string
}