@itfin/components 2.0.11 → 2.0.12

package/package.json

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

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

@@ -17,8 +17,8 @@
       <div v-if="currencySelect" class="itf-money-field__currency">
         <span>{{ selectedCurrencyCode }}<itf-icon v-if="!currencyDisabled && currenciesList.length > 1" name="chevron_down" /></span>
         <select v-if="!disabled && !currencyDisabled" :value="currencyId" @input="onCurrencyChanged">
-          <option v-for="currency in currenciesList" :key="currency.Id" :value="currency.Id" :selected="currencyId === currency.Id">
-            {{ currency.Symbol }}, {{ currency.Code }} - {{ currency.Title }}
+          <option v-for="currency in currenciesList" :key="currency[itemKey]" :value="currency[itemKey]" :selected="currencyId === currency[itemKey]">
+            {{ currency[symbolKey] }}, {{ currency[codeKey] }} - {{ currency[titleKey] }}
           </option>
         </select>
       </div>
@@ -106,6 +106,11 @@ class itfMoneyField extends Vue {
   @Prop({ type: Boolean, default: true }) currencySelect;
   @Prop({ type: Array, default: () => ([]) }) currencies;
   @Prop({ type: Boolean, default: false }) currencyDisabled;
+  @Prop({ type: String, default: 'Id' }) itemKey;
+  @Prop({ type: String, default: 'Code' }) codeKey;
+  @Prop({ type: String, default: 'Symbol' }) symbolKey;
+  @Prop({ type: String, default: 'Title' }) titleKey;
+  @Prop({ type: String, default: 'Precision' }) precisionKey;
   @Prop({ type: Number, default: -1000000000}) minValue;
   @Prop({ type: Number, default: 1000000000}) maxValue;
 
@@ -140,31 +145,31 @@ class itfMoneyField extends Vue {
   }
 
   onCurrencyChanged(e) {
-    const currency = this.currenciesList.find((c) => c.Id === parseInt(e.target.value));
+    const currency = this.currenciesList.find((c) => c[this.itemKey] === parseInt(e.target.value));
     this.$emit('update:currency', currency)
   }
 
   get precition() {
-    return this.selectedCurrency ? this.selectedCurrency.Precision : 2;
+    return this.selectedCurrency ? this.selectedCurrency[this.precisionKey] : 2;
   }
 
   get selectedCurrencySymbol() {
-    return this.selectedCurrency ? this.selectedCurrency.Symbol : '#';
+    return this.selectedCurrency ? this.selectedCurrency[this.symbolKey] : '#';
   }
 
   get selectedCurrencyCode() {
-    return this.selectedCurrency ? this.selectedCurrency.Code : '###';
+    return this.selectedCurrency ? this.selectedCurrency[this.codeKey] : '###';
   }
 
   get currencyId() {
-    return this.selectedCurrency && this.selectedCurrency.Id;
+    return this.selectedCurrency && this.selectedCurrency[this.itemKey];
   }
 
   get selectedCurrency() {
     if (!this.currency || !this.currenciesList) {
       return this.currenciesList.find(({ IsDefault }) => IsDefault) || null;
     }
-    return this.currenciesList.find(({ Id }) => this.currency.Id === Id);
+    return this.currenciesList.find((itm) => this.currency[this.itemKey] === itm[this.itemKey]);
   }
 
   setValue (val) {