@itfin/components 1.2.129 → 1.2.131

package/package.json

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

package/src/components/text-field/MoneyField.vue

@@ -2,12 +2,15 @@
   <div class="itf-money-field" :class="{'currency-arrow': !currencyDisabled, 'currency-select': currencySelect}">
     <div :style="`--itf-money-field-padding-left: ${selectedCurrencySymbol.length * 0.6 + 1}rem`">
       <span class="itf-money-field__prepend">{{ selectedCurrencySymbol }}</span>
-      <itf-text-field
-        :disabled="disabled"
-        :value="value"
-        type="number"
-        step="1"
-        @input="setValue"
+      <i-mask-component
+          ref="input"
+          v-bind="mask"
+          class="form-control"
+          :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
+          @input="setValue"
+          :value="maskedValue"
+          :unmask="false"
+          :disabled="disabled"
       />
     </div>
 
@@ -25,7 +28,7 @@
 .itf-money-field {
   position: relative;
 
-  .itf-text-field input {
+  input {
     padding-left: var(--itf-money-field-padding-left, 1.5rem);
 
     &.is-invalid, &.is-valid {
@@ -33,11 +36,11 @@
     }
   }
   &.currency-select {
-    .itf-text-field input {
+    input {
       padding-right: 3rem;
     }
     &.currency-arrow {
-      .itf-text-field input {
+      input {
         padding-right: 4.5rem;
       }
     }
@@ -69,11 +72,13 @@
 }
 </style>
 <script>
-import { Component, Emit, Model, Prop, Vue } from 'vue-property-decorator';
+import {Component, Emit, Inject, Model, Prop, Vue} from 'vue-property-decorator';
+import { IMask, IMaskComponent } from 'vue-imask';
 import itfTextField from './TextField';
 import itfSelect from '../select/Select';
 import itfLabel from '../form/Label';
 import itfIcon from '../icon/Icon';
+import {stringToNumber} from '../../helpers/formatters';
 
 export default @Component({
   name: 'itfMoneyField',
@@ -81,22 +86,57 @@ export default @Component({
     itfIcon,
     itfLabel,
     itfSelect,
-    itfTextField
+    itfTextField,
+    IMaskComponent,
   }
 })
 class itfMoneyField extends Vue {
+  @Inject({ default: null }) itemLabel;
+
   @Model('input', { default: '' }) value;
   @Prop({ type: Object, default: null }) currency;
   @Prop({ type: Boolean, default: false }) disabled;
   @Prop({ type: Boolean, default: true }) currencySelect;
   @Prop({ type: Array, default: () => ([]) }) currencies;
   @Prop({ type: Boolean, default: false }) currencyDisabled;
+  @Prop({ type: Number, default: -1000000000}) minValue;
+  @Prop({ type: Number, default: 1000000000}) maxValue;
+
+  get mask() {
+    return {
+      mask: Number,
+      scale: this.precition,  // digits after point, 0 for integers
+      thousandsSeparator: '',  // any single char
+      padFractionalZeros: false,  // if true, then pads zeros at end to the length of scale
+      normalizeZeros: true,  // appends or removes zeros at ends
+      radix: '.',  // fractional delimiter
+      mapToRadix: [','],  // symbols to process as radix
+      min: this.minValue,
+      max: this.maxValue
+    };
+  }
+
+  get maskedValue() {
+    return this.value ? this.value.toString() : '';
+  }
+
+  isInvalid() {
+    return this.itemLabel && this.itemLabel.isHasError();
+  }
+
+  isSuccess() {
+    return this.itemLabel && this.itemLabel.isHasSuccess();
+  }
 
   onCurrencyChanged(e) {
     const currency = this.currencies.find((c) => c.Id === parseInt(e.target.value));
     this.$emit('update:currency', currency)
   }
 
+  get  precition() {
+    return this.selectedCurrency ? this.selectedCurrency.Precision : 2;
+  }
+
   get selectedCurrencySymbol() {
     return this.selectedCurrency ? this.selectedCurrency.Symbol : '#';
   }
@@ -120,7 +160,7 @@ class itfMoneyField extends Vue {
     if (!isNumeric(val)) {
       return;
     }
-    this.$emit('input', val);
+    this.$emit('input', stringToNumber((val || '').toString().replace(/,/g, '')));
 
     function isNumeric(value) {
       return /^-?\d+([\,\.]\d+)?$/.test(value);

package/src/helpers/formatters.js

@@ -107,3 +107,31 @@ export function formatHours (val, removeEmptyMinutes = false) {
   }
   return `${sign}${hours}h${minutes}`;
 }
+
+
+/**
+ * Округлює число до заданої точності
+ *
+ * @param number Вхідне число
+ * @param digits Кількість знаків після коми
+ * @param ceil99 якщо число закінчується на .99, то додає .01 щоб воно було кругле
+ * @returns {number}
+ */
+export function round (number, digits = 2, ceil99 = false) {
+  const pow = 10 ** digits;
+  let res = Math.round((number + Number.EPSILON) * pow) / pow;
+  if (ceil99) {
+    const str = res.toFixed(2);
+    if (str.substring(str.length - 3) === '.99') {
+      res += 0.01;
+    }
+  }
+  return res;
+}
+
+
+export function stringToNumber(str) {
+  const formated = (str || '').toString().replace(/[,.](\d+)$/g, '^$1').replace(/[,.\s]/g, '').replace('^', '.');
+  return parseFloat(formated);
+}
+