@itfin/components 1.2.128 → 1.2.130

package/package.json

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

package/src/components/kanban/BoardColumn.vue

@@ -1,20 +1,5 @@
 <template>
   <div class="itf-board-column-wrapper">
-    <div v-if="isNewOptionVisible">
-      <itf-text-field
-        style="margin: -4px 0"
-        ref="newOptionInput"
-        v-model="newOption"
-        :placeholder="newItemPlaceholder"
-        @blur="onBlurOption"
-        @keydown.enter="submitNewOption"
-      />
-    </div>
-    <itf-button v-else-if="showAddButton" :loading="loading" block small class="text-muted" @click="addNewOption">
-      <itf-icon name="plus" />
-      {{ newItemText }}
-    </itf-button>
-
     <div class="itf-board-cards-wrapper" ref="container" :class="{'empty-column': !items.length}">
       <template v-if="!items.length">
         <slot name="empty"></slot>
@@ -42,6 +27,22 @@
            v-dropzone="{ payload:{ last: true, column } }">
         <div class="itf-board-header-dropzone"></div>
       </div>
+
+      <div v-if="isNewOptionVisible">
+        <itf-text-field
+          style="margin: -4px 0"
+          ref="newOptionInput"
+          v-model="newOption"
+          :placeholder="newItemPlaceholder"
+          @blur="onBlurOption"
+          @keydown.enter="submitNewOption"
+        />
+      </div>
+      <itf-button v-else-if="showAddButton" :loading="loading" block small class="text-muted" @click="addNewOption">
+        <itf-icon name="plus" />
+        {{ newItemText }}
+      </itf-button>
+
     </div>
   </div>
 </template>

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"
+      <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,10 +86,13 @@ 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;
@@ -92,11 +100,39 @@ class itfMoneyField extends Vue {
   @Prop({ type: Array, default: () => ([]) }) currencies;
   @Prop({ type: Boolean, default: false }) currencyDisabled;
 
+  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
+    };
+  }
+
+  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 +156,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);
+}
+