@itfin/components 1.2.87 → 1.2.89

package/src/components/popover/IconPopover.vue

@@ -1,5 +1,5 @@
 <template>
-  <itf-popover :visible.sync="value" ref="popover" :trigger="trigger" custom-class="nopadding" :placement="placement">
+  <itf-popover :visible.sync="isVisible" ref="popover" :trigger="trigger" custom-class="nopadding" :placement="placement">
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>
     </template>
@@ -27,12 +27,12 @@
         </itf-button>
       </div>
 
-      <div class="itf-select-popover__scroll text-start">
+      <div v-if="isVisible" class="itf-select-popover__scroll text-start">
         <template v-if="!search && recentIcons.length">
           <div class="py-1 text-muted">Recent</div>
           <div class="d-flex align-items-start flex-wrap flex-grow-0">
             <itf-button v-for="icon of recentIcons" :key="icon" icon v-tooltip="icon" @click="onSelectIcon(icon)">
-              <itf-icon :name="icon" />
+              <itf-mdi-icon :name="icon" />
             </itf-button>
           </div>
 
@@ -40,7 +40,7 @@
         </template>
         <div class="d-flex align-items-start flex-wrap flex-grow-0">
           <itf-button v-for="icon of iconsList" :key="icon" icon v-tooltip="icon" @click="onSelectIcon(icon)">
-            <itf-icon :name="icon" />
+            <itf-mdi-icon>{{ icon }}</itf-mdi-icon>
           </itf-button>
         </div>
         <div v-if="!iconsList.length" class="text-muted pt-1">
@@ -70,9 +70,10 @@
   }
 </style>
 <script>
-import { Vue, Component, Prop, PropSync } from 'vue-property-decorator';
+import { Vue, Component, Model, Prop, PropSync } from 'vue-property-decorator';
 import itfPopover from './Popover';
 import itfIcon from '../icon/Icon';
+import itfMdiIcon from '../icon/MdiIcon';
 import iconsList from '../icon/icons';
 import itfButton from '../button/Button';
 import itfTextField from '../text-field/TextField.vue';
@@ -81,33 +82,38 @@ import tooltip from '../../directives/tooltip';
 const RECENT_ITEMS_KEY = 'itfSelectPopoverRecent';
 
 export default @Component({
-  name: 'itfSelectPopover',
+  name: 'itfIconPopover',
   directives: {
     tooltip
   },
   components: {
     itfIcon,
+    itfMdiIcon,
     itfPopover,
     itfButton,
     itfTextField
   },
 })
-class itfSelectPopover extends Vue {
-  @PropSync('visible') value;
+class itfIconPopover extends Vue {
+  @Model('input') value;
   @Prop({ type: String, default: '' }) title;
   @Prop({ type: Boolean, default: '' }) removable;
   @Prop({ type: String, default: 'bottom', validator: (value) => ['bottom', 'left', 'right', 'top'].includes(value) }) placement;
   @Prop({ type: String, default: 'click', validator: (value) => ['click', 'focus', 'hover', 'manual'].includes(value) }) trigger;
 
+  isVisible = false;
   search = '';
+  icons = [];
   recentIcons = [];
 
-  created() {
+  async created() {
     this.recentIcons = this.getRecentIcons();
+    this.icons = await import('@mdi/js');
   }
 
   get iconsList() {
-    return Object.keys(iconsList).filter((icon) => icon.includes(this.search.toLowerCase()));
+    // from cames case
+    return Object.keys(this.icons).map(key => key.replace(/([A-Z])/g, '-$1').toLowerCase()).filter((icon) => icon.includes(this.search.toLowerCase()));
   }
 
   onSelectIcon(icon) {

package/src/components/select/Select.vue

@@ -82,7 +82,7 @@
         </slot>
 
         <slot name="spinner" v-bind="scope.spinner">
-          <div v-show="mutableLoading" class="itf-spinner itf-select__loader">Loading...</div>
+          <div v-show="mutableLoading" class="itf-spinner itf-select__loader">{{ $t('components.select.loading') }}</div>
         </slot>
       </div>
     </div>
@@ -127,7 +127,7 @@
         </li>
         <li v-if="filteredOptions.length === 0" class="vs__no-options text-muted">
           <slot name="no-options" v-bind="scope.noOptions"
-          ><span v-if="!mutableLoading">Sorry, no matching options.</span></slot
+          ><span v-if="!mutableLoading">{{ $t('components.select.noOptions') }}</span></slot
           >
         </li>
         <slot name="list-footer" v-bind="scope.listFooter" />

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="itf-money-field">
+  <div class="itf-money-field" :class="{'currency-arrow': !currencyDisabled}">
     <div :style="`--itf-money-field-padding-left: ${selectedCurrencySymbol.length * 0.6 + 1}rem`">
       <span class="itf-money-field__prepend">{{ selectedCurrencySymbol }}</span>
       <itf-text-field
@@ -12,7 +12,7 @@
     </div>
 
     <div v-if="currencySelect" class="itf-money-field__currency">
-      <span>{{ selectedCurrencyCode }}</span>
+      <span>{{ selectedCurrencyCode }}<itf-icon v-if="!currencyDisabled" name="chevron_down" /></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 }}
@@ -33,6 +33,11 @@
       padding-right: 4rem;
     }
   }
+  &.currency-arrow {
+    .itf-text-field input {
+      padding-right: 4.5rem;
+    }
+  }
 
   &__prepend {
     z-index: 6;
@@ -64,10 +69,12 @@ import { Component, Emit, Model, Prop, Vue } from 'vue-property-decorator';
 import itfTextField from './TextField';
 import itfSelect from '../select/Select';
 import itfLabel from '../form/Label';
+import itfIcon from '../icon/Icon';
 
 export default @Component({
   name: 'itfMoneyField',
   components: {
+    itfIcon,
     itfLabel,
     itfSelect,
     itfTextField

package/src/helpers/formatters.js

@@ -33,6 +33,9 @@ export function parseHours (str, { hoursInDay } = { hoursInDay: 8 }) {
 }
 
 export function formatDate (date, inputFormat = 'yyyy-MM-dd', toFormat) {
+  if (!date) {
+    return date;
+  }
   return DateTime.fromFormat(date, inputFormat).toFormat(toFormat || ITFSettings.defaultDisplayDateFormat);
 }
 

package/src/locales/en.js

@@ -57,6 +57,10 @@ module.exports = {
   close: 'Close',
   wholeYear: 'Whole year',
 
+  select: {
+    loading: 'Loading...',
+    noOptions: 'Select an option or create a new one',
+  },
   modal: {
     delete: 'Delete',
     cancel: 'Cancel',
@@ -83,5 +87,9 @@ module.exports = {
     areYouSureYouWantToDeleteThisField: 'Are you sure you want to delete this property?',
     customizePage: 'Customize page',
     type: 'Type',
+    options: 'Options',
+    addOption: 'Add an option',
+    showMoreProperties: '{n} more property|{n} more properties',
+    hideMoreProperties: 'Hide {n} property|Hide {n} properties',
   }
 };