@itfin/components 1.2.85 → 1.2.87

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

@@ -0,0 +1,112 @@
+<template>
+  <div class="itf-money-field">
+    <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"
+      />
+    </div>
+
+    <div v-if="currencySelect" class="itf-money-field__currency">
+      <span>{{ selectedCurrencyCode }}</span>
+      <select v-if="!disabled && !currencyDisabled" :value="currencyId" @input="onCurrencyChanged">
+        <option v-for="currency in currencies" :key="currency.Id" :value="currency.Id" :selected="currencyId === currency.Id">
+          {{ currency.Symbol }}, {{ currency.Code }} - {{ currency.Title }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.itf-money-field {
+  position: relative;
+
+  .itf-text-field input {
+    padding-left: var(--itf-money-field-padding-left, 1.5rem);
+    padding-right: 3rem;
+
+    &.is-invalid, &.is-valid {
+      padding-right: 4rem;
+    }
+  }
+
+  &__prepend {
+    z-index: 6;
+    position: absolute;
+    left: .75rem;
+    top: .5rem;
+  }
+  &__currency {
+    z-index: 6;
+    position: absolute;
+    right: .75rem;
+    top: .5rem;
+    .is-invalid &, .is-valid & {
+      right: 1.75rem;
+    }
+
+    select {
+      position: absolute;
+      top: 0;
+      right: 0;
+      opacity: 0;
+      left: 0;
+    }
+  }
+}
+</style>
+<script>
+import { Component, Emit, Model, Prop, Vue } from 'vue-property-decorator';
+import itfTextField from './TextField';
+import itfSelect from '../select/Select';
+import itfLabel from '../form/Label';
+
+export default @Component({
+  name: 'itfMoneyField',
+  components: {
+    itfLabel,
+    itfSelect,
+    itfTextField
+  }
+})
+class itfMoneyField extends Vue {
+  @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;
+
+  onCurrencyChanged(e) {
+    const currency = this.currencies.find((c) => c.Id === parseInt(e.target.value));
+    this.$emit('update:currency', currency)
+  }
+
+  get selectedCurrencySymbol() {
+    return this.selectedCurrency ? this.selectedCurrency.Symbol : '#';
+  }
+
+  get selectedCurrencyCode() {
+    return this.selectedCurrency ? this.selectedCurrency.Code : '###';
+  }
+
+  get currencyId() {
+    return this.selectedCurrency && this.selectedCurrency.Id;
+  }
+
+  get selectedCurrency() {
+    if (!this.currency || !this.currencies) {
+      return null;
+    }
+    return this.currencies.find(({ Id }) => this.currency.Id === Id);
+  }
+
+  @Emit('input')
+  setValue (val) {
+  }
+}
+</script>

package/src/components/text-field/index.stories.js

@@ -0,0 +1,53 @@
+import { storiesOf } from '@storybook/vue';
+import itfMoneyField from './MoneyField.vue';
+import itfForm from '../form/Form.vue';
+import itfButton from '../button/Button.vue';
+import itfIcon from '../icon/Icon.vue';
+import itfLabel from '../form/Label.vue';
+import itfApp from '../app/App.vue';
+
+storiesOf('Common', module)
+  .add('Fields', () => ({
+    components: {
+      itfApp,
+      itfIcon,
+      itfForm,
+      itfButton,
+      itfLabel,
+      itfMoneyField
+    },
+    data() {
+      return {
+        value: 100,
+        currencies: [
+          { Id: 1, Symbol: '$', Code: 'USD', Title: 'Dollar' },
+          { Id: 2, Symbol: 'ER', Code: 'EUR', Title: 'Euroooo' },
+          { Id: 4, Symbol: 'ERO', Code: 'EUR', Title: 'Euroooo' },
+          { Id: 3, Symbol: ".د.ب", Code: 'AED', Title: 'Emirati Dirham' },
+        ],
+        currency: null
+      }
+    },
+    methods: {
+    },
+    template: `<div>
+      <p>You need wrap whole application with this tag</p>
+
+      <h2>Usage</h2>
+
+  <pre>
+
+  </pre>
+
+      <h2>Example</h2>
+
+      <itf-app ref="app">
+
+        {{value}}
+        {{currency}}
+
+        <itf-money-field v-model="value" :currencies="currencies" :currency.sync="currency" />
+
+      </itf-app>
+    </div>`,
+  }));

package/src/directives/tooltip.js

@@ -11,7 +11,7 @@ export default {
       allowHTML: true,
       theme: 'itfin',
       interactive: true,
-      delay: modifiers.delay ? 500 : [0, 500],
+      delay: 500,
       placement: 'top-start',
       appendTo: document.body,
     });

package/src/locales/en.js

@@ -56,4 +56,32 @@ module.exports = {
   addMore: 'Add more',
   close: 'Close',
   wholeYear: 'Whole year',
+
+  modal: {
+    delete: 'Delete',
+    cancel: 'Cancel',
+    save: 'Save',
+    itemHasBeenSuccessfullySaved: 'Changes have been successfully saved',
+    itemHasBeenSuccessfullyDeleted: 'Successfully deleted',
+    networkProblem: 'Network problem. Please check your network connection. The problem can also be observed during use VPN.',
+    pleaseFixTheErrorsBelowToProceed: 'Please fix the errors below to proceed.',
+  },
+  popover: {
+    noKeepIt: 'No, keep it',
+    yesDelete: 'Yes, delete',
+    areYouSureToDeleteThis: 'Are you sure want to delete this?',
+    confirmDelete: 'Confirm delete',
+  },
+  customize: {
+    editProperty: 'Edit property',
+    hideProperty: 'Hide property',
+    alwaysShow: 'Always show',
+    hideWhenEmpty: 'Hide when empty',
+    alwaysHide: 'Always hide',
+    duplicateProperty: 'Duplicate property',
+    deleteProperty: 'Delete property',
+    areYouSureYouWantToDeleteThisField: 'Are you sure you want to delete this property?',
+    customizePage: 'Customize page',
+    type: 'Type',
+  }
 };