@itfin/components 1.3.87 → 1.3.89

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.3.87",
+  "version": "1.3.89",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/ITFSettings.js

@@ -10,15 +10,39 @@ class ITFSettings {
     defaultLocale: 'en_US',
     defaultDisplayDateFormat: 'MM/dd/yyyy',
     // defaultDisplayDateFormat: 'dd.MM.yyyy',
-    currencies: []
+    currencies: [],
+    moneyDisplayFormat: '{symbol}{value}',
+    moneyThousandSeparator: ',',
+    moneyDecimalSeparator: '.',
   };
 
+  get moneyDisplayFormat() {
+    return this.options.moneyDisplayFormat;
+  }
+
+  get moneyThousandSeparator() {
+    return this.options.moneyThousandSeparator;
+  }
+
+  get moneyDecimalSeparator() {
+    return this.options.moneyDecimalSeparator;
+  }
+
   get defaultLocale() {
     return this.options.defaultLocale;
   }
 
   set defaultLocale(val) {
     this.options.defaultLocale = val;
+    if (val === 'uk_UA') {
+      this.options.moneyDisplayFormat = '{value}\xA0{symbol}';
+      this.options.moneyThousandSeparator = '\xA0';
+      this.options.moneyDecimalSeparator = ',';
+    } else {
+      this.options.moneyDisplayFormat = '{symbol}{value}';
+      this.options.moneyThousandSeparator = ',';
+      this.options.moneyDecimalSeparator = '.';
+    }
   }
 
   get currencies() {

package/src/components/filter/FilterAmountRange.vue

@@ -40,10 +40,9 @@
 }
 </style>
 <script>
-import throttle from 'lodash/throttle';
 import { Vue, Prop, Model, Component } from 'vue-property-decorator';
-import itfTextField from '@itfin/components/src/components/text-field/TextField.vue';
-import itfRange from '@itfin/components/src/components/range/Range.vue';
+import itfTextField from '../text-field/TextField.vue';
+import itfRange from '../range/Range.vue';
 
 export default @Component({
   name: 'FilterAmountRange',

package/src/components/filter/FilterBadge.vue

@@ -136,12 +136,12 @@
 </style>
 <script>
 import { Vue, Model, Prop, Component } from 'vue-property-decorator';
-import itfIcon from '@itfin/components/src/components/icon/Icon';
-import itfButton from '@itfin/components/src/components/button/Button';
-import itfDropdown from '@itfin/components/src/components/dropdown/Dropdown.vue';
-import itfDatePickerInline from '@itfin/components/src/components/datepicker/DatePickerInline.vue';
-import itfDateRangePickerInline from '@itfin/components/src/components/datepicker/DateRangePickerInline.vue';
-import itfTextField from '@itfin/components/src/components/text-field/TextField.vue';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+import itfDropdown from '../dropdown/Dropdown.vue';
+import itfDatePickerInline from '../datepicker/DatePickerInline.vue';
+import itfDateRangePickerInline from '../datepicker/DateRangePickerInline.vue';
+import itfTextField from '../text-field/TextField.vue';
 import FilterFacetsList from './FilterFacetsList';
 import FilterAmountRange from './FilterAmountRange.vue';
 

package/src/components/filter/FilterFacetsList.vue

@@ -102,9 +102,9 @@
 </style>
 <script>
 import { Vue, Prop, Model, Component } from 'vue-property-decorator';
-import itfTextField from '@itfin/components/src/components/text-field/TextField.vue';
-import itfButton from '@itfin/components/src/components/button/Button';
-import itfCheckbox from '@itfin/components/src/components/checkbox/Checkbox.vue';
+import itfTextField from '../text-field/TextField.vue';
+import itfButton from '../button/Button';
+import itfCheckbox from '../checkbox/Checkbox.vue';
 
 export default @Component({
   name: 'FilterFacetsList',

package/src/components/filter/FilterPanel.vue

@@ -34,13 +34,13 @@
 <script>
 import { DateTime } from 'luxon';
 import { Vue, Model, Prop, Component } from 'vue-property-decorator';
-import tooltip from '@itfin/components/src/directives/tooltip';
-import itfIcon from '@itfin/components/src/components/icon/Icon';
-import itfButton from '@itfin/components/src/components/button/Button';
-import itfDropdown from '@itfin/components/src/components/dropdown/Dropdown.vue';
-import itfTextField from '@itfin/components/src/components/text-field/TextField.vue';
-import { formatDateonly, formatMoney, formatRangeDates } from '~/helpers/formatters';
-import FilterBadge from '~/components/Nomi/FilterBadge.vue';
+import tooltip from '../../directives/tooltip';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+import itfDropdown from '../dropdown/Dropdown.vue';
+import itfTextField from '../text-field/TextField.vue';
+import { formatMoney, formatRangeDates } from '../../helpers/formatters';
+import FilterBadge from './FilterBadge.vue';
 
 export default @Component({
   components: {
@@ -52,10 +52,6 @@ export default @Component({
   },
   directives: {
     tooltip
-  },
-  filters: {
-    formatMoney,
-    formatDateonly
   }
 })
 class FilterPanel extends Vue {
@@ -155,7 +151,7 @@ class FilterPanel extends Vue {
       }
     } else if (facet.type === 'date') {
       const date = DateTime.fromISO(value.value);
-      value.label = formatDateonly(date.isValid ? value.value : facet.options.defaultValue.value, 'dd MMM yyyy');
+      value.label = (date.isValid ? value.value : DateTime.fromISO(facet.options.defaultValue.value)).toFormat('dd MMM yyyy');
       value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
     } else if (facet.type === 'facets-list') {
       const firstItem = facet.options.items.find(item => item.value === (Array.isArray(value.value) ? value.value[0] : value.value));

package/src/helpers/formatters.js

@@ -36,6 +36,31 @@ export function parseHours (str, { hoursInDay } = { hoursInDay: 8 }) {
   return isNegative * seconds;
 }
 
+
+// https://stptrans.com/wp-content/uploads/2020/02/Working-with-currency-number-and-date-formats.pdf
+export function formatMoney (val, symbol = '', digits = null) {
+  const format = ITFSettings.moneyDisplayFormat || '{symbol}{value}';
+  const thousandSeparator = ITFSettings.moneyThousandSeparator || ',';
+  const decimalSeparator = ITFSettings.moneyDecimalSeparator || '.';
+
+  if (Number.isNaN(val) || val === null) {
+    return '—';
+  }
+
+  let symbolStr = symbol?.symbol ?? symbol?.Symbol ?? symbol ?? '';
+  if (digits === null) {
+    digits = symbol.precision ?? symbol.Precision ?? 2;
+  }
+  const value = parseFloat(val.toString()).toFixed(digits)
+    .replace(/\d(?=(\d{3})+\.)/g, '$&' + thousandSeparator)
+    .replace(/\.(\d+)$/, decimalSeparator + '$1')
+  ;
+  return format
+    .replace('{value}', value)
+    .replace('{symbol}', symbolStr)
+    .trim();
+}
+
 export function formatDate (date, inputFormat = 'yyyy-MM-dd', toFormat) {
   if (!date) {
     return date;
@@ -89,7 +114,7 @@ export function firstLetters(name) {
 export function formatHours (val, removeEmptyMinutes = false) {
   let hours = Math.floor(Math.abs(val) / 60);
   let minutes = Math.abs(val) - hours * 60;
-  if (isNaN(minutes)) {
+  if (Number.isNaN(minutes)) {
     return '—';
   }
   minutes = Math.floor(minutes);

package/src/helpers/formatters.spec.js

@@ -1,6 +1,7 @@
 import {
-  parseHours
+  parseHours, formatMoney
 } from './formatters';
+import ITFSettings from "../ITFSettings";
 
 describe('Formatters', () => {
   const $t = (str) => str;
@@ -14,4 +15,20 @@ describe('Formatters', () => {
     expect(parseHours('12h 10m 10s')).toEqual(12 * 60 * 60 + 10 * 60 + 10);
     expect(parseHours('1d 12h 10m 10s')).toEqual(8 * 60 * 60 + 12 * 60 * 60 + 10 * 60 + 10);
   });
+
+  test('formatMoney', () => {
+    ITFSettings.defaultLocale = 'uk_UA';
+    let currency = { Id: 1, Symbol: '#', IsCryptoCurrency: false, Code: 'TTT' };
+    expect(formatMoney(1, '$')).toEqual('1,00 $');
+    expect(formatMoney(-1, '$')).toEqual('-1,00 $');
+    expect(formatMoney(-1000000, currency)).toEqual('-1 000 000,00 #');
+    expect(formatMoney(NaN)).toEqual('—');
+
+    ITFSettings.defaultLocale = 'en_US';
+    currency = { Id: 1, Symbol: '#', IsCryptoCurrency: false, Code: 'TTT' };
+    expect(formatMoney(1, '$')).toEqual('$1.00');
+    expect(formatMoney(-1, '$')).toEqual('$-1.00');
+    expect(formatMoney(-1, currency)).toEqual('#-1.00');
+    expect(formatMoney(NaN)).toEqual('—');
+  });
 });